|
|
<template> <view class="content"> <!-- <up-navbar leftText=" " title="什么东西？" :safeAreaInsetTop="true" :autoBack="true" :fixed="false" :bgColor="'transparent'" ></up-navbar> --> <up-navbar leftText=" " :leftIconColor="'#fff'" :safeAreaInsetTop="true" :autoBack="true" title=" " :fixed="true" :bgColor="'transparent'"> </up-navbar> <view class="topBg" :class="{bigBg: curVipItem.type=='5'}"> <view class="tag">朱XX成为VIP会员</view> <view class="tag">一次搞定</view> <view class="tag">五大特权</view> <view class="tag">最低仅需0.5元/天</view> <view class="tag" @click="$goPage('/pages/vip/vipQuestions/vipQuestions')">常见问题</view> <view class="allSubRow" v-if="curVipItem.type=='5'"> <view class="allsbItem"> <view class="icon"> <image src="@/static/images/vip/allSbu1.png" mode=""></image> </view> <view class="text">科一VIP</view> </view> <view class="allsbItem"> <view class="icon_arrow"> <image src="@/static/images/vip/allsubR.png" mode=""></image> </view> </view> <view class="allsbItem"> <view class="icon"> <image src="@/static/images/vip/allSbu2.png" mode=""></image> </view> <view class="text">全科VIP</view> </view> <view class="allsbItem"> <view class="icon_arrow"> <image src="@/static/images/vip/allsubL.png" mode=""></image> </view> </view> <view class="allsbItem"> <view class="icon"> <image src="@/static/images/vip/allSbu3.png" mode=""></image> </view> <view class="text">科四VIP</view> </view> </view> </view> <view class="padding"> <view class="allVip flex-b"> <view class="vipItem" v-for="(item,index) in vipItemData" :key="index" :class="{active: curVipItem.name==item.name}" @click="chooseVip(item)" > <view class="lab">{{item.name}}</view> <view class="redT flex"> <view class="price">￥<text>{{item.price}}/</text></view> <view class="day">{{item.days}}天</view> </view> </view> </view> <view class="btnBox flex-b"> <view class="whiteT flex"> <view class="price">￥<text>{{ curVipItem.price }}/</text></view> <view class="day">{{curVipItem.days}}天</view> </view> <view class="upgra" @click="goPaymentOrder()"></view> </view> <view class="h1_row flex-b"> <view class="h1" ><text class="active">尊享权益</text></view> <view class="moreBox"> <moreRight text="查看全部"/> </view> </view> <view class="card"> <view class="tit_row flex"> <view class="round"> <image src="@/static/images/vip/leftq.png" mode=""></image> </view> <view class="tit">五大权益助力高效领证</view> <view class="round"> <image src="@/static/images/vip/rightq.png" mode=""></image> </view> </view> <view class="tps">180天内无限使用</view> <view class="ul"> <view class="li" v-for="(item,index) in tabData" :key="index"> <view class="icon"> <image :src="item.icon" mode=""></image> </view> <view class="txt">{{item.name}}</view> </view> </view> </view> <view class="learning"> <view class="h1_box"> <view class="h1"> <text class="active">四步高效学习法</text> </view> </view> <view class="blueBg"> <view class="blueTxt">拒绝费时费力 高效备考理论</view> <view class="ul"> <view class="li" v-for="(item,index) in stepData" :key="index"> <view class="flex"> <view class="step">第{{ item.num }}步</view> <view class="unit">{{ item.oneTxt }}</view> </view> <view class="flex-b"> <view class="leftImg"> <image :src="item.icon" mode=""></image> </view> <view class="rightTxt"> <view class="lab">精选试题</view> <view class="txt">提炼易错、易考试题，减少相似题目练习，缩短备考时间</view> </view> </view> </view> </view> </view> </view> <view class="comment"> <view class="h1_row flex-b"> <view class="h1" ><text class="active">VIP学员之声</text></view> <view class="moreBox" @click="lookMore"> <moreRight text="查看全部" /> </view> </view> <swiper next-margin="60rpx" previous-margin="20rpx"> <swiper-item v-for="(item,index) in voiceList" :key="index"> <view style="padding: 0 20rpx;"> <commentItem :item="item"/> </view> </swiper-item> </swiper> </view> <up-popup v-model:show="show" mode="bottom" round="20rpx" @close="show=false" closeable> <view class="commentbox"> <view class="tit">VIP学员之声</view> <view class="popComment"> <commentItem v-for="(item,index) in voiceList" :item="item" :key="index"></commentItem> </view> </view> </up-popup> </view> </view></template>
<script setup> import { ref } from 'vue' import commentItem from './comp/commentItem.vue' import { memberGradelist, memberVoicePage } from '@/config/api.js' import carStore from '@/store/modules/car.js' let usecarStore = carStore() const tabData = ref([ {name: '精选试题', icon: new URL('@/static/images/vip/vipicon2.png', import.meta.url).href, id: '1'}, {name: '仿真考试', icon: new URL('@/static/images/vip/vipicon3.png', import.meta.url).href, id: '1'}, {name: '考前密卷', icon: new URL('@/static/images/vip/vipicon4.png', import.meta.url).href, id: '1'}, {name: '高频错题', icon: new URL('@/static/images/vip/vipicon5.png', import.meta.url).href, id: '1'}, {name: '语音讲解', icon: new URL('@/static/images/vip/vipicon1.png', import.meta.url).href, id: '1'} ]) const stepData = ref([ {name: '精选试题', num: '一', oneTxt: '练', txt: '提炼易错、易考试题，减少相似题目练习，缩短备考时间', icon: new URL('@/static/images/vip/coveb.png', import.meta.url).href, id: '1'}, {name: '还原真实考场', num: '二', oneTxt: '考', txt: '100%还原考试界面，磨练考试技巧、增强心理素质、提高考试成绩', icon: new URL('@/static/images/vip/covec.png', import.meta.url).href, id: '1'}, {name: '考前秘卷', num: '三', oneTxt: '冲', txt: '考前精选 高频难题 直击考点 稳上高分', icon: new URL('@/static/images/vip/coved.png', import.meta.url).href, id: '1'}, {name: '温故高频错题', num: '四', oneTxt: '复', txt: '汇总您的专属高频错题，全力攻破最后的难关', icon: new URL('@/static/images/vip/covea.png', import.meta.url).href, id: '1'}, ]) const curVipItem = ref({name: '全科VIP', price: 15, days: 180}) const vipItemData = ref([ // {name: '全科VIP', price: 15, day: 180},
// {name: '科目一VIP', price: 10, day: 180},
// {name: '科目四VIP', price: 10, day: 180},
]) let show = ref(false) function lookMore() { show.value = true } function chooseVip(item) { curVipItem.value = item } async function memberGradelistFn() { const {data: res} = await memberGradelist(usecarStore.carInfo.carType) if(!res.length) return vipItemData.value = res console.log(res) } memberGradelistFn() let voiceList = ref([]) async function memberVoicePageFn() { let obj = { "carType": usecarStore.carInfo.carType, "pageNum": 1, "pageSize": 6 } const res = await memberVoicePage(obj) console.log(res) if(!res.rows.length) return voiceList.value = res.rows } memberVoicePageFn() function goPaymentOrder() { if(!curVipItem.value.id) return uni.$u.toast('请先选择要购买的类型') uni.navigateTo({ url: `/pages/vip/paymentOrder/paymentOrder?name=${curVipItem.value.name}&id=${curVipItem.value.id}&price=${curVipItem.value.price}` }) } </script>
<style lang="scss" scoped> .allSubRow { display: flex; position: absolute; bottom: 160rpx; left: 0; width: 100%; padding: 0 30px; .allsbItem { flex: 1; display: flex; justify-content: center; flex-direction: column; align-items: center; .icon { width: 90rpx; height: 90rpx; } .icon_arrow { width: 38rpx; height: 36rpx; margin: 33rpx auto; } .text { margin-top: 18rpx; font-size: 28rpx; color: #fff; } } } image { display: block; width: 100%; height: 100%; } .content { width: 100%; .topBg { width: 100%; height: 550rpx; background: url('../../../static/images/bigImg/vipbg.png') no-repeat; background-size: 100% 100%; // padding-top: 88rpx;
position: relative; &.bigBg { height: 794rpx; background: url('../../../static/images/bigImg/vipallBg.png') no-repeat; background-size: 100% 100%; } .tag { position: absolute; font-size: 24rpx; color: #FFF9F3; padding: 9rpx; background: url('../../../static/images/vip/tagbg.png') no-repeat; background-size: 100% 100%; &:nth-child(1) { left: 50rpx; top: 152rpx; } &:nth-child(2) { right: 78rpx; top: 182rpx; } &:nth-child(3) { left: 20rpx; top: 280rpx; } &:nth-child(4) { right: 20rpx; top: 406rpx; } &:nth-child(5) { right: 0; top: 215rpx; width: 48rpx; height: 176rpx; padding-top: 20rpx; background: url('../../../static/images/vip/qustr.png') no-repeat; background-size: 100% 100%; } } } .padding { position: relative; z-index: 99; } .allVip { transform: translateY(-96rpx); // top: -96rpx;
.vipItem { width: 28%; height: 180rpx; background: #FFFFFF; border-radius: 10rpx; border: 2px solid #FDD5B7; &.active { transform: scale(1.3); background-color: #FDF5E4; border: 4px solid #EAA270; border-radius: 10px; } .lab { height: 96rpx; line-height: 96rpx; text-align: center; font-size: 28rpx; font-weight: 500; } .redT { padding-top: 16rpx; text-align: center; width: 100%; justify-content: center; border-top: 1px solid #eee; .price { color: #DA492D; font-size: 24rpx; text { font-size: 36rpx; } } .day { font-size: 24rpx; color: #9E492D; } } } } .btnBox.flex-b { width: 100%; height: 100rpx; background: #3776FF; border-radius: 50rpx; padding: 10rpx 10rpx 10rpx 32rpx; margin-top: -50rpx; .whiteT.flex { color: #fff; .price { font-size: 24rpx; text { font-size: 36rpx; font-weight: 700; } } .day { font-size: 24rpx; } } .upgra { width: 230rpx; height: 80rpx; // background: linear-gradient(0deg, #F7D0A5 0%, #FCEDD1 100%);
background: url('../../../static/images/vipbtn.png') no-repeat; background-size: 100% 100%; border-radius: 40rpx; font-size: 36rpx; line-height: 80rpx; text-align: center; font-weight: 500; } } .h1_row { height: 118rpx; } .card { background: #FFFFFF; box-shadow: 0px 0px 18px 0px rgba(0,0,0,0.04); border-radius: 20px; padding: 30rpx 20rpx; .tit_row.flex { width: 100%; justify-content: center; .round { width: 24rpx; height: 24rpx; } .tit { font-size: 28rpx; color: #333; padding: 0 20rpx; } } .tps { font-size: 24rpx; color: #ccc; padding: 20rpx 0 32rpx 0; text-align: center; } .ul { display: flex; .li { width: 20%; display: flex; flex-direction: column; align-items: center; justify-content: center; .icon { width: 84rpx; height: 84rpx; } .txt { font-size: 28rpx; margin-top: 14rpx; } } } } .learning { .h1_box { padding: 20rpx 0; } .h1 { } .blueBg { background: linear-gradient(180deg, #E3FEFF 0%, #F2FEFF 100%); border-radius: 20px; padding: 0 20rpx 20rpx 20rpx; margin-top: 20rpx; .blueTxt { line-height: 68rpx; text-align: center; font-size: 30rpx; font-weight: 700; color: $themC; } .ul { width: 100%; background: #FFFFFF; border-radius: 20px; .li { width: 100%; padding: 30rpx 0rpx; border-bottom: 1px solid #F4F4F4; .flex { .step { width: 125rpx; height: 50rpx; font-size: 28rpx; // background: #3776FF;
// border-radius: 0px 0px 30rpx 0px;
line-height: 42rpx; color: #fff; text-align: center; background: url('../../../static/images/vip/stepTag.png') no-repeat; background-size: 100% 100%; } .unit { font-family: PingFang SC; font-weight: bold; font-size: 36rpx; color: #333333; margin-left: 20rpx; } } .flex-b { padding-top: 30rpx; padding: 30rpx 20rpx 0 20rpx; .leftImg { width: 360rpx; height: 200rpx; background: #F4EED8; border-radius: 20rpx; overflow: hidden; } .rightTxt { padding-left: 20rpx; flex: 1; width: 0; .lab { font-weight: bold; font-size: 28rpx; color: #333333; line-height: 66rpx; } .txt { font-weight: 500; font-size: 24rpx; color: #666666; line-height: 34rpx; } } } } } } } } .comment { margin-top: 20rpx; } .commentbox { position: relative; .tit { height: 94rpx; line-height: 94rpx; position: absolute; left: 0; top: 0; border-bottom: 1px solid #F4F4F4; width: 100%; padding-left: 40rpx; font-weight: 700; background-color: #fff; z-index: 2; } .popComment { max-height: calc(100vh - 400rpx); overflow-y: auto; padding: 134rpx 40rpx 40rpx 40rpx; } } .u-popup__content__close { z-index: 2; } :deep .u-popup__content__close--top-right { z-index: 20; }</style>
|
