注册跳转

src/views/login/index.vue

 <template>
   <div style="width: 100%; height: 100%; position: relative">
     <div style="height: 100%; width: 55%; position: relative">
-      <img src="@/assets/login/login.png" style="width: 100%; height: 100%" />
+      5
       <div style="position: absolute; left: 56px; top: 56px; display: flex">
-        <img src="@/assets/login/logo.png" style="width: 84px; height: 84px" />
+        <img src="@/assets/login/logo.png" style="width: 84px; height: 84px">
         <span
           style="
             font-size: 48px;
@@ -12,11 +12,10 @@
             line-height: 84px;
             margin-left: 20px;
           "
-          >{{ $t("login.bgTitle1") }}{{ env }}</span
-        >
+        >{{ $t("login.bgTitle1") }}{{ env }}</span>
       </div>
       <div style="position: absolute; left: 160px; top: 170px; display: flex">
-        <img src="@/assets/login/1.png" style="width: 36px; height: 36px" />
+        <img src="@/assets/login/1.png" style="width: 36px; height: 36px">
         <span
           style="
             font-size: 32px;
@@ -25,14 +24,13 @@
             line-height: 36px;
             margin-left: 8px;
           "
-          >{{ $t("login.bgTitle2") }}</span
-        >
+        >{{ $t("login.bgTitle2") }}</span>
       </div>
       <div style="position: absolute; left: 130px; top: 250px; display: flex">
-        <img src="@/assets/login/8.png" style="width: 320px; height: 322px" />
+        <img src="@/assets/login/8.png" style="width: 320px; height: 322px">
         <div style="position: absolute; top: 20px; left: 30px; width: 500px">
           <div style="display: flex; margin-top: 20px">
-            <img src="@/assets/login/2.png" style="width: 24px; height: 24px" />
+            <img src="@/assets/login/2.png" style="width: 24px; height: 24px">
             <span
               style="
                 font-size: 14px;
@@ -41,11 +39,10 @@
                 line-height: 24px;
                 margin-left: 5px;
               "
-              >{{ $t("login.bgTitle3") }}</span
-            >
+            >{{ $t("login.bgTitle3") }}</span>
           </div>
           <div style="display: flex; margin-top: 20px">
-            <img src="@/assets/login/3.png" style="width: 24px; height: 24px" />
+            <img src="@/assets/login/3.png" style="width: 24px; height: 24px">
             <span
               style="
                 font-size: 14px;
@@ -54,11 +51,10 @@
                 line-height: 24px;
                 margin-left: 5px;
               "
-              >{{ $t("login.bgTitle4") }}</span
-            >
+            >{{ $t("login.bgTitle4") }}</span>
           </div>
           <div style="display: flex; margin-top: 20px">
-            <img src="@/assets/login/4.png" style="width: 24px; height: 24px" />
+            <img src="@/assets/login/4.png" style="width: 24px; height: 24px">
             <span
               style="
                 font-size: 14px;
@@ -67,11 +63,10 @@
                 line-height: 24px;
                 margin-left: 5px;
               "
-              >{{ $t("login.bgTitle5") }}</span
-            >
+            >{{ $t("login.bgTitle5") }}</span>
           </div>
           <div style="display: flex; margin-top: 20px">
-            <img src="@/assets/login/5.png" style="width: 24px; height: 24px" />
+            <img src="@/assets/login/5.png" style="width: 24px; height: 24px">
             <span
               style="
                 font-size: 14px;
@@ -80,11 +75,10 @@
                 line-height: 24px;
                 margin-left: 5px;
               "
-              >{{ $t("login.bgTitle6") }}</span
-            >
+            >{{ $t("login.bgTitle6") }}</span>
           </div>
           <div style="display: flex; margin-top: 20px">
-            <img src="@/assets/login/6.png" style="width: 24px; height: 24px" />
+            <img src="@/assets/login/6.png" style="width: 24px; height: 24px">
             <span
               style="
                 font-size: 14px;
@@ -93,11 +87,10 @@
                 line-height: 24px;
                 margin-left: 5px;
               "
-              >{{ $t("login.bgTitle7") }}</span
-            >
+            >{{ $t("login.bgTitle7") }}</span>
           </div>
           <div style="display: flex; margin-top: 20px">
-            <img src="@/assets/login/7.png" style="width: 24px; height: 24px" />
+            <img src="@/assets/login/7.png" style="width: 24px; height: 24px">
             <span
               style="
                 font-size: 14px;
