bike/pages/login/login.vue

<template>
	<view class="page">
		<view class="fixed">
			<u-navbar title="登录" :border-bottom="false" :background="background" title-color='#CCC' title-size='36' back-icon-color='#CCC'
				height='45'></u-navbar>
		</view>
		<!-- <u-navbar :is-back="false" :title="tittxt" :border-bottom="false" :background="bgc" title-color='#000' title-size='36' height='45' >
			
		</u-navbar> -->
		<view class="pages1" v-if="deptId==100">
			<view class="imgbox">
				<image src="https://lxnapi.ccttiot.com/bike/img/static/uzg30jo8Mx7lgaRHFyiO" mode=""></image>
			</view>
			<button class="button" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"   >
				授权登录
			</button>
			<!-- <view class="button1"  @click="back">
				取消登录
			</view> -->
		</view>
		<view class="pages2" v-if="deptId==101">
			<view class="imgbox">
				<image src="https://lxnapi.ccttiot.com/bike/img/static/uX6A5Dlyr4lvGFNuqfPK" mode=""></image>
			</view>
			<button class="button" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"   >
				授权登录
			</button>
		<!-- 	<view class="button1"  @click="back">
				取消登录
			</view> -->
		</view>
		<!-- <view class="tip">
			<image src="https://api.ccttiot.com/smartmeter/img/static/u4LEl3cUFgF9uN30ESnF" mode=""></image>
			我已同意并阅读《服务条款》《法律条款及隐私政策》
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgc: {
					backgroundColor: "#fff",
				},
				tittxt:"登录",
				chooseType:true,
				usertype:'',
				login:false,
				deptId:''
			}
		},
		onLoad() {
			this.deptId = uni.getStorageSync('deptId');
			// this.deptId = 101
		},
		methods: {
			userType(num){
				this.chooseType=false
				this.login=true
				if(num==1){
					this.usertype='01'
				}else{
					this.usertype='00'
				}
			},
			back(){
				uni.navigateBack({
					delta: 1 // delta值为1时表示返回的页面层数
				});
			},
			getPhoneNumber(e) {
			    let that = this;
			    console.log("eeeeeeee", e);
			    const wxLoginAsync = () => {
			        return new Promise((resolve, reject) => {
			            wx.login({
			                success(res) {
			                    if (res.code) {
			                        console.log('登录！', res);
			                        let data = {
										jscode: res.code,
			                            // userType: that.usertype,
			                            mobileCode: e.detail.code,
			                        };
			                        resolve(data);
			                    } else {
			                        reject(res.errMsg);
			                    }
			                },
			                fail(err) {
			                    reject(err);
			                }
			            });
			        });
			    };
			    wxLoginAsync()    
			        .then(async (data) => {
							let areaId=uni.getStorageSync('areaId'); 
			            this.$u.post("/wxlogin?mobileCode="+data.mobileCode+'&jsCode='+data.jscode+'&areaId='+areaId).then((res) => {
			            
			            	
			            	
			            		
			            		// this.$forceUpdate()
			            	if (res.code == 200) {
								console.log(res,'resres');
								wx.setStorageSync('token', res.token);
								that.ceshi()
								// uni.switchTab({
								// 	url: '/pages/index/index'
								// })
			            	}else{
								uni.showToast({
									title: res.msg,
									icon: 'none',
									duration: 2000
								});
							}
			            });
			           
			        })
			        .catch((err) => {
			            console.error(err);
			        });
			},
			async ceshi() {
				this.$u.get("/getAppInfo").then((res) => {
					console.log('进入跳转');
					uni.navigateTo({
						url: '/pages/index/index'
					})
				});
			},
		}
	}
</script>

<style lang="scss" >
	page{
		background: #FFFFFF;
	}
	.page {
		position: relative; /* 添加相对定位 */
		.fixed {
			z-index: 999;
			position: fixed;
			top: 0;
		}
		.pages1{
			.imgbox {
				margin-top:0rpx ;
				width: 750rpx;
				height: 734rpx;
				z-index: 0;
			
				image {
					width: 750rpx;
					height: 734rpx;
				}
			}
			.button{
				margin-top: 200rpx;
				width: 586rpx;
				height: 90rpx;
				background: #4C97E7;
				border-radius: 54rpx 54rpx 54rpx 54rpx;
				font-weight: 500;
				font-size: 40rpx;
				color: #FFFFFF;
			}
			.button1{
				margin: 72rpx auto;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 586rpx;
				height: 90rpx;
				background: #fff;
				border-radius: 54rpx 54rpx 54rpx 54rpx;
				border: 4rpx solid #4C97E7;
				font-weight: 500;
				font-size: 40rpx;
				color: #4C97E7;
			}
		}
		.pages2{
			.imgbox {
				margin-top:0rpx ;
				width: 750rpx;
				height: 1274rpx;
				z-index: 0;
			
				image {
					width: 750rpx;
					height: 1274rpx;
				}
			}
			.button{
				margin-top: 100rpx;
				width: 586rpx;
				height: 90rpx;
				background: #4C97E7;
				border-radius: 54rpx 54rpx 54rpx 54rpx;
				font-weight: 500;
				font-size: 40rpx;
				color: #FFFFFF;
			}
			.button1{
				margin: 72rpx auto;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 586rpx;
				height: 90rpx;
				background: #fff;
				border-radius: 54rpx 54rpx 54rpx 54rpx;
				border: 4rpx solid #4C97E7;
				font-weight: 500;
				font-size: 40rpx;
				color: #4C97E7;
			} 
		}
		
	}
	
	.tip{
		margin-top:128rpx ;
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: center;
		font-weight: 400;
		font-size: 20rpx;
		color: #979797;
		image{
			width: 26rpx;
			height: 26rpx;
		}
	}

	
</style>