登录注册宏哥

2024-03-21 09:58:23 +08:00
parent e0fb7fa514
commit 65ca15721e
5 changed files with 169 additions and 65 deletions
--- a/src/api/home.js
+++ b/src/api/home.js
@@ -94,5 +94,16 @@ export function unread(params) {
        params
    });
 }
+/**
+ * 身份证姓名认证

+ * @returns 
+ */
+export function agentidcardoauth(data) {
+    return request({
+        method: "POST",
+        url: "/agent/idcardoauth",
+        data
+    });
+}

--- a/src/api/user.js
+++ b/src/api/user.js
@@ -28,7 +28,7 @@ export function getNotices(params) {
 }

 /**
- * 注册
+ * 代理商注册
 * @param {*} data 
 * @returns 
 */
@@ -39,3 +39,15 @@ export function register(data) {
    data
  })
 }
+/**
+ * 发送验证码
+ * @param {*} data 
+ * @returns 
+ */
+export function agentsendsms(data) {
+  return request({
+    method: 'post',
+    url: '/agent/sendsms',
+    data
+  })
+}
--- a/src/views/home.vue
+++ b/src/views/home.vue
@@ -63,15 +63,84 @@
  <div class="card mt15">
    <chart-card :user-id="storeUser.userInfo.userId" />
  </div>
+  <el-dialog :close-on-press-escape="false" :close-on-click-modal="false" :show-close="false" v-model="dialogVisible"
+    title="实名认证" width="500" :before-close="handleClose">
+    <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto"
+      class="demo-ruleForm" :size="formSize" status-icon>
+      <el-form-item label="身份姓名" prop="id_card_name">
+        <el-input v-model="ruleForm.id_card_name" />
+      </el-form-item>
+      <el-form-item label="身份证号" prop="id_number">
+        <el-input v-model="ruleForm.id_number" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" :loading="ruleForm.loading" style="width:70%; margin: 0 auto;"
+          @click="submitFormdialog">
+          确认
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </el-dialog>
 </template>

 <script setup>
-import { getIndexData } from '@/api/home.js'
+import { getIndexData, agentidcardoauth } from '@/api/home.js'
 import { useUser } from "@/store/user.js";
 import chartCard from '@/components/chartCard.vue';
+import _hook from "@/hooks/index.js";

 const storeUser = useUser();

