ebiz-h5/src/views/ebiz/sale/PayResult.vue

<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' || 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>

    <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 class="mt15" v-if="this.manageComCode == '45'">-->
    <!--        <span class="pt150 fs14 green fwb">-->
    <!--          温馨提示：为维护您的合法权益，广西保险行业协会将向您发送满意度调查短信，欢迎回复短信对我们的销售和服务进行监督。-->
    <!--        </span>-->
    <!--      </div>-->
    <!--    </div>-->
    <div v-if="payStatus == '1'" class="p10 pb250  bg-white" style="text-align: center;padding-top: 50px!important;">
      <p style="text-align: center;font-weight: bold;">温馨提示</p>
      <p style="text-align: center;">您可识别下方官方微信"国富人寿"二维码关注公众号，查询您的保单信息和服务</p>
      <div style="padding: 20px;">
        <img :src="erweima" style="width: 60vw;"/>
      </div>
      <p style="text-align: center;font-weight: bold;">长按识别二维码</p>
    </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>

    <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"> {{isWeixin ? '返回' :'返回列表页'}}</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">{{isWeixin ? '返回' :'返回列表页'}}</van-button>
    </div>
    <div class="bottom-area bottom-btn flex" v-if="payStatus == '9'">
      <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="changeCard">更换卡号</van-button>
    </div>
  </div>
</template>

<script>
  import { Cell, CellGroup } from 'vant'
  import { getPayState } from '@/api/ebiz/sale/sale'
  import riskRules from '@/views/ebiz/common/risk-rules'
  import erweima from '@/assets/images/erweima.png'
  export default {
    data() {
      let isWeixin = this.$utils.device().isWeixin //判断环境
      return {
        isWeixin,
        // 保融收银台返回的支付流水号
        paySeqNo: '',
        // 接口返回数据前，不做页面渲染
        isReady: true,
        // 是否已重新获取支付状态。（首次进入本页，立即查询支付结果。如果是‘支付中’，两秒后再次（最后一次）再次获取一次支付状态。）
        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',
        erweima,
        manageComCode:''//代理人管理机构 52贵州 45广西
      }
    },
    components: {
      [Cell.name]: Cell,
      [CellGroup.name]: CellGroup
    },
    methods: {
      // 返回列表页
      next() {
        if(this.isWeixin){
          WeixinJSBridge.call("closeWindow");
        }else{
          this.$jump({
            flag: 'h5',
            extra: {
              url: location.origin + '/#/sale/list'
            },
            routerInfo: {
              path: '/sale/list'
            }
          })
        }
      },
      // 查询支付状态
      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 {
            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'
          }
        })
      },
      //更换卡号
      changeCard() {
        localStorage.setItem('changeCard', true)
        this.$jump({
          flag: 'h5',
          extra: {
            url: location.origin + '/#/sale/AccountInformation'
          },
          routerInfo: {
            path: '/sale/AccountInformation'
          }
        })
      }
    },
    created() {
      EWebBridge.webCallAppInJs('webview_left_button', {
        intercept: '1' //是否拦截原生返回事件 1是 其他否
      })
    },
    async 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()
      }
      //获取代理人管理机构 52贵州 45广西
      let dataReturn = await riskRules.getAgentInfoFunc(this)
      this.manageComCode = dataReturn.manageComCode
    },
    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>