ryx/pages/userCenter.vue

<template>
	<view class="userPage">
		<view class="userTop">
			<view class="topbg">
				<image src="../static/usercenter/bg.png" mode="aspectFill"></image>
			</view>

			<view class="userTop-content" v-if="loginShow">
				<view class="avatar" @click="goEndit">
					<image :src="userMsg.avatarUrl" mode="aspectFill" v-if="userMsg.avatarUrl"></image>
					<image src="/static/bghesd.png" mode="aspectFill" v-else></image>
				</view>
				<view class="userinfo" v-if="userMsg.nickName">
					<view class="getnewname">
						<text>{{userMsg.nickName}}</text>
						<text class="getnew" @click="getUserProfile()">刷新</text>
					</view>
					<view class="phonenumber">
						{{phone}}
					</view>
				</view>
				<view class="userinfo" v-if="!userMsg.nickName" @click="getUserProfile()">
					<text>点击获取头像昵称</text>
					<text style="padding-top: 10rpx;">{{phone}}</text>
				</view>
			</view>

			<view class="login" v-if="!loginShow">
				<view class="">
					日月峡森林康养旅行
				</view>
				<view class="btn" @click="gologin">
					登录
				</view>
			</view>
		</view>

		<view class="userOrder">
			<view class="flex-item" @click="goOrder(1)">
				<image mode="aspectFit" src="../static/usercenter/Tobepaid.png" style="width: 45%;margin-bottom: -5px;">
				</image>
				<view>待付款</view>
				<view class="cuicle" v-if="ordernum.unpaid"><text>{{ordernum.unpaid}}</text></view>
			</view>

			<view class="line">

			</view>
			<view class="flex-item" @click="goOrder(2)">
				<image mode="aspectFit" src="../static/usercenter/Aftersales.png"
					style="width: 45%;margin-bottom: -5px;"></image>
				<view>待出行</view>
				<view class="cuicle" v-if="ordernum.paid"><text>{{ordernum.paid}}</text></view>
			</view>
			<view class="line">

			</view>
			<view class="flex-item" @click="goOrder(3)">
				<image mode="aspectFit" src="../static/usercenter/Tobepaid1.png"
					style="width: 45%;margin-bottom: -5px;"></image>
				<view>已完成</view>
				<view class="cuicle" v-if="ordernum.completed"><text>{{ordernum.completed}}</text></view>
			</view>
			<view class="line">

			</view>
			<view class="flex-item " @click="goOrder(0)">
				<image mode="aspectFit" src="../static/usercenter/all.png" style="width: 45%;margin-bottom: -5px;">
				</image>
				<view>全部订单</view>
				<!-- <view class="cuicle" v-if="ordernum.total"><text>{{ordernum.total}}</text></view> -->
			</view>



		</view>
		<view class="" style="background-color: #FFFFFF; margin: 0 30rpx;border-radius: 8rpx;">
			<u-cell-group :border="false">
				<u-cell title="出行人" isLink size="large" :border="false" @click="goaddpeople"></u-cell>
				<u-cell title="发票" isLink size="large" :border="false" @click="goinvoice"></u-cell>
			</u-cell-group>
		</view>

		<view class="" style="background-color: #FFFFFF; margin: 20rpx 30rpx;border-radius: 8rpx 8rpx 8rpx 56rpx;">
			<u-cell-group :border="false">
				<u-cell title="客服" size="large" isLink :border="false" @click="gomes"></u-cell>
				<u-cell title="关于日月峡" size="large" isLink :border="false" @click="goaboutus"></u-cell>
			</u-cell-group>
		</view>
		<view class="signout" @click="signout" v-if="loginShow">
			退出登录
		</view>
		<view class="kefuicon">
			<button open-type="contact" type="default"
				style="background-color: transparent;border-style:none;border:0;">
				<image src="../static/usercenter/service.png" mode="widthFix"></image>
			</button>
		</view>
	</view>
</template>

