zhywpt-sp/login/login.vue

<!-- 密码登录 -->
<template>
  <view class="login-main as-gravity-center as-layout-vertical">
    <image :src="`${$imgUrl}login/logo.png`" class="logo"></image>
    <view class="title">九州ETC</view>
    <view class="form">
      <view class="form-input">
        <view> +86</view>
        <image :src="`${$imgUrl}common/arror_down_black.png`" class="arror" />
        <input
          class="input"
          v-model="state.username"
          focus
          placeholder="请输入手机号"
          placeholder-class="form-placeholder"
          type="number"
          maxlength="11"
        />
      </view>
      <view class="form-input" v-if="state.loginType === 'pwd'">
        <input
          class="input"
          v-model="state.password"
          type="text"
          placeholder="请输入密码"
          placeholder-class="form-placeholder"
          :password="state.isPwdType ? true : false"
        />
        <image
          :src="`${$imgUrl}login/${
            state.isPwdType ? 'icon_eye_close' : 'icon_eye_open'
          }.png`"
          class="eye"
          @click="state.isPwdType = !state.isPwdType"
        ></image>
      </view>
      <view class="form-input" v-if="state.loginType === 'code'">
        <input
          class="input"
          v-model="state.code"
          placeholder="请输入验证码"
          placeholder-class="form-placeholder"
          maxlength="6"
          type="number"
        />
        <verification-code
          :bg="false"
          :mobile="state.username"
        ></verification-code>
      </view>
    </view>

    <view class="btn">
      <submit-button title="登录" @submit="doLogin"></submit-button>
    </view>

    <view class="agreement">
      <checkbox-group @change="checkboxChange">
        <checkbox
          :checked="state.checked"
          activeColor="#00B38B"
          size="30"
          icon-size="30"
          label-size="24"
          >我已阅读并同意
        </checkbox>
      </checkbox-group>
      <!-- <view class="txt-grey">我已阅读并同意</view> -->
      <view class="txt-green" @click="toRead"
        >《平台用户服务隐私协议》</view
      >
    </view>

    <view class="btns as-layout-horizontal">
      <view
        class="as-layout-vertical as-gravity-center"
        @click="navTo('/login/register-step1')"
      >
        <view class="bg blue as-gravity-center">
          <image :src="`${$imgUrl}login/icon_register.png`" class="img" />
        </view>
        <view class="label">注册账号</view>
      </view>

      <view
        class="as-layout-vertical as-gravity-center"
        @click="
          state.loginType === 'pwd'
            ? (state.loginType = 'code')
            : (state.loginType = 'pwd')
        "
      >
        <view class="bg orange as-gravity-center">
          <image :src="`${$imgUrl}login/icon_code.png`" class="img" />
        </view>
        <view class="label">{{
          state.loginType === "pwd" ? "验证码登录" : "密码登录"
        }}</view>
      </view>

      <view
        class="as-layout-vertical as-gravity-center"
        @click="navTo('/login/forget-pwd-step1')"
      >
        <view class="bg purple as-gravity-center">
          <image :src="`${$imgUrl}login/icon_pwd.png`" class="img" />
        </view>
        <view class="label">忘记密码</view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import uCheckBox from "@/uni_modules/vk-uview-ui/components/u-checkbox/u-checkbox.vue";
import { reactive } from "vue";
import { checkStr, msg, navTo } from "@/utils/utils";
import { onLoad, onUnload } from "@dcloudio/uni-app";
import { login, loginCode, loginTime } from "@/utils/network/api.js";
import { request } from "@/utils/network/request.js";
import { stringToJson } from "@/utils/network/encryption";
import { useUserStore } from "@/stores/user";
import { setItem } from "@/utils/storage";

const userStore = useUserStore();
const { fetchToken } = userStore;

const state = reactive({
  checked: false, //是否勾选协议
  isPwdType: true, //是不是密码类型
  loginType: "pwd", //pwd-密码登录 code-验证码登录
  username: "", //用户名
  password: "", //密码
  code: "", //验证码
});

onLoad(() => {
  uni.$on("login", (data) => {
    state.username = data.phone;
  });
});

onUnload(() => {
  uni.$off("login");
});
const checkboxChange = (e) => {
  console.log(e);
  state.checked = !state.checked;
};

// 去协议页面 
const toRead=()=>{
	navTo("/login/agreement")
}


/* 登录 */
const doLogin = () => {
  if (!state.username) {
    msg("请输入手机号！");
    return;
  }
  if (state.loginType === "pwd" && !state.password) {
    msg("请输入密码！");
    return;
  }
  if (state.loginType === "code" && !state.code) {
    msg("请输入验证码！");
    return;
  }
  if (!checkStr(state.username, "mobile")) {
    msg("请输入正确的手机号！");
    return;
  }
  if (!state.checked) {
    msg("请勾选我已阅读并同意《平台用户服务隐私协议》");
    return;
  }

  //TODO 目前后端规定验证码只能是123456，所以目前写死
  state.code = "123456";
  if (state.loginType === "code") {
    reqLogin(loginCode, {
      mobile: state.username,
      code: state.code,
      loginTime: loginTime,
    });
  } else {
    reqLogin(login, {
      mobile: state.username,
      password: state.password,
      loginTime: loginTime,
    });
  }
};

/* 执行登录 */
const reqLogin = (code, data) => {
  const options = {
    type: 2,
    data: data,
    method: "POST",
    showLoading: true,
  };
  request(code, options).then((res) => {
    fetchToken(stringToJson(res.bizContent).code).then((data) => {
      setItem("phone", data.mobile);
      msg("登录成功！");
      uni.$emit("refreshOrder");
      uni.navigateBack();
    });
  });
};
</script>

<style lang="scss" scoped>
.login-main {
  border-top: 1rpx solid #dcdcdc;
  padding: 22rpx 30rpx 140rpx;

  .logo {
    width: 260rpx;
    height: 160rpx;
  }

  .title {
    font-size: 46rpx;
    color: #333333;
    margin-top: 30rpx;
    font-weight: 600;
  }

  .form {
    width: 100%;
    margin-top: 100rpx;

    .form-input {
      display: flex;
      flex-direction: row;
      align-items: center;
      height: 90rpx;
      border-bottom: 1rpx solid #dcdcdc;
      padding: 0rpx 12rpx;
      color: #333333;

      &:last-child {
        margin-top: 50rpx;
      }

      .input {
        flex: 1;
        padding-right: 48rpx;
        font-size: 28rpx;
        font-family: Microsoft YaHei;
      }

      .arror {
        width: 28rpx;
        height: 25rpx;
        margin-left: 16rpx;
        margin-right: 40rpx;
      }

      .eye {
        width: 48rpx;
        height: 48rpx;
      }
    }

    .form-placeholder {
      color: #999999;
    }
  }

  .btn {
    width: 100%;
    margin: 120rpx 40rpx 50rpx;
  }

  .agreement {
    font-size: 24rpx;
    display: flex;
    align-items: center;

    .txt-grey {
      color: #666666;
    }

    .txt-green {
      color: #00b38b;
    }

    :deep(.u-checkbox) {
      margin-right: -20rpx;
    }
  }

  .btns {
    width: 100%;
    margin-top: 125rpx;
    justify-content: space-around;
    padding: 0px 8rpx;

    .bg {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;

      .img {
        width: 48rpx;
        height: 48rpx;
      }
    }

    .blue {
      background-color: #1d9cff;
    }

    .orange {
      background-color: #feb654;
    }

    .purple {
      background-color: #8060ff;
    }

    .label {
      font-size: 26rpx;
      color: #333333;
      margin-top: 30rpx;
    }
  }
}
</style>