@@ -106,8 +99,7 @@
                 line-height: 24px;
                 margin-left: 5px;
               "
-              >{{ $t("login.bgTitle8") }}</span
-            >
+            >{{ $t("login.bgTitle8") }}</span>
           </div>
         </div>
       </div>
@@ -118,7 +110,7 @@
           <img
             src="@/assets/setting/user.png"
             style="width: 30px; height: 30px"
-          />
+          >
           <span
             style="
               font-size: 24px;
@@ -127,8 +119,7 @@
               line-height: 34px;
               margin-left: 10px;
             "
-            >{{ $t("login.title") }}</span
-          >
+          >{{ $t("login.title") }}</span>
         </div>
         <div>
           <el-select
@@ -139,7 +130,7 @@
             @change="handleSetLanguage"
           >
             <div slot="prefix" style="padding: 4px">
-              <img src="@/assets/lang.png" style="width: 20px; height: 20px" />
+              <img src="@/assets/lang.png" style="width: 20px; height: 20px">
             </div>
             <el-option
               v-for="item in locale"
@@ -176,8 +167,7 @@
             round
             style="width: 70%"
             @click="toHome"
-            >{{ $t("common.returnIndex") }}</el-button
-          >
+          >{{ $t("common.returnIndex") }}</el-button>
         </div>
         <div style="width: 100%; text-align: center; margin-top: 20px">
           <el-link href="/ucenter/#/registered" style="color: #5ba8dc">{{
@@ -190,49 +180,49 @@
 </template>
 
 <script>
-import UserLogin from "./components/userLogin";
-import MobileLogin from "./components/mobileLogin";
-import { locale } from "@/api/country";
+import UserLogin from './components/userLogin'
+import MobileLogin from './components/mobileLogin'
+import { locale } from '@/api/country'
 
 export default {
-  name: "Login",
+  name: 'Login',
   components: { UserLogin, MobileLogin },
   data() {
     return {
       showDialog: false,
       loading: false,
-      loginType: "1",
+      loginType: '1',
       locale: [],
-      env: "",
-    };
+      env: ''
+    }
   },
   computed: {
     homeUrl() {
-      return process.env.VUE_APP_HOME_API;
+      return process.env.VUE_APP_HOME_API
     },
     language: {
       get() {
-        return this.$store.getters.language;
+        return this.$store.getters.language
       },
       set(val) {
-        this.handleSetLanguage(val);
-      },
-    },
+        this.handleSetLanguage(val)
+      }
+    }
   },
   watch: {
     loginType: {
-      handler: function () {},
-      deep: true,
-    },
+      handler: function() {},
+      deep: true
+    }
   },
   created() {
-    if (process.env.NODE_ENV === "development") {
-      this.env = "-测试版";
+    if (process.env.NODE_ENV === 'development') {
+      this.env = '-测试版'
     }
     // window.addEventListener('storage', this.afterQRScan)
     locale().then((r) => {
-      this.locale = r.data;
-    });
+      this.locale = r.data
+    })
   },
   mounted() {},
   destroyed() {
@@ -240,14 +230,14 @@ export default {
   },
   methods: {
     handleSetLanguage(lang) {
-      this.$i18n.locale = lang;
-      this.$store.dispatch("app/setLanguage", lang);
+      this.$i18n.locale = lang
+      this.$store.dispatch('app/setLanguage', lang)
     },
     toHome() {
-      window.location.href = this.homeUrl;
-    },
-  },
-};
+      window.location.href = this.homeUrl
+    }
+  }
+}
 </script>
 
 <style lang="scss" scoped>

src/views/registered/index.vue

 <template>
   <div style="width: 100%; height: 100%; position: relative">
     <div class="registered-container">
-      <img src="@/assets/login/login.png" style="width: 100%; height: 100%" />
+      <img src="@/assets/login/login.png" style="width: 100%; height: 100%">
       <div style="position: absolute; left: 56px; top: 56px; display: flex">
-        <img src="@/assets/login/logo.png" style="width: 84px; height: 84px" />
+        <img src="@/assets/login/logo.png" style="width: 84px; height: 84px">
         <span
           style="
             font-size: 48px;
@@ -12,11 +12,10 @@
             line-height: 84px;
             margin-left: 20px;
           "
-          >{{ $t("login.bgTitle1") }}</span
-        >
+        >{{ $t("login.bgTitle1") }}</span>
       </div>
       <div style="position: absolute; left: 160px; top: 170px; display: flex">