<script>
	let that
	export default {
		data() {
			return {
				loginShow: this.$store.state.login,
				getuser: this.$store.state.getuser,
				userMsg: {},
				phone: '',
				ordernum: ''
			}
		},
		onLoad() {
			that = this
			this.init()

		},
		onShow() {
			this.init()
			this.initvist()
		},
		// watch:{
		// 	  "this.$store.state.token": {
		// 	      handler(newValue, oldValue) {
		// 	        console.log("单个属性监听", newValue, oldValue);
		// 	      }
		// 	    },
		// },
		methods: {
			initvist(){
				let curPage = getCurrentPages();
				let route = curPage[curPage.length - 1].route; //获取当前页面的路由
				let code=uni.getStorageSync("code")
				let obj={
					page:route,
					code:code
				}
				if(code){
					uni.$u.http.post('/api/visit/add',obj,{
						custom: {
							auth: true
						}
					}).then((res) => {
					}).catch((err) => {
					})
				}
			},
			init() {
				let token = uni.getStorageSync("token")
				if (token) {
					this.loginShow = true
					uni.$u.http.post('/api/order/count', {
						token: token
					}, {
						custom: {
							auth: true
						}
					}).then((res) => {
						that.ordernum = res
					}).catch((err) => {

					})
				}
				let userMsg = uni.getStorageSync("userMsg")
				if (userMsg) {
					this.userMsg = userMsg
				}
				let phone = uni.getStorageSync("phone")
				this.phone = phone

			},
			// 登录
			gologin() {
				uni.navigateTo({
					url: "/pages/login"
				})
			},
			// 跳转完善个人信息
			goEndit() {
				uni.navigateTo({
					url: "/pages/userCenter/userEdit"
				})
			},
			// 跳转订单列表
			goOrder(state) {
				uni.navigateTo({
					url: "/pages/order/order?state="+state
				})
			},
			//跳转出行人
			goaddpeople() {
				uni.navigateTo({
					url: "/pages/peopleList/peopleList?id=0"
				})
			},
			// 跳转发票
			goinvoice() {
				uni.navigateTo({
					url: "/pages/userCenter/invoice"
				})
			},
			// 客服
			gomes() {
				uni.navigateTo({
					url: "/pages/customerService"
				})
			},
			// 关于我们
			goaboutus() {
				uni.navigateTo({
					url: "/pages/userCenter/aboutus"
				})
			},
			// 获取用户头像
			getUserProfile() {
				var that = this;
				wx.getUserProfile({
					desc: "用于完善用户资料", // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
					success: (res) => {
						that.$toast("获取成功")
						// that.userMsg = res.userInfo; //这个我有时候获取不到，所以没管它，但先写着
						uni.setStorageSync("userMsg", res.userInfo);
						that.init()
						let setNowTime = Date.now() + 3600 * 1000 * 24 * 30;
						uni.setStorageSync("userInfoStorageTime", setNowTime);
					},
					fail: function(err) {
						console.log(err);
					},
				});
			},
			// setUserInfoStorageTime() {
			//     let nowTime = Date.now();
			//     let oldTime = uni.getStorageSync("userInfoStorageTime");
			//     let userInfo = uni.getStorageSync("userMsg");
			//     if ( userInfo.nickName != undefined && userInfo.nickName != null && userInfo.nickName != "" ) {
			//       if (oldTime && nowTime < oldTime) {
			//         that.userMsg=userInfo
			//         return;
			//       } else {
			//         that.getUserProfile();
			//       }
			//     } else {
			//       that.getUserProfile();
			//     }
		 //   },
			// })
			// 退出登录
			signout() {
				uni.showModal({
					title: "提示",
					content: "是否退出？",
					success: (res) => {
						if (res.confirm) {
							this.$toast("退出成功")
							this.ordernum = ''
							uni.removeStorageSync('token')
							uni.removeStorageSync('code')
							uni.removeStorageSync('phone')
							uni.removeStorageSync('userMsg')
							this.userMsg = {}
							this.$store.commit("setToken", "")
							this.$store.commit('getUserInfo', {})
							this.$store.commit('loginState', null)
							this.loginShow = this.$store.state.login
							this.init()
						}
					}
				})

			},

		}
	}
</script>

<style lang="less">
	page {
		background-color: #F4F4F4;
		font-size: 32rpx;
		font-family: PingFang-SC-Bold, PingFang-SC;
		position: relative;
	}

	.userPage {
		height: 100vh;
		position: relative;

		.userTop {
			position: relative;
			width: 100%;
			box-sizing: border-box;
			padding: 50rpx 30rpx 65rpx;

			.topbg {
				image {
					width: 100%;
					height: 288rpx;
					position: absolute;
					left: 0;
					top: 0;
					z-index: -1;
				}
			}

			.userTop-content {
				display: flex;
				align-items: center;
			}

			.userinfo {
				display: flex;
				flex-direction: column;
			}

			.getnewname {
				display: flex;
				align-items: center;
			}

			.getnew {
				font-size: 22rpx;
				display: block;
				margin-left: 40rpx;
				padding: 5rpx 10rpx;
				border: 1rpx solid #555555;
				border-radius: 8rpx;
			}

			.phonenumber {
				padding-top: 10rpx;
			}

			.avatar {
				width: 172rpx;
				height: 172rpx;
				border-radius: 50%;
				// background-color: pink;
				margin-right: 30rpx;
				border: 5rpx solid rgba(216, 227, 224, 0.5);

				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}

			.login {
				text-align: center;
			}

			.btn {
				width: 324rpx;
				height: 62rpx;
				line-height: 62rpx;
				background: #1E9F6A;
				border-radius: 8rpx 32rpx 8rpx 32rpx;
				color: #FFFFFF;
				margin: 40rpx auto;
			}
		}

		.userOrder {
			margin: 20rpx 30rpx;
			padding: 40rpx 0;
			border-radius: 8rpx 56rpx 8rpx 8rpx;
			background-color: #ffffff;
			display: flex;
			font-size: 22rpx;
			font-weight: bold;
			color: #141328;
			text-align: center;

			.flex-item {
				position: relative;

				.cuicle {
					top: 20rpx;
					right: 40rpx;
					position: absolute;
					width: 35rpx;
					height: 35rpx;
					line-height: 35rpx;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 18rpx;
					color: #fff;
					background-color: #1E9F6A;
				}

				flex: 1;

				image {
					width: 120rpx;
					height: 120rpx;
				}
			}

			.line {
				width: 1px;
				height: 48rpx;
				line-height: 48rpx;
				background: #141328;
				opacity: 0.29;
				margin: auto 0;
			}
		}

		.signout {
			margin: 46rpx auto 0;
			padding: 24rpx 0;
			width: 438rpx;
			text-align: center;
			background: #E6E5E5;
			border-radius: 8rpx 56rpx 8rpx 56rpx;

		}

		.kefuicon {
			button::after {
				border: none;
			}

			position: absolute;
			right: 30rpx;
			bottom: 0;

			image {
				width: 136rpx;
				height: 136rpx;
			}
		}
	}
</style>