Delivery-merchant/pages/Register.vue

<template>
	<view class="register">
		<view class="title">{{ forget ? '设置新密码' : '用户注册' }}</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">
			<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">
			<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="content content2">
			<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.passwords" /></view>
		</view>
		<u-button type="primary" @click="navigateTo('/pages/Login')">立即注册</u-button>
		<view class="btn" @click="navigateBack()">{{ forget ? '想起密码，立即登陆' : '已有账号，立即登陆' }}</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	data() {
		return {
			form: {},
			time: 0,
			forget: false
		};
	},
	onLoad(options) {
		this.forget = options.forget;
	},
	computed: {
		...mapState(['systemInfo'])
	},
	methods: {
		send() {
			console.log(this.form);
			this.sendCode(this.form.phone);
		}
	}
};
</script>

<style lang="scss" scoped>
.topImg {
	width: 28px;
	height: 28px;
	margin-left: 8px;
}
.register {
	/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: 18px 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-bottom: 28px;
	}
	.content {
		display: flex;
		align-items: center;
		.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>