QCN_rider/.svn/pristine/0e/0e487e4e3058935773c7850a58fb72b6c6527434.svn-base

<template>
	<view class="home">
		<view class=""
			style=" margin-top: 200rpx; display: flex; flex-direction: column;  justify-content: center; align-items: center;">
			<image :src="Service.GetIconImg('/static/index/logo/logo.png')" style="width: 150rpx; height: 150rpx; "
				mode="">
			</image>
			<view class="" style="font-size: 36rpx; font-weight: 800; margin-top: 20rpx;">
				确菜农·骑手端
			</view>
		</view>
		<view class="" style="margin: 30rpx 30rpx; margin-top: 150rpx;">

			<view class="" style="font-size: 34rpx; font-weight: 600; ">
				欢迎登陆
			</view>

			<view class="" style="font-size: 28rpx; margin-top: 20rpx; ">
				手机号登录,安全又便捷
			</view>

			<view class="">
				<view class="" style="margin-top: 30rpx;">
					<up-input v-model="login.phone" type="number" shape='circle'
						:customStyle="{'padding':'20rpx 30rpx','font-size':'32rpx'}" placeholder="请输入手机号"
						clearable='true' border="surround"></up-input>
				</view>

				<view v-if="!type" class="" style="margin-top: 30rpx;">
					<up-input v-model="login.password" type="password" shape='circle'
						:customStyle="{'padding':'20rpx 30rpx','font-size':'32rpx'}" placeholder="请输入密码"
						clearable='true' border="surround"></up-input>
				</view>
				<view v-else class=""
					style=" display: flex; align-items: center; justify-content: space-between; margin-top: 30rpx;  border: 1rpx solid #dadbde; box-sizing: border-box;  padding: 20rpx 30rpx;  border-radius: 200rpx; ">
					<view class="" style="">
						<up-code-input v-model="login.code" :maxlength="4" mode="line" size='24'></up-code-input>
					</view>
					<view class="wrap">
						<up-toast ref="uToastRef"></up-toast>
						<up-code :seconds="seconds" @end="end" @start="start" ref="uCodeRef"
							@change="codeChange"></up-code>
						<view @click="getCode">{{tips}}</view>
					</view>
				</view>


			</view>


			<view class=""
				style="margin-top: 40rpx; width: 100%; height: 80rpx; line-height: 80rpx; border-radius: 40rpx; background-color: #FFD700; color: #000; font-weight: bold; font-size: 30rpx; text-align: center;"
				@click="loginshop()">
				登录

			</view>

			<view class="" style="text-align: center; color: #637aff; margin: 50rpx 0; ">
				<text @click="type=!type,login.password='',login.code=''">{{ !type?'使用验证码登录':'使用密码登录' }}</text>
			</view>

			<view class=""
				style="display: flex; justify-content: center; align-items: center;color: black;  margin-top: 50rpx; "
				@click="isuser= !isuser">
				<view class="" style="margin-right: 10rpx;">
					<up-icon :name="!isuser?'checkmark-circle':'checkmark-circle-fill'"
						:color="!isuser?'#999':'var(--nav-mian)'" size="20"></up-icon>
				</view>
				我同意
				<a @click.stop style="color: #FF6B23; text-decoration: none; " :href="userUrl">《用户协议》</a>
				和
				<a @click.stop style="color: #FF6B23; text-decoration: none; " :href="userUrl">《隐私政策》</a>
			</view>
			<view class="" style="text-align: center; margin-top: 20rpx;">
				新用户?系统将自动为您注册
			</view>

		</view>
	</view>
</template>

<script setup lang="ts">
	import { onShow, onLoad } from "@dcloudio/uni-app";
	import { Service, CNRiderLoginService } from "@/Service/CN/CNRiderLoginService"
	import { ref } from "vue";
	import { WebSocket } from '@/Service/Comm/TwWebSocket';
	let qudPow = ref<string>('')

	let login = ref({
		phone: '',
		code: '',
		password: ''
	})

	const tips = ref('');
	const seconds = ref(60);
	const uCodeRef = ref(null);

	let type = ref(false)

	let isLogin = ref<boolean>(true)//登录注册状态

	let isuser = ref<boolean>(false)//用户同意协议

	let userUrl = ref('')
	let other = ref('')



	onLoad(() => {
		getData()
	});

	onShow(() => {

	});


	const getData = () => {
		CNRiderLoginService.GetPrivacy(1).then(res => {
			userUrl.value = res.data.url
		})

		CNRiderLoginService.GetPrivacy(4).then(res => {
			other.value = res.data.url
		})

	}


	//登录
	const loginshop = () => {
		if (login.value.phone == '') {
			return Service.Msg('请输入手机号/账号！')
		}

		if (login.value.password == '' && !type.value) {
			return Service.Msg('请输入密码！')
		}

		if (login.value.code == '' && type.value) {
			return Service.Msg('请输入验证码！')
		}

		if (!isuser.value) {
			return Service.Msg('请勾选同意用户协议！')
		}



		CNRiderLoginService.RiderLogin(login.value).then(res => {
			if (res.code == 0) {
				Service.Msg('登录成功！')
				Service.SetUserToken(res.data.accToken)
				uni.$emit('ImCom')
				setTimeout(() => {
					isuser.value = false
					Service.GoPageTab('/pages/index/index')
				}, 1000)


			} else {
				Service.Msg(res.msg)
			}
		})


	}



	const codeChange = (text) => {
		tips.value = text;
	};


	const getCode = () => {
		if (!login.value.phone) {
			Service.Msg('请输入手机号')
			return
		}
		if (uCodeRef.value.canGetCode) {
			// 模拟向后端请求验证码
			uni.showLoading({
				title: '正在获取验证码',
			});
			setTimeout(() => {
				uni.hideLoading();
				CNRiderLoginService.SendUserSms(login.value.phone, 'RiderReg').then(res => {

				})
				uCodeRef.value.start();
			}, 2000);
		} else {
			Service.Msg('倒计时结束后再发送')
		}
	};


	const end = () => {
		console.log('倒计时结束');
	};

	const start = () => {
		console.log('倒计时开始');
	};
</script>

<style lang="scss">
	.home {
		width: 100vw;
		height: 100vh;
		background: linear-gradient(to bottom, #FFD700, #fff 40%);
		overflow: hidden;
	}

	.chen {}
</style>