267 lines
8.7 KiB
Vue
267 lines
8.7 KiB
Vue
<!--
|
||
开通VIP 页面
|
||
-->
|
||
<script>
|
||
import StaticConstant from "@/common/StaticConstant";
|
||
import ApiConstant from "@/common/ApiConstant";
|
||
import ImagesConstant from "@/common/ImagesConstant";
|
||
import Request from '@/common/request'
|
||
|
||
let request = new Request()
|
||
export default {
|
||
name: "vip-index",
|
||
components: {},
|
||
computed: {
|
||
ImagesConstant() {
|
||
return ImagesConstant
|
||
},
|
||
StaticConstant() {
|
||
return StaticConstant
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
checkFlag: false,
|
||
cardIndex: 0,
|
||
cardArray: [
|
||
{
|
||
skuCode:'1',
|
||
skuName: '志愿卡',
|
||
skuOriginalPrice:0,
|
||
skuPrice:18.8,
|
||
endTime: '2024-08-31'
|
||
},
|
||
]
|
||
}
|
||
},
|
||
onLoad() {
|
||
//设置秒杀定时器
|
||
this.getSkuList()
|
||
},
|
||
methods: {
|
||
//卡密激活按钮
|
||
kaMi(){
|
||
this.goto('/pages/zyb/vip/cardamom')
|
||
},
|
||
getSkuList(){
|
||
request.get(ApiConstant.VIP.skuList, {}).then(r => {
|
||
console.log(r)
|
||
if (r.success) {
|
||
this.cardArray = r.result
|
||
}
|
||
}).catch(err => {
|
||
}).finally(() => {
|
||
});
|
||
},
|
||
//立即购买
|
||
pay() {
|
||
if (!this.checkFlag) {
|
||
uni.showToast({title: '请阅读会员服务协议并勾选 ', icon: "none"});
|
||
return
|
||
}
|
||
request.post(ApiConstant.Pay.vip1,
|
||
{skuCode:this.cardArray[this.cardIndex].skuCode}
|
||
).then(r => {
|
||
console.log(r)
|
||
if (r.success) {
|
||
this.goto('/pages/zyb/vip/checkoutCounter?orderCode='+r.result)
|
||
}else{
|
||
uni.showToast({title:r.message, icon: "none"});
|
||
}
|
||
}).catch(err => {
|
||
}).finally(() => {
|
||
});
|
||
},
|
||
checkboxChange(r) {
|
||
this.checkFlag = r.detail.value && r.detail.value.length > 0;
|
||
},
|
||
goto(url) {
|
||
uni.navigateTo({
|
||
url: url
|
||
})
|
||
},
|
||
bindPickerCardChange(e) {
|
||
this.cardIndex = e.detail.value
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<view class="border-top padding50-30" style="background-color: #fdedc8;height: 700rpx;">
|
||
<view class="flex" style="padding-left: 30rpx">
|
||
<view class="flex-item-5 font-size-big font-weight-600 brown">
|
||
不浪费分数
|
||
</view>
|
||
<view class="flex-item-5 font-size-big font-weight-600 float-right brown">
|
||
上更好的大学
|
||
</view>
|
||
</view>
|
||
<view class="flex" style="padding-right: 30rpx;padding-top: 20rpx">
|
||
<view class="flex-item-7"></view>
|
||
<view class="flex-item-3">
|
||
<view style="color: #f8430f" class="font-size-medium font-weight-550 float-right">金榜题名</view>
|
||
</view>
|
||
</view>
|
||
<view class="flex cardTip">
|
||
超1000万考生开通VIP
|
||
</view>
|
||
<view class="card">
|
||
<view class="flex" style="margin-top: 30rpx">
|
||
<view class="flex-item-6 font-weight-550" style="color: #743211">
|
||
{{StaticConstant.systemName}}填报高级卡VIP
|
||
</view>
|
||
<view class="radius8"
|
||
style="background-color: white;color: #743211;min-width: 150rpx;text-align: center;padding: 5rpx;margin: 0 0 0 auto">
|
||
<picker @change="bindPickerCardChange" :value="cardIndex" :range="cardArray"
|
||
range-key="skuName">
|
||
{{ cardArray[cardIndex].skuName }}
|
||
<image :src="ImagesConstant.triangle_bottom" class="icon32"/>
|
||
</picker>
|
||
</view>
|
||
</view>
|
||
<view class="flex" style="margin-top: 30rpx">
|
||
<view class="flex-item-7" style="line-height: 50rpx">
|
||
<view class="flex font-size-mini2 brown">
|
||
{{cardArray[cardIndex].skuDetail}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="flex" style="margin-top: 50rpx">
|
||
<view class="flex-item-7" style="line-height: 50rpx">
|
||
<view class="flex font-size-mini2 brown">
|
||
<image
|
||
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAhCAYAAAC803lsAAAAAXNSR0IArs4c6QAAAzZJREFUWEe9l8FSGkEQhv9eSHLFm1W61OYN8AmCTxBykCW5BI+pAMITgE+AYbVyVG8BqyJ5AskTaJ4AUqBXNxWrUpYwnZqFxWHZRRJ3ndMyy0x/0739dw/hiYaVW0+DqQogDZBN4HaMYrsfvvR6EoGegsPK6hkQTr22CNSLkbYpYeZADjNG4uaFeA/mNBNSBEoAnPh3YO4Um4NNuW7fTHYZbPjvMf7fDMj+22SZBar/Z9hrZmzgYMtICW10HngQhl1s9VemIFYuWQOzjGEog4Feqdl/+SAIgGKzTw7I2BNcD4VA2WR4+3sFiQTif0Q32MuT0HzOGcaIxVlwDB+Bx1wrtga7DXOtTNB8D8qC06WTwXdq5PQ8MQ4fYS54KcOOa7ENmRVWNlll4jwBzkcrQ0c8qhRbV20nfS1TPxvndjRDTVFpob5lpJ6N6LrwtftTtUgNU++6lNGgjHcl4EgVsDlNsUydlwPgDhgdJjIIyAetkS6H4PF7jY7mD0k2IC7ka1dn3NAsAcLlYnPwyTVez60acX5+7p8J9/9t5NbyxJrv9+emt7un/EYWgngXuAsbpl4noDznYhb5QuvyWM6HC8LYK7X6Fa/BSRGTH/rMoKhAhkJsVE4unZjOwZjJa294IgHxhuUgu1792BrsLgpPVCBHpWZ/2zUsqyjuYmlXA/zCEw3IRH4lyLR4TWTbEae8kfDWkdBBvGFxTi/wChA/XFmWMPumfsiKrkQBMhOWIAHzpmj4IEpYFimvNzzhgky6Jhfg4J2RGom71FQFBdtqeNTCGTZIu9jqv3ENW2ZSyvkURM7LpqfStm35bJnJHYD3nJoRpqCxoqaycRryqDsfnvuaonbpKogK6F2/XK1h2AQqM4a/CHHZ0Mx4wzk5qMcktiFEgihedzs8OQ9GzVmrzD8I8lT9iI9Hp9cN52BWVj8FIbMoM6J4x8CMPNCiOEYBMM08jDKF5tW36W8/mY4SQO7t1+M495pF7X4UUGpm3Xto8iTbfRDXojA8s6dSNNX5mbuv9Ayg7UTR1TOkJHBN7X0DQZzSnls1YoilibXXcG7wNKchy3hNGoZjHBcAd4a3N8euEvut/wvZbExA2hR6OwAAAABJRU5ErkJggg=="
|
||
alt="" srcset="" class="icon32" style="margin-top: 10rpx;margin-right: 10rpx"/>
|
||
模拟报志愿VIP
|
||
</view>
|
||
<view class="flex font-size-mini2 brown">
|
||
有效期截至：2024-08-31
|
||
<!-- {{ cardArray[cardIndex].endTime }}-->
|
||
</view>
|
||
</view>
|
||
<view class="flex-item-3 brown marginRight" style="padding: 30rpx 0;text-align: right">
|
||
<text class="font-weight-600 font-size-medium" style="font-family: 'Helvetica'">
|
||
￥{{ cardArray[cardIndex].skuPrice }}
|
||
</text>
|
||
<text class="font-size-mini">元</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<image :src="ImagesConstant.huiyuanquanyi" style="width: 100%;height: 1100rpx;margin-bottom: 200rpx"/>
|
||
<view class="bottom">
|
||
<view class="flex ms" style="height: 50rpx;line-height: 50rpx;padding: 20rpx 0">
|
||
<text class="radius2 white" style="background-color: #f34a8b;height: 30rpx;line-height: 30rpx;font-size: 25rpx;padding: 0 5rpx;margin: 10rpx 20rpx 0 20rpx">秒杀</text>
|
||
<text class="slateGray">活动结束将恢复原价</text>
|
||
<text class="red">
|
||
限时秒杀：
|
||
</text>
|
||
<uni-countdown style="position: relative;bottom: 10rpx" :show-day="false" :show-hour="false" :minute="10" :second="0" color="red" background-color="white" />
|
||
</view>
|
||
<view class="flex" style="padding: 30rpx 20rpx">
|
||
<view class="flex-item-10 flex">
|
||
<view class="flex-item-4">
|
||
<text class="slateGray font-size-mini">原价</text>
|
||
<text class="slateGray font-size-mini" style="text-decoration: line-through">￥{{cardArray[cardIndex].skuOriginalPrice}}</text>
|
||
<text class="red">
|
||
现价￥{{cardArray[cardIndex].skuPrice}}
|
||
</text>
|
||
<checkbox-group @change="checkboxChange">
|
||
<checkbox value="cb"/>
|
||
<text @click="goto('/pages/zyb/other/volunteerCardDesc')">会员服务协议</text>
|
||
</checkbox-group>
|
||
<view></view>
|
||
</view>
|
||
<view class="flex-item-58 flex">
|
||
<view class="kmBtn radius8" @click="kaMi">卡密激活</view>
|
||
<view class="ktBtn radius8" @click="pay">立即开通</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<style scoped lang="scss">
|
||
/*VIP卡*/
|
||
.card {
|
||
border-radius: 2%;
|
||
padding: 40rpx 30rpx;
|
||
height: 300rpx;
|
||
background-image: url(https://static-qiniu.mnzy.gaokao.cn/zsgk-volunteer/gaokao/assets/images/vip-bg.png);
|
||
background-repeat: no-repeat;
|
||
background-position: 50%;
|
||
background-size: cover;
|
||
//background: linear-gradient(to right, #ecca7e, #f5dea2, #f8e7b3);
|
||
}
|
||
|
||
.cardTip {
|
||
font-size: 26rpx;
|
||
color: white;
|
||
padding: 8rpx 20rpx;
|
||
border-radius: 30rpx 30rpx 30rpx 0;
|
||
height: 40rpx;
|
||
line-height: 40rpx;
|
||
width: 260rpx;
|
||
background: linear-gradient(to right, #86c9f7, #554df9);
|
||
position: relative;
|
||
top: 30rpx;
|
||
}
|
||
|
||
.bottom {
|
||
position: fixed;
|
||
bottom: 0;
|
||
border-radius: 30rpx 30rpx 0 0;
|
||
height: 230rpx;
|
||
width: 100%;
|
||
background-color: white;
|
||
.ms {
|
||
background-color: #f9cdd6 !important;
|
||
line-height: 50rpx;
|
||
height: 50rpx;
|
||
}
|
||
}
|
||
|
||
/*卡密激活按钮 start*/
|
||
.kmBtn {
|
||
border: 1rpx solid #96b8fe;
|
||
background-color: #eff9ff;
|
||
color: #96b8fe;
|
||
font-size: 35rpx;
|
||
height: 80rpx;
|
||
text-align: center;
|
||
line-height: 80rpx;
|
||
width: 200rpx;
|
||
margin-left: 20rpx;
|
||
}
|
||
|
||
.kmBtn:active {
|
||
border: none;
|
||
background-color: #f8f8f8;
|
||
color: white;
|
||
}
|
||
|
||
/*卡密激活按钮 end*/
|
||
|
||
/*卡密激活按钮 start*/
|
||
.ktBtn {
|
||
border: 1rpx solid #3d76fd;
|
||
background-color: #3d76fd;
|
||
color: white;
|
||
font-size: 35rpx;
|
||
height: 80rpx;
|
||
text-align: center;
|
||
line-height: 80rpx;
|
||
width: 200rpx;
|
||
margin-left: 20rpx;
|
||
}
|
||
|
||
.ktBtn:active {
|
||
border: none;
|
||
background-color: #f8f8f8;
|
||
color: white;
|
||
}
|
||
|
||
/*卡密激活按钮 end*/
|
||
</style>
|