208 lines
6.2 KiB
Vue
208 lines
6.2 KiB
Vue
<template>
|
||
<view>
|
||
<image src="/static/equityBei.png" style="width: 750rpx; height: 768rpx; position: absolute; top: 0; left: 0; z-index: -1" mode="widthFix"></image>
|
||
<wd-navbar title="权益包" :bordered="false" left-arrow custom-style="background-color: transparent !important;" safeAreaInsetTop @click-left="back"></wd-navbar>
|
||
|
||
<view style="padding: 35rpx 80rpx; position: relative">
|
||
<image src="/static/equity_pack.png" style="width: 593rpx; height: 345rpx" mode="widthFix" v-if="!userInfo.userRights"></image>
|
||
<image src="/static/equity/s1.png" style="width: 593rpx; height: 345rpx" mode="widthFix" v-if="userInfo.userRights && userInfo.userRights.rightsLevel == 1"></image>
|
||
<image src="/static/equity/s2.png" style="width: 593rpx; height: 345rpx" mode="widthFix" v-if="userInfo.userRights && userInfo.userRights.rightsLevel == 2"></image>
|
||
<image src="/static/equity/s3.png" style="width: 593rpx; height: 345rpx" mode="widthFix" v-if="userInfo.userRights && userInfo.userRights.rightsLevel == 3"></image>
|
||
|
||
<view
|
||
v-if="userInfo.userRights"
|
||
:style="{
|
||
color:
|
||
userInfo.userRights.rightsLevel == 1 ? '#754023' : userInfo.userRights.rightsLevel == 2 ? '#3874AF' : userInfo.userRights.rightsLevel == 3 ? '#AF3838' : ''
|
||
}"
|
||
style="position: absolute; top: 120rpx; left: 280rpx; font-size: 28rpx"
|
||
>
|
||
{{ userInfo.userRights.rightsDiscount / 10 }}折
|
||
</view>
|
||
<view
|
||
v-if="userInfo.userRights"
|
||
:style="{
|
||
color:
|
||
userInfo.userRights.rightsLevel == 1 ? '#754023' : userInfo.userRights.rightsLevel == 2 ? '#3874AF' : userInfo.userRights.rightsLevel == 3 ? '#AF3838' : ''
|
||
}"
|
||
style="position: absolute; top: 180rpx; left: 140rpx; font-size: 28rpx; font-weight: bold"
|
||
>
|
||
抵扣卷剩余：{{ userInfo.userRights.pice }}
|
||
</view>
|
||
|
||
<button class="equity_kf" open-type="contact">
|
||
<image src="/static/icons/kf.png" style="width: 48rpx; height: 48rpx; margin-right: 10rpx"></image>
|
||
联系客服
|
||
</button>
|
||
</view>
|
||
|
||
<view style="padding: 0 30rpx">
|
||
<view>
|
||
<text style="font-weight: bold; font-size: 32rpx; color: #754023">权益包等级</text>
|
||
<text style="font-size: 24rpx; color: #7e7e7e; margin-left: 10rpx">点击下方卡片选择开通等级</text>
|
||
</view>
|
||
|
||
<view
|
||
v-for="(item, index) in list"
|
||
:key="index"
|
||
@click="current = index"
|
||
style="position: relative; width: 690rpx; height: 224rpx; padding: 24rpx 30rpx; margin-top: 30rpx"
|
||
>
|
||
<image :src="item.qy" style="width: 128rpx; position: absolute; top: 0; right: 12rpx" mode="widthFix"></image>
|
||
|
||
<image v-if="current == index" src="/static/icons/gou.png" style="width: 40rpx; height: 40rpx; position: absolute; top: 20rpx; right: 60rpx"></image>
|
||
|
||
<image :src="item.bei" style="width: 690rpx; height: 224rpx; position: absolute; z-index: -1; top: 0; left: 0"></image>
|
||
<view style="display: flex; align-items: center; margin-bottom: 12rpx">
|
||
<image :src="item.icon" style="width: 104rpx; height: 44rpx"></image>
|
||
<!-- <view>{{ item.name }}</view> -->
|
||
</view>
|
||
<view style="width: 100%; background-color: #fff; border-radius: 8rpx; padding: 24rpx 40rpx; position: relative">
|
||
<view style="font-weight: bold; font-size: 24rpx; color: #232323; margin-bottom: 8rpx">{{ item.info }}</view>
|
||
<view style="font-weight: 400; font-size: 28rpx; color: #232323">{{ item.text }}</view>
|
||
<view
|
||
style="
|
||
width: 222rpx;
|
||
height: 42rpx;
|
||
position: absolute;
|
||
right: 0;
|
||
bottom: 0;
|
||
z-index: 10;
|
||
text-align: right;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
padding: 0 10rpx;
|
||
"
|
||
>
|
||
<!-- <image :src="item.qy"></image> -->
|
||
<view style="font-weight: bold; font-size: 24rpx; color: #ffffff">{{ item.name }}特权</view>
|
||
</view>
|
||
<image style="width: 222rpx; height: 42rpx; position: absolute; right: 0; bottom: 0; z-index: 9" :src="item.img"></image>
|
||
</view>
|
||
</view>
|
||
|
||
<view
|
||
style="
|
||
width: 690rpx;
|
||
height: 82rpx;
|
||
background: linear-gradient(180deg, #ffc786 0%, #e99332 100%);
|
||
border-radius: 8rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-top: 50rpx;
|
||
color: #fff;
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
"
|
||
@click="toCon"
|
||
>
|
||
立即开通
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, computed } from 'vue';
|
||
import { onShow } from '@dcloudio/uni-app';
|
||
import { Store } from '@/store';
|
||
const store = Store();
|
||
|
||
const userInfo = computed(
|
||
() =>
|
||
store.userInfo || {
|
||
inviteCode: '',
|
||
nickname: '',
|
||
mobile: '',
|
||
avatar: '',
|
||
paywallet: {
|
||
balance: 0
|
||
}
|
||
}
|
||
);
|
||
|
||
onShow(async () => {
|
||
await store.usersGetInfo();
|
||
});
|
||
|
||
const list = [
|
||
{
|
||
name: '加盟',
|
||
info: '购买、批发商品享5折折扣',
|
||
text: '赠送货值抵扣券10000元',
|
||
icon: '/static/equity/icon1.png',
|
||
bei: '/static/equity/bei1.png',
|
||
img: '/static/equity/img1.png',
|
||
qy: '/static/equity/iconY1.png',
|
||
discount: 0.5,
|
||
debitVoucher: 10000
|
||
},
|
||
{
|
||
name: '总代',
|
||
info: '购买、批发商品享3.5折折扣',
|
||
text: '赠送货值抵扣券40000元',
|
||
icon: '/static/equity/icon2.png',
|
||
bei: '/static/equity/bei2.png',
|
||
img: '/static/equity/img2.png',
|
||
qy: '/static/equity/iconY2.png',
|
||
discount: 0.35,
|
||
debitVoucher: 40000
|
||
},
|
||
{
|
||
name: '官方',
|
||
info: '购买、批发商品享2.5折折扣',
|
||
text: '赠送货值抵扣券100000元',
|
||
icon: '/static/equity/icon3.png',
|
||
bei: '/static/equity/bei3.png',
|
||
img: '/static/equity/img3.png',
|
||
qy: '/static/equity/iconY3.png',
|
||
discount: 0.25,
|
||
debitVoucher: 100000
|
||
}
|
||
];
|
||
|
||
const current = ref<number>(0);
|
||
|
||
const back = () => {
|
||
uni.navigateBack();
|
||
};
|
||
|
||
const toCon = () => {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '请联系客服开通权益包',
|
||
showCancel: false
|
||
});
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.equity {
|
||
display: flex;
|
||
align-items: center;
|
||
&_kf {
|
||
position: absolute;
|
||
top: 60rpx;
|
||
right: 0;
|
||
background: rgba(255, 255, 255, 0.68);
|
||
border-radius: 30rpx 0rpx 0rpx 30rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 24rpx;
|
||
color: #232323;
|
||
padding: 5rpx 30rpx 5rpx 30rpx;
|
||
}
|
||
}
|
||
|
||
button {
|
||
all: unset;
|
||
}
|
||
|
||
button::after {
|
||
all: unset;
|
||
}
|
||
</style>
|