pet-front-order/pages/personalCenter/index.vue

<template>
	<view class="personal-index">
		<view class="personal-base-info">
			<view style="width: 100%;height: 140px; margin-top: 10px;">
				<view style="width: 100%;text-align: center;">
					<img src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/index/avatar_1.png" 
					style="width: 66px; height: 66px;" mode="widthFix"></img>
				</view>
				<!-- <view style="width: 100%;text-align: center;">
					<img src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/index/cmdf_text.png"style="width:55px;height: 16px;" mode="widthFix"></img>
				</view>
				 -->
				<view class="personal-user">
					<view class="personal-user-level">
						{{userLevel}}
					</view>
					<view class="personal-user-name">
						{{userName}}
					</view>
					<view style="width: 62px;margin-left: 15px;"> </view>
				</view>
			</view>
			<view style="padding: 0 15px; width: 100%;">
				<view class="personal-progress" @click="openOtherPage('member')">
					<view class="progress-text">
						{{consumption}}
						<!-- 累计消费{{spent}}元（{{startDate}}起至今） -->
					</view>
					<view class="progress">
						<view class="progress-box">
							<progress :percent="process" activeColor="#FFAA48" backgroundColor="#ffffff" border-radius="28px" stroke-width="5" />
						</view>
					</view>
					<view class="progress-text" v-if="userLevel!='金卡会员'">
						到{{promotionDate}}前
						<text style="font-weight: bold;font-size: 14px;">
							再消费{{amountNeeded}}元
						</text>即可升级至
						<text style="font-weight: bold;font-size: 14px;">{{nextLevel}}</text>
					</view>
				</view>
			</view>
			<view class="personal-stat">
				<view class="personal-stat-box">
					<view class="personal-stat-box-left"  @click="openOtherPage('point')">
						<view class="personal-stat-box-label">
							积分
						</view>
						<view class="personal-stat-box-value">
							{{point}}
						</view>
					</view>
					<view class="personal-stat-box-right">
						<img src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/index/point.png" alt="point" class="personal-stat-box-img" mode="widthFix"/>
					</view>
					<view class="personal-stat-box-bottom">
						查看历史明细
					</view>
				</view>
				<view class="personal-stat-box" @click="openOtherPage('collect')">
					<view class="personal-stat-box-left">
						<view class="personal-stat-box-label">
							集点
						</view>
						<view class="personal-stat-box-value">
							{{collect}}
						</view>	
					</view>
					<view class="personal-stat-box-right">
						<img src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/index/collect.png" alt="collect" class="personal-stat-box-img" mode="widthFix"/>
					</view>
					<view class="personal-stat-box-bottom">
						下单获得好礼
					</view>
					
				</view>
				<view class="personal-stat-box" @click="openOtherPage('coupon')">
					<view class="personal-stat-box-left">
						<view class="personal-stat-box-label">
							卡券
						</view>
						<view class="personal-stat-box-value">
							{{coupon}}
						</view>	
					</view>
					<view class="personal-stat-box-right">
						<img src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/index/coupon.png" alt="coupon" class="personal-stat-box-img" mode="widthFix"/>
					</view>
					<view class="personal-stat-box-bottom">
						我的卡券数量
					</view>
				</view>
			</view>
			<view class="personal-order">
				<uni-card margin="0 15px 10px" :is-shadow="false">
					<view class="personal-order-title" slot="title">
						<view class="personal-order-title-text">
							订单状态
						</view>
						<view class="personal-order-title-link" @click="openOtherPage('order')">
							全部订单 <uni-icons type="right" size="14px" color="#AAA"></uni-icons>
						</view>
					</view>
					<view v-if="isMember">
						<view style="padding-bottom: 10px;">
							<view style="color: #AAA;
								font-size: 14px;
								text-align: center;
								margin-bottom: 10px;">
								当前订单
							</view>
							<uni-steps :options="orderStatus" active-icon="checkbox" :active="active" active-color='#ffaa48' />
						</view>
						<view class="personal-order-footer" slot="actions">
							<view class="personal-order-footer-text">
								{{service}} 
								<view style="color: #AAA;font-size: 12px;"> (本次服务共{{days}}天) </view>
							</view>
							<view class="personal-order-footer-text">
								￥{{amount}}
							</view>
						</view>
					</view>
					<view v-else class="personal-order-login-btn" >
						<u-button type="primary" 
							open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber"
							shape="circle" :plain="true" 
							:hairline="true" color="#FFAA48" 
							text="登录后方可预约" 
							@click="toRegister"></u-button>
					</view>
					
				</uni-card>
			</view>
			<view class="personal-functions">
				<uni-card margin="0 15px 10px" :is-shadow="false">
					<view class="personal-function-title" slot="title">
						<view class="personal-function-title-text">
							常用功能
						</view>
					</view>
					<view class="personal-functions-content">
						<view v-for="(item,index) in functions" :key="index" class="personal-function" @click="openOtherPage(item.path)">
							<img :src="item.icon" alt="item.label" style="width: 30px; height: 30px;" mode="widthFix" />
							<view class="personal-function-name">{{item.label}}</view>
						</view>
					</view>
				</uni-card>
			</view>
		</view>
		
	</view>
