会员修复
This commit is contained in:
@@ -146,7 +146,8 @@
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
computed
|
||||
computed,
|
||||
watch
|
||||
} from "vue"
|
||||
import {
|
||||
joinMember,
|
||||
@@ -194,15 +195,15 @@
|
||||
const state = reactive({
|
||||
openType: 'CONDITION'
|
||||
})
|
||||
|
||||
const pay_menus = ref([{
|
||||
|
||||
const $pay_menus=[{
|
||||
name: '赠送成长值',
|
||||
desc: '赠送成长值',
|
||||
icon: '/user/static/buy-vip/Frame_220.png',
|
||||
},
|
||||
{
|
||||
name: '优惠券',
|
||||
desc: '每月赠送2张优惠券',
|
||||
desc: '',
|
||||
icon: '/user/static/buy-vip/Frame_221.png'
|
||||
},
|
||||
{
|
||||
@@ -212,7 +213,7 @@
|
||||
},
|
||||
{
|
||||
name: '会员折扣',
|
||||
desc: '全店折扣98折',
|
||||
desc: '',
|
||||
icon: '/user/static/buy-vip/Frame_223.png'
|
||||
},
|
||||
{
|
||||
@@ -225,7 +226,9 @@
|
||||
desc: '',
|
||||
icon: '/user/static/buy-vip/Frame_225.png'
|
||||
}
|
||||
])
|
||||
]
|
||||
|
||||
const pay_menus = ref($pay_menus)
|
||||
|
||||
let tiaojian_menus =ref( [{
|
||||
name: '享会员价',
|
||||
@@ -295,7 +298,7 @@
|
||||
if (res) {
|
||||
if(!res.memberConfig.isMemberPrice){
|
||||
tiaojian_menus.value=tiaojian_menus.value.filter(v=>v.name!='享会员价')
|
||||
pay_menus.value=pay_menus.value.filter(v=>v.name!='享会员价')
|
||||
pay_menus.value=$pay_menus.filter(v=>v.name!='享会员价')
|
||||
}
|
||||
if (res.memberConfig.isSubmitInfo && (shopUserInfo.value.sex === null || shopUserInfo.value.sex ===
|
||||
undefined || !shopUserInfo.value.nickName || !shopUserInfo.value.birthDay || !shopUserInfo.value
|
||||
@@ -319,8 +322,9 @@
|
||||
configList.value = res.memberConfig.configList
|
||||
|
||||
Object.assign(state, res.memberConfig)
|
||||
memberLevel.value = res.memberLevel
|
||||
|
||||
const first_lv=(res.memberLevelList||[])[0]
|
||||
memberLevel.value = res.memberLevel||first_lv
|
||||
filterPay_menus()
|
||||
}
|
||||
}
|
||||
const returnReward = computed(() => {
|
||||
@@ -389,6 +393,36 @@
|
||||
},1000)
|
||||
}
|
||||
}
|
||||
//过滤掉部分未开启的菜单相
|
||||
function filterPay_menus(){
|
||||
pay_menus.value=$pay_menus.filter(v=>{
|
||||
if(!state.isMemberPrice&&v.name=='享会员价'){
|
||||
return false
|
||||
}
|
||||
if (state.isSubmitInfo && (shopUserInfo.value.sex === null || shopUserInfo.value.sex ===
|
||||
undefined || !shopUserInfo.value.nickName || !shopUserInfo.value.birthDay || !shopUserInfo.value
|
||||
.phone)) {
|
||||
memberOpen.value = true;
|
||||
}
|
||||
const viplv= configList.value[vipSel.value]
|
||||
if(viplv.couponList.length==0&&v.name=='优惠券'){
|
||||
return false
|
||||
}
|
||||
if((!memberLevel.value||!memberLevel.value.isCostRewardPoints)&&v.name=='消费送积分'){
|
||||
return false
|
||||
}
|
||||
if((!memberLevel.value||!memberLevel.value.isCycleReward)&&v.name=='周期福利'){
|
||||
return false
|
||||
}
|
||||
return true
|
||||
})
|
||||
}
|
||||
watch(()=>vipSel.value,(newval,oldval)=>{
|
||||
console.log('vipSel.value',newval);
|
||||
filterPay_menus()
|
||||
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
731
user/vip/vip.vue
731
user/vip/vip.vue
@@ -47,7 +47,8 @@
|
||||
</view>
|
||||
<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(item.name)" 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>
|
||||
@@ -78,383 +79,423 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import dayjs from 'dayjs';
|
||||
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,
|
||||
title: ''
|
||||
});
|
||||
|
||||
function modelHide() {
|
||||
model.show = false;
|
||||
}
|
||||
|
||||
function toXufei() {
|
||||
uni.navigateTo({
|
||||
url: '/user/vip/buy-vip?shopId=' + option.shopId
|
||||
import dayjs from 'dayjs';
|
||||
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,
|
||||
title: ''
|
||||
});
|
||||
}
|
||||
|
||||
function modelShow(name) {
|
||||
if (name == '消费送积分') {
|
||||
model.title = '消费送积分';
|
||||
modelContent.value = `每消耗1元赠送${memberLevel.value.costRewardPoints}积分`;
|
||||
function modelHide() {
|
||||
model.show = false;
|
||||
}
|
||||
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(``);
|
||||
const state = reactive({
|
||||
openType: 'CONDITION'
|
||||
});
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
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 / 10 + '折';
|
||||
}
|
||||
return v;
|
||||
function toXufei() {
|
||||
uni.navigateTo({
|
||||
url: '/user/vip/buy-vip?shopId=' + option.shopId
|
||||
});
|
||||
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;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
if (name == '等级说明') {
|
||||
model.title = '等级说明';
|
||||
modelContent.value = memberLevel.value.remark || '';
|
||||
}
|
||||
model.show = true;
|
||||
}
|
||||
const modelContent = ref(``);
|
||||
const state = reactive({
|
||||
openType: 'CONDITION'
|
||||
});
|
||||
|
||||
let pay_menus = [{
|
||||
name: '赠送成长值',
|
||||
desc: '',
|
||||
icon: '/user/static/Frame_220.png'
|
||||
},
|
||||
{
|
||||
name: '优惠券',
|
||||
desc: '',
|
||||
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;
|
||||
}
|
||||
|
||||
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 (res.memberConfig.openType == 'PAY') {
|
||||
menus.value = pay_menus;
|
||||
} else {
|
||||
menus.value = tiaojian_menus;
|
||||
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) {
|
||||
res.memberLevel.cycleRewardCouponList = res.memberLevel.cycleRewardCouponList || []
|
||||
res.memberLevel = res.memberLevel || {}
|
||||
Object.assign(state, res.memberConfig);
|
||||
memberLevelList.value = res.memberLevelList;
|
||||
pay_menus = pay_menus.filter(v => {
|
||||
if (!res.memberLevel.isCostRewardPoints && v.name == '消费送积分') {
|
||||
return false
|
||||
}
|
||||
if (!res.memberLevel.isCycleReward && v.name == '周期福利') {
|
||||
return false
|
||||
}
|
||||
if (!res.memberLevel.cycleRewardCouponList || res.memberLevel.cycleRewardCouponList.length <=
|
||||
0 && v.name == '优惠券') {
|
||||
return false
|
||||
}
|
||||
return true
|
||||
}).map((v) => {
|
||||
if (v.name == '赠送成长值' && res.memberLevel) {
|
||||
v.desc = `赠送${res.memberLevel.experienceValue}成长值`
|
||||
}
|
||||
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.filter(v => {
|
||||
if (!state.isCostRewardPoints && v.name == '消费送积分') {
|
||||
return false
|
||||
}
|
||||
if (!state.isCycleReward && v.name == '周期福利') {
|
||||
return false
|
||||
}
|
||||
if (!res.memberLevel.cycleRewardCouponList || res.memberLevel.cycleRewardCouponList.length <=
|
||||
0 && v.name == '优惠券') {
|
||||
return false
|
||||
}
|
||||
return true
|
||||
}).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({
|
||||
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;
|
||||
const percent = ((res1.experience * 1) / total) * 100;
|
||||
if (total <= 0 || res1.experience * 1 <= 0) {
|
||||
expProgress.value = 100;
|
||||
}
|
||||
expProgress.value = percent;
|
||||
}
|
||||
}
|
||||
const res1 = await vipApi.detail({
|
||||
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;
|
||||
const percent = ((res1.experience * 1) / total) * 100;
|
||||
if (total <= 0 || res1.experience * 1 <= 0) {
|
||||
expProgress.value = 100;
|
||||
|
||||
const nextName = computed(() => {
|
||||
if (memberLevelList.value.length <= 0 || !memberLevel.value) {
|
||||
return null;
|
||||
}
|
||||
expProgress.value = percent;
|
||||
}
|
||||
}
|
||||
|
||||
const nextName = computed(() => {
|
||||
if (memberLevelList.value.length <= 0 || !memberLevel.value) {
|
||||
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;
|
||||
});
|
||||
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>
|
||||
|
||||
<style>
|
||||
page {
|
||||
background: #f9f9f9;
|
||||
}
|
||||
page {
|
||||
background: #f9f9f9;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.font-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;
|
||||
}
|
||||
|
||||
.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-700 {
|
||||
font-weight: 700;
|
||||
font-size: 64rpx;
|
||||
letter-spacing: 4rpx;
|
||||
transform: skewX(-10deg);
|
||||
}
|
||||
|
||||
.time {
|
||||
color: #6988ab;
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
.color-one {
|
||||
color: #558abf;
|
||||
}
|
||||
|
||||
.rule {
|
||||
.exp {
|
||||
.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;
|
||||
}
|
||||
|
||||
.desc {
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.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%;
|
||||
.progress {
|
||||
margin-top: 8rpx;
|
||||
background-color: #bdd5e9;
|
||||
height: 10rpx;
|
||||
border-radius: 10rpx;
|
||||
background: linear-gradient(90deg, #f9fbfa 0.03%, #334783 115.59%);
|
||||
|
||||
.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);
|
||||
}
|
||||
.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-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;
|
||||
/* 可以添加容器的内边距 */
|
||||
}
|
||||
.menus-tiaojian {
|
||||
display: grid;
|
||||
/* 每行显示3列，每列宽度相等 */
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
/* 列间距 */
|
||||
column-gap: 10px;
|
||||
/* 行间距 */
|
||||
row-gap: 32rpx;
|
||||
/* 可以添加容器的内边距 */
|
||||
}
|
||||
|
||||
.model-box {
|
||||
padding: 32rpx 56rpx;
|
||||
width: 702rpx;
|
||||
}
|
||||
.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>
|
||||
.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