去掉报错，添加被保人信息联动，添加展示法定受益人

2025-12-09 18:06:44 +08:00 · 2020-01-02 17:58:11 +08:00
parent 5a75734fef
commit 51de9bff3f
3 changed files with 177 additions and 14 deletions
--- a/src/router/ebiz/cardList.js
+++ b/src/router/ebiz/cardList.js
@@ -2,7 +2,6 @@
 const information = () => import('@/views/ebiz/cardList/information')
 const cardTotreasure = () => import('@/views/ebiz/cardList/CardTotreasure')
 const productDetails = () => import('@/views/ebiz/cardList/productDetails')
-const ShowPDF = () => import('@/views/ebiz/cardList/ShowPDF')
 const pay = () => import('@/views/ebiz/cardList/Pay')
 const payResult = () => import('@/views/ebiz/cardList/PayResult')
 const paySuccess = () => import('@/views/ebiz/cardList/PaySuccess')
@@ -35,15 +34,6 @@ export default [
      index: 3
    }
  },
-  {
-    path: '/cardList/ShowPDF',
-    name: 'ShowPDF',
-    component: ShowPDF,
-    meta: {
-      title: '国富健康保终身重大疾病保险条款',
-      index: 3
-    }
-  },
  {
    path: '/cardList/pay',
    name: 'pay',
--- a/src/views/ebiz/cardList/PayResult.vue
+++ b/src/views/ebiz/cardList/PayResult.vue
@@ -0,0 +1,172 @@
+<template>
+  <div class="payResult-container" v-if="isReady">
+    <div class="payResult-header flex justify-content-c align-items-c m15 bg-white flex-direction-colunm">
+      <img :src="srcSuccess" class="payResult-img mb15 pt15" v-if="payStatus == '1'" />
+      <img :src="srcPending" class="payResult-img mb15 pt15" v-if="payStatus == '4' || payStatus == '8'" />
+      <img :src="srcFail" class="payResult-img mb15 pt15" v-if="payStatus == '2'" />
+      <h3 v-if="payStatus == '1'" class="mb10">支付成功</h3>
+      <h3 v-if="payStatus == '4'" class="mb10">支付中...</h3>
+      <h3 v-if="payStatus == '2'" class="mb10">支付失败</h3>
+      <span v-if="payStatus == '4'" class="pb10">银行扣款中，请稍后查询</span>
+      <span v-if="payStatus == '8'" class="pb10">线下批扣中……</span>
+      <!-- <span v-if="payStatus == '8'">{{ resMessage }}</span> -->
+    </div>
+
+    <van-cell-group>
+      <van-cell title="付款人" :value="payInfo.appntName" v-if="payInfo.appntName != ''" />
+      <van-cell title="投保单号" :value="payInfo.prtNo" />
+      <van-cell title="支付金额" :value="`${payInfo.amnt}元` | moneyFormat" v-if="payInfo.amnt != ''" />
+    </van-cell-group>
+    <!-- <div v-if="payStatus != '2' && payStatus != '1'" class=" p10 pb250  bg-white">
+      <span class="pt150 fs14"> 如有相关问题，请联系信息技术部运维人员</span>
+    </div> -->
+    <div v-if="payStatus == '1'" class=" p10 pb250  bg-white">
+      <span class="pt150 fs14"> 核心承保中，请您稍后查看</span>
+    </div>
+    <div v-if="payStatus == '2' || payStatus == '4' || payStatus == '8'" class=" p10 pb250  bg-white">
+      <span v-html="resMessage"></span>
+    </div>
+    <!-- <div class=" p10 pb250  bg-white">
+      <span v-html="resMessage"></span>
+    </div> -->
+
+    <div class="bottom-btn bg-white" v-if="payStatus == '1' || payStatus == '4' || payStatus == '8'">
+      <van-button type="danger" size="large" @click="next" v-no-more-click="1000">返回列表页</van-button>
+    </div>
+    <div class="bottom-area bottom-btn flex" v-if="payStatus == '2'">
+      <van-button class="m-btn w250" type="danger" size="normal" @click="rePayMent">重新支付</van-button>
+      <van-button class="m-btn w250" type="danger" size="normal" @click="next">返回列表页</van-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Cell, CellGroup } from 'vant'
+import { getPayState } from '@/api/ebiz/sale/sale'
+export default {
+  data() {
+    return {
+      // 保融收银台返回的支付流水号
+      paySeqNo: '',
+      // 接口返回数据前，不做页面渲染
+      isReady: false,
+      // 是否已重新获取支付状态。（首次进入本页，立即查询支付结果。如果是‘支付中’，两秒后再次（最后一次）再次获取一次支付状态。）
+      isReloaded: false,
+      // 结果原因
+      resMessage: '',
+      // 支付结果
+      payStatus: '',
+      // 支付信息
+      payInfo: {
+        appntName: '', // 投保人
+        prtNo: '', // 投保单号
+        amnt: '' // 支付金额
+      },
+      // 图片
+      srcSuccess: this.$assetsUrl + 'images/success.png',
+      srcPending: this.$assetsUrl + 'images/pending.png',
+      srcFail: this.$assetsUrl + 'images/fail.png'
+    }
+  },
+  components: {
+    [Cell.name]: Cell,
+    [CellGroup.name]: CellGroup
+  },
+  methods: {
+    // 返回列表页
+    next() {
+      this.$jump({
+        flag: 'h5',
+        extra: {
+          url: location.origin + '/#/cardList/cardTotreasure'
+        },
+
+        routerInfo: {
+          path: '/cardList/cardTotreasure'
+        }
+      })
+    },
+    // 查询支付状态
+    queryPayState() {
+      this.$toast.clear()
+      this.$toast.loading({
+        duration: 0, // 持续展示 toast
+        forbidClick: true, // 禁用背景点击
+        loadingType: 'spinner',
+        message: '加载中……'
+      })
+      let data = { orderNo: this.paySeqNo }
+      getPayState(data).then(res => {
+        this.$toast.clear()
+        this.isReady = true
+        console.log('----支付结果查询', JSON.stringify(res))
+        if (res.result == '0') {
+          this.payStatus = res.payStatus
+          this.payInfo = { appntName: res.appntName, prtNo: res.prtNo, amnt: res.amnt }
+
+          // 如果是支付中，2秒后，重新获取一次支付状态
+          if (this.payStatus == '4' && !this.isReloaded) {
+            this.isReloaded = true
+            setTimeout(() => {
+              this.queryPayState()
+            }, 2000)
+          }
+        } else {
+          this.$toast(res.resultMessage)
+        }
+      })
+    },
+    // // 重新支付
+    // rePayMent() {
+    //   //  localStorage.orderNo = order.orderInfoDTO.orderNo
+    //   // 再次支付 salelist为 0
+    //   localStorage.salelist = '0'
+    //   this.$jump({
+    //     flag: 'h5',
+    //     extra: {
+    //       url: location.origin + '/#/sale/payMent'
+    //     },
+    //     routerInfo: {
+    //       path: '/sale/payMent'
+    //     }
+    //   })
+    // }
+  },
+  mounted() {
+    let that = this
+    // document.body.style.backgroundColor = '#fff'
+    that.payStatus = window.localStorage.getItem('payStatus')
+    that.payInfo = JSON.parse(window.localStorage.getItem('payInfo'))
+    if (window.localStorage.getItem('resMessage') != null) {
+      that.resMessage = window.localStorage.getItem('resMessage').replace(/\\n/g, '<br>')
+    }
+
+    this.paySeqNo = this.$route.query.RdSeq
+    if (!this.paySeqNo) {
+      this.$toast({ message: '参数错误，缺少支付流水号‘RdSeq’查询参数', duration: 5000 })
+    } else {
+      this.queryPayState()
+    }
+  },
+  beforeRouteLeave(to, from, next) {
+    document.body.style.backgroundColor = ''
+    next()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.payResult-container {
+  .payResult-header {
+    width: 345px;
+    // height: 143px;
+    .payResult-img {
+      width: 70px;
+      height: 70px;
+    }
+  }
+}
+// /deep/ .van-cell__value {
+//   text-align: left;
+// }
+</style>
--- a/src/views/ebiz/cardList/information.vue
+++ b/src/views/ebiz/cardList/information.vue
@@ -109,14 +109,14 @@
        @click="toSelect('11')"
      />
      
-      <van-field v-model="insuredInfo.idNo" maxlength="18" required label="证件号码" v-validate="'required'" name="证件号码" placeholder="请输入" clearable >
+      <van-field v-model="insuredInfo.idNo" maxlength="18" required label="证件号码" v-validate="'required'" name="证件号码" placeholder="请输入" clearable @blur="getRelatedData(insuredInfo.idNo,'2')" >
        <van-button v-if="insuredInfo.idType == 1" slot="button" size="small" type="danger" round @click="selectClick('3')">证件扫描</van-button>
      </van-field>
      </van-cell-group>
    <!-- 受益人信息 -->
    <van-cell-group class="mt10">
      <p style="border-bottom: 1px solid #ebedf0" class="fs15 fwb pl10 pv12">受益人信息</p>
-        <van-field required v-model="userInfo.bnfType" clearable label="受益人类型"   v-validate="'required'"  style="border-bottom: 1px solid #ebedf0;"/>
+        <van-field required v-model="bnfTypeVal" clearable label="受益人类型"   v-validate="'required'"  style="border-bottom: 1px solid #ebedf0;"/>
      </van-cell-group>
      <p style="background:white;border-bottom: 1px solid #ebedf0" class="fs15 fwb pl10 pv12">产品信息</p> 
    <FieldDatePicter
@@ -240,6 +240,7 @@ export default {
      columns: [],
      valueKey: 'text',
      homeName: '', //家庭地址
+      bnfTypeVal:'法定受益人', //受益人类型文字展示
      //投保人信息
      userInfo: {
        name: '', //投保人姓名
@@ -556,7 +557,7 @@ export default {
        // 计算年龄
        // let age = utilsAge.getAge(this.userInfo.birthday, new Date())

-        this.getRelatedData(this.userInfo.idNo)
+        this.getRelatedData(this.userInfo.idNo,'1')
      } else if (data[0][1] == '1') {
        let { customerName, customerSex } = data[0][0]
        this.insuredInfo.name = customerName //用户名
@@ -572,7 +573,7 @@ export default {
        // 计算年龄
        // let age = utilsAge.getAge(this.userInfo.birthday, new Date())

-        this.getRelatedData(this.insuredInfo.idNo)
+        this.getRelatedData(this.insuredInfo.idNo,'2')
      }
      // console.log(data, val)
    },