You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
703 lines
18 KiB
703 lines
18 KiB
<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;" @click="openOtherPage('userInfo')">
|
|
<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" @click="openOtherPage('userInfo')">
|
|
{{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 class="uni-steps-btns">
|
|
<u-button
|
|
type="primary"
|
|
shape="circle"
|
|
color="#FFAA48"
|
|
text="查看图片"
|
|
@click="handleStepClick"></u-button>
|
|
</view>
|
|
</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'
|
|
},
|
|
{
|
|
icon:'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/index/lock.png',
|
|
label: '任务中心',
|
|
path:'taskList'
|
|
},
|
|
]
|
|
}
|
|
|
|
},
|
|
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('敬请期待');
|
|
},
|
|
handleStepClick(orderInfo = {}) {
|
|
// if(!this.isMember){
|
|
// this.$modal.showToast('暂未匹配到您的会员信息，请先注册成为会员！');
|
|
// return;
|
|
// }
|
|
|
|
// 如果点击的是服务中状态（索引为2）且当前订单状态也是服务中
|
|
// if (e.index === 2 && this.active === 2) {
|
|
// 跳转到订单详情页面
|
|
uni.navigateTo({
|
|
url: `/pages/personalCenter/orderDetailImage?orderId=${orderInfo.id}`
|
|
});
|
|
// }
|
|
},
|
|
openOtherPage(type){
|
|
if(!this.isMember){
|
|
this.$modal.showToast('暂未匹配到您的会员信息，请先注册成为会员！');
|
|
return;
|
|
}
|
|
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`
|
|
url: `/pages_order/order/orderList`
|
|
});
|
|
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;
|
|
}
|
|
case 'taskList':{
|
|
uni.navigateTo({
|
|
url: `/pages_order/task/taskList`
|
|
});
|
|
break;
|
|
}
|
|
case 'userInfo':{
|
|
uni.navigateTo({
|
|
url: `/pages/personalCenter/userInfo`
|
|
});
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
|
|
.uni-steps-btns{
|
|
display: flex;
|
|
justify-content: center;
|
|
.u-button{
|
|
width: 160rpx;
|
|
height: 55rpx;
|
|
margin-right: 155rpx;
|
|
.u-button__text{
|
|
font-size: 22rpx !important;
|
|
}
|
|
}
|
|
}
|
|
.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;
|
|
flex-wrap: wrap;
|
|
gap: 30rpx 0;
|
|
.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>
|