17pdf_front_end/components/BuyTicket.vue

<!--
 * @Description: 
 * @Author: 欧阳承珺
 * @LastEditors: 欧阳承珺
 * @Date: 2022-11-01 14:10:22
 * @LastEditTime: 2022-11-16 09:44:53
-->
<template>
  <div>
    <div v-show="orderStatus !== 'success'">
      <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')">
            <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')">
            <img class="inline-block" src="http://cn-file.17pdf.com/website/pricings/wechat_logo.png"> 微信
          </div>
          <div class="inline-block ml-90px text-[14px] underline cursor-pointer buyQuestion" @click="goToQuestion">支付遇到问题?</div>
      </div>
      <button v-if="paymethod === 'alipay'" class="play-now" style="margin-left: 68px" @click="handlePlayNow">立即支付</button>
      <div v-else class="text-center">
        <div v-if="count <= 0">
          <div>
            <p class="text-18px mb-15px">二维码过期，请刷新</p>
            <client-only><el-button @click="handleFreshWechetCode">刷新</el-button></client-only>
          </div>
        </div>
        <div v-else>
          <client-only>
            <vue-qr :size="176" :text="qrcode"></vue-qr>
          </client-only>
          <p class="text-[#666] text-18px leading-20px">扫一扫 即可支付</p>
        </div>
      </div>
    </div>
    <div v-show="orderStatus === 'success'">
      <div class="pay-tittle">
      <p>支付成功</p>
      </div>
      <div class="pay-content">
        <img src="http://cn-file.17pdf.com/website/pricings/check.png" />
        <span>嘿嘿嘿...尽情享受您的特权吧</span>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  data() {
    return {
      list: [],
      choosedTicket: {},
      paymethod: '',
      border: {
        border0: '2px solid #9688ff',
        border1: '2px solid #27d6c5',
        border2: '2px solid #e1b973',
        border3: '2px solid #ff6a98'
      },
      qrcode: '',
      count: 150,
      orderStatus: false,
      interval: ''
    }
  },
  created() {
    this.getVipList()
  },
  computed: {
    ...mapState([
      "globalLoginVisiable",
    ]),
  },
  watch:{
    globalLoginVisiable(newVal){
      if(!newVal){
        if(this.paymethod === 'wechat'){
          this.list=[]
          this.choosedTicket = {},
          this.paymethod = '',
          this.qrcode = '',
          this.orderStatus = false,
          this.count = 150
          this.getVipList()
        }
      }
    }
  },
  methods: {
    resetInterfaceStatus() {
      
    },
    chooseTicket(item) {
      this.choosedTicket = item
      this.count = 150
      this.choosePayMethod(this.paymethod)
    },  
    handleFreshWechetCode() {
      this.count = 150
      this.choosePayMethod('wechat')
    },
    getTickets(item) {
      return item.productCode.split('.')[1]
    },
    getVipList() {
      this.$axios.post('pricing/list',{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) {
      clearInterval(this.interval)
      this.interval = null
      this.paymethod = type    
      if(type === 'wechat') {
        const params = {
          client: 'web',
          payment: this.paymethod === 'wechat' ? 1 : 0,
          targetType: 'Pricing',
          targetId: this.choosedTicket.id
        }
        this.$axios.post('subscription/create',params).then((res) => {
          if(res.code === 200) {
            // console.log("展示微信二维码")
            this.qrcode = res.result.order.qrcodeUrl
            this.getWechatPayStatus(res.result.order.id)
          }
        })
      }
    }, 
    getWechatPayStatus(id) {
      this.interval = setInterval(() => {
        if(this.count > 0) {
          this.$axios.get(`order/getWxOrder?orderId=${id}`).then((res)=>{
            this.orderStatus = res?.result?.statusName
            // console.log("查询微信支付")
            if(this.orderStatus === 'success') {
              // console.log("微信支付成功")
              this.count = 0 
              // 支付成功关定时器
              clearInterval(this.interval)
              setTimeout(() => {
                this.$emit('close')
                // 更新个人信息
                this.getUserInfo()
              }, 1000);
            }else {
              this.count--
            }
            // 关闭就关定时器
            if(!this.globalLoginVisiable){
              clearInterval(this.interval)
            }
          })
        }
      }, 2000);
      if(this.count === 0) {
        this.$once('hook:beforeDestroy',()=> {
          clearInterval(this.interval)
          this.interval = null
        })
      }
    }, 
    handlePlayNow() {
      const params = {
        client: 'web',
        payment: 0,
        targetType: 'Pricing',
        targetId: this.choosedTicket.id
      }
      this.$axios.post('subscription/create',params).then((res) => {
        if(res.code === 200) {
          location.href = res.result.order.pagePayUrl
          setTimeout(() => {
            this.$emit('close')
          }, 600);
          // this.$store.commit('OPEN_LOGIN',false)
        }
      }) 
    },
    getUserInfo() {
      this.$axios.get('members/getMemberInfo').then((res)=> {
        if(res.code === 200) {
          this.$store.commit('setUser',res.result.memberInfo)
          this.$router.push('/members/me/points')
        }
      })
    },
    //跳转至question页面
    goToQuestion(){
      this.$emit('close')
      this.$router.push({path: '/question#payment'})
    }
  }
}
</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);
}
.buyQuestion:hover{
  color: #FF4F4F;
}
</style>