1

pagesMy/account/bindPhone.vue

@@ -1,18 +1,20 @@
 <template>
-	<mobile-frame :frameStyle="frameStyle" @toPath="toPath">
+	<mobile-frame>
 		<view class="main">
 			<view class="one">
 				<uni-forms ref="form" :modelValue="form" :rules="rules" label-width="auto">
 					<uni-forms-item label="手机号" name="phone">
-						<uni-easyinput type="text" v-model="form.phone" placeholder="请输入您的手机号" />
+						<uni-easyinput type="number" v-model="form.phone" placeholder="请输入您的手机号" />
 					</uni-forms-item>
-					<uni-forms-item label="验证码" name="code" class="local">
-						<uni-easyinput type="text" v-model="form.code" placeholder="验证码图片点击可更改" />
-						<button class="localicon" type="primary" size="mini">发送验证码</button>
-					</uni-forms-item>
-					<uni-forms-item label="手机验证码" name="num" class="local">
-						<uni-easyinput type="text" v-model="form.num" placeholder="请输入您的手机验证码" />
-						<button class="localicon" type="primary" size="mini">发送验证码</button>
+					<uni-forms-item label="手机验证码" name="code">
+						<view class="yzm">
+							<view class="l">
+								<uni-easyinput type="text" v-model="form.code" placeholder="请输入您的手机验证码" />
+							</view>
+							<view class="r">
+								<button type="default" size="mini" @tap="sendCount">{{time_count==0?'发送验证码':time_count}}</button>
+							</view>
+						</view>
 					</uni-forms-item>
 				</uni-forms>
 				<view class="btn">
@@ -29,9 +31,7 @@
 	export default {
 		data() {
 			return {
-				frameStyle: {
-					useBar: false
-				},
+				user: {},
 				form: {},
 				rules: {
 					phone: {
@@ -41,56 +41,86 @@
 						}]
 					},
 					code: {
-						rules: [{
-							required: true,
-							errorMessage: '请输入验证码',
-						}]
-					},
-					num: {
 						rules: [{
 							required: true,
 							errorMessage: '请输入手机验证码',
 						}]
 					},
 				},
+				// 倒计时
+				time_count: 0
 			};
 		},
-		onLoad: function(e) {
-			console.log(e);
+		onShow: function() {
+			const that = this;
+			that.watchLogin();
 		},
-		onShow: function() {},
 		methods: {
-			toPath(e) {
-				if (e && e.route) uni.redirectTo({
-					url: `/${e.route}`
+			watchLogin() {
+				const that = this;
+				uni.getStorage({
+					key: 'token',
+					success: function(res) {
+						let user = that.$jwt(res.data);
+						if (user) that.$set(that, `user`, user);
+					},
+					fail: function(err) {
+						console.log(err);
+					}
 				})
 			},
+			sendCount() {
+				const that = this;
+				let form = that.form;
+				if (form && form.phone) {
+					let time_count = 60;
+					that.$set(that, `time_count`, time_count);
+					that.timeDown();
+				} else {
+					uni.showToast({
+						title: '输入错误，请重新输入!',
+						icon: 'none'
+					})
+				}
+			},
+			// 倒计时
+			timeDown() {
+				const that = this;
+				var times = setInterval(() => {
+					that.time_count--;
+					if (that.time_count <= 0) {
+						clearInterval(times);
+					}
+				}, 1000);
+			},
 			// 提交保存
-			onSubmit() {
+			onSubmit(ref) {
 				const that = this;
-				let data = that.form;
-				this.$refs.form.validate().then(async (res) => {
-					let arr;
-					console.log(data);
-					// if (data._id) {
-					// 	arr = await that.$api(``, 'POST', data)
-					// } else {
-					// 	arr = await that.$api(``, 'POST', data)
-					// }
-					// if (arr.errcode == '0') {
-					// 	uni.showToast({
-					// 		title: `维护信息成功`,
-					// 		icon: 'success',
-					// 		duration: 2000
-					// 	});
-					// 	that.back()
-					// } else {
-					// 	uni.showToast({
-					// 		title: arr.errmsg,
-					// 		icon: 'error',
-					// 		duration: 2000
-					// 	})
-					// }
+				let user = that.user;
+				that.$refs[ref].validate().then(async params => {
+					let code = '1234';
+					if (params.code == code) {
+						let res = await that.$api(`/user/${user._id}`, 'POST', params);
+						if (res.errcode == '0') {
+							uni.showToast({
+								title: '手机号绑定成功',
+								icon: 'none'
+							})
+							uni.navigateBack({
+								delta: 1
+							})
+						} else {
+							uni.showToast({
+								title: res.errms,
+								icon: 'none'
+							})
+						}
+					} else {
+						uni.showToast({
+							title: '验证码输入错误!',
+							icon: 'none'
+						})
+					}
 				})
 			},
 		}
@@ -107,13 +137,6 @@
 		.one {
 			padding: 2vw;
 
-			.uni-input {
-				border: #f1f1ff 1px solid;
-				padding: 2vw 2vw;
-				border-radius: 1vw;
-			}
-
-
 			.btn {
 				text-align: center;
 
@@ -142,10 +165,23 @@
 		flex-direction: row;
 	}
 
+	.yzm {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
 
-	.localicon {
-		position: absolute;
-		right: 0;
-		top: 5px;
+		.l {
+			flex-grow: 1;
+		}
+
+		.r {
+			width: 20vw;
+
+			button {
+				width: 100%;
+				line-height: 2.8;
+				padding: 0 1vw;
+			}
+		}
 	}
 </style>