chore: update

src/pages/train/components/pay.vue

 <template>
   <div class="pay-pop-box">
-    <div class="content-box" v-if="!isCodeShow">
+    <div class="content-box" v-if="!isShowQrCode">
       <i class="el-icon-close" @click="$emit('close')"></i>
       <div class="tips-cen">
         <div class="name">活动名称：</div>
@@ -13,25 +13,24 @@
       <div class="tips-top">
         <div class="name">支付方式：</div>
         <div class="pay-method">
-          <div :class="payMethod == 2 ? 'li active' : 'li'" @click="changePayMethod(2)">
+          <div
+            v-for="item in payMethodList"
+            :key="item.value"
+            :class="{ li: true, active: payMethod == item.value }"
+            @click="payMethod = item.value">
             <div class="select-icon"></div>
             <div class="icon"></div>
-            <div class="pay-text">支付宝支付</div>
-          </div>
-          <div :class="payMethod == 1 ? 'li active' : 'li'" @click="changePayMethod(1)">
-            <div class="select-icon"></div>
-            <div class="icon"></div>
-            <div class="pay-text">微信支付</div>
+            <div class="pay-text">{{ item.name }}</div>
           </div>
         </div>
       </div>
       <div class="pay-btn" @click="createOrder">去支付</div>
       <div class="tips-text">注：请核对报名表信息，支付后将不能修改报名信息。</div>
     </div>
-    <div class="content-box ewm-code" v-if="isCodeShow">
+    <div class="content-box qr-code" v-if="isShowQrCode">
       <i class="el-icon-close" @click="closeClear"></i>
-      <div class="title">{{ payMethod == 1 ? '微信支付' : '支付宝支付' }}</div>
-      <div class="ewm-box">
+      <div class="title">{{ payMethod == 1 ? '微信' : '支付宝' }}支付</div>
+      <div class="qr-box">
         <div class="block">
           <qrcode-vue :value="payInfo.url" size="200"></qrcode-vue>
         </div>
