feat(user): change

src/request/organization.ts

@@ -3,7 +3,8 @@ import { ResPage, ResResult } from './type'
 import { organizationTypeEnum } from '@/store/organization'
 import * as URL from "./URL";
 import { ElMessage } from "element-plus";
-import { throttle } from "@/util";
+import { throttle, encodePwd } from "@/util";
+
 const error = throttle((msg: string) => ElMessage.error(msg), 2000);
 const success = throttle((msg: string) => ElMessage.success(msg), 2000);
 
@@ -67,8 +68,11 @@ export const getOrgListFetchList = () =>
     });
 
 
-export const registerOrganization = (params: any) =>
-    sendFetch<ResResult>(URL.registerOrganization, {
+export const registerOrganization = (params: any) => {
+    const password = encodePwd(params.password)
+    return sendFetch<ResResult>(URL.registerOrganization, {
         method: "post",
-        body: JSON.stringify({ ...params }),
-    });
+        body: JSON.stringify({ ...params, password, confirmPwd: password }),
+    });
+
+}

src/view/register/register.vue

@@ -16,22 +16,19 @@
                         v-for="(type, key) in OrganizationTypeDesc" />
                 </el-select>
             </el-form-item>
-            <el-form-item class="panel-form-item" label="姓名" prop="contact">
+            <el-form-item class="panel-form-item" label="姓名">
                 <el-input :maxlength="200" v-model.trim="form.contact" placeholder="请选择"></el-input>
             </el-form-item>
 
 
             <el-form-item class="panel-form-item" prop="userName" label="账号" required>
-                <el-input v-model.trim="form.userName" placeholder="请输入手机号码">
+                <el-input :maxlength="11" v-model.trim="form.userName" placeholder="请输入手机号码">
                 </el-input>
             </el-form-item>
 
             <el-form-item class="panel-form-item msgcode" prop="msgAuthCode" label="验证码" required>
                 <el-input :maxlength="8" v-model.trim="form.msgAuthCode" placeholder="输入验证码">
                 </el-input>
-                <!-- <el-button class="getMsgAuthCode" @click="getCheckCode">
-                    获取验证码
-                </el-button> -->
                 <el-button class="getMsgAuthCode" :loading="checkCodeBtn.loading" :disabled="checkCodeBtn.disabled"
                     style="margin-left: 10px" @click="getCheckCode"> {{ checkCodeBtn.text }}</el-button>
             </el-form-item>
@@ -90,7 +87,7 @@ import { ElMessage, type FormInstance, type FormRules } from "element-plus";
 import { OrganizationTypeDesc } from '@/store/organization';
 import { View, Hide } from '@element-plus/icons-vue';
 import { registerOrganization } from '@/request/organization';
