pay callback

src/api/webApi/pay/idnex.js → src/api/webApi/pay/index.js

@@ -24,3 +24,28 @@ export function validateSms(params) {
     params
   })
 }
+
+// front/ecard/prepayCard
+export function prepayCard(params) {
+  return request({
+    url: 'front/ecard/prepayCard',
+    method: 'get',
+    params
+  })
+}
+
+export function regenerateQrCode(params) {
+  return request({
+    url: 'front/ecard/regenerateQrCode',
+    method: 'get',
+    params
+  })
+}
+
+export function getOrderPayStatus(params) {
+  return request({
+    url: 'front/ecard/getOrderPayStatus',
+    method: 'get',
+    params
+  })
+}

src/assets/styles/common.scss

@@ -706,6 +706,10 @@
   color: #E6A23C
 }
 
+.f-success {
+  color: #13ce66
+}
+
 .f-333 {
   color: #333333
 }

src/views/pay/index.vue

@@ -1,7 +1,8 @@
 <template>
   <div style="width: 70%;margin:0 auto">
     <div class="fx-row jc-between ai-center pd10 pt10 mb20">
-      <el-image class="pointer" @click="$router.push('/login')" :src="`${$imgBase}index/login/icon_logo_medium@2x.png`" fit="contain"
+      <el-image class="pointer" @click="$router.push('/login')" :src="`${$imgBase}index/login/icon_logo_medium@2x.png`"
+                fit="contain"
                 style="width: 152px;"></el-image>
       <div>
         <img class="icon16" src="../../assets/images/icon_tel2.png"/>
@@ -11,13 +12,17 @@
     <el-form ref="form" class="border pd20" :model="form" :rules="rules" label-width="80px" label-position="right">
       <p class="f24 pb20 f-primary bold text-left">名学金榜学生卡</p>
       <el-row :gutter="20">
-        <el-col :span="12"><el-image :src="require('../../assets/images/pay_banner.png')"/></el-col>
         <el-col :span="12">
-          <el-form-item label="价格:"><span class="bold f-red f18">￥{{cardActive.price/100}}</span></el-form-item>
-          <el-form-item label="有效期:">{{cardActive.outTime}}</el-form-item>
+          <el-image :src="require('../../assets/images/pay_banner.png')"/>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="价格:"><span v-if="cardActive.price" class="bold f-red f18">
+            ￥{{ cardActive.price / 100 }}</span>
+          </el-form-item>
+          <el-form-item label="有效期:">{{ cardActive.outTime }}</el-form-item>
           <el-form-item label="入学年份:">
-            <el-button @click="cardActive = card"  :type="card.greadId == cardActive.greadId ? 'primary' : ''" v-for="card in cardList">
-              {{card.year}}
+            <el-button @click="cardActive = card" :type="card == cardActive ? 'primary' : ''" v-for="card in cardList">
+              {{ card.year }}
             </el-button>
           </el-form-item>
           <el-form-item label="手机号:" prop="phoneNumber">
@@ -29,8 +34,8 @@
               <el-button type="plain" @click="getCode" :disabled="disabled">{{ captchaBtnText }}</el-button>
             </div>
           </el-form-item>
-          <el-form-item >
-              <el-button type="primary" @click="validate" >购买</el-button>
+          <el-form-item>
+            <el-button type="primary" @click="validate">购买</el-button>
           </el-form-item>
         </el-col>
       </el-row>
@@ -41,11 +46,43 @@
       <p>2、购买后系统默认激活当前的登录帐号，若忘记账号请联系客服。</p>
       <p>3、由于产品特性，本电子卡不适用“7天无理由退换货”。</p>
     </div>
+    <el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" custom-class="rd8" width="340px">
+      <template #title>
+        <div class="fx-column fx-cen-cen">
+          <div class="f16">使用微信扫码支付</div>
+          <div class="f-red f18">￥{{ cardActive.price / 100 }}</div>
+        </div>
+      </template>
+      <el-image :src="payQR" style="width: 300px; height: 300px">
+        <template v-if="isPaySuccess" #error>
+          <div class="fx-column fx-cen-cen" style="padding-top: 50px">
+            <el-icon class="f-success" name="success" style="font-size: 96px"/>
+            <div class="mt20 f-red">支付成功，账号已通过短信发送，请注意查收</div>
+            <div class="mt8">
+              <el-link href="/login">点击此处，去登陆</el-link>
+            </div>
+          </div>
+        </template>
+        <template v-else-if="isPayFailed" #error>
+          <div class="fx-column fx-cen-cen" style="padding-top: 50px">
+            <el-icon class="f-danger" name="error" style="font-size: 96px"/>
+            <div class="mt20 f-red">支付失败，您可以重新发起支付</div>
+            <el-button type="text" class="mt8 f-666" @click="form.captcha='',dialogVisible=false">关闭</el-button>
+          </div>
+        </template>
+      </el-image>
+      <template #footer>
+        <div class="fx-column fx-cen-cen">
+          <div>名学金榜学习平台（{{ cardActive.year }}学年）</div>
+          <div>有效期至 <span class="bold">{{ cardActive.outTime }}</span></div>
+        </div>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import { getEcardPrices, sendSmsNoValidation, validateSms } from '@/api/webApi/pay/idnex'
+import { getEcardPrices, getOrderPayStatus, prepayCard, sendSmsNoValidation } from '@/api/webApi/pay'
 
 export default {
   name: 'PayIndex',
@@ -68,29 +105,42 @@ export default {
           { required: true, message: '请输入手机号', trigger: 'blur' },
           { type: 'number', validator: checkPhone, message: '请输入11位有效手机号号码', trigger: ['blur', 'change'] }
         ],
-        captcha: { required: true, message: '短信验证码不能为空', trigger: 'change' },
+        captcha: { required: true, message: '短信验证码不能为空', trigger: 'change' }
       },
