h5-uniapp/pages/login/index.vue

<template>
	<view :style="'background-color: '+theme.bg+';color: '+theme.text" class="loginPage">
		<view class="loginClose" @click="onClose">×</view>
		<image class="loginLang" :src="i18n.login.langImg" mode="aspectFit" @click="router.push('/pages/lang/lang')"></image>

		<view class="loginBrand">
			<image class="loginLogo" src="../../static/logo/logo.jpg" mode="widthFix"></image>
			<view class="loginBrandText">C1 fund</view>
		</view>

		<view class="loginWrap">
			<view class="loginTitle">{{i18n.login.login}}</view>

			<view class="loginTab">{{i18n.login.account}}</view>

			<view class="loginField">
				<view class="loginLabel">{{i18n.login.account}}</view>
				<view class="loginInputBox">
					<input class="loginInput" type="text" v-model="account" :placeholder="i18n.login.accountTag" />
				</view>
			</view>

			<view class="loginField">
				<view class="loginLabel">{{i18n.login.password}}</view>
				<view class="loginInputBox loginInputBoxPwd">
					<input class="loginInput" type="text" v-model="password" :password="ifcover"
						:placeholder="i18n.login.inputPassword" @confirm="login" />
					<image @click="ifcover=!ifcover" class="loginEye" :src="ifcover?ZY:BY" mode=""></image>
				</view>
			</view>

			<view class="loginForget" @click="router.push('/pages/login/forget')">{{i18n.login.forget}}</view>

			<button @click="login" class="cu-btn loginBtn">{{i18n.login.login}}</button>
			<view class="loginRegLine">
				<text>{{i18n.login.noAccount}}</text>
				<text class="loginRegLink" @click="router.push('/pages/login/register')">{{i18n.login.registration}}</text>
			</view>
		</view>

		<view class="bottomBox">
			<image @click="checked=(!checked)" class="width-28 height-28 margin-r-10" :src="checked?xuanzhong:weixuan" mode=""></image>
			<view class="line-height-30 text-center" style="max-width: 600rpx;">
				<text class="font-24">
					<span @click="checked=(!checked)">{{i18n.login.tag}}</span>
					<span @click="router.push('/pages/my/aboutUs/women?title=agreement')" class="">{{i18n.login.tag1}}</span>{{i18n.login.tag2}}
					<span @click="router.push('/pages/my/aboutUs/women?title=privacy_treaty')" class="">{{i18n.login.tag3}}</span>
				</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				account: '',
				password: '',

				ZY: '/static/imgs/login/zhengyan@2x.png',
				BY: '/static/imgs/login/biyan@2x.png',
				xuanzhong: '/static/imgs/quantify/xuanzhong@2x.png',
				weixuan: '/static/imgs/quantify/weixuanzhong@2x.png',
				ifcover: true,
				checked: true,

				flag: true,
				theme: '',
			}
		},
		computed: {
			i18n() {
				return this.$t('message');
			}
		},
		onLoad(option) {
			if (option.email) {
				this.account = option.email
			}
		},
		onShow() {
			if (uni.getStorageSync("theme") == "dark") {
				this.theme = this.$store.state.darkTheme
			} else {
				this.theme = this.$store.state.lightTheme
			}
		},
		methods: {
			onClose() {
				uni.switchTab({
					url: "/pages/index/index"
				})
			},
			checkboxChange(e) {
				this.checked = e.value
				console.log(e);
				console.log(this.checked);
			},
			login() {
				if (!this.flag) return
				if (this.account == '') {
					this.tos(this.i18n.login.accountTag)
					return
				}
				if (this.password == '') {
					this.tos(this.i18n.login.inputPassword)
					return
				}
				if (!this.checked) {
					this.tos(this.i18n.login.tos1)
					return
				}
				uni.showLoading({
					title: this.i18n.login.loading,
					mask: true
				})
				this.flag = false
				this.post('/user/login', {
					account: this.account,
					password: this.password,
				}).then(res => {
					console.log(res)
					uni.hideLoading()
					this.flag = true
					if (res.code == 1) {
						console.log('登录成功', res)
						uni.setStorageSync("token", res.data.userinfo.token)
						uni.setStorageSync("user_id", res.data.userinfo.user_id)
						uni.setStorageSync("userinfo", res.data.userinfo)
						uni.switchTab({
							url: "/pages/index/index"
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.loginPage {
		min-height: 100vh;
		position: relative;
		padding-bottom: 60rpx;
	}

	.loginClose {
		position: absolute;
		left: 30rpx;
		top: 24rpx;
		font-size: 44rpx;
		line-height: 44rpx;
		color: #111111;
		z-index: 5;
	}

	.loginLang {
		position: absolute;
		right: 30rpx;
		top: 26rpx;
		width: 44rpx;
		height: 44rpx;
		z-index: 5;
	}

	.loginBrand {
		padding-top: 110rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.loginLogo {
		width: 150rpx;
	}

	.loginBrandText {
		margin-top: 16rpx;
		font-size: 28rpx;
		color: #111111;
	}

	.loginWrap {
		padding: 50rpx 60rpx 0;
	}

	.loginTitle {
		font-size: 44rpx;
		font-weight: 700;
		color: #111111;
		margin-bottom: 28rpx;
	}

	.loginTab {
		display: inline-block;
		background: #EAF3FF;
		color: #1A74FF;
		font-size: 26rpx;
		padding: 10rpx 22rpx;
		border-radius: 10rpx;
		margin-bottom: 26rpx;
	}

	.loginField {
		margin-bottom: 30rpx;
	}

	.loginLabel {
		font-size: 28rpx;
		font-weight: 700;
		color: #111111;
		margin-bottom: 14rpx;
	}

	.loginInputBox {
		height: 88rpx;
		background: #EAF3FF;
		border-radius: 10rpx;
		padding: 0 22rpx;
		display: flex;
		align-items: center;
	}

	.loginInputBoxPwd {
		justify-content: space-between;
	}

	.loginInput {
		flex: 1;
		height: 88rpx;
		font-size: 28rpx;
		color: #111111;
	}

	.loginEye {
		width: 34rpx;
		height: 34rpx;
		margin-left: 16rpx;
		flex: 0 0 34rpx;
	}

	.loginForget {
		margin-top: 6rpx;
		font-size: 26rpx;
		color: #1A74FF;
		margin-bottom: 28rpx;
	}

	.loginBtn {
		width: 100%;
		height: 90rpx;
		background: #1A74FF !important;
		border-radius: 10rpx;
		line-height: 90rpx;
		color: #FFFFFF;
		font-size: 30rpx;
		text-align: center;
	}
	.loginRegLine {
		margin-top: 22rpx;
		font-size: 26rpx;
		color: #111111;
		line-height: 36rpx;
	}
	.loginRegLink {
		color: #1A74FF;
		margin-left: 8rpx;
	}
	.bottomBox {
		width: 750rpx;
		padding: 20rpx 30rpx;
		margin-top: 80rpx;
		// position: fixed;
		// bottom: 20rpx;
		// text-align: center;
		color: #BCBCBC;
		display: flex;
		// align-items: center;
		align-items: stretch;
		justify-content: center;
	}
</style>