feat: 详情联调

src/api/goodsList.mock.js

@@ -58,6 +58,26 @@ export default [
     ],
     policyPeriod: []
   },
+  {
+    id: "ZAYWX001",
+    itype: "ai",
+    scope: [1, 2, 3],
+    img: good03,
+    title: "万家保·综合意外险",
+    sub: "意外风险覆盖全，最高100万保额",
+    glory: "开车必备",
+    price: "145",
+    unit: "年起",
+    allow: true,
+    termType: "short",
+    icon_closed: casualty_closed,
+    icon: casualty,
+    guarantee_title: "意外保障",
+    guarantee_sub: "意外风险覆盖全,最高100万保额",
+    company: "众安保险",
+    payType: [],
+    policyPeriod: []
+  },
   {
     id: "BNZJX001",
     itype: "cii",
@@ -82,26 +102,6 @@ export default [
       { label: "保至终身", value: "2" }
     ]
   },
-  {
-    id: "ZAYWX001",
-    itype: "ai",
-    scope: [1, 2, 3],
-    img: good03,
-    title: "万家保·综合意外险",
-    sub: "意外风险覆盖全，最高100万保额",
-    glory: "开车必备",
-    price: "145",
-    unit: "年起",
-    allow: true,
-    termType: "short",
-    icon_closed: casualty_closed,
-    icon: casualty,
-    guarantee_title: "意外保障",
-    guarantee_sub: "意外风险覆盖全,最高100万保额",
-    company: "众安保险",
-    payType: [],
-    policyPeriod: []
-  },
   {
     id: "HGSX001",
     itype: "li",

src/api/product.js

@@ -6,9 +6,9 @@ export const list = param => {
 };
 
 // 产品详情
-export const detail = param => {
-  return req.get("product/detail", param);
-};
+// export const detail = param => {
+//   return req.get("product/detail", param);
+// };
 
 // 产品算价
 export const trail = param => {

src/api/user.js

@@ -7,7 +7,9 @@ export const loginByPhone = param => {
 
 // 信用钱包用户自动登录
 export const authByxyqb = param => {
-  return req.get("xyqb_user_info", param);
+  return req.get("user/info/xyqb", {
+    params: param
+  });
 };
 
 // 微信用户获取openid

src/components/Modal.vue

@@ -6,7 +6,7 @@
     get-container="body"
     close-icon="close"
     class="panel-wrap"
-    @close="onClose"
+    @closed="onClose"
   >
     <div class="panel">
       <div class="panel-head">

src/store/index.js

@@ -4,7 +4,6 @@ import user from "./modules/user";
 import { isXyqb } from "@/service/validation";
 import localStorage from "@/service/localStorage";
 
-const XYQB_AUTH_STATE = localStorage.get("xyqbAuthState") || 1;
 Vue.use(Vuex);
 
 export default new Vuex.Store({
@@ -12,7 +11,7 @@ export default new Vuex.Store({
     activeIdx: 0,
     isLoading: false,
     isShowLogin: false,
-    showAuthXyqb: isXyqb ? XYQB_AUTH_STATE : -1 // 1 已获取信息未授权，2 打开授权弹框， 3 拒绝授权，4 允许授权, -1 非信用钱包环境
+    showAuthXyqb: isXyqb ? localStorage.get("xyqbAuthState") || 1 : -1 // 1 已获取信息未授权，2 打开授权弹框， 3 拒绝授权，4 允许授权, -1 非信用钱包环境
   },
   mutations: {
     setActiveIdx(state, value) {

src/views/Goods/Detail/AIDetail.vue

 <template>
   <cr-form scroll-to-error @submit="onSubmit" @failed="onFailed" class="container">
-    <nav-tab :nav-list="navBarOptions" />
+    <nav-tab :nav-list="navBarOptions" @show="e => (goodActionShow = e)" />
     <detail-header :det="headerInfo" />
     <div class="det-body">
       <card title="保险计划" :option="['查看详情']" @option-click="openIframePupop(4)">
@@ -43,7 +43,11 @@
     </div>
     <detail-footer :company-info="companyInfo" />
     <copyright />
-    <good-action @leftClick="goInsureState = true" :content="goodActionInfo" />
+    <good-action
+      @leftClick="goInsureState = true"
+      :content="goodActionInfo"
+      v-show="goodActionShow"
+    />
     <popup-with-iframe
       v-model="popupShow"
       :title="pupopData.title"
@@ -129,6 +133,7 @@ export default {
       goodBuyModalInfo: [],
       popupShow: false,
       currentPupopIndex: null,
+      goodActionShow: false,
       calTimer: null,
       formData: {
         name: "",
@@ -276,13 +281,14 @@ export default {
     },
     async calFee() {
       let { price } = this.headerInfo;
-      const { idNo, amountInsured } = this.formData;
+      const { idNo, amountInsured, userInfoSecId } = this.formData;
       if (!idNo || !amountInsured) return;
       const _param = {
         productNo: this.goodId,
         productUserInfo: {
           userInfo: {
-            idNo
+            idNo,
+            userInfoSecId: userInfoSecId ? userInfoSecId : undefined
           },
           productItem: {
             amountInsured

src/views/Goods/Detail/CIIDetail.vue

 <template>
   <cr-form scroll-to-error @submit="onSubmit" @failed="onFailed" class="container">
-    <nav-tab :nav-list="navBarOptions" />
+    <nav-tab :nav-list="navBarOptions" @show="e => (goodActionShow = e)" />
     <detail-header :det="headerInfo" />
     <div class="det-body">
       <card title="保险计划" :option="['查看详情']" @option-click="openIframePupop(4)">
@@ -42,7 +42,11 @@
     </div>
     <detail-footer :company-info="companyInfo" />
     <copyright />
-    <good-action @leftClick="goInsureState = true" :content="goodActionInfo" />
+    <good-action
+      @leftClick="goInsureState = true"
+      :content="goodActionInfo"
+      v-show="goodActionShow"
+    />
     <popup-with-iframe
       v-model="popupShow"
       :title="pupopData.title"
@@ -126,6 +130,7 @@ export default {
       goodActionInfo: {},
       goodBuyModalInfo: [],
       popupShow: false,
+      goodActionShow: false,
       currentPupopIndex: null,
       formData: {
         name: "",
@@ -256,7 +261,7 @@ export default {
           userInfo: {
             idNo,
             socialSecurity: !!Number(socialSecurity),
-            userInfoSecId: userInfoSecId ?? null
+            userInfoSecId: userInfoSecId ? userInfoSecId : undefined
           },
           productItem: {
             payType,

src/views/Goods/Detail/LIDetail.vue

 <template>
   <cr-form scroll-to-error @submit="onSubmit" @failed="onFailed" class="container">
-    <nav-tab :nav-list="navBarOptions" />
+    <nav-tab :nav-list="navBarOptions" @show="e => (goodActionShow = e)" />
     <detail-header :det="headerInfo">
       <div class="li-header">
         <plan-tip :tip-list="planTipOptions" />
@@ -71,6 +71,11 @@
     </div>
     <detail-footer :company-info="companyInfo" />
     <copyright />
+    <good-action
+      :content="goodActionInfo"
+      :class="{ 'cal-fee': currentPupopIndex === 6 }"
+      v-show="goodActionShow"
+    />
     <good-action :content="goodActionInfo" :class="{ 'cal-fee': currentPupopIndex === 6 }" />
     <popup-with-iframe
       v-model="popupShow"
@@ -138,6 +143,7 @@ export default {
       goodId: "",
       calTimer: null,
       goodActionInfo: {},
+      goodActionShow: false,
       popupShow: false,
       currentPupopIndex: null,
       formData: {},

src/views/Goods/Detail/MIDetail.vue

 <template>
   <cr-form scroll-to-error @submit="onSubmit" @failed="onFailed" class="container">
-    <nav-tab :nav-list="navBarOptions" />
+    <nav-tab :nav-list="navBarOptions" @show="e => (goodActionShow = e)" />
     <detail-header :det="headerInfo" />
     <div class="det-body">
       <card title="保险计划" :option="['查看详情']" @option-click="openIframePupop(4)">
@@ -41,7 +41,11 @@
     </div>
     <detail-footer :company-info="companyInfo" />
     <copyright />
-    <good-action @leftClick="goInsureState = true" :content="goodActionInfo" />
+    <good-action
+      @leftClick="goInsureState = true"
+      :content="goodActionInfo"
+      v-show="goodActionShow"
+    />
     <popup-with-iframe
       v-model="popupShow"
       :title="pupopData.title"
@@ -139,6 +143,7 @@ export default {
         autoRenewPolicy: false,
         read: true
       },
+      goodActionShow: false,
       goInsureState: false
     };
   },
@@ -288,7 +293,7 @@ export default {
           userInfo: {
             idNo,
             socialSecurity: !!Number(socialSecurity),
-            userInfoSecId: userInfoSecId ?? null
+            userInfoSecId: userInfoSecId ? userInfoSecId : undefined
           },
           productItem: {
             payType

src/views/Goods/Detail/index.vue

@@ -4,6 +4,7 @@
     <mi-detail v-if="detailType === 'mi'" />
     <ai-detail v-if="detailType === 'ai'" />
     <li-detail v-if="detailType === 'li'" />
+    <advisor-rec-dialog v-model="showRec" @close="pageBack" />
   </div>
 </template>
 
@@ -12,22 +13,60 @@ import ciiDetail from "./CIIDetail";
 import miDetail from "./MIDetail";
 import liDetail from "./LIDetail";
 import aiDetail from "./AIDetail";
+import AdvisorRecDialog from "./modules/AdvisorRecDialog";
+import localStorage from "@/service/localStorage";
+import { getCulOrder } from "@/api/consultant";
+
 export default {
   name: "GoodsDetail",
   components: {
     ciiDetail,
     miDetail,
     aiDetail,
-    liDetail
+    liDetail,
+    AdvisorRecDialog
   },
   data() {
     return {
       detailType: "",
-      show: true
+      showRecFlag: "",
+      showRec: false,
+      noOrder: false,
+      isLogin: ""
     };
   },
+  beforeRouteLeave(to, from, next) {
+    const { showRecFlag, noOrder, isLogin } = this;
+    if (showRecFlag && !noOrder && isLogin) {
+      next();
+    } else {
+      next(false);
+      this.showRec = true;
+    }
+  },
   mounted() {
+    this.getOrderInfo();
+    this.showRecFlag = localStorage.get("recFlag");
     this.detailType = this.$route.query.type;
+  },
+  methods: {
+    async getOrderInfo() {
+      this.isLogin = localStorage.get("mongoToken");
+      if (!this.isLogin) {
+        return;
+      }
+      const res = await getCulOrder();
+      this.noOrder = res[0].state && res[0].state <= 2;
+    },
+    pageBack(e) {
+      this.showRecFlag = e;
+      localStorage.set("recFlag", e);
+      if (e === 1) {
+        this.$router.back();
+      } else {
+        this.$router.push({ path: "/consultant" });
+      }
+    }
   }
 };
 </script>

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

@@ -5,6 +5,7 @@
     cancel-btn=""
     confirm-btn="0.99元聘请"
     @confirm="go"
+    @close="onClose"
     class="rec"
   >
     <div class="rec-title" slot="title">
@@ -32,6 +33,8 @@
 <script>
 import Modal from "@/components/Modal";
 const DIALOG_CHANGE_EVENT = "input";
+const DIALOG_CLOSE_EVENT = "close";
+
 export default {
   name: "AdvisorRecDialog",
   components: {
@@ -57,8 +60,11 @@ export default {
     }
   },
   methods: {
+    onClose() {
+      this.$emit(DIALOG_CLOSE_EVENT, 1);
+    },
     go() {
-      this.$router.push("/goods/inform");
+      this.$emit(DIALOG_CLOSE_EVENT, 2);
     }
   }
 };

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

 <template>
-  <card title="请填写投保信息" class="insure-card">
-    <h6 class="insure-form-title">本人信息</h6>
-    <cr-cell-group class="insure-form">
-      <cr-field
-        name="selfName"
-        v-model="formData.selfName"
-        placeholder="请输入投保人姓名"
-        label="姓名"
-        :readonly="selfInfoReadonly"
-        :rules="[{ required: true, message: '请输入姓名' }]"
-        @click.native="inputClick"
-      />
-      <cr-field
-        name="selfIdNo"
-        v-model="formData.selfIdNo"
-        placeholder="信息保密，仅用于投保"
-        label="身份证号"
-        :readonly="selfInfoReadonly"
-        :rules="[{ required: true, message: '请输入身份证号' }]"
-        @click.native="inputClick"
-      />
-      <cr-field
-        name="selfPhone"
-        v-model="formData.selfPhone"
-        placeholder="请输入您的手机号码"
-        label="手机号码"
-        :readonly="selfInfoReadonly"
-        :rules="[{ required: true, message: '请输入手机号码' }]"
-        @click.native="inputClick"
-      />
-      <cr-field
-        name="selfCode"
-        v-model="formData.selfCode"
-        v-if="(!!xyqbAuthState && xyqbAuthState !== 4) || !mongoToken"
-        placeholder="请输入短信验证码"
-        label="验证码"
-        :rules="[{ required: true, message: '请输入验证码' }]"
-      >
-        <template v-slot:button>
-          <a href="javascript:;" @click="getCode" v-if="!showCount">获取验证码</a>
-          <span class="login-form-remain" v-else>{{ count }}s</span>
-        </template>
-      </cr-field>
-    </cr-cell-group>
-    <h6 class="insure-form-title">为谁投保</h6>
-    <cr-radio-btn
-      v-model="formData.relation"
-      @input="relationChange"
-      :radio-data="radioOptions.insuredOptions"
-      class="insured"
-    />
-    <cr-cell-group class="insure-form">
-      <cr-field
-        name="relativeName"
-        v-if="formData.relation !== '1'"
-        v-model="formData.name"
-        placeholder="请输入被保人姓名"
-        :readonly="infoReadonly"
-        label="姓名"
-        :rules="[{ required: true, message: '请输入姓名' }]"
-      />
-      <cr-field
-        name="relativeIdNo"
-        v-if="formData.relation !== '1'"
-        v-model="formData.idNo"
-        placeholder="信息保密，仅用于投保"
-        :readonly="infoReadonly"
-        label="身份证号"
-        :rules="[{ required: true, message: '请输入身份证号' }]"
+  <div>
+    <card title="请填写投保信息" class="insure-card">
+      <h6 class="insure-form-title">本人信息</h6>
+      <cr-cell-group class="insure-form">
+        <cr-field
+          name="selfName"
+          v-model="formData.selfName"
+          placeholder="请输入投保人姓名"
+          label="姓名"
+          :readonly="selfInfoReadonly"
+          :rules="[{ required: true, message: '请输入姓名' }]"
+          @click.native="inputClick"
+        />
+        <cr-field
+          name="selfIdNo"
+          v-model="formData.selfIdNo"
+          placeholder="信息保密，仅用于投保"
+          label="身份证号"
+          :readonly="selfInfoReadonly"
+          :rules="[{ required: true, message: '请输入身份证号' }]"
+          @click.native="inputClick"
+        />
+        <cr-field
+          name="selfPhone"
+          v-model="formData.selfPhone"
+          placeholder="请输入您的手机号码"
+          label="手机号码"
+          :readonly="selfInfoReadonly"
+          :rules="[{ required: true, message: '请输入手机号码' }]"
+          @click.native="inputClick"
+        />
+        <cr-field
+          name="selfCode"
+          v-model="formData.selfCode"
+          v-if="(!!xyqbAuthState && xyqbAuthState !== 4) || !mongoToken"
+          placeholder="请输入短信验证码"
+          label="验证码"
+          :rules="[{ required: true, message: '请输入验证码' }]"
+        >
+          <template v-slot:button>
+            <a href="javascript:;" @click="getCode" v-if="!showCount">获取验证码</a>
+            <span class="login-form-remain" v-else>{{ count }}s</span>
+          </template>
+        </cr-field>
+      </cr-cell-group>
+      <h6 class="insure-form-title">为谁投保</h6>
+      <cr-radio-btn
+        v-model="formData.relation"
+        @input="relationChange"
+        :radio-data="radioOptions.insuredOptions"
+        class="insured"
       />
-      <cr-cell class="insure-form-item_nobg" v-if="radioOptions.medicalOptions">
-        <template slot="title">
-          <span>有无医保</span>
-          <cr-icon type="question-o" color="#ccc" />
-        </template>
-        <cr-radio-btn
-          name="socialSecurity"
-          v-model="formData.socialSecurity"
-          :radio-data="radioOptions.medicalOptions"
-          :readonly="socialSecurityReadonly"
+      <cr-cell-group class="insure-form">
+        <cr-field
+          name="relativeName"
+          v-if="formData.relation !== '1'"
+          v-model="formData.name"
+          placeholder="请输入被保人姓名"
+          :readonly="infoReadonly"
+          label="姓名"
+          :rules="[{ required: true, message: '请输入姓名' }]"
         />
-      </cr-cell>
-      <cr-cell title="缴费方式" class="insure-form-item_nobg" v-if="radioOptions.paywayOptions">
-        <cr-radio-btn
-          name="type"
-          v-model="formData.payType"
-          :radio-data="radioOptions.paywayOptions"
+        <cr-field
+          name="relativeIdNo"
+          v-if="formData.relation !== '1'"
+          v-model="formData.idNo"
+          placeholder="信息保密，仅用于投保"
+          :readonly="infoReadonly"
+          label="身份证号"
+          :rules="[{ required: true, message: '请输入身份证号' }]"
         />
-      </cr-cell>
-    </cr-cell-group>
-  </card>
+        <cr-cell class="insure-form-item_nobg" v-if="radioOptions.medicalOptions">
+          <template slot="title">
+            <span>有无医保</span>
+            <svg-icon
+              icon-class="doubt"
+              @click.native="question = true"
+              class-name="Ffr-title-svg"
+            />
+          </template>
+          <cr-radio-btn
+            name="socialSecurity"
+            v-model="formData.socialSecurity"
+            :radio-data="radioOptions.medicalOptions"
+          />
+        </cr-cell>
+        <cr-cell title="缴费方式" class="insure-form-item_nobg" v-if="radioOptions.paywayOptions">
+          <cr-radio-btn
+            name="type"
+            v-model="formData.payType"
+            :radio-data="radioOptions.paywayOptions"
+          />
+        </cr-cell>
+      </cr-cell-group>
+    </card>
+    <Modal
+      class="insured-modal"
+      v-model="question"
+      :closeable="false"
+      @confirm="question = false"
+      cancel-btn=""
+      content="常见的社保包括农村合作医疗(新农合)、城镇居民社保、城镇职工医保、少儿医保等政府主导的基本医疗保障项目，满足最基本的医疗保障要求。"
+      title="我们常说的社保都包括哪些？"
+      confirm-btn="我知道了"
+    />
+  </div>
 </template>
 
 <script>
 import Card from "@/components/Card";
+import Modal from "@/components/Modal";
 import { mapState, mapActions } from "vuex";
 import { getFamilyList, getCaptchaSms } from "@/api/user";
 import { isPhone } from "@/service/validation";
@@ -104,7 +120,8 @@ export default {
   name: "InsurePersonForm",
   components: {
     CrRadioBtn,
-    Card
+    Card,
+    Modal
   },
   props: {
     value: {
@@ -130,7 +147,8 @@ export default {
       mongoToken: localStorage.get("mongoToken"),
       xyqbAuthState: localStorage.get("xyqbAuthState"),
       selfInfoReadonly: false,
-      infoReadonly: false
+      infoReadonly: false,
+      question: false
     };
   },
   watch: {
@@ -328,4 +346,15 @@ export default {
 .insured {
   margin-bottom: 20px;
 }
+.insured-modal {
+  @{deep} .panel-body {
+    font-size: 16px;
+    font-weight: 400;
+    color: #666666;
+    line-height: 28px;
+  }
+}
+.Ffr-title-svg {
+  margin-left: 5px;
+}
 </style>

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

@@ -10,6 +10,7 @@
 
 <script>
 const SCROLL_ACHOR_CHANGE_EVENT = "input";
+const SCROLL_SHOW_EVENT = "show";
 export default {
   name: "NavTab",
   props: {
@@ -71,6 +72,7 @@ export default {
       }
       this.active = navIndex;
       this.showNavBar = scrollTop > 300;
+      this.$emit(SCROLL_SHOW_EVENT, this.showNavBar);
     },
     // 跳转到指定索引的元素
     scrollTo(index) {

src/views/Goods/Detail/modules/detailPay.mixin.js

@@ -67,7 +67,7 @@ export default {
       const { payOrderNo, orderNo } = this.orderInfo;
       this.setIsLoading(true);
       placeOrder.polling({ payOrderNo, payOrderType: 1 }).then(payRes => {
-        if (!payRes.result && (payRes.payState === 1 || payRes.payState === 2)) {
+        if (!payRes.result && payRes.payState === 2) {
           this.payTimer = setTimeout(() => {
             this.getPayResult();
           }, 3000);

src/views/Home/index.less

@@ -251,6 +251,10 @@
       font-size: 16px;
       color: #999999;
       line-height: 19px;
+      a {
+        font-size: 16px;
+        color: #999999;
+      }
     }
 
     p:last-child {

src/views/Home/index.vue

@@ -87,7 +87,9 @@
       </a>
     </div>
     <div class="home-phone">
-      <p>客服电话：{{ tel }}</p>
+      <p>
+        客服电话：<a :href="`tel:${tel}`">{{ tel }}</a>
+      </p>
       <p>服务时间：{{ serviceHours }}</p>
     </div>
     <copyright :logo="true" />

src/views/Policy/Add/index.vue

@@ -140,7 +140,6 @@
             <cr-radio-btn
               v-model="formData.insuredUserInfo.socialSecurity"
               :radio-data="socialSecOptions"
-              :readonly="socialSecurityReadonly"
             />
           </template>
         </cr-field>