+const dialogVisible = ref(storeUser.userInfo.is_id_card == 0 ? true : false)
+
+let ruleForm = reactive({
+  id_card_name: '',
+  id_number: '',
+  loading: false
+
+})
+
+const rules = reactive({
+  id_card_name: [
+    {
+      required: true,
+      message: '身份姓名不能为空',
+      trigger: 'change',
+    },
+  ],
+  id_number: [
+    {
+      required: true,
+      message: '身份证号不能为空',
+      trigger: 'change',
+    },
+  ]
+})
+const ruleFormRef = ref("");
+
+const submitFormdialog = async () => {
+  //通过 ref 的值触发验证
+  await ruleFormRef.value.validate((valid) => {
+    if (valid) {
+      ruleForm.loading = true
+      const data = {
+        id_card_name: ruleForm.id_card_name,
+        id_number: ruleForm.id_number
+      };
+      agentidcardoauth(data).then((res) => {
+        ElMessage.success('实名验证通过')
+        console.log(res)
+        _hook.useLocalStorage.set("token", res.userinfo.token);
+        _hook.useLocalStorage.set("userInfo", res.userinfo);
+        dialogVisible.value = false
+        ruleForm.loading = false
+      }).catch(err => {
+        ruleForm.loading = false
+      });
+    }
+  });
+}
+
 let homeData = reactive({
  sumConsumeFee: 0,
  sumfansShareMoney: 0,
--- a/src/views/login/login.vue
+++ b/src/views/login/login.vue
@@ -26,11 +26,11 @@
            <verificationCode @getCode="getCode" :key="verificationCodeKey"></verificationCode>
          </div>
        </el-form-item> -->
-        <!-- <div class="to_register">
+        <div class="to_register">
          <router-link :to="{ name: 'register' }">
            <el-text type="primary">注册代理商</el-text>
          </router-link>
-        </div> -->
+        </div>
        <el-form-item>
          <el-button type="primary" size="large" :loading="loading" @click="login" style="width: 100%;">登录</el-button>
        </el-form-item>
--- a/src/views/register/register.vue
+++ b/src/views/register/register.vue
@@ -4,13 +4,13 @@
            <span class="Hello">Hello !</span>
            <span class="title">欢迎注册银收客开放平台代理</span>
            <el-form ref="ruleFormRef" :rules="rules" :model="form">
-                <el-form-item prop="loginName">
-                    <el-input class="inp" v-model="form.loginName" clearable autocomplete="new-password" size="large"
-                        :prefix-icon="User" placeholder="请输入昵称" style="width: 100%;" />
+                <el-form-item prop="mobile">
+                    <el-input class="inp" v-model="form.mobile" clearable autocomplete="new-password" size="large"
+                        placeholder="请输入手机号" style="width: 100%;" />
                </el-form-item>
                <el-form-item prop="password">
                    <el-input class="inp" v-model="form.password" clearable autocomplete="new-password" size="large"
-                        type="password" :prefix-icon="Lock" placeholder="请输入手机号" style="width: 100%;" />
+                        type="password" placeholder="请输入密码" style="width: 100%;" />
                </el-form-item>
                <!-- <el-form-item>
                    <el-select v-model="form.userType" placeholder="请选择机构类型" size="large" style="width: 100%;">
@@ -19,16 +19,20 @@
                        <el-option key="SO" label="小机构" value="SO"></el-option>
                    </el-select>
                </el-form-item> -->
-                <!-- <el-form-item prop="code">
+                <el-form-item prop="captcha">
                    <div class="code-case">
-              <el-input class="inp" v-model="form.code" clearable autocomplete="new-password" size="large"
-                :prefix-icon="CircleCheck" width="100px" placeholder="验证码" />
-              <verificationCode @getCode="getCode" :key="verificationCodeKey"></verificationCode>
+                        <el-input class="inp" v-model="form.captcha" clearable autocomplete="new-password" size="large"
+                            type="text" placeholder="验证码" style="width: 100%;" />
+                        <el-button :type="state.countdown > 0 ? 'info' : 'primary'" :disabled='state.countdown > 0'
+                            @click='sendVerificationCode'>
+                            <span v-if="state.countdown > 0">{{ state.countdown }} 秒后重新发送</span>
+                            <span v-else>发送验证码</span>
+                        </el-button>
                    </div>
-          </el-form-item> -->
+                </el-form-item>
                <div class="to_register">
                    <router-link :to="{ name: 'login' }">
-                        <el-text type="primary">登录代理商</el-text>
+                        <el-text type="primary">登录</el-text>
                    </router-link>
                </div>
                <el-form-item>
@@ -41,17 +45,15 @@
 </template>

 <script setup>
-import verificationCode from "@/components/verificationCode.vue"
-import { User, Lock, CircleCheck } from "@element-plus/icons-vue"
 import { useUser } from "@/store/user.js"
-import { register } from "@/api/user.js"
+import { register, agentsendsms } from "@/api/user.js"
 import { ElMessage } from "element-plus";
+import _hook from "@/hooks/index.js";

 const ruleFormRef = ref("");
 const store = useUser();
-const router = useRouter();
 const loading = ref(false)
-
+const router = useRouter();
 onMounted(() => {
    // ElMessage({
    //   message: "请使用用户名为 admin、yonghu1、yonghu2 进行登录测试，来获取不同的权限",
@@ -60,22 +62,44 @@ onMounted(() => {
    // });
 });

-let verificationCodeKey = ref(0);
-let trueCode = ref("");
+// 倒计时
+const state = reactive({
+    countdown: 0,
+    timer: null
+})
+const sendVerificationCode = () => {
+    if (form.mobile) {
+        try {
+            agentsendsms({
+                mobile: form.mobile,
+                event: 'register'
+            }).then((res) => {
+                ElMessage.success('验证码发送成功')
+                state.countdown = 60
+                state.timer = setInterval(() => {
+                    if (state.countdown > 0) {
+                        state.countdown--
+                    } else {
+                        clearInterval(state.timer)
+                    }
+                }, 1000)
+            }).catch(err => {
+            });
+        } catch (error) {

-/**
- * @description: 获取正确的验证码值
- * @param {*} code: 正确的验证码
- */
-function getCode(code) {
-    trueCode.value = code;
        }

+    } else {
+        ElMessage.error('手机号不可为空')
+
+    }
+
+}
 const form = reactive({
-    loginName: "",
+    mobile: "",
    password: "",
    userType: 'MG',
-    code: "",
+    captcha: "",
 });
 /**
 * @description: 自定义验证 - 验证账号
@@ -88,25 +112,11 @@ function checkName(rule, value, callback) {
    }
 }

-/**
- * @description: 自定义验证 - 验证验证码
- */
-function checkCode(rule, value, callback) {
-    if (value === "") {
-        callback(new Error("验证码不可为空"));
-    } else if (value !== trueCode.value) {
-        verificationCodeKey.value++;
-        callback(new Error("验证码不正确"));
-    } else {
-        callback();
-    }
-}
-
 // form 验证
 const rules = reactive({
-    loginName: [{ validator: checkName, required: true, trigger: "blur" }],
+    mobile: [{ validator: checkName, required: true, trigger: "blur" }],
    password: [{ required: true, message: "密码不可为空", trigger: "blur" }],
-    code: [{ validator: checkCode, required: true, trigger: "blur" }],
+    captcha: [{ required: true, message: "密码不可为空", trigger: "blur" }],
 });

 // 登录
@@ -115,14 +125,18 @@ async function login() {
    await ruleFormRef.value.validate((valid) => {
        if (valid) {
            loading.value = true
-            const params = {
-                nickname: form.loginName,
-                mobile: form.password
+            const data = {
+                mobile: form.mobile,
+                password: form.password,
+                captcha: form.captcha
            };
-            register(params).then((res) => {
-                ElMessage.success('注册成功，请等待审核！')
+            register(data).then((res) => {
+                console.log(res)
+                ElMessage.success('注册成功')
                loading.value = false
-                // router.replace("/home");
+                _hook.useLocalStorage.set("token",res.userinfo.token);
+                _hook.useLocalStorage.set("userInfo",res.userinfo);
+                router.replace("/home");
            }).catch(err => {
                loading.value = false
            });
@@ -130,7 +144,6 @@ async function login() {
    });
 }
 // 回车键触发登录操作
-_hook.useKeyStroke("Enter", login);
 </script>

 <style lang="scss" scoped>
@@ -184,4 +197,3 @@ _hook.useKeyStroke("Enter", login);
    padding-bottom: 20px;
 }
 </style>
-