RiyueGorge/pages/userCenter.vue

<template>
	<view class="userPage">
		<view class="userTop">
			<image src="../static/usercenter/bg.png" mode="widthFix"></image>
			<view class="userTop-content" v-if="loginShow">
				<view class="avatar" @click="goEndit">
					
				</view>
				<view class="userinfo">
					<view class="">
						去远方Y
					</view>
					<view class="phonenumber">
						15296189206
					</view>
				</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">
			    <image mode="widthFix" src="../static/usercenter/Tobepaid.png" style="width: 45%;margin-bottom: 5px;"></image>
			         <view>待付款</view>
			</view>
			<view class="line">
				
			</view>
			<view class="flex-item" @click="goOrder">
			    <image mode="widthFix" src="../static/usercenter/Aftersales.png" style="width: 45%;margin-bottom: 5px;"></image>
			        <view>已付款</view>
			</view>
			<view class="line">
				
			</view>
			<view class="flex-item" @click="goOrder">
			    <image mode="widthFix" src="../static/usercenter/Tobepaid1.png" style="width: 45%;margin-bottom: 5px;"></image>
			     <view>已完成</view>
			</view>
			<view class="line">
				
			</view>
		    <view  class="flex-item " @click="goOrder">
		        <image mode="widthFix" src="../static/usercenter/all.png" style="width: 45%;margin-bottom: 5px;"></image>
		             <view>全部订单</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>
export default {
	data(){
		return{
			loginShow:this.$store.state.login
		}
	},
	onLoad() {
		this.init()
	},
	onShow() {
		this.init()
	},
	// watch:{
	// 	  "this.$store.state.token": {
	// 	      handler(newValue, oldValue) {
	// 	        console.log("单个属性监听", newValue, oldValue);
	// 	      }
	// 	    },
	// },
	methods: {
		init(){
			// this.loginShow=this.$store.state.login
			let token=uni.getStorageSync("token")
			// console.log(token)
			if(token){
				this.loginShow=true
			}
			// if(!token){
				
			// }
		},
		// 登录
		gologin(){
			uni.navigateTo({
				url:"/pages/login"
			})
		},
		// 跳转完善个人信息
		goEndit(){
			uni.navigateTo({
				url:"/pages/userCenter/userEdit"
			})
		},
		// 跳转订单列表
		goOrder(){
			uni.navigateTo({
				url:"/pages/order/order"
			})
		},
		//跳转出行人
		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"
			})
		},
		// 退出登录
		signout(){
			uni.removeStorageSync('token')
			uni.removeStorageSync('code')
			uni.removeStorageSync('phone')
			this.$store.commit("setToken","")
			this.$store.commit('getUserInfo',{})
			this.$store.commit('loginState',null)
			this.loginShow=this.$store.state.login
		},
		
	}
}
</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;
			image{
				width: 100%;
				position: absolute;
				left: 0;
				top: 0;
				z-index: -1;
			}
			.userTop-content{
				display: flex;
				align-items: center;
			}
			.avatar{
				width: 172rpx;
				height: 172rpx;
				border-radius: 50%;
				background-color: pink;
				margin-right: 30rpx;
			}
			.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{
				flex: 1;
			}
			.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;
			}
		}
	}
</style>