xiaoyou-h5/pages/mine/mine.vue

<template>
	<view class="">
		<view class="bg">

		</view>
		<view class="mine position">
			<view class="top">
				<view class="img">
					<image :src="vuex_user.headimg?vuex_user.headimg:default_img" mode=""></image>
					<!-- <open-data type="userAvatarUrl"></open-data> -->
				</view>
				<view class="info">
					<view class="name">
						{{vuex_user.name?vuex_user.name:'--'}}
						<image src="../../static/images/edit.png" mode="" @click="to_info()"></image>
					</view>
					<view class="grade">
						{{vuex_user.class ?vuex_user.class : '--'}}
						<!-- 2017级 硕士 现就职河南第一附属医院检验科 -->
					</view>
					<view class="local">
						<image src="../../static/images/local.png" mode=""></image>
						<text>{{vuex_user.work_address?vuex_user.work_address:'--'}}</text>
					</view>
					<view class="edit" @click="changePwd">
						修改密码>
					</view>
				</view>

			</view>
			<view class="center">
			<!-- 	<view class="item" @click="to_active">
					<view class="left">
						<view class="img">
							<image src="../../static/images/my_active.png" mode=""></image>
						</view>
						<text>我的活动</text>
					</view>
					<view class="right">
						<image src="../../static/images/angle-right.png" mode=""></image>
					</view>
				</view> -->
				<!-- <view class="item" @click="to_info">
					<view class="left">
						<view class="img">
							<image src="../../static/images/my_info.png" mode=""></image>
						</view>
						<text>个人信息</text>
					</view>
					<view class="right">
						<image src="../../static/images/angle-right.png" mode=""></image>
					</view>
				</view> -->
				<view class="item" @click="to_creat_news">
					<view class="left">
						<view class="img">
							<image src="../../static/images/my_account.png" mode=""></image>
						</view>
						<text>新闻发布</text>
					</view>
					<view class="right">
						<image src="../../static/images/angle-right.png" mode=""></image>
					</view>
				</view>
				<view class="item" @click="to_search">
					<view class="left">
						<view class="img">
							<image src="../../static/images/my_info.png" mode=""></image>
						</view>
						<text>查找校友</text>
					</view>
					<view class="right">
						<image src="../../static/images/angle-right.png" mode=""></image>
					</view>
				</view>

			</view>

			<view class="bottom" @click="logout" v-if="vuex_token">
				<!-- <view class="left">
				<view class="img">
					<image src="../../static/images/my_account.png" mode=""></image>
				</view>
				<text>账号设置</text>
			</view>
			<view class="right">
				<image src="../../static/images/angle-right.png" mode=""></image>
			</view> -->
				退出登录
			</view>
			<view class="bottom" v-else @click="to_login">
				去登陆
			</view>
			<view class="banben">
				v1.0.3
			</view>
		</view>
		<view class="tel" @click="contact">
			联系我们
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				default_img: '../../static/images/default.jpg',
				phone: ''
			}
		},
		onShow() {
			// if (this.vuex_token == '') {
			// 	console.log(11111111111)
			// 	uni.reLaunch({
			// 		url: '../login/index'
			// 	})
			// }
		},
		onLoad() {

			this.getSetting()
		},
		methods: {
			//获取配置
			getSetting() {
				this.$u.post('/setting', {
					keys: 'FOOTER_TEL',
				}).then(res => {
					console.log(res.data.FOOTER_TEL, 'set')
					this.phone = res.data.FOOTER_TEL
				})
			},

			to_active() {
				if (this.vuex_token != '') {
					uni.navigateTo({
						url: 'my_active'
					})
				} else {
					uni.reLaunch({
						url: '../login/index'
					})
				}
				
			},
			to_info() {
				uni.navigateTo({
					url: '/pages/mine/my_info'
				})
			},
			to_search() {
				if (this.vuex_token != '') {
					uni.navigateTo({
						url: '/pages/mine/search'
					})
				} else {
					uni.reLaunch({
						url: '../login/index'
					})
				}
				
			},
			logout() {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定退出登录吗？',
					success: function(res) {
						if (res.confirm) {
							that.$u.get('/auth/logout').then(res => {
								that.$u.vuex('vuex_token', '');
								that.$u.vuex('vuex_user', '');
								console.log(res)
								uni.reLaunch({
									url: '../index/index'
								})
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				// this.$u.get('/auth/logout').then(res=>{
				// 	console.log(res)
				// })
			},
			to_login() {
				uni.reLaunch({
					url: '../login/index'
				})
			},
			to_creat_news() {
				console.log(this.vuex_token, '000000000')
				if (this.vuex_token != '') {
					uni.navigateTo({
						url: 'creat_news'
					})
				} else {
					uni.reLaunch({
						url: '../login/index'
					})
				}
			},
			//修改密码
			changePwd() {
				if (this.vuex_token != '') {
					uni.navigateTo({
						url: 'change_pwd'
					})
				} else {
					uni.reLaunch({
						url: '../login/index'
					})
				}

			},
			//联系我们
			contact() {
				uni.makePhoneCall({
					phoneNumber: this.phone
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #F9F9FB;


	}

	.tel {
		position: fixed;
		bottom: 80px;
		right: 20px;
		width: 50px;
		height: 50px;
		line-height: 20px;
		padding: 5px;
		z-index: 2;
		background-color: rgba($color: #84705E, $alpha: 0.8);
		color: #fff;
		border-radius: 50%;
		text-align: center;
	}

	.mine {
		// height: 100vh;
		// background: url(../../static/images/bg.png) no-repeat;
		// background-position: center;


		.top {
			// margin-top: 35px;
			padding: 35px 32px 0;
			display: flex;

			.img {
				flex-shrink: 0;
				width: 85px;
				height: 85px;
				overflow: hidden;
				border-radius: 50%;
				margin-right: 20px;

				image {
					width: 85px;
					height: 85px;
				}
			}

			.info {
				.name {
					font-size: 22px;
					font-family: PingFang HK;
					font-weight: 500;
					line-height: 30px;
					color: #282828;
					margin-bottom: 4px;

					image {
						width: 16px;
						height: 16px;
						margin-left: 10px;
						display: inline-block;
						vertical-align: middle;
					}
				}

				.grade {
					// height: 42px;
					font-size: 14px;
					font-family: PingFang HK;
					font-weight: 400;
					line-height: 21px;
					color: #6F6F6F;
					margin-bottom: 2px;
					overflow: hidden;
					-webkit-line-clamp: 2;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
				}

				.local {
					font-size: 12px;
					font-family: PingFang HK;
					font-weight: 400;
					line-height: 20px;
					color: #6F6F6F;
					overflow: hidden;
					-webkit-line-clamp: 2;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;

					image {
						width: 9px;
						height: 12px;
						margin-right: 5px;
					}
				}

				.edit {
					// padding: 0 20px;
					text-align: right;
					color: #84705E;
				}
			}
		}

		.center {
			background-color: #fff;
			box-shadow: 0px 8px 12px rgba(12, 20, 61, 0.06);
			padding: 0 33px;
			margin-top: 40px;

			.item {
				height: 74px;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.left {
					display: flex;
					align-items: center;

					.img {
						width: 32px;
						height: 32px;
						overflow: hidden;
						margin-right: 20px;

						image {
							width: 32px;
							height: 32px;
						}
					}

					text {
						font-size: 17px;
						font-family: Graphit;
						font-weight: 400;
						color: #282828;
					}
				}

				.right {
					width: 8px;
					height: 12px;

					// overflow: hidden;
					image {
						width: 8px;
						height: 12px;
					}
				}

				border-bottom: 1px solid #9DA7C0;

				border-color: rgba($color: #9DA7C0, $alpha: 0.24);

				&:last-child {
					border: none;
				}
			}
		}

		.bottom {
			background-color: #fff;
			height: 74px;
			display: flex;
			align-items: center;
			justify-content: center;
			// justify-content: space-between;
			margin-top: 36px;
			// padding: 0 33px;
			box-shadow: 0px 8px 12px rgba(12, 20, 61, 0.06);
			font-size: 18px;
			font-weight: bold;
			margin-bottom: 20px;
			// .left {
			// 	display: flex;
			// 	align-items: center;

			// 	.img {
			// 		width: 32px;
			// 		height: 32px;
			// 		overflow: hidden;
			// 		margin-right: 20px;

			// 		image {
			// 			width: 32px;
			// 			height: 32px;
			// 		}
			// 	}

			// 	text {
			// 		font-size: 17px;
			// 		font-family: Graphit;
			// 		font-weight: 400;
			// 		color: #282828;
			// 	}
			// }

			// .right {
			// 	width: 8px;
			// 	height: 12px;

			// 	// overflow: hidden;
			// 	image {
			// 		width: 8px;
			// 		height: 12px;
			// 	}
			// }

		}

		.banben {
			text-align: center;
			color: #b5b5b5;
		}
	}
</style>