feature:新增B端组织架构部门成员查看C端注册页自动带邀请码功能

src/permission.js

@@ -8,7 +8,14 @@ import getPageTitle from '@/utils/get-page-title'
 
 NProgress.configure({ showSpinner: false }) // NProgress Configuration
 
-const whiteList = ['/login', '/login/tradeSinceLink', '/login/qualificationsHonors', '/login/aboutUs', '/login/contactUs'] // no redirect whitelist
+const whiteList = [
+  '/login',
+  '/login/tradeSinceLink',
+  '/login/qualificationsHonors',
+  '/login/aboutUs',
+  '/login/contactUs',
+  '/login/register'
+] // no redirect whitelist
 
 router.beforeEach(async(to, from, next) => {
   // start progress bar

src/router/index.js

@@ -57,6 +57,10 @@ export const constantRoutes = [
       {
         path: 'contactUs',
         component: () => import('@/views/login/components/ContactUsTemp.vue')
+      },
+      {
+        path: 'register',
+        component: () => import('@/views/login/components/register.vue')
       }
     ]
   },

src/views/login/components/TradeSinceLink.vue

@@ -842,8 +842,8 @@ export default {
       // justify-content: center;
       // align-items: center;
       img {
-        width: 195px;
-        height: 46px;
+        width: 195px !important;
+        height: 46px !important;
       }
       .bg-line {
         display: none;

src/views/login/components/TradeSinceLinkTemp.vue

@@ -844,8 +844,8 @@ export default {
       // justify-content: center;
       // align-items: center;
       img {
-        width: 195px;
-        height: 46px;
+        width: 195px !important;
+        height: 46px !important;
       }
       .bg-line {
         display: none;

src/views/login/components/register.vue

@@ -0,0 +1,232 @@
+<template>
+  <div class="register-page-content">
+    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="110px" label-position="top">
+      <el-form-item label="会员名称" prop="loginName" style="width: 100%">
+        <el-input v-model="ruleForm.loginName" size="medium" style="width: 100%" placeholder="请输入会员名称" />
+      </el-form-item>
+      <el-form-item label="密码" prop="password" style="width: 100%">
+        <el-input v-model="ruleForm.password" type="password" size="medium" style="width: 100%" placeholder="请输入6~16位数字和字母的组合" />
+      </el-form-item>
+      <el-form-item label="确认密码" prop="confirmPassword" style="width: 100%">
+        <el-input v-model="ruleForm.confirmPassword" type="password" size="medium" style="width: 100%" placeholder="请再次输入密码" />
+      </el-form-item>
+      <el-form-item label="手机号码" prop="mobile" style="width: 100%">
+        <el-input v-model="ruleForm.mobile" size="medium" style="width: 100%" placeholder="请输入手机号码" />
+      </el-form-item>
+      <el-form-item label="验证码" prop="code" style="width: 100%">
+        <el-input v-model="ruleForm.code" size="medium" style="width: 100%" placeholder="请输入6位数验证码">
+          <template #append>
+            <verification-code type="phone" :code="ruleForm.mobile" />
+          </template>
+        </el-input>
+      </el-form-item>
+      <el-form-item label="企业地址" prop="enterpriseAddress" style="width: 100%">
+        <div style="display: flex;">
+          <el-cascader
+            v-model="ruleForm.provinceCityIds"
+            :options="regionList"
+            :props="{ value: 'id', label: 'name' }"
+            size="medium"
+            style="width: 80%"
+          />
+          <el-input v-model="ruleForm.enterpriseAddress" size="medium" placeholder="请输入详细地址" />
+        </div>
+
+      </el-form-item>
+      <el-form-item label="推荐码（选填）" prop="referralCode" style="width: 100%">
+        <el-input v-model="ruleForm.referralCode" size="medium" style="width: 100%" placeholder="您的长银保理业务经理或支付渠道推荐码（选填）" />
+      </el-form-item>
+      <div>
+        <el-checkbox v-model="ruleForm.checked" />
+        <span class="checked">
+          我已阅读并接受
+          <span @click="protocolClick('register')">《注册协议》</span>
+          和
+          <span @click="protocolClick('privacy')">《隐私政策》</span>
+        </span>
+      </div>
+      <el-button
+        :loading="loading"
+        type="primary"
+        class="btn"
+        style="width: 100%;"
+        @click="registerClick"
+      >
+        注册
+      </el-button>
+      <!-- <div class="login">
+        已有账号？
+        <span @click="$emit('goLogin')">马上登录</span>
+      </div> -->
+    </el-form>
+
+  </div>
+</template>
+
+<script>
+import { register } from '@/api/user'
+import { getRegion } from '@/api/dictionary'
+import { treeChildrenEmpty } from '@/utils'
+export default {
+  components: {
+    VerificationCode: () => import('@/components/VerificationCode/index.vue')
+  },
+  data() {
+    return {
+      loading: false,
+      ruleForm: {
+        loginName: '',
+        password: '',
+        confirmPassword: '',
+        mobile: '',
+        code: '',
+        enterpriseAddress: '',
+        referralCode: '',
+        checked: false,
+        provinceCityIds: []
+      },
+      rules: {
+        loginName: [{ required: true, message: '请输入会员名称', trigger: 'blur' }],
+        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
+        confirmPassword: [{ required: true, message: '请输入确认密码', trigger: 'blur' }],
+        mobile: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
+        code: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
+      },
+      regionList: []
+    }
+  },
+  watch: {
+    $route: {
+      handler(val) {
+        if (val && val.query && val.query.referralCode) {
+          this.ruleForm.referralCode = val.query.referralCode
+        }
+      },
+      immediate: true
+    }
+  },
+  created() {
+    this.getRegionList()
+  },
+  methods: {
+    getRegionList() {
+      getRegion({ flag: true }).then(({ data }) => {
+        this.regionList = treeChildrenEmpty(data)
+      })
+    },
+    protocolClick(type) {
+      this.$emit('protocol', type)
+    },
+    registerClick() {
+      this.$refs.ruleForm.validate(valid => {
+        if (valid) {
+          const { password, confirmPassword, checked } = this.ruleForm
+          if (password !== confirmPassword) {
+            this.$message.warning('两次密码不一致')
+            return
+          }
+          if (!checked) {
+            this.$message.warning('请勾选用户协议')
+            return
+          }
+          const params = {
+            ... this.ruleForm
+          }
+          delete params.confirmPassword
+          params.password = this.$md5(params.password)
+          this.loading = true
+          register(params).then(() => {
+            this.$message.success('用户注册成功')
+            // this.$emit('goLogin')
+            this.$router.push({
+              path: '/login'
+            })
+          }).catch(() => {
+            this.loading = false
+          })
+        } else {
+          return false
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.register-page-content {
+  width: 100vw;
+  // height: 100vh;
+  padding: 140px 20vw 0;
+  .checked {
+    color: #2C4270;
+    font-size: 12px;
+    & > span {
+      color: #0096FF;
+      cursor: pointer;
+    }
+  }
+  .btn {
+    width:100%;
+    height: 43px;
+    font-size: 16px;
+    margin-bottom: 30px;
+    margin-top: 20px;
+  }
+  .login {
+    text-align: center;
+    color: #2C4270;
+    font-size: 12px;
+    & > span {
+      color: #0096FF;
+      cursor: pointer;
+    }
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .register-page-content {
+    width: 100vw;
+    // height: 100vh;
+    padding: 80px 4vw 0;
+    .checked {
+      color: #2C4270;
+      font-size: 12px;
+      & > span {
+        color: #0096FF;
+        cursor: pointer;
+      }
+    }
+    .btn {
+      width:90%;
+      height: 43px;
+      font-size: 16px;
+      margin-bottom: 30px;
+      margin-top: 20px;
+    }
+    .login {
+      text-align: center;
+      color: #2C4270;
+      font-size: 12px;
+      & > span {
+        color: #0096FF;
+        cursor: pointer;
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+.register-page-content {
+  .el-button--primary {
+    background-color: #0096FF;
+    border-color: #0096FF;
+  }
+  .el-button--primary:focus, .el-button--primary:hover {
+    background-color: #0096FF;
+    border-color: #0096FF;
+  }
+
+}
+</style>

src/views/login/index.vue

@@ -35,7 +35,7 @@
           @click="mobileIconClick"
         >
       </div>
-      <div v-if="!isMobileTerminal">
+      <div v-if="!isMobileTerminal && $route.path !== '/login/register'">
         <el-button type="primary" round @click="loginClick('login')">登 录</el-button>
         <el-button type="text" @click="loginClick('register')">注册</el-button>
       </div>
@@ -45,7 +45,7 @@
     </div>
     <template v-if="isMobileTerminal">
       <div v-if="showCloseIcon" class="nav-desc-mobile">
-        <div v-for="item in bannerList" :key="item.order" :style="item.isActice ? 'color: #FE7D0B': ''" @click="clickNav(item.order)">
+        <div v-for="item in bannerMobileList" :key="item.order" :style="item.isActice ? 'color: #FE7D0B': ''" @click="clickNav(item.order)">
           {{ item.name }}
         </div>
       </div>
@@ -103,7 +103,7 @@
 
     <home-bottom v-if="homepagePath === $route.path && !isMobileTerminal" />
 
-    <template v-if="isMobileTerminal">
+    <template v-if="isMobileTerminal && $route.path !== '/login/register'">
       <div class="bottom-cont">
         <div class="bt-l">
           <div class="bt-l-orange" @click="handleJumpFiling">© 陕ICP备2024033180号-1</div>
@@ -169,6 +169,38 @@ export default {
           path: '/login/contactUs'
         }
       ],
+      bannerMobileList: [
+        {
+          name: '贸理通',
+          isActice: true,
+          order: 0,
+          path: '/login/tradeSinceLink'
+        },
+        {
+          name: '资质荣誉',
+          isActice: false,
+          order: 1,
+          path: '/login/qualificationsHonors'
+        },
+        {
+          name: '关于我们',
+          isActice: false,
+          order: 2,
+          path: '/login/aboutUs'
+        },
+        {
+          name: '联系我们',
+          isActice: false,
+          order: 3,
+          path: '/login/contactUs'
+        },
+        {
+          name: '立即注册',
+          isActice: false,
+          order: 4,
+          path: '/login/register'
+        }
+      ],
       showBackToTop: false,
       isMobileTerminal: false,
       showCloseIcon: false,
@@ -186,7 +218,13 @@ export default {
   watch: {
     $route: {
       handler(val) {
-        const findIdx = this.bannerList.findIndex(el => el.path === val.path)
+        let findIdx = -1
+        this.isMobile()
+        if (this.isMobileTerminal) {
+          findIdx = this.bannerMobileList.findIndex(el => el.path === val.path)
+        } else {
+          findIdx = this.bannerList.findIndex(el => el.path === val.path)
+        }
         if (findIdx !== -1) {
           this.clickNav(findIdx)
         }
@@ -244,15 +282,23 @@ export default {
     },
     // 顶部菜单点击
     clickNav(idx) {
-      this.bannerList.forEach(element => {
-        element.isActice = false
-      })
-      this.bannerList[idx].isActice = true
-      this.$router.push({
-        path: this.bannerList[idx].path
-      })
       if (this.isMobileTerminal) {
         this.showCloseIcon = false
+        this.bannerMobileList.forEach(element => {
+          element.isActice = false
+        })
+        this.bannerMobileList[idx].isActice = true
+        this.$router.push({
+          path: this.bannerMobileList[idx].path
+        })
+      } else {
+        this.bannerList.forEach(element => {
+          element.isActice = false
+        })
+        this.bannerList[idx].isActice = true
+        this.$router.push({
+          path: this.bannerList[idx].path
+        })
       }
     },
     // 回到顶部