页面修改未授权登录

pages/login/index.vue

@@ -1,109 +1,58 @@
 <template>
-	<view class="page">
-		<view class="bg">
-			<view class="title">您好！欢迎使用<br>游嵊泗商家服务平台</view>
-		</view>
+	<view class="page" :style="{'min-height':h+'px'}">
 		<view class="box">
+			<image src="https://i.ringzle.com/file/20240109/d6c4691423cf40c2bdf9210d389cdd1e.png"></image>
+			<view class="text">您好！欢迎使用<br>游嵊泗商家服务平台</view>
 			<view class="login">
-				<view class="tabs">
-					<view :class="tidx==0?'active':''" @tap="changeTab(0)">账号登录</view>
-					<view :class="tidx==1?'active':''" @tap="changeTab(1)">验证码登录</view>
-				</view>
-				<view class="card" v-if="tidx==0">
-					<view class="t_item">
-						<text>账号</text>
-						<input type="text" placeholder="请输入您的账号" placeholder-style="{color:#999999}" v-model="account" @blur="setAccount" @confirm="setAccount">
-					</view>
-					<view class="t_item">
-						<text>密码</text>
-						<input type="password" placeholder="请输入您的密码" placeholder-style="{color:#999999}" v-model="password" @blur="setPassword" @confirm="setPassword">
-					</view>
-				</view>
-				<view class="card" v-if="tidx==1">
-					<view class="t_item">
-						<text>手机号</text>
-						<input type="tel" placeholder="请输入您的手机号" placeholder-style="{color:#999999}" v-model="phone" @blur="setPhone" @confirm="setPhone">
-					</view>
-					<view class="t_item">
-						<text>验证码</text>
-						<view class="ti_code">
-							<input type="number" placeholder="请输入验证码" placeholder-style="{color:#999999}" v-model="code" @blur="setCode" @confirm="setCode">
-							<view class="tic_text">
-								<text @tap="sendCode" :class="text=='获取验证码'?'active':''">{{text}}</text>
-								<span v-if="text!='获取验证码'">{{time}}S</span>
-							</view>
-						</view>
-					</view>
-				</view>
-				<view class="forget" @tap="toForgot">忘记密码?</view>
-			</view>
-			<view class="to_login" @tap="toLogin">登录</view>
-			<view class="agreement">
-				登录即代表已阅读并同意<span>《用户协议》</span>
+				<button open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">登录</button>
 			</view>
 		</view>
 	</view>
 </template>
 
 <script>
