queyue-miniapp/pages/public/login.vue

<template>
	<view class="container">
		<view class="bottom-sign">
			<image v-if="theme" :src="`/static/public/login_bg_${theme}.png`"></image>
		</view>
		<view class="back-btn" @click="navBack">
			<image src="@/static/icons/left_back@3x.png"></image>
		</view>
		<view class="wrapper">
			<view class="tips">
				<view class="tips_title">{{tips.title}}</view>
				<view class="tips_text">{{tips.text}}</view>
			</view>
			<view class="input_box">
				<view class="area_select">
					<view class="area">{{area}}</view>
					<image class="icon_down" src="@/static/icons/icon_down.png"></image>
				</view>
				<input type="number" maxlength="11" v-model="mobile" placeholder="输入手机号" />
				<image v-if="mobile" class="icon_clear" src="@/static/icons/icon_clear.png" @click="mobile=''"></image>
			</view>
			<button :class="{'confirm-btn':true,disbled:!canSend}" :disabled="!canSend"
				@click="getCode">获取短信验证码</button>
			<view class="checkbox_box">
				<label class="radio" @click="isRead = !isRead">
					<radio value="" :checked="isRead" />已阅读并同意《用户协议》、《隐私政策》
				</label>
			</view>
			<view class="login_icon">
				<image class="wechat" src="@/static/icons/icon_wechat.png"></image>
				<image class="apple" src="@/static/icons/icon_apple.png"></image>
			</view>
		</view>
		<check-code :data="showData" @closeModal="closeModal" @login="doLogin" @regetCode="regetCode" v-if="isShowCode"
			class="modal-box" />
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		sendsms,
		appLogin,
		wxIdLogin,
		memberInfo
	} from '@/api/member.js';
	import CheckCode from './components/checkCode.vue'
	import rule from '@/utils/rule.js'
	export default {
		data() {
			return {
				tips: {
					title: '注册/登录',
					text: '输入手机号，开启雀乐；未注册手机，将自动注册'
				},
				// 地区编号
				area: '+86',
				// 手机号
				mobile: '',
				// 验证码
				mobileCheckCode: '',
				// 是否同意隐私策略
				isRead: false,
				// 是否显示验证码输入
				isShowCode: false,
				// 登录中禁用按钮
				isLogining: false,
				// 传给验证码输入组件
				showData: {
					area: '',
					mobile: '',
					deviceId: '',
					mobileCheckCode: '',
					deviceBrand: ''
				}
			}
		},
		components: {
			CheckCode
		},
		computed: {
			...mapState(['theme', 'deviceId', 'deviceBrand']),
			canSend() {
				return this.mobile.length === 11 && !this.isLogining
			}
		},
		onLoad() {},
		methods: {
			...mapMutations(['login']),
			navBack() {
				uni.navigateBack();
			},
			getCode() {
				if (!rule.mobile(this.mobile)) {
					this.$api.msg('请输入正确的手机号码');
					return;
				}
				if (!this.isRead) {
					this.$api.msg('请先同意隐私政策');
					return;
				}
				this.regetCode()
			},
			closeModal(type) {
				if (type === 'code') {
					this.isShowCode = false
				}
			},
			async doLogin(data) {
				uni.showLoading({
					title: '登录中……',
					mask: true
				})
				appLogin(data)
					.then(res => {
						if(res.code === 200 &&  res.data) {
							uni.setStorageSync('token',res.data);
							memberInfo().then(response=>{
								this.login(response.data);
								uni.navigateBack();
							});
						}
					})
					.catch(err => {
						console.log('err', err)
						uni.showToast({
							title: '登录失败',
							icon: 'error'
						})
					})
					.finally(
						() => {
							uni.hideLoading()
						}
					)
			},
			regetCode() {
				this.isLogining = true
				sendsms({
						mobile: this.mobile,
						deviceId: this.deviceId
					})
					.then(res => {
						if (res.code === 200) {
							this.showData = {
								area: this.area,
								mobile: this.mobile,
								deviceId: this.deviceId,
								deviceBrand: this.deviceBrand,
								mobileCheckCode: '',
							}
							this.isShowCode = true
						}
					})
					.catch(
						err => {
							console.log(err)
							uni.showToast({
								duration: 3000,
								title: err
							})
						})
					.finally(() => {
						this.isLogining = false
					})

			}
		},

	}
</script>

<style lang='scss' scoped>
	.container {
		position: relative;
		width: 100vw;
		height: 100vh;
		overflow: hidden;

		.bottom-sign {
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100vw;
			height: 100vw;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.back-btn {
			position: absolute;
			left: 40upx;
			padding-top: var(--status-bar-height);
			top: 40upx;
			font-size: 40upx;
			color: $font-color-dark;
			z-index: 9;
			
			image {
				width: 40rpx;
				height: 40rpx;
			}
		}

		.wrapper {
			position: relative;
			padding-top: 200upx;

			.tips {
				width: 100%;
				height: 136upx;
				padding: 0 48rpx;

				.tips_title {
					font-size: 64upx;
					margin-bottom: 26upx;
				}

				.tips_text {
					font-size: 28upx;
				}
			}

			.input_box {
				display: flex;
				align-items: center;
				padding: 88upx 48upx;
				position: relative;

				.area_select {
					display: flex;
					align-items: center;

					.area {
						font-size: 34upx;
					}

					.icon_down {
						width: 48upx;
						height: 48upx;
						margin: 0 23upx 0 14upx;
					}
				}

				input {
					font-size: 34upx;
					border-left: 2upx solid rgba(0, 0, 0, 0.4);
					padding-left: 54upx;
				}

				.icon_clear {
					width: 48upx;
					height: 48upx;
					position: absolute;
					right: 48upx;
					top: 50%;
					margin-top: -24upx;
				}

			}

			.confirm-btn {
				width: 566upx;
				height: 88upx;
				line-height: 88upx;
				border-radius: 999px;
				background: #C43737;
				color: #fff;
				font-size: $font-lg;

				&:after {
					border-radius: 100px;
				}
			}

			.confirm-btn.disbled {
				background-color: #ccc;
			}

			.checkbox_box {
				padding: 42upx;

				.radio {
					font-size: 24upx;
				}

				radio {
					transform: scale(0.7)
				}
			}

			.login_icon {
				padding-top: 32upx;
				display: flex;
				justify-content: center;

				image {
					width: 92upx;
					height: 92upx;
				}

				image.wechat {
					margin-right: 24upx;
				}

				image.apple {
					margin-left: 24upx;
				}
			}
		}

		.modal-box {
			position: absolute;
			top: 0;
			left: 0;
			height: 100vh;
			width: 100vw;
			background: #fff;
			z-index: 9;
		}
	}

	/* 暗黑模式 */
	@media (prefers-color-scheme: dark) {
		.container {
			.wrapper .input_box input {
				border-left: 2upx solid #fff;
			}

			.back-btn {
				color: #fff;
			}
		}
	}
</style>