</template>

<script>
	import {getOpenId,getPhoneNumber} from "@/api/system/user.js"
	import { setToken,getToken,getOpenIdKey,setOpenIdKey } from '@/utils/auth'
	import {getPersonalInfo} from "@/api/system/personal.js"
	export default{
		data(){
			return{
				userName:'',
				userLevel:'',
				process:0,
				spent:0,
				cost:0,
				consumption:'',
				promotion:'',
				point:0,
				collect:'0/10',
				coupon:0,
				active: 0,
				isMember:false,
				orderStatus: [{
					activeImg:'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/index/sentedOrder.png',
					deactiveImg:'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/index/sentOrder.png',
					title: '待派单'
				}, {
					activeImg:'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/index/ordered.png',
					deactiveImg:'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/index/order.png',
					title: '已派单'
				}, {
					activeImg:'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/index/serviced.png',
					deactiveImg:'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/index/service.png',
					title: '服务中'
				}, {
					activeImg:'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/index/overed.png',
					deactiveImg:'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/index/over.png',
					title: '已完成'
				}],
				service:'专业喂养',
				days:0,
				amount:0,
				promotionDate:'2025年01月01日',
				nextLevel:'普卡会员',
				amountNeeded:'0',
				functions:[
					{
						icon:'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/index/pet.png',
						label: '宠物档案',
						path:'pet'
					},
					{
						icon:'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/index/serviceFile.png',
						label: '服务档案',
						path:'service'
					},
					{
						icon:'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/index/address.png',
						label: '地址电话',
						path:'address'
					},
					{
						icon:'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/index/lock.png',
						label: '门锁信息',
						path:'lock'
					}
				]
			}
			
		},
		onShow() {
			if (!getToken() || !getOpenIdKey()) {
				this.login()
			} else{
				this.getPersonalInfo()
				// this.initVisitor()
			}
		},
		methods: {
			onGetPhoneNumber(e){  
				if(e.detail.errMsg=="getPhoneNumber:fail user deny"){       //用户拒绝授权  
		
					//拒绝授权后弹出一些提示  
		
				}else{      //允许授权  
					if(getOpenIdKey()){
						this.getPhoneNumber({"openId":getOpenIdKey(),"code":e.detail.code})
					}
					
					// debugger
					// console.log(e.detail.encryptedData)  
					// e.detail.encryptedData      //加密的用户信息  
					// e.detail.iv     //加密算法的初始向量  时要用到  
				}  
			},
			getPhoneNumber(data){
				getPhoneNumber(data).then(res=>{
					if(res&&res.code==200){
						let token = res.data.token
						setToken(token)
						this.isMember=true
					} else{
						uni.showToast({
							icon:'error',
							title:'获取手机号失败'
						})
					}
				})
			},
			login() {
				uni.login({
					provider: 'weixin',
					success: (loginRes) => {
						this.getOpenId(loginRes.code)
					},
					fail: function(error) {
						// 授权失败处理
						uni.showToast('授权失败，请授权后再试')
					}
				});
			}, 
			getOpenId(code) {
				getOpenId(code).then(res => {
					if (res.code == 200 && res.data) {
						let resData = JSON.parse(res.data)
						let token = resData.token;
						let openId = resData.openId;
						setOpenIdKey(openId)
						if(token){ 
							setToken(token)
							this.getPersonalInfo()
						}else{
							this.initVisitor()
						}
						
					}
				})
			},
			getPersonalInfo(){
				this.isMember=true
				getPersonalInfo().then(res=>{
					if(res&&(res.id || res.id === 0)){
						this.userLevel=res.level
						this.userName=res.nickname
						this.consumption=res.consumption
						this.promotion=res.promotion
						this.process=res.process*100
						this.point=res.integral
						this.collect=`${res.centralPoint}/10`
						this.coupon=res.coupon
						this.promotionDate=res.promotionDate
						this.nextLevel=res.nextLevel
						this.amountNeeded=res.amountNeeded
						if(res.h5OrderVO){
							let orderInfo= res.h5OrderVO
							if(orderInfo.status) {
								if(orderInfo.status==1){
									this.active = 0
								}else if(orderInfo.status==2){
									let date = new Date();
									let currentDate = `${date.getFullYear()}-${("0" + (date.getMonth() + 1)).slice(-2)}-${("0" + date.getDate()).slice(-2)}`;
									let serviceDate= orderInfo.orderServiceList[0]?.serviceDate
									if(serviceDate.indexOf(currentDate)>-1){
										this.active=2
									}else{
										this.active=1
									}
								}else if(orderInfo.status==3){
									this.active = 3								
								}
								this.setOrderInfo(orderInfo)
							}else{
								this.active = 0
								this.amount=0
								this.service='专业喂养'
								this.days=0
							}
						}
					}
					console.log(res)
				})
			},
			initVisitor(){
				let currentYear = new Date().getFullYear()
				this.userLevel='游客'
				this.userName='游客'
				this.consumption=`累计消费 0 元（ ${currentYear}-01-01起至今）`
				this.promotion='注册后即可享受会员权益'
				this.process=0
				this.point=0
				this.collect=`0/10`
				this.coupon=0
				this.active = 0
				this.amount=0
				this.service='专业喂养'
				this.days=0
			},
			setOrderInfo(orderInfo){
				this.amount=orderInfo.totalAmount
				this.service=orderInfo.orderItemList[0]?.productName
				let serviceDate= orderInfo.orderServiceList[0]?.serviceDate
				this.days = JSON.parse(serviceDate).length
			},
			toRegister(){
				this.$modal.showToast('敬请期待');
			},
			openOtherPage(type){
				if(!this.isMember){
					this.$modal.showToast('暂未匹配到您的会员信息，请先注册成为会员！');
					return;s
				}
				switch(type){
					case 'member':{
						// this.$modal.showToast('页面开发中');
						uni.navigateTo({
							url: `/pages/personalCenter/member`
						});
						break;
					}
					case 'point':{
						uni.navigateTo({
							url: `/pages/personalCenter/point`
						});
						break;
					}
					case 'collect':{
						uni.navigateTo({
							url: `/pages/personalCenter/collect`
						});
						break;
					}
					case 'coupon':{
						// uni.showToast({
						// 	title: '敬请期待',
						// 	duration: 3000,
						// 	icon:"none"
						// 	})
						// this.$modal.showToast('敬请期待');
						uni.navigateTo({
							url: `/pages/personalCenter/coupon`
						});
						break;
					}
					case 'order':{
						uni.navigateTo({
							url: `/pages/details/order`
						});
						break;
					}
					case 'pet':{
						uni.navigateTo({
							url: `/pages/personalCenter/pet`
						});
						break;
					}
					case 'lock':{
						uni.navigateTo({
							url: `/pages/personalCenter/lock`
						});
						break;
					}
					case 'service':{
						uni.navigateTo({
							url: `/pages/personalCenter/service`
						});
						break;
					}
					case 'address':{
						uni.navigateTo({
							url: `/pages/personalCenter/address`
						});
						break;
					}
					default:this.$modal.showToast('页面开发中');
				}
				
			}
		}
	}
