health-front/pages_order/auth/wxAccountLogin.vue

<template>
	<view class="page_view">

		<image class="bg" src="@/pages_order/static/auth/bg.png" mode="aspectFill"></image>

		<view class="content flex flex-column">
			<!-- todo: 替换为配置项 -->
			<image class="logo" src="@/pages_order/static/auth/logo.png" mode="widthFix"></image>
			
			<view class="box">
				<view class="box-intro">Hi ></view>

				<uv-input 
					v-model="form.account" 
					placeholder="请输入账号" 
					border="none" 
					shape='circle'
					clearable 
					:customStyle="{ 
						'margin-top': '64rpx',
						'padding': '37rpx 52rpx',
						'background-color': '#FAFAFF',
						'box-shadow': 'inset -10rpx -10rpx 20rpx 0 rgba(255, 255, 255, 0.77), inset 10rpx 10rpx 20rpx 0 rgba(170, 170, 204, 0.12), inset 4rpx 4rpx 8rpx 0 rgba(170, 170, 204, 0.25), inset -4rpx -4rpx 8rpx 0 rgba(255, 255, 255, 0.5)',
					}"
				>
					<template #prefix>
						<image class="input-prefix-icon" src="@/pages_order/static/auth/account.png" mode="widthFix"></image>
					</template>
				</uv-input>
				<uv-input 
					v-model="form.password" 
					placeholder="请输入密码" 
					:type="passwordInputType"
					border="none" 
					shape='circle'
					clearable 
					:customStyle="{ 
						'margin-top': '24rpx',
						'padding': '37rpx 52rpx',
						'background-color': '#FAFAFF',
						'box-shadow': 'inset -10rpx -10rpx 20rpx 0 rgba(255, 255, 255, 0.77), inset 10rpx 10rpx 20rpx 0 rgba(170, 170, 204, 0.12), inset 4rpx 4rpx 8rpx 0 rgba(170, 170, 204, 0.25), inset -4rpx -4rpx 8rpx 0 rgba(255, 255, 255, 0.5)',
					}"
				>
					<template #prefix>
						<image class="input-prefix-icon" src="@/pages_order/static/auth/account.png" mode="widthFix"></image>
					</template>
					<template #suffix v-if="form.password">
						<image class="input-prefix-icon" src="@/pages_order/static/auth/hide.png" mode="widthFix"
							@click="switchPasswordInputType"
						></image>
					</template>
				</uv-input>
				
				<button class="btn flex" @click="onAccountLogin" >登 录</button>

				<view class="agreement">
					<uv-checkbox-group
						v-model="checkboxValue"
						shape="circle"
					>
						<uv-checkbox
							size="36rpx"
							icon-size="36rpx"
							activeColor="#7451DE"
							:name="1"
						></uv-checkbox>
					</uv-checkbox-group>
					<view class="desc">
						我已阅读并同意
						<!-- todo: 替换配置项key -->
						<text class="highlight" @click="$refs.popup.open('config_privacy')">《服务协议与隐私条款》</text>
						和
						<!-- todo: 替换配置项key -->
						<text class="highlight" @click="$refs.popup.open('config_agreement')">《个人信息保护指引》</text>
					</view>
				</view>
			</view>

			<view class="other">
				<view class="title">—其他登录方式—</view>
				<view class="btns">
					<button class="btn flex" @click="onPhoneLogin" >
						<image class="btn-icon" src="@/pages_order/static/auth/phone.png" mode="widthFix"></image>
					</button>
					<button class="btn flex" @click="onWxLogin" >
						<image class="btn-icon" src="@/pages_order/static/auth/wx.png" mode="widthFix"></image>
					</button>
				</view>
			</view>
		</view>

		<configPopup ref="popup"></configPopup>

	</view>
</template>

<script>

