👨🏻‍💻购买券开发

components/BuyTicket.vue

@@ -3,33 +3,59 @@
  * @Author: 欧阳承珺
  * @LastEditors: 欧阳承珺
  * @Date: 2022-11-01 14:10:22
- * @LastEditTime: 2022-11-02 16:33:02
+ * @LastEditTime: 2022-11-07 16:07:10
 -->
 <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 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',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>
-   </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"> 支付宝
+      <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>
+            <el-button @click="handleFreshWechetCode">刷新</el-button>
+          </div>
         </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 v-else>
+          <no-ssr>
+            <vue-qr :size="176" :text="qrcode"></vue-qr>
+          </no-ssr>
+          <p class="text-[#666] text-18px leading-20px">扫一扫 即可支付</p>
         </div>
-   </div>
-   <button class="play-now" style="margin-left: 68px" @click="handlePlayNow">立即支付</button>
+      </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>
+
 export default {
   data() {
     return {
@@ -41,7 +67,11 @@ export default {
         border1: '2px solid #27d6c5',
         border2: '2px solid #e1b973',
         border3: '2px solid #ff6a98'
-      }
+      },
+      qrcode: '',
+      count: 60,
+      orderStatus: false,
+      interval: ''
     }
   },
   created() {
@@ -54,6 +84,10 @@ export default {
     chooseTicket(item) {
       this.choosedTicket = item
     },  
+    handleFreshWechetCode() {
+      this.count = 60
+      this.choosePayMethod('wechat')
+    },
     getTickets(item) {
       return item.productCode.split('.')[1]
     },
@@ -67,18 +101,71 @@ export default {
       })
     },
     choosePayMethod(type,payment) {
+      this.interval = null
+      clearInterval(this.interval)
       this.paymethod = type
+      if(type === 'wechat') {
+        const params = {
+          client: 'web',
+          payment,
+          targetType: 'Pricing',
+          targetId: this.choosedTicket.id
+        }
+        this.$axios.post('subscription/create',params).then((res) => {
+          if(res.code === 200) {
+            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 
+              setTimeout(() => {
+                this.$emit('close')
+                // 更新个人信息
+                this.getUserInfo()
+              }, 1000);
+            }else {
+              this.count--
+            }
+          })
+        }
+      }, 2000);
+      if(this.count === 0) {
+        this.$once('hook:beforeDestroy',()=> {
+          clearInterval(this.interval)
+          this.interval = null
+        })
+      }
+    }, 
+    handlePlayNow() {
       const params = {
         client: 'web',
-        payment,
-        targetType: 'pricing',
+        payment: 0,
+        targetType: 'Pricing',
         targetId: this.choosedTicket.id
       }
-      this.$axios.post('subscription/create',params)
-    },  
-    handlePlayNow() {
-
-    }
+      this.$axios.post('subscription/create',params).then((res) => {
+        if(res.code === 200) {
+          window.open(res.result.order.pagePayUrl)
+        }
+      }) 
+    },
+    getUserInfo() {
+      this.$axios.get('members/getMemberInfo').then((res)=> {
+        if(res.code === 200) {
+          this.$store.commit('setUser',res.result)
+          localStorage.setItem('userInfo',JSON.stringify(res.result))
+          this.$router.push('/members/me/expenses')
+        }
+      })
+    },
   }
 }
 </script>