warst/warst-h5/pages/my/updateTel.vue

<template>
	<!-- 修改手机号 -->
	<view class="container">
		<u--form
			labelPosition="left"
			labelWidth="90"
			:model="fmData"
			:rules="rules"
			ref="uForm"
		>
			<u-form-item label="新手机号" prop="phone" borderBottom>
				<c-input
					placeholder="请输入新手机号"
					v-model="fmData.phone"
					maxlength="11"
					border="none"
				></c-input>
			</u-form-item>

			<u-form-item label="验证码" prop="code" borderBottom>
				<c-input
					placeholder="请输入验证码"
					v-model="fmData.code"
					border="none"
				>
					<view class="send-code" slot="suffix">
						<text class="vertical-line">|</text>
						<c-code
							:phone="fmData.phone"
							:uniqueKey="updateTelCode"
							codeType="putPhone"
						></c-code>
					</view>
				</c-input>
			</u-form-item>
		</u--form>

		<c-button type="primary" @click="handleComplete">完成</c-button>
	</view>
</template>

<script>
import uniqueKey from '@/components/c-code/uniqueKey';
const { updateTelCode } = uniqueKey;
import { changePhone } from '@/api/user/my.js';
export default {
	name: 'updateTel',
	data() {
		return {
			updateTelCode,
			rules: {
				phone: [
					{
						type: 'string',
						required: true,
						message: '请输入新手机号',
						trigger: ['change'],
					},
					{
						type: 'string',
						required: true,
						message: '手机号格式不正确',
						trigger: ['change'],
						pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
					},
				],
				code: {
					type: 'string',
					required: true,
					message: '请输入验证码',
					trigger: ['change'],
				},
			},
			fmData: {
				phone: '',
				code: '',
			},
		};
	},
	methods: {
		async handleComplete() {
			await this.$refs.uForm.validate();
			try {
				this.$c.loading();
				await changePhone(this.fmData);
				uni.hideLoading();
				await this.$c.toast({
					title: '修改成功',
					icon: 'success',
				});
				uni.switchTab({
					url: '/pages/my/index',
				});
			} catch (e) {
				uni.hideLoading();
				console.error(e);
			}
		},
	},
};
</script>

<style scoped lang="scss">
.container {
	padding: $pg-pd;

	.u-form {
		background-color: #fff;
		margin-bottom: 100rpx;
		padding: 0px 30rpx;
		.u-form-item {
			.send-code {
				display: flex;
				align-items: center;
				.vertical-line {
					color: #e4e4e4;
					margin-right: 10rpx;
				}
			}
		}
	}
}
</style>