Delivery-merchant/pages/Modifyphnoe.vue

<template>
	<view>
		<!-- <titlenav></titlenav> -->
		<view class="register">
			<view class="title">{{ forget ? '修改手机号' : '绑定新号码' }}</view>
			<view class="name">{{ forget ? '修改手机号即同时修改登录账户名称' : '请绑定新的号码，修改后登录即用新号码' }}</view>
			<view class="content" v-if="!forget">
				<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="phone" v-if="forget">
				<view class="text1">189****7474</view>
				<view class="text2">修改手机号需先验证当前手机号</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>
			<u-button type="primary">{{ forget ? '下一步' : '确定' }}</u-button>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import Titlenav from '../components/Titlenav.vue';
export default {
	components: {
		Titlenav
	},
	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>
.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: 60px 26px 12px;
	}
	margin: 10px 20px 0;
	.title {
		font-size: 24px;
		font-weight: bold;
		color: #000000;
		line-height: 33px;
		margin-bottom: 10px;
	}
	.name {
		font-size: 13px;
		font-weight: 400;
		color: #aaabad;
		line-height: 22px;
		margin-bottom: 50px;
	}
	.phone {
		margin: 0 26px;
		.text1 {
			font-size: 20px;
			font-weight: bold;
			color: #000000;
			line-height: 28px;
		}
		.text2 {
			font-size: 14px;
			font-weight: 400;
			color: #939599;
			line-height: 24px;
		}
	}
	.content {
		display: flex;
		align-items: center;
		margin: 0 26px;
		.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 26px 6px;
		}
		image {
			width: 24px;
			height: 24px;
		}
	}
}
</style>