</script>

<style lang="scss">
	.personal-index{
		.personal-base-info{
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
			align-content:flex-start; 
			width: 100%;
			height: 200px;
			flex-shrink: 0;
			background: linear-gradient(0deg, #F5F5F7 0%, #FFBF60 99.41%);
			.personal-user{
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 10px;
				.personal-user-name{
					text-align: center;
					color: #111;
					
					font-size: 20px;
					font-style: normal;
					font-weight: blod;
					height: 28px;
				}
				.personal-user-level{
					width: 62px;
					height: 22px;
					line-height: 22px;
					background-color: #ffaa48;
					color: #FFF;
					text-align: center;
					
					font-size: 12px;
					font-style: normal;
					font-weight: 500;
					border-radius: 20px;
					border: #FFF solid 1.5px;
					margin-right: 15px;
				}
			}
			.personal-progress{
				width: 100%;
				height: 80px;
				flex-shrink: 0;
				border-radius: 8px;
				border: 1.5px solid #FFF;
				padding: 10px;
				background: linear-gradient(107deg, #FFE0BF 8.09%, #FFECD7 21.18%, #FFF4E8 32.78%, #FFEFDE 44.88%, #FEEEDB 57.48%);
				.progress-text{
					color: #B78B43;
					text-align: center;
					
					font-size: 12px;
					font-style: normal;
					font-weight: 400;
					line-height: 20px;
				}
				.progress{
					margin: 5px 0;
				}
			}
		}
		.personal-stat{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 10px 15px;
			.personal-stat-box{
				width: 30%;
				height: 90px;
				flex-shrink: 0;
				border-radius: 8px;
				background: #FFF;
				display: flex;
				flex-wrap: wrap;
				padding: 10px;
				.personal-stat-box-right{
					width: 50%;
					height: 45px;
					text-align: right;
					.personal-stat-box-img{
						width: 34px;
						height: 34px;
					}
				}
				
				.personal-stat-box-left{
					width: 50%;
					height: 45px;
					display:flex;
					flex-flow: column; //垂直排列
					justify-content: space-between;//两端对齐
					.personal-stat-box-label{
						color: #111;
						
						font-size: 14px;
						font-style: normal;
						font-weight: 400;
						line-height: 16px;
					}
					.personal-stat-box-value{
						color: #333;
						
						font-size: 16px;
						font-style: normal;
						font-weight: 500;
						line-height: 14px;
					}
					
				}
				.personal-stat-box-bottom{
					width: 100%;
					color: #AAA;
					
					font-size: 12px;
					font-style: normal;
					font-weight: 400;
					line-height: normal;
					display: flex;
					align-items: flex-end;
				}
			}
		}
		.personal-order{
			width: 100%;
			.personal-order-title{
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1px solid #efefef;
				height: 36px;
				.personal-order-title-text{
					color: #333;
					font-size: 15px;
					font-style: normal;
					font-weight: 500;
					line-height: 16px;
				}
				.personal-order-title-link{
					color: #AAA;
					font-size: 13px;
					font-style: normal;
					font-weight: 400;
					line-height: 16px;
				}
				
			}
			.personal-order-footer{
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-top: 1px solid #efefef;
				padding-top: 10px;
				.personal-order-footer-text{
					display: flex;
					color: #333;
					font-size: 13px;
					font-style: normal;
					font-weight: 400;
					line-height: normal;
				}
			}
			.personal-order-login-btn{
				height: 100px;
				display: flex;
				justify-content: center;
				align-items: center;
				
			}
		}
		
	}
	.personal-functions{
		width: 100%;
		.personal-function-title{
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #efefef;
			height: 36px;
			.personal-function-title-text{
				color: #333;
				font-size: 15px;
				font-style: normal;
				font-weight: 500;
				line-height: 16px;
			}
			
		}
		.personal-functions-content{
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.personal-function{
				width: 24%;
				display: flex;
				justify-content: center;
				flex-wrap: wrap;
				.personal-function-name{
					color: #333;
					font-size: 14px;
					font-style: normal;
					font-weight: 400;
					line-height: normal;
					margin-top: 5px;
				}
			}
		}
	}
</style>