17pdf_front_end/components/BuyTicket.vue

<!--
 * @Description: 
 * @Author: 欧阳承珺
 * @LastEditors: 欧阳承珺
 * @Date: 2022-11-01 14:10:22
 * @LastEditTime: 2022-11-02 16:33:02
-->
<template>
  <div>
    <p class="text-18px text-[#666] text-center font-400">购买券</p>
    <div class="py-27px">
      <div class="flex justify-between">
        <div v-for="(item,idx) in list" :key="idx" class="w-116px h-130px relative cursor-pointer" @click="chooseTicket(item)">
          <div :class="`ticket${idx}`" class="w-full h-79px text-14px text-[#fff] leading-79px text-center font-200"><span class="text-36px mr-6px">{{getTickets(item)}}</span>券</div>
          <div :style="{'border': choosedTicket.productCode === item.productCode ? border[`border${idx}`] : '1px solid #f0f0f0'}" class="w-full mx-auto h-49px text-20px text-black leading-49px text-center font-200">￥{{item.price}}</div>
        </div>
      </div>
   </div>  
   <div class="py-27px">
      <p class="text-16px text-[#999] mb-14px">选择支付方式</p>
        <div class="pay-method" :style="{'border': paymethod === 'alipay' ? '2px solid #3fa9e7' : '1px solid #f0f0f0'}" @click="choosePayMethod('alipay',0)">
          <img class="inline-block" src="http://cn-file.17pdf.com/website/pricings/alipay_logo.png"> 支付宝
        </div>
        <div class="pay-method" :style="{'border': paymethod === 'wechat' ? '2px solid #4bcb70' : '1px solid #f0f0f0'}" @click="choosePayMethod('wechat',1)">
          <img class="inline-block" src="http://cn-file.17pdf.com/website/pricings/wechat_logo.png"> 微信
        </div>
   </div>
   <button class="play-now" style="margin-left: 68px" @click="handlePlayNow">立即支付</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      choosedTicket: {},
      paymethod: '',
      border: {
        border0: '2px solid #9688ff',
        border1: '2px solid #27d6c5',
        border2: '2px solid #e1b973',
        border3: '2px solid #ff6a98'
      }
    }
  },
  created() {
    this.getVipList()
  },
  methods: {
    resetInterfaceStatus() {
      
    },
    chooseTicket(item) {
      this.choosedTicket = item
    },  
    getTickets(item) {
      return item.productCode.split('.')[1]
    },
    getVipList() {
      this.$axios.post('pricing/getPricingList',{client: 'web',language: 'zh'}).then((res)=> {
        if(res.code === 200) {
          this.list = res.result.pricingList.filter(item => item.mode !== 1)  // 加云的不展示
          this.choosedTicket = this.list[this.list.length - 1]
          this.paymethod = 'alipay'
        }
      })
    },
    choosePayMethod(type,payment) {
      this.paymethod = type
      const params = {
        client: 'web',
        payment,
        targetType: 'pricing',
        targetId: this.choosedTicket.id
      }
      this.$axios.post('subscription/create',params)
    },  
    handlePlayNow() {

    }
  }
}
</script>

<style lang="scss">
.ticket0 {
  background: linear-gradient(#b98dff, #7384ff);
}
.ticket1 {
  background: linear-gradient(#60b8ff, #27d6c5);
}
.ticket2 {
  background: linear-gradient(#ff8e4a, #e1b973);
}
.ticket3 {
  background: linear-gradient(#ff8279, #ff6a98);
}
</style>