<!--
开通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 }}&nbsp;-->
                  {{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.remote.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>
