From 79560c2a51f35fef960f204eeaf2e81900e2aebc Mon Sep 17 00:00:00 2001
From: lnn19986213 <1667908750@qq.com>
Date: Tue, 26 Apr 2022 10:58:12 +0800
Subject: [PATCH] =?UTF-8?q?=E7=99=BB=E5=BD=95=E9=A1=B5=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Login/Login.vue | 296 +++++++++++++++++++++++++-------------
 src/request/interface.js  |   1 -
 2 files changed, 199 insertions(+), 98 deletions(-)

diff --git a/src/pages/Login/Login.vue b/src/pages/Login/Login.vue
index 9aa9212..0fca4c1 100644
--- a/src/pages/Login/Login.vue
+++ b/src/pages/Login/Login.vue
@@ -1,113 +1,215 @@
 <template>
-    <view style="">
-        <u--form :model="userInfo" ref="loginForm">
-            <view class="content_main">
-                <view class="copyright_iocn">
-                    <image style="width: 80rpx; height: 60rpx;" src="../../static/icon10.png" mode=""></image>
-                    <image style="width: 156rpx; height: 50rpx;margin-left: 16rpx;" src="../../static/icon11.png"
-                        mode="">
-                    </image>
-                </view>
+	<view style="">
+		<u-gap height="60" bgColor="#FFF"></u-gap>
+		<u--form :model="userInfo" ref="loginForm">
+			<view class="content_main">
+				<view class="copyright_iocn">
+					<image style="width: 80rpx; height: 60rpx;" src="../../static/icon10.png" mode=""></image>
+					<image style="width: 156rpx; height: 50rpx;margin-left: 16rpx;" src="../../static/icon11.png"
+						mode="">
+					</image>
+				</view>
 
-                <u-form-item prop="number" ref="item1" class="data_itm">
-                    <u--input placeholder="请输入手机号" border="bottom" clearable  v-model="userInfo.number"></u--input>
-                </u-form-item>
-                <u-form-item prop="pasw" ref="item1" class="data_itm">
-                    <u--input type="password" placeholder="请输入密码" border="bottom" clearable v-model="userInfo.pasw">
-                    </u--input>
-                </u-form-item>
-                <u-button text="登录" size="large" throttleTime=1000 color="#99241B" style="margin-top: 84rpx;" @click="login()">
-                </u-button>
-                <view class="other_op">
-                    <text @click="goRegist">注册账号</text>
-                    <text @click="goRemeber">忘记密码？</text>
-                </view>
-            </view>
-        </u--form>
-    </view>
+				<view class="tab_op">
+					<view :class="tab == 0?'choosed':'unchoosed'" @click="pwdLog()">
+						密码登录
+					</view>
+					<view :class="tab == 1?'choosed':'unchoosed'" @click="codeLog()">
+						验证码登录
+					</view>
+				</view>
+				<u-form-item prop="number" ref="item1" class="data_itm" v-if="tab == 0">
+					<u--input placeholder="请输入手机号" border="bottom" clearable v-model="userInfo.number"></u--input>
+				</u-form-item>
+				<u-form-item prop="pasw" ref="item1" class="data_itm" v-if="tab == 0">
+					<u--input type="password" placeholder="请输入密码" border="bottom" clearable v-model="userInfo.pasw">
+					</u--input>
+				</u-form-item>
+				<u-form-item prop="phone" ref="item1" class="data_itm" v-if="tab == 1">
+					<u--input placeholder="请输入手机号" border="bottom" clearable v-model="userInfo.phone"></u--input>
+				</u-form-item>
+				<u-form-item prop="code" ref="item1" class="data_itm" v-if="tab == 1">
+					<u-input placeholder="请输入验证码" border="bottom" clearable v-model="userInfo.code">
+				  <template slot="suffix">
+							<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"></u-code>
+							<u-button @click="getCode" :text="tips" :hairline="false" plain style="border: 0px;">
+							</u-button>
+						</template>
+					</u-input>
+				</u-form-item>
+				<u-button text="登录" size="large" throttleTime=1000 color="#99241B" style="margin-top: 84rpx;"
+					@click="login()">
+				</u-button>
+				<view class="other_op">
+					<!-- <text @click="goRegist">注册账号</text> -->
+					<text @click="goRemeber">忘记密码？</text>
+				</view>
+			</view>
+		</u--form>
+	</view>
 </template>
 
 <script>
