baiwan-vue-uniapp/pages/mine/help/index.vue

<template>
	<view class="help-container">
		<uni-forms ref="form" :model="formData" labelWidth="95px" :rules="rules">
			<uni-forms-item label="原手机号码:" name="phone" required>
				<uni-easyinput v-model="formData.phone" placeholder="请输入原手机号码" maxlength="11" />
			</uni-forms-item>
			<view style="width: 100%;height: 40rpx;"></view>
			<uni-forms-item label="新手机号码:" name="newPhone" required>
				<uni-easyinput v-model="formData.newPhone" placeholder="请输入新手机号码" maxlength="11" />
			</uni-forms-item>
			<view style="width: 100%;height: 40rpx;"></view>
			<view style="display: flex;flex-wrap: nowrap;justify-content: center;align-items: center;">
				<view style="width: 65%;">
					<uni-forms-item label="验证码:" name="code" required>
						<uni-easyinput v-model="formData.code" placeholder="请输入新手机验证码" maxlength="6" />
					</uni-forms-item>
				</view>
				<view class="yaz-code">验证码</view>
			</view>
			<button type="primary" @click="submit" style="margin-top: 40rpx;width: 60%;">提交</button>
		</uni-forms>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					phone: '',
					newPhone: '',
					code: ''
				},
				rules: {
					phone: {
						rules: [{
								required: true,
								errorMessage: '原手机号码不能为空'
							},
							{
								pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
								errorMessage: '请输入正确的手机号码'
							}
						]
					},
					newPhone: {
						rules: [{
							required: true,
							errorMessage: '新手机号码不能为空'
						}, {
							pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
							errorMessage: '请输入正确的手机号码'
						}]
					},
					code: {
						rules: [{
							required: true,
							errorMessage: '验证码不能为空'
						}]
					}
				}
			}
		},
		methods: {
			handleText(item) {
				this.$tab.navigateTo(`/pages/common/textview/index?title=${item.title}&content=${item.content}`)
			},
			// 提交手机号
			submit() {
				console.log('iiiiiiiiii')
				this.$refs.form.validate().then(res => {
					// updateUserProfile(this.user).then(response => {
					//   this.$modal.msgSuccess("修改成功")
					// })
				})
			}
		}
	}
</script>
<style scoped>
	/deep/.uni-forms-item {
		margin-bottom: 0rpx !important;
	}
</style>
<style lang="scss" scoped>
	.yaz-code {
		width: 30%;
		margin-left: 5%;
		color: #fff;
		font-size: 28rpx;
		background-color: #42B983;
		text-align: center;
		padding: 17rpx;
		border-radius: 10rpx;
	}

	page {
		background-color: #f8f8f8;
	}

	.help-container {
		margin-bottom: 100rpx;
		padding: 30rpx;
	}

	.list-title {
		margin-bottom: 30rpx;
	}

	.childList {
		background: #ffffff;
		box-shadow: 0px 0px 10rpx rgba(193, 193, 193, 0.2);
		border-radius: 16rpx;
		margin-top: 10rpx;
	}

	.line {
		width: 100%;
		height: 1rpx;
		background-color: #F5F5F5;
	}

	.text-title {
		color: #303133;
		font-size: 32rpx;
		font-weight: bold;
		margin-left: 10rpx;

		.iconfont {
			font-size: 16px;
			margin-right: 10rpx;
		}
	}

	.text-item {
		font-size: 28rpx;
		padding: 24rpx;
	}

	.question {
		color: #606266;
		font-size: 28rpx;
	}
</style>