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

src/api/helpCenter.js

+export default {
+  COMPOSITE: [
+    {
+      id: 1,
+      q: "芒果保险有保险经营的牌照吗？",
+      a:
+        "芒果保险的运营主体是「全天候保险代理股份有限公司」，是经中国保监会批准的全国性保险专业中介机构，已经取得经营保险代理业务许可证。"
+    },
+    {
+      id: 2,
+      q: "在哪查看已经投保成功的保单？",
+      a:
+        "关注「芒果保险」公众号，在您投保成功后会收到芒果保险的消息推送。您也可以进入【「芒果保险」公众号】-【我的】-【全部保单】中查询保单。"
+    },
+    {
+      id: 3,
+      q: "理赔是否能够得到保障？",
+      a:
+        "请您放心，您享受的理赔服务和增值服务均由保险公司统一提供得，不会因购买渠道不同而区别对待。如对保险公司的理赔服务有任何意见及建议均可以联系「芒果保险」客服。"
+    }
+  ],
+  TKYLX001: {
+    投保: [
+      {
+        id: 4,
+        q: "1万元免赔额是什么意思？",
+        a:
+          "重大疾病医疗，无免赔额；一般医疗，有1万元免赔额，是指您个人支付累计超过1万元的部分由万家保·百万医疗险报销，1万元以下由个人承担（可由您单位或自己所投保的其他商业保险报销）"
+      },
+      {
+        id: 5,
+        q: "为什么有30天等待期？",
+        a:
+          "等待期的设置是为了保证健康客户的投保利益，防止少数带病人群投保导致保险费率飙升。本产品中意外住院的等待期是0天；疾病住院的等待期是30天，续保是无等待期的。"
+      },
+      {
+        id: 6,
+        q: "万家保·百万医疗险的保障期限是多长时间？",
+        a: "本产品的保障期限为1年，从投保成功后的次日零时开始生效。"
+      },
+      {
+        id: 7,
+        q: "有社保和无社保有什么区别？",
+        a:
+          "本产品有无社保均可投保，但投保保费有所不同。若以有社保身份投保，但未以社保身份就诊并结算，将按照赔付金额的60%进行赔付。"
+      },
+      {
+        id: 8,
+        q: "我目前有某种疾病和症状，可以投保吗？",
+        a:
+          "如果存在某种体征状况，建议您仔细阅读《健康告知》， 满足健康告知即可正常投保。 如果个人无法确认是否满足，建议您联系保险顾问，并将您的情况如实告知， 以免影响权益。"
+      }
+    ],
+    理赔: [
+      {
+        id: 9,
+        q: "如果健康告知我没有如实回答，理赔时怎么办？",
+        a:
+          "如果隐瞒或不如实完成健康告知，保险公司有权根据《保险法》规定解除保险合同，对于合同解除前发生的任何事故，保险公司可不承担任何责任。"
+      },
+      {
+        id: 10,
+        q: "完成理赔后，医疗费收据原件可以退还吗？",
+        a:
+          "完成理赔后的医疗费用发票原件不可退还，但当你的赔付金额未达到你实际支出的医疗费用全额时，可以申请医疗费用分割单。"
+      },
+      {
+        id: 11,
+        q: "如果发生理赔是否可以续保？",
+        a:
+          "如没有不如实告知、欺诈等行为，无论是否理赔过均可续保，且续保时不会单独调整被保险人的保险费。"
+      },
+      {
+        id: 12,
+        q: "万家保·百万医疗险，在理赔时有病种限制吗？",
+        a:
+          "万家保·百万医疗险对病种没有限制，无论是因为普通疾病（如阑尾炎、胃溃疡等）或意外事故（如佳交通事故、烧烫伤等）治疗所花费的医疗费用，还是重大疾病治疗所花费的医疗费用均可报销。"
+      }
+    ],
+    其他: [
+      {
+        id: 13,
+        q: "中途如何退保？",
+        a: `关注“泰康在线保险”微信公众号，通过【我的】-【我的保单】查询保单信息并自助申请退保。审核通过实时退保，到账时间以银行为准（一般2~3个工作日）。保单生效次日起15天内退保不扣除任何费用，保单生效15天后会根据保障时间扣除手续费。
+				手续费规则：
+				「一次交清」
+				未满期保险费=保险费×[1-(保险单已经过天数/保险期间天数)] 
+				「月交保费」：
+				未满期保险费=当月保险费×[1-(当月已经过天数/当月总天数)] 
+				经过天数不足一天的按一天计算。
+				若本合同已发生保险金赔偿，则不退费。`
+      },
+      {
+        id: 14,
+        q: "选择月交保费，未按时缴纳保费怎么办？",
+        a:
+          "选择月交保费，应当在每个月约定支付日交纳各月的保险费。若未按约定交纳,我们允许在催告之日起30日(含第30日)内补交保费，如在此30日内发生保险事故,我们仍按照合同约定赔付保险金，但需扣減你欠交的保险费。若在我们催告之日起30日(含第30日)内未补交保费，本合同自上述期限届满之日的24时起效力终止，我们将不再承担保险责任。"
+      },
+      {
+        id: 15,
+        q: "保险到期了如何续保？",
+        a:
+          "如果担心忘记续保，建议在购买保险时，选择「自动续保功能」。如未选择自动续保，在保险合同期满前30天、前15天、前7天、期满日当天，芒果保险将通过短信，微信等方式提醒给投保人完成续保。续保无等待期,也无需再健康告知。"
+      }
+    ]
+  },
+  HTDQZJX001: {
+    投保: [
+      {
+        id: 16,
+        q: "这款产品提供了哪些保障？",
+        a:
+          "本产品对人一生中可能罹患的99%以上的100种重大疾病提供保障，同时还有40种轻症保障也包含在内。在保险期间内，被保险人因意外伤害或在等待期后因疾病初次确诊罹患本产品定义的重大疾病或轻症的，即可获得一笔保险补偿。"
+      },
+      {
+        id: 17,
+        q: "不同年龄人群购买这款产品，保额有限制吗？",
+        a:
+          "本产品可投保年龄区间为30天~60周岁，最高可投保保额为重疾30万+6万轻症。而50~60周岁的被保人，最高可投保保额为重疾20万+4万轻症。"
+      },
+      {
+        id: 18,
+        q: "我目前有某种疾病和症状，可以投保吗？",
+        a:
+          "如果存在某种体征状况，建议您仔细阅读《健康告知》， 满足健康告知即可正常投保。 如果个人无法确认是否满足，建议您联系保险顾问，并将您的情况如实告知， 以免影响权益。"
+      },
+      {
+        id: 19,
+        q: "本产品有职业限制吗？",
+        a:
+          "目前除外的职业类型有：接触放射线或放射性物质，接触化学、易燃或易爆物质，有毒及危险物质生产运输，参与矿物或煤炭开采，暴露于烟尘或粉尘，参加高空、海洋、水下、地下、隧道、桥梁作业或活动，从事渔业捕捉，森林砍伐业或相关作业，森林防火，建筑施工，机械设备制造加工操作，金属/合金冶炼，3吨及3吨以上重型卡车、砂石车、液化气化油罐车驾驶及随车工作，高压电、电缆作业，拆船工作，私人保镖，战地记者，驯兽师，无固定职业，消防队员、特种兵、军事院校学生、入伍受训新兵、消防爆破、缉毒及防爆警察，参与镇暴或军警行动，前线军人。"
+      }
+    ],
+    理赔: [
+      {
+        id: 20,
+        q: "如果健康告知我没有如实回答，理赔时怎么办？",
+        a:
+          "如果隐瞒或不如实完成健康告知，保险公司有权根据《保险法》规定解除保险合同，对于合同解除前发生的任何事故，保险公司可不承担任何责任。"
+      },
+      {
+        id: 21,
+        q: "如何申请理赔？",
+        a:
+          "如需申请理赔， 请拨打华泰财险400-609-5509进行报案。华泰财险会有理赔专员1对1指导理赔事宜。 "
+      }
+    ],
+    其他: [
+      {
+        id: 22,
+        q: "中途如何退保？",
+        a: `您可以关注“华泰财险”的微信公众号，点【保单服务】-【保单查询】-【输入“保单号+证件号”】绑定保单。绑定成功后，点击【更多功能】-【退保】-【上传证件信息】（可查进度获取最新进展）。 保单生效次日起7天内退保不扣除任何费用，保单生效7天后会根据保障时间扣除手续费。手续费规则：
+        「一次交清」
+        未满期保险费=保险费×[1-(保险单已经过天数/保险期间天数)] ×(1-25%)
+        「月交保费」：
+        未满期保险费=当月保险费×[1-(当月已经过天数/当月总天数)]  ×(1-25%)
+        经过天数不足一天的按一天计算。
+        若本合同已发生保险金赔偿，则不退费。`
+      },
+      {
+        id: 23,
+        q: "选择月交保费，未按时缴纳保费怎么办？",
+        a:
+          "选择月交保费，应当在每个月约定支付日交纳各月的保险费。若未按约定交纳,我们允许在催告之日起15日(含第15日)内补交保费，如在此15日内发生保险事故,我们仍按照合同约定赔付保险金，但需扣減你欠交的保险费。若在我们催告之日起15日(含第15日)内未补交保费，本合同自上述期限届满之日的24时起效力终止，我们将不再承担保险责任。"
+      },
+      {
+        id: 24,
+        q: "保险到期了如何续保？",
+        a:
+          "如果担心忘记续保，建议在购买保险时，选择「自动续保功能」。如未选择自动续保，在保险合同期满前30天、前15天、前7天、期满日当天，芒果保险将通过短信，微信等方式提醒给投保人完成续保。续保无等待期,也无需再健康告知。"
+      }
+    ]
+  },
+  ZAYWX001: {
+    投保: [
+      {
+        id: 25,
+        q: "什么是意外伤害？",
+        a:
+          "意外伤害是指以外来的、突发的、非本意的和非疾病的客观事件为直接且单独的原因致使身体受到的伤害，比如交通事故、游玩溺水、跌倒摔伤、电梯坠落等。"
+      },
+      { id: 26, q: "这款产品什么时候生效？", a: "投保成功并缴纳保费后的第7日零时。" },
+      {
+        id: 27,
+        q: "我已经购买了其他意外险，还可以再买这款吗？",
+        a: "本产品和其他意外险保险可分别赔付，且保多少赔多少，多重购买可获得多重保障。"
+      }
+    ],
+    理赔: [
+      {
+        id: 28,
+        q: "如果保险期间发生伤残理赔，是否可以续保？",
+        a:
+          "如果保险年度内。伤残责任理赔金额累计达到本项责任限额，则保险人对被保人所负残疾保险金给付责任终止，且不再接受续保。如果发生伤残理赔，但理赔金额未达到本项责任限额，则可以继续续保。"
+      }
+    ],
+    其他: [
+      {
+        id: 29,
+        q: "中途如何退保？",
+        a: `如需退保，可在支付宝搜索“众安保险服务”，关注“众安保险服务”小程序，自助申请退保。如需办理其他批改，请拨打客服电话1010-9955，根据客服指引，提交材料办理。保单生效前或生效后10天内申请退保并递交齐全退保资料的，不扣除任何费用。保单生效10天后会根据保障时间扣除手续费。
+
+        手续费规则：
+
+        「一次交清」
+
+        未满期保险费=保险费×[1-(保险单已经过天数/保险期间天数)] ×（1-30%）
+
+        若本合同已发生保险金赔偿，则不退费。
+
+        经过天数不足一天的按一天计算。`
+      },
+      {
+        id: 30,
+        q: "保险到期了如何续保？",
+        a:
+          "如果担心忘记续保，建议在购买保险时，选择「自动续保功能」。如未选择自动续保，在保险合同期满前30天、前15天、前7天、期满日当天，芒果保险将通过短信，微信等方式提醒给投保人完成续保。续保无等待期,也无需再健康告知。"
+      }
+    ]
+  },
+  BNZJX001: {
+    投保: [
+      {
+        id: 31,
+        q: "这款产品有犹豫期吗？",
+        a: "这款产品的犹豫期为15天，如果犹豫期内退保，将全额退还已交保费。"
+      },
+      { id: 32, q: "被保人有年龄限制吗？", a: "本产品的被保人年龄限制为:出生满28天~50周岁。" },
+      {
+        id: 33,
+        q: "什么是投保人豁免？",
+        a:
+          "投保人豁免是指，等待期90天后，投保人身故/全残，或确诊初次罹患合同约定的重疾、中症、轻症，豁免确诊日后主合同及其附加的长期保险合同余下未来各期保险费。"
+      },
+      {
+        id: 34,
+        q: "轻症疾病赔付后还可以获得重疾保障吗？",
+        a:
+          "若申请轻症疾病保险金时，被保险人所患疾病未达到重大疾病保险金给付条件，则在获得轻症疾病保险金赔付后重大疾病保险金责任依然有效。且一旦罹患轻症疾病还可豁免未交保险费。"
+      },
+      { id: 35, q: "保险期间有哪些选择？", a: "保险期间有【保至70周岁】和【终身】2种选择。" }
+    ],
+    理赔: [
+      {
+        id: 36,
+        q: "如果健康告知我没有如实回答，理赔时怎么办？",
+        a:
+          "如果隐瞒或不如实完成健康告知，保险公司有权根据《保险法》规定解除保险合同，对于合同解除前发生的任何事故，保险公司可不承担任何责任。"
+      }
+    ],
+    其他: [
+      {
+        id: 37,
+        q: "中途如何退保？",
+        a:
+          "关注“百年人寿一保通”微信公众号，通过【微·自助】，进行身份验证后按照指引操作退保即可。犹豫期内退保不收取任何费用，无息退还所交保费。犹豫期后退保，本公司自收到退保申请之日起30日内向您退还保单的现金价值。您犹豫期后退保可能会遭受一定损失。"
+      }
+    ]
+  },
+  HGSX001: {
+    投保: [
+      {
+        id: 38,
+        q: "这款产品有犹豫期吗？",
+        a: "这款产品的犹豫期为20天，如果犹豫期内退保，将全额退还已交保费。"
+      },
+      {
+        id: 39,
+        q: "被保人和受益人有年龄限制吗？",
+        a: "本产品的被保人年龄范围为18~60周岁。受益人无年龄限制。"
+      },
+      {
+        id: 40,
+        q: "保障期限是多久？",
+        a:
+          "本产品支持保10年/20年/30年和保至60岁/65岁/70岁共6种保障期限。 投保年龄+投保年限不得超过70周岁。"
+      }
+    ],
+    理赔: [
+      {
+        id: 41,
+        q: "发生事故多长时间内申请理赔？",
+        a:
+          "如果发生保险事故，受益人或紧急联系人在30天内通过华贵保险的官方网站、微信公众号，或拨打客服电话400-6841-888进行报案。"
+      },
+      { id: 42, q: "受益人身故有赔付吗？", a: "受益人事故是没有赔付的。" }
+    ],
+    其他: [
+      {
+        id: 43,
+        q: "如何办理保单退保？",
+        a:
+          "关注“华贵保险在线”微信公众号，通过【微服务】-【退保】，进行身份验证后按照指引操作退保即可。犹豫期内退保不收取任何费用，无息返还所交保费。犹豫期后退保，本公司自收到退保申请之日起30日内向您退还保单的现金价值。您犹豫期后退保可能会遭受一定损失。"
+      },
+      {
+        id: 44,
+        q: "受益人和受益比例可以更改吗？",
+        a: "如遇特殊情况可以申请变更受益人和受益比例，受益比例相加之和应为100%。"
+      }
+    ]
+  }
+};

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" />
+        <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"