ebiz-h5/src/views/ebiz/cardList/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>
    </div>

    <van-cell-group v-if="payStatus == 1">
      <van-cell title="产品名称" :value="card.schemeName" />
      <van-cell title="投保单号" :value="card.orderNo" />
      <van-cell title="被保险人" :value="card.insuredName" />
      <van-cell title="生效日期" :value="card.cvalidate" />
      <!-- <van-cell v-if="card.bankCode" title="卡号" :value="card.bankCode" /> -->
      <van-cell title="保费" class="red" :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="pt20 red"> 温馨提示：<br />
        1.请关注微信公众号【国富人寿保险】查询、下载电子保单及电子发票。<br />
        2.为保障您的权益，投保成功后广西保险行业协会对您进行短信调研，请您注意查看短信。如您满意，请回复“1”。<br />
        如有疑问，可拨打国富人寿全国服务热线400-694-6688咨询。<br />
      </div>
    </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">返回首页</van-button>
    </div> -->
    <template v-if="!isWeixin">
      <!-- <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' || 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="next">返回首页</van-button> -->
      </div>
    </template>
    <template v-else>
      <div class="bottom-btn bg-white" v-if="payStatus == '1' || payStatus == '4' || payStatus == '8'">
        <!-- <van-button type="danger" size="large" @click="close" v-no-more-click="1000">返回</van-button> -->
      </div>
      <div class="bottom-area bottom-btn flex" v-if="payStatus == '2' || 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="next">返回</van-button> -->
      </div>
    </template>
    <!--    <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 class="bottom-area bottom-btn flex"> -->
    <!-- <van-button class="m-btn w250" type="danger" size="normal" @click="rePayMent">重新支付</van-button> -->
    <!-- <van-button size="large" type="danger" @click="next" v-no-more-click="1000">返回首页</van-button> -->
    <!-- </div> -->
  </div>
</template>

<script>
import { Cell, CellGroup } from 'vant'
import { getPayState } from '@/api/ebiz/sale/sale'
export default {
  data() {
    let isWeixin = this.$utils.device().isWeixin //判断环境
    return {
      isWeixin,
      orderNo: '',
      // 保融收银台返回的支付流水号
      paySeqNo: '',
      // 接口返回数据前，不做页面渲染
      isReady: false,
      // 是否已重新获取支付状态。（首次进入本页，立即查询支付结果。如果是‘支付中’，两秒后再次（最后一次）再次获取一次支付状态。）
      isReloaded: false,
      // 结果原因
      resMessage: '',
      // 支付结果
      payStatus: '',
      // 支付信息
      payInfo: {
        appntName: '', // 投保人
        prtNo: '', // 投保单号
        amnt: '' // 支付金额
      },
      card: {},
      // 图片
      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: {
    appCallBack(data) {
      if (data.trigger == 'left_button_click') {
        this.$jump({
          flag: 'h5',
          extra: {
            title: '产品列表',
            forbidSwipeBack: 1, //当前页面禁止右滑返回
            url: location.origin + `/#/cardList/CardTotreasure`
          },
          routerInfo: {
            path: `/cardList/CardTotreasure`,
            type: '1'
          }
        })
      }
    },
    // 返回列表页
    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 = res

          // 如果是支付中，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 + '/#/cardList/pay'
        },
        routerInfo: {
          path: '/cardList/pay'
        }
      })
    },
    close(){
      WeixinJSBridge.call("closeWindow");
    }
  },
  created() {
    setTimeout(() => {
      // eslint-disable-next-line no-undef
      EWebBridge.webCallAppInJs('webview_left_button', {
        img: this.$assetsUrl + 'images/del-close-btn@3x.png',
        intercept: '1' //是否拦截原生返回事件 1是 其他否
      })
    }, 100)
    window.appCallBack = this.appCallBack
  },
  mounted() {
    document.body.style.backgroundColor = '#fff'
    let that = this
    that.payStatus = window.localStorage.getItem('payStatus')
    this.card = JSON.parse(window.localStorage.getItem('cardList-detail'))
    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()
    }
    this.card.orderNo = window.localStorage.getItem('orderNo')
    let orderDetail = JSON.parse(sessionStorage.orderDetail)
    this.card.insuredName = orderDetail.insuredDTOs[0].name
    this.card.cvalidate = orderDetail.insuredDTOs[0].riskDTOLst[0].cvaliDate
  },
  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>