ROBOT-APP/code/HBX/pages/webview/changePhone.vue

<template>
	<view class="pages">
		<uni-forms class="form" :value="dataObj" ref="formData" :rules="rules"  :border="true"
			label-width="100">
			<uni-forms-item label="新手机号" name="mobile" :required="true" label-width="100">
				<input :value="dataObj.mobile" type="text" @input="binddata('mobile',$event.detail.value)"
					class="uni-input" placeholder="请输入新手机号" />
			</uni-forms-item>
		</uni-forms>
		<button class="but" type="default" :loading="loading" :disabled="loading" @tap="changePass">确认</button>
	</view>
</template>

<script>
	import {
		updateMobile,
	} from '@/common/api.js'
	export default {
		data() {
			return {
				dataObj: {
					mobile: ""
				},
				loading: false,
				rules: {
					mobile: {
						rules: [{
								required: true,
								errorMessage: '请输入新手机号',
							},
							{
								validateFunction: function(rule, value, data, callback) {
									if (!(/^1[3456789]\d{9}$/.test(data.mobile))) {
										callback('请输入正确的手机号')
									}
									return true
								}
							}
						]
					},
				}
			}
		},
		onReady() {
		        this.$refs.formData.setRules(this.rules)
		    },
		methods: {
			binddata(v, e) {
				this.dataObj[v] = e
			},
			changePass() {
				this.$refs.formData.submit().then(res => {
					this.loading = true
					updateMobile({
						mobile:this.dataObj.mobile,
						userId:this.$store.state.Token
					}).then(res =>{
						console.log(res)
						this.loading = false
						uni.$emit("changeUser",true)
						plus.nativeUI.toast('修改成功')
						setTimeout(() =>{

							uni.navigateBack({

							})
						},1000)

					}).catch(e =>{
						this.loading = false
					})
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.form {
		border-bottom: 1px solid #EEEEEE;
	}

	.but {
		width: 600rpx;
		margin-top: 420rpx;
		background-color: #0099FF;
		color: #fff;
	}
</style>