educational_Template3/pages/user/index.vue

<template>
	<view>
		<view class="top-cont">
			<view class="top-inner">			
				<!-- 这里是状态栏 -->
				<view class="status_bar" :style="{height: statusBarHeight}"></view>
				<view class="user-info">
					<view class="left">
						<view class="head-img">
							<image :src="user.avatar==null?'/static/detault_head.jpg':user.avatar" mode="aspectFill"></image>
						</view>
						<view class="name-phone"  v-if="UserInfo">
							<view class="name">{{user.nickname}}
								<text class="fs24 ml12 base-color mb20 " v-if="user.isShow==1"
								>会员</text>
								<text class="fs24 ml12 mb20 " style="color: #666;" v-else
								>非会员</text>
							</view>
							<view class="phone">{{utils.parsePhone(user.phone)}}</view>
						</view>
						<view class="fs40 bold name-phone center " @click='getOrderCount()' 
						v-else>立即登录</view>
					</view>
					<view class="right">
						<uni-badge size="small" :text="msgNum" absolute="rightTop" type="error">
							<view class="set" @click="navgetTo('/pages_user/user/personInfo')">
								<image src="/static/set.png" mode=""></image>
							</view>
						</uni-badge>
						<!-- <uni-badge size="small" :text="msgNum" absolute="rightTop" type="error">
							<view class="msg-box" @click="navgetTo('/pages_user/user/message')">
								<image src="/static/icon-msg.png" mode=""></image>
							</view>
							
						</uni-badge> -->
					</view>
				</view>
				<!-- 我的订单 -->
				<view class="my-order" v-if="user.isShow==1">
					<view class="inner">
						<view class="title-box">
							<text class="title">我的订单</text>
							<view class="all-order" @click="showOrder('')">
								<text class="text">全部订单</text>
								<image src="/static/right_arrow.png" mode=""></image>
							</view>
						</view>
						<view class="status-box">
							<uni-badge size="small" :text=count0 absolute="rightTop" type="error">
								<view class="item" @click="showOrder('0')">
									<image src="/static/payment.png" mode=""></image>
									<text class="text">待付款</text>
								</view>
							</uni-badge>
							<uni-badge size="small" :text=count1 absolute="rightTop" type="error">
							<view class="item" @click="showOrder('1')">
								<image src="/static/send_goods.png" mode=""></image>
								<text class="text">待发货</text>
							</view>
							</uni-badge>
							<uni-badge size="small" :text=count2 absolute="rightTop" type="error">
							<view class="item" @click="showOrder('2')">
								<image src="/static/sou_goods.png" mode=""></image>
								<text class="text">待收货</text>
							</view>
							</uni-badge>
							<view class="item" @click="showOrder('3')">
								<image src="/static/completed.png" mode=""></image>
								<text class="text">已完成</text>
							</view>
							<uni-badge size="small" :text=afterSalesCount absolute="rightTop" type="error">
							<view class="item" @click="navgetTo('/pages_user/user/refundOrderList')">
								<image src="/static/after_sales.png" mode=""></image>
								<text class="text">售后/退款</text>
							</view>
							</uni-badge>
						</view>
					</view>
				</view>

				<view class="content">
					<!-- 常用工具 -->
					<view class="used-tools">
						<view class="title">我的服务</view>
						
						<view class="my-modules">
							<view class="module-item" @click="navgetTo('/pages/learn/index')">
								<image class="bg" src="/static/bg_myclass.png" mode="aspectFill"></image>
								<image class="icon" src="/static/icon_myclass.png" mode=""></image>
								<view class="module-info">
									<text class="m-title">我的课程</text>
									<view class="m-desc">开始学习<image class="desc-icon" src="/static/icon_direction_right2.png" mode=""></image></view>
								</view>
							</view>
							<view class="module-item" @click="navgetTo('')">
								<image class="bg" src="/static/bg_video.png" mode="aspectFill"></image>
								<image class="icon" src="/static/icon_video.png" mode=""></image>
								<view class="module-info">
									<text class="m-title">我的收藏</text>
									<view class="m-desc color">立即查看<image class="desc-icon" src="/static/icon_direction_right.png" mode=""></image></view>
								</view>
							</view>
						</view>
						
						<view class="tools-list">
							<view class="item no-marin-bottom" @click="navgetTo('/pages_user/user/storeProductRelation')">
								<image src="/static/footprint.png" mode=""></image>
								<text class="text">我的足迹</text>
							</view>
							<view class="item" @click="navgetTo('/pages_user/user/address')" v-if="user.isShow==1">
								<image src="/static/address.png" mode=""></image>
								<text class="text">收货地址</text>
							</view>
							<view class="item no-marin-bottom" @click="navgetTo('/pages_user/user/integral')">
								<image src="/static/integral.png" mode=""></image>
								<text class="text">积分管理</text>
							</view>
							<view class="item no-marin-bottom"  @click="navgetTo('/pages_shopping/shopping/myCoupon')">
								<image src="/static/mycoupon.png" mode=""></image>
								<text class="text">优惠券</text>
							</view>
							
							<view class="item no-marin-bottom"  @click="navgetTo('/pages/home/cert')">
								<image src="/static/qualification.png" mode=""></image>
								<text class="text">资质证书</text>
							</view>
								
							<view class="item no-marin-bottom">
								<image src="/static/customer1.png" mode=""></image>
								<text class="text">专属客服</text>
								<button class="contact-btn" open-type="contact"></button>
							</view>
							<view class="item no-marin-bottom" @click="openH5('userRegister')">
								<image src="/static/service_file.png" mode=""></image>
								<text class="text">用户协议</text>
							</view>
							<view class="item no-marin-bottom align-top"  @click="openH5('userPrivacy')">
								<image src="/static/advice.png" mode=""></image>
								<text class="text">隐私保护</text>
							</view>
							<!-- <view v-if="user.isPromoter==0" class="item no-marin-bottom"  @click="navgetTo('/pages_user/user/userTuiAdd')">
								<image src="/static/my_promotion.png" mode=""></image>
								<text class="text">申请健康大使</text>
							</view> -->
							<!-- <view v-if="user.isPromoter==1" class="item no-marin-bottom"  @click="navgetTo('/pages_user/user/userTui')">
								<image src="/static/my_promotion.png" mode=""></image>
								<text class="text">我的推广</text>
							</view> -->
							
							<view class="item no-marin-bottom" @click="toManager()">
								<image src="/static/sale_file.png" mode=""></image>
								<text class="text">制单管理</text>
							</view>
							<!-- <view class="item no-marin-bottom" @click="toManagerCourse()">
							 	<image src="/static/sale_file.png" mode=""></image>
							 	<text class="text">销售管理</text>
							 </view> -->
						</view>
					</view>
				</view>
				<!-- <view class="banner">
					<image src="https://hos-1309931967.cos.ap-chongqing.myqcloud.com/fs/20221125/71ddd95044bb46d5b27e19a5f61cf5ab.png"></image>
					<view class="tel_btn" @click="callService()"></view>
				</view> -->
				<view style="padding-bottom: 20rpx;" v-if="UserInfo">
					<view @tap="loginOUt" class="log-out x-c" >退出登录</view>
				</view>
				<!-- <view class="like-product">
					<likeProduct  ref="product" />
				</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/detault_head.png"
				},
				// 状态栏的高度
				statusBarHeight: uni.getStorageSync('menuInfo').statusBarHeight,
				// 消息数量
				msgNum: 0,
				UserInfo:uni.getStorageSync('AppToken')
			};
		},
		watch: {
		    UserInfo() {
		        return uni.getStorageSync('AppToken')
		    }
		},
		onLoad() {
			console.log("onload")
		},
		onShow() {
			console.log("onshow")
			this.UserInfo = uni.getStorageSync('AppToken') // 强制更新登录状态
			if(this.UserInfo){
				this.getUserInfo()
			}else{
				// this.isuser=true
			}
			// this.getUserInfo();
			// this.getOrderCount();
		},
		onReachBottom() {
			console.log("onReachBottom")
			this.$refs.product.getGoodsProducts();
		},
		methods: {
			callService(){
				let orderKey='5d81cf01-6f8d-4e1a-ae7a-dbc26c965b01';
				uni.navigateTo({
					url: '/pages_company/order/confirmOrder?orderKey='+orderKey
				})
				return;
				
				 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'
					})
				}
				
			},
			toManagerCourse(){
				if(uni.getStorageSync('ManageToken')){
					uni.navigateTo({
						url: '/pages_manage/index'
					})
				}
				else{
					uni.navigateTo({
						url: '/pages_manage/login'
					})
				}
				
			},
			openH5(url){
				var requestPath = uni.getStorageSync('requestPath');
				uni.setStorageSync('url',requestPath+url);
				uni.navigateTo({
					url: '../home/h5?data='+url
				})
			},
			getUserInfo(){
				getUserInfo().then(
					res => {
						if(res.code==200){
							if(res.user!=null){
								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
				})
			},
			loginOUt(){
				this.utils.loginOut();
				this.getUserInfo();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.top-cont{
		width: 100%;
		height: 494upx;
		position: relative;
		// background-image: url(/static/personl_top_bg.png);
		background-repeat: repeat-x;
		background-size: 40upx 100%;
		.top-inner{
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 2;
			.user-info{
				padding: 88upx 30upx 0 30upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.left{
					position: relative;
					display: flex;
					.head-img{
						width: 120upx;
						height: 120upx;
						border-radius: 50%;
						overflow: hidden;
						margin-right: 30upx;
						border: 4upx solid #FFFFFF;
						box-shadow: 0px 5px 15px 2px rgba(0,0,0,0.1);
						image{
							width: 100%;
							height: 100%;
						}
					}
					.name-phone{
						padding-top: 15upx;
						.name{
							font-size: 40upx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #111111;
							line-height: 1;
						}
						.phone{
							font-size: 28upx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #666666;
							line-height: 1;
							margin-top: 30upx;
						}
					}
				}
				.right{
					display: flex;
					align-items: center;
					justify-content: center;
					.msg-box{
						margin-left: 10upx;
						width: 44upx;
						height: 44upx;
						image{
							width: 100%;
							height: 100%;
						}
					}
					.set{
						
						width: 44upx;
						height: 44upx;
						image{
							width: 100%;
							height: 100%;
						}
					}
				}
				
			}
			.my-order{
				padding: 50upx 20upx 0;
				.inner{
					box-sizing: border-box;
					height: 245upx;
					// height: 105upx;
					background: #FFFFFF;
					border-radius: 16upx;
					padding: 40upx 30upx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.title-box{
						display: flex;
						align-items: center;
						justify-content: space-between;
						.title{
							font-size: 34upx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #222222;
							line-height: 1;
						}
						.all-order{
							display: flex;
							align-items: center;
							.text{
								font-size: 26upx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #999999;
								line-height: 1;
								margin-right: 8upx;
							}
							image{
								width: 14upx;
								height: 24upx;
							}
						}
					}
					.status-box{
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: 0 10upx;
						.item{
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: center;
							image{
								width: 40upx;
								height: 40upx;
								margin-bottom: 18upx;
							}
							.text{
								font-size: 26upx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #111111;
								line-height: 1;
							}
						}
					}
				}
			}
			
		}
	}
	.content{
		margin-top: 20upx;
		padding: 0 20upx;
		display: flex;
		align-items: center;
		justify-content: center;
		.used-tools{
			box-sizing: border-box;
			background: #FFFFFF;
			border-radius: 16upx;
			padding: 40upx 30upx;
			width: 100%;
			.title{
				font-size: 34upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #222222;
				line-height: 1;
			}
			.my-modules {
				display: flex;
				justify-content: space-between;
				margin-top: 40upx;
				.module-item {
					position: relative;
					width: 310upx;
					height: 140upx;
					border-radius: 16upx;
					overflow: hidden;
					display: flex;
					align-items: center;
					justify-content: space-around;
					z-index: 2;
					.icon{
						// position: absolute;
						// top: 20upx;
						// left: 20upx;
						width: 64upx;
						height: 64upx;
					}
					.bg {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						z-index: -1;
					}
					.module-info {
						position: relative;
						z-index: 1;
						padding: 25upx 20upx;
						display: flex;
						flex-direction: column;
						.m-title {
							font-size: 30upx;
							font-weight: bold;
							color: #222222;
						}
						.m-desc {
							display: flex;
							align-items: center;
							font-size: 22upx;
							color: #6154DC;
							margin-top: 10upx;
							&.color{
								color: #F5723A;
							}
							.desc-icon{
								width: 24upx;
								height: 24upx;
								margin-left:4upx;
							}
						}
					}
				}
			}
			.tools-list{
				margin-top: 50upx;
				display: flex;
				flex-wrap: wrap;
				width: 100%;
				.item{
					box-sizing: border-box;
					width: 25%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					margin-bottom: 50upx;
					position: relative;
					image{
						width: 44upx;
						height: 44upx;
					}
					.text{
						font-size: 24upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #111111;
						line-height: 1;
						margin-top: 20upx;
					}
					.contact-btn{
						display: inline-block;
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						opacity: 0;
					}
				}
			}
		}
	}
	.log-out{
		height: 80upx;
		line-height: 80upx;
		text-align: center;
		font-size: 26upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		background: #FFFFFF;
		border-radius: 16upx;
		margin-top: 20upx;
	}
	.sub-btn{
		position: absolute;
		width: 100%;
		height: 100%;
		opacity: 0;
	}
	.like-product{
		padding: 0 20rpx;
	}
	.banner{
		padding: 20rpx 20rpx 0rpx 20rpx;
		height: 200rpx;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		image{
			width:100%;
			height: 100%;
		}
		.tel_btn{
			width: 100%;
			height: 100%;
			top:0upx;
			position: absolute;
			opacity:0.0;
		}
	}
	
	.log-out{
		height: 100rpx;line-height: 100rpx;
		margin: 10px;
		border-radius: 20rpx;
	}
	
</style>