car-wash-front/src/pages-user/login/index.vue

<template>
  <div class="login-container">
    <!-- Logo区域 -->
    <div class="logo-box">
      <img src="@/static/logo.png" alt="logo" class="logo">
      <div class="app-name">Yeswash洗车</div>
    </div>

    <!-- 登录按钮 -->
    <div class="login-box">
<!--      <div class="wechat-login-btn" @click="handleWechatLogin">
        <img src="@/assets/wechat-icon.png" alt="微信" class="wechat-icon">
        微信一键登录
      </div>-->
      <uv-button :disabled="!isAgreePrivacy||isAgreePrivacy.length===0"
                 class="phone-login-btn" type="primary"        color="#C6171E"
                 shape="circle"
                 @getphonenumber="handleGetPhone"  open-type="getPhoneNumber">
        手机号一键登录
      </uv-button>
    </div>

    <!-- 隐私协议 -->
    <div class="privacy-box">
      <view style="display: inline-flex" class="agreement">
<!--        <uv-checkbox   v-model="isAgreePrivacy"    @change="handlePrivacyChange"></uv-checkbox>-->
        <uv-checkbox-group
            v-model="isAgreePrivacy"
            shape="circle">
          <uv-checkbox
              :name="'aa'"
              activeColor="#C6171E"
          ></uv-checkbox>
        </uv-checkbox-group>
        <view class="text">
          我已阅读并同意
          <view class="link" @click="showUserAgreement">《用户协议》</view>
          和
          <view class="link" @click="showPrivacyPolicy">《隐私政策》</view>
        </view>
      </view>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import {login} from "@/utils/auth";
import {onLoad} from "@dcloudio/uni-app";

const router = useRouter()
const isAgreePrivacy = ref([])
const redirectUrl =ref ("")
const shortId =ref ("")



onLoad((options:any)=>{
  console.log(options)
  redirectUrl.value = options?.redirectUrl
  shortId.value = options?.shortId
})
// 处理微信登录
const handleWechatLogin = () => {
  if (!isAgreePrivacy.value) {
    alert('请先同意用户协议和隐私政策')
    return
  }
  // 这里添加微信登录逻辑
  console.log('微信登录')
}

// 处理手机号登录
const handlePhoneLogin = () => {
  if (!isAgreePrivacy.value) {
    alert('请先同意用户协议和隐私政策')
    return
  }
  router.push('/phone-login')
}

// 处理隐私协议变更
const handlePrivacyChange = () => {
  console.log('隐私协议同意状态：', isAgreePrivacy.value)
}

// 显示用户协议
const showUserAgreement = () => {
  uni.navigateTo({
    url:'/pages-user/agreement/index'
  })
}

// 显示隐私政策
const showPrivacyPolicy = () => {
  uni.navigateTo({
    url:'/pages-user/policy/index'
  })
}

const handleGetPhone = (e:any) => {
  console.log(e)
  if(shortId.value){
    e.shortId=shortId.value;
  }
  login(e).then((token: string) => {
    console.log(">>>>>>>>>",token)
    uni.navigateBack()
    // if(redirectUrl.value){
    //   uni.redirectTo({
    //     url:redirectUrl.value+"?shortId="+shortId.value
    //   })
    // }else{
    //   uni.navigateBack()
    //   // uni.switchTab({
    //   //   url:"/pages/index/index"
    //   // })
    // }
  })
}
</script>

<style scoped lang="scss">
.login-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px 30px;
  background: #ffffff;
}

.logo-box {
  margin-bottom: 80px;
  text-align: center;
}

.logo {
  border-radius: 50%;
  width: 120px;
  height: 120px;
  margin-bottom: 20px;
}

.app-name {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

.login-box {
  width: 100%;
  margin-bottom: 40px;
}

.wechat-login-btn,
.phone-login-btn {
  color:#C6171E !important;
  width: 100%;
  height: 44px;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  margin-bottom: 15px;
  cursor: pointer;
}

.wechat-login-btn {
  background: #07c160;
  color: white;
}

.phone-login-btn {
  background: #f5f5f5;
  color: #333;
}

.wechat-icon {
  width: 24px;
  height: 24px;
  margin-right: 8px;
}

.privacy-box {
  position: fixed;
  bottom: 30px;
  left: 0;
  right: 0;
  padding: 0 30px;
}

.agreement {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #666;
  position: relative;
}

.agreement input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}


.text {
  display: inline-flex;
  line-height: 1.4;
}

.link {
  color:$uni-color-primary
}
</style>