export default {
	name : 'Login',
	data() {
		return {
			checkboxValue : [],
			form: {
				account: null,
				password: null,
			},
			passwordInputType: 'password',
		}
	},
	components: {
	},
	methods: {
		onAccountLogin() {
			// todo
		},
		onPhoneLogin() {
			// todo
		},
		onWxLogin() {
			// todo
		},
		wxLogin(){
			if(!this.checkboxValue.length){
				return uni.showToast({
					title: '请先同意隐私协议',
					icon:'none'
				})
			}
			this.$store.commit('login')
		},
		openModal() {
			this.$refs.modal.open()
		},
		onConfirmAggrement(confirm) {
			if (confirm) {
				this.checkboxValue = [1]
			} else {
				this.checkboxValue = []
			}
		},
		onCancel() {
			console.log('--onCancel')
			uni.reLaunch({
				url: '/pages/index/index'
			})
		},
		switchPasswordInputType() {
			this.passwordInputType = this.passwordInputType === 'password' ? 'text' : 'password'
		},
	}
}
</script>

<style scoped lang="scss">
.page_view {
	width: 100vw;
	height: 100vh;
}

.bg,
.content {
	width: 100%;
	height: 100%;
}

.content {
	position: absolute;
	top: 0;
	justify-content: flex-start;
	padding: 208rpx 40rpx 0 40rpx;
	box-sizing: border-box;
}

.logo {
	width: 366rpx;
	height: auto;
}

.box {
	margin-top: 48rpx;
	width: 100%;
	padding: 64rpx 40rpx;
	box-sizing: border-box;
	background: rgba(255, 255, 255, 0.48);
	border: 1rpx solid #FFFFFF;
	border-radius: 48rpx;

	&-intro {
		color: $uni-color;
		font-size: 44rpx;
		line-height: 1.4;
		font-weight: 600;
		font-family: PingFang SC;
	}

	.input-prefix-icon {
		width: 32rpx;
		height: auto;
	}

	/deep/ .uv-input__content__prefix-icon {
		margin-right: 16rpx;
	}

	.btn {
		margin-top: 64rpx;
		border-radius: 44rpx;
		padding: 23rpx 0;
		font-size: 30rpx;
		line-height: 1.4;
		font-weight: 600;
		font-family: PingFang SC;
		color: #FFFFFF;
		background-image: linear-gradient(to right, #007FFF, #644CFF, #BE76F7);
		box-shadow: 12rpx 12rpx 36rpx 0 rgba(0, 0, 0, 0.06),
								-8rpx -8rpx 26rpx 0 #FFFFFF,
								8rpx 8rpx 14rpx 0 rgba(0, 0, 0, 0.07);
	}

	.agreement {
		margin-top: 24rpx;
		display: flex;

		.desc {
			font-family: PingFang SC;
			font-size: 24rpx;
			font-weight: 400;
			line-height: 1.4;
			color: #8B8B8B;
		}

		.highlight {
			color: $uni-color;
		}
	}
}

.other {
	margin-top: 48rpx;
	width: 100%;
	padding: 0 57rpx;
	box-sizing: border-box;

	.title {
		width: 100%;
		padding: 8rpx 0;
		text-align: center;
		font-weight: 400;
		font-size: 26rpx;
		line-height: 1.4;
		font-family: PingFang SC;
		color: #FFFFFF;
		background-image: linear-gradient(to right, #007FFF00, #644CFF, #BE76F700);
	}

	.btns {
		display: flex;
    justify-content: center;
		margin-top: 48rpx;
	}

	.btn {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		background: #EEEEF7;
		box-shadow: -10rpx -10rpx 20rpx 0 #FFFFFFBF,
								10rpx 10rpx 40rpx 0 #AAAACC80,
								4rpx 4rpx 10rpx 0 #AAAACC40,
								-4rpx -4rpx 10rpx 0 #FFFFFFED;

		&-icon {
			width: 48rpx;
			height: auto;
		}
	}
	.btn + .btn {
		margin-left: 64rpx;
	}
}
</style>