-      form:{
-        phoneNumber:'',
-        captcha:''
+      form: {
+        phoneNumber: '',
+        captcha: ''
       },
       captchaBtnText: '免费获取',
-      disabled:false,
+      disabled: false,
       spaceTime: 60,
-      cardActive:{},
-      cardList:[],
+      cardActive: {},
+      cardList: [],
+      // qr dialog
+      dialogVisible: false,
+      payQR: '',
+      // pay/order status
+      orderTimer: null,
+      orderId: '',
+      isPaySuccess: false,
+      isPayFailed: false,
+      isUnPaid: false
     }
   },
-  methods:{
+  beforeDestroy() {
+    this.stopOrderStatusTimer()
+  },
+  methods: {
     getCode() {
-      this.$refs.form.validateField('phoneNumber',(res)=>{
-        if(res == '') {
+      this.$refs.form.clearValidate([])
+      this.$refs.form.validateField('phoneNumber', (res) => {
+        if (res == '') {
           // 通过
           sendSmsNoValidation({
-            mobile:this.form.phoneNumber,
-            smsType:1
+            mobile: this.form.phoneNumber,
+            smsType: 1
           }).then(res => {
-            if(res.code == 200) {
+            if (res.code == 200) {
               this.$message.success('发送成功,请在手机上查收')
               // 成功60秒不让点击
               this.disabled = true
@@ -111,39 +161,74 @@ export default {
         }
       })
     },
-    getEcardPrices(){
-      getEcardPrices().then(res =>{
+    getEcardPrices() {
+      getEcardPrices().then(res => {
         this.cardList = res.data
         this.cardActive = res?.data[0]
-        console.log(res)
       })
     },
     validate() {
       this.$refs.form.validate(valid => {
-        if(!valid)return
-        validateSms({
-          mobile:this.form.phoneNumber,
-          code:this.form.captcha,
+        if (!valid) return
+        prepayCard({
+          mobile: this.form.phoneNumber,
+          code: this.form.captcha,
+          ecardPayId: this.cardActive.id,
+          id: this.cardActive.id,
+          amount: 1
         }).then(res => {
-          console.log(res)
+          this.payQR = res.data.qrCode
+          this.orderId = res.data.orderId
+          this.dialogVisible = true
+          this.stopOrderStatusTimer()
+          this.startOrderStatusTimer()
         })
       })
+    },
+    startOrderStatusTimer() {
+      if (this.orderTimer) return
+      this.orderTimer = setInterval(() => {
+        getOrderPayStatus({ orderId: this.orderId }).then(res => {
+          const copyStatus = ['isPaySuccess', 'isPayFailed', 'isUnPaid']
+          copyStatus.forEach(key => this[key] = res.data[key])
+          const terminateStatus = ['isPaySuccess', 'isPayFailed']
+          const terminate = terminateStatus.some(key => this[key])
+          if (terminate) {
+            this.stopOrderStatusTimer()
+            this.payQR = ''
+          }
+        })
+      }, 5000)
+    },
+    stopOrderStatusTimer() {
+      if (this.orderTimer) {
+        clearInterval(this.orderTimer)
+        this.orderTimer = null
+      }
     }
   }
 }
 </script>
 
 <style scoped>
-.border{
+.border {
   border: 1px solid #e2e2e2;
 }
->>> .el-form-item{
+
+>>> .el-form-item {
   margin-bottom: 20px;
 }
-.tips{
+
+.tips {
   padding: 20px 0;
 }
-.tips > p{
+
+.tips > p {
   margin-top: 10px;
 }
+
+/deep/ .el-dialog__body {
+  padding-top: 0;
+  padding-bottom: 0;
+}
 </style>