-        <img src="@/assets/login/1.png" style="width: 36px; height: 36px" />
+        <img src="@/assets/login/1.png" style="width: 36px; height: 36px">
         <span
           style="
             font-size: 32px;
@@ -25,14 +24,13 @@
             line-height: 36px;
             margin-left: 8px;
           "
-          >{{ $t("login.bgTitle2") }}</span
-        >
+        >{{ $t("login.bgTitle2") }}</span>
       </div>
       <div style="position: absolute; left: 130px; top: 250px; display: flex">
-        <img src="@/assets/login/8.png" style="width: 320px; height: 322px" />
+        <img src="@/assets/login/8.png" style="width: 320px; height: 322px">
         <div style="position: absolute; top: 20px; left: 30px; width: 500px">
           <div style="display: flex; margin-top: 20px">
-            <img src="@/assets/login/2.png" style="width: 24px; height: 24px" />
+            <img src="@/assets/login/2.png" style="width: 24px; height: 24px">
             <span
               style="
                 font-size: 14px;
@@ -41,11 +39,10 @@
                 line-height: 24px;
                 margin-left: 5px;
               "
-              >{{ $t("login.bgTitle3") }}</span
-            >
+            >{{ $t("login.bgTitle3") }}</span>
           </div>
           <div style="display: flex; margin-top: 20px">
-            <img src="@/assets/login/3.png" style="width: 24px; height: 24px" />
+            <img src="@/assets/login/3.png" style="width: 24px; height: 24px">
             <span
               style="
                 font-size: 14px;
@@ -54,11 +51,10 @@
                 line-height: 24px;
                 margin-left: 5px;
               "
-              >{{ $t("login.bgTitle4") }}</span
-            >
+            >{{ $t("login.bgTitle4") }}</span>
           </div>
           <div style="display: flex; margin-top: 20px">
-            <img src="@/assets/login/4.png" style="width: 24px; height: 24px" />
+            <img src="@/assets/login/4.png" style="width: 24px; height: 24px">
             <span
               style="
                 font-size: 14px;
@@ -67,11 +63,10 @@
                 line-height: 24px;
                 margin-left: 5px;
               "
-              >{{ $t("login.bgTitle5") }}</span
-            >
+            >{{ $t("login.bgTitle5") }}</span>
           </div>
           <div style="display: flex; margin-top: 20px">
-            <img src="@/assets/login/5.png" style="width: 24px; height: 24px" />
+            <img src="@/assets/login/5.png" style="width: 24px; height: 24px">
             <span
               style="
                 font-size: 14px;
@@ -80,11 +75,10 @@
                 line-height: 24px;
                 margin-left: 5px;
               "
-              >{{ $t("login.bgTitle6") }}</span
-            >
+            >{{ $t("login.bgTitle6") }}</span>
           </div>
           <div style="display: flex; margin-top: 20px">
-            <img src="@/assets/login/6.png" style="width: 24px; height: 24px" />
+            <img src="@/assets/login/6.png" style="width: 24px; height: 24px">
             <span
               style="
                 font-size: 14px;
@@ -93,11 +87,10 @@
                 line-height: 24px;
                 margin-left: 5px;
               "
-              >{{ $t("login.bgTitle7") }}</span
-            >
+            >{{ $t("login.bgTitle7") }}</span>
           </div>
           <div style="display: flex; margin-top: 20px">
-            <img src="@/assets/login/7.png" style="width: 24px; height: 24px" />
+            <img src="@/assets/login/7.png" style="width: 24px; height: 24px">
             <span
               style="
                 font-size: 14px;
@@ -106,8 +99,7 @@
                 line-height: 24px;
                 margin-left: 5px;
               "
-              >{{ $t("login.bgTitle8") }}</span
-            >
+            >{{ $t("login.bgTitle8") }}</span>
           </div>
         </div>
       </div>
@@ -118,7 +110,7 @@
           <img
             src="@/assets/login/register.png"
             style="width: 30px; height: 30px"
-          />
+          >
           <span
             style="
               font-size: 24px;
@@ -127,8 +119,7 @@
               line-height: 34px;
               margin-left: 10px;
             "
-            >{{ $t("registered.title") }}</span
-          >
+          >{{ $t("registered.title") }}</span>
         </div>
         <div>
           <el-select
@@ -139,7 +130,7 @@
             @change="handleSetLanguage"
           >
             <div slot="prefix" style="padding: 4px">
-              <img src="@/assets/lang.png" style="width: 20px; height: 20px" />
+              <img src="@/assets/lang.png" style="width: 20px; height: 20px">
             </div>
             <el-option
               v-for="item in locale"
