fix: 详情页登录完善

src/views/Goods/Detail/AIDetail.vue

@@ -86,13 +86,14 @@ import AutoDeduct from "./modules/AutoDeduct";
 import ProtocolRead from "./modules/ProtocolRead";
 import NavTab from "./modules/NavTab";
 import detailPayMixin from "./modules/detailPay.mixin";
+import detailLoginMixin from "./modules/detailLogin.mixin";
 
 import Detail from "@/api/detail.zhongan.yiwai";
 import { trail, list } from "@/api/product";
 
 export default {
   name: "GoodsDetail-AI",
-  mixins: [detailPayMixin],
+  mixins: [detailPayMixin, detailLoginMixin],
   components: {
     DetailHeader,
     DetailFooter,
@@ -202,7 +203,10 @@ export default {
       this.popupShow = true;
     },
     onSubmit() {
-      this.goInsureState = true;
+      const { selfPhone, selfCode } = this.formData;
+      this.login(selfPhone, selfCode).then(() => {
+        this.goInsureState = true;
+      });
       // sessionStorage.setItem(
       //   "policyFormData",
       //   JSON.stringify(Object.assign(this.formData, { productNo: this.goodId }))

src/views/Goods/Detail/CIIDetail.vue

@@ -83,6 +83,7 @@ import InsurePersonForm from "./modules/InsurePersonForm";
 import AutoDeduct from "./modules/AutoDeduct";
 import ProtocolRead from "./modules/ProtocolRead";
 import NavTab from "./modules/NavTab";
+import detailLoginMixin from "./modules/detailLogin.mixin";
 
 import Detail from "@/api/detail.huatai.zhongjixian";
 import { trail, list } from "@/api/product";
@@ -112,6 +113,7 @@ export default {
     ProtocolRead,
     NavTab
   },
+  mixins: [detailLoginMixin],
   data() {
     return {
       ...Detail,
@@ -204,11 +206,14 @@ export default {
       this.popupShow = true;
     },
     onSubmit() {
-      this.goInsureState = true;
-      sessionStorage.setItem(
-        "policyFormData",
-        JSON.stringify(Object.assign(this.formData, { productNo: this.goodId }))
-      );
+      const { selfPhone, selfCode } = this.formData;
+      this.login(selfPhone, selfCode).then(() => {
+        this.goInsureState = true;
+        sessionStorage.setItem(
+          "policyFormData",
+          JSON.stringify(Object.assign(this.formData, { productNo: this.goodId }))
+        );
+      });
     },
     onFailed(errorInfo) {
       const { errors } = errorInfo;

src/views/Goods/Detail/LIDetail.vue

@@ -104,6 +104,7 @@ import CalInsuredFee from "./modules/CalInsuredFee";
 import PlanTip from "./modules/PlanTip";
 import ProtocolRead from "./modules/ProtocolRead";
 import NavTab from "./modules/NavTab";
+import detailLoginMixin from "./modules/detailLogin.mixin";
 
 import Detail from "@/api/detail.huagui.shouxian";
 import { trail, list } from "@/api/product";
@@ -130,6 +131,7 @@ export default {
     ProtocolRead,
     CalInsuredFee
   },
+  mixins: [detailLoginMixin],
   data() {
     return {
       ...Detail,
@@ -139,7 +141,7 @@ export default {
       popupShow: false,
       currentPupopIndex: null,
       formData: {
-        read: false
+        read: true
       },
       showLayer: false
     };
@@ -193,17 +195,17 @@ export default {
       this.popupShow = true;
     },
     onSubmit() {
-      sessionStorage.setItem(
-        "policyFormData",
-        JSON.stringify(Object.assign(this.formData, { productNo: this.goodId }))
-      );
-      this.nextStep();
+      this.showLoginPopup();
     },
     onFailed(errorInfo) {
       const { errors } = errorInfo;
       this.$notify({ type: "warning", message: errors[0].message });
     },
     nextStep() {
+      sessionStorage.setItem(
+        "policyFormData",
+        JSON.stringify(Object.assign(this.formData, { productNo: this.goodId }))
+      );
       this.$router.push("/policy/add");
     },
     async getDetail() {

src/views/Goods/Detail/MIDetail.vue

@@ -83,13 +83,14 @@ import AutoDeduct from "./modules/AutoDeduct";
 import ProtocolRead from "./modules/ProtocolRead";
 import NavTab from "./modules/NavTab";
 import detailPayMixin from "./modules/detailPay.mixin";
+import detailLoginMixin from "./modules/detailLogin.mixin";
 
 import { trail, list } from "@/api/product";
 import Detail from "@/api/detail.taikang.yiliaobaozhang";
 
 export default {
   name: "GoodsDetail-MI",
-  mixins: [detailPayMixin],
+  mixins: [detailPayMixin, detailLoginMixin],
   components: {
     DetailHeader,
     DetailFooter,
@@ -197,7 +198,10 @@ export default {
       this.popupShow = true;
     },
     onSubmit() {
-      this.goInsureState = true;
+      const { selfPhone, selfCode } = this.formData;
+      this.login(selfPhone, selfCode).then(() => {
+        this.goInsureState = true;
+      });
       // sessionStorage.setItem("policyFormData", JSON.stringify(this.formData));
     },
     onFailed(errorInfo) {

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

@@ -29,12 +29,15 @@
       <cr-field
         name="selfCode"
         v-model="formData.selfCode"
-        v-if="xyqbAuthState !== 4"
+        v-if="xyqbAuthState !== 4 || !mongoToken"
         placeholder="请输入短信验证码"
         label="验证码"
         :rules="[{ required: true, message: '请输入验证码' }]"
       >
-        <a href="javascript:;" slot="button">获取验证码</a>
+        <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>
@@ -86,7 +89,8 @@
 <script>
 import Card from "@/components/Card";
 import { mapState, mapActions } from "vuex";
-import { getFamilyList } from "@/api/user";
+import { getFamilyList, getCaptchaSms } from "@/api/user";
+import { isPhone } from "@/service/validation";
 import localStorage from "@/service/localStorage";
 import CrRadioBtn from "@/components/CrRadioBtn";
 const DATA_CHANGE_EVENT = "input";
@@ -114,6 +118,9 @@ export default {
     return {
       formData: {},
       familyList: [],
+      showCount: false,
+      count: "",
+      timer: null,
       mongoToken: localStorage.get("mongoToken"),
       xyqbAuthState: localStorage.get("xyqbAuthState")
     };
@@ -197,6 +204,29 @@ export default {
         this.familyList = res;
         this.showAuthXyqb && this.relationChange();
       }
+    },
+    async getCode() {
+      const TIME_COUNT = 60;
+      const { selfPhone } = this.formData;
+      if (this.timer) return;
+      if (!isPhone(selfPhone)) {
+        this.$notify({ type: "warning", message: "请填写正确的手机号码" });
+        return;
+      }
+      const res = await getCaptchaSms({ phoneNo: selfPhone });
+      if (res && !this.timer) {
+        this.count = TIME_COUNT;
+        this.showCount = true;
+        this.timer = setInterval(() => {
+          if (this.count > 0 && this.count <= TIME_COUNT) {
+            this.count--;
+          } else {
+            this.showCount = false;
+            clearInterval(this.timer);
+            this.timer = null;
+          }
+        }, 1000);
+      }
     }
   }
 };

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

+import { loginByPhone } from "@/api/user";
+import { isWeixinBrower } from "@/service/validation";
+import { mapState, mapActions } from "vuex";
+import localStorage from "@/service/localStorage";
+
+export default {
+  computed: {
+    ...mapState(["isShowLogin"])
+  },
+  watch: {
+    isShowLogin(val) {
+      if (!val && localStorage.get("mongoToken")) {
+        this.nextStep();
+      }
+    }
+  },
+  methods: {
+    ...mapActions(["setIsShowLogin"]),
+    showLoginPopup() {
+      if (localStorage.get("mongoToken")) {
+        this.nextStep();
+      } else {
+        this.setIsShowLogin(true);
+      }
+    },
+    async login(phoneNo, verifyCode) {
+      let formData = {
+        loginChannel: isWeixinBrower ? 1 : 2,
+        openId: localStorage.get("openId") || null,
+        phoneNo,
+        verifyCode
+      };
+      const res = await loginByPhone(formData);
+      if (res) {
+        this.$notify("登录成功");
+        // localStorage.setItem("mongoToken", res.token);
+        // TODO 开发目前使用这个token
+        localStorage.set("mongoToken", "6ae7da7dd4c543f1a36c702c6f419f12");
+      }
+      return new Promise(resolve => {
+        resolve();
+      });
+    }
+  }
+};