freight-web/src/pages/login/forgetPwd.vue

<template>
  <LoginLayout>
    <template #form-box>
      <u-form
        labelPosition="left"
        :model="model1"
        :rules="rules"
        ref="loginForm"
        :labelWidth="0"
      >
        <u-form-item
          v-for="(item, index) in formAttrList"
          :key="index"
          :prop="`userInfo.${item.modelName}`"
        >
          <view v-if="item.type === 'text'">
            <u-input
              v-model="model1.userInfo[`${item.modelName}`]"
              :placeholder="item.placeholder"
              :shape="'circle'"
              :clearable="true"
              :customStyle="{
                'border-color':
                  currentFocus === item.modelName ? '#00dcee !important' : '',
              }"
              @focus="handleFocus(item.modelName)"
              @blur="handleFocus('')"
            >
              <template #suffix>
                <text v-if="item.modelName === 'code'" class="code-btn">
                  <text
                    v-if="seconds === 0"
                    @click="handleCode"
                    class="code-primary"
                    >获取验证码</text
                  >
                  <text v-else
                    >剩余<text class="code-primary">{{ seconds }}秒</text></text
                  >
                </text>
              </template>
            </u-input>
          </view>
          <view v-if="item.type === 'password'">
            <u-input
              v-model="model1.userInfo[`${item.modelName}`]"
              :placeholder="item.placeholder"
              :shape="'circle'"
              :clearable="true"
              :type="item.isShowPwd ? 'text' : 'password'"
              :customStyle="{
                'border-color':
                  currentFocus === item.modelName ? '#00dcee !important' : '',
              }"
              @focus="handleFocus(item.modelName)"
              @blur="handleFocus('')"
            >
              <template #suffix>
                <image
                  v-if="!item.isShowPwd"
                  :src="`/static/img/login/hide.png`"
                  class="custom-icon"
                  @click="item.isShowPwd = true"
                ></image>
                <image
                  v-else
                  :src="`/static/img/login/show.png`"
                  class="custom-icon"
                  @click="item.isShowPwd = false"
                ></image>
              </template>
            </u-input>
          </view>
        </u-form-item>
      </u-form>

      <view class="login-btn">
        <u-button
          @click="submit"
          type="primary"
          :customStyle="{
            'border-radius': '43rpx',
          }"
          >保存并登录</u-button
        >
      </view>
    </template>
  </LoginLayout>
</template>

<script setup lang="ts">
import { ProfileApi } from "@/services/index";
import LoginLayout from "./components/loginLayout.vue";
import valid from "@/utils/validate";
const loginForm = ref(null);
const model1 = <any>reactive({
  userInfo: {
    userName: "",
    code: "",
    passwordNew: "",
    passwordConfirm: "",
  },
});
// 控制focus 边框样式
const currentFocus = ref("");

// 表单属性清单
const formAttrList = ref([
  {
    modelName: "userName",
    type: "text",
    placeholder: "请输入手机号",
  },
  {
    modelName: "code",
    type: "text",
    placeholder: "请输入验证码",
  },
  {
    modelName: "passwordNew",
    type: "password",
    placeholder: "请输入新密码",
    isShowPwd: false, // 控制密码显示隐藏
  },
  {
    modelName: "passwordConfirm",
    type: "password",
    placeholder: "请输入确认密码",
    isShowPwd: false, // 控制密码显示隐藏
  },
]);
// 获取验证码交互
const seconds = ref(0);
const handleCode = () => {
  console.log(model1);
  if (model1.userInfo === undefined || !model1.userInfo.userName) {
    uni.showToast({
      title: "请输入手机号",
      icon: "error",
    });
    return;
  }
  if (!valid.mobile.pattern.test(model1.userInfo.userName)) {
    uni.showToast({
      title: "手机号不合法",
      icon: "error",
    });
    return;
  }
  seconds.value = 120;
  let countDownTimer = setInterval(() => {
    if (seconds.value > 0) {
      --seconds.value;
    } else {
      clearInterval(countDownTimer);
    }
  }, 1000);
};
const rules = ref({
  "userInfo.userName": {
    type: "string",
    required: true,
    message: "请输入手机号",
    trigger: ["blur", "change"],
  },
  "userInfo.code": {
    type: "string",
    required: true,
    message: "请输入验证码",
    trigger: ["blur", "change"],
  },
  "userInfo.passwordNew": {
    type: "string",
    required: true,
    message: "请输入新密码",
    trigger: ["blur", "change"],
  },
  "userInfo.passwordConfirm": {
    type: "string",
    required: true,
    message: "请输入确认密码",
    trigger: ["blur", "change"],
  },
  // "userInfo.sex": {
  //   type: "string",
  //   max: 1,
  //   required: true,
  //   message: "请选择男或女",
  //   trigger: ["blur", "change"],
  // },
});

// const checkboxChange = (n: any) => {
//   console.log("change", n);
// };
const handleFocus = (attr: string) => {
  currentFocus.value = attr;
};
const submit = () => {
  ProfileApi.loginByAccount({
    userName: "cs123",
    password: "123",
  });
  (loginForm.value as any).validate();
};
</script>

<style lang="scss" scoped>
.custom-icon {
  width: 37.18rpx;
  height: 18.59rpx;
}
.login-btn {
  margin-top: 23.72rpx;
}
::v-deep .u-form-item__body__right__message {
  margin-left: 10px !important;
}
.code-btn {
  font-size: 27rpx;
  font-family: Source Han Sans CN;
  font-weight: 400;
  cursor: pointer;
  .code-primary {
    color: $u-primary;
  }
}
</style>