@@ -217,8 +208,7 @@
               style="width: 100%; margin-bottom: 30px"
               :disabled="disabled"
               @click.native.prevent="getValidaCode"
-              >{{ getCode }}</el-button
-            >
+            >{{ getCode }}</el-button>
           </el-col>
         </el-row>
         <el-form-item prop="password" :label="$t('registered.password')">
@@ -248,7 +238,7 @@
             </div>
           </el-col>
         </el-row>
-        <br />
+        <br>
         <el-form-item prop="confirmPwd" :label="$t('registered.confirmPwd')">
           <el-input
             ref="confirmPwd"
@@ -276,15 +266,13 @@
             style="width: 70%"
             round
             @click.native.prevent="handleregistered"
-            >{{ $t("registered.registered") }}</el-button
-          >
+          >{{ $t("registered.registered") }}</el-button>
         </div>
         <div style="width: 100%; text-align: center">
           <el-link
             href="/ucenter/#/login"
             style="color: #27417c; margin-top: 20px"
-            >{{ $t("registered.login") }}</el-link
-          >
+          >{{ $t("registered.login") }}</el-link>
         </div>
       </el-form>
     </div>
@@ -292,174 +280,212 @@
 </template>
 
 <script>
-import { getCode, reg, getCountryList } from "@/api/user";
-import { locale } from "@/api/country";
-import { langData } from "@/data/lang";
+import { getCode, reg, getCountryList, getInfo } from '@/api/user'
+import { setToken } from '@/utils/auth'
+import { locale } from '@/api/country'
+import { langData } from '@/data/lang'
 export default {
-  name: "Registered",
+  name: 'Registered',
   components: {},
   data() {
     return {
       countryList: [],
       registeredForm: {
         registerPlatform: 3,
-        areaCode: "86"
+        areaCode: '86'
       },
       registeredRules: {
         mobile: [
           {
             required: true,
-            message: this.$t("login.mobileRules"),
-            trigger: "blur",
+            message: this.$t('login.mobileRules'),
+            trigger: 'blur'
           },
-          { max: 11, message: "电话长度在11个数字以内", trigger: "blur" },
+          { max: 11, message: '电话长度在11个数字以内', trigger: 'blur' }
         ],
         englishName: [
           {
             required: true,
-            message: this.$t("login.nameEnRules"),
-            trigger: "blur",
-          },
+            message: this.$t('login.nameEnRules'),
+            trigger: 'blur'
+          }
         ],
         code: [
           {
             required: true,
-            message: this.$t("login.codeRules"),
-            trigger: "blur",
-          },
+            message: this.$t('login.codeRules'),
+            trigger: 'blur'
+          }
         ],
         password: [
           {
             required: true,
-            message: this.$t("login.passwordRules"),
-            trigger: "blur",
-          },
+            message: this.$t('login.passwordRules'),
+            trigger: 'blur'
+          }
         ],
         confirmPwd: [
           {
             required: true,
-            message: this.$t("login.confirmPwdRules"),
-            trigger: "blur",
-          },
-        ],
+            message: this.$t('login.confirmPwdRules'),
+            trigger: 'blur'
+          }
+        ]
       },
       loading: false,
       disabled: false,
       count: 60,
-      getCode: "",
+      getCode: '',
       level: 0,
       locale: [],
