feture: 添加确认理赔、帮助中心

src/api/policy.js

@@ -17,10 +17,10 @@ export const getGenPolicyDetail = orderNo => {
 
 // 查询缴费记录
 export const getPayRecord = policySecId => {
-  return req.get(`/policy/pay_record?policySecId=${policySecId}`);
+  return req.get(`/policy/pay_record?policySecId=${encodeURIComponent(policySecId)}`);
 };
 
 // 保单自动续保状态管理
 export const updateRenewal = (policySecId, status) => {
-  return req.post(`/policy/auto_renew_policy/${policySecId}/${status}`);
+  return req.post(`/policy/auto_renew_policy/${encodeURIComponent(policySecId)}/${status}`);
 };

src/components/GoodList/index.vue

@@ -31,7 +31,9 @@
               <small>{{ it.sub || "-" }}</small>
               <div class="goods-list-item-price">
                 <span class="goods-list-item-price-amount">¥{{ it.price || "--" }}</span>
-                <span class="goods-list-item-price-unit" v-if="it.unit">{{ it.unit }}</span>
+                <span class="goods-list-item-price-unit" v-if="it.unit">{{
+                  it.unit === "年起" ? " / " + it.unit : it.unit
+                }}</span>
               </div>
             </cr-col>
           </cr-row>
@@ -59,7 +61,9 @@
           <small>{{ it.sub || "-" }}</small>
           <div class="goods-list-item-price">
             <span class="goods-list-item-price-amount">¥{{ it.price || "--" }}</span>
-            <span class="goods-list-item-price-unit" v-if="it.unit">{{ it.unit }}</span>
+            <span class="goods-list-item-price-unit" v-if="it.unit">{{
+                  it.unit === "年起" ? " / " + it.unit : it.unit
+                }}</span>
           </div>
         </cr-col>
       </cr-row>

src/router/routes.js

@@ -78,16 +78,34 @@ export default [
   },
   {
     path: "/user/family/detail/:id",
-    name: "Family",
+    name: "FamilyDetail",
     component: () => import("../views/User/Family/Detail/index.vue"),
     meta: { title: "修改信息" }
   },
+  {
+    path: "/user/apply-claims",
+    name: "ApplyClaims",
+    component: () => import("../views/User/ApplyClaims/index.vue"),
+    meta: { title: "申请理赔" }
+  },
   {
     path: "/user/help-center",
-    name: "Family",
+    name: "HelpCenter",
     component: () => import("../views/User/HelpCenter/index.vue"),
     meta: { title: "帮助中心" }
   },
+  {
+    path: "/user/help-center/answer/:type/:id",
+    name: "Answer",
+    component: () => import("../views/User/HelpCenter/Answer/index.vue"),
+    meta: { title: "帮助中心" }
+  },
+  {
+    path: "/user/help-center/subsection/:type",
+    name: "Subsection",
+    component: () => import("../views/User/HelpCenter/Subsection/index.vue"),
+    meta: { title: "帮助中心" }
+  },
   {
     path: "/policy",
     name: "Policy",

src/views/Policy/Detail/modules/StatusDesc.vue

 <template>
   <div>
     <p class="Pdb-status" v-if="cardConfig.detailText">{{ cardConfig.detailText }}</p>
-    <p class="Pdb-status">{{ cardConfig.statusText }}</p>
+    <p class="Pdb-status">{{ secondTitleText }}</p>
     <div class="Pdb-tips" v-if="cardConfig.recordText" @click="goNext">
       <span class="Pdb-tips-text">{{ cardConfig.recordText }}</span>
       <svg-icon class-name="Pdb-tips-svg" v-if="isShowIcon" icon-class="payment-record" />
@@ -39,12 +39,15 @@ export default {
   },
   computed: {
     secondTitleText() {
+      if (this.cardConfig.statusText === "待支付") {
+        return "保单待支付";
+      }
       return this.cardConfig.detailText
         ? `${this.cardConfig.statusText}...`
         : this.cardConfig.statusText;
     },
     isShowIcon() {
-      return !["13", "14"].includes(this.cardConfig.key);
+      return !["4", "13", "14"].includes(this.cardConfig.key);
     }
   },
   methods: {

src/views/Policy/constants.js

@@ -40,7 +40,7 @@ const statusMap = {
     component: "Guarantee",
     payCostConfig: {
       title: "订单将在今天23:59:59关闭",
-      button: "立即缴费"
+      button: "立即支付"
     }
   },
   "5": {

src/views/Policy/index.less

@@ -236,7 +236,7 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    margin: 0 16px;
+    margin: 0 16px 32px;
     height: 374px;
     background: #FFFFFF;
     border-radius:14px;

src/views/Policy/index.vue

@@ -9,13 +9,16 @@
         <cr-tabbar-item>子女</cr-tabbar-item>
       </cr-tabbar>
     </cr-sticky>
-    <policy-item :type="active"></policy-item>
-    <cr-divider class="policy-divider">我是有底线的</cr-divider>
+    <policy-item
+      :class="{ placeholder: hasPolicy }"
+      :hasPolicy.sync="hasPolicy"
+      :type="active"
+    ></policy-item>
+    <cr-divider v-if="hasPolicy" class="policy-divider">我是有底线的</cr-divider>
     <insurance-recommend></insurance-recommend>
   </div>
 </template>
 <script>
-import policyDefault from "@/assets/images/policy/policy-default@2x.png";
 import InsuranceRecommend from "./modules/InsuranceRecommend";
 import PolicyItem from "./modules/PolicyItem";
 
@@ -28,7 +31,7 @@ export default {
   data() {
     return {
       active: 0,
-      policyDefault
+      hasPolicy: false
     };
   }
 };

src/views/Policy/mixin/policyStatus.mixin.js

@@ -15,7 +15,7 @@ export default {
       let value = _.cloneDeep(STATUS_MAP[key]);
 
       // 保单详情key为“15”时特殊处理
-      if (key === "15") {
+      if (key === "15" && this.policy) {
         value = _.cloneDeep(STATUS_MAP["6"]);
       }
 
@@ -26,7 +26,7 @@ export default {
           parseTime(policy?.refundInfo?.payTime, "{y}-{m}-{d}")
         );
       } else {
-        value.title = value.title.replace("${title}", policy?.insuredUserName || "-");
+        value.title = value.title.replace("${title}", policy?.insuredUserNameMask || "-");
         value.contend = value.contend
           .replace("${start}", parseTime(policy?.policyEffectiveDate, "{y}-{m}-{d}"))
           .replace("${end}", parseTime(policy?.policyEndDate, "{y}-{m}-{d}"))
@@ -37,6 +37,19 @@ export default {
         }
       }
 
+      // 长险保障期限特殊处理
+      if (
+        ["BNZJX001", "HGSX001"].includes(policy.productNo) &&
+        value.contend.includes("保障期限") &&
+        policy?.productItem?.policyPeriod
+      ) {
+        const goods = GOODS_LIST.find(v => v.id === policy.productNo);
+        const policyPeriod = goods.policyPeriod.find(
+          v => v.value === policy.productItem.policyPeriod
+        );
+        value.contend = `保障期限：${policyPeriod.label}`;
+      }
+
       // 校验是否支付成功
       const status = this.getStatus(policy);
       if (["6.2-3", "6.1-3"].includes(status) && this.isFromPay) {

src/views/Policy/modules/InsuranceRecommend.vue

@@ -7,7 +7,7 @@
           <span>30万</span>
           <span>{{ goods.guarantee_title }}</span>
         </p>
-        <p class="Prc-right-desc">{{ goods.guarantee_sub }}</p>
+        <p class="Prc-right-desc">{{ goods.guarantee_sub + "确诊即陪" }}</p>
       </div>
     </div>
     <cr-button class="policy-recommend-button" @click="goNext()">点此投保</cr-button>

src/views/Policy/modules/PolicyItem.vue

@@ -93,6 +93,10 @@ export default {
     type: {
       type: Number,
       default: () => 0
+    },
+    hasPolicy: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -119,6 +123,8 @@ export default {
             this.findKey(v)
         )
         .map(this.getData);
+      const hasPolicy = this.list.length ? true : false;
+      this.$emit("update:hasPolicy", hasPolicy);
     },
     showStatusText(text) {
       return text === "保障中";
@@ -134,7 +140,7 @@ export default {
       } else if (text === "去支付") {
         this.orderInfo = {
           payOrderNo: item?.payInfo?.payOrderNo,
-          payType: item?.payInfo?.payType,
+          payType: item?.payInfo?.payOrderType,
           orderNo: item?.orderNo
         };
         this.goPay();

src/views/User/ApplyClaims/index.less

+@import "../../../style/index.less";
+
+.apply-claims {
+  box-sizing: border-box;
+  padding: 32px 16px 0;
+  min-height: 100%;
+  width: 100%;
+  background: #F6F6F6;
+
+  &-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    box-sizing: border-box;
+    padding: 18px 16px;
+    height: 86px;
+    background: #FFFFFF;
+    border-radius: 14px;
+
+    &:not(last-child) {
+      margin-bottom: 10px;
+    }
+
+    .Ac-container-left {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      height: 100%;
+      .Acc-left-icon {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 52px;
+        height: 15px;
+        background: #FFEAB7;
+        border-radius: 8px 2px 8px 2px;
+        font-size: 11px;
+        color: #EAAD1A;
+        font-weight: 400;
+        line-height: 16px;
+
+        &_illness {
+          background: #FFD8BF;
+          color: #FF6702;
+        }
+
+        &_life {
+          background: #F3F2F1;
+          color: #DDB984;
+        }
+
+        &_casualty {
+          background: #F6E8FF;
+          color: #858AFF;
+        }
+
+        &_medical {
+          background: #FFEAB7;
+          color: #EAAD1A;
+        }
+      }
+
+      .Acc-left-text {
+        font-size: 16px;
+        color: #242629;
+        font-weight: 600;
+        line-height: 22px;
+      }
+    }
+
+    .Ac-container-right {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: 0 !important;
+      width: 76px;
+      height: 28px;
+      background: #F4F5FF !important;
+      border-radius: 8px !important;
+      font-size: 0;
+      @{deep} span {
+		font-size: 14px;
+	    color: #787EFF;
+		font-weight: 400 !important;
+		line-height: 26px;
+      }
+    }
+  }
+
+  &-none {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin: 0 0 32px;
+    height: 374px;
+    background: #FFFFFF;
+    border-radius:14px;
+    .Ac-none-image {
+      width: 143px;
+      height: 143px;
+    }
+    .Ac-none-title {
+      margin: 14px 0 9px 0;
+      font-size: 16px;
+      font-weight: 600;
+      color: #999999;
+    }
+  }
+
+  &-recommend {
+    margin: 0;
+  }
+}
\ No newline at end of file

src/views/User/ApplyClaims/index.vue

+<template>
+  <div class="apply-claims">
+    <template v-if="goodsList.length">
+      <div class="apply-claims-container" v-for="item in goodsList" :key="item.id">
+        <div class="Ac-container-left">
+          <p
+            :class="[
+              { 'Acc-left-icon_medical': item.itype === 'mi' },
+              { 'Acc-left-icon_illness': item.itype === 'cii' },
+              { 'Acc-left-icon_casualty': item.itype === 'ai' },
+              { 'Acc-left-icon_life': item.itype === 'li' },
+              'Acc-left-icon'
+            ]"
+          >
+            {{ item.guarantee_title }}
+          </p>
+          <p class="Acc-left-text">{{ item.title }}</p>
+        </div>
+        <cr-button class="Ac-container-right" @click="showIframe(item.id)">
+          申请理赔
+        </cr-button>
+      </div>
+    </template>
+    <template v-else>
+      <div class="apply-claims-none">
+        <cr-image
+          class="Ac-none-image"
+          round
+          width=""
+          height=""
+          src="@/assets/images/policy/policy-default@2x.png"
+        />
+        <p class="Ac-none-title">暂无可申请理赔的有效保单</p>
+      </div>
+      <insurance-recommend class="apply-claims-recommend"></insurance-recommend>
+    </template>
+    <popup-with-iframe v-model="popupShow" title="理赔流程">
+      <cps-process-detail :process-data="processDetail" />
+    </popup-with-iframe>
+  </div>
+</template>
+<script>
+import goodsList from "@/api/goodsList.mock";
+import bainian from "@/api/detail.bainian.zhongshen";
+import huagui from "@/api/detail.huagui.shouxian";
+import huatai from "@/api/detail.huatai.zhongjixian";
+import taikang from "@/api/detail.taikang.yiliaobaozhang";
+import zhongan from "@/api/detail.zhongan.yiwai";
+import PopupWithIframe from "@/components/PopupWithIframe";
+import CpsProcessDetail from "@/views/Goods/Detail/modules/CpsProcessDetail";
+import { getPolicyList } from "@/api/policy";
+import policyStatusMixin from "@/views/Policy/mixin/policyStatus.mixin";
+import InsuranceRecommend from "@/views/Policy/modules/InsuranceRecommend";
+
+export default {
+  name: "ApplyClaims",
+  mixins: [policyStatusMixin],
+  components: {
+    PopupWithIframe,
+    CpsProcessDetail,
+    InsuranceRecommend
+  },
+  data() {
+    return {
+      goodsList: [],
+      processDetail: [],
+      claims: {
+        TKYLX001: taikang.processDetail,
+        HTDQZJX001: huatai.processDetail,
+        ZAYWX001: zhongan.processDetail,
+        BNZJX001: bainian.processDetail,
+        HGSX001: huagui.processDetail
+      },
+      popupShow: false
+    };
+  },
+  async created() {
+    const policyList = await getPolicyList();
+    this.goodsList = goodsList.filter(goods => {
+      const datafiltered = policyList.filter(
+        policy => policy.productNo === goods.id && ["1", "2"].includes(this.findKey(policy))
+      );
+
+      return datafiltered.length;
+    });
+  },
+  methods: {
+    showIframe(id) {
+      this.popupShow = true;
+      this.processDetail = this.claims[id];
+    }
+  }
+};
+</script>
+<style lang="less" src="./index.less" scoped></style>

src/views/User/HelpCenter/Answer/index.less

+@import "../../../../style/index.less";
+
+.help-center-answer {
+  padding: 18px;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  background: #FFFFFF;
+  .Hc-answer-title {
+  	margin-bottom: 18px;
+  	font-size: 18px;
+    font-weight: 600;
+    color: #242629;
+    line-height: 24px;
+  }
+  .Hc-answer-content {
+  	padding: 16px;
+  	background: #F6F7FA;
+    border-radius: 14px;
+	font-size: 14px;
+    font-weight: 400;
+    color: #333333;
+    line-height: 24px;
+  }
+}
\ No newline at end of file

src/views/User/HelpCenter/Answer/index.vue

+<template>
+  <div class="help-center-answer">
+    <h2 class="Hc-answer-title">{{ qa.q }}</h2>
+    <p class="Hc-answer-content">
+      {{ qa.a }}
+    </p>
+  </div>
+</template>
+<script>
+import QA from "@/api/helpCenter";
+
+export default {
+  name: "HelpCenterAnswer",
+  data() {
+    return {
+      qa: {}
+    };
+  },
+  created() {
+    const { type, id } = this.$route.params;
+    if (Array.isArray(QA[type])) {
+      this.qa = QA[type].find(v => v.id === +id);
+    } else {
+      this.qa = Object.values(QA[type])
+        .flat()
+        .find(v => +id === v.id);
+    }
+  }
+};
+</script>
+<style lang="less" src="./index.less" scoped></style>

src/views/User/HelpCenter/Subsection/index.less

+@import "../../../../style/index.less";
+
+.help-center-subsection {
+  padding: 20px;
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 100%;
+  background: #FFFFFF;
+  .Hc-subsection-card {
+    margin-bottom: 24px;
+  }
+}
\ No newline at end of file

src/views/User/HelpCenter/Subsection/index.vue

+<template>
+  <div class="help-center-subsection">
+    <help-center-card
+      v-for="item in qaList"
+      :key="item.title"
+      :content="item.content"
+      :title="item.title"
+      :type="type"
+      class="Hc-subsection-card"
+    ></help-center-card>
+  </div>
+</template>
+<script>
+import QA from "@/api/helpCenter";
+import HelpCenterCard from "../modules/HelpCenterCard";
+
+export default {
+  name: "Subsection",
+  components: {
+    HelpCenterCard
+  },
+  data() {
+    return {
+      type: {},
+      qaList: {}
+    };
+  },
+  created() {
+    this.type = this.$route.params.type;
+    this.qaList = Object.keys(QA[this.type]).map(v => ({
+      title: v,
+      content: QA[this.type][v]
+    }));
+  }
+};
+</script>
+<style lang="less" src="./index.less" scoped></style>

src/views/User/HelpCenter/index.less

@@ -44,5 +44,59 @@
   	padding: 15px 20px 0;
   	background: #FFFFFF;
     border-radius: 32px 32px 0 0;
+
+    .Hc-container-insurance {
+      margin: 31px 0 29px;
+      .Hcc-insurance-item {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0 16px;
+        height:66px;
+        background: #F6F7FA;
+        border-radius: 14px;
+        
+        &:not(:last-child) {
+          margin-bottom: 10px;
+        }
+
+        .Hcci-item-text {
+          font-size: 16px;
+          color: #242629;
+          font-weight: 600;
+          line-height: 22px;
+        }
+        .Hcci-item-icon {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          width: 52px;
+          height: 15px;
+          background: #FFEAB7;
+          border-radius: 8px 2px 8px 2px;
+          font-size: 11px;
+          color: #EAAD1A;
+          font-weight: 400;
+          line-height: 16px;
+
+          &_illness {
+            background: #FFD8BF;
+            color: #FF6702;
+          }
+          &_life {
+            background: #F3F2F1;
+            color: #DDB984;
+          }
+          &_casualty {
+            background: #F6E8FF;
+            color: #858AFF;
+          }
+          &_medical {
+            background: #FFEAB7;
+            color: #EAAD1A;
+          }
+        }
+      }
+    }
   }
 }
\ No newline at end of file

src/views/User/HelpCenter/index.vue

@@ -14,48 +14,54 @@
       />
     </div>
     <div class="help-center-container">
-      <collapse :collapse-data="qaInfo" :more-btn="false" />
+      <help-center-card :content="qaList" type="COMPOSITE"></help-center-card>
+      <div class="Hc-container-insurance">
+        <div
+          class="Hcc-insurance-item"
+          v-for="item in goodsList"
+          :key="item.id"
+          @click="goSubsection(item.id)"
+        >
+          <p class="Hcci-item-text">{{ item.title }}</p>
+          <p
+            :class="[
+              { 'Hcci-item-icon_medical': item.itype === 'mi' },
+              { 'Hcci-item-icon_illness': item.itype === 'cii' },
+              { 'Hcci-item-icon_casualty': item.itype === 'ai' },
+              { 'Hcci-item-icon_life': item.itype === 'li' },
+              'Hcci-item-icon'
+            ]"
+          >
+            {{ item.guarantee_title }}
+          </p>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 <script>
-import Collapse from "@/components/Collapse";
-
-const qaInfo = [
-  {
-    q: "这个产品的等待期是多久？",
-    a: "本产品的等待期为90天,意外及续保无等待期。"
-  },
-  {
-    q: "这款产品提供了哪些保障？",
-    a:
-      "本产品对人一生中可能罹患的99%以上的100种重大疾病提供保障，同时还有40种轻症保障也包含在内。在保险期间内，被保险人因意外伤害或在等待期后因疾病初次确诊罹患本产品定义的重大疾病或轻症的，即可获得一笔保险补偿。"
-  },
-  {
-    q: "被保险人有哪些限制？",
-    a: "可以为出生满30天-60周岁（含）身体健康，且符合健康告知提及状况的本人、配偶、子女或父母投保。"
-  },
-  {
-    q: "理赔后是否可以续保？需要重新完成健康告知吗？",
-    a:
-      "无理赔或者已理赔过轻症的第二年可以续保；已理赔过重症的第二年不可以续保；续保无需重新填写健康告知。"
-  },
-  {
-    q: "如何在华泰官网进行保单验真？",
-    a:
-      "请登录投保成功短信中提示的华泰官网查询网http://agt.ehuatai.com/nonautoquery/。填写登录信息时，类别选择“家庭财产、意外伤害保险”，保单号在投保成功的短信中，密码填写被保险人身份证号，即可登录查询保单承保信息。"
-  }
-];
+import goodsList from "@/api/goodsList.mock";
+import QA from "@/api/helpCenter";
+import HelpCenterCard from "./modules/HelpCenterCard";
 
 export default {
   name: "HelpCenter",
   components: {
-    Collapse
+    HelpCenterCard
   },
   data() {
     return {
-      qaInfo
+      qaList: QA.COMPOSITE,
+      goodsList
     };
+  },
+  methods: {
+    goAnswer(type, id) {
+      this.$router.push(`/user/help-center/answer/${type}/${id}`);
+    },
+    goSubsection(type) {
+      this.$router.push(`/user/help-center/subsection/${type}`);
+    }
   }
 };
 </script>

src/views/User/HelpCenter/modules/HelpCenterCard.vue

+<template>
+  <div class="help-center-card">
+    <p class="Hc-card-title" v-if="title">{{ title }}</p>
+    <div
+      v-for="item in content"
+      :key="item.q"
+      class="Hc-card-container"
+      @click="goAnswer(type, item.id)"
+    >
+      <div class="Hc-container-item">
+        <div class="Hcc-item-left">
+          <i class="Hcci-left-icon">Q</i>
+          <span class="Hcci-left-text">{{ item.q }}</span>
+        </div>
+        <svg-icon icon-class="triangle-down" class="Hcc-item-right" />
+      </div>
+      <cr-divider :hairline="false" :style="{ background: '#EBEBEB' }" />
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "HelpCenterCard",
+  props: {
+    type: {
+      type: String,
+      default: ""
+    },
+    title: {
+      type: String,
+      default: ""
+    },
+    content: {
+      type: Array,
+      default: () => []
+    }
+  },
+  methods: {
+    goAnswer(type, id) {
+      this.$router.push(`/user/help-center/answer/${type}/${id}`);
+    }
+  }
+};
+</script>
+<style scoped lang="less">
+@import "../../../../style/index.less";
+
+.help-center-card {
+  .Hc-card-title {
+    padding: 8px 0 5px;
+    font-size: 18px;
+    color: #242629;
+    font-weight: 600;
+    line-height: 24px;
+  }
+  .Hc-card-container {
+    .Hc-container-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      height: 24px;
+      color: @black;
+      font-weight: @font-weight-bold;
+      padding: @padding-md 0;
+      .Hcc-item-left {
+        display: flex;
+        align-items: center;
+        .Hcci-left-icon {
+          font-size: @font-size-12;
+          font-weight: @font-weight-bold;
+          font-style: normal;
+          line-height: 22px;
+          height: 20px;
+          text-align: center;
+          width: 20px;
+          border-radius: @border-radius-sm / 4 @border-radius-md / 2;
+          background-color: @orange-light;
+          box-shadow: 0px 6px 25px 0px rgba(255, 200, 66, 0.2);
+        }
+        .Hcci-left-text {
+          margin-top: 2px;
+          margin-left: 10px;
+          font-weight: @font-weight-bold;
+          font-size: @font-size-14;
+          line-height: 24px;
+        }
+      }
+      .Hcc-item-right {
+        transform: rotate(-90deg);
+        height: 17px;
+        width: 17px;
+        transition: all 0.2s linear;
+      }
+    }
+  }
+}
+</style>

src/views/User/index.vue

@@ -30,7 +30,7 @@
         <span class="user-insurance-list-title">全部保单</span>
       </div>
       <div class="user-insurance-divider"></div>
-      <div class="user-insurance-list" @click="go()">
+      <div class="user-insurance-list" @click="go('/user/apply-claims')">
         <div class="user-insurance-list-icon">
           <svg-icon icon-class="claims-apply" class-name="user-insurance-list-icon-svg" />
           <!-- <div class="user-insurance-list-icon-dot"></div> -->
@@ -50,14 +50,15 @@
         >
           <svg-icon slot="right-icon" icon-class="arrow" class-name="user-service-main-item-svg" />
         </cr-cell>
-        <cr-cell
-          title="客服电话"
-          :icon="customerService"
-          class="user-service-main-item"
-          @click="go()"
-        >
-          <svg-icon slot="right-icon" icon-class="arrow" class-name="user-service-main-item-svg" />
-        </cr-cell>
+        <a :href="`tel:${tel}`">
+          <cr-cell title="客服电话" :icon="customerService" class="user-service-main-item">
+            <svg-icon
+              slot="right-icon"
+              icon-class="arrow"
+              class-name="user-service-main-item-svg"
+            />
+          </cr-cell>
+        </a>
       </div>
     </div>
     <div class="user-logo">
@@ -74,6 +75,7 @@ import help from "@/assets/images/user/help@2x.png";
 import UserFamily from "./modules/UserFamily";
 import Tabbar from "@/components/Tabbar";
 import { getPolicyList } from "@/api/policy";
+import settings from "@/api/settings";
 import localStorage from "@/service/localStorage";
 
 export default {
@@ -88,7 +90,8 @@ export default {
       help,
       isFixed: false,
       showLayer: false,
-      showDot: false
+      showDot: false,
+      tel: settings.tel
     };
   },
   computed: {

src/views/User/modules/UserFamily.vue

@@ -57,13 +57,6 @@
           </div>
           <div class="Ufii-middle-footer">{{ item.guarantee_sub }}</div>
         </div>
-        <!-- <p
-          class="user-family-insurance-item-right"
-          v-if="!item.productNo"
-          @click.stop="go('/goods/detail', item)"
-        >
-          开启保障
-        </p> -->
         <cr-button
           class="user-family-insurance-item-right"
           v-if="!item.productNo"