teature: 添加详情弹窗

src/api/goodsList.mock.js

@@ -31,6 +31,7 @@ export default [
     guarantee_title: "医疗保障",
     guarantee_sub: "看病报销医药费,最高600万",
     company: "泰康在线",
+    company_name: "泰康在线财产保险股份有限公司",
     payType: [
       { label: "月缴", value: 1 },
       { label: "一次交清", value: 2 }
@@ -57,6 +58,7 @@ export default [
     guarantee_title: "重疾保障",
     guarantee_sub: "100种重疾+40种轻症确诊即赔",
     company: "华泰财险",
+    company_name: "华泰财产保险有限公司",
     payType: [
       { label: "月缴", value: 1 },
       { label: "一次交清", value: 2 }
@@ -83,6 +85,7 @@ export default [
     guarantee_title: "意外保障",
     guarantee_sub: "意外风险覆盖全,保额最高100万",
     company: "众安保险",
+    company_name: "众安在线财产保险股份有限公司",
     payType: [],
     policyPeriod: [],
     paymentInstruction:
@@ -107,6 +110,7 @@ export default [
     guarantee_title: "重疾保障",
     guarantee_sub: "终身保障155种重疾，最多赔付6次",
     company: "百年人寿",
+    company_name: "",
     payType: [{ label: "年缴", value: 1 }],
     policyPeriod: [
       { label: "保至70周岁", value: 1 },
@@ -133,6 +137,7 @@ export default [
     guarantee_title: "人寿保障",
     guarantee_sub: "最高350万保额,顶梁柱必备",
     company: "华贵人寿",
+    company_name: "华贵人寿保险股份有限公司",
     payType: [{ label: "年缴", value: 1 }],
     policyPeriod: [
       { label: "10年", value: 1 },

src/api/settings.js

@@ -9,6 +9,7 @@ export default {
     title: "自动续保协议",
     url: "https://mangguo-contract.qthbx.com/zi-dong-xu-bao-fu-wu-xie-yi-v1/"
   },
+  customerNotificationUrl: "https://mangguo-contract.qthbx.com/ke-hu-gao-zhi-shu-v1/",
   consultant: {
     name: "赵玉龙",
     role: "金牌保险顾问",

src/views/Goods/Detail/index.vue

@@ -5,6 +5,7 @@
     <ai-detail v-if="detailType === 'ai'" />
     <li-detail v-if="detailType === 'li'" />
     <advisor-rec-dialog :value="showRec" @close="pageBack" />
+    <instruction-modal v-model="showInstruction" :items="items" />
   </div>
 </template>
 
@@ -18,6 +19,14 @@ import { getCulOrder } from "@/api/consultant";
 import localStorage from "@/service/localStorage";
 import { isXyqb } from "@/service/validation";
 import { mapActions, mapState } from "vuex";
+import InstructionModal from "./modules/InstructionModal";
+import goodsList from "@/api/goodsList.mock";
+
+const items = [
+  { title: "投保操作记录", content: "方便回溯管理让用户更放心" },
+  { title: "保险条款阅读", content: "请仔细阅读保险条款与" },
+  { title: "合作公司披露", content: "" }
+];
 
 export default {
   name: "GoodsDetail",
@@ -26,7 +35,8 @@ export default {
     miDetail,
     aiDetail,
     liDetail,
-    AdvisorRecDialog
+    AdvisorRecDialog,
+    InstructionModal
   },
   data() {
     return {
@@ -34,14 +44,21 @@ export default {
       showRec: false,
       noOrder: true,
       userClickState: false,
-      userBackState: false
+      userBackState: false,
+      showInstruction: true,
+      items
     };
   },
+  created() {
+    this.items[2].content =
+      goodsList.find(goods => goods.id === this.$route.query.id)?.company_name || "";
+  },
   computed: {
     ...mapState(["showAuthXyqb"])
   },
   beforeRouteLeave(to, from, next) {
     const blackList = ["Goods", "Home", "Detail", "ConsultantPlan", "User"];
+    this.showInstruction = false;
     if (isXyqb && this.showAuthXyqb == 2) {
       next(false);
       return;

src/views/Goods/Detail/modules/InstructionModal.vue

+<template>
+  <div>
+    <cr-popup v-model="value" get-container="body" @close="onClose" class="intro-popup">
+      <div class="intro-popup-container">
+        <div class="intro-popup-title">
+          <cr-image
+            class="Ip-title-image"
+            round
+            width=""
+            height=""
+            src="@/assets/images/goods/detail/instruction@2x.png"
+          />
+        </div>
+        <div class="intro-popup-desc">
+          提示您即将进入投保流程，为确保流程顺利，请了解以下信息：
+        </div>
+        <div class="intro-popup-box">
+          <div class="Ip-box-item" v-for="(item, index) in items" :key="index">
+            <div class="Ipb-item-left">{{ index + 1 }}</div>
+            <div class="Ipb-item-right">
+              <p class="Ipbi-right-title">
+                {{ item.title }}
+              </p>
+              <p class="Ipbi-right-content">
+                {{ item.content
+                }}<a v-if="index === 1" href="javascript:;" @click="popupShow = !popupShow"
+                  >客户告知书</a
+                >
+              </p>
+            </div>
+          </div>
+        </div>
+        <div class="intro-popup-save">
+          <cr-button class="Ip-save-button" @click="close()">确认</cr-button>
+        </div>
+        <p class="intro-popup-tips">由全天候保险代理股份有限公司提供保险中介服务</p>
+      </div>
+    </cr-popup>
+    <popup-with-iframe v-model="popupShow" title="客户告知书" :url="customerNotificationUrl" />
+  </div>
+</template>
+
+<script>
+import settings from "@/api/settings";
+import PopupWithIframe from "@/components/PopupWithIframe";
+
+export default {
+  name: "InstructionModal",
+  components: {
+    PopupWithIframe
+  },
+  props: {
+    value: {
+      type: Boolean,
+      default: false
+    },
+    items: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      popupShow: false,
+      customerNotificationUrl: settings.customerNotificationUrl
+    };
+  },
+  watch: {},
+  methods: {
+    close() {
+      this.$emit("input", false);
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+@import "../../../../style/index.less";
+
+.intro-popup {
+  box-sizing: border-box;
+  padding: 27px 20px;
+  width: 300px;
+  height: 453px;
+  background: linear-gradient(180deg, #ffc842 0%, #ffffff 20%);
+  border-radius: 14px;
+  &-title {
+    display: flex;
+    justify-content: center;
+    .Ip-title-image {
+      width: 156px;
+      height: 39px;
+    }
+  }
+  &-desc {
+    margin: 15px auto 17px;
+    width: 260px;
+    height: 48px;
+    font-size: 14px;
+    font-weight: 400;
+    color: #666666;
+    line-height: 24px;
+  }
+  &-box {
+    box-sizing: border-box;
+    margin: 0 auto;
+    padding: 16px;
+    width: 260px;
+    height: 182px;
+    background: #f6f7fa;
+    border-radius: 8px;
+    .Ip-box-item {
+      display: flex;
+      align-items: center;
+      &:not(:first-child) {
+        margin-top: 12px;
+      }
+      .Ipb-item-left {
+        margin-right: 12px;
+        width: 19px;
+        height: 19px;
+        background: #ffc842;
+        border-radius: 50%;
+        box-shadow: 0px 6px 25px 0px rgba(255, 200, 66, 0.2);
+        font-size: 12px;
+        font-weight: 600;
+        color: #242629;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+      .Ipb-item-right {
+        .Ipbi-right-title {
+          width: 88px;
+          height: 24px;
+          font-size: 14px;
+          font-weight: 600;
+          color: #333333;
+          line-height: 24px;
+        }
+        .Ipbi-right-content {
+          height: 18px;
+          font-size: 12px;
+          font-weight: 400;
+          color: #666666;
+          line-height: 18px;
+        }
+      }
+    }
+  }
+  &-save {
+    display: flex;
+    justify-content: center;
+    margin: 16px;
+    .Ip-save-button {
+      width: 260px;
+      height: 52px;
+      background: #ffc842 !important;
+      border-radius: 14px !important;
+      font-size: 16px;
+      font-weight: 600;
+      color: #333333;
+      line-height: 22px;
+    }
+  }
+  &-tips {
+    width: 100%;
+    text-align: center;
+    height: 13px;
+    font-size: 11px;
+    font-weight: 400;
+    color: #999999;
+    line-height: 13px;
+  }
+}
+</style>

src/views/Goods/index.vue

@@ -24,6 +24,7 @@ import AiTestTip from "./modules/AiTestTip";
 import GoodList from "@/components/GoodList/index";
 import Tabbar from "@/components/Tabbar";
 import copyright from "@/components/Copyright";
+import InstructionModal from "./Detail/modules/InstructionModal";
 
 const categoryList = [
   {
@@ -54,7 +55,8 @@ export default {
     AiTestTip,
     GoodList,
     Tabbar,
-    copyright
+    copyright,
+    InstructionModal,
   },
   data() {
     return {
@@ -62,7 +64,8 @@ export default {
       showLayer: false,
       goodsList: [],
       mongoToken: localStorage.get("mongoToken"),
-      goodsLink: ""
+      goodsLink: "",
+      showInstruction: true
     };
   },
   watch: {