调整个人中心页面,会议中心页面,充值页面
This commit is contained in:
226
user/vip/vip.vue
226
user/vip/vip.vue
@@ -7,23 +7,27 @@
|
||||
<image src="/user/static/image_21.png" class="huangguan" mode=""></image>
|
||||
</view>
|
||||
<view class="tag">当前等级</view>
|
||||
<view class="shop-name">店铺名称</view>
|
||||
<view class="lv">白银会员</view>
|
||||
<view class="time">
|
||||
<text>2025.10.14到期 </text>
|
||||
<text>月度会员</text>
|
||||
<view class="u-p-l-22">
|
||||
<view class="shop-name">{{shopInfo.shopName}}</view>
|
||||
<view class="lv">{{memberLevel?memberLevel.name:''}}</view>
|
||||
<view class="time">
|
||||
<text>{{memberLevel?memberLevel.endTime:''}}到期 </text>
|
||||
<text>月度会员</text>
|
||||
</view>
|
||||
<view class="rule u-m-t-40 u-flex u-flex-between u-flex-y-center">
|
||||
<text class="color-one ">
|
||||
<text class="font-16">{{memberLevel? memberLevel.experience:''}}</text>
|
||||
<text class="font-12">经验值</text>
|
||||
</text>
|
||||
<text class="desc">等级说明</text>
|
||||
</view>
|
||||
<view class="progress">
|
||||
<view class="block" :style="{width:expProgress+'%'}"></view>
|
||||
</view>
|
||||
<view class="u-m-t-12 next-tips" v-if="expProgress<100&&nextName">
|
||||
还差{{memberLevel?memberLevel.nextExperienceValue:''}}成长值可以升级到{{nextName}}</view>
|
||||
</view>
|
||||
<view class="rule u-m-t-40 u-flex u-flex-between u-flex-y-center">
|
||||
<text class="color-one ">
|
||||
<text class="font-16">11000</text>
|
||||
<text class="font-12">经验值</text>
|
||||
</text>
|
||||
<text class="desc">等级说明</text>
|
||||
</view>
|
||||
<view class="progress">
|
||||
<view class="block" :style="{width:100+'px'}"></view>
|
||||
</view>
|
||||
<view class="u-m-t-12 next-tips">还差5695成长值可以升级到黄金会员</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="vip-quanyi">
|
||||
@@ -31,18 +35,19 @@
|
||||
<text class="color-2 font-14 font-700">会员权益</text>
|
||||
<view class="u-flex">
|
||||
<text class="color-666 u-m-r-4 font-12">会员说明</text>
|
||||
<up-icon name="question-circle" size="12" @click="modelShow"></up-icon>
|
||||
<up-icon name="question-circle" size="12" @click="modelShow('会员说明')"></up-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-m-t-32">
|
||||
<view class="menus" :class="state.pay_types=='tiaojian'?'menus-tiaojian' :'menus-pays'">
|
||||
<view class="menus" :class="state.openType=='CONDITION'?'menus-tiaojian' :'menus-pays'">
|
||||
<view class="item " v-for="(item,index) in menus" :key="index">
|
||||
<view class="u-flex u-flex-x-center u-m-t-4 u-flex-center">
|
||||
<image :src="item.icon" mode="" style="width: 100rpx;height: 100rpx;"></image>
|
||||
</view>
|
||||
<view class="font-14 color-333 text-center u-m-t-4 u-flex">
|
||||
<view class="font-14 color-333 text-center u-m-t-4 u-flex u-flex-center">
|
||||
<text class="no-wrap u-m-r-4">{{item.name}}</text>
|
||||
<up-icon @click="modelShow" size="12" name="question-circle" color="#333" v-if="showQuestion(index)"></up-icon>
|
||||
<up-icon @click="modelShow(item.name)" size="12" name="question-circle" color="#333"
|
||||
v-if="showQuestion(index)"></up-icon>
|
||||
</view>
|
||||
<view class="font-12 color-666 text-center">{{item.desc}}</view>
|
||||
</view>
|
||||
@@ -53,19 +58,19 @@
|
||||
<view class="u-p-l-30 u-p-r-30">
|
||||
<view class="color-333 font-700 font-14">升级规则</view>
|
||||
<view class="color-666 font-14 u-m-t-16">
|
||||
每消费1元获得10成长值
|
||||
每消费1元获得{{state.costReward||''}}成长值
|
||||
</view>
|
||||
<view class="color-666 font-14 u-m-t-16">
|
||||
每消费1元获得10成长值
|
||||
每消费1元获得{{state.rechargeReward||''}}成长值
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
<up-popup :show="model.show" mode="center" round="16rpx">
|
||||
<up-popup :show="model.show" mode="center" round="16rpx" close-on-click-overlay @close="model.show=false">
|
||||
<view class="model-box">
|
||||
<view class="u-flex u-flex-between">
|
||||
<text class="color-000 font-700 font-16">详情说明</text>
|
||||
<text class="color-000 font-700 font-16">{{model.title}}</text>
|
||||
<up-icon name="close-circle" color="#666" size="28rpx" @click="modelHide"></up-icon>
|
||||
</view>
|
||||
<view class="u-m-t-18 up-content">
|
||||
@@ -78,36 +83,52 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
onLoad
|
||||
} from '@dcloudio/uni-app'
|
||||
import * as vipApi from '@/common/api/market/vip.js'
|
||||
import {
|
||||
APIusershopInfodetail,
|
||||
APIshopUserInfo
|
||||
} from '@/common/api/member.js'
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
computed
|
||||
} from "vue"
|
||||
const model =reactive({
|
||||
show:false
|
||||
})
|
||||
function modelHide(){
|
||||
model.show=false;
|
||||
}
|
||||
function modelShow(){
|
||||
model.show=true;
|
||||
}
|
||||
const modelContent = ref(`
|
||||
1、可适用门店:全部门店<br>
|
||||
2、可适用商品:部分商品<br>
|
||||
3、可使用类型:堂食<br>
|
||||
4、可用时间段:全时段可用<br>
|
||||
5、限量规则:每人限领3张,每日可最多使用3张<br>
|
||||
6、同享规则:与限时折扣同享、与会员价同享<br>
|
||||
7、其它说明:这里是后台配置内容
|
||||
`)
|
||||
const state = reactive({
|
||||
pay_types: 'tiaojian'
|
||||
const model = reactive({
|
||||
show: false,
|
||||
title: ''
|
||||
})
|
||||
|
||||
const pay_menus = [{
|
||||
function modelHide() {
|
||||
model.show = false;
|
||||
}
|
||||
|
||||
function modelShow(name) {
|
||||
if (name == '消费送积分') {
|
||||
model.title = '消费送积分'
|
||||
modelContent.value = `每消耗1元赠送${memberLevel.value.costRewardPoints}积分`
|
||||
}
|
||||
if (name == '周期福利') {
|
||||
model.title = '周期福利'
|
||||
modelContent.value =
|
||||
`每${memberLevel.value.cycleUnit}赠送${memberLevel.value.cycleRewardPoints}积分,${memberLevel.value.cycleRewardCouponList.length}张优惠券`
|
||||
}
|
||||
if (name == '会员说明') {
|
||||
model.title = '会员说明'
|
||||
modelContent.value = state.remark
|
||||
}
|
||||
model.show = true;
|
||||
}
|
||||
const modelContent = ref(``)
|
||||
const state = reactive({
|
||||
openType: 'CONDITION'
|
||||
})
|
||||
|
||||
let pay_menus = [{
|
||||
name: '赠送成长值',
|
||||
desc: '赠送10000成长值',
|
||||
desc: '',
|
||||
icon: '/user/static/Frame_220.png',
|
||||
},
|
||||
{
|
||||
@@ -122,7 +143,7 @@
|
||||
},
|
||||
{
|
||||
name: '会员折扣',
|
||||
desc: '全店折扣98折',
|
||||
desc: '',
|
||||
icon: '/user/static/Frame_223.png'
|
||||
},
|
||||
{
|
||||
@@ -137,14 +158,14 @@
|
||||
}
|
||||
]
|
||||
|
||||
const tiaojian_menus = [{
|
||||
let tiaojian_menus = [{
|
||||
name: '享会员价',
|
||||
desc: '全店会员价',
|
||||
icon: '/user/static/Frame_222.png'
|
||||
},
|
||||
{
|
||||
name: '会员折扣',
|
||||
desc: '全店折扣98折',
|
||||
desc: '',
|
||||
icon: '/user/static/Frame_223.png'
|
||||
},
|
||||
{
|
||||
@@ -160,7 +181,7 @@
|
||||
|
||||
]
|
||||
|
||||
const menus = ref(tiaojian_menus)
|
||||
const menus = ref([])
|
||||
|
||||
function showQuestion(index) {
|
||||
const len = menus.value.length
|
||||
@@ -169,9 +190,110 @@
|
||||
}
|
||||
return false
|
||||
}
|
||||
function back(){
|
||||
|
||||
function back() {
|
||||
uni.navigateBack()
|
||||
}
|
||||
|
||||
|
||||
const option = reactive({
|
||||
shopId: ''
|
||||
})
|
||||
|
||||
const memberLevel = ref(null)
|
||||
const shopInfo = reactive({})
|
||||
const shopUserInfo = ref({})
|
||||
const memberLevelList=ref([])
|
||||
onLoad((opt) => {
|
||||
Object.assign(option, opt)
|
||||
console.log(option);
|
||||
let shopId = option.shopId
|
||||
init(shopId)
|
||||
})
|
||||
const expProgress = ref(0)
|
||||
async function init(shopId) {
|
||||
const userRes = await APIshopUserInfo({
|
||||
shopId
|
||||
})
|
||||
if (userRes) {
|
||||
shopUserInfo.value = userRes
|
||||
}
|
||||
const shopRes = await APIusershopInfodetail({
|
||||
shopId
|
||||
})
|
||||
if (shopRes) {
|
||||
Object.assign(shopInfo, shopRes.shopInfo)
|
||||
}
|
||||
const res = await vipApi.config({
|
||||
shopId: shopId
|
||||
})
|
||||
if (res) {
|
||||
Object.assign(state, res.memberConfig)
|
||||
memberLevelList.value=res.memberLevelList
|
||||
pay_menus = pay_menus.map(v => {
|
||||
if (v.name == '优惠券') {
|
||||
if(res.memberLevel.cycleRewardCouponList.length){
|
||||
v.desc = `每${res.memberLevel.cycleUnit}赠送${res.memberLevel.cycleRewardCouponList.length}张优惠券`
|
||||
}else{
|
||||
v.desc=''
|
||||
}
|
||||
}
|
||||
if (v.name == '会员折扣') {
|
||||
v.desc = '全店折扣'+res.memberLevel.discount+'折'
|
||||
}
|
||||
return v
|
||||
})
|
||||
tiaojian_menus=tiaojian_menus.map(v=>{
|
||||
if (v.name == '优惠券') {
|
||||
if(res.memberLevel.cycleRewardCouponList.length){
|
||||
v.desc = `每${res.memberLevel.cycleUnit}赠送${res.memberLevel.cycleRewardCouponList.length}张优惠券`
|
||||
}else{
|
||||
v.desc=''
|
||||
}
|
||||
}
|
||||
if (v.name == '会员折扣') {
|
||||
v.desc = '全店折扣'+res.memberLevel.discount+'折'
|
||||
}
|
||||
return v
|
||||
})
|
||||
if (res.memberConfig.openType == 'PAY') {
|
||||
menus.value = pay_menus
|
||||
} else {
|
||||
menus.value = tiaojian_menus
|
||||
}
|
||||
}
|
||||
const res1 = await vipApi.detail({
|
||||
shopId: shopId
|
||||
})
|
||||
if (res1) {
|
||||
memberLevel.value = {
|
||||
...res1.memberLevel,
|
||||
endTime: res1.endTime,
|
||||
experience: res1.experience,
|
||||
nextExperienceValue: res1.nextExperienceValue
|
||||
}
|
||||
const total = res1.experience * 1 + res1.nextExperienceValue * 1
|
||||
const percent = (res1.experience * 1 / total) * 100
|
||||
if (total <= 0 || res1.experience * 1 <= 0) {
|
||||
expProgress.value = 100
|
||||
}
|
||||
expProgress.value = percent
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
const nextName=computed(()=>{
|
||||
if(memberLevelList.value.length<=0||!memberLevel.value){
|
||||
return null
|
||||
}
|
||||
|
||||
const index=memberLevelList.value.find(v=>v.id==memberLevel.value.id)
|
||||
if(index!=-1||index>=memberLevelList.value.length-1){
|
||||
return null
|
||||
}
|
||||
const next=memberLevelList.value[index+1]
|
||||
return next.name
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
@@ -203,7 +325,7 @@
|
||||
}
|
||||
|
||||
.vip-box {
|
||||
|
||||
|
||||
background-size: cover;
|
||||
position: relative;
|
||||
border-radius: 12px;
|
||||
|
||||
Reference in New Issue
Block a user