ebiz-h5/src/views/YB_APP/renewalDetail.vue

<template>
  <div class="public_container">
    <!-- 上方小图标 -->
    <div class="topTitle">
      <div v-if="changestate == 0">
        <van-icon name="underway-o" color="#EA070A" size="30" />
        <p class="topTitleText">续期待扣款</p>
      </div>
      <div v-if="changestate == 1">
        <van-icon name="passed" color="#2451C1" size="30" />
        <p class="topTitleText">续期扣款成功</p>
      </div>
      <div v-if="changestate == 3">
        <van-icon name="underway-o" color="#EA070A" size="30" />
        <p class="topTitleText">续期扣款中</p>
      </div>
      <div v-if="changestate == 2">
        <van-icon name="close" color="#EA070A" size="30" />
        <p class="topTitleText">续期扣款失败</p>
      </div>
      <div v-if="changestate == 4">
        <p><img src="../../assets/YB_APP/images/changestate.png" height="36px" /></p>
        <!-- <van-icon name="stop-circle-o" size="30"/> -->
        <p class="topTitleText">已终止</p>
      </div>
    </div>
    <!-- 中间内容 -->
    <div class="listContent">
      <van-cell-group inset>
        <van-cell title="保单号" :value="ybOrderDTOList.contNo" />
        <van-cell title="险种名称" :value="ybOrderDTOList.riskName" />
        <van-cell title="首期保费/元" :value="ybOrderDTOList.money" />
        <van-cell title="保额/元" :value="ybOrderDTOList.amnt" />
        <van-cell title="投保人" :value="ybOrderDTOList.appntName" />
        <van-cell title="被保险人" :value="ybOrderDTOList.insuredName" />
        <van-cell title="转账银行" :value="ybOrderDTOList.bankCode" />
        <van-cell title="转账帐号" :value="ybOrderDTOList.bankAccNo" />
        <van-cell title="交费次数" :value="ybOrderDTOList.payTimes" />
        <van-cell title="扣款失败原因" :value="ybOrderDTOList.defaultReson" v-if="changestate == 2" />
        <van-cell title="应交日" :value="ybOrderDTOList.payToDate" />
        <van-cell title="归属网点" :value="ybOrderDTOList.netWorkName" />
        <van-cell title="归属地市" :value="ybOrderDTOList.city" />
        <van-cell title="保单生效日" :value="ybOrderDTOList.cvalidate" />
        <van-cell title="归属指标" :value="ybOrderDTOList.rnewIndex" />
      </van-cell-group>
    </div>
    <!-- 下方拨打电话 -->
    <div class="bottomPhone">
      <button class="bottomPhoneBut" @click="showDialog(ybOrderDTOList.appntPhone)">拨打电话</button>
    </div>

    <van-dialog
      v-model="show"
      title="确认拨打电话"
      :message="`(${ybOrderDTOList.appntPhone})`"
      show-cancel-button
      @cancel="cancel"
      @confirm="contact(ybOrderDTOList.appntPhone)"
    >
    </van-dialog>
  </div>
</template>

<script>
import { getYBRenewalInfo } from '@/api/YB_APP/index'
import warterMark from '@/assets/js/utils/warterMark.js'
import { getAgentInfo } from '@/api/ebiz/my/my.js'
export default {
  name: 'policyDetail',
  components: {},
  data() {
    return {
      ybOrderDTOList: {},
      policyNo: {},
      changestate: '',
      show: false
    }
  },
  mounted() {
    this.policyNo.contNo = this.$route.query.contNo
    this.policyNo.payFlag = this.$route.query.payFlag
    this.policyNo.payToDate = this.$route.query.payToDate
    // console.log(this.policyNo, 'avc')
    console.log(this.$route.query, '我是router里参数')
    console.log(this.policyNo, 'avc111111111111')
    this.getYBRenewalInfo()
    this.changestate = this.policyNo.payFlag
    this.getAgentInfo()
  },
  methods: {
    // 水印
    getAgentInfo() {
      getAgentInfo({}).then((res) => {
        if (res.result == 0) {
          console.log('123')
          warterMark.set(res.name + res.jobNo, '')
        }
      })
    },
    cancel() {
      this.show = false
    },
    showDialog() {
      this.show = true // 显示确认对话框
    },
    contact() {
      EWebBridge.webCallAppInJs('callSystem', {
        system: 'tel',
        number: this.ybOrderDTOList.appntPhone
      })
    },
    callPhone(phoneNumber) {
      EWebBridge.webCallAppInJs('callSystem', {
        system: 'tel',
        number: phoneNumber
      })
    },
    getYBRenewalInfo() {
      // let params = {
      //   policyNo
      // }
      console.log(this.policyNo, '我是this.policyNo')
      getYBRenewalInfo(this.policyNo).then((res) => {
        console.log(res, '我是res')
        if (res.result == 0) {
          this.ybOrderDTOList = res.content
          console.log(this.ybOrderDTOList, '请求成功的res')
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.public_container {
  font-size: 12px;
  height: 100vh;
  width: 100vw;
}
/deep/ .van-cell__title {
  color: #0a0808;
  max-width: 30%;
}
/deep/ .van-cell__value {
  color: #777676;
  // text-align: left;
}
// /deep/ .van-cell-group >
.topTitle {
  text-align: center;
  margin: 22px;
}
.topTitleText {
  font-weight: 700;
  margin-top: 4px;
  font-size: 14px;
}
.listContent {
  width: 96%;
  background-color: white;
  margin: 12px auto;
  overflow: hidden;
  border-radius: 12px;
}
.bottomPhone {
  text-align: center;
  margin-top: 30px;
}
.bottomPhoneBut {
  padding: 8px 40px;
  background-color: #fd3841;
  color: #ffffff;
  border: 0;
  border-radius: 24px;
  font-size: 14px;
}
</style>