登录注册 宏哥

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
+    });
+}
 

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
+  })
+}

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,

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>

src/views/register/register.vue

@@ -4,31 +4,35 @@
             <span class="Hello">Hello !</span>
             <span class="title">欢迎注册银收客开放平台代理</span>
             <el-form ref="ruleFormRef" :rules="rules" :model="form">
-                <el-form-item prop="loginName">
+                <el-form-item prop="mobile">
-                    <el-input class="inp" v-model="form.loginName" clearable autocomplete="new-password" size="large"
+                    <el-input class="inp" v-model="form.mobile" clearable autocomplete="new-password" size="large"
-                        :prefix-icon="User" placeholder="请输入昵称" style="width: 100%;" />
+                        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%;">
+                    <el-select v-model="form.userType" placeholder="请选择机构类型" size="large" style="width: 100%;">
-              <el-option key="MG" label="平台" value="MG"></el-option>
+                        <el-option key="MG" label="平台" value="MG"></el-option>
-              <el-option key="FO" label="大机构" value="FO"></el-option>
+                        <el-option key="FO" label="大机构" value="FO"></el-option>
-              <el-option key="SO" label="小机构" value="SO"></el-option>
+                        <el-option key="SO" label="小机构" value="SO"></el-option>
-            </el-select>
+                    </el-select>
-          </el-form-item> -->
+                </el-form-item> -->
-                <!-- <el-form-item prop="code">
+                <el-form-item prop="captcha">
-            <div class="code-case">
+                    <div class="code-case">
-              <el-input class="inp" v-model="form.code" clearable autocomplete="new-password" size="large"
+                        <el-input class="inp" v-model="form.captcha" clearable autocomplete="new-password" size="large"
-                :prefix-icon="CircleCheck" width="100px" placeholder="验证码" />
+                            type="text" placeholder="验证码" style="width: 100%;" />
-              <verificationCode @getCode="getCode" :key="verificationCodeKey"></verificationCode>
+                        <el-button :type="state.countdown > 0 ? 'info' : 'primary'" :disabled='state.countdown > 0'
-            </div>
+                            @click='sendVerificationCode'>
-          </el-form-item> -->
+                            <span v-if="state.countdown > 0">{{ state.countdown }} 秒后重新发送</span>
+                            <span v-else>发送验证码</span>
+                        </el-button>
+                    </div>
+                </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>
@@ -39,19 +43,17 @@
         </div>
     </div>
 </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) {
+
+        }
+
+    } else {
+        ElMessage.error('手机号不可为空')
+
+    }
 
-/**
- * @description: 获取正确的验证码值
- * @param {*} code: 正确的验证码
- */
-function getCode(code) {
-    trueCode.value = code;
 }
-
 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 = {
+            const data = {
-                nickname: form.loginName,
+                mobile: form.mobile,
-                mobile: form.password
+                password: form.password,
+                captcha: form.captcha
             };
-            register(params).then((res) => {
+            register(data).then((res) => {
-                ElMessage.success('注册成功，请等待审核！')
+                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,9 +144,8 @@ async function login() {
     });
 }
 // 回车键触发登录操作
-_hook.useKeyStroke("Enter", login);
 </script>
-  
+
 <style lang="scss" scoped>
 .login-case {
     position: fixed;
@@ -183,5 +196,4 @@ _hook.useKeyStroke("Enter", login);
     font-size: 14px;
     padding-bottom: 20px;
 }
-</style>
+</style>
-