Delivery-merchant/pages/Login.vue

<template>
	<view :style="{ paddingTop: `${systemInfo.statusBarHeight}px` }">
		<view class="login">
			<view class="text1" @click="codeFn">{{ flag ? '账号密码登陆' : '验证码登录' }}</view>
			<view class="title">{{ flag ? '验证码登录' : '账号密码登陆' }}</view>
			<view class="content">
				<image src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-23-15-00-09YCjgycbL.png" mode="widthFix"></image>
				<view class="border"><input class="inputNm" placeholder="请输入手机号" type="number" v-model="form.phone" /></view>
			</view>
			<view class="content content2" v-if="flag">
				<image src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-23-15-56-51fUQmIfWc.png" mode="widthFix"></image>
				<view class="border code">
					<input class="inputNm" placeholder="请输入验证码" type="number" v-model="form.code" />
					<view class="code2" @click="send">{{ time === 0 ? '发送验证码' : `重新发送${time}s` }}</view>
				</view>
			</view>
			<view class="content content2" v-if="!flag">
				<image src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-23-15-00-32OuHmKLtr.png" mode="widthFix"></image>
				<view class="border"><input class="inputNm" placeholder="请输入密码" type="number" v-model="form.password" /></view>
			</view>
			<view class="text1" v-if="!flag" @click="navigateTo('/pages/Register?forget=' + true)">忘记密码?</view>
			<u-button type="primary" @click="Jump">登录</u-button>
			<view class="btn" @click="navigateTo('/pages/Register')">暂无账号，立即注册</view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	computed: {
		...mapState(['systemInfo'])
	},
	data() {
		return {
			form: {},
			flag: false,
			time: 0
		};
	},
	methods: {
		codeFn() {
			this.flag = !this.flag;
		},
		Jump() {
			uni.switchTab({
				url: '/pages/Mine'
			});
		},
		send() {
			console.log(this.form);
			this.sendCode(this.form.phone);
		}
	}
};
</script>

<style lang="scss" scoped>
.login {
	/deep/ .uni-input-placeholder {
		font-size: 14px;
		font-weight: 400;
		color: #c8c9cc;
		line-height: 24px;
	}
	/deep/ .u-btn {
		height: 48px;
		font-size: 14px;
		margin: 30px 0 12px 0;
	}
	margin: 54px 45px 0;
	.text1 {
		font-size: 18px;
		font-weight: 400;
		color: #c8c9cc;
		line-height: 25px;
		text-align: right;
	}
	.title {
		font-size: 24px;
		font-weight: bold;
		color: #000000;
		line-height: 33px;
		margin: 10px 0 28px 0;
	}
	.content {
		display: flex;
		align-items: center;
		justify-content: space-between;
		.border {
			border-bottom: 1px solid #f2f3f5;
			width: 100%;
			margin-left: 10px;
			&.code {
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
			.inputNm {
				height: 44px;
			}
			.code2 {
				font-size: 13px;
				font-weight: 400;
				color: #214bbe;
				line-height: 18px;
			}
		}
		&.content2 {
			margin: 20px 0 6px;
		}
		image {
			width: 24px;
			height: 24px;
		}
	}
	.btn {
		height: 48px;
		background: #ffffff;
		border-radius: 4px;
		border: 1px solid #214bbe;
		font-size: 14px;
		font-weight: bold;
		color: #214bbe;
		line-height: 48px;
		text-align: center;
	}
}
</style>