huxiaofeng666
/
jwl-applet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request 'vip滑动Bug' (#12) from dev-qsh into master

Browse Source 
Reviewed-on: #12
pull/13/head^2
qiushanhe 1 year ago
parent a7c7b410d3 78cf2fd9f7
commit fa9d6a8696
1 changed files with 181 additions and 181 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 360
      src/pages/me/vip.vue

360
src/pages/me/vip.vue
Unescape View File

@ -2,8 +2,8 @@
<view class="flex fld-c p15"> <view class="flex fld-c p15">
<u-sticky> <u-sticky>
<view class="flex ai-c"> <view class="flex ai-c">
<view v-for="(item,index) in vipAllList" :key="index" class="km-item" :class="{ actived: index==current }" <view v-for="(item, index) in vipAllList" :key="index" class="km-item" :class="{ actived: index == current }"
@click="current=index"> @click="current = index">
{{ getKmTitle(item.subjects) }} {{ getKmTitle(item.subjects) }}
</view> </view>
</view> </view>
@ -11,17 +11,17 @@
<view class="mt15"> <view class="mt15">
<swiper class="swiper" :current="current" style="height: 120px;" :autoplay="false" :display-multiple-items="1.45" <swiper class="swiper" :current="current" style="height: 120px;" :autoplay="false" :display-multiple-items="1.45"
:disable-programmatic-animation="true" @change="onChange"> :disable-programmatic-animation="true" @change="onChange">
<swiper-item v-for="(item,index) in vipAllList" :key="index"> <swiper-item v-for="(item, index) in vipAllList" :key="index">
<view class="relative"> <view class="relative">
<image src="../../static/image/mine/vip_card.png" mode="widthFix" style="width:95%;"></image> <image src="../../static/image/mine/vip_card.png" mode="widthFix" style="width:95%;"></image>
<view class="vip-info"> <view class="vip-info">
<u-avatar class="br-p50 overflow-h" style="border: 3px solid #873E1D;" :size="35" mp-avatar></u-avatar> <u-avatar class="br-p50 overflow-h" style="border: 3px solid #873E1D;" :size="35" mp-avatar></u-avatar>
<view class="ml10"> <view class="ml10">
<view class="fs16 fwb" style="color: #7E4012;line-height: 16px;"> <view class="fs16 fwb" style="color: #7E4012;line-height: 16px;">
{{item.memberName}} {{ item.memberName }}
</view> </view>
<view class="mt5 fs12" style="color: #7E4012;line-height: 12px;"> <view class="mt5 fs12" style="color: #7E4012;line-height: 12px;">
{{getExpireText(item)}} {{ getExpireText(item) }}
</view> </view>
</view> </view>
</view> </view>
@ -29,7 +29,7 @@
VIP已开通 VIP已开通
</view> </view>
<view v-if="vipHasOpened(item)" class="renew"> <view v-if="vipHasOpened(item)" class="renew">
{{item.price}}元立即续费 {{ item.price }}元立即续费
</view> </view>
<view v-else class="buy"> <view v-else class="buy">
立即充值 立即充值
@ -43,10 +43,10 @@
<view class="mt20"> <view class="mt20">
<swiper class="swiper" :current="current" style="height: 300px;" :autoplay="false" <swiper class="swiper" :current="current" style="height: 300px;" :autoplay="false"
:disable-programmatic-animation="true" @change="onChange"> :disable-programmatic-animation="true" @change="onChange">
<swiper-item v-for="(item,index) in vipAllList" :key="index"> <swiper-item v-for="(item, index) in vipAllList" :key="index">
<view v-if="index == 0 || index == 3" class="p15 br8 cor-fff"> <view v-if="index == 0 || index == 3" class="p15 br8 cor-fff">
<view class="fs18 cor-000 fwb"> <view class="fs18 cor-000 fwb">
3步轻松学{{getKmTitle(item.subjects)}} 3步轻松学{{ getKmTitle(item.subjects) }}
</view> </view>
<view class="mt25 flex ai-c jc-sb"> <view class="mt25 flex ai-c jc-sb">
<view class="flex ai-c"> <view class="flex ai-c">
@ -106,7 +106,7 @@
<view class="flex ai-c mt20"> <view class="flex ai-c mt20">
<image src="../../static/image/index/index_bg.png" mode="widthFix" style="flex: 1;border-radius: 33rpx;"></image> <image src="../../static/image/index/index_bg.png" mode="widthFix" style="flex: 1;border-radius: 33rpx;"></image>
<view class="ml18 text-center"> <view class="ml18 text-center">
<u-button :customStyle="{width:'200rpx',height:'66rpx',borderRadius: '33rpx'}" iconColor="#fff" <u-button :customStyle="{ width: '200rpx', height: '66rpx', borderRadius: '33rpx' }" iconColor="#fff"
text="去看视频" color="linear-gradient(90deg, #E66501 0%, #F8A42C 100%)" icon="play-circle" @click="toPlaceLive(item)"> text="去看视频" color="linear-gradient(90deg, #E66501 0%, #F8A42C 100%)" icon="play-circle" @click="toPlaceLive(item)">
</u-button> </u-button>
<view class="cor-333 fs15 mt17">真实考场模拟</view> <view class="cor-333 fs15 mt17">真实考场模拟</view>
@ -115,198 +115,198 @@
</view> </view>
</view> </view>
</swiper-item> </swiper-item>
<swiper-item>
</swiper-item>
</swiper> </swiper>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
import useUserStore from '@/jtools/store/user' import useUserStore from '@/jtools/store/user'
export default { export default {
computed: { computed: {
vipAllList() { vipAllList() {
return useUserStore().vipAllList.filter(it=>[1,2,3,4].includes(Number(it.subjects))) return useUserStore().vipAllList.filter(it => [1, 2, 3, 4].includes(Number(it.subjects)))
}, },
vipOnList() { vipOnList() {
return useUserStore().vipOnList return useUserStore().vipOnList
}, },
},
data() {
return {
current: 0
}
},
methods: {
onChange(e) {
this.current = e.detail.current
}, },
data() { getKmTitle(km) {
return { return {
current: 0 '1': '科一',
'2': '科二',
'3': '科三',
'4': '科四',
}[km]
},
getExpireText(item) {
const vipOn = this.vipOnList.find(it => it.memberId == item.memberId)
if (vipOn) {
return `${vipOn.endDate.split(' ')[0]}到期`
} else {
return '开通vip助您快速拿证'
}
},
vipHasOpened(item) {
return !!this.vipOnList.find(it => it.memberId == item.memberId)
},
// 去精选500题 item=> 当前科目vip信息
to500(item) {
// 当前vip是否已开通
if (this.vipHasOpened(item)) {
// 跳转
} else {
uni.showToast({
title: `请先充值${this.getKmTitle(item.subjects)}vip`,
icon: 'none'
})
}
},
// 去真实考场 item=> 当前科目vip信息
toRealExam(item) {
// 当前vip是否已开通
if (this.vipHasOpened(item)) {
// 跳转
} else {
uni.showToast({
title: `请先充值${this.getKmTitle(item.subjects)}vip`,
icon: 'none'
})
}
},
// 去秘卷 item=> 当前科目vip信息
toSpecExam(item) {
// 当前vip是否已开通
if (this.vipHasOpened(item)) {
// 跳转
} else {
uni.showToast({
title: `请先充值${this.getKmTitle(item.subjects)}vip`,
icon: 'none'
})
} }
}, },
methods: { // 去考场实况 item=> 当前科目vip信息
onChange(e) { toPlaceLive(item) {
this.current = e.detail.current // 当前vip是否已开通
}, if (this.vipHasOpened(item)) {
getKmTitle(km) { // 跳转
return { } else {
'1': '科一', uni.showToast({
'2': '科二', title: `请先充值${this.getKmTitle(item.subjects)}vip`,
'3': '科三', icon: 'none'
'4': '科四', })
}[km]
},
getExpireText(item) {
const vipOn = this.vipOnList.find(it => it.memberId == item.memberId)
if(vipOn) {
return `${vipOn.endDate.split(' ')[0]}到期`
} else {
return '开通vip助您快速拿证'
}
},
vipHasOpened(item) {
return !!this.vipOnList.find(it => it.memberId == item.memberId)
},
// 去精选500题 item=> 当前科目vip信息
to500(item) {
// 当前vip是否已开通
if(this.vipHasOpened(item)) {
// 跳转
} else {
uni.showToast({
title: `请先充值${this.getKmTitle(item.subjects)}vip`,
icon: 'none'
})
}
},
// 去真实考场 item=> 当前科目vip信息
toRealExam(item) {
// 当前vip是否已开通
if(this.vipHasOpened(item)) {
// 跳转
} else {
uni.showToast({
title: `请先充值${this.getKmTitle(item.subjects)}vip`,
icon: 'none'
})
}
},
// 去秘卷 item=> 当前科目vip信息
toSpecExam(item) {
// 当前vip是否已开通
if(this.vipHasOpened(item)) {
// 跳转
} else {
uni.showToast({
title: `请先充值${this.getKmTitle(item.subjects)}vip`,
icon: 'none'
})
}
},
// 去考场实况 item=> 当前科目vip信息
toPlaceLive(item) {
// 当前vip是否已开通
if(this.vipHasOpened(item)) {
// 跳转
} else {
uni.showToast({
title: `请先充值${this.getKmTitle(item.subjects)}vip`,
icon: 'none'
})
}
} }
} }
} }
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.km-item { .km-item {
margin-right: 8px; margin-right: 8px;
width: 72px; width: 72px;
height: 30px; height: 30px;
line-height: 30px; line-height: 30px;
font-size: 12px; font-size: 12px;
color: #333; color: #333;
text-align: center; text-align: center;
border-radius: 15px; border-radius: 15px;
border: 1px solid #CCCCCC; border: 1px solid #CCCCCC;
} }
.actived { .actived {
background: linear-gradient(90deg, #E66501 0%, #F8A42C 100%); background: linear-gradient(90deg, #E66501 0%, #F8A42C 100%);
color: #fff; color: #fff;
} }
.km-item:last-of-type { .km-item:last-of-type {
margin-right: 0; margin-right: 0;
} }
.vip-info { .vip-info {
position: absolute; position: absolute;
top: 15px; top: 15px;
left: 10px; left: 10px;
display: flex; display: flex;
align-items: center; align-items: center;
} }
.corner { .corner {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
width: 77px; width: 77px;
height: 23px; height: 23px;
background: linear-gradient(0deg, #E66501 0%, #F8A42C 100%); background: linear-gradient(0deg, #E66501 0%, #F8A42C 100%);
opacity: 0.86; opacity: 0.86;
border-radius: 0px 8px 0px 8px; border-radius: 0px 8px 0px 8px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 12px; font-size: 12px;
color: #fff; color: #fff;
} }
.renew { .renew {
position: absolute; position: absolute;
right: 10%; right: 10%;
bottom: 15px; bottom: 15px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 185rpx; width: 185rpx;
height: 52rpx; height: 52rpx;
background: #873E1D; background: #873E1D;
border-radius: 26rpx; border-radius: 26rpx;
font-size: 12px; font-size: 12px;
color: #F6E99F; color: #F6E99F;
} }
.buy {
position: absolute;
left: 45%;
transform: translateX(-50%);
bottom: 15px;
display: flex;
align-items: center;
justify-content: center;
width: 200rpx;
height: 60rpx;
background: #873E1D;
border-radius: 30rpx;
font-size: 14px;
color: #F6E99F;
}
.study { .buy {
display: flex; position: absolute;
align-items: center; left: 45%;
justify-content: center; transform: translateX(-50%);
width: 161rpx; bottom: 15px;
height: 67rpx; display: flex;
background: #F6E99F; align-items: center;
border-radius: 34rpx; justify-content: center;
font-size: 12px; width: 200rpx;
color: #873E1D; height: 60rpx;
} background: #873E1D;
.video-box { border-radius: 30rpx;
padding: 20rpx; font-size: 14px;
width: 694rpx; color: #F6E99F;
height: 369rpx; }
background: #F9F3E7;
border: 2rpx solid #CF8B6D; .study {
border-radius: 16rpx; display: flex;
} align-items: center;
justify-content: center;
width: 161rpx;
height: 67rpx;
background: #F6E99F;
border-radius: 34rpx;
font-size: 12px;
color: #873E1D;
}
.video-box {
padding: 20rpx;
width: 694rpx;
height: 369rpx;
background: #F9F3E7;
border: 2rpx solid #CF8B6D;
border-radius: 16rpx;
}
</style> </style>
Write Preview
Loading…
Cancel
Save