GFRS-2223 【前端】重新投保-撤单、重新支付功能开发---提交人：白金岩

src/api/ebiz/insureAgain/insureAgain.js

@@ -46,4 +46,22 @@ export function commitReOrder(data) {
     method: 'post',
     data
   })
+}
+
+// 获取验证码
+export function getAuthCode(data) {
+  return request({
+    url: getUrl('/customer/authcode/loginedSend', 1),
+    method: 'post',
+    data
+  })
+}
+
+// 撤单
+export function revokeOrder(data) {
+  return request({
+    url: getUrl('/sale/order/revokeOrder', 1),
+    method: 'post',
+    data
+  })
 }

src/views/ebiz/insureAgain/index.vue

@@ -29,16 +29,42 @@
             <template #btns>
               <div v-if="active === 'uncommit'">
                 <van-button size="small" round type="danger" @click="uncommitInsureDetail(order)" plain>查看详情</van-button>
-                <van-button class="ml10" size="small" round type="danger" @click="insureAgain(order)">{{ order.newOrderStatus == '02'?'待支付':'重新投保'}}</van-button>
+                <van-button v-if="canRevoke[order.newOrderStatus]" class="ml10" size="small" round type="danger" @click="revokeOrder(order)">撤单</van-button>
+                <van-button class="ml10" v-if="canRevoke[order.newOrderStatus]" size="small" round type="danger" @click="insureAgain(order)">{{ order.newOrderStatus == '02'?'待支付':'重新投保'}}</van-button>
               </div>
               <div v-if="active === 'commit'">
+                <van-button v-if="canRevoke[order.newOrderStatus]" class="ml10" size="small" round type="danger" @click="revokeOrder(order)">撤单</van-button>
+                <van-button v-if="order.newOrderStatus == '19'" class="ml10" size="small" round type="danger" @click="againPay(order)">重新支付</van-button>
                 <van-button class="ml10" size="small" round type="danger" @click="commitInsureDetail(order)">查看投保单</van-button>
-                <van-button v-if="order.newOrderStatus === '19'" class="ml10" size="small" round type="danger" @click="buyAgain(order)">待支付</van-button>
               </div>
             </template>
           </Order>
         </div>
       </van-pull-refresh>
+        <van-dialog
+                class="dialog-delete"
+                @confirm="checkCaptchaCode"
+                @cancel="cancelCaptchaCode"
+                :before-close="beforeClose"
+                confirm-button-color="#fff"
+                v-model="revokePanelShow"
+                title="短信验证"
+                show-cancel-button
+        >
+          <p class="captchaReceiver">投保人手机号: {{ captchaReceiver | phoneNumFilter }}</p>
+          <van-field v-model="sms" center clearable placeholder="请输入短信验证码">
+            <template #button>
+              <van-button :disabled="sendTime !== 0" v-no-more-click="1000" @click="getCaptchaCode" size="small" type="danger">{{
+                sendTime ? `${sendTime}s后获取` : '获取验证码'
+                }}</van-button>
+            </template>
+          </van-field>
+        </van-dialog>
+      </div>
+      <div v-else class="list  text-center">
+        <img :src="src" />
+        <div class="mt20" v-if="errMessage != ''">{{ errMessage }}</div>
+      </div>
       <van-popup v-model="isAgreementShow" position="right" :style="{ height: '100vh', width: '100vw' }">
         <ReadingAgreement :needTime="false">
           <h3 class="p10" style="text-align: center">重新投保声明提示</h3>
@@ -100,15 +126,12 @@
           </template>
         </ReadingAgreement>
       </van-popup>
-    </div>
   </div>
 </template>
 
 <script>
 import { Search, Sticky, PullRefresh, list, Tag, Popup, Radio, RadioGroup, Toast } from 'vant'
-import { getPolicyListAgent } from '@/api/ebiz/insureAgain/insureAgain'
+import { getPolicyListAgent, revokeOrder, getAuthCode } from '@/api/ebiz/insureAgain/insureAgain'
-import { formatRiskList } from '@/assets/js/utils/formatRiskList.js'
-import dataDictionary from '@/assets/js/utils/data-dictionary' //根据数据字典找到用户等级
 import Order from '@/components/ebiz/insureAgain/Order'
 import ReadingAgreement from '@/components/ebiz/insureAgain/ReadingAgreement'
 import CacheUtils from '@/assets/js/utils/cacheUtils'
