mirror of
https://gitee.com/niucloud-team/niucloud-admin.git
synced 2026-01-26 04:58:10 +00:00
281 lines
13 KiB
Vue
281 lines
13 KiB
Vue
<template>
|
|
<view :style="warpCss" class="overflow-hidden" v-if="info&&list && list.length">
|
|
<view v-if="diyComponent.style == 'style-1'" class="flex items-center justify-between style-bg-1 py-[22rpx] px-[30rpx]">
|
|
<view class="flex items-center">
|
|
<image :src="img('static/resource/images/diy/member/VIP_02.png')" mode="aspectFit" class="w-[50rpx] h-[36rpx]" />
|
|
<text class="text-[30rpx] text-[#FFDAA8] ml-[10rpx] font-500 max-w-[440rpx] truncate">{{info.member_level_name}}</text>
|
|
</view>
|
|
<view class="flex items-center justify-center rounded-[30rpx] box-border style-btn w-[140rpx] h-[56rpx]" @click="toLink('/app/pages/member/level')">
|
|
<text class="text-[24rpx] text-[#333]">{{ info.member_level ? (upgradeGrowth > 0 ? '做任务' : '点击查看') : '去解锁' }}</text>
|
|
<text class="iconfont iconxiayibu1 ml-[4rpx] -mb-[2rpx] !text-[14rpx] text-[#333]"></text>
|
|
</view>
|
|
</view>
|
|
<view v-if="diyComponent.style == 'style-2'" class="flex items-center justify-between style-bg-2 p-[30rpx]">
|
|
<view class="flex flex-col">
|
|
<view class="flex items-center">
|
|
<image :src="img('static/resource/images/diy/member/VIP_01.png')" mode="aspectFit" class="w-[74rpx] h-[30rpx]" />
|
|
<text class="text-[32rpx] text-[#FFE3B1] leading-[normal] ml-[14rpx] font-500 max-w-[420rpx] truncate">{{info.member_level_name}}</text>
|
|
</view>
|
|
<text class="text-[#FFE3B1] opacity-80 text-[24rpx] mt-[10rpx] leading-[32rpx]" v-if="benefits_arr && benefits_arr.length">{{info.member_level_name}}购物享{{benefits_arr[0].title}}</text>
|
|
</view>
|
|
<view class="flex items-center justify-center rounded-[30rpx] box-border style-btn w-[140rpx] h-[56rpx]" @click="toLink('/app/pages/member/level')">
|
|
<text class="text-[24rpx] text-[#333]">{{ info.member_level ? (upgradeGrowth > 0 ? '做任务' : '点击查看') : '去解锁' }}</text>
|
|
<text class="iconfont iconxiayibu1 ml-[4rpx] -mb-[2rpx] !text-[14rpx] text-[#333]"></text>
|
|
</view>
|
|
</view>
|
|
<view v-if="diyComponent.style == 'style-3'" class="rounded-[var(--rounded-big)] style-bg-3 py-[var(--pad-top-m)] px-[var(--pad-sidebar-m)]">
|
|
<view class="flex items-center justify-between style-border-3 mb-[30rpx] pb-[40rpx]">
|
|
<view class="flex flex-col flex-1">
|
|
<view class="flex items-center justify-between">
|
|
<view class="flex items-center">
|
|
<view class="flex font-500 leading-[30rpx] box-border text-[#fff] pl-[50rpx] text-[24rpx] w-[120rpx] h-[30rpx] bg-contain bg-no-repeat" :style="{'backgroundImage': 'url('+img('static/resource/images/diy/member/VIP.png')+')'}">
|
|
VIP.{{currIndex}}
|
|
</view>
|
|
<text class="text-[#733F02] ml-[8rpx] text-[30rpx] font-500 max-w-[380rpx] truncate">{{info.member_level_name}}</text>
|
|
</view>
|
|
<view class="flex items-center" @click="toLink('/app/pages/member/level')">
|
|
<view class="inline-block">
|
|
<text class="nc-iconfont nc-icon-a-bangzhuV6xx-36 !text-[22rpx] text-[#733F02]"></text>
|
|
<text class="text-[22rpx] text-[#733F02] ml-[6rpx] leading-[24rpx]">规则</text>
|
|
</view>
|
|
<view class="ml-[2rpx] -mb-[4rpx] text-[#733F02] !text-[24rpx] nc-iconfont nc-icon-youV6xx"></view>
|
|
</view>
|
|
</view>
|
|
<text class="text-[24rpx] text-[#794200] mt-[10rpx]">购物或邀请好友可以提升等级</text>
|
|
</view>
|
|
|
|
</view>
|
|
<view class="flex items-center justify-between">
|
|
<view class="flex flex-col flex-1 mt-[2rpx]">
|
|
<view class="overflow-hidden rounded-[20rpx]">
|
|
<progress :percent="progress()" activeColor="#fff" backgroundColor="rgba(255,5,5,0.1)" stroke-width="4" />
|
|
</view>
|
|
<text class="text-[22rpx] ml-[2rpx] leading-[1.4] text-[#794200] mt-[16rpx]" v-if="upgradeGrowth > 0">还差{{upgradeGrowth}}成长值即可升级为{{ list[afterCurrIndex].level_name }}</text>
|
|
<text class="text-[22rpx] ml-[2rpx] text-[#794200] mt-[16rpx]" v-else>恭喜您升级为最高等级</text>
|
|
</view>
|
|
<view class="flex items-center rounded-[30rpx] bg-[rgb(245,230,185)] px-[24rpx] text-[22rpx] text-[#733F02] h-[56rpx] ml-[40rpx] leading-normal" @click="toLink('/app/pages/member/level')">
|
|
{{info.member_level ? (upgradeGrowth > 0 ? '做任务' : '点击查看') : '去解锁'}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-if="diyComponent.style == 'style-4'" class="flex items-center justify-between style-4 px-[24rpx] py-[20rpx]" :style="{'backgroundImage': 'url('+img('static/resource/images/diy/member/style4_bg.jpg')+')'}">
|
|
<view class="flex flex-col">
|
|
<view class="flex items-center">
|
|
<image :src="img('static/resource/images/diy/member/style4_vip.png')" mode="aspectFit" class="w-[70rpx] h-[32rpx] pt-[1rpx]" />
|
|
<text class="text-[30rpx] text-[#FFEFB0] leading-[normal] ml-[8rpx] font-500 max-w-[420rpx] truncate">{{info.member_level_name}}</text>
|
|
</view>
|
|
<view class="text-[#B0B0B0] text-[24rpx] mt-[10rpx] leading-[32rpx]" v-if="benefits_arr && benefits_arr.length">
|
|
<text>{{info.member_level_name}}购物享</text>
|
|
<text class="text-[#FFEFB0]">{{benefits_arr[0].title}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="flex items-center justify-center rounded-[30rpx] box-border style-btn w-[150rpx] h-[50rpx]" @click="toLink('/app/pages/member/level')">
|
|
<text class="text-[22rpx] text-[#333] mr-[8rpx]">{{ info.member_level ? (upgradeGrowth > 0 ? '做任务' : '点击查看') : '去解锁' }}</text>
|
|
<image :src="img('static/resource/images/diy/member/style4_arrow.png')" mode="aspectFit" class="w-[26rpx] h-[26rpx] pt-[2rpx]" />
|
|
</view>
|
|
</view>
|
|
<view v-if="diyComponent.style == 'style-5'" class="rounded-[var(--rounded-big)] style-5" :style="{'backgroundImage': 'url('+img('static/resource/images/diy/member/style5_bg.jpg')+')'}">
|
|
<view class="content-head pt-[16rpx] pb-[10rpx] px-[24rpx] flex items-center justify-between">
|
|
<view class="flex items-center">
|
|
<image :src="img('static/resource/images/diy/member/style5_vip.png')" mode="aspectFit" class="w-[40rpx] h-[40rpx]" />
|
|
<text class="text-[#FFFBE2] ml-[10rpx] text-[30rpx] font-500 max-w-[470rpx] truncate">{{info.member_level_name}}</text>
|
|
</view>
|
|
<view class="flex items-center rounded-[30rpx] pl-[16rpx] pr-[12rpx] h-[44rpx] leading-normal style-btn" @click="toLink('/app/pages/member/level')">
|
|
<text class="text-[22rpx] text-[#333] font-500 pb-[2rpx]">
|
|
{{info.member_level ? (upgradeGrowth > 0 ? '做任务' : '点击查看') : '去解锁'}}
|
|
</text>
|
|
<image :src="img('static/resource/images/diy/member/style5_arrow_01.png')" mode="aspectFit" class="w-[22rpx] h-[22rpx] pb-[1rpx]" />
|
|
</view>
|
|
</view>
|
|
<view class="flex flex-col pt-[28rpx] pb-[30rpx] px-[24rpx]">
|
|
<view class="flex items-center justify-between pb-[16rpx]">
|
|
<text class="text-[22rpx] ml-[2rpx] leading-[1.4] text-[#FFFBE2]" v-if="upgradeGrowth > 0">还差{{upgradeGrowth}}成长值即可升级为{{ list[afterCurrIndex].level_name }}</text>
|
|
<text class="text-[22rpx] ml-[2rpx] text-[#FFFBE2]" v-else>恭喜您升级为最高等级</text>
|
|
<view class="flex items-center" @click="toLink('/app/pages/member/level')">
|
|
<text class="nc-iconfont nc-icon-a-bangzhuV6xx-36 !text-[22rpx] text-[#FFFBE2]"></text>
|
|
<text class="text-[22rpx] text-[#FFFBE2] ml-[6rpx] leading-[24rpx]">规则</text>
|
|
<view class="ml-[2rpx] -mb-[4rpx] text-[#FFFBE2] !text-[24rpx] nc-iconfont nc-icon-youV6xx"></view>
|
|
</view>
|
|
</view>
|
|
<view class="overflow-hidden rounded-[20rpx]">
|
|
<progress :percent="progress()" activeColor="#fff" backgroundColor="rgba(255,255,255,0.4)" stroke-width="4" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { computed, ref, watch } from 'vue'
|
|
import { img, redirect } from '@/utils/common'
|
|
import useMemberStore from '@/stores/member'
|
|
import { t } from '@/locale'
|
|
import useDiyStore from '@/app/stores/diy'
|
|
|
|
const props = defineProps(['component', 'index', 'pullDownRefreshCount']);
|
|
const diyStore = useDiyStore();
|
|
const memberStore = useMemberStore()
|
|
|
|
const diyComponent = computed(() => {
|
|
if (diyStore.mode == 'decorate') {
|
|
return diyStore.value[props.index];
|
|
} else {
|
|
return props.component;
|
|
}
|
|
})
|
|
|
|
const warpCss = computed(() => {
|
|
var style = '';
|
|
if (diyComponent.value.topRounded) style += 'border-top-left-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
|
|
if (diyComponent.value.topRounded) style += 'border-top-right-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
|
|
if (diyComponent.value.bottomRounded) style += 'border-bottom-left-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
|
|
if (diyComponent.value.bottomRounded) style += 'border-bottom-right-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
|
|
return style;
|
|
})
|
|
|
|
watch(
|
|
() => props.pullDownRefreshCount,
|
|
(newValue, oldValue) => {
|
|
// 处理下拉刷新业务
|
|
}
|
|
)
|
|
|
|
// 获取会员等级列表
|
|
const upgradeGrowth = ref(0) // 升级下级会员所需的成长值
|
|
const currIndex = ref(0) //当前会员索引
|
|
const afterCurrIndex = ref(-1) // 下一个会员等级索引
|
|
const benefits_arr:any = ref([]) //当前会员权益
|
|
const wap_member_info = ref(uni.getStorageSync('wap_member_info'));
|
|
const info:any = computed(() => {
|
|
// 装修模式
|
|
if (diyStore.mode == 'decorate') {
|
|
upgradeGrowth.value = 0;
|
|
benefits_arr.value = [{'title': '商品包邮'}];
|
|
currIndex.value = 1;
|
|
return {
|
|
member_level_name: '会员等级',
|
|
growth: 5
|
|
}
|
|
} else {
|
|
return wap_member_info.value||{};
|
|
}
|
|
})
|
|
const list:any = computed(() => {
|
|
// 装修模式
|
|
if (diyStore.mode == 'decorate') {
|
|
return [{}];
|
|
}else{
|
|
getMemberLevelFn(memberStore.levelList)
|
|
return memberStore.levelList
|
|
}
|
|
|
|
})
|
|
const getMemberLevelFn = (list:any)=> {
|
|
if(!list||!list.length) return false;
|
|
let isSet = false;
|
|
// 刚进来处理会员等级数据
|
|
if (info.value && list && list.length) {
|
|
list.forEach((item: any, index: any) => {
|
|
if (item.level_id == info.value.member_level) {
|
|
currIndex.value = index + 1;
|
|
// 会员权益
|
|
if (item.level_benefits) {
|
|
Object.values(item.level_benefits).forEach((bItem: any) => {
|
|
if (bItem.content) {
|
|
benefits_arr.value.push(bItem.content)
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
if (item.growth > info.value.growth && !isSet) {
|
|
afterCurrIndex.value = index;
|
|
isSet = true;
|
|
}
|
|
})
|
|
}
|
|
|
|
if (info.value.member_level) {
|
|
if(afterCurrIndex.value == -1){
|
|
afterCurrIndex.value = list.length - 1;
|
|
}
|
|
|
|
if (list[afterCurrIndex.value] && list[afterCurrIndex.value].growth) {
|
|
upgradeGrowth.value = list[afterCurrIndex.value].growth - info.value.growth;
|
|
}
|
|
}else{
|
|
// 当前会员没有会员等级，则展示会员等级中的最后一个等级
|
|
info.value.member_level_name = list[0].level_name;
|
|
upgradeGrowth.value = list[0].growth - info.value.growth;
|
|
afterCurrIndex.value = 0;
|
|
currIndex.value = 1;
|
|
}
|
|
}
|
|
|
|
// 进度条值
|
|
let progress = () => {
|
|
let num = 100
|
|
if(list.value[afterCurrIndex.value] && list.value[afterCurrIndex.value].growth) {
|
|
if(info.value.growth) {
|
|
num = info.value.growth / list.value[afterCurrIndex.value].growth * 100
|
|
}else{
|
|
num = 0
|
|
}
|
|
}
|
|
return num
|
|
}
|
|
|
|
// 跳转链接
|
|
const toLink = (link: string)=>{
|
|
if (diyStore.mode == 'decorate') return false;
|
|
redirect({ url: link })
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.style-bg-1{
|
|
background: linear-gradient(to right, #1F1313, #4D4646);
|
|
}
|
|
.style-btn{
|
|
background: linear-gradient(to right, #FFEACB, #FFD195);
|
|
}
|
|
.style-bg-2{
|
|
background: linear-gradient(to right, #484846, #222222);
|
|
border-bottom-left-radius: 320rpx 16rpx;
|
|
border-bottom-right-radius: 320rpx 16rpx;
|
|
}
|
|
.style-bg-3{
|
|
background: linear-gradient(to right, #F9D9AC, #E9B46D);
|
|
}
|
|
.style-border-3{
|
|
position: relative;
|
|
&:after{
|
|
content: "";
|
|
position: absolute;
|
|
background: linear-gradient(to right, #F0D2A9, #DBA051);
|
|
height: 2rpx;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
}
|
|
.style-4{
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
.style-btn{
|
|
background: linear-gradient(#FFF3C1, #FFEFB0);
|
|
}
|
|
}
|
|
|
|
.style-5{
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
.content-head{
|
|
background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.14));
|
|
}
|
|
.style-btn{
|
|
background: linear-gradient(#FFFFFF, #FFF8CC);
|
|
}
|
|
}
|
|
</style>
|