511 lines
12 KiB
Vue
511 lines
12 KiB
Vue
<template>
|
|
<view class="page flex-col">
|
|
<view class="box_1 flex-row">
|
|
<view class="image-wrapper_1 flex-col">
|
|
<image
|
|
class="image_1"
|
|
:src="isLogin ? (member.avatar ? member.avatar : '/static/images/mine/default.png') : '/static/images/mine/default.png'"
|
|
/>
|
|
</view>
|
|
<view class="text-group_1 flex-col justify-between">
|
|
<text class="text_1" v-if="isLogin" @tap="serv({type:'pages',pages:'/pages/components/pages/mine/userinfo'})">
|
|
Hi, {{ member.nickname }}
|
|
</text>
|
|
<text class="text_1" v-else @tap="login">
|
|
Hi, 游客
|
|
</text>
|
|
<text class="text_2">点击头像可以修改个人信息</text>
|
|
</view>
|
|
</view>
|
|
<view class="box_5 flex-col">
|
|
<view class="box_6 flex-row justify-between">
|
|
<!-- 积分卡片 -->
|
|
<view class="group_2 flex-col">
|
|
<text class="text_4">积分</text>
|
|
<view class="group_3 flex-row justify-between">
|
|
<text class="text_5">{{ isLogin ? member.integral : 0 }}</text>
|
|
<view class="box_7 flex-row justify-end" @tap="serv({type:'pages', pages: '/pages/components/pages/balance/bill?cate=1'})">
|
|
<text class="text_6">去兑换</text>
|
|
<image class="label_2" src="/static/images/mine/arrow_right_small.png" />
|
|
</view>
|
|
</view>
|
|
<text class="text_7">积分可用于兑换产品</text>
|
|
</view>
|
|
<!-- 优惠券卡片 -->
|
|
<view class="group_4 flex-col">
|
|
<text class="text_8">优惠券</text>
|
|
<view class="section_1 flex-row justify-between">
|
|
<text class="text_9">{{ isLogin ? member.couponCount : 0 }}</text>
|
|
<view class="block_1 flex-row justify-end" @tap="serv({type:'pages',pages:'/pages/components/pages/coupons/coupons'})">
|
|
<text class="text_10">去使用</text>
|
|
<image class="label_3" src="/static/images/mine/arrow_right_small.png" />
|
|
</view>
|
|
</view>
|
|
<text class="text_11">使用优惠券享受更多优惠</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 服务项目列表 -->
|
|
<view v-for="(item, index) in services" :key="index">
|
|
<!-- 招兵买马 -->
|
|
<view v-if="index === 0" class="box_8 flex-row" @tap="serv(item)">
|
|
<view class="image-wrapper_3 flex-col">
|
|
<image class="label_4" :src="item.image || '/static/images/mine/recruit_icon.png'" />
|
|
</view>
|
|
<text class="text_12">{{ item.name }}</text>
|
|
<image class="label_5" src="/static/images/mine/arrow_right.png" />
|
|
</view>
|
|
<!-- 订单 -->
|
|
<view v-if="index === 0" class="box_8 flex-row" @tap="serv(item)">
|
|
<view class="image-wrapper_3 flex-col">
|
|
<image class="label_4" :src="item.image || '/static/images/mine/order_icon.png'" />
|
|
</view>
|
|
<text class="text_12">{{ item.name }}</text>
|
|
<image class="label_5" src="/static/images/mine/arrow_right.png" />
|
|
</view>
|
|
|
|
<!-- 历史消费 -->
|
|
<view v-else-if="index === 1" class="box_9 flex-row" @tap="serv({type:'pages', pages: '/pages/components/pages/balance/bill?cate=0'})">
|
|
<view class="section_2 flex-col">
|
|
<image class="label_4" :src="item.image || '/static/images/mine/history_icon.png'" />
|
|
</view>
|
|
<text class="text_13">历史消费</text>
|
|
<image class="label_6" src="/static/images/mine/arrow_right.png" />
|
|
</view>
|
|
|
|
<!-- 客服 -->
|
|
<view v-else-if="index === 2" class="box_11 flex-row" @tap="serv(item)">
|
|
<view class="image-wrapper_5 flex-col">
|
|
<image class="label_7" :src="item.image || '/static/images/mine/customer_service_icon.png'" />
|
|
</view>
|
|
<text class="text_14">{{ item.name }}</text>
|
|
<image class="label_8" src="/static/images/mine/arrow_right.png" />
|
|
</view>
|
|
|
|
<!-- 地址 -->
|
|
<view v-else-if="index === 3" class="box_12 flex-row" @tap="serv(item)">
|
|
<view class="section_3 flex-col">
|
|
<image class="label_4" :src="item.image || '/static/images/mine/address_icon.png'" />
|
|
</view>
|
|
<text class="text_15">{{ item.name }}</text>
|
|
<image class="label_9" src="/static/images/mine/arrow_right.png" />
|
|
</view>
|
|
|
|
<!-- 其他服务项 -->
|
|
<view v-else class="box_14 flex-row" @tap="serv(item)">
|
|
<view class="image-wrapper_6 flex-col">
|
|
<image class="label_10" :src="item.image || '/static/images/mine/help_center_icon.png'" />
|
|
</view>
|
|
<text class="text_16">{{ item.name }}</text>
|
|
<image class="label_11" src="/static/images/mine/arrow_right.png" />
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 退出登录 -->
|
|
<view v-if="isLogin" class="box_16 flex-row" @tap="login">
|
|
<image class="label_14" src="/static/images/mine/logout_icon.png" />
|
|
<text class="text_18">退出登录</text>
|
|
<image class="label_15" src="/static/images/mine/arrow_right.png" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
ref,
|
|
computed
|
|
} from 'vue'
|
|
import { useMainStore } from '@/store/store'
|
|
import { storeToRefs } from 'pinia'
|
|
import { onLoad,onShow} from '@dcloudio/uni-app'
|
|
import { formatDateTime,kmUnit } from '@/utils/util'
|
|
import {
|
|
userGetUserInfo,
|
|
mineService
|
|
} from '@/api/user'
|
|
const main = useMainStore()
|
|
const { member,isLogin } = storeToRefs(main)
|
|
|
|
const title = ref('个人中心')
|
|
const services = ref([])
|
|
|
|
const growthValue = computed(() => {
|
|
if (!isLogin.value) return 0
|
|
const {
|
|
currentValue,
|
|
needValue
|
|
} = member.value
|
|
return currentValue / (currentValue + needValue) * 100
|
|
})
|
|
|
|
onLoad(() => {
|
|
getServices();
|
|
})
|
|
onShow(() => {
|
|
getUserInfo();
|
|
})
|
|
|
|
|
|
const getUserInfo = async() => {
|
|
if (isLogin.value) {
|
|
let data = await userGetUserInfo();
|
|
if (data) {
|
|
main.SET_MEMBER(data);
|
|
}
|
|
}
|
|
}
|
|
const getServices = async() => {
|
|
let data = await mineService();
|
|
if (data) {
|
|
services.value = data;
|
|
}
|
|
}
|
|
const makePhoneCall = (phoneNumber) => {
|
|
uni.makePhoneCall({
|
|
phoneNumber: phoneNumber,
|
|
})
|
|
}
|
|
const login = () => {
|
|
uni.navigateTo({
|
|
url: '/pages/components/pages/login/login'
|
|
})
|
|
}
|
|
const packages = () => {
|
|
if (!isLogin.value) {
|
|
login()
|
|
return
|
|
}
|
|
uni.navigateTo({
|
|
url: '/pages/components/pages/packages/index'
|
|
})
|
|
}
|
|
const serv = (item) => {
|
|
switch (item.type) {
|
|
case 'pages':
|
|
if (!isLogin.value) {
|
|
login()
|
|
return
|
|
}
|
|
uni.navigateTo({
|
|
url: item.pages
|
|
})
|
|
break;
|
|
case 'miniprogram':
|
|
uni.navigateToMiniProgram({
|
|
appId: item.app_id
|
|
})
|
|
break;
|
|
case 'menu':
|
|
uni.navigateTo({
|
|
url: '/pages/components/pages/mine/service?id=' + item.id + '&name=' + item.name
|
|
})
|
|
break;
|
|
case 'content':
|
|
uni.navigateTo({
|
|
url: '/pages/components/pages/mine/content?id=' + item.id + '&name=' + item.name
|
|
})
|
|
break;
|
|
case 'call':
|
|
makePhoneCall(item.phone)
|
|
break;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
@import './common.css';
|
|
|
|
.page {
|
|
background-color: rgba(255, 255, 255, 1);
|
|
position: relative;
|
|
width: 750rpx;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.box_1 {
|
|
position: relative;
|
|
width: 750rpx;
|
|
height: 336rpx;
|
|
background: url('/static/images/mine/background.png') 100% no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.image-wrapper_1 {
|
|
box-shadow: 0px 18px 18px 0px rgba(0, 0, 0, 0.1);
|
|
background-color: rgba(255, 255, 255, 1);
|
|
border-radius: 50%;
|
|
height: 100rpx;
|
|
border: 1px solid rgba(217, 217, 217, 1);
|
|
width: 100rpx;
|
|
margin: 170rpx 0 0 55rpx;
|
|
}
|
|
|
|
.image_1 {
|
|
width: 91rpx;
|
|
height: 89rpx;
|
|
margin: 7rpx 0 0 5rpx;
|
|
border-radius: 100%;
|
|
}
|
|
|
|
.text-group_1 {
|
|
width: 277rpx;
|
|
height: 87rpx;
|
|
margin: 176rpx 291rpx 0 27rpx;
|
|
}
|
|
|
|
.text_1 {
|
|
width: 277rpx;
|
|
height: 53rpx;
|
|
overflow-wrap: break-word;
|
|
color: rgba(82, 172, 65, 1);
|
|
font-size: 38rpx;
|
|
font-family: PingFang SC-Medium;
|
|
font-weight: 500;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
line-height: 38rpx;
|
|
}
|
|
|
|
.text_2 {
|
|
width: 277rpx;
|
|
height: 28rpx;
|
|
overflow-wrap: break-word;
|
|
color: rgba(158, 158, 158, 1);
|
|
font-size: 20rpx;
|
|
font-family: PingFang SC-Regular;
|
|
font-weight: normal;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
line-height: 20rpx;
|
|
margin-top: 6rpx;
|
|
}
|
|
|
|
.box_5 {
|
|
width: 750rpx;
|
|
height: auto;
|
|
min-height: 500rpx;
|
|
}
|
|
|
|
.box_6 {
|
|
width: 694rpx;
|
|
height: 191rpx;
|
|
margin-left: 32rpx;
|
|
}
|
|
|
|
.group_2 {
|
|
width: 331rpx;
|
|
height: 191rpx;
|
|
background: url('/static/images/mine/integral_card.png') 100% no-repeat;
|
|
background-size: 100% 100%;
|
|
justify-content: flex-center;
|
|
}
|
|
|
|
.text_4 {
|
|
width: 78rpx;
|
|
height: 36rpx;
|
|
overflow-wrap: break-word;
|
|
color: rgba(131, 126, 126, 1);
|
|
font-size: 26rpx;
|
|
font-family: PingFang SC-Regular;
|
|
font-weight: normal;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
line-height: 26rpx;
|
|
margin: 32rpx 0 0 32rpx;
|
|
}
|
|
|
|
.group_3 {
|
|
width: 174rpx;
|
|
height: 62rpx;
|
|
margin: 8rpx 0 0 32rpx;
|
|
}
|
|
|
|
.text_5 {
|
|
width: 78rpx;
|
|
height: 62rpx;
|
|
overflow-wrap: break-word;
|
|
color: rgba(0, 0, 0, 1);
|
|
font-size: 44rpx;
|
|
font-family: PingFang SC-Semibold;
|
|
font-weight: 600;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
line-height: 44rpx;
|
|
}
|
|
|
|
.box_7 {
|
|
background-color: rgba(82, 172, 65, 1);
|
|
border-radius: 12px 24px 2px 24px;
|
|
width: 88rpx;
|
|
height: 30rpx;
|
|
margin-top: 13rpx;
|
|
}
|
|
|
|
.text_6 {
|
|
width: 60rpx;
|
|
height: 28rpx;
|
|
overflow-wrap: break-word;
|
|
color: rgba(255, 255, 255, 1);
|
|
font-size: 20rpx;
|
|
font-family: PingFang SC-Regular;
|
|
font-weight: normal;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
line-height: 20rpx;
|
|
margin: 1rpx 0 0 8rpx;
|
|
}
|
|
|
|
.label_2 {
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
margin: 3rpx 0 0 -4rpx;
|
|
}
|
|
|
|
.text_7 {
|
|
width: 180rpx;
|
|
height: 28rpx;
|
|
overflow-wrap: break-word;
|
|
color: rgba(234, 183, 41, 1);
|
|
font-size: 20rpx;
|
|
font-family: PingFang SC-Regular;
|
|
font-weight: normal;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
line-height: 20rpx;
|
|
margin: -7rpx 0 32rpx 32rpx;
|
|
}
|
|
|
|
.group_4 {
|
|
width: 331rpx;
|
|
height: 191rpx;
|
|
background: url('/static/images/mine/coupon_card.png') 100% no-repeat;
|
|
background-size: 100% 100%;
|
|
justify-content: flex-center;
|
|
}
|
|
|
|
.text_8 {
|
|
width: 78rpx;
|
|
height: 36rpx;
|
|
overflow-wrap: break-word;
|
|
color: rgba(131, 126, 126, 1);
|
|
font-size: 26rpx;
|
|
font-family: PingFang SC-Regular;
|
|
font-weight: normal;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
line-height: 26rpx;
|
|
margin: 32rpx 0 0 32rpx;
|
|
}
|
|
|
|
.section_1 {
|
|
width: 145rpx;
|
|
height: 62rpx;
|
|
margin: 8rpx 0 0 32rpx;
|
|
}
|
|
|
|
.text_9 {
|
|
width: 45rpx;
|
|
height: 62rpx;
|
|
overflow-wrap: break-word;
|
|
color: rgba(0, 0, 0, 1);
|
|
font-size: 44rpx;
|
|
font-family: PingFang SC-Semibold;
|
|
font-weight: 600;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
line-height: 44rpx;
|
|
}
|
|
|
|
.block_1 {
|
|
background-color: rgba(82, 172, 65, 1);
|
|
border-radius: 12px 24px 2px 24px;
|
|
width: 88rpx;
|
|
height: 30rpx;
|
|
margin-top: 13rpx;
|
|
}
|
|
|
|
.text_10 {
|
|
width: 60rpx;
|
|
height: 28rpx;
|
|
overflow-wrap: break-word;
|
|
color: rgba(255, 255, 255, 1);
|
|
font-size: 20rpx;
|
|
font-family: PingFang SC-Regular;
|
|
font-weight: normal;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
line-height: 20rpx;
|
|
margin: 1rpx 0 0 8rpx;
|
|
}
|
|
|
|
.label_3 {
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
margin: 3rpx 0 0 -4rpx;
|
|
}
|
|
|
|
.text_11 {
|
|
width: 180rpx;
|
|
height: 28rpx;
|
|
overflow-wrap: break-word;
|
|
color: rgba(82, 172, 65, 1);
|
|
font-size: 20rpx;
|
|
font-family: PingFang SC-Regular;
|
|
font-weight: normal;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
line-height: 20rpx;
|
|
margin: -7rpx 0 32rpx 32rpx;
|
|
}
|
|
|
|
.box_8, .box_9, .box_11, .box_12, .box_14, .box_16 {
|
|
width: 686rpx;
|
|
height: 48rpx;
|
|
margin: 64rpx 0 0 32rpx;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
|
|
.box_8 {
|
|
margin-top: 60rpx;
|
|
}
|
|
|
|
.image-wrapper_3, .section_2, .image-wrapper_5, .section_3, .image-wrapper_6 {
|
|
background-color: rgba(255, 255, 255, 1);
|
|
height: 48rpx;
|
|
width: 48rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.label_4, .label_7, .label_10, .label_14 {
|
|
width: 38rpx;
|
|
height: 38rpx;
|
|
}
|
|
|
|
.text_12, .text_13, .text_14, .text_15, .text_16, .text_18 {
|
|
width: auto;
|
|
height: 39rpx;
|
|
overflow-wrap: break-word;
|
|
color: rgba(0, 0, 0, 1);
|
|
font-size: 28rpx;
|
|
font-family: PingFang SC-Semibold;
|
|
font-weight: 600;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
line-height: 28rpx;
|
|
margin: 5rpx 0 0 24rpx;
|
|
}
|
|
|
|
.label_5, .label_6, .label_8, .label_9, .label_11, .label_15 {
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
margin-left: auto;
|
|
margin-right: 20rpx;
|
|
}
|
|
</style>
|