renew feature

src/api/webApi/pay/index.js

@@ -1,10 +1,11 @@
 import request from '@/utils/request'
 
 //  学生卡价格列表
-export function getEcardPrices() {
+export function getEcardPrices(params) {
   return request({
     url: 'front/ecard/getEcardPrices',
     method: 'get',
+    params
   })
 }
 

src/permission.js

@@ -8,7 +8,7 @@ NProgress.configure({
   showSpinner: false
 })
 
-const whiteList = ['/login', '/auth-redirect', '/bind', '/register', '/pay', '/question/preview']
+const whiteList = ['/login', '/auth-redirect', '/bind', '/register', '/pay', '/renew', '/question/preview']
 const uaWhiteList = ['/question/preview']
 
 router.beforeEach(async(to, from, next) => {

src/router/index.js

@@ -58,7 +58,18 @@ export const constantRoutes = [{
   {
     path: '/pay',
     component: (resolve) => require(['@/views/pay/index'], resolve),
-    hidden: true
+    hidden: true,
+    meta: {
+      title: '在线购卡'
+    }
+  },
+  {
+    path: '/renew',
+    component: (resolve) => require(['@/views/pay/renew'], resolve),
+    hidden: true,
+    meta: {
+      title: '在线续费'
+    }
   },
   {
     path: '/question/preview',

src/utils/request.js

@@ -67,6 +67,18 @@ service.interceptors.response.use(res => {
         location.href = '/login'
       })
       return Promise.reject('error')
+    } else if (code === 403) {
+      const defaultMsg = '卡号已过期或已关卡状态，您可以选择续费以重新激活账号'
+      const customMsg = res.data.msg || defaultMsg
+      MessageBox.confirm(customMsg, '系统提示', {
+        confirmButtonText: '续费',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        const { cardNo, mobile } = res.data
+        location.href = `/renew?cardNo=${cardNo}&mobile=${mobile}`
+      })
+      return Promise.reject('error')
     } else if (code === 500) {
       Message({
         message: msg,

src/views/pay/index.vue

@@ -9,7 +9,7 @@
         <span class="pl8">服务热线：400-1797-985</span>
       </div>
     </div>
-    <el-form ref="form" class="border pd20" :model="form" :rules="rules" label-width="80px" label-position="right">
+    <el-form ref="form" class="border pd20" :model="form" :rules="rules" label-width="100px" label-position="right">
       <p class="f24 pb20 f-primary bold text-left">名学金榜学生卡</p>
       <el-row :gutter="20">
         <el-col :span="12">
@@ -25,26 +25,34 @@
               {{ card.year }}
             </el-button>
           </el-form-item>
-          <el-form-item label="手机号:" prop="phoneNumber">
-            <el-input v-model="form.phoneNumber"></el-input>
-          </el-form-item>
-          <el-form-item label="验证码:" prop="captcha">
-            <div class="fx-row">
-              <el-input class="mr30" v-model="form.captcha"></el-input>
-              <el-button type="plain" @click="getCode" :disabled="disabled">{{ captchaBtnText }}</el-button>
-            </div>
-          </el-form-item>
+          <template v-if="!renew">
+            <el-form-item label="手机号:" prop="phoneNumber">
+              <el-input v-model="form.phoneNumber"></el-input>
+            </el-form-item>
+            <el-form-item label="验证码:" prop="captcha">
+              <div class="fx-row">
+                <el-input class="mr30" v-model="form.captcha"></el-input>
+                <el-button type="plain" @click="getCode" :disabled="disabled">{{ captchaBtnText }}</el-button>
+              </div>
+            </el-form-item>
+          </template>
+          <template v-else>
+            <el-form-item label="原卡号:" required>
+              {{ renew.cardNo }}
+            </el-form-item>
+            <el-form-item label="绑定手机:" required>
+              {{ renew.mobile }}
+            </el-form-item>
+          </template>
           <el-form-item>
-            <el-button type="primary" @click="validate">购买</el-button>
+            <el-button type="primary" @click="validate">{{ announcement.button }}</el-button>
           </el-form-item>
         </el-col>
       </el-row>
     </el-form>
     <div class="tips ">
-      <p class="f20  bold f-red">购卡须知</p>
-      <p>1、您将购买的是电子卡,不同的入学年份有效期和价格不同。</p>
-      <p>2、购买后系会将账号与密码通过短信发送到手机，若忘记账号请联系客服。</p>
-      <p>3、由于产品特性，本电子卡不适用“7天无理由退换货”。</p>
+      <p class="f20  bold f-red">{{announcement.title}}</p>
+      <p v-for="(r,idx) in announcement.rules" :key="idx">{{idx+1}}、{{r}}</p>
     </div>
     <el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" custom-class="rd8" width="340px">
       <template #title>
@@ -57,7 +65,7 @@
         <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="mt20 f-red">{{ announcement.paySucceed }}</div>
             <div class="mt8">
               <el-link href="/login">点击此处，去登陆</el-link>
             </div>
@@ -66,7 +74,7 @@
         <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>
+            <div class="mt20 f-red">{{ announcement.payFailed }}</div>
             <el-button type="text" class="mt8 f-666" @click="form.captcha='',dialogVisible=false">关闭</el-button>
           </div>
         </template>
@@ -86,9 +94,6 @@ import { getEcardPrices, getOrderPayStatus, prepayCard, sendSmsNoValidation } fr
 
 export default {
   name: 'PayIndex',
-  created() {
-    this.getEcardPrices()
-  },
   data() {
     let checkPhone = (rule, value, callback) => {
       let reg = /^1[345789]\d{9}$/
@@ -125,9 +130,26 @@ export default {
       orderId: '',
       isPaySuccess: false,
       isPayFailed: false,
-      isUnPaid: false
+      isUnPaid: false,
+      // announcements
+      announcement: {
+        title: '购卡须知',
+        rules: [
+          '您将购买的是电子卡,不同的入学年份有效期和价格不同。',
+          '购买后系统会将账号与密码通过短信发送到手机，若忘记账号请联系客服。',
+          '由于产品特性，本电子卡不适用“7天无理由退换货”。'
+        ],
+        paySucceed: '支付成功，账号已通过短信发送，请注意查收',
+        payFailed: '支付失败，您可以重新发起支付',
+        button: '购买'
+      },
+      // renew
+      renew: null
     }
   },
+  mounted() {
+    this.getEcardPrices()
+  },
   beforeDestroy() {
     this.stopOrderStatusTimer()
     this.stopCountdownTimer()
@@ -164,7 +186,7 @@ export default {
       })
     },
     getEcardPrices() {
-      getEcardPrices().then(res => {
+      getEcardPrices(this.renew).then(res => {
         this.cardList = res.data
         this.cardActive = res?.data[0]
       })
@@ -177,7 +199,8 @@ export default {
           code: this.form.captcha,
           ecardPayId: this.cardActive.id,
           id: this.cardActive.id,
-          amount: 1
+          amount: 1,
+          ...this.renew
         }).then(res => {
           this.payQR = res.data.qrCode
           this.orderId = res.data.orderId

src/views/pay/renew.vue

@@ -0,0 +1,31 @@
+<script>
+import PayIndex from "@/views/pay/index.vue";
+
+export default {
+  name: "renew",
+  extends: PayIndex,
+  data() {
+    return {
+      // announcements
+      announcement: {
+        title: '续费说明',
+        rules: [
+          '购买后原卡号将重新激活，使用原卡号/手机号正常登陆系统即可。',
+          '由于产品特性，本电子卡不适用“7天无理由退换货”。'
+        ],
+        paySucceed: '支付成功，您的原账号已经重新激活',
+        payFailed: '支付失败，您可以重新发起支付',
+        button: '续费'
+      }
+    }
+  },
+  created() {
+    const {cardNo, mobile} = this.$route.query
+    this.renew = { cardNo, mobile }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>