CKB-mini-program/pages/login/login.vue

<!-- 账号密码登录页 -->
<template>
	<view class="uni-content">
		<view class="login-logo">
			<image :src="logo"></image>
		</view>
		<!-- 顶部文字 -->
		<text class="title title-box">账号密码登录</text>
		<uni-forms>
			<uni-forms-item name="username">
				<uni-easyinput :focus="focusUsername" @blur="focusUsername = false" class="input-box"
					:inputBorder="false" v-model="username" placeholder="请输入手机号/用户名/邮箱" />
			</uni-forms-item>
			<uni-forms-item name="password">
				<uni-easyinput :focus="focusPassword" @blur="focusPassword = false" class="input-box" clearable
					type="password" :inputBorder="false" v-model="password" placeholder="请输入密码" />
			</uni-forms-item>
		</uni-forms>
		<view class="private">
			<radio-group @click="radioChange">
				<radio :value="val" :checked="val===1">
					<view class="privateRadio">
						<view>阅读并同意存客宝</view>
						<view><navigator class="link" open-type="navigate"  url="/pages/login/privatememo">隐私政策</navigator></view>
						<view>和</view>
						<view><navigator class="link" url="/pages/login/usermemo">用户服务协议</navigator></view>
					</view>
				</radio>
			</radio-group>
		</view>
		<button class="uni-btn" type="primary" @click="pwdLogin">登录</button>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				"redirectTo": "",
				"password": "",
				"username": "",
				"captcha": "",
				"needCaptcha": false,
				"focusUsername": false,
				"focusPassword": false,
				"logo": "/static/logo.png",
				"val": 0
			}
		},
		onShow() {
			// #ifdef H5
			document.onkeydown = event => {
				var e = event || window.event;
				if (e && e.keyCode == 13) { //回车键的键值为13
					this.pwdLogin()
				}
			};
			// #endif
		},
		onLoad(options) {
			

			// 获取传递过来的redirect参数
			this.redirectTo = options.redirect ? decodeURIComponent(options.redirect) : null;

			if (!this.redirectTo.startsWith("/")) {
				this.redirectTo = "/" + this.redirectTo
			}
		},
		methods: {
			radioChange(e){
				if(this.val==0){
					this.val=1;
				}else{
					this.val=0;
				}
				uni.setStorageSync('agreePrivate', this.val);
			},
			/**
			 * 密码登录
			 */
			pwdLogin() {
				 let agreePrivate=uni.getStorageSync('agreePrivate');
				 if(agreePrivate==0){
					 uni.showToast({
					 	title: '还未阅读并同意存客宝协议',
					 	icon: 'none',
					 	duration: 1000
					 });
					 return;
				 }
				
				
				if (!this.password.length) {
					this.focusPassword = true
					return uni.showToast({
						title: '请输入密码',
						icon: 'none',
						duration: 3000
					});
				}

				if (!this.username.length) {
					this.focusUsername = true
					return uni.showToast({
						title: '请输入手机号/用户名/邮箱',
						icon: 'none',
						duration: 3000
					});
				}

				let data = {
					"password": this.password,
					"username": this.username
				}

				let that = this
				uni.request({
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded', //自定义请求头信息
					},
					url: this.$config.apiUrl + '/v1/frontend/business/user/login',
					data: data,
					success: (res) => {
						if (res.data.code == 10000) {
							try {
								uni.setStorageSync('token', res.data.data.token);
								console.log(that.redirectTo)
								if (!that.redirectTo || that.redirectTo.includes('pages/ucenter/ucenter')) {
									uni.redirectTo({
										url: "/pages/ucenter/ucenter"
									})
								} else {
									uni.redirectTo({
										url: that.redirectTo
									})
								}
							} catch (e) {
								console.log(e)
							}
						} else {
							uni.showToast({
								title: res.data.message,
								icon: 'none',
								duration: 3000
							})
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/pages/login/login-page.scss";

	@media screen and (min-width: 690px) {
		.uni-content {
			height: auto;
		}
	}

	.forget {
		font-size: 12px;
		color: #8a8f8b;
	}
	
	.private{
		font-size: 12px;
		.link{
			color: blue;
			text-decoration: underline;
		}
	}
	
	.privateRadio{
		  display: flex;
		  justify-content: space-between; /* 水平分布 */
		  align-items: center;            /* 垂直居中 */
		  height: 30px;  
	}
	

	.link-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: space-between;
		margin-top: 20px;
	}

	.link {
		font-size: 12px;
	}
</style>