@@ -138,6 +161,11 @@ export default {
         month = '0' + month
       }
       return date.getFullYear() + '-' + month + '-' + date.getDate()
+    },
+    phoneNumFilter(phoneNum) {
+      let num = phoneNum.split('')
+      num.splice(3, 4, '****')
+      return num.join('')
     }
   },
   data() {
@@ -149,7 +177,28 @@ export default {
       radio: '',
       isLoading: false,
       isShow: false,
-      orderInfo: {}
+      orderInfo: {},
+      canRevoke: {
+        '19': true,
+        '02': true,
+        '48': true,
+        '49': true,
+        '55': true,
+        '58': true,
+        '46': true,
+        '50': true,
+        '51': true
+      },
+      revokePanelShow: false,
+      sms: '',
+      smsId: '',
+      sendTime: 0,
+      getCaptcha: false,
+      captchaTimer: null,
+      captchaReceiver: '',
+      revokeOrderNo: '',
+      src: this.$assetsUrl + 'images/background.png',
+      errMessage: ''
     }
   },
   computed: {
@@ -361,13 +410,112 @@ export default {
     },
     onRefresh() {
       this.isLoading = false
-      console.log(345435)
       this.policyListDTOList = []
       let data = {}
       this.getPolicyListAgent(data)
+    },
+    async getCaptchaCode() {
+      if (this.sendTime !== 0) return
+      this.getCaptcha = true
+      this.sendTime = 60
+      let data = {
+        operateType: 'appntInfoEntry',
+        type: 'H5',
+        operateCode: this.captchaReceiver,
+        system: 'agentApp',
+        operateCodeType: '0'
+      }
+      let res = await getAuthCode(data)
+      if (res.result === '0') {
+        this.$toast('获取验证码成功')
+      }
+      this.smsId = res.sessionId
+      this.captchaTimer = setInterval(() => {
+        this.sendTime--
+        if (this.sendTime === 0) {
+          clearInterval(this.captchaTimer)
+          this.captchaTimer = null
+        }
+      }, 1000)
+    },
+    async checkCaptchaCode() {
+      if (!this.getCaptcha) {
+        return this.$toast('请先获取验证码')
+      }
+      if (!this.sms.trim()) {
+        return this.$toast('请输入验证码')
+      }
+      clearInterval(this.captchaTimer)
+      this.captchaTimer = null
+      let revokeResult = await revokeOrder({
+        id: this.revokeOrderNo,
+        smsId: this.smsId,
+        code: this.sms
+      })
+      if (revokeResult.result == 0) {
+        this.$toast('撤单成功!')
+        setTimeout(() => {
+          this.saleList = []
+          this.isSuccess = false
+          ;[this.loading, this.finished] = [true, false]
+          this.onRefresh()
+        }, 1000)
+      } else {
+        Toast.fail(revokeResult.resultMessage)
+      }
+      this.cancelCaptchaCode()
+      this.sms = ''
+    },
+    beforeClose(action, done) {
+      this.captchaMaped ? done() : done(false)
+    },
+    cancelCaptchaCode() {
+      this.sendTime = 0
+      this.revokePanelShow = false
+      clearInterval(this.captchaTimer)
+      this.captchaTimer = null
+      this.getCaptcha = false
+      this.captchaMaped = false
+      this.captchaReceiver = ''
+    },
+    //再次支付
+    againPay(order) {
+      CacheUtils.setLocItem('orderNo', order.newOrderNo)
+      // 再次支付 salelist为 0
+      CacheUtils.setLocItem('salelist', '0')
+      CacheUtils.removeLocItem('changeCard')
+      this.$jump({
+        flag: 'h5',
+        extra: {
+          url: location.origin + '/#/insureAgain/payMent'
+        },
+        routerInfo: { path: '/insureAgain/payMent' }
+      })
+    },
+    revokeOrder(order) {
+      this.$dialog
+      .confirm({
+        className: 'dialog-delete',
+        title: '提示',
+        message: '撤单后,数据将不可恢复,您确定要撤单吗?',
+        cancelButtonColor: '#E9332E',
+        confirmButtonColor: '#FFFFFF'
+      })
+      .then(() => {
+        this.revokePanelShow = true
+        this.captchaReceiver = order.appntMobile
+        this.revokeOrderNo = order.newOrderNo
+      })
     }
   }
 }
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+  .captchaReceiver {
+    margin-left: 1em;
+    padding-bottom: 1em;
+    border-bottom: 1px solid #eaeaea;
+    font-size: 14px;
+  }
+</style>