fhxnuser_uniapp_fudai_video_01/pages/user/index.vue

<template>
	<view class="container">
		<view class="bg"></view>
		<view class="top-content">
			<!-- 这里是状态栏 -->
			<view class="status_bar" :style="{height: statusBarHeight}"></view>
			<view class="top-title">个人中心</view>
		</view>

		<view class="main-content" :style="{paddingTop: `calc(${statusBarHeight} + 88rpx)`}">
			<!-- 用户信息 -->
			<view class="user-info" @click="openPersonInfo()">
				<view class="head-img">
					<image :src="!user.avatar?'/static/images/detault_head.jpg':user.avatar" mode="aspectFill"></image>
				</view>
				<view class="name-phone">
					<view class="name">{{user.nickname || '请登录'}}</view>
					<view class="phone">ID:{{user.userId || user.id || user.phone || '暂无'}}</view>
				</view>
			</view>

			<!-- 菜单列表 -->
			<view class="menu-list">
				<view class="item" @click="navgetTo('/pages_shopping/shopping/myCoupon')">
					<view class="x-f">
						<view class="icon-bg">
							<image src="../../static/images/mycoupon.png" mode="aspectFit"></image>
						</view>
						<text class="text">优惠券</text>
					</view>
					<u-icon name="arrow-right" size="20" color="#CCCCCC"></u-icon>
				</view>
				<view class="item" @click="navgetTo('/pages_user/user/storeProductRelation')">
					<view class="x-f">
						<view class="icon-bg">
							<image src="../../static/images/icon_wdzj.png" mode="aspectFit"></image>
						</view>
						<text class="text">浏览记录</text>
					</view>
					<u-icon name="arrow-right" size="20" color="#CCCCCC"></u-icon>
				</view>
				<view class="item" @click="openH5(1)">
					<view class="x-f">
						<view class="icon-bg">
							<image src="../../static/images/icon_yhxy.png" mode="aspectFit"></image>
						</view>
						<text class="text">用户协议</text>
					</view>
					<u-icon name="arrow-right" size="20" color="#CCCCCC"></u-icon>
				</view>
				<view class="item" @click="openH5(2)">
					<view class="x-f">
						<view class="icon-bg">
							<image src="../../static/images/advice.png" mode="aspectFit"></image>
						</view>
						<text class="text">隐私保护</text>
					</view>
					<u-icon name="arrow-right" size="20" color="#CCCCCC"></u-icon>
				</view>
				<view class="item">
					<view class="x-f">
						<view class="icon-bg">
							<image src="../../static/images/customer1.png" mode="aspectFit"></image>
						</view>
						<text class="text">专属客服</text>
						<button class="contact-btn" open-type="contact"></button>
					</view>
					<u-icon name="arrow-right" size="20" color="#CCCCCC"></u-icon>
				</view>
				<view class="item" @click="navgetTo('/pages_user/user/personInfo')">
					<view class="x-f">
						<view class="icon-bg">
							<image src="../../static/images/icon-set.png" mode="aspectFit"></image>
						</view>
						<text class="text">个人信息</text>
					</view>
					<u-icon name="arrow-right" size="20" color="#CCCCCC"></u-icon>
				</view>
			</view>

			<!-- 退出登录 -->
			<view class="logout-box" v-if="isLogin">
				<view class="log-out" @click="loginOUt">退出登录</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getOrderCount} from '@/api/storeOrder'
	import {getUserInfo} from '@/api/user'
	// import likeProduct from '@/components/likeProduct.vue'
	export default {
		// components: {
		// 	likeProduct
		// },
		data() {
			return {
				count0:0,
				count1:0,
				count2:0,
				afterSalesCount:0,
				user:{
					isPromoter:0,
					isWeixinAuth:0,
					phone:"",
					nickname:"请登录",
					avatarUrl:"/static/images/detault_head.png"
				},
				// 状态栏的高度
				statusBarHeight: uni.getStorageSync('menuInfo').statusBarHeight,
				// 消息数量
				msgNum: 0,
				isShowMenu: 0,
				isLogin:false,
			};
		},
		onLoad() {
			this.isShowMenu = getApp().globalData.isShowMenu
			console.log("onload")
		},
		onShow() {
			console.log("onshow")
			var that=this;
			this.isLogin = this.utils.checkToken()
			if(this.isLogin) {
				that.getUserInfo();
				that.getOrderCount();
			}
		},
		onReachBottom() {
			console.log("onReachBottom")
			this.$refs.product.getGoodsProducts();
		},
		methods: {
			loginOUt(){
				this.utils.loginOut();
				this.user = {
					isPromoter:0,
					isWeixinAuth:0,
					phone:"",
					nickname:"请登录",
					avatarUrl:"/static/images/detault_head.png"
				},
				this.getUserInfo();
			},
			openPersonInfo(){
				this.utils.isLogin().then(res => {
					uni.navigateTo({
						url:"/pages_user/user/personInfo"
					})
				})
			},
			callService(){
				 uni.makePhoneCall({
					phoneNumber:"4000717770",
					success:function(){
						console.log('拨打电话成功');
					},
					fail() {
						console.log('打电话失败了');
					}
				})
			},
			 
			getOrderCount(){
				getOrderCount().then(
					res => {
						if(res.code==200){
							this.count0=res.count0;
							this.count1=res.count1; 
							this.count2=res.count2; 
							this.afterSalesCount=res.afterSalesCount; 
						} 
					},
					rej => {}
				);
			},
			toManager(){
				if(this.utils.checkCompanyUserLoginState()){
					uni.navigateTo({
						url: '/pages_company/index'
					})
				}
				else{
					uni.navigateTo({
						url: '/pages_company/auth/login'
					})
				}
				
			},
			openH5(type){
				var requestPath = uni.getStorageSync('requestPath');
				// uni.setStorageSync('url',requestPath+url);
				uni.navigateTo({
					url: '../home/h5?type='+type
				})
			},
			getUserInfo(){
				getUserInfo().then(
					res => {
						if(res.code==200){
							if(res.user!=null){
								this.isLogin=true;
								this.user=res.user;
							}
							else{
								this.utils.loginOut();
							}
							
						}else{
							uni.showToast({
								icon:'none',
								title: "请求失败",
							});
						}
					},
					rej => {}
				);
			},
			// 跳转页面
			navgetTo(url) {
				this.utils.isLogin().then(res => {
					if(res){
						uni.navigateTo({
							url: url
						})
					}
				})
			},
			// 查看订单
			showOrder(status) {
				uni.navigateTo({
					url: '/pages_user/user/storeOrder?status=' + status
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}
	.container {
		min-height: 100vh;
		background-color: #FFFFFF;
		position: relative;
		.bg{
			width: 100%;
			height: 500rpx;
			position: absolute;
			background: linear-gradient(180deg, #DDF5E3 0%, #FFFFFF 100%);
			top: 0;
			left: 0;
		}
	}
	.top-content{
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10;
		background-color: transparent;
	}
	.status_bar {
		width: 100%;
		background-color: transparent;
	}
	.top-title{
		height: 88upx;
		line-height: 88upx;
		font-size: 36upx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #333333;
		padding-left: 30upx;
		background-color: transparent;
	}
	.main-content {
		position: relative;
		z-index: 2;
		padding: 0 40rpx;
	}
	.user-info{
		display: flex;
		align-items: center;
		padding: 40upx 0 60upx 0;
		.head-img{
			width: 140upx;
			height: 140upx;
			border-radius: 50%;
			overflow: hidden;
			margin-right: 30upx;
			background-color: #f5f5f5;
			border: 4upx solid #FFFFFF;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.name-phone{
			display: flex;
			flex-direction: column;
			justify-content: center;
			.name{
				font-size: 40upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
				line-height: 1.4;
				margin-bottom: 16rpx;
			}
			.phone{
				font-size: 26upx;
				font-family: PingFang SC;
				color: #999999;
				line-height: 1.4;
			}
		}
	}

	.menu-list{
		width: 100%;
		.item{
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30upx 0;
			position: relative;
			.x-f {
				display: flex;
				align-items: center;
			}
			.icon-bg {
				border-radius: 16rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 24rpx;
				image {
					width: 72rpx;
					height: 72rpx;
				}
			}
			.text{
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #333333;
			}
			.contact-btn{
				display: inline-block;
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				opacity: 0;
			}
		}
	}
	
	.logout-box {
		margin-top: 60rpx;
		padding-bottom: 60rpx;
		.log-out{
			width: 100%;
			height: 88upx;
			line-height: 88upx;
			text-align: center;
			font-size: 30upx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666666;
			background: #FFFFFF;
			border: 2rpx solid #EEEEEE;
			border-radius: 44upx;
		}
	}
</style>