17pdf_front_end/components/BuyVip.vue

<!--
 * @Description: 
 * @Author: 欧阳承珺
 * @LastEditors: 欧阳承珺
 * @Date: 2022-10-31 20:41:42
 * @LastEditTime: 2022-11-15 19:24:18
-->
<template>
  <div>
    <div v-show="orderStatus !== 'success'">
      <p class="text-22px text-[#666] text-center font-500">升级成为会员</p>
      <div class="py-27px px-35px">
        <p class="text-16px text-[#4d4d4d] mb-30px">开通时长:</p>
        <div class="flex justify-between">
          <div v-for="(item,idx) in list" :key="idx" class="w-116px h-130px relative cursor-pointer" :style="{'border': choosedVip.period === item.period ? '2px solid #FF4F4F' : '1px solid #b3b3b3'}" @click="chooseVip(item)">
            <span v-if="idx === 2" class="note">仅{{Math.round(10 * item.price/getMonth(item)) / 10}}/月</span>
            <div class="w-full h-79px text-16px font-[#878787] leading-79px text-center font-400"><span class="text-26px font-500">{{item.price}}</span>元</div>
            <div style="border-top: 1px solid #b8b8b8;" class="w-90px mx-auto h-49px text-16px text-black leading-49px text-center font-400">{{getMonth(item)}}个月</div>
          </div>
        </div>
      </div>  
      <div class="py-27px px-35px">
        <p class="text-16px text-[#4d4d4d] mb-14px">支付方式:</p>
        <div class="pay-method" :style="{'border': paymethod === 'wechat' ? '2px solid #FF4F4F' : '1px solid #b3b3b3'}" @click="choosePayMethod('wechat')">
          <img src="http://cn-file.17pdf.com/website/member_v2/members_ic_pay_weixin.png">
        </div>
        <div class="pay-method" :style="{'border': paymethod === 'alipay' ? '2px solid #FF4F4F' : '1px solid #b3b3b3'}" @click="choosePayMethod('alipay')">
          <img src="http://cn-file.17pdf.com/website/member_v2/members_ic_pay_zhifubao.png">
        </div>
        <div class="inline-block ml-0px text-[14px] underline cursor-pointer buyQuestion" @click="goToQuestion">支付遇到问题?</div>
      </div>
      <button v-if="paymethod === 'alipay'" class="play-now" @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: [],
      choosedVip: {},
      paymethod: '',
      qrcode: '',
      count: 150,
      orderStatus: false,
      interval: ''
    }
  },
  created() {
    // this.resetInterfaceStatus()
    this.getVipList()
  },
  computed: {
    ...mapState([
      "globalLoginVisiable",
    ]),
  },
  watch:{
    globalLoginVisiable(newVal){
      if(!newVal){
        if(this.paymethod === 'wechat'){
          this.list=[]
          this.choosedVip = {},
          this.paymethod = '',
          this.qrcode = '',
          this.orderStatus = false,
          this.count = 150
          this.getVipList()
        }
      }
    }
  },
  methods: {
    resetInterfaceStatus() {
    //   this.getVipList()
    },
    handleFreshWechetCode() {
      this.count = 150
      this.choosePayMethod('wechat')
    },
    chooseVip(item) {
      this.choosedVip = item
      this.count = 150
      this.choosePayMethod(this.paymethod)
    },  
    getMonth({period}) {
      return period.split('.')[0]
    },
    getVipList() {
      // 默认选择支付宝支付，调用相关信息
      this.paymethod = 'alipay'
      this.$axios.get('setPricing/list').then((res)=> {
        if(res.code === 200) {
          this.list = res.result.filter(item => item.mode !== 0)  // 免费模式的不展示
          this.choosedVip = this.list[this.list.length - 1]
        }
      })
    },
    choosePayMethod(type) {
      clearInterval(this.interval)
      this.interval = null
      this.paymethod = type
      const params = {
        client: 'web',
        payment: this.paymethod === 'wechat' ? 1 : 0,
        targetType: 'SetPricing',
        targetId: this.choosedVip.id
      }
      this.$axios.post('subscription/create',params).then((res) => {
        if(res.code === 200) {
          if(this.paymethod === 'wechat') {
            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
            if(this.orderStatus === 'success') {
              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
        })
      }
    },
    getUserInfo() {
      this.$axios.get('members/getMemberInfo').then((res)=> {
        if(res.code === 200) {
          this.$store.commit('setUser',res.result.memberInfo)
          this.$router.push('/members/me/vip')
        }
      })
    },
    handlePlayNow() {
      const params = {
        client: 'web',
        payment: 0,
        targetType: 'SetPricing',
        targetId: this.choosedVip.id
      }
      this.$axios.post('subscription/create',params).then((res) => {
        if(res.code === 200) {
          location.href = res.result.order.pagePayUrl
          setTimeout(() => {
            this.$emit('close')
          }, 600);
        }
      }) 
    },
    //跳转至question页面
    goToQuestion(){
      this.$emit('close')
      this.$router.push({path: '/question#payment'})
    }
  }
}
</script>

<style lang="scss">
.vip-wechat-qrcode {
  img {
    display: block;
  }
}
.note {
  width: 69px;
  height: 26px;
  background: url(http://cn-file.17pdf.com/website/member_v2/members_tag_price.png) no-repeat;
  background-size: 100% 100%;
  color: #fff;
  position: absolute;
  top: -11px;
  left: -7px;
  font-size: 14px;
  text-indent: 4px;
  text-align: left; 
}
.pay-method{
  width: 116px;
  height: 50px;
  border: 1px solid #b3b3b3;
  border-radius: 2px;
  margin: 0 20px 0 0;
  text-align: center;
  cursor: pointer;
  display: inline-block;
}
.play-now{
  width: 376px;
  height: 58px;
  margin-left: 35px;
  background: #ff4f4f;
  font-size: 24px;
  border-radius: 2px;
  color: #fff;
  font-weight: 400;
}
.pay-tittle{
		height: 80px;
		line-height: 80px;
		color: rgb(51,51,51);
		font-size: 20px;
		text-align: center;
	}
	.pay-content{
		text-align: center;
		img{
			margin: 50px auto 30px;
		}
		span{
			color: rgb(195,195,195);
			margin-bottom: 125px;
			font-size: 14px;
			display: block;
			margin-top: 100px;
		}
  }
</style>