提交info

pages2/wd/info.vue

@@ -46,7 +46,7 @@
 							</pick-regions>
 						<u-icon name="arrow-right" color="#999999" size="28"></u-icon></view>
 					</view>
-					<view class="item" @click="showPhoneModal = true">
+					<view class="item" @click="showPhone()">
 						<view>手机号码</view>
 						<view>{{ form.telphone }}<u-icon name="arrow-right" color="#999999" size="28"></u-icon></view>
 					</view>
@@ -71,6 +71,30 @@
 		</view>
 	</u-modal>
 	
+	<u-popup v-model="showPhoneModal" mode="bottom" class="modal" border-radius="32">
+		<view class="modal__content">
+			<view class="top">
+				<view class="top__line"></view>
+				<view class="top__text">更换手机号码</view>
+			</view>
+			<view class="form">
+				<u-form :model="telForm" ref="telForm">
+					<view class="input-wrap">
+						<u-form-item prop="tel"><u-input ref="tel" placeholder="手机号码" v-model="telForm.tel" /></u-form-item>
+						<u-form-item prop="code">
+							<u-input placeholder="验证码" v-model="telForm.code" />
+							<view  slot="right" @click="getCode" class="getcode">{{codeTips}}</view>
+						</u-form-item>
+					</view>
+					<view class="btns">
+						<view class="cancel" @click="showPhoneModal = false;">取消</view>
+						<view class="submit">确认更换</view>
+					</view>
+				</u-form>
+			</view>
+		</view>
+	</u-popup>
+	<u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code>
 	<u-navbar   title="我的资料" :border-bottom="false" background="{ background: '#ffffff',opacity:0.4; }" title-color="#ffffff" back-icon-color="#ffffff">
 		
 	</u-navbar>
@@ -82,10 +106,15 @@
 export default {
 	data() {
 		return {
+			showPhoneModal:false,
 			form:{
 				avatar:'',
 				userBirth:new Date()
 			},
+			telForm:{
+				tel:'',
+				code:'',
+			},
 			array_sex: ['男', '女'],
 			n_show:false,
 			defaultRegionCode: '440112',
@@ -93,8 +122,37 @@ export default {
 			nickname:'',
 			realname:'',
 			idCard:'',
+			codeTips:'',
 			avatarUrl:'',
-			avatarOssKey:''
+			avatarOssKey:'',
+			rules: {
+				tel: [
+					{ 
+						required: true, 
+						message: '请输入手机号', 
+						// 可以单个或者同时写两个触发验证方式 
+						trigger: ['change','blur'],
+					},
+					{
+						validator: (rule, value, callback) => {
+							// 上面有说，返回true表示校验通过，返回false表示不通过
+							// this.$u.test.mobile()就是返回true或者false的
+							return this.$u.test.mobile(value);
+						},
+						message: '手机号码格式不正确',
+						// 触发器可以同时用blur和change
+						trigger: ['change','blur'],
+					}
+				],
+				code: [
+					{ 
+						required: true, 
+						message: '请输入验证码', 
+						// 可以单个或者同时写两个触发验证方式 
+						trigger: ['change'],
+					}
+				],
+			},
 			
 		};
 	},
@@ -103,7 +161,7 @@ export default {
 		console.log(this.form)
 	},
 	onLoad(option) {
-		
+		this.$refs.telForm.setRules(this.rules)
 	},
 	methods: {
 		bindPickerChangeSex(e) {
@@ -278,6 +336,39 @@ export default {
 					});
 				}
 			});
+		},
+		showPhone() {
+			this.showPhoneModal = true;
+			this.$refs.telForm.setRules(this.rules)
+		},
+		
+		codeChange(text) {
+			this.codeTips = text;
+		},
+		getCode() {
+			let that = this
+			if(that.$refs.uCode.canGetCode) {
+				if(that.$refs.tel.validateState == 'success') {
+					let datas = {tel:this.form.tel}
+					that.$api.registerSms(datas).then(
+						res => {
+							if (res.data.code == 200) {
+								that.$u.toast('验证码已发送');
+								// 通知验证码组件内部开始倒计时
+								that.$refs.uCode.start();
+							} else {
+								that.$u.toast(res.data.msg);
+							}
+						},
+						err => {
+							console.log(err);
+						}
+					);	
+				} else {
+					console.log(this.$refs.tel)
+					this.$refs.tel.onFieldChange()
+				}
+			}
 		}
 	},
 	computed: {...mapGetters(['userInfo'])},
@@ -358,4 +449,83 @@ export default {
 		margin: 0 auto;
 		margin-top: 50rpx;
 	}
+	
+	.modal {
+		&__content {
+			position:relative;
+			width: 750rpx;
+			height: 1208rpx;
+			background: #FFFFFF;
+			box-shadow: 0px 0px 16rpx 4rpx #919CB2;
+			border-radius: 32rpx 32rpx 0rpx 0rpx ;
+			overflow: hidden;
+			
+			.top {
+				border-bottom: 1rpx solid #eee;
+				&__line {
+					position: absolute;
+					top: 10rpx;
+					left: 50%;
+					transform: translateX(-50%);
+					width: 80rpx;
+					height: 8rpx;
+					background-color: #999;
+					border-radius: 4rpx;
+				}
+				
+				&__text {
+					height: 77rpx;
+					text-align: center;
+					line-height: 90rpx;
+					font-size: 24rpx;
+					color: #999;
+					position: relative;
+				}
+			}
+			
+			.form {
+				margin: 24rpx auto 0;
+				width: 686rpx;
+				height: 360rpx;
+				background: #FFFFFF;
+				border-radius: 24rpx 24rpx 24rpx 24rpx;
+				
+				.input-wrap {
+					padding:20rpx 80rpx;
+					
+					.getcode {
+						color:#007AFF;
+						font-size: 30rpx;
+					}
+				}
+				
+				.btns {
+					display: flex;
+					justify-content: space-between;
+					margin-top:160rpx;
+					.cancel {
+						text-align: center;
+						line-height: 80rpx;
+						color:#007AFF;
+						width: 200rpx;
+						height: 80rpx;
+						font-size: 30rpx;
+						background: #F5F5F5;
+						border-radius: 40rpx 40rpx 40rpx 40rpx;
+					}
+					
+					.submit {
+						text-align: center;
+						line-height: 80rpx;
+						color:#fff;
+						font-size: 30rpx;
+						width: 438rpx;
+						height: 80rpx;
+						background: #007AFF;
+						border-radius: 40rpx 40rpx 40rpx 40rpx;
+					}
+				}
+			}
+		}
+	}
 </style>