472 lines
14 KiB
Vue
472 lines
14 KiB
Vue
<!--
|
||
开通VIP 页面
|
||
-->
|
||
<script>
|
||
import StaticConstant from "@/common/StaticConstant";
|
||
import ApiConstant from "@/common/ApiConstant";
|
||
import ImagesConstant from "@/common/ImagesConstant";
|
||
import Request from '@/common/request';
|
||
import {stringIsNotEmpty} from "../../../common/util";
|
||
import Image from "../../component/image/image.vue";
|
||
const app = getApp()
|
||
let request = new Request()
|
||
export default {
|
||
name: "vip-index",
|
||
components: {Image},
|
||
computed: {
|
||
ImagesConstant() {
|
||
return ImagesConstant
|
||
},
|
||
StaticConstant() {
|
||
return StaticConstant
|
||
},
|
||
app(){
|
||
return app
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
checkFlag: false,
|
||
cardIndex: 0,
|
||
cardArray: [],
|
||
hyqyList: [
|
||
{
|
||
project: '省控线',
|
||
v0: '是',
|
||
v1: '是',
|
||
v2: '是',
|
||
},
|
||
{
|
||
project: '改成绩',
|
||
v0: '5次/天',
|
||
v1: '5次/天',
|
||
v2: '10次/天'
|
||
}, {
|
||
project: '查专业',
|
||
v0: '是',
|
||
v1: '是',
|
||
v2: '是'
|
||
}, {
|
||
project: '查大学',
|
||
v0: '查询5条',
|
||
v1: '是',
|
||
v2: '是'
|
||
}, {
|
||
project: '测文化',
|
||
v0: '查询5条',
|
||
v1: '是',
|
||
v2: '是'
|
||
}, {
|
||
project: '查位次',
|
||
v0: '是',
|
||
v1: '是',
|
||
v2: '是'
|
||
}, {
|
||
project: '算投档',
|
||
v0: '否',
|
||
v1: '是',
|
||
v2: '是'
|
||
},{
|
||
project: '智能推荐',
|
||
v0: '仅推荐院校',
|
||
v1: '仅推荐院校',
|
||
v2: '是'
|
||
},{
|
||
project: 'AI填报',
|
||
v0: '否',
|
||
v1: '否',
|
||
v2: '是'
|
||
},
|
||
{
|
||
project: '院校录取率',
|
||
v0: '否',
|
||
v1: '否',
|
||
v2: '是'
|
||
}
|
||
]
|
||
}
|
||
},
|
||
onShow() {
|
||
let userInfo = uni.getStorageSync('userInfo');
|
||
if (!userInfo) {
|
||
wx.reLaunch({
|
||
url: '/pages/zyb/login',
|
||
})
|
||
}
|
||
if (!stringIsNotEmpty(userInfo.phone)) {
|
||
uni.reLaunch({
|
||
url: '/pages/zyb/user/bindPhone'
|
||
})
|
||
}
|
||
uni.getProvider({
|
||
service: 'payment',
|
||
success: function (res) {
|
||
console.log(res)
|
||
uni.setStorageSync('providerpayment', res.provider[0]);
|
||
}
|
||
});
|
||
//设置秒杀定时器
|
||
this.getSkuList()
|
||
},
|
||
onLoad() {
|
||
},
|
||
methods: {
|
||
//卡密激活按钮
|
||
kaMi() {
|
||
this.goto('/pages/zyb/vip/cardamom')
|
||
},
|
||
getSkuList() {
|
||
request.post(ApiConstant.VIP.skuList, {provider:uni.getStorageSync('providerpayment')}).then(r => {
|
||
console.log(r)
|
||
if (r.success) {
|
||
this.cardArray = r.result
|
||
}
|
||
}).catch(err => {
|
||
}).finally(() => {
|
||
});
|
||
},
|
||
//立即购买
|
||
pay() {
|
||
//判断是不是IOS
|
||
if (uni.getSystemInfoSync().platform === 'ios') {
|
||
uni.showToast({title: '抱歉，IOS端暂不可购买 ', icon: "none"});
|
||
return
|
||
}
|
||
|
||
|
||
if (!this.checkFlag) {
|
||
uni.showToast({title: '请阅读会员服务协议并勾选 ', icon: "none"});
|
||
return
|
||
}
|
||
|
||
request.post(ApiConstant.Pay.vip1, {skuCode: this.cardArray[this.cardIndex].skuCode,provider:uni.getStorageSync('providerpayment')}
|
||
).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", duration: 2000});
|
||
}
|
||
}).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
|
||
},
|
||
bindCardChange(index){
|
||
this.cardIndex = index
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<view class="border-top padding50-30" style="background-color: #fdedc8;height: 550rpx;">
|
||
<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>
|
||
|
||
<scroll-view class="nav-bar" scroll-x>
|
||
<view class="nav-bar-wrap">
|
||
<view v-for="(item, index) in cardArray" :key="index">
|
||
<view class="nav-bar-item">
|
||
<!-- <view class="flex cardTip">-->
|
||
<!-- 河南艺体生更好的选择-->
|
||
<!-- </view>-->
|
||
<view class="card" @click="bindCardChange(index)">
|
||
<image v-show="cardIndex===index" src="/static/icons/select_blue.png" class="icon32" style="position: absolute"/>
|
||
<view class="flex" style="margin-top: 30rpx">
|
||
<view class="flex-item-6 font-size-mini5 font-weight-550" style="color: #743211">
|
||
<!-- {{ StaticConstant.systemName }} -->
|
||
{{item.skuName}}
|
||
</view>
|
||
</view>
|
||
<view class="flex" style="margin-top: 30rpx;height: 50rpx">
|
||
<view class="flex-item-7" style="line-height: 40rpx">
|
||
<view class="flex font-size-mini2 brown">
|
||
{{ item.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">
|
||
<text v-if="item.skuCode==='9000'">咨询详谈</text>
|
||
<text v-else>'有效期截至：{{app.globalData.StaticConstant.memberDeadline}}</text>
|
||
</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'">
|
||
￥{{ item.skuPrice }}
|
||
</text>
|
||
<text class="font-size-mini">元</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- <image class="img" @click="bindCardChange(index)" :src="'https://static-qiniu.mnzy.gaokao.cn/zsgk-volunteer/gaokao/assets/images/vip-bg.png'" style="width: 500rpx;height: 280rpx"/>-->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
|
||
|
||
|
||
</view>
|
||
<view class="member-benefits" style="height: 900rpx">
|
||
<view class="benefits-title">会员权益</view>
|
||
<view class="benefits-table">
|
||
<view class="benefits-row header">
|
||
<text class="benefits-cell">功能</text>
|
||
<text class="benefits-cell">基础版本</text>
|
||
<text class="benefits-cell">体验版本</text>
|
||
<text class="benefits-cell">VIP版本</text>
|
||
</view>
|
||
<view class="benefits-row" v-for="(item,index) in hyqyList" :class="index%2===0?'row2':'row1'" :key="index">
|
||
<text class="benefits-cell">{{ item.project }}</text>
|
||
<text class="benefits-cell">{{ item.v0 }}</text>
|
||
<text class="benefits-cell">{{ item.v1 }}</text>
|
||
<text class="benefits-cell">{{ item.v2 }}</text>
|
||
</view>
|
||
<!-- 可以根据需求添加更多的会员权益 -->
|
||
</view>
|
||
</view>
|
||
<view style="margin-top: 100rpx"></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-45">
|
||
<text class="slateGray font-size-mini">原价</text>
|
||
<text class="slateGray font-size-mini" style="text-decoration: line-through" v-if="cardArray[cardIndex]">
|
||
￥{{ cardArray[cardIndex].skuOriginalPrice }}
|
||
</text>
|
||
<text class="red" v-if="cardArray[cardIndex]">
|
||
现价￥<text class="font-size-mini5">{{ cardArray[cardIndex].skuPrice }}</text>
|
||
</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-55 flex" v-show="cardArray && cardArray.length>0">
|
||
<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;
|
||
background-image: url(https://static-qiniu.mnzy.gaokao.cn/zsgk-volunteer/gaokao/assets/images/vip-bg.png);
|
||
width: 500rpx;height: 280rpx;
|
||
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*/
|
||
|
||
|
||
/*会员权益 start*/
|
||
.member-benefits {
|
||
padding: 30rpx;
|
||
background-color: white;
|
||
}
|
||
|
||
.benefits-title {
|
||
font-size: 32rpx;
|
||
text-align: center;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.benefits-table {
|
||
box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.benefits-row {
|
||
display: flex;
|
||
border-radius: 0;
|
||
}
|
||
|
||
.header {
|
||
background-color: #6341f7;
|
||
color: white;
|
||
border-radius: 10rpx 10rpx 0 0;
|
||
}
|
||
|
||
.header-cell {
|
||
color: white;
|
||
}
|
||
|
||
.odd {
|
||
background-color: #e9eaff;
|
||
}
|
||
|
||
.even {
|
||
background-color: #e9eaff;
|
||
border-radius: 0 0 10rpx 10rpx;
|
||
}
|
||
|
||
.benefits-cell {
|
||
flex: 1;
|
||
text-align: center;
|
||
border-right: 1rpx solid #fdf4dc;
|
||
padding: 10rpx;
|
||
}
|
||
|
||
.row2 {
|
||
background-color: #ffffff;
|
||
}
|
||
|
||
.row1 {
|
||
background-color: #e9eaff;
|
||
}
|
||
|
||
|
||
/*会员权益 end*/
|
||
|
||
|
||
/*滚动条 start*/
|
||
/*横向滚动列表 start*/
|
||
scroll-view {
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/* 去除滚动条 */
|
||
::-webkit-scrollbar {
|
||
//display: none;
|
||
//width: 0;
|
||
//height: 0;
|
||
//color: transparent;
|
||
}
|
||
|
||
.nav-bar-wrap { // 关键的样式
|
||
display: flex;
|
||
flex-flow: row wrap;
|
||
width: 1800rpx;
|
||
}
|
||
|
||
.nav-bar-item {
|
||
//width: 500rpx;
|
||
display: flex;
|
||
//height: 170rpx;
|
||
margin-top: 18rpx;
|
||
margin-right: 30rpx;
|
||
position: relative;
|
||
}
|
||
/*滚动条 end*/
|
||
</style>
|