366 lines
8.3 KiB
Vue
366 lines
8.3 KiB
Vue
<template>
|
|
<view class="container">
|
|
<image class="topBack"
|
|
:src="shopExtend?shopExtend.value:'https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/myTopBack.png'"
|
|
mode="aspectFill"></image>
|
|
<view class="myContent">
|
|
<view class="my_info flex-between">
|
|
<view class="my_info_left">
|
|
<image class="my_info_left_head" :src="userInfo.headImg" mode="aspectFill"></image>
|
|
<view class="name">{{userInfo.nickName || '无'}}</view>
|
|
</view>
|
|
<image class="my_info_right_qr" @click="clickEvent" v-if="userInfo.isVip == 1 && ShopId"
|
|
:src="'https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/my_qRcode.png'" mode="aspectFill">
|
|
</image>
|
|
<view class="my_info_right" @click="clickEvent" v-if="userInfo.isVip == 0 && ShopId">
|
|
<text>免费入会</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="my_item my_assets" @click="Myassets">
|
|
<view class="my_item_title">我的资产</view>
|
|
<view class="my_assets_list">
|
|
<view class="my_list_item">
|
|
<image class="my_list_item_icon"
|
|
src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/storedValue.png" mode="aspectFill">
|
|
</image>
|
|
<view class="my_list_item_name">储值</view>
|
|
<view class="my_list_item_num">{{userInfo.amount || '0'}}</view>
|
|
</view>
|
|
<view class="my_list_item">
|
|
<image class="my_list_item_icon"
|
|
src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/points.png">
|
|
</image>
|
|
<view class="my_list_item_name">积分</view>
|
|
<view class="my_list_item_num">{{userInfo.accountPoints ||userInfo.points}}</view>
|
|
</view>
|
|
<view class="my_list_item">
|
|
<image class="my_list_item_icon"
|
|
src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/coupon.png">
|
|
</image>
|
|
<view class="my_list_item_name">优惠券</view>
|
|
<view class="my_list_item_num">{{userInfo.couponNum ||'0'}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="my_item my_fun">
|
|
<view class="my_item_title">我的功能</view>
|
|
<view class="my_fun_list">
|
|
<view class="my_list_item" v-for="(item,index) in myFunList" :key="index"
|
|
@click="clickTo(item,index)">
|
|
<view class="my_list_item_left">
|
|
<image class="my_list_item_icon" :src="item.icon" mode="aspectFill"></image>
|
|
<view class="my_list_item_name">{{item.name}}</view>
|
|
</view>
|
|
<view class="my_list_item_right">
|
|
<u-icon name="play-right-fill" color="#999999" size="12"></u-icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
ref,
|
|
computed,
|
|
onMounted,
|
|
reactive
|
|
} from "vue";
|
|
import {
|
|
onLoad,
|
|
onReady,
|
|
onShow
|
|
} from '@dcloudio/uni-app'
|
|
import {
|
|
productStore
|
|
} from '@/stores/user.js';
|
|
const store = productStore();
|
|
const myFunList = ref([{
|
|
name: "我的优惠券",
|
|
type: "my_coupon",
|
|
icon: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/my_coupon.png"
|
|
},
|
|
{
|
|
name: "我的订单",
|
|
type: "my_order",
|
|
icon: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/my_order.png"
|
|
},
|
|
// { name: "收货地址", type: "", icon: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/my_address.png"},
|
|
// {
|
|
// name: "个人资料",
|
|
// type: "myself",
|
|
// icon: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/personal.png"
|
|
// },
|
|
{
|
|
name: "我的会员卡",
|
|
type: "my_member",
|
|
icon: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/my_member.png"
|
|
},
|
|
// { name: "关于", type: "", icon: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/inRegard.png"},
|
|
])
|
|
const teblist = ref([])
|
|
const shopExtend = ref(null)
|
|
const userInfo = reactive({})
|
|
|
|
const ShopId = ref(uni.cache.get('shopId'))
|
|
|
|
const clickEvent = () => {
|
|
if (ShopId.value) {
|
|
if (userInfo.isVip == 0) {
|
|
uni.pro.navigateTo('user/member/memberdetails', {
|
|
shopId: uni.cache.get('shopId')
|
|
})
|
|
} else {
|
|
uni.pro.navigateTo('user/member/paycode', {
|
|
shopId: uni.cache.get('shopId'),
|
|
shopInfo: JSON.stringify(uni.cache.get('orderVIP').shopInfo)
|
|
})
|
|
}
|
|
} else {
|
|
uni.pro.navigateTo('member/list', {
|
|
type: 'user_payCode'
|
|
})
|
|
}
|
|
}
|
|
|
|
// 我的资产
|
|
const Myassets = () => {
|
|
if (uni.cache.get('shopId')) {
|
|
uni.pro.navigateTo('user/member/memberdetails', {
|
|
shopId: uni.cache.get('shopId'),
|
|
type: 'index'
|
|
})
|
|
} else {
|
|
uni.pro.navigateTo('user/member/list', {
|
|
shopId: uni.cache.get('shopId'),
|
|
type: 'index'
|
|
})
|
|
}
|
|
}
|
|
|
|
const clickTo = (item, index) => {
|
|
let shopId = null;
|
|
switch (item.type) {
|
|
case 'my_order':
|
|
uni.pro.switchTab('order/index')
|
|
break
|
|
case 'my_member':
|
|
uni.pro.navigateTo('user/member/list')
|
|
break
|
|
case 'recharge':
|
|
if (uni.cache.get('shopId') && uni.cache.get('token')) {
|
|
uni.pro.navigateTo('member/index', {
|
|
shopId: uni.cache.get('shopId'),
|
|
type: 'index',
|
|
})
|
|
} else {
|
|
uni.pro.navigateTo('member/list', {
|
|
type: 'user_recharge'
|
|
})
|
|
}
|
|
break
|
|
case 'points': //积分
|
|
if (uni.cache.get('shopId') && uni.cache.get('token')) {
|
|
uni.pro.navigateTo('/pagesPoints/index/index', {
|
|
shopId: uni.cache.get('shopId'),
|
|
type: 'user',
|
|
})
|
|
} else {
|
|
uni.pro.navigateTo('member/list', {
|
|
type: 'user_points'
|
|
})
|
|
}
|
|
break;
|
|
case 'my_coupon': //优惠券
|
|
uni.pro.navigateTo('user/coupon', {
|
|
shopId: uni.cache.get('shopId') || ''
|
|
})
|
|
break;
|
|
case 'myself': //内部页面
|
|
uni.pro.navigateTo('user/myself')
|
|
break;
|
|
case 'scan_applet':
|
|
uni.navigateToMiniProgram(JSON.parse(item.value))
|
|
break
|
|
case 'absolute': //外链url
|
|
uni.navigateTo({
|
|
url: `/pages/webview/webview?url=${item.menuUrl}`
|
|
});
|
|
break;
|
|
}
|
|
}
|
|
|
|
onShow(async () => {
|
|
await store.actionsAPIuser()
|
|
if (uni.cache.get('shopId')) {
|
|
Object.assign(userInfo, uni.cache.get('orderVIP'))
|
|
} else {
|
|
Object.assign(userInfo, {
|
|
...uni.cache.get('userInfo'),
|
|
...uni.cache.get('userInfo').assetsSummary
|
|
})
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.topBack {
|
|
width: 100%;
|
|
height: 400rpx;
|
|
position: absolute;
|
|
}
|
|
|
|
.myContent {
|
|
position: relative;
|
|
z-index: 1;
|
|
padding: 298rpx 20rpx 0 20rpx;
|
|
|
|
.my_info {
|
|
height: 172rpx;
|
|
align-items: center;
|
|
background-color: #fff;
|
|
padding: 0 32rpx;
|
|
border-radius: 18rpx;
|
|
|
|
.my_info_left {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.my_info_left_head {
|
|
width: 84rpx;
|
|
height: 84rpx;
|
|
margin-right: 18rpx;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.name {
|
|
font-weight: 400;
|
|
font-size: 36rpx;
|
|
color: #333333;
|
|
}
|
|
}
|
|
|
|
.my_info_right {
|
|
width: 136rpx;
|
|
height: 48rpx;
|
|
background-color: #E3AD7F;
|
|
border-radius: 24rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
text {
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
|
|
.my_info_right_qr {
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.my_item {
|
|
background-color: #fff;
|
|
padding: 22rpx 32rpx;
|
|
border-radius: 18rpx;
|
|
margin-top: 16rpx;
|
|
|
|
.my_item_title {
|
|
font-weight: bold;
|
|
font-size: 32rpx;
|
|
color: #333333;
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
}
|
|
}
|
|
|
|
.my_assets {
|
|
.my_item_title {
|
|
margin-bottom: 26rpx;
|
|
}
|
|
|
|
.my_assets_list {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
padding: 0 38rpx;
|
|
|
|
.my_list_item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
.my_list_item_icon {
|
|
width: 52rpx;
|
|
height: 44rpx;
|
|
}
|
|
|
|
.my_list_item_name {
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #333333;
|
|
margin-top: 16rpx;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
.my_list_item_num {
|
|
font-weight: 400;
|
|
font-size: 20rpx;
|
|
color: #E3AD7F;
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.my_fun {
|
|
.my_item_title {
|
|
margin-bottom: 18rpx;
|
|
}
|
|
|
|
.my_fun_list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.my_list_item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 24rpx 0 26rpx 0;
|
|
border-bottom: 1rpx solid #E5E5E5;
|
|
|
|
.my_list_item_left {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.my_list_item_icon {
|
|
width: 44rpx;
|
|
height: 44rpx;
|
|
margin-right: 18rpx;
|
|
}
|
|
|
|
.my_list_item_name {
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
}
|
|
}
|
|
}
|
|
|
|
.my_list_item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |