342 lines
7.0 KiB
Vue
342 lines
7.0 KiB
Vue
<template>
|
||
<view class='content'>
|
||
<view class='user-info-view'>
|
||
<image
|
||
class='image-bg'
|
||
:src=" assetsUrl('test_bg.png')"
|
||
/>
|
||
|
||
<view class='top-row'>
|
||
<image :src='userInfo.image' />
|
||
<view class='u-flex-column'>
|
||
<text>{{ userInfo.nickName }}</text>
|
||
<text>{{ userInfo.telephone }}</text>
|
||
</view>
|
||
|
||
<image :src='assetsUrl("ic_qrcode_white.png")' />
|
||
</view>
|
||
|
||
<view class='bottom-row'>
|
||
<view @click.stop='gotoPath("/pages/mine/subs/integral/index")'>
|
||
<text>{{ userInfo.integration }}</text>
|
||
<text>积分</text>
|
||
</view>
|
||
<view @click.stop='gotoPath("/pages/mine/subs/recharge/index")'>
|
||
<text>{{ userInfo.balance }}</text>
|
||
<text>余额</text>
|
||
</view>
|
||
<view @click.stop='gotoPath("/pages/mine/subs/coupon/index")'>
|
||
<text>3</text>
|
||
<text>优惠券</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class='integral-add-view'>
|
||
<text>将会员卡放入微信卡包，及时了解积分变动</text>
|
||
<text>去添加</text>
|
||
<image :src='assetsUrl("ic_arrow_right_yellow.png")' />
|
||
</view>
|
||
|
||
<text class='title-view'>
|
||
我的订单
|
||
</text>
|
||
<view class='card-order-view'>
|
||
<view v-for='(item,index) in orderActionList' :key='index' @click.stop='gotoPath(item.path)'>
|
||
<image :src='item.icon' />
|
||
<text>{{ item.title }}</text>
|
||
<text v-if='item.amount>0'>{{ item.amount }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<text class='title-view'>
|
||
会员服务
|
||
</text>
|
||
|
||
<view class='card-service-view'>
|
||
<view v-for='(item,index) in serviceList' :key='index' @click.stop='gotoPath(item.path)'>
|
||
<image :src='item.icon' />
|
||
<text>{{ item.title }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<official-account-dialog ref='officialAccountDialogRef' />
|
||
</template>
|
||
|
||
<script setup lang='ts'>
|
||
import { useUserStore } from '@/store';
|
||
import { assetsUrl } from '@/utils/assets';
|
||
import { goPath } from '@/utils';
|
||
import OfficialAccountDialog from '@/components/official-account-dialog.vue';
|
||
|
||
const officialAccountDialogRef = ref();
|
||
|
||
const orderActionList = ref([{
|
||
title: '进行中',
|
||
icon: assetsUrl('ic_order_progressing.png'),
|
||
path: '/pages/mine/subs/order/order-list',
|
||
amount: 10
|
||
}, {
|
||
title: '已结束',
|
||
icon: assetsUrl('ic_order_finish.png'),
|
||
path: '/pages/mine/subs/order/order-list?index=1',
|
||
amount: 0
|
||
}, {
|
||
title: '全部订单',
|
||
icon: assetsUrl('ic_order_all.png'),
|
||
path: '/pages/mine/subs/order/order-list?index=2',
|
||
amount: 0
|
||
}]);
|
||
|
||
const serviceList = [
|
||
{
|
||
title: '会员信息',
|
||
icon: assetsUrl('ic_member_service_info.png'),
|
||
path: '/pages/mine/subs/profile/index'
|
||
},
|
||
{
|
||
title: '消费记录',
|
||
icon: assetsUrl('ic_member_service_record.png'),
|
||
path: '/pages/mine/subs/trade/index'
|
||
},
|
||
{
|
||
title: '关注公众号',
|
||
icon: assetsUrl('ic_member_service_follow.png'),
|
||
path: 'follow_official_account'
|
||
},
|
||
{
|
||
title: '收货地址',
|
||
icon: assetsUrl('ic_member_service_address.png'),
|
||
path: '/pages/mine/subs/address/address-list'
|
||
}, {
|
||
title: '联系商家',
|
||
icon: assetsUrl('ic_member_service_contact.png'),
|
||
path: ''
|
||
}
|
||
// ,{
|
||
// title: '推广中心',
|
||
// icon: assetsUrl + 'ic_order_progressing.png',
|
||
// path: ''
|
||
// }
|
||
];
|
||
|
||
const title = ref<string>();
|
||
title.value = import.meta.env.VITE_APP_TITLE;
|
||
|
||
const store = useUserStore();
|
||
const { userInfo } = storeToRefs(store);
|
||
|
||
const gotoPath = (path: string) => {
|
||
if(path === 'follow_official_account') {
|
||
showOfficialAccountDialog();
|
||
} else {
|
||
goPath(path);
|
||
}
|
||
};
|
||
|
||
const showOfficialAccountDialog = () => {
|
||
officialAccountDialogRef.value.show();
|
||
};
|
||
|
||
</script>
|
||
|
||
<style lang='scss' scoped>
|
||
.content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: 30rpx;
|
||
}
|
||
|
||
.user-info-view {
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: relative;
|
||
height: 275rpx;
|
||
|
||
.image-bg {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: absolute;
|
||
}
|
||
|
||
.top-row {
|
||
display: flex;
|
||
flex-direction: row;
|
||
position: relative;
|
||
margin-left: 33rpx;
|
||
margin-top: 43rpx;
|
||
margin-right: 28rpx;
|
||
align-items: center;
|
||
|
||
image:nth-of-type(1) {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
border-radius: 50%;
|
||
border: #FFFFFF solid 2rpx;
|
||
}
|
||
|
||
view:nth-of-type(1) {
|
||
display: flex;
|
||
flex-direction: column;
|
||
color: white;
|
||
flex: 1;
|
||
margin-left: 20rpx;
|
||
|
||
text:nth-of-type(1) {
|
||
font-size: 30rpx;
|
||
font-weight: 800;
|
||
}
|
||
|
||
text:nth-of-type(2) {
|
||
font-size: 24rpx;
|
||
font-weight: 400;
|
||
margin-top: 5rpx;
|
||
}
|
||
}
|
||
|
||
image:nth-of-type(2) {
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
}
|
||
}
|
||
|
||
.bottom-row {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: center;
|
||
position: relative;
|
||
margin-top: 33rpx;
|
||
|
||
view:nth-of-type(n+1) {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex: 1;
|
||
|
||
text:nth-of-type(1) {
|
||
font-size: 36rpx;
|
||
font-weight: 400;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
text:nth-of-type(2) {
|
||
font-size: 26rpx;
|
||
font-weight: 400;
|
||
margin-top: 8rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.integral-add-view {
|
||
display: flex;
|
||
flex-direction: row;
|
||
background: #F8ECDE;
|
||
align-items: center;
|
||
border-radius: 10rpx;
|
||
padding: 20rpx 17rpx;
|
||
margin-top: 30rpx;
|
||
|
||
text:nth-of-type(1) {
|
||
display: flex;
|
||
font-size: 24rpx;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
flex: 1;
|
||
}
|
||
|
||
text:nth-of-type(2) {
|
||
font-size: 26rpx;
|
||
font-weight: 400;
|
||
color: #DB7400;
|
||
}
|
||
|
||
image {
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
margin-left: 14rpx;
|
||
}
|
||
}
|
||
|
||
.title-view {
|
||
font-size: 30rpx;
|
||
font-weight: 800;
|
||
color: #333333;
|
||
margin-top: 30rpx;
|
||
}
|
||
|
||
.card-view {
|
||
display: flex;
|
||
background: #FFFFFF;
|
||
border-radius: 20rpx;
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.card-order-view {
|
||
@extend .card-view;
|
||
flex-direction: row;
|
||
padding: 30rpx 0;
|
||
|
||
view:nth-of-type(n+1) {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: relative;
|
||
flex: 1;
|
||
|
||
image {
|
||
width: 58rpx;
|
||
height: 58rpx;
|
||
}
|
||
|
||
text:nth-of-type(1) {
|
||
font-size: 28rpx;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
margin-top: 10rpx;
|
||
}
|
||
|
||
text:nth-of-type(2) {
|
||
display: flex;
|
||
position: absolute;
|
||
min-width: 40rpx;
|
||
min-height: 35rpx;
|
||
align-items: center;
|
||
font-size: 26rpx;
|
||
justify-content: center;
|
||
background: #F32B2B;
|
||
border-radius: 50%;
|
||
color: #FFFFFF;
|
||
top: -10rpx;
|
||
right: 70rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.card-service-view {
|
||
@extend .card-view;
|
||
display: grid;
|
||
grid-template-columns:repeat(4, 1fr);
|
||
|
||
view:nth-of-type(n+1) {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 30rpx 0;
|
||
font-size: 26rpx;
|
||
}
|
||
|
||
image {
|
||
width: 54rpx;
|
||
height: 54rpx;
|
||
}
|
||
}
|
||
|
||
|
||
</style>
|