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

vip滑动Bug #12

Merged
qiushanhe merged 1 commits from dev-qsh into master 1 year ago
Conversation 0 Commits 1 Files Changed 1
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">
<u-sticky>
<view class="flex ai-c">
<view v-for="(item,index) in vipAllList" :key="index" class="km-item" :class="{ actived: index==current }"
@click="current=index">
<view v-for="(item, index) in vipAllList" :key="index" class="km-item" :class="{ actived: index == current }"
@click="current = index">
{{ getKmTitle(item.subjects) }}
</view>
</view>
@ -11,17 +11,17 @@
<view class="mt15">
<swiper class="swiper" :current="current" style="height: 120px;" :autoplay="false" :display-multiple-items="1.45"
: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">
<image src="../../static/image/mine/vip_card.png" mode="widthFix" style="width:95%;"></image>
<view class="vip-info">
<u-avatar class="br-p50 overflow-h" style="border: 3px solid #873E1D;" :size="35" mp-avatar></u-avatar>
<view class="ml10">
<view class="fs16 fwb" style="color: #7E4012;line-height: 16px;">
{{item.memberName}}
{{ item.memberName }}
</view>
<view class="mt5 fs12" style="color: #7E4012;line-height: 12px;">
{{getExpireText(item)}}
{{ getExpireText(item) }}
</view>
</view>
</view>
@ -29,7 +29,7 @@
VIP已开通
</view>
<view v-if="vipHasOpened(item)" class="renew">
{{item.price}}元立即续费
{{ item.price }}元立即续费
</view>
<view v-else class="buy">
立即充值
@ -43,10 +43,10 @@
<view class="mt20">
<swiper class="swiper" :current="current" style="height: 300px;" :autoplay="false"
: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 class="fs18 cor-000 fwb">
3步轻松学{{getKmTitle(item.subjects)}}
3步轻松学{{ getKmTitle(item.subjects) }}
</view>
<view class="mt25 flex ai-c jc-sb">
<view class="flex ai-c">
@ -106,7 +106,7 @@
<view class="flex ai-c mt20">
<image src="../../static/image/index/index_bg.png" mode="widthFix" style="flex: 1;border-radius: 33rpx;"></image>
<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)">
</u-button>
<view class="cor-333 fs15 mt17">真实考场模拟</view>
@ -115,198 +115,198 @@
</view>
</view>
</swiper-item>
<swiper-item>
</swiper-item>
</swiper>
</view>
</view>
</template>
<script>
import useUserStore from '@/jtools/store/user'
export default {
computed: {
vipAllList() {
return useUserStore().vipAllList.filter(it=>[1,2,3,4].includes(Number(it.subjects)))
},
vipOnList() {
return useUserStore().vipOnList
},
import useUserStore from '@/jtools/store/user'
export default {
computed: {
vipAllList() {
return useUserStore().vipAllList.filter(it => [1, 2, 3, 4].includes(Number(it.subjects)))
},
vipOnList() {
return useUserStore().vipOnList
},
},
data() {
return {
current: 0
}
},
methods: {
onChange(e) {
this.current = e.detail.current
},
data() {
getKmTitle(km) {
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: {
onChange(e) {
this.current = e.detail.current
},
getKmTitle(km) {
return {
'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'
})
}
},
// 去考场实况 item=> 当前科目vip信息
toPlaceLive(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>
<style lang="scss" scoped>
.km-item {
margin-right: 8px;
width: 72px;
height: 30px;
line-height: 30px;
font-size: 12px;
color: #333;
text-align: center;
border-radius: 15px;
border: 1px solid #CCCCCC;
}
.km-item {
margin-right: 8px;
width: 72px;
height: 30px;
line-height: 30px;
font-size: 12px;
color: #333;
text-align: center;
border-radius: 15px;
border: 1px solid #CCCCCC;
}
.actived {
background: linear-gradient(90deg, #E66501 0%, #F8A42C 100%);
color: #fff;
}
.actived {
background: linear-gradient(90deg, #E66501 0%, #F8A42C 100%);
color: #fff;
}
.km-item:last-of-type {
margin-right: 0;
}
.km-item:last-of-type {
margin-right: 0;
}
.vip-info {
position: absolute;
top: 15px;
left: 10px;
display: flex;
align-items: center;
}
.vip-info {
position: absolute;
top: 15px;
left: 10px;
display: flex;
align-items: center;
}
.corner {
position: absolute;
bottom: 0;
left: 0;
width: 77px;
height: 23px;
background: linear-gradient(0deg, #E66501 0%, #F8A42C 100%);
opacity: 0.86;
border-radius: 0px 8px 0px 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
color: #fff;
}
.corner {
position: absolute;
bottom: 0;
left: 0;
width: 77px;
height: 23px;
background: linear-gradient(0deg, #E66501 0%, #F8A42C 100%);
opacity: 0.86;
border-radius: 0px 8px 0px 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
color: #fff;
}
.renew {
position: absolute;
right: 10%;
bottom: 15px;
display: flex;
align-items: center;
justify-content: center;
width: 185rpx;
height: 52rpx;
background: #873E1D;
border-radius: 26rpx;
font-size: 12px;
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;
}
.renew {
position: absolute;
right: 10%;
bottom: 15px;
display: flex;
align-items: center;
justify-content: center;
width: 185rpx;
height: 52rpx;
background: #873E1D;
border-radius: 26rpx;
font-size: 12px;
color: #F6E99F;
}
.study {
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;
}
.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 {
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>
Write Preview
Loading…
Cancel
Save