@@ -52,15 +51,16 @@ export default {
   data() {
     return {
       payMethod: 2,
-      isCodeShow: false,
+      payMethodList: [
+        { name: '支付宝支付', value: 2 },
+        { name: '微信支付', value: 1 },
+      ],
+      isShowQrCode: false,
       payInfo: {},
       timer: null,
     }
   },
   methods: {
-    changePayMethod(n) {
-      this.payMethod = n
-    },
     async createOrder() {
       const loading = this.$loading({
         lock: true,
@@ -79,7 +79,7 @@ export default {
         .then((res) => {
           if (res.code === 200) {
             this.payInfo = res.data
-            this.isCodeShow = true
+            this.isShowQrCode = true
             clearInterval(this.timer)
             this.timer = setInterval(() => {
               this.checkPay(res.data.pay_order_id, res.data.order_no)
@@ -91,34 +91,27 @@ export default {
           }
         })
     },
-    checkPay(id, order_no) {
-      api.checkPay(id).then((res) => {
-        if (res.code === 0) {
-          const [order = {}] = res.data
+    async checkPay(id, order_no) {
+      const { code, data } = await api.checkPay(id)
+      if (code === 0) {
+        const [order = {}] = data
         if (order.status === 1) {
-            this.$message({
-              message: '支付成功',
-              type: 'success',
-            })
-            this.payEnd(order_no)
-            this.$emit('payStatus')
+          this.$message({ message: '支付成功', type: 'success' })
+          await this.payEnd(order_no)
+          this.$emit('success')
           clearInterval(this.timer)
         } else if (order.status !== 0) {
           clearInterval(this.timer)
         }
       }
-      })
     },
     closeClear() {
-      this.isCodeShow = false
+      this.isShowQrCode = false
       this.$emit('close')
+      clearInterval(this.timer)
     },
-    payEnd(orderOn) {
-      const param = {
-        order_no: orderOn,
-        form_id: this.form.id,
-      }
-      api.payEnd(param)
+    async payEnd(orderNo) {
+      await api.payEnd({ order_no: orderNo, form_id: this.form.id })
     },
   },
   beforeDestroy() {
@@ -131,14 +124,14 @@ export default {
   width: 100%;
   height: 100%;
   .content-box {
-    &.ewm-code {
+    &.qr-code {
       padding: 21px 21px 88px;
       .title {
         font-size: 18px;
         color: #333333;
         line-height: 25px;
       }
-      .ewm-box {
+      .qr-box {
         width: 220px;
         margin: 43px auto 0;
         text-align: center;
@@ -160,7 +153,7 @@ export default {
     position: absolute;
     top: 50%;
     left: 50%;
-    -webkit-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
     width: 735px;
     height: 426px;
     background: #ffffff;
@@ -231,12 +224,6 @@ export default {
               background: url(https://zws-imgs-pub.ezijing.com/static/public/189526ea395b7a1a3b47ffea73d25b95.png);
               background-size: 100% 100%;
             }
-            &.active {
-              .icon {
-                background: url(https://zws-imgs-pub.ezijing.com/static/public/189526ea395b7a1a3b47ffea73d25b95.png);
-                background-size: 100% 100%;
-              }
-            }
           }
           &:nth-child(2) {
             margin-top: 15px;
@@ -246,12 +233,6 @@ export default {
               background: url(https://zws-imgs-pub.ezijing.com/static/public/e7db788a3194460535d6543cc358a5f5.png);
               background-size: 100% 100%;
             }
-            &.active {
-              .icon {
-                background: url(https://zws-imgs-pub.ezijing.com/static/public/e7db788a3194460535d6543cc358a5f5.png);
-                background-size: 100% 100%;
-              }
-            }
           }
           display: flex;
           align-items: center;

src/pages/train/form.vue

@@ -15,7 +15,7 @@
         <el-form-item label="验证码" prop="code" v-if="!isLogin" required>
           <el-input v-model="form.code">
             <template #append>
-              <countdown @start="getCheckedCode"></countdown>
+              <countdown size="small" :disabled="disabledSend" @start="sendCodeRequest" ref="countdown"></countdown>
             </template>
           </el-input>
         </el-form-item>
@@ -191,6 +191,9 @@ export default {
     train() {
       return datalist.find((item) => item.id == this.id) || {}
     },
+    disabledSend() {
+      return !MOBILE_REG.test(this.form.mobile)
+    },
   },
   created() {
     if (!this.id) {
@@ -226,33 +229,21 @@ export default {
           project_id: 5009,
         })
       }
-      const { code } = await api.submitForm({ ...this.form, periods: this.id })
-      if (code === 200) {
+      await api.submitForm({ ...this.form, periods: this.id })
       this.$message.success('报名信息提交成功')
       this.getDetail()
-      } else {
-        this.$message.error('报名信息提交失败')
-      }
     },
-    getCheckedCode() {
-      if (!this.form.mobile) {
-        this.$message('请填写手机号')
-      } else if (!MOBILE_REG.test(this.form.mobile)) {
-        this.$message('手机号格式错误')
-      } else {
-        api
-          .sendCode({
-            account: this.form.mobile,
-            service: 'sofia.ezijing.com',
-          })
-          .then((res) => {
-            if (res && res.code === 0) {
+    // 发送验证码
+    sendCodeRequest() {
+      api.sendCode({ account: this.form.mobile, service: 'eec.ezijing.com' }).then((res) => {
+        if (res.code === 0) {
           this.$message({ message: '验证码发送成功', type: 'success' })
         } else {
+          // 停止计时
+          this.$refs.countdown.stop()
           this.$message({ message: res.msg || '发送验证码失败', type: 'error' })
         }
       })
-      }
     },
   },
 }

src/utils/httpRequest.js

@@ -61,7 +61,7 @@ httpRequest.interceptors.response.use(
   function (response) {
     const { config, data } = response
     if (config.url.includes('/api/microservices') && data.code !== 200) {
-      Message.error(data.message)
+      Message.error(data.message || data.msg)
       return Promise.reject(data)
     }
     return data