fix

src/App.vue

@@ -19,4 +19,3 @@ onMounted(async () => {
 <template>
   <router-view></router-view>
 </template>
-

src/router.ts

@@ -79,22 +79,22 @@ const routes = [
       //       /* webpackChunkName: "companyVerify" */ "@/views/userCenter/CompanyVerify.vue"
       //     ),
       // },
-      // {
-      //   path: "/editPassword",
-      //   name: "editPassword",
-      //   component: () =>
-      //     import(
-      //       /* webpackChunkName: "editPassword" */ "@/views/userCenter/EditPassword.vue"
-      //     ),
-      // },
-      // {
-      //   path: "/editPhone",
-      //   name: "editPhone",
-      //   component: () =>
-      //     import(
-      //       /* webpackChunkName: "editPhone" */ "@/views/userCenter/EditPhone.vue"
-      //     ),
-      // },
+      {
+        path: "/editPassword",
+        name: "editPassword",
+        component: () =>
+          import(
+            /* webpackChunkName: "editPassword" */ "@/views/userCenter/EditPassword/index.vue"
+          ),
+      },
+      {
+        path: "/editPhone",
+        name: "editPhone",
+        component: () =>
+          import(
+            /* webpackChunkName: "editPhone" */ "@/views/userCenter/EditPhone/index.vue"
+          ),
+      },
       {
         path: "/personVerify",
         name: "personVerify",

src/style.css

@@ -6,3 +6,22 @@
   --bg-gray: #f8f8f8;
   box-sizing: content-box;
 }
+
+.formlayout1 .el-form-item__label {
+  width: 129px;
+  line-height: 40px;
+}
+.formlayout1 .el-form-item__label::before {
+  content: "" !important;
+}
+.formlayout1 .inputContainer {
+  width: 610px;
+}
+.formlayout1 .el-form-item__content {
+  width: 610px;
+  margin-left: 20px !important;
+}
+.formlayout1 .el-input__inner {
+  height: 40px;
+  width: 610px;
+}
\ No newline at end of file

src/views/userCenter/EditPassword/config.ts

+import { sendEmail, sendSms } from "@/service/Api.service";
+import { filterPhone } from "cqk-sy-ui";
+import { iFormItem } from "cqk-sy-ui/sy/components/BusinessForm";
+import { ElMessage } from "element-plus";
+
+export const generateFormList = (
+  data: { phone: string; email: string },
+  submit: any
+) => {
+  return [
+    {
+      type: "text",
+      label: data.phone ? "手机号" : "邮箱",
+      defaultValue: data.phone ? filterPhone(data.phone) : data.email,
+      showLabel: true,
+    },
+    {
+      type: "input",
+      showLabel: true,
+      label: "输入密码",
+      placeholder: "请输入密码，8~20位包含数字、大小写字母",
+    },
+    {
+      type: "codeInput",
+      showLabel: true,
+      placeholder: "请输入6位验证码",
+      label: "验证码",
+      async handleClickSendCode(roleForm: any, formEl) {
+        let res = null;
+        if (data.phone) {
+          res = await sendSms({
+            phone: data.phone,
+            template_id: 1,
+          });
+        } else {
+          // 邮箱
+          res = await sendEmail({
+            email: data.email,
+            template_id: 1,
+          });
+        }
+        if (res) {
+          ElMessage({
+            message: "发送成功",
+            type: "success",
+          });
+          return true;
+        } else return false;
+      },
+    },
+    {
+      type: "submitButton",
+      text: "提交修改",
+      btnProps: {
+        type: "primary",
+      },
+      styles:
+        "background-color: #409EFF; height:38px;margin-top: 10px;margin-left: 50px; padding: 12px 20px;",
+      async onSubmit(valid, data) {
+        data = {
+          phone: data.手机号,
+          email: data.邮箱,
+          pwd: data.输入密码,
+          code: data.验证码,
+        };
+        submit(data);
+      },
+    },
+  ] as iFormItem[];
+};

src/views/userCenter/EditPassword/index.vue

+<template>
+    <div class="edit-password">
+        <el-breadcrumb separator="/" class="head-nav">
+            <el-breadcrumb-item :to="{ path: '/userCenter' }">用户中心</el-breadcrumb-item>
+            <el-breadcrumb-item>修改登录密码</el-breadcrumb-item>
+        </el-breadcrumb>
+        <p class="title">修改登录密码：</p>
+        <syBusinessForm :form-list="formList" class="formlayout1"></syBusinessForm>
+    </div>
+</template>
+<script lang="ts">
+import { defineComponent } from "vue";
+import { editPassword } from "@/service/Api.service";
+import { globalState } from "@/store/state";
+import { ElMessage, ElBreadcrumb, ElBreadcrumbItem } from "element-plus";
+import md5 from "js-md5";
+import { filterPhone, syBusinessForm } from "cqk-sy-ui"
+import { generateFormList } from "./config"
+
+
+// 8~20位包含数字、大小写字母
+export function validPassword(pwd: string) {
+    const reg = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,16}$/
+    return reg.test(pwd)
+}
+
+
+export default defineComponent({
+    components: {
+        ElBreadcrumb, ElBreadcrumbItem, syBusinessForm
+    },
+    data() {
+        return {
+            passwordForm: {
+                phone: globalState.userInfos.phone,
+                email: globalState.userInfos.email,
+                pwd: "",
+                code: "",
+            },
+            formList: generateFormList({ phone: globalState.userInfos.phone, email: globalState.userInfos.email }, this.confirm)
+        };
+    },
+    created() {
+        if (
+            !globalState.userInfos.phone &&
+            !globalState.userInfos.email
+        ) {
+            this.$router.push("/userCenter");
+        }
+    },
+    methods: {
+        filterPhone,
+        async confirm(data: any) {
+            // 密码格式校验
+            if (!validPassword(data.pwd)) {
+                ElMessage({
+                    message: "用户密码错误",
+                    type: "error",
+                });
+                return;
+            }
+            if (data.code.trim() === "") {
+                ElMessage("验证码不可为空");
+                return;
+            }
+            let info = {};
+            if (globalState.userInfos.phone !== "") {
+                info = {
+                    phone: data.phone,
+                    code_type: 0,
+                    pwd: md5(
+                        String(data.pwd) +
+                        md5(String(data.pwd.length))
+                    ),
+                    code: data.code,
+                };
+            } else if (globalState.userInfos.email !== "") {
+                info = {
+                    email: data.email,
+                    pwd: md5(
+                        String(data.pwd) +
+                        md5(String(data.pwd.length))
+                    ),
+                    code: data.code,
+                    code_type: 1,
+                };
+            }
+            const res = await editPassword(info);
+            if (res && res.code === 200) {
+                ElMessage({
+                    message: "密码修改成功",
+                    type: "success",
+                });
+                this.$router.push("/userCenter");
+            }
+        },
+    },
+});
+</script>
+
+<style scoped>
+.edit-password {
+    padding: 16px;
+    min-height: calc(100vh - 95px);
+    min-width: 1200px;
+    background: #f8fafb;
+}
+.head-nav {
+    margin: 12px 0 40px 47px;
+}
+.title {
+    margin-left: 47px;
+    font-size: 20px;
+    font-family: PingFangSC-Semibold;
+    font-weight: 600;
+    color: rgba(53, 53, 53, 1);
+    line-height: 40px;
+}
+.form {
+    width: 900px;
+}
+.form .el-input {
+    width: 610px;
+}
+.form-code .el-input {
+    width: 480px;
+}
+.form-item {
+    margin-bottom: 28px;
+}
+.confirm-btn {
+    margin-top: 10px;
+    margin-left: 50px;
+}
+</style>
+
+<style>
+.edit-password .el-form-item__label {
+    margin-right: 21px;
+}
+</style>
+

src/views/userCenter/EditPhone/config.ts

+import { sendEmail, sendSms } from "@/service/Api.service";
+import { filterPhone } from "cqk-sy-ui";
+import { iFormItem } from "cqk-sy-ui/sy/components/BusinessForm";
+import { ElMessage } from "element-plus";
+
+export const generateStep1FormList = (
+  data: { phone: string; email: string },
+  submit: any
+) => {
+  return [
+    {
+      type: "text",
+      label: data.phone ? "原手机号" : "当前邮箱",
+      defaultValue: data.phone ? filterPhone(data.phone) : data.email,
+      showLabel: true,
+    },
+    {
+      type: "codeInput",
+      showLabel: true,
+      placeholder: "请输入验证码",
+      maxLen: 6,
+      label: "验证码",
+      async handleClickSendCode(roleForm: any, formEl) {
+        let res = null;
+        if (data.phone) {
+          res = await sendSms({
+            phone: data.phone,
+            template_id: 3,
+          });
+        } else {
+          // 邮箱
+          res = await sendEmail({
+            email: data.email,
+            template_id: 3,
+          });
+        }
+        if (res) {
+          ElMessage({
+            message: "发送成功",
+            type: "success",
+          });
+          return true;
+        } else return false;
+      },
+    },
+    {
+      type: "submitButton",
+      text: "下一步",
+      btnProps: {
+        type: "primary",
+      },
+      styles:
+        "background-color: #409EFF; height:38px;margin-top: 10px;margin-left: 50px; padding: 12px 20px;",
+      async onSubmit(valid, data) {
+        data = {
+          phone: data.原手机号,
+          email: data.当前邮箱,
+          code: data.验证码,
+        };
+        submit(data);
+      },
+    },
+  ] as iFormItem[];
+};
+
+export const generateStep2FormList = (submit: any) => {
+  return [
+    {
+      type: "input",
+      showLabel: true,
+      label: "新手机号",
+      placeholder: "请输入新手机号",
+      maxLen: 11,
+    },
+    {
+      type: "codeInput",
+      showLabel: true,
+      placeholder: "请输入验证码",
+      maxLen: 6,
+      label: "验证码",
+      async handleClickSendCode(roleForm: any, formEl) {
+        let res = null;
+        res = await sendSms({
+          phone: roleForm.新手机号,
+          template_id: 3,
+        });
+        if (res) {
+          ElMessage({
+            message: "发送成功",
+            type: "success",
+          });
+          return true;
+        } else return false;
+      },
+    },
+    {
+      type: "submitButton",
+      text: "提交修改",
+      btnProps: {
+        type: "primary",
+      },
+      styles:
+        "background-color: #409EFF; height:38px;margin-top: 10px;margin-left: 50px; padding: 12px 20px;",
+      async onSubmit(valid, data) {
+        data = {
+          phone: data.新手机号,
+          code: data.验证码,
+        };
+        submit(data);
+      },
+    },
+  ] as iFormItem[];
+};

src/views/userCenter/EditPhone/index.vue

+<template>
+    <div class="edit-phone">
+        <el-breadcrumb separator="/" class="head-nav">
+            <el-breadcrumb-item :to="{ path: '/userCenter' }">用户中心</el-breadcrumb-item>
+            <el-breadcrumb-item v-if="globalState.userInfos.phone">修改绑定手机</el-breadcrumb-item>
+            <el-breadcrumb-item v-else>绑定手机</el-breadcrumb-item>
+        </el-breadcrumb>
+        <p class="title" v-if="globalState.userInfos.phone">修改绑定手机：</p>
+        <p class="title" v-else>绑定手机：</p>
+        <syBusinessForm class="formlayout1" v-if="!originPass" :formList="setp1FormList"></syBusinessForm>
+        <syBusinessForm v-else class="formlayout1" :formList="setp2FormList"></syBusinessForm>
+    </div>
+</template>
+<script lang="ts">
+import { checkOldPhone, editPhone } from "@/service/Api.service";
+import { globalState } from "@/store/state";
+import { filterPhone, syBusinessForm } from "cqk-sy-ui";
+import { ElMessage, ElBreadcrumb, ElBreadcrumbItem } from "element-plus";
+import { defineComponent } from "vue"
+import { generateStep1FormList, generateStep2FormList } from "./config";
+export default defineComponent({
+    props: ["Infos"],
+    components: {
+        ElBreadcrumb, ElBreadcrumbItem, syBusinessForm,
+    },
+    data() {
+        return {
+            originPass: false, // 显示下个步骤
+            oldPhone: {
+                phone: globalState.userInfos.phone,
+                code: "",
+                email: globalState.userInfos.email,
+            },
+            tip: true,
+            newPhone: {
+                phone: "",
+                code: "",
+                random_token: "",
+            },
+            setp1FormList: generateStep1FormList({
+                phone: globalState.userInfos.phone,
+                email: globalState.userInfos.email,
+            }, this.confirm),
+            setp2FormList: generateStep2FormList(this.confirm)
+        };
+    },
+    created() {
+        if (
+            !globalState.userInfos.phone &&
+            !globalState.userInfos.email
+        ) {
+            this.$router.push("/userCenter");
+        }
+    },
+    methods: {
+        filterPhone,
+        async sendCode() {
+            ElMessage({
+                message: "发送成功",
+                type: "success",
+            });
+        },
+        async confirm(data: any) {
+            if (!this.originPass) {
+                if (data.code.trim() === "") {
+                    ElMessage("验证码不可为空");
+                    return;
+                }
+                let info = {};
+                if (globalState.userInfos.phone) {
+                    info = {
+                        code: data.code,
+                        code_type: 0,
+                        phone: globalState.userInfos.phone,
+                    };
+                } else if (globalState.userInfos.email) {
+                    info = {
+                        code: data.code,
+                        code_type: 1,
+                        email: globalState.userInfos.email,
+                    };
+                }
+                const old = await checkOldPhone(info);
+                if (old && old.code === 200) {
+                    ElMessage({
+                        message: "验证成功",
+                        type: "success",
+                    });
+                    this.originPass = true;
+                    setTimeout(() => {
+                        let that: any;
+                        that = this.$refs.child;
+                        that.start();
+                    }, 100);
+                    this.newPhone.random_token = old.data.random_token;
+                }
+            } else {
+                if (data.phone === "") {
+                    ElMessage("新手机号码不可为空");
+                    return;
+                } else if (data.code === "") {
+                    ElMessage("验证码不可为空");
+                    return;
+                }
+                const newphone = await editPhone({
+                    code: data.code,
+                    new_phone: String(data.phone),
+                    random_token: this.newPhone.random_token,
+                });
+                if (newphone && newphone.code === 200) {
+                    ElMessage({
+                        message: "操作成功",
+                        type: "success",
+                    });
+                    this.$router.push("/userCenter");
+                }
+            }
+        },
+    },
+    computed: {
+        globalState() {
+            return globalState;
+        }
+    }
+});
+</script>
+
+
+<style scoped>
+.edit-phone {
+    padding: 16px;
+    min-height: calc(100vh - 95px);
+    min-width: 1200px;
+    background: #f8fafb;
+}
+.head-nav {
+    margin: 12px 0 40px 47px;
+}
+.title {
+    margin-left: 47px;
+    font-size: 20px;
+    font-family: PingFangSC-Semibold;
+    font-weight: 600;
+    color: rgba(53, 53, 53, 1);
+    line-height: 40px;
+}
+.form {
+    width: 900px;
+}
+.form .el-input {
+    width: 610px;
+}
+.form-item {
+    margin-bottom: 28px;
+}
+.code-item {
+    width: 478px !important;
+}
+.confirm-btn {
+    margin-top: 10px;
+    margin-left: 50px;
+}
+</style>
+<style>
+.edit-phone .el-form-item__label {
+    margin-right: 21px;
+}
+</style>
+

src/views/userCenter/PersonVerify/index.vue

@@ -6,7 +6,7 @@
         </el-breadcrumb>
         <div class="verify-form" v-if="!verstatus">
             <p class="title">请提交您的实名认证信息：</p>
-            <syBusinessForm :formList="formList" class="personVerifyForm"></syBusinessForm>
+            <syBusinessForm :formList="formList" class="formlayout1"></syBusinessForm>
         </div>
         <div class="verify-success g-flex-center" v-if="verstatus">
             <div class="success-box">
@@ -165,26 +165,7 @@ export default defineComponent({
     },
 });
 </script>
-<style>
-.personVerifyForm .el-form-item__label {
-    width: 129px;
-    line-height: 40px;
-}
-.personVerifyForm .el-form-item__label::before {
-    content: "" !important;
-}
-.personVerifyForm .inputContainer {
-    width: 610px;
-}
-.personVerifyForm .el-form-item__content {
-    width: 610px;
-    margin-left: 20px !important;
-}
-.personVerifyForm .el-input__inner {
-    height: 40px;
-    width: 610px;
-}
-</style>
+
 
 <style scoped lang="scss">
 .person-verify {