优化
This commit is contained in:
752
user/vip/vip.vue
752
user/vip/vip.vue
@@ -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,394 +74,386 @@
|
|||||||
</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,
|
show: false,
|
||||||
APIshopUserInfo
|
title: ''
|
||||||
} from '@/common/api/member.js'
|
});
|
||||||
import {
|
|
||||||
ref,
|
|
||||||
reactive,
|
|
||||||
computed
|
|
||||||
} from "vue"
|
|
||||||
const model = reactive({
|
|
||||||
show: false,
|
|
||||||
title: ''
|
|
||||||
})
|
|
||||||
|
|
||||||
function modelHide() {
|
function modelHide() {
|
||||||
model.show = false;
|
model.show = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function toXufei() {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/user/vip/buy-vip?shopId=' + option.shopId
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function modelShow(name) {
|
||||||
|
if (name == '消费送积分') {
|
||||||
|
model.title = '消费送积分';
|
||||||
|
modelContent.value = `每消耗1元赠送${memberLevel.value.costRewardPoints}积分`;
|
||||||
}
|
}
|
||||||
|
if (name == '周期福利') {
|
||||||
function toXufei(){
|
model.title = '周期福利';
|
||||||
uni.navigateTo({
|
modelContent.value = `每${memberLevel.value.cycleUnit}赠送${memberLevel.value.cycleRewardPoints}积分,${memberLevel.value.cycleRewardCouponList.length}张优惠券`;
|
||||||
url:'/user/vip/buy-vip?shopId='+option.shopId
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
|
if (name == '会员说明') {
|
||||||
function modelShow(name) {
|
model.title = '会员说明';
|
||||||
if (name == '消费送积分') {
|
modelContent.value = state.remark;
|
||||||
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
|
|
||||||
}
|
|
||||||
if (name == '等级说明') {
|
|
||||||
model.title = '等级说明'
|
|
||||||
modelContent.value = memberLevel.value.remark||''
|
|
||||||
}
|
|
||||||
model.show = true;
|
|
||||||
}
|
}
|
||||||
const modelContent = ref(``)
|
if (name == '等级说明') {
|
||||||
const state = reactive({
|
model.title = '等级说明';
|
||||||
openType: 'CONDITION'
|
modelContent.value = memberLevel.value.remark || '';
|
||||||
})
|
|
||||||
|
|
||||||
let pay_menus = [{
|
|
||||||
name: '赠送成长值',
|
|
||||||
desc: '',
|
|
||||||
icon: '/user/static/Frame_220.png',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '优惠券',
|
|
||||||
desc: '每月赠送2张优惠券',
|
|
||||||
icon: '/user/static/Frame_221.png'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '享会员价',
|
|
||||||
desc: '全店会员价',
|
|
||||||
icon: '/user/static/Frame_222.png'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '会员折扣',
|
|
||||||
desc: '',
|
|
||||||
icon: '/user/static/Frame_223.png'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '消费送积分',
|
|
||||||
desc: '',
|
|
||||||
icon: '/user/static/Frame_224.png'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '周期福利',
|
|
||||||
desc: '',
|
|
||||||
icon: '/user/static/Frame_225.png'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
|
|
||||||
let tiaojian_menus = [{
|
|
||||||
name: '享会员价',
|
|
||||||
desc: '全店会员价',
|
|
||||||
icon: '/user/static/Frame_222.png'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '会员折扣',
|
|
||||||
desc: '',
|
|
||||||
icon: '/user/static/Frame_223.png'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '消费送积分',
|
|
||||||
desc: '',
|
|
||||||
icon: '/user/static/Frame_224.png'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '周期福利',
|
|
||||||
desc: '',
|
|
||||||
icon: '/user/static/Frame_225.png'
|
|
||||||
}
|
|
||||||
|
|
||||||
]
|
|
||||||
|
|
||||||
const menus = ref([])
|
|
||||||
|
|
||||||
function showQuestion(index) {
|
|
||||||
const len = menus.value.length
|
|
||||||
if (index >= len - 2) {
|
|
||||||
return true
|
|
||||||
}
|
|
||||||
return false
|
|
||||||
}
|
}
|
||||||
|
model.show = true;
|
||||||
|
}
|
||||||
|
const modelContent = ref(``);
|
||||||
|
const state = reactive({
|
||||||
|
openType: 'CONDITION'
|
||||||
|
});
|
||||||
|
|
||||||
function back() {
|
let pay_menus = [
|
||||||
uni.navigateBack()
|
{
|
||||||
|
name: '赠送成长值',
|
||||||
|
desc: '',
|
||||||
|
icon: '/user/static/Frame_220.png'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '优惠券',
|
||||||
|
desc: '每月赠送2张优惠券',
|
||||||
|
icon: '/user/static/Frame_221.png'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '享会员价',
|
||||||
|
desc: '全店会员价',
|
||||||
|
icon: '/user/static/Frame_222.png'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '会员折扣',
|
||||||
|
desc: '',
|
||||||
|
icon: '/user/static/Frame_223.png'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '消费送积分',
|
||||||
|
desc: '',
|
||||||
|
icon: '/user/static/Frame_224.png'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '周期福利',
|
||||||
|
desc: '',
|
||||||
|
icon: '/user/static/Frame_225.png'
|
||||||
}
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
let tiaojian_menus = [
|
||||||
|
{
|
||||||
|
name: '享会员价',
|
||||||
|
desc: '全店会员价',
|
||||||
|
icon: '/user/static/Frame_222.png'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '会员折扣',
|
||||||
|
desc: '',
|
||||||
|
icon: '/user/static/Frame_223.png'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '消费送积分',
|
||||||
|
desc: '',
|
||||||
|
icon: '/user/static/Frame_224.png'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '周期福利',
|
||||||
|
desc: '',
|
||||||
|
icon: '/user/static/Frame_225.png'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
const option = reactive({
|
const menus = ref([]);
|
||||||
shopId: ''
|
|
||||||
})
|
|
||||||
|
|
||||||
const memberLevel = ref(null)
|
function showQuestion(index) {
|
||||||
const shopInfo = reactive({})
|
const len = menus.value.length;
|
||||||
const shopUserInfo = ref({})
|
if (index >= len - 2) {
|
||||||
const memberLevelList=ref([])
|
return true;
|
||||||
onLoad((opt) => {
|
}
|
||||||
Object.assign(option, opt)
|
return false;
|
||||||
console.log(option);
|
}
|
||||||
let shopId = option.shopId
|
|
||||||
init(shopId)
|
function back() {
|
||||||
})
|
uni.navigateBack();
|
||||||
const expProgress = ref(0)
|
}
|
||||||
async function init(shopId) {
|
|
||||||
const userRes = await APIshopUserInfo({
|
const option = reactive({
|
||||||
shopId
|
shopId: ''
|
||||||
})
|
});
|
||||||
if (userRes) {
|
|
||||||
shopUserInfo.value = userRes
|
const memberLevel = ref(null);
|
||||||
}
|
const shopInfo = reactive({});
|
||||||
const shopRes = await APIusershopInfodetail({
|
const shopUserInfo = ref({});
|
||||||
shopId
|
const memberLevelList = ref([]);
|
||||||
})
|
onLoad((opt) => {
|
||||||
if (shopRes) {
|
Object.assign(option, opt);
|
||||||
Object.assign(shopInfo, shopRes.shopInfo)
|
console.log(option);
|
||||||
}
|
let shopId = option.shopId;
|
||||||
const res = await vipApi.config({
|
init(shopId);
|
||||||
shopId: shopId
|
});
|
||||||
})
|
const expProgress = ref(0);
|
||||||
if (res) {
|
async function init(shopId) {
|
||||||
Object.assign(state, res.memberConfig)
|
const userRes = await APIshopUserInfo({
|
||||||
memberLevelList.value=res.memberLevelList
|
shopId
|
||||||
pay_menus = pay_menus.map(v => {
|
});
|
||||||
if (v.name == '优惠券') {
|
if (userRes) {
|
||||||
if(res.memberLevel.cycleRewardCouponList.length){
|
shopUserInfo.value = userRes;
|
||||||
v.desc = `每${res.memberLevel.cycleUnit}赠送${res.memberLevel.cycleRewardCouponList.length}张优惠券`
|
}
|
||||||
}else{
|
const shopRes = await APIusershopInfodetail({
|
||||||
v.desc=''
|
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/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
|
|
||||||
}
|
}
|
||||||
}
|
if (v.name == '会员折扣') {
|
||||||
const res1 = await vipApi.detail({
|
v.desc = '全店折扣' + res.memberLevel.discount / 10 + '折';
|
||||||
shopId: shopId
|
|
||||||
})
|
|
||||||
if (res1) {
|
|
||||||
memberLevel.value = {
|
|
||||||
...res1.memberLevel,
|
|
||||||
endTime: res1.endTime,
|
|
||||||
memberName:res1.memberName,
|
|
||||||
experience: res1.experience,
|
|
||||||
nextExperienceValue: res1.nextExperienceValue
|
|
||||||
}
|
}
|
||||||
const total = res1.experience * 1 + res1.nextExperienceValue * 1
|
return v;
|
||||||
const percent = (res1.experience * 1 / total) * 100
|
});
|
||||||
if (total <= 0 || res1.experience * 1 <= 0) {
|
tiaojian_menus = tiaojian_menus.map((v) => {
|
||||||
expProgress.value = 100
|
if (v.name == '优惠券') {
|
||||||
|
if (res.memberLevel.cycleRewardCouponList.length) {
|
||||||
|
v.desc = `每${res.memberLevel.cycleUnit}赠送${res.memberLevel.cycleRewardCouponList.length}张优惠券`;
|
||||||
|
} else {
|
||||||
|
v.desc = '';
|
||||||
|
}
|
||||||
}
|
}
|
||||||
expProgress.value = percent
|
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 nextName=computed(()=>{
|
shopId: shopId
|
||||||
if(memberLevelList.value.length<=0||!memberLevel.value){
|
});
|
||||||
return null
|
if (res1) {
|
||||||
|
memberLevel.value = {
|
||||||
|
...res1.memberLevel,
|
||||||
|
endTime: res1.endTime,
|
||||||
|
memberName: res1.memberName,
|
||||||
|
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 index=memberLevelList.value.findIndex(v=>v.id==memberLevel.value.id)
|
}
|
||||||
if(index==-1||index>=memberLevelList.value.length-1){
|
}
|
||||||
return null
|
|
||||||
}
|
const nextName = computed(() => {
|
||||||
const next=memberLevelList.value[index+1]
|
if (memberLevelList.value.length <= 0 || !memberLevel.value) {
|
||||||
return next.name
|
return null;
|
||||||
})
|
}
|
||||||
|
|
||||||
|
const index = memberLevelList.value.findIndex((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>
|
</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: #558abf;
|
||||||
|
}
|
||||||
|
|
||||||
|
.color-2 {
|
||||||
|
color: #273d7a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top {
|
||||||
|
background: linear-gradient(283deg, #a9cbf8 11.62%, #e5e7eb 74.58%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.top {
|
||||||
|
padding: 208rpx 30rpx 78rpx 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vip-box {
|
||||||
|
background-size: cover;
|
||||||
|
position: relative;
|
||||||
|
border-radius: 12px;
|
||||||
|
overflow: hidden;
|
||||||
|
padding-left: 6px;
|
||||||
|
padding-right: 64rpx;
|
||||||
|
padding-bottom: 24rpx;
|
||||||
|
position: relative;
|
||||||
|
.bg {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.color-one {
|
.icon {
|
||||||
color: #558ABF;
|
position: absolute;
|
||||||
}
|
right: 42rpx;
|
||||||
|
top: 0;
|
||||||
|
|
||||||
.color-2 {
|
.huangguan {
|
||||||
color: #273d7a;
|
width: 214rpx;
|
||||||
}
|
height: 206rpx;
|
||||||
|
|
||||||
.top {
|
|
||||||
background: linear-gradient(283deg, #A9CBF8 11.62%, #E5E7EB 74.58%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.top {
|
|
||||||
padding: 208rpx 30rpx 78rpx 30rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.vip-box {
|
|
||||||
|
|
||||||
background-size: cover;
|
|
||||||
position: relative;
|
|
||||||
border-radius: 12px;
|
|
||||||
overflow: hidden;
|
|
||||||
padding-left: 6px;
|
|
||||||
padding-right: 64rpx;
|
|
||||||
padding-bottom: 24rpx;
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
position: absolute;
|
|
||||||
right: 42rpx;
|
|
||||||
top: 0;
|
|
||||||
|
|
||||||
.huangguan {
|
|
||||||
width: 214rpx;
|
|
||||||
height: 206rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.tag {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
font-size: 12px;
|
|
||||||
color: #46739F;
|
|
||||||
padding: 2px 12px;
|
|
||||||
background: #c7d0da;
|
|
||||||
border-radius: 0 0 12px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shop-name {
|
|
||||||
margin-top: 23px;
|
|
||||||
color: #6988AB;
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lv {
|
|
||||||
color: #273d7a;
|
|
||||||
font-weight: 700;
|
|
||||||
font-size: 64rpx;
|
|
||||||
letter-spacing: 4rpx;
|
|
||||||
transform: skewX(-10deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.time {
|
|
||||||
color: #6988ab;
|
|
||||||
font-size: 24rpx;
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
|
||||||
|
|
||||||
.rule {
|
|
||||||
.exp {}
|
|
||||||
|
|
||||||
.desc {
|
|
||||||
color: #273d7a;
|
|
||||||
font-size: 24rpx;
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.next-tips {
|
|
||||||
color: #6988ab;
|
|
||||||
font-size: 24rpx;
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.tag {
|
||||||
|
position: absolute;
|
||||||
.progress {
|
top: 0;
|
||||||
margin-top: 8rpx;
|
|
||||||
background-color: #BDD5E9;
|
|
||||||
height: 10rpx;
|
|
||||||
border-radius: 10rpx;
|
|
||||||
|
|
||||||
.block {
|
|
||||||
height: 100%;
|
|
||||||
border-radius: 10rpx;
|
|
||||||
background: linear-gradient(90deg, #F9FBFA 0.03%, #334783 115.59%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.vip-quanyi {
|
|
||||||
background-color: #fff;
|
|
||||||
padding: 36rpx 18rpx 42rpx 38rpx;
|
|
||||||
border-radius: 40rpx 40rpx 0 0;
|
|
||||||
transform: translateY(-40rpx);
|
|
||||||
}
|
|
||||||
|
|
||||||
.menus-pays {
|
|
||||||
display: grid;
|
|
||||||
/* 每行显示3列，每列宽度相等 */
|
|
||||||
grid-template-columns: repeat(3, 1fr);
|
|
||||||
/* 列间距 */
|
|
||||||
column-gap: 10px;
|
|
||||||
/* 行间距 */
|
|
||||||
row-gap: 10px;
|
|
||||||
/* 可以添加容器的内边距 */
|
|
||||||
}
|
|
||||||
|
|
||||||
.menus-tiaojian {
|
|
||||||
display: grid;
|
|
||||||
/* 每行显示3列，每列宽度相等 */
|
|
||||||
grid-template-columns: repeat(4, 1fr);
|
|
||||||
/* 列间距 */
|
|
||||||
column-gap: 10px;
|
|
||||||
/* 行间距 */
|
|
||||||
row-gap: 32rpx;
|
|
||||||
/* 可以添加容器的内边距 */
|
|
||||||
}
|
|
||||||
|
|
||||||
.model-box {
|
|
||||||
padding: 32rpx 56rpx;
|
|
||||||
width: 702rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.up-content {
|
|
||||||
color: #999;
|
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
|
color: #46739f;
|
||||||
|
padding: 2px 12px;
|
||||||
|
background: #c7d0da;
|
||||||
|
border-radius: 0 0 12px 0;
|
||||||
}
|
}
|
||||||
.buy-btn {
|
|
||||||
|
.shop-name {
|
||||||
margin: 98rpx 48rpx 48rpx 48rpx;
|
margin-top: 23px;
|
||||||
padding: 32rpx 32rpx;
|
color: #6988ab;
|
||||||
color: #fff;
|
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 700;
|
|
||||||
border-radius: 80rpx;
|
|
||||||
line-height: 1;
|
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
</style>
|
|
||||||
|
.lv {
|
||||||
|
color: #273d7a;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 64rpx;
|
||||||
|
letter-spacing: 4rpx;
|
||||||
|
transform: skewX(-10deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.time {
|
||||||
|
color: #6988ab;
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rule {
|
||||||
|
.exp {
|
||||||
|
}
|
||||||
|
|
||||||
|
.desc {
|
||||||
|
color: #273d7a;
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.next-tips {
|
||||||
|
color: #6988ab;
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress {
|
||||||
|
margin-top: 8rpx;
|
||||||
|
background-color: #bdd5e9;
|
||||||
|
height: 10rpx;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
|
||||||
|
.block {
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
background: linear-gradient(90deg, #f9fbfa 0.03%, #334783 115.59%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.vip-quanyi {
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 36rpx 18rpx 42rpx 38rpx;
|
||||||
|
border-radius: 40rpx 40rpx 0 0;
|
||||||
|
transform: translateY(-40rpx);
|
||||||
|
}
|
||||||
|
|
||||||
|
.menus-pays {
|
||||||
|
display: grid;
|
||||||
|
/* 每行显示3列，每列宽度相等 */
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
/* 列间距 */
|
||||||
|
column-gap: 10px;
|
||||||
|
/* 行间距 */
|
||||||
|
row-gap: 10px;
|
||||||
|
/* 可以添加容器的内边距 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.menus-tiaojian {
|
||||||
|
display: grid;
|
||||||
|
/* 每行显示3列，每列宽度相等 */
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
/* 列间距 */
|
||||||
|
column-gap: 10px;
|
||||||
|
/* 行间距 */
|
||||||
|
row-gap: 32rpx;
|
||||||
|
/* 可以添加容器的内边距 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.model-box {
|
||||||
|
padding: 32rpx 56rpx;
|
||||||
|
width: 702rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.up-content {
|
||||||
|
color: #999;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
.buy-btn {
|
||||||
|
margin: 98rpx 48rpx 48rpx 48rpx;
|
||||||
|
padding: 32rpx 32rpx;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 700;
|
||||||
|
border-radius: 80rpx;
|
||||||
|
line-height: 1;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user