feat: 登录弹框封装完成

src/components/LoginModal.vue

 <template>
   <modal
-    v-model="show"
+    v-model="isShowLogin"
     title="您好<br />欢迎来到芒果保险"
     :closeable="true"
     cancel-btn
     confirm-btn="确定"
+    @close="setLoginIsShow(false)"
     @confirm="$refs.loginForm.submit()"
   >
     <cr-form
       class="login-form"
       ref="loginForm"
       validate-trigger="onBlur"
-      @submit="onFormSubmit"
+      @submit="login"
       @failed="onFormFailed"
     >
       <cr-field
@@ -40,9 +41,10 @@
 </template>
 
 <script>
+import { mapState, mapActions } from "vuex";
 import Modal from "@/components/Modal";
 import { loginByPhone, getCaptchaSms } from "@/api/user";
-import { isPhone } from "@/service/validation";
+import { isPhone, isWeixinBrower } from "@/service/validation";
 export default {
   name: "LoginModal",
   components: {
@@ -61,31 +63,39 @@ export default {
       validOptions: [
         [
           { require: true, message: "请填写您的手机号" },
-          { validator: isPhone, message: "手机号格式错误" }
+          { validator: isPhone, message: "请填写正确的手机号码" }
         ],
         [{ require: true, message: "请填写验证码" }]
       ]
     };
   },
-  methods: {
-    onFormSubmit() {
-      this.login();
+  computed: {
+    ...mapState(["isShowLogin"])
   },
+  methods: {
+    ...mapActions(["setLoginIsShow"]),
     onFormFailed(errorInfo) {
       const { errors } = errorInfo;
       this.$notify({ type: "warning", message: errors[0].message });
     },
     async login() {
-      this.formData.loginChannel = 1;
-      this.formData.openId = 1;
+      this.formData.loginChannel = isWeixinBrower ? 1 : 2;
+      this.formData.openId = localStorage.getItem("openId") || null;
       const res = await loginByPhone(this.formData);
-      if (res.code === 0) {
+      if (res.code === "0") {
         this.$notify("登录成功");
+        this.setLoginIsShow(false);
+        localStorage.setItem("mongoToken", res.data.token);
       }
     },
     async getCode() {
       const TIME_COUNT = 60;
       const { phoneNo } = this.formData;
+      if (this.timer) return;
+      if (!isPhone(phoneNo)) {
+        this.$notify({ type: "warning", message: "请填写正确的手机号码" });
+        return;
+      }
       const res = await getCaptchaSms({ phoneNo });
       if (res.code === "0" && !this.timer) {
         this.count = TIME_COUNT;

src/service/validation.js

@@ -248,3 +248,9 @@ export function isBankNumber(str) {
   }
   return false;
 }
+
+// 判断微信环境
+export function isWeixinBrower() {
+  const ua = window.navigator.userAgent.toLowerCase();
+  return ua.match(/MicroMessenger/i) == "micromessenger";
+}

src/store/index.js

@@ -6,7 +6,8 @@ Vue.use(Vuex);
 export default new Vuex.Store({
   state: {
     activeIdx: 0,
-    isLoading: false
+    isLoading: false,
+    isShowLogin: false
   },
   mutations: {
     setActiveIdx(state, value) {
@@ -14,6 +15,9 @@ export default new Vuex.Store({
     },
     setIsLoading(state, value) {
       state.isLoading = value;
+    },
+    setIsShowLogin(state, value) {
+      state.showLogin = value;
     }
   },
   actions: {
@@ -22,6 +26,9 @@ export default new Vuex.Store({
     },
     setIsLoading({ commit }, args) {
       commit("setIsLoading", args);
+    },
+    setIsShowLogin({ commit }, args) {
+      commit("setIsShowLogin", args);
     }
   },
   modules: {}