czg_team/cashier_wx
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化

Browse Source
This commit is contained in:
gyq
2025-09-29 18:28:41 +08:00
parent a05d14e2b4
commit 8bbeb53589
1 changed files with 370 additions and 382 deletions
Download Patch File Download Diff File Expand all files Collapse all files

364
user/vip/vip.vue
View File

@@ -2,32 +2,33 @@
<view> <view>
<up-navbar bg-color="transparent" title="会员中心" @leftClick="back"></up-navbar> <up-navbar bg-color="transparent" title="会员中心" @leftClick="back"></up-navbar>
<view class="top"> <view class="top">
<view class="vip-box" style=" background-image: url(/user/static/Rectangle_25.png);"> <view class="vip-box">
<image class="bg" src="/user/static/Rectangle_25.png" mode=""></image>
<view class="icon"> <view class="icon">
<image src="/user/static/image_21.png" class="huangguan" mode=""></image> <image src="/user/static/image_21.png" class="huangguan" mode=""></image>
</view> </view>
<view class="tag">当前等级</view> <view class="tag">当前等级</view>
<view class="u-p-l-22"> <view class="u-p-l-22" style="position: relative">
<view class="shop-name">{{shopInfo.shopName}}</view> <view class="shop-name">{{ shopInfo.shopName }}</view>
<view class="lv">{{memberLevel?memberLevel.name:''}}</view> <view class="lv">{{ memberLevel ? memberLevel.name : '' }}</view>
<view class="time"> <view class="time">
<text>{{memberLevel?memberLevel.endTime:''}}到期 </text> <text>{{ memberLevel ? memberLevel.endTime : '' }}到期</text>
<text>{{memberLevel?memberLevel.memberName:''}}</text> <text>{{ memberLevel ? memberLevel.memberName : '' }}</text>
</view> </view>
<view class="rule u-m-t-40 u-flex u-flex-between u-flex-y-center"> <view class="rule u-m-t-40 u-flex u-flex-between u-flex-y-center">
<text class="color-one "> <text class="color-one">
<text class="font-16">{{memberLevel? memberLevel.experience:''}}</text> <text class="font-16">{{ memberLevel ? memberLevel.experience : '' }}</text>
<text class="font-12">经验值</text> <text class="font-12">经验值</text>
</text> </text>
<text class="desc" @click="modelShow('等级说明')">等级说明</text> <text class="desc" @click="modelShow('等级说明')">等级说明</text>
</view> </view>
<view class="progress"> <view class="progress">
<view class="block" :style="{width:expProgress+'%'}"></view> <view class="block" :style="{ width: expProgress + '%' }"></view>
</view>
<view class="u-m-t-12 next-tips" v-if="expProgress * 1 < 100 && nextName">
还差{{ memberLevel ? memberLevel.nextExperienceValue : '' }}成长值可以升级到{{ nextName }}
</view> </view>
<view class="u-m-t-12 next-tips" v-if="expProgress*1<100&&nextName">
还差{{memberLevel?memberLevel.nextExperienceValue:''}}成长值可以升级到{{nextName}}</view>
</view> </view>
</view> </view>
</view> </view>
<view class="vip-quanyi"> <view class="vip-quanyi">
@@ -39,17 +40,16 @@
</view> </view>
</view> </view>
<view class="u-m-t-32"> <view class="u-m-t-32">
<view class="menus" :class="state.openType=='CONDITION'?'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="item" v-for="(item, index) in menus" :key="index">
<view class="u-flex u-flex-x-center u-m-t-4 u-flex-center"> <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> <image :src="item.icon" mode="" style="width: 100rpx; height: 100rpx"></image>
</view> </view>
<view class="font-14 color-333 text-center u-m-t-4 u-flex u-flex-center"> <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> <text class="no-wrap u-m-r-4">{{ item.name }}</text>
<up-icon @click="modelShow(item.name)" size="12" name="question-circle" color="#333" <up-icon @click="modelShow(item.name)" size="12" name="question-circle" color="#333" v-if="showQuestion(index)"></up-icon>
v-if="showQuestion(index)"></up-icon>
</view> </view>
<view class="font-12 color-666 text-center">{{item.desc}}</view> <view class="font-12 color-666 text-center">{{ item.desc }}</view>
</view> </view>
</view> </view>
</view> </view>
@@ -57,20 +57,16 @@
<view class="u-p-l-30 u-p-r-30"> <view class="u-p-l-30 u-p-r-30">
<view class="color-333 font-700 font-14">升级规则</view> <view class="color-333 font-700 font-14">升级规则</view>
<view class="color-666 font-14 u-m-t-16"> <view class="color-666 font-14 u-m-t-16">每消费1元获得{{ state.costReward || '' }}成长值</view>
每消费1元获得{{state.costReward||''}}成长值 <view class="color-666 font-14 u-m-t-16">每充值1元获得{{ state.rechargeReward || '' }}成长值</view>
</view>
<view class="color-666 font-14 u-m-t-16">
每充值1元获得{{state.rechargeReward||''}}成长值
</view>
</view> </view>
<button class="buy-btn" @click="toXufei">立即续费</button> <button class="buy-btn" @click="toXufei">立即续费</button>
<up-popup :show="model.show" mode="center" round="16rpx" close-on-click-overlay @close="model.show=false"> <up-popup :show="model.show" mode="center" round="16rpx" close-on-click-overlay @close="model.show = false">
<view class="model-box"> <view class="model-box">
<view class="u-flex u-flex-between"> <view class="u-flex u-flex-between">
<text class="color-000 font-700 font-16">{{model.title}}</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> <up-icon name="close-circle" color="#666" size="28rpx" @click="modelHide"></up-icon>
</view> </view>
<view class="u-m-t-18 up-content"> <view class="u-m-t-18 up-content">
@@ -78,68 +74,58 @@
</view> </view>
</view> </view>
</up-popup> </up-popup>
</view> </view>
</template> </template>
<script setup> <script setup>
import { import { onLoad } from '@dcloudio/uni-app';
onLoad import * as vipApi from '@/common/api/market/vip.js';
} from '@dcloudio/uni-app' import { APIusershopInfodetail, APIshopUserInfo } from '@/common/api/member.js';
import * as vipApi from '@/common/api/market/vip.js' import { ref, reactive, computed } from 'vue';
import { const model = reactive({
APIusershopInfodetail,
APIshopUserInfo
} from '@/common/api/member.js'
import {
ref,
reactive,
computed
} from "vue"
const model = reactive({
show: false, show: false,
title: '' title: ''
}) });
function modelHide() { function modelHide() {
model.show = false; model.show = false;
} }
function toXufei(){ function toXufei() {
uni.navigateTo({ uni.navigateTo({
url:'/user/vip/buy-vip?shopId='+option.shopId url: '/user/vip/buy-vip?shopId=' + option.shopId
}) });
} }
function modelShow(name) { function modelShow(name) {
if (name == '消费送积分') { if (name == '消费送积分') {
model.title = '消费送积分' model.title = '消费送积分';
modelContent.value = `每消耗1元赠送${memberLevel.value.costRewardPoints}积分` modelContent.value = `每消耗1元赠送${memberLevel.value.costRewardPoints}积分`;
} }
if (name == '周期福利') { if (name == '周期福利') {
model.title = '周期福利' model.title = '周期福利';
modelContent.value = modelContent.value = `每${memberLevel.value.cycleUnit}赠送${memberLevel.value.cycleRewardPoints}积分,${memberLevel.value.cycleRewardCouponList.length}张优惠券`;
`每${memberLevel.value.cycleUnit}赠送${memberLevel.value.cycleRewardPoints}积分,${memberLevel.value.cycleRewardCouponList.length}张优惠券`
} }
if (name == '会员说明') { if (name == '会员说明') {
model.title = '会员说明' model.title = '会员说明';
modelContent.value = state.remark modelContent.value = state.remark;
} }
if (name == '等级说明') { if (name == '等级说明') {
model.title = '等级说明' model.title = '等级说明';
modelContent.value = memberLevel.value.remark||'' modelContent.value = memberLevel.value.remark || '';
} }
model.show = true; model.show = true;
} }
const modelContent = ref(``) const modelContent = ref(``);
const state = reactive({ const state = reactive({
openType: 'CONDITION' openType: 'CONDITION'
}) });
let pay_menus = [{ let pay_menus = [
{
name: '赠送成长值', name: '赠送成长值',
desc: '', desc: '',
icon: '/user/static/Frame_220.png', icon: '/user/static/Frame_220.png'
}, },
{ {
name: '优惠券', name: '优惠券',
@@ -166,9 +152,10 @@
desc: '', desc: '',
icon: '/user/static/Frame_225.png' icon: '/user/static/Frame_225.png'
} }
] ];
let tiaojian_menus = [{ let tiaojian_menus = [
{
name: '享会员价', name: '享会员价',
desc: '全店会员价', desc: '全店会员价',
icon: '/user/static/Frame_222.png' icon: '/user/static/Frame_222.png'
@@ -188,155 +175,150 @@
desc: '', desc: '',
icon: '/user/static/Frame_225.png' icon: '/user/static/Frame_225.png'
} }
];
] const menus = ref([]);
const menus = ref([]) function showQuestion(index) {
const len = menus.value.length;
function showQuestion(index) {
const len = menus.value.length
if (index >= len - 2) { if (index >= len - 2) {
return true return true;
}
return false
} }
return false;
}
function back() { function back() {
uni.navigateBack() uni.navigateBack();
} }
const option = reactive({
const option = reactive({
shopId: '' shopId: ''
}) });
const memberLevel = ref(null) const memberLevel = ref(null);
const shopInfo = reactive({}) const shopInfo = reactive({});
const shopUserInfo = ref({}) const shopUserInfo = ref({});
const memberLevelList=ref([]) const memberLevelList = ref([]);
onLoad((opt) => { onLoad((opt) => {
Object.assign(option, opt) Object.assign(option, opt);
console.log(option); console.log(option);
let shopId = option.shopId let shopId = option.shopId;
init(shopId) init(shopId);
}) });
const expProgress = ref(0) const expProgress = ref(0);
async function init(shopId) { async function init(shopId) {
const userRes = await APIshopUserInfo({ const userRes = await APIshopUserInfo({
shopId shopId
}) });
if (userRes) { if (userRes) {
shopUserInfo.value = userRes shopUserInfo.value = userRes;
} }
const shopRes = await APIusershopInfodetail({ const shopRes = await APIusershopInfodetail({
shopId shopId
}) });
if (shopRes) { if (shopRes) {
Object.assign(shopInfo, shopRes.shopInfo) Object.assign(shopInfo, shopRes.shopInfo);
} }
const res = await vipApi.config({ const res = await vipApi.config({
shopId: shopId shopId: shopId
}) });
if (res) { if (res) {
Object.assign(state, res.memberConfig) Object.assign(state, res.memberConfig);
memberLevelList.value=res.memberLevelList memberLevelList.value = res.memberLevelList;
pay_menus = pay_menus.map(v => { pay_menus = pay_menus.map((v) => {
if (v.name == '优惠券') { if (v.name == '优惠券') {
if(res.memberLevel.cycleRewardCouponList.length){ if (res.memberLevel.cycleRewardCouponList.length) {
v.desc = `每${res.memberLevel.cycleUnit}赠送${res.memberLevel.cycleRewardCouponList.length}张优惠券` v.desc = `每${res.memberLevel.cycleUnit}赠送${res.memberLevel.cycleRewardCouponList.length}张优惠券`;
}else{
v.desc=''
}
}
if (v.name == '会员折扣') {
v.desc = '全店折扣'+(res.memberLevel.discount/10)+'折'
}
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/10)+'折'
}
return v
})
if (res.memberConfig.openType == 'PAY') {
menus.value = pay_menus
} else { } else {
menus.value = tiaojian_menus v.desc = '';
}
}
if (v.name == '会员折扣') {
v.desc = '全店折扣' + res.memberLevel.discount / 10 + '折';
}
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 / 10 + '折';
}
return v;
});
if (res.memberConfig.openType == 'PAY') {
menus.value = pay_menus;
} else {
menus.value = tiaojian_menus;
} }
} }
const res1 = await vipApi.detail({ const res1 = await vipApi.detail({
shopId: shopId shopId: shopId
}) });
if (res1) { if (res1) {
memberLevel.value = { memberLevel.value = {
...res1.memberLevel, ...res1.memberLevel,
endTime: res1.endTime, endTime: res1.endTime,
memberName:res1.memberName, memberName: res1.memberName,
experience: res1.experience, experience: res1.experience,
nextExperienceValue: res1.nextExperienceValue nextExperienceValue: res1.nextExperienceValue
} };
const total = res1.experience * 1 + res1.nextExperienceValue * 1 const total = res1.experience * 1 + res1.nextExperienceValue * 1;
const percent = (res1.experience * 1 / total) * 100 const percent = ((res1.experience * 1) / total) * 100;
if (total <= 0 || res1.experience * 1 <= 0) { if (total <= 0 || res1.experience * 1 <= 0) {
expProgress.value = 100 expProgress.value = 100;
} }
expProgress.value = percent expProgress.value = percent;
}
}
} const nextName = computed(() => {
if (memberLevelList.value.length <= 0 || !memberLevel.value) {
return null;
} }
const nextName=computed(()=>{ const index = memberLevelList.value.findIndex((v) => v.id == memberLevel.value.id);
if(memberLevelList.value.length<=0||!memberLevel.value){ if (index == -1 || index >= memberLevelList.value.length - 1) {
return null return null;
} }
const next = memberLevelList.value[index + 1];
const index=memberLevelList.value.findIndex(v=>v.id==memberLevel.value.id) return next.name;
if(index==-1||index>=memberLevelList.value.length-1){ });
return null
}
const next=memberLevelList.value[index+1]
return next.name
})
</script> </script>
<style> <style>
page { page {
background: #F9F9F9; background: #f9f9f9;
} }
</style> </style>
<style lang="scss" scoped> <style lang="scss" scoped>
.font-700 { .font-700 {
font-weight: 700; font-weight: 700;
} }
.color-one { .color-one {
color: #558ABF; color: #558abf;
} }
.color-2 { .color-2 {
color: #273d7a; color: #273d7a;
} }
.top { .top {
background: linear-gradient(283deg, #A9CBF8 11.62%, #E5E7EB 74.58%); background: linear-gradient(283deg, #a9cbf8 11.62%, #e5e7eb 74.58%);
} }
.top { .top {
padding: 208rpx 30rpx 78rpx 30rpx; padding: 208rpx 30rpx 78rpx 30rpx;
} }
.vip-box {
.vip-box {
background-size: cover; background-size: cover;
position: relative; position: relative;
border-radius: 12px; border-radius: 12px;
@@ -344,6 +326,14 @@
padding-left: 6px; padding-left: 6px;
padding-right: 64rpx; padding-right: 64rpx;
padding-bottom: 24rpx; padding-bottom: 24rpx;
position: relative;
.bg {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.icon { .icon {
position: absolute; position: absolute;
@@ -360,7 +350,7 @@
position: absolute; position: absolute;
top: 0; top: 0;
font-size: 12px; font-size: 12px;
color: #46739F; color: #46739f;
padding: 2px 12px; padding: 2px 12px;
background: #c7d0da; background: #c7d0da;
border-radius: 0 0 12px 0; border-radius: 0 0 12px 0;
@@ -368,7 +358,7 @@
.shop-name { .shop-name {
margin-top: 23px; margin-top: 23px;
color: #6988AB; color: #6988ab;
font-size: 16px; font-size: 16px;
} }
@@ -387,7 +377,8 @@
} }
.rule { .rule {
.exp {} .exp {
}
.desc { .desc {
color: #273d7a; color: #273d7a;
@@ -401,31 +392,29 @@
font-size: 24rpx; font-size: 24rpx;
font-weight: 400; font-weight: 400;
} }
} }
.progress {
.progress {
margin-top: 8rpx; margin-top: 8rpx;
background-color: #BDD5E9; background-color: #bdd5e9;
height: 10rpx; height: 10rpx;
border-radius: 10rpx; border-radius: 10rpx;
.block { .block {
height: 100%; height: 100%;
border-radius: 10rpx; border-radius: 10rpx;
background: linear-gradient(90deg, #F9FBFA 0.03%, #334783 115.59%); background: linear-gradient(90deg, #f9fbfa 0.03%, #334783 115.59%);
}
} }
}
.vip-quanyi { .vip-quanyi {
background-color: #fff; background-color: #fff;
padding: 36rpx 18rpx 42rpx 38rpx; padding: 36rpx 18rpx 42rpx 38rpx;
border-radius: 40rpx 40rpx 0 0; border-radius: 40rpx 40rpx 0 0;
transform: translateY(-40rpx); transform: translateY(-40rpx);
} }
.menus-pays { .menus-pays {
display: grid; display: grid;
/* 每行显示3列，每列宽度相等 */ /* 每行显示3列，每列宽度相等 */
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
@@ -434,9 +423,9 @@
/* 行间距 */ /* 行间距 */
row-gap: 10px; row-gap: 10px;
/* 可以添加容器的内边距 */ /* 可以添加容器的内边距 */
} }
.menus-tiaojian { .menus-tiaojian {
display: grid; display: grid;
/* 每行显示3列，每列宽度相等 */ /* 每行显示3列，每列宽度相等 */
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr);
@@ -445,19 +434,18 @@
/* 行间距 */ /* 行间距 */
row-gap: 32rpx; row-gap: 32rpx;
/* 可以添加容器的内边距 */ /* 可以添加容器的内边距 */
} }
.model-box { .model-box {
padding: 32rpx 56rpx; padding: 32rpx 56rpx;
width: 702rpx; width: 702rpx;
} }
.up-content { .up-content {
color: #999; color: #999;
font-size: 12px; font-size: 12px;
} }
.buy-btn { .buy-btn {
margin: 98rpx 48rpx 48rpx 48rpx; margin: 98rpx 48rpx 48rpx 48rpx;
padding: 32rpx 32rpx; padding: 32rpx 32rpx;
color: #fff; color: #fff;
@@ -465,7 +453,7 @@
font-weight: 700; font-weight: 700;
border-radius: 80rpx; border-radius: 80rpx;
line-height: 1; line-height: 1;
background: linear-gradient(98deg, #fe6d1100 40.64%, #FFD1B4 105.2%), linear-gradient(259deg, #FE6D11 50.14%, #FFD1B4 114.93%); background: linear-gradient(98deg, #fe6d1100 40.64%, #ffd1b4 105.2%), linear-gradient(259deg, #fe6d11 50.14%, #ffd1b4 114.93%);
box-shadow: 0 14rpx 30.4rpx 0 #fe8b435e; box-shadow: 0 14rpx 30.4rpx 0 #fe8b435e;
} }
</style> </style>