[银保项目]保单列表适配调整.保全和续期去掉图片.背景只有蓝色条件,修改保全字段.样式适配

src/views/YB_APP/renewalDetail.vue

@@ -0,0 +1,142 @@
+<template>
+  <div class="public_container">
+    <!-- 上方小图标 -->
+    <div class="topTitle">
+      <div v-if="abc == 1">
+        <van-icon name="underway-o" color="#EA070A" size="30" />
+        <p class="topTitleText">{{ ybOrderDTOList.defaultReson }}</p>
+      </div>
+      <div v-if="abc == 2">
+        <van-icon name="passed" color="#2451C1" 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.chargeDate" />
+        <van-cell title="归属网点" :value="ybOrderDTOList.netWorkName" />
+        <van-cell title="归属地市" :value="ybOrderDTOList.city" />
+        <van-cell title="保单生效日" :value="ybOrderDTOList.payToDate" />
+        <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'
+export default {
+  name: 'policyDetail',
+  components: {},
+  data() {
+    return {
+      ybOrderDTOList: '',
+      policyNo: '',
+      abc: 2,
+      show: false,
+    }
+  },
+  mounted() {
+    this.policyNo = this.$route.query.policyNo
+    console.log(this.policyNo, 'avc')
+    this.getYBRenewalInfo()
+  },
+  methods: {
+    cancel(){
+      this.show = false
+    },
+  showDialog() {
+      this.show = true;// 显示确认对话框
+  },
+   contact() {
+      const a = document.createElement("a");
+      a.href = "tel:8888410"
+      a.click();
+      this.show = false;
+   },
+    callPhone (phoneNumber) {
+     window.location.href = 'tel://' + phoneNumber},
+    getYBRenewalInfo() {
+      let params = {
+        policyNo: this.policyNo
+      }
+      console.log('我是log')
+      getYBRenewalInfo(params).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>