purchase-let/pages/login/login.vue

<template>
  <view>
       <up-navbar
                  title="登录"
                  @leftClick="navBack"
                  :autoBack="false"
                  placeholder
                  bgColor="rgba(0,0,0,0)"
              >
              </up-navbar>
    <view class="login-box">
      <image class="logo" src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/35adb202404271727457954.png"></image>
      <view class="tips">欢迎登录惠农批发</view>
      <block v-if="showWeixin">
        <up-transition :show="showWeixin">
          <view class="btn">
            <up-button  open-type="getPhoneNumber" @click="weixinLogin" color="#20B128" size="large"><up-icon
                name="weixin-fill" color="#fff" size="28"></up-icon>微信快捷登录</up-button>
          </view>
          <view class="btn">
            <up-button color="#ECFFEE" @click="showWeixin=false" size="large"><text style="color: #20B128;">使用短信验证登录</text></up-button>
          </view>
        </up-transition>
      </block>
      <block v-else>
        <up-transition :show="!showWeixin">
          <view class="form">
            <view class="input">
              <up-input :customStyle="{height: '100%'}" v-model="loginForm.phone" placeholderClass="place" border="none" placeholder="请输入手机号" type="number">
                <template #prefix>
                  <image style="height: 40rpx;width: 40rpx;margin-top: 6rpx;"
                    src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/48491202404281006484208.png"></image>
                </template>
              </up-input>
            </view>
            <view class="input">
              <up-input :customStyle="{height: '100%'}" v-model="loginForm.code" :maxlength="4" placeholderClass="place" border="none" placeholder="请输入验证码" type="number">
                <template #prefix>
                  <image style="height: 40rpx;width: 40rpx;margin-top: 6rpx;"
                    src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/3a42f202404281007454918.png"></image>
                </template>
                <template #suffix>
                  <up-code :seconds="seconds" ref="uCodeRef"
                  @change="codeChange"></up-code>
                  <view style="color: #20B128;" @click="getCode">{{tips}}</view>
                </template>
              </up-input>
            </view>
          </view>
          <view class="btn">
            <up-button color="#20B128" size="large" @click="codeLogin">登录</up-button>
          </view>
        </up-transition>
      </block>
      <view class="agreement">
        <image v-if="!isAgree" @click="isAgree=true" src="@/static/icon/n-check.png"></image>
        <image v-else @click="isAgree=false" src="@/static/icon/check.png"></image>
        <view>
          我已同意<text>《用户协议》</text>与<text>《隐私政策》</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { onBackPress } from "@dcloudio/uni-app"
  import { ref } from "vue"
  import { userLoginApi, userLoginWeixinApi } from "@/api/user.js";
  import useUserStore from "@/store/user.js"

  const userStore = useUserStore(); //使用pinia进行状态管理

  const showWeixin = ref(true); //是否显示微信登录
  const isAgree = ref(false); //是否同意协议

  const weixinLogin = () => {
    if (!isAgree.value) return uni.$u.toast('请先阅读并同意协议')

    uni.login({
      provider: 'weixin',
      success: (res) => {
        userLoginWeixinApi({
          code: res.code
        }).then(res=>{
          console.log(res);
        })
      },
      fail: (err) => {
        console.log(err);
        uni.$u.toast('登录失败');
      }
    })
  }

  const getPhoneNumber = (e) => {
    console.log(e);
  }
  
  
  const loginForm = ref({
    phone: '15366662222',
    code: ''
  })
  const isPhone = ()=>{ //检验手机号是否正确
    loginForm.value.phone = loginForm.value.phone.replace(/\s*/g,""); //去除空格
    return !/^1[3456789]\d{9}$/.test(loginForm.value.phone);
  }
  const codeLogin = ()=>{
    if (!isAgree.value) return uni.$u.toast('请先阅读并同意协议');
    // 验证码登录
    if(isPhone()) return uni.$u.toast('请输入正确的手机号码');
    console.log('登录');
    userLoginApi({
      account: '17811111111',
      password: '1111',
      terminal: 3,
      scene: 1
    }).then(res=>{
      console.log(res);
    })
  }
  
  const tips = ref('');
  const seconds = ref(60);
  const uCodeRef = ref(null);
  
  const codeChange = (text) => {
    tips.value = text;
  };
  
  const getCode = () => {
    if (!isAgree.value) return uni.$u.toast('请先阅读并同意协议');
    if (uCodeRef.value.canGetCode) {
      if(isPhone()) return uni.$u.toast('请输入正确的手机号码');
      // 模拟向后端请求验证码
      uni.showLoading({
        title: '正在获取验证码',
      });
      setTimeout(() => {
        uni.hideLoading();
        // 这里此提示会被start()方法中的提示覆盖
        uni.$u.toast('验证码已发送');
        // 通知验证码组件内部开始倒计时
        uCodeRef.value.start();
      }, 2000);
    } else {
      uni.$u.toast('倒计时结束后再发送');
    }
  };
  
  // 微信小程序无法拦截原生返回按钮，所以使用自定义导航拦截返回
  const navBack = ()=>{
    if(showWeixin.value==false) {
      showWeixin.value = true;
      return true;
    }
    else uni.navigateBack();
  }
  
</script>

<style lang="scss">
  page {
    background-color: #fff;
  }

  .login-box {
    width: 700rpx;
    height: 80vh;
    margin: 0 auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 10vh;
    position: relative;

    .logo {
      height: 152rpx;
      width: 152rpx;
    }

    .tips {
      color: #444444;
      font-size: 28rpx;
      margin: 30rpx 0;
    }

    .btn {
      width: 600rpx;
      margin-top: 40rpx;
      font-size: 32rpx !important;
    }

    .form {
      .input {
        background-color: #ECFFEE;
        width: 600rpx;
        height: 90rpx;
        box-sizing: border-box;
        padding: 0 20rpx;
        margin-bottom: 40rpx;
        
        .place{
          color: #333;
        }
        
        .customStyle{
          color: red;
        }
      }
    }

    .agreement {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      display: flex;
      justify-content: center;
      color: #444;

      image {
        width: 40rpx;
        height: 40rpx;
        margin-right: 10rpx;
      }

      text {
        color: #20B128;
      }
    }
  }
</style>