freight-web/src/pagesLogin/login/index.vue

<template>
  <LoginLayout>
    <template #form-box>
      <u-form
        labelPosition="left"
        :model="model1"
        :rules="rules"
        ref="loginForm"
        :labelWidth="0"
      >
        <u-form-item prop="userInfo.userName">
          <u-input
            v-model="model1.userInfo.userName"
            placeholder="请输入手机号"
            :shape="'circle'"
            :clearable="true"
            :customStyle="{
              'border-color':
                currentFocus === 'userName' ? '#00dcee !important' : '',
            }"
            @focus="handleFocus('userName')"
            @blur="handleFocus('')"
          >
          </u-input>
        </u-form-item>
        <u-form-item prop="userInfo.password">
          <u-input
            v-model="model1.userInfo.password"
            placeholder="请输入密码"
            :shape="'circle'"
            :clearable="true"
            :type="isShowPwd ? 'text' : 'password'"
            :customStyle="{
              'border-color':
                currentFocus === 'password' ? '#00dcee !important' : '',
            }"
            @focus="handleFocus('password')"
            @blur="handleFocus('')"
          >
            <template #suffix>
              <image
                v-if="!isShowPwd"
                :src="`https://backend-common.obs.cn-east-3.myhuaweicloud.com/static/pagesLogin/login/hide.png`"
                class="custom-icon"
                @click="isShowPwd = true"
              ></image>
              <image
                v-else
                :src="`https://backend-common.obs.cn-east-3.myhuaweicloud.com/static/pagesLogin/login/show.png`"
                class="custom-icon"
                @click="isShowPwd = false"
              ></image>
            </template>
          </u-input>
        </u-form-item>
      </u-form>
      <view class="remember-box">
        <view>
          <u-checkbox-group v-model="checkGroup.rememberCheck">
            <u-checkbox
              :customStyle="{}"
              :key="1"
              :label="'记住密码?'"
              :name="1"
              :size="'25rpx'"
              :activeColor="'#00dcee'"
              :labelSize="'25rpx'"
              :labelColor="'#000000'"
            ></u-checkbox>
          </u-checkbox-group>
        </view>
        <text @click="handleForgetPwd">忘记密码</text>
      </view>
      <view class="login-btn">
        <u-button
          @click="submit"
          type="primary"
          :customStyle="{
            'border-radius': '43rpx',
          }"
          >立即登录</u-button
        >
      </view>
      <view class="agree">
        <u-checkbox-group v-model="checkGroup.agreeCheck">
          <u-checkbox
            :key="1"
            :size="'25rpx'"
            :activeColor="'#00dcee'"
            :name="1"
          ></u-checkbox>
        </u-checkbox-group>
        <view>
          我已阅读并同意用户 <text class="agree-item">《 服务协议 》</text> 和
          <text class="agree-item">《 隐私政策 》</text>
          <view> 未开通服务站点无法登录 </view>
        </view>
      </view>
    </template>
  </LoginLayout>
</template>

<script setup lang="ts">
import { ProfileApi } from "@/services/index";
import LoginLayout from "./components/loginLayout.vue";
import { useMemberStore } from "@/store/index";
const store = useMemberStore();
const loginForm = ref(null);
const model1 = reactive({
  userInfo: {
    userName: "",
    password: "",
  },
});
// 控制focus 边框样式
const currentFocus = ref("");
// 控制密码显示隐藏
const isShowPwd = ref(false);
// 记住密码 // 同意协议
const checkGroup = reactive({
  rememberCheck: [],
  agreeCheck: [],
});

const rules = ref({
  "userInfo.userName": {
    type: "string",
    required: true,
    message: "请输入手机号",
    trigger: ["blur", "change"],
  },
  "userInfo.password": {
    type: "string",
    required: true,
    message: "请输入密码",
    trigger: ["blur", "change"],
  },
});

// const checkboxChange = (n: any) => {
//   console.log("change", n);
// };
const handleFocus = (attr: string) => {
  currentFocus.value = attr;
};
const submit = () => {
  (loginForm.value as any).validate().then((res: any) => {
    if (res) {
      if (checkGroup.agreeCheck.length === 0) {
        uni.showToast({
          title: "请同意协议",
          icon: "none",
        });
        return;
      }
      ProfileApi.loginByAccount(model1.userInfo).then((res: any) => {
        if (res.code === 200) {
          store.setProfile(res.data);
          uni.navigateTo({
            url: "/pagesHome/index", // 要跳转到的页面路径
          });
        }
      });
    }
  });
};
const handleForgetPwd = () => {
  uni.navigateTo({
    url: "/pagesLogin/login/forgetPwd", // 要跳转到的页面路径
  });
};
</script>

<style lang="scss" scoped>
.custom-icon {
  width: 37.18rpx;
  height: 18.59rpx;
}
.remember-box {
  display: flex;
  font-size: 25rpx;
  font-family: Source Han Sans CN;
  font-weight: 400;
  justify-content: space-between;
  padding: 10rpx;
  color: $u-primary;
  align-items: center;
}
.login-btn {
  margin-top: 23.72rpx;
}
.agree {
  display: flex;
  font-size: 21rpx;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #000000;
  margin-top: 10rpx;
  align-items: flex-start;
  text-align: center;
  line-height: 41rpx;
  margin-top: 26.28rpx;
  .agree-item {
    color: $u-primary;
  }
}
</style>