注册登录更改

zhangwei

2025-08-19 78921416615f450f4cc29ec4f740fbf1b47d8b00

 src/views/login/index.vue

@@ -7,13 +7,14 @@
  reactive,
  computed,
  ref,
  Ref,
  h,
  onMounted,
  defineAsyncComponent,
  onUnmounted,
  watch
} from "vue";
import { debounce } from "@pureadmin/utils";
import { debounce, storageLocal } from "@pureadmin/utils";
import { useNav } from "@/layout/hooks/useNav";
import { useEventListener } from "@vueuse/core";
import type { FormInstance } from "element-plus";
@@ -120,6 +121,8 @@
  myEnterpriseList: [],
  nowRole: {}
});
let secondCode = "";
let secondId: Ref<string | number | boolean> = ref("");
// 验证码过期计时器
let timer: any = null;
let phonetimer: any = null;
@@ -127,18 +130,6 @@
// 页面初始化
onMounted(async () => {
  getCaptcha();
  exRole().then(res => {
    state.roleList = res.result;
    const role = route.query;
    if (role.code) {
      state.nowRole = state.roleList.find(item => {
        return item.code == role.code;
      });
    } else {
      state.nowRole = state.roleList[0];
    }
    state.ruleForm.exRoleCode = state.nowRole.code;
  });
  // 注册验证码过期计时器
  timer = setInterval(() => {
    if (state.expirySeconds > 0) state.expirySeconds -= 1;
@@ -157,131 +148,104 @@
    width: "30%",
    title: "选择登录公司",
    contentRenderer: () =>
    h(ElForm, {
      h(
        ElForm,
        {
      ref: ruleFormRef,
      model: state.ruleForm,
      rules: loginRules,
      size: 'large'
    }, [
      h(Motion, { delay: 150 }, [
        h(ElFormItem, {
          prop: 'exRoleCode',
          label: '主体角色' // 可添加表单项标签
        }, [
          // 单选框组 - 父容器添加样式控制
          h(ElRadioGroup, {
            modelValue: state.ruleForm.exRoleCode,
            'onUpdate:modelValue': (val) => {
              state.ruleForm.exRoleCode = val
          size: "large"
            },
            style: {
              display: 'flex',
              flexDirection: 'column',
              gap: '8px' // 单选框之间的间距
        [
          h(Motion, { delay: 150 }, [
            h(
              ElFormItem,
              {
                prop: "exRoleCode",
                label: ""
              },
              [
                // 单选框组 - 纵向排列
                h(
                  ElRadioGroup,
                  {
                    modelValue: secondId.value,
                    "onUpdate:modelValue": val => {
                      secondId.value = val;
            }
          }, [
            // 循环渲染单选框 - 每个单选框单独占一行
            state.myEnterpriseList.map(item => h(ElRadio, {
              key: item.id,
              value: item.code,
                  },
                  [
                    // 循环渲染单选框 - 根据每项的isManager显示标签
                    state.myEnterpriseList.map(item =>
                      h(
                        "el-row",
                        {
              style: {
                display: 'block', // 让每个单选框分行显示
                padding: '4px 0'
                            width: "100%"
              }
            }, item.name),)
          ]),

          // 管理员标签 - 显示在单选框后面
          
                        },
                        [
                          h(
                            "el-col",
                            {
                              span: 24
                            },
                            [
                              h(
                                ElRadio,
                                {
                                  key: item.customerUserID,
                                  value: item.customerUserID,
                                  label: item.enterpriseName
                                },
                                [
                                  // 单选框文本
                                  // 根据当前项的isManager显示标签（放在文本后面）
                                  item.isManger
                                    ? h(
                                        ElTag,
                                        {
                                          type: "primary",
                                          size: "small",
                                          style: {
                                            marginLeft: "8px",
                                            alignSelf: "center"
                                          }
                                        },
                                        "管理员"
                                      )
                                    : null
                                ]
                              )
                            ]
                          )
                        ]
                      )
                    )
                  ]
                )
              ]
            )
        ])
      ])
    ])
      // <>
      //   <el-form
      //     ref="ruleFormRef"
      //     model={state.ruleForm}
      //     rules={loginRules}
      //     size="large"
      //   >
      //     <Motion delay={150}>
      //       <el-form-item prop="exRoleCode">
      //         <el-radio-group v-model={state.ruleForm.exRoleCode}>
      //           <el-radio
      //             v-for={item in state.myEnterpriseList}
      //             key={item.id}
      //             value={item.code}
      //           >
      //             {item.name}
      //           </el-radio>
      //         </el-radio-group>
      //       </el-form-item>
      //     </Motion>
      //   </el-form>
      // </>
      // h(
      //   ElForm,
      //   {
      //     ref: ruleFormRef,
      //     model: state.ruleForm,
      //     rules: loginRules,
      //     size: "large"
      //   },
      //   [
      //     h(Motion, { delay: 150 }, [
      //       h(ElFormItem, { prop: "exRoleCode" }, [
      //         h(
      //           ElRadioGroup,
      //           {
      //             modelValue: state.ruleForm.exRoleCode,
      //             "onUpdate:modelValue": val => {
      //               state.ruleForm.exRoleCode = val;
      //             }
      //           },
      //           [
      //             // 用map实现v-for循环
      //             state.myEnterpriseList.map(item =>
      //               h(ElRow, {}, [
      //                 h(
      //                   ElRadio,
      //                   {
      //                     key: item.customerUserID,
      //                     value: item.customerUserID
      //                   },
      //                   item.enterpriseName
      //                 ),
      //                 item.isManager ? 444 : "" // 标签内容
      //               ])
      //             )
      //           ]
      //         )
      //       ])
      //     ])
      //   ]
      // ),
        ]
      ),
      // jsx 语法 （注意在.vue文件启用jsx语法，需要在script开启lang="tsx"）
    closeCallBack: ({ options, args }) => {
      // options.props 是响应式的
      // const { formInline } = options.props as FormProps;
      // const text = `姓名：${formInline.user} 城市：${formInline.region}`;
      if (args?.command === "cancel") {
        // 您点击了取消按钮
        // active.value -= 1;
      } else if (args?.command === "sure") {
        let obj = {
          phone: state.ruleForm.phone,
          code: state.ruleForm.phoneVCode,
          exRuleCode: state.ruleForm.exRoleCode
          code: secondCode,
          id: secondId.value
        };
        useUserStoreHook()
          .loginByUsername(obj)
          .then(res => {
            if (res?.code == 200) {
              message("注册成功！", { type: "success" });
              message("登录成功！", { type: "success" });
              router.replace({
                path: "/RegisterSucess",
                query: {
                  code: obj.exRoleCode
                }
                path: "/Index"
              });
            } else {
              message(res?.message, { type: "warning" });
@@ -292,6 +256,8 @@
    }
  });
};

// 点击登录
const onLogin = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate(valid => {
@@ -320,45 +286,23 @@
                  .finally(() => (disabled.value = false));
              } else {
                state.myEnterpriseList = obj.customerExs;
                secondCode = obj.code;
                openDialog();
              }
              if (res.result.exRoles.length == 0) {
                disabled.value = true;
                router
                  .replace({
                    name: "RegisterNav",
                    query: { code: state.ruleForm.exRoleCode }
                  })
                  .then(() => {
                    message("登录成功", { type: "success" });
                  })
                  .finally(() => (disabled.value = false));
              } else if (res.result.exRoles.length > 0) {
                let data = res.result.exRoles.find(item => {
                  return item.code == state.ruleForm.exRoleCode;
                });

                if (!data) {
                  router.replace({
                    name: "RegisterNav",
                    query: { code: state.ruleForm.exRoleCode }
                  });
                } else if (data?.hasFlsh) {
                  router.replace("index");
                } else {
                  router.replace("mine");
                }
              }
              useUserStoreHook().getCusExtendInfo();
            });
          } else {
            message(res?.message || "登录失败", { type: "error" });
          }
        })
        .finally(() => (loading.value = false));
        .finally(() => {
          loading.value = false;
          disabled.value = false;
        });
    }
  });
};

// 发送手机验证码
const sendValidationCode = async () => {
  if (!state.ruleForm.phone) {
    return message("请先输入手机号", { type: "warning" });
@@ -396,26 +340,12 @@
    <div class="wave">
      <img width="400px" :src="logo1" class="logo1" />
    </div>
    <!-- <img :src="bg" class="wave" /> -->
    <!-- <div class="flex-c absolute right-5 top-3"> -->
    <!-- 主题 -->
    <!-- <el-switch
        v-model="dataTheme"
        inline-prompt
        :active-icon="dayIcon"
        :inactive-icon="darkIcon"
        @change="dataThemeChange"
      />
    </div> -->
    <div class="login-container">
      <div class="img">
        <!-- <component :is="toRaw(illustration)" /> -->
      </div>
      <div class="img" />
      <div class="login-box">
        <div class="login-form">
          <!-- <avatar class="avatar" /> -->
          <Motion>
            <h2 class="logintitle">{{ state.nowRole.name }}登录</h2>
            <h2 class="logintitle">登录</h2>
          </Motion>

          <el-form
@@ -424,18 +354,6 @@
            :rules="loginRules"
            size="large"
          >
            <!-- <Motion :delay="150">
              <el-form-item prop="exRoleCode">
                <el-radio-group v-model="state.ruleForm.exRoleCode">
                  <el-radio
                    v-for="item in state.roleList"
                    :key="item.id"
                    :value="item.code"
                    >{{ item.name }}</el-radio
                  >
                </el-radio-group>
              </el-form-item>
            </Motion> -->
            <Motion :delay="100">
              <el-form-item
                :rules="[
@@ -488,16 +406,6 @@
                  </div>
                </el-col>
              </el-form-item>

              <!-- <el-form-item prop="password">
                <el-input
                  v-model="ruleForm.password"
                  clearable
                  show-password
                  placeholder="密码"
                  :prefix-icon="useRenderIcon(Lock)"
                />
              </el-form-item> -->
            </Motion>
            <Motion :delay="150">
              <el-form-item prop="phoneVCode">
@@ -511,7 +419,7 @@
                      <span
                        id="suffix-span-2"
                        ref="spanRef"
                        @click="sendValidationCode(state.ruleForm.phone)"
                        @click="sendValidationCode"
                      >
                        获取验证码
                      </span>