-	var timer;
 	export default {
 		data() {
 			return {
-				tidx:0,
-				text:'获取验证码',
-				time:59,
-				account:'',
-				password:'',
-				phone:'',
-				code:''
+				
 			}
 		},
+		onShow() {
+			uni.clearStorageSync();
+		},
 		methods: {
-			changeTab(idx){
-				this.tidx = idx;
-			},
-			setAccount(e){
-				this.account = e.target.value;
+			//获取手机号进行登录
+			decryptPhoneNumber(e){
+				if(e.detail.code) this.wxLogin(e.detail.code);
 			},
-			setPassword(e){
-				this.password = e.target.value;
-			},
-			setPhone(e){
-				this.phone = e.target.value;
-			},
-			setCode(e){
-				this.code = e.target.value;
-			},
-			sendCode(){
-				if(this.text!='获取验证码') return;
-				this.text = '重新发送';
-				timer = setInterval(()=>{
-					this.time--;
-					if(this.time==0){
-						this.text = '获取验证码';
-						this.time = 59;
-						clearInterval(timer);
+			//登录
+			wxLogin(code){
+				uni.showLoading({ title:'登录中' });
+				let that = this;
+				wx.login({
+					success(res){
+						that.$api.post('/auth/oauth/token',{
+							code:res.code,
+							phoneCode:code,
+							grant_type:'merchantWeChat',
+							captcha:'aaa'
+						},false).then(result=>{
+							if(result.data.code===0){
+								uni.setStorageSync('authorization',result.data.token_type+' '+result.data.access_token);
+								uni.setStorageSync('access_token',result.data.access_token);
+								that.$api.get('/sys/user/info').then(resu=>{
+									if(resu.data.code===0){
+										that.$showToast('登录成功');
+										setTimeout(()=>{
+											uni.reLaunch({
+												url:'/pages/login/select?userInfo='+encodeURIComponent(JSON.stringify(resu.data.data))
+											})
+										},1500)
+									}else that.$showToast(resu.data.msg)
+								})
+							}else that.$showToast(result.data.msg)
+						})
 					}
-				},1000)
-			},
-			toForgot(){
-				uni.navigateTo({
-					url:'/pages/login/forgot'
-				})
-			},
-			toLogin(){
-				if(this.tidx==0){
-					if(!this.account) return this.$showToast('请输入您的账号');
-					if(!this.password) return this.$showToast('请输入您的密码');
-				}
-				if(this.tidx==1){
-					if(!/^1([3589]\d|4[5-9]|6[1-2,4-7]|7[0-8])\d{8}$/.test(this.phone)) return this.$showToast('请输入正确的手机号');
-					if(!this.code) return this.$showToast('请输入验证码');
-				}
-				
-				uni.reLaunch({
-					url:'/pages/home/index'
 				})
 			}
 		}
@@ -112,157 +61,43 @@
 
 <style scoped lang="less">
 	.page{
-		.bg{
-			width: 100%;
-			height: 574rpx;
-			background: url(https://i.ringzle.com/file/20240106/d96376ae556b4f298abee861105b71b4.png) no-repeat;
-			background-size: 100% 100%;
-			padding: 237rpx 0 0 40rpx;
-			box-sizing: border-box;
-			position: relative;
-			z-index: 1;
-			.title{
-				font-size: 40rpx;
-				font-family: PingFang SC, PingFang SC;
-				font-weight: 800;
-				color: #FFFFFF;
-				line-height: 72rpx;
-			}
-		}
-		
+		background: url(https://i.ringzle.com/file/20240109/472b6b7b9ea44652b85e73c796876378.png) no-repeat;
+		background-size: 100% 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
 		.box{
-			width: 100%;
-			background: #FFFFFF;
-			border-radius: 60rpx 60rpx 0rpx 0rpx;
-			padding: 85rpx 30rpx 96rpx;
-			box-sizing: border-box;
-			margin-top: -149rpx;
-			position: relative;
-			z-index: 2;
-			.login{
-				width: 100%;
-				padding: 0 30rpx;
-				box-sizing: border-box;
-				.tabs{
-					display: flex;
-					align-items: center;
-					&>view{
-						padding-bottom: 16rpx;
-						font-size: 40rpx;
-						font-family: PingFang SC, PingFang SC;
-						font-weight: 800;
-						color: #999999;
-						position: relative;
-						&.active{
-							color: #333333;
-							&::after{
-								content: '';
-								width: 80rpx;
-								height: 6rpx;
-								background: #1372FF;
-								border-radius: 4rpx 4rpx 4rpx 4rpx;
-								position: absolute;
-								left: 50%;
-								margin-left: -40rpx;
-								bottom: 0;
-							}
-						}
-						&:last-child{
-							margin-left: 60rpx;
-						}
-					}
-				}
-				.card{
-					padding-top: 20rpx;
-					.t_item{
-						margin-top: 40rpx;
-						display: flex;
-						flex-direction: column;
-						padding-bottom: 20rpx;
-						border-bottom: 1rpx solid #D1D1D1;
-						text{
-							font-size: 32rpx;
-							font-family: PingFang SC, PingFang SC;
-							font-weight: 800;
-							color: #333333;
-						}
-						input{
-							border: none;
-							font-size: 28rpx;
-							font-family: PingFang SC, PingFang SC;
-							font-weight: 400;
-							color: #333333;
-							margin-top: 30rpx;
-						}
-						.ti_code{
-							display: flex;
-							align-items: center;
-							justify-content: space-between;
-							input{
-								width: calc(100% - 200rpx);
-							}
-							.tic_text{
-								display: flex;
-								align-items: center;
-								margin-top: 30rpx;
-								text{
-									font-size: 28rpx;
-									font-family: PingFang SC, PingFang SC;
-									font-weight: 400;
-									color: #999999;
-									&.active{
-										color: #1372FF;
-									}
-								}
-								span{
-									font-size: 28rpx;
-									font-family: PingFang SC, PingFang SC;
-									font-weight: 400;
-									color: #1372FF;
-									margin-left: 10rpx;
-								}
-							}
-						}
-					}
-				}
+			width: calc(100% - 180rpx);
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			image{
+				width: 480rpx;
+				height: 520rpx;
 			}
-			
-			.forget{
-				width: 100%;
-				box-sizing: border-box;
-				text-align: right;
-				margin-top: 30rpx;
-				font-size: 24rpx;
-				font-family: PingFang SC, PingFang SC;
-				font-weight: 400;
-				color: #1372FF;
-			}
-			
-			.to_login{
-				width: 100%;
-				height: 96rpx;
-				background: #1372FF;
-				border-radius: 48rpx 48rpx 48rpx 48rpx;
-				line-height: 96rpx;
+			.text{
 				text-align: center;
-				margin-top: 80rpx;
-				font-size: 34rpx;
+				font-size: 56rpx;
 				font-family: PingFang SC, PingFang SC;
-				font-weight: 400;
+				font-weight: 800;
 				color: #FFFFFF;
-				letter-spacing: 2rpx;
+				line-height: 96rpx;
 			}
-			
-			.agreement{
+			.login{
+				margin-top: 80rpx;
 				width: 100%;
-				text-align: center;
-				margin-top: 303rpx;
-				font-size: 24rpx;
-				font-family: PingFang SC, PingFang SC;
-				font-weight: 400;
-				color: #999999;
-				span{
-					color: #1372FF;
+				height: 96rpx;
+				button{
+					width: 100%;
+					height: 100%;
+					background: #FFFFFF;
+					border-radius: 48rpx 48rpx 48rpx 48rpx;
+					line-height: 96rpx;
+					text-align: center;
+					font-size: 34rpx;
+					font-family: PingFang SC, PingFang SC;
+					font-weight: 400;
+					color: #145EE6;
 				}
 			}
 		}