-    export default {
-        data() {
-            return {
-                userInfo: {
-                    number: null,
-                    pasw: null
-                },
-                rules: {
-                    'number': [{
-                        type: 'number',
-                        required: true,
-                        message: '请填写手机号',
-                        trigger: ['blur']
-                    }, {
-                        validator: (rule, value, callback) => {
-                            return uni.$u.test.mobile(value);
-                        },
-                        message: '请输入格式正确的手机号',
-                        trigger: ['blur'],
-                    }],
-                    'pasw': [{
-                        required: true,
-                        message: '请填写密码',
-                        trigger: ['blur']
-                    }],
-                }
-            };
-        },
-        methods: {
-            goRegist() {
-                uni.navigateTo({
-                    url: '/pages/Login/Register'
-                })
-            },
-            goRemeber() {
-                uni.navigateTo({
-                    url: '/pages/Login/RemeberPW'
-                })
-            },
-			login(){
-				let data = {
-					phone: this.userInfo.number,
-					pwd: this.userInfo.pasw
-				}
-				this.http.request('/auth/loginByPwd', {phone: this.userInfo.number,pwd: this.userInfo.pasw}, "POST").then(res => {
+	export default {
+		data() {
+			return {
+				tips: '',
+				userInfo: {
+					number: null,
+					pasw: null,
+					phone: null,
+					code: null,
+				},
+				rules: {
+					'number': [{
+						type: 'number',
+						required: true,
+						message: '请填写账号',
+						trigger: ['blur']
+					}],
+					'pasw': [{
+						required: true,
+						message: '请填写密码',
+						trigger: ['blur']
+					}],
+				},
+				tab: 0,
+			};
+		},
+		methods: {
+			pwdLog() {
+				this.tab = 0
+			},
+			codeLog() {
+				this.tab = 1
+			},
+			goRegist() {
+				uni.navigateTo({
+					url: '/pages/Login/Register'
+				})
+			},
+			goRemeber() {
+				uni.navigateTo({
+					url: '/pages/Login/RemeberPW'
+				})
+			},
+			login() {
+				if(this.tab == 0){
+					this.http.request('/auth/loginByPwd', {
+						phone: this.userInfo.number,
+						pwd: this.userInfo.pasw
+					}, "POST").then(res => {
 						if (res.code == 200) {
 							uni.navigateTo({
-							    url: '/pages/pageHome/pageHome'
+								url: '/pages/pageHome/pageHome'
 							})
 						}
 					}).catch(e => {
-							uni.showToast({
-							    title:e.data.message,
-								icon:"none",
-							});
-						})
-			}
-        },
-        onReady() {
-            this.$refs.loginForm.setRules(this.rules);
-        },
-    }
+						uni.showToast({
+							title: e.data.message,
+							icon: "none",
+						});
+					})
+				}else if(this.tab == 1){
+					this.http.request('/auth/loginByPhone', {
+						phone: this.userInfo.phone,
+						code: this.userInfo.code
+					}, "POST").then(res => {
+						if (res.code == 200) {
+							uni.navigateTo({
+								url: '/pages/pageHome/pageHome'
+							})
+						}
+					}).catch(e => {
+						uni.showToast({
+							title: e.data.message,
+							icon: "none",
+						});
+					})
+				}
+				
+			},
+			codeChange(text) {
+				this.tips = text;
+			},
+			getCode() {
+				uni.hideKeyboard()
+				if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.userInfo.phone))) { //校验手机号码是否有误
+					uni.showToast({
+						title: '请填写正确手机号码',
+						icon: "none"
+			  });
+					return false;
+				}
+
+				if (this.$refs.uCode.canGetCode) {
+					// 模拟向后端请求验证码
+					uni.showLoading({
+						title: '正在获取验证码'
+					})
+					this.http.request('/auth/getCode?phone=' + this.userInfo.phone, {}, "GET").then(res => {
+						if (res.code == 200) {
+							uni.hideLoading();
+							uni.$u.toast('验证码已发送');
+							this.$refs.uCode.start();
+						}
+					}).catch(e => {
+						uni.showToast({
+							title: e.data.message,
+							icon: "none",
+						});
+					})
+				} else {
+					uni.$u.toast('倒计时结束后再发送');
+				}
+			},
+		},
+		onReady() {
+			this.$refs.loginForm.setRules(this.rules);
+		},
+	}
 </script>
 
 <style lang="scss">
-    .content_main {
-        margin: 0rpx 76rpx;
+	.content_main {
+		margin: 0rpx 76rpx;
 
-        .copyright_iocn {
-            margin: 120rpx 0rpx;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
+		.copyright_iocn {
+			margin: 0rpx 0rpx 120rpx;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
 
-        .other_op {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 24rpx 0rpx;
-        }
-    }
+		.other_op {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			padding: 24rpx 0rpx;
+		}
+
+		.tab_op {
+			height: 60rpx;
+			width: 100%;
+			height: 60rpx;
+			overflow: hidden;
+			font-size: 16px;
+			font-weight: 600;
+
+			.choosed {
+				width: 200rpx;
+				text-align: center;
+				color: #99241B;
+				float: left;
+				font-size: 17px;
+			}
+
+			.unchoosed {
+				width: 200rpx;
+				text-align: center;
+				color: #32333B;
+				float: left;
+			}
+		}
+	}
 </style>
diff --git a/src/request/interface.js b/src/request/interface.js
index e048c3b..0447d13 100644
--- a/src/request/interface.js
+++ b/src/request/interface.js
@@ -52,7 +52,6 @@ export default {
 			options.complete = (response) => {
 				// console.log(response, 'response----')
 				let statusCode = response.statusCode
-				console.log(statusCode)
 				response.config = _config
 				if (process.env.NODE_ENV === 'development') {
 					if (statusCode === 200) {