-      apiLang: "",
-      langData: langData,
-    };
+      apiLang: '',
+      langData: langData
+    }
   },
   computed: {
     language: {
       get() {
-        return this.$store.getters.language;
+        return this.$store.getters.language
       },
       set(val) {
-        this.handleSetLanguage(val);
-      },
-    },
+        this.handleSetLanguage(val)
+      }
+    }
   },
   watch: {
     language() {
-      this.getCode = this.$t("login.getCode");
-      this.apiLang = this.langData[this.language];
+      this.getCode = this.$t('login.getCode')
+      this.apiLang = this.langData[this.language]
     },
+    $route: {
+      handler: function(route) {
+        const query = route.query
+        if (query) {
+          this.redirect = query.redirect
+          this.otherQuery = this.getOtherQuery(query)
+        }
+      },
+      immediate: true
+    }
   },
   created() {
-    this.apiLang = this.langData[this.language];
-    this.getCode = this.$t("registered.getCode");
+    this.apiLang = this.langData[this.language]
+    this.getCode = this.$t('registered.getCode')
     getCountryList().then((r) => {
-      this.countryList = r.data;
-    });
+      this.countryList = r.data
+    })
     locale().then((r) => {
-      this.locale = r.data;
-    });
+      this.locale = r.data
+    })
   },
 
   methods: {
     handleSetLanguage(lang) {
-      this.$i18n.locale = lang;
-      this.$store.dispatch("app/setLanguage", lang);
+      this.$i18n.locale = lang
+      this.$store.dispatch('app/setLanguage', lang)
     },
     getValidaCode() {
       var data = {
         mobile: this.registeredForm.mobile,
         scene: 0,
-        areaCode: this.registeredForm.areaCode,
-      };
+        areaCode: this.registeredForm.areaCode
+      }
       getCode(data).then(() => {
         var countDown = window.setInterval(() => {
           if (this.count < 1) {
-            this.disabled = false;
-            this.count = 60;
-            this.getCode = this.$t("registered.getCode");
-            window.clearInterval(countDown);
+            this.disabled = false
+            this.count = 60
+            this.getCode = this.$t('registered.getCode')
+            window.clearInterval(countDown)
           } else {
-            this.count--;
-            this.disabled = true;
-            this.getCode = this.count + "s";
+            this.count--
+            this.disabled = true
+            this.getCode = this.count + 's'
           }
-        }, 1000);
-      });
+        }, 1000)
+      })
     },
     pwdChange(val) {
       // 弱密码：全是数字或全是字母，6-16个字符
-      const weakReg = /^[0-9]{6,16}$|^[a-zA-Z]{6,16}$/;
+      const weakReg = /^[0-9]{6,16}$|^[a-zA-Z]{6,16}$/
       // 中密码：数字和26个英文字母，6-16个字符
-      const mediumReg = /^[A-Za-z0-9]{6,16}$/;
+      const mediumReg = /^[A-Za-z0-9]{6,16}$/
       // 强密码：由数字、26个英文字母或者下划线组成的字符串，6-16个字符
-      const strongReg = /^\w{6,16}$/;
-      var password = this.registeredForm.password;
+      const strongReg = /^\w{6,16}$/
+      var password = this.registeredForm.password
       if (password !== null) {
         if (password.length >= 6 && password.length <= 16) {
           if (password.match(weakReg)) {
-            this.level = 1;
+            this.level = 1
           } else if (password.match(mediumReg)) {
-            this.level = 2;
+            this.level = 2
           } else if (password.match(strongReg)) {
-            this.level = 3;
+            this.level = 3
           }
         }
         if (password.length > 16) {
-          this.level = 3;
+          this.level = 3
         }
       }
     },
+    getInfos() {
+      getInfo().then((r) => {
+        this.loading = false
+        if (r.data.city) {
+          this.$router.push({
+            path: this.redirect || '/jiedao/jd-profile',
+            query: this.otherQuery
+          })
+        } else {
+          this.$router.push({
+            path: '/myInfo',
+            query: this.otherQuery
+          })
+        }
+      })
+    },
+    getOtherQuery(query) {
+      return Object.keys(query).reduce((acc, cur) => {
+        if (cur !== 'redirect') {
+          acc[cur] = query[cur]
+        }
+        return acc
+      }, {})
+    },
     handleregistered() {
       this.$refs.registeredForm.validate((valid) => {
         if (valid) {
           if (this.registeredForm.password !== this.registeredForm.confirmPwd) {
-            this.$message.error("两次密码输入不一致");
-            return;
+            this.$message.error('两次密码输入不一致')
+            return
           }
-          this.loading = true;
+          this.loading = true
           reg(this.registeredForm)
-            .then(() => {
+            .then((res) => {
               this.$message({
                 message:
-                  this.$t("registered.title") + this.$t("common.success"),
-                type: "success",
-              });
-              this.$router.push({
-                path: "/login",
-              });
-              this.loading = false;
+                  this.$t('registered.title') + this.$t('common.success'),
+                type: 'success'
+              })
+              // this.$router.push({
+              //   path: '/login'
+              // })
+              this.$store.commit('user/SET_TOKEN', res.data.token)
+              setToken(res.data.token)
+              this.getInfos()
+              this.loading = false
             })
             .catch(() => {
-              this.loading = false;
-            });
+              this.loading = false
+            })
         } else {
-          console.log("error submit!!");
-          return false;
+          console.log('error submit!!')
+          return false
         }
-      });
-    },
-  },
-};
+      })
+    }
+  }
+}
 </script>
 
 <style lang="scss" scoped>