|
@@ -0,0 +1,214 @@
|
|
|
|
|
+<template>
|
|
|
|
|
+ <div class="login-container">
|
|
|
|
|
+ <!-- Logo区域 -->
|
|
|
|
|
+ <div class="logo-box">
|
|
|
|
|
+ <img src="@/static/logo.png" alt="logo" class="logo">
|
|
|
|
|
+ <div class="app-name">iWash洗车</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="#19A497"
|
|
|
|
|
+ @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'"
|
|
|
|
|
+ ></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 {onShow} from "@dcloudio/uni-app";
|
|
|
|
|
+
|
|
|
|
|
+const router = useRouter()
|
|
|
|
|
+const isAgreePrivacy = ref([])
|
|
|
|
|
+const redirectUrl =ref ("")
|
|
|
|
|
+const shortId =ref ("")
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+onShow((options:any)=>{
|
|
|
|
|
+ console.log(options)
|
|
|
|
|
+ redirectUrl.value = options?.query?.redirectUrl
|
|
|
|
|
+ shortId.value = options?.query?.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)
|
|
|
|
|
+ if(redirectUrl.value){
|
|
|
|
|
+ uni.redirectTo({
|
|
|
|
|
+ url:redirectUrl.value
|
|
|
|
|
+ })
|
|
|
|
|
+ }else{
|
|
|
|
|
+ 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 {
|
|
|
|
|
+ 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:#19A497 !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>
|