'修改支付结果页'

src/views/ebiz/insureAgain/PaymentResult.vue

@@ -1,32 +1,76 @@
 <template>
-  <div class="payment-result p10 bg-white">
-    <div class="emoji bg-white p30 van-hairline--surround mb5">
-      <img class="img mb20" :src="emojiSuccess" />
-      <p class="msg">支付成功</p>
-    </div>
-    <div class="bg-white">
-      <van-cell title="付款人" value="李磊" />
-      <van-cell title="投保单号" value="8186270000011900" />
-      <van-cell title="支付金额" value="2000.00" />
+  <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' || payStatus == '9'" />
+      <h3 v-if="payStatus == '1'" class="mb10">支付成功</h3>
+      <h3 v-if="payStatus == '4'" class="mb10">支付中...</h3>
+      <h3 v-if="payStatus == '2' || payStatus == '9'" 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>
 
-    <p class="ps p10">{{ psText }}</p>
+    <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" v-if="payStatus == '9'">
+      <span class="pt150 fs14">{{ resMessage }}</span>
+    </div>
 
     <van-button type="danger" class="bottom-btn" @click="cancel" v-no-more-click="1000">返回可重新投保保单列表</van-button>
   </div>
 </template>
 
 <script>
-import emojiSuccess from '@/assets/images/renewalManage/u51859.png'
-import emojiFailed from '@/assets/images/renewalManage/u51859.png'
-
+import { Cell, CellGroup } from 'vant'
+import { getPayState } from '@/api/ebiz/sale/sale'
 export default {
-  mounted(){
-    console.log('resMessage:'+localStorage.resMessage)
-    console.log('payStatus:'+localStorage.payStatus)
-    console.log('payInfo:'+JSON.parse(localStorage.payInfo))
+  data() {
+    let isWeixin = this.$utils.device().isWeixin //判断环境
+    return {
+      isWeixin,
+      // 保融收银台返回的支付流水号
+      paySeqNo: '',
+      // 接口返回数据前，不做页面渲染
+      isReady: true,
+      // 是否已重新获取支付状态。（首次进入本页，立即查询支付结果。如果是‘支付中’，两秒后再次（最后一次）再次获取一次支付状态。）
+      isReloaded: false,
+      // 结果原因
+      resMessage: '',
+      // 支付结果
+      payStatus: '',
+      // 支付信息
+      payInfo: {
+        appntName: '', // 投保人
+        prtNo: '', // 投保单号
+        amnt: '' // 支付金额
       },
-  methods:{
+      // 图片
+      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: {
+    // 返回列表页
     cancel() {
       this.$jump({
         flag: 'h5',
@@ -39,49 +83,77 @@ export default {
         }
       })
     },
-  },
-  computed: {
-    emoji() {
-      if (this.resultState) {
-        return this.emojiSuccess
+    // 查询支付状态
+    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 }
+          this.resMessage = res.message
+          // 如果是支付中，2秒后，重新获取一次支付状态
+          if (this.payStatus == '4' && !this.isReloaded) {
+            this.isReloaded = true
+            setTimeout(() => {
+              this.queryPayState()
+            }, 2000)
+          }
         } else {
-        return emojiFailed
+          this.$toast(res.resultMessage)
         }
+      })
     },
-    psText() {
-      if (this.resultState) {
-        return '温馨提示： 您的新保单将于2021年2月20日生效，请您前往官微或联 系保单服务人员签收您的保单。'
+  },
+  created() {
+    EWebBridge.webCallAppInJs('webview_left_button', {
+      intercept: '1' //是否拦截原生返回事件 1是 其他否
+    })
+  },
+  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 {
-        return '温馨提示：亲，您本次提交的重新申请，因XX原因，未提交成功，如需帮助，可联系保单服务专员或拨打公司服务热线：400-694-6688。'
-      }
+      this.queryPayState()
     }
   },
-  data() {
-    return {
-      emojiSuccess,
-      emojiFailed,
-      resultState: true
-    }
+  beforeRouteLeave(to, from, next) {
+    document.body.style.backgroundColor = ''
+    next()
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.payment-result {
-  .emoji {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
+.payResult-container {
+  .payResult-header {
+    width: 345px;
+    // height: 143px;
+    .payResult-img {
+      width: 70px;
+      height: 70px;
     }
-
-  .img {
-    width: 50px;
-  }
-
-  .ps {
-    color: #ff0000;
-    font-size: 14px;
   }
 }
+// /deep/ .van-cell__value {
+//   text-align: left;
+// }
 </style>

src/views/ebiz/insureAgain/index.vue

@@ -22,7 +22,7 @@
               </p>
               <p class="name">
                 <van-tag plain color="#999999">状态</van-tag>
-                <span class="ml5 span">{{order.newOrderStatus | idToText('insureAgainState')}}</span>
+                <span class="ml5 span">{{ order.newOrderStatus | idToText('insureAgainState') }}</span>
               </p>
             </div>
 
@@ -70,13 +70,13 @@
             <p style="text-indent: 28px">
               您好！感谢您选择购买国富人寿保险股份有限公司（以下简称我们）保险产品，您于{{ orderInfo.cvaliDate }}投保的旧保单{{
                 orderInfo.policyNo
-              }}，产品名称为：{{orderInfo.riskName}}即将到期或已到期（到期日期详见保单），为保护您的权益，即日起至{{
+              }}，产品名称为：{{ orderInfo.riskName }}即将到期或已到期（到期日期详见保单），为保护您的权益，即日起至{{
                 orderInfo.expiryDate | expiryDateFilter
               }}期间，您可向我们提交重新投保申请。以下是申请重新投保的注意事项和声明，请您仔细阅读和确认：
             </p>
-            <p style="text-indent: 28px">1.{{orderInfo.riskName}}保险期间为一年，到期后需要您重新投保。</p>
+            <p style="text-indent: 28px">1.{{ orderInfo.riskName }}保险期间为一年，到期后需要您重新投保。</p>
             <p style="text-indent: 28px">
-              2.本次重新投保，我们将按照{{orderInfo.riskName}}费率表中的“在上一保险期间届满后60日内申请重新投保时对应的费率”计算保费。
+              2.本次重新投保，我们将按照{{ orderInfo.riskName }}费率表中的“在上一保险期间届满后60日内申请重新投保时对应的费率”计算保费。
             </p>
             <p style="text-indent: 28px">3.若本次重新投保成功，新保单免除等待期。</p>
             <p style="text-indent: 28px">
@@ -249,7 +249,7 @@ export default {
       //   businessSource: '1', //业务来源:1-电投，2-入司，3-理赔，4-保全
       //   number: that.saleInsuredInfo.idNo, //身份证号码
       //   name: order.appntName //姓名
-      //     }).then(data => {
+      // }).then((data) => {
       //   if (JSON.parse(data).state == '1') {
       //     this.isAgreementShow = true
       //   } else {