-
+// import { encodePwd } from "@/util";
 
 import {
     getMsgAuthCode,
@@ -145,8 +142,8 @@ const rules = reactive<FormRules>({
 const form = reactive({
     orgName: "",
     type: "",
-    phone: "",
     userName: "",
+    // userName: "",
     password: "",
     contact: "",
     confirmPwd: "",

src/view/register/reset.vue

@@ -1,32 +1,59 @@
 <template>
     <div class="register">
-        <el-form class="panel" :model="form" @submit.stop>
+        <el-form class="panel" :model="form" :rules="rules" ref="baseFormRef">
             <h2>重置密码</h2>
+    
 
-
-            <el-form-item class="panel-form-item" label="手机号">
-                <el-input v-model.trim="form.userName" placeholder="请输入手机号码">
+            <el-form-item class="panel-form-item" prop="userName" label="账号" required>
+                <el-input :maxlength="11" v-model.trim="form.userName" placeholder="请输入手机号码">
                 </el-input>
             </el-form-item>
 
-
-            <el-form-item class="panel-form-item msgcode" label="验证码">
-                <el-input :maxlength="11" v-model.trim="form.msgAuthCode" placeholder="输入验证码">
+            <el-form-item class="panel-form-item msgcode" prop="msgAuthCode" label="验证码" required>
+                <el-input :maxlength="8" v-model.trim="form.msgAuthCode" placeholder="输入验证码">
                 </el-input>
-                <el-button class="getMsgAuthCode">
-                    获取验证码
-                </el-button>
+                <el-button class="getMsgAuthCode" :loading="checkCodeBtn.loading" :disabled="checkCodeBtn.disabled"
+                    style="margin-left: 10px" @click="getCheckCode"> {{ checkCodeBtn.text }}</el-button>
             </el-form-item>
 
-            <el-form-item class="panel-form-item" label="重置密码">
+            <!-- <el-form-item class="panel-form-item" label="密码" prop="password" required>
                 <el-input v-model.trim="form.password" placeholder="请输入8-16位数字、字母大小写组合">
                 </el-input>
-            </el-form-item>
+            </el-form-item> -->
+            <el-form-item class="panel-form-item" label="密码" prop="password" required>
+                <el-input autocomplete="off" readonly onfocus="this.removeAttribute('readonly');"
+                    v-model="form.password" :type="addPassFlag ? 'text' : 'password'" :maxlength="20"
+                    placeholder="请输入8-16位数字、字母大小写组合">
+                    <template #suffix>
+                        <span @click="addPassFlag = !addPassFlag" style="cursor: pointer;">
+                            <el-icon v-if="addPassFlag">
+                                <View />
+                            </el-icon>
+                            <el-icon v-else>
+                                <Hide />
+                            </el-icon>
+                        </span>
+                    </template>
+                </el-input>
 
+            </el-form-item>
 
-            <el-form-item class="panel-form-item" label="确认密码">
-                <el-input v-model.trim="form.confirmPwd" placeholder="输入再次输入密码">
+            <el-form-item class="panel-form-item" label="密码确认" prop="confirmPwd" required>
+                <el-input autocomplete="off" readonly onfocus="this.removeAttribute('readonly');"
+                    v-model="form.confirmPwd" :type="addPassFlag1 ? 'text' : 'password'" :maxlength="20"
+                    placeholder="输入再次输入密码">
+                    <template #suffix>
+                        <span @click="addPassFlag1 = !addPassFlag1" style="cursor: pointer;">
+                            <el-icon v-if="addPassFlag1">
+                                <View />
+                            </el-icon>
+                            <el-icon v-else>
+                                <Hide />
+                            </el-icon>
+                        </span>
+                    </template>
                 </el-input>
+
             </el-form-item>
 
             <el-form-item class="panel-form-item">
@@ -38,32 +65,127 @@
     </div>
 </template>
 <script lang="ts" setup>
-import { reactive } from 'vue'
+import { reactive, ref, unref } from 'vue'
+import { ElMessage, type FormInstance, type FormRules } from "element-plus";
+import { OrganizationTypeDesc } from '@/store/organization';
+import { View, Hide } from '@element-plus/icons-vue';
+import { registerOrganization } from '@/request/organization';
+// import { encodePwd } from "@/util";
+
+import {
+    getMsgAuthCode,
+} from "@/request";
+
+
+const baseFormRef = ref<FormInstance>();
+const addPassFlag = ref(false) //图标显示标识
+const addPassFlag1 = ref(false) //图标显示标识
+
+let checkCodeBtn = reactive<any>({
+    text: '获取验证码',
+    loading: false,
+    disabled: false,
+    duration: 60,
+    timer: null
+})
+
+const equalToPassword = (_, value: any, callback: any) => {
+    if (form.password !== value) {
+        callback(new Error("两次输入的密码不一致"));
+    } else {
+        callback();
+    }
+};
+const rules = reactive<FormRules>({
+    orgName: [
+        { required: true, message: "请选择单位名称", trigger: "select" },
+    ],
+    msgAuthCode: [
+        { required: true, message: "请输入验证码", trigger: "change" },
+    ],
+    contact: [
+        { required: true, message: "请输入姓名", trigger: "blur" },
+    ],
+    userName: [
+        { required: true, message: "请输入手机号码", trigger: "blur" },
+        { required: true, pattern: /^1[3456789]\d{9}$/, message: "请输入手机号码", trigger: "blur" },
+    ],
+    password: [
+        { required: true, pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,16}$/, message: "请输入8-16位数字、字母大小写组合", trigger: "blur" },
+        { required: true, min: 8, message: '密码太短！', trigger: "blur" },
+    ],
+    confirmPwd: [
+        { required: true, pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,16}$/, message: "请输入8-16位数字、字母大小写组合", trigger: "blur" },
+        { required: true, min: 8, message: '密码太短！', trigger: "blur" },
+        { required: true, validator: equalToPassword, trigger: "blur" }
+    ],
+},)
+
 
 const form = reactive({
     orgName: "",
     type: "",
-    phone: "",
-    nickName: "",
     userName: "",
+    // userName: "",
     password: "",
+    contact: "",
     confirmPwd: "",
     msgAuthCode: "",
-    country: 86,
 });
 
-const submitClick = () => {
+const getCheckCode = async () => {
+    // 倒计时期间按钮不能单击
+    await unref(baseFormRef)?.validateField('userName');
+
+    const phoneNum = form.userName
+    console.log('getMsgCode', phoneNum)
+    const res = await getMsgAuthCode('+86', phoneNum)
+    if (res.success) {
+        ElMessage.success(res.data);
+    }
+    if (checkCodeBtn.duration == 60) {
+        checkCodeBtn.disabled = true
+    }
+    // 清除掉定时器
+    checkCodeBtn.timer && clearInterval(checkCodeBtn.timer)
+    // 开启定时器
+    checkCodeBtn.timer = setInterval(() => {
+        const tmp = checkCodeBtn.duration--
+        checkCodeBtn.text = `${tmp}秒`
+        if (tmp <= 0) {
+            // 清除掉定时器
+            clearInterval(checkCodeBtn.timer)
+            checkCodeBtn.duration = 60
+            checkCodeBtn.text = '重新获取'
+            // 设置按钮可以单击
+            checkCodeBtn.disabled = false
+        }
+        console.info(checkCodeBtn.duration)
+    }, 1000)
+}
 
+const submitClick = async () => {
+    if (unref(baseFormRef)) {
+        const res = await unref(baseFormRef)?.validate();
+        if (res) {
+            const result = await registerOrganization(form)
+            console.log('result', result)
+            // ElMessage.success('新增成功！');
+        }
+    } else {
+        throw "";
+    }
 }
 </script>
 
 <style lang="scss" scoped>
 .register {
-    // background: #FFFFFF;
-    // box-shadow: 0px 2px 20px 0px rgba(5, 38, 38, 0.15);
-    // border-radius: 10px 10px 10px 10px;
     padding: 10px 0;
 
+    .panel {
+        width: 430px;
+    }
+
     .panel-form-item {
         padding-left: 0;
         padding-right: 0;
@@ -83,12 +205,26 @@ const submitClick = () => {
     :deep(.panel-form-item .el-form-item__label) {
         line-height: 40px;
         font-size: 16px;
-        min-width: 80px;
+        min-width: 90px;
+    }
+
+    :deep(.el-form-item__error) {
+        font-size: 14px;
+    }
+
+    :deep(.el-select) {
+        width: 100%;
+        height: 42px;
+        line-height: 42px;
+
+        .el-select__wrapper {
+            height: 100%;
+            font-size: 1.14rem;
+        }
     }
 
     .msgcode {
         position: relative;
-
     }
 
     .getMsgAuthCode {
@@ -105,5 +241,15 @@ const submitClick = () => {
     .fill {
         width: 100%;
     }
+
+
+}
+</style>
+<style>
+.register-select-option {
+    font-size: 1.14rem;
+    min-height: 50px;
+    line-height: 50px;
+    /* padding: 5px 0; */
 }
 </style>