SmartBeehive/pages/login/login.vue

<template>
	<view class="page">
		<!-- <u-navbar :is-back="false" :title="tittxt" :border-bottom="false" :background="bgc" title-color='#fff' title-size='36' height='36' >
			
		</u-navbar> -->
		<!-- <view class="page1" v-if="!ischeck">
			<view class="tit">
				请选择您的身份
			</view>
			<view class="cont" @click="type=1" :class="type==1? 'act1':'' " >
				<view class="img">
					<image src="https://api.ccttiot.com/smartmeter/img/static/u9G5tgpJskUSaT16Shn6" mode=""></image>
					<view class="txt">
						养蜂人
					</view>
				</view>
			</view>
			<view class="cont"  @click="type=2" :class="type==2? 'act1':'' ">
				<view class="img">
					<image src="https://api.ccttiot.com/smartmeter/img/static/uko7p1h7VgRZgRlCotGY" mode=""></image>
					<view class="txt">
						认养用户
					</view>
				</view>
			</view>
			<view class="btn" @click="chck()">
				确定
			</view>
		</view> v-if="ischeck"-->
		<view class="page2" >
			<view class="img_box">
				<image src="https://api.ccttiot.com/smartmeter/img/static/uko7p1h7VgRZgRlCotGY" mode=""></image>
			</view>
			<button class="button" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" >
				授权登录
			</button>
			<!-- <view class="button" style="text-align: center;background-color: transparent;border: 1px solid #FFF5D6;margin-top: 80rpx;color: #FFF5D6;" @click="btnname">
				手机号登录
			</view> -->
			<!-- <view class="yinsi">
				<u-checkbox-group>
					<u-checkbox v-model="checked" shape="circle" size="28"></u-checkbox>
				</u-checkbox-group>
				<view class="yinsiwz">
					我已同意并阅读 <text>《服务条款》</text> <text>《法律条款及隐私政策》</text>
				</view>
			</view> -->
		</view>
		
		<view class="inputbox" v-if="false">
			<!-- 在这里放置你的输入框 -->
			<view class="box1" v-if="chooseType">
				<view class="input_txt">
					首次使用请选择您的身份
				</view>
				<div class="button" style="margin-top: 162rpx;" @click="userType(1)">
					我是房东
				</div>
				<div class="button"  @click="userType(2)">
					我是租户
				</div>
			</view>
			<!-- <view class="box1" v-if="login">
				<view class="input_txt" style="width: 536rpx;font-size: 24rpx;line-height: 32rpx;">
					您暂未授权e租居小程序获取你的信息，将无法正常使用小程序的功能。如需要正常使用请点击“授权”按钮，打开头像，昵称等信息的授权。
				</view>
				
				<button class="button" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"  style="margin-top: 330rpx;margin-left: -10rpx;" >
					授权登录
				</button>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgc: {
					backgroundColor: "#7D86EF",
				},
				tittxt:"授权登录",
				chooseType:true,
				type:1,
				login:false,
				ischeck:false,
				checked:false
			}
		},
		methods: {
			// 跳转到账号密码登录
			btnname(){
				uni.navigateTo({
					url:'/pages/login/logoyzm'
				})
			},
			chck(){
				if(this.type==0){
				uni.showToast({
					title: '请先选择身份',
					icon: 'none',
					duration: 1000
				});
				}else{
					this.ischeck=true
				}
			
			},
			userType(num){
				this.chooseType=false
				this.login=true
				if(num==1){
					this.usertype='01'
				}else{
					this.usertype='00'
				}
			},
			// 点击进行获取手机号进行登录
			getPhoneNumber(e) {
				// if(this.checked == false){
				// 	uni.showToast({
				// 		title: '请先同意隐私政策',
				// 		icon: 'none',
				// 		duration: 1000
				// 	})
				// }else{
					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 = {
											loginCode: res.code,
					                        type: that.type,
					                        mobileCode: e.detail.code,
											deptId:100,
					                    };
					                    resolve(data)
					                } else {
					                    reject(res.errMsg)
					                }
					            },
					            fail(err) {
					                reject(err)
					            }
					        })
					    })
					}
					wxLoginAsync()    
					    .then(async (data) => {
					        this.$u.post("/app/auth/wxLogin",data).then((res) => {
					        		// this.$forceUpdate()
					        	if (res.code == 200) {
									console.log(res,'resres')
									wx.setStorageSync('token', res.token)
									that.ceshi()
					        	}else{
									uni.showToast({
										title: res.code,
										icon: 'none',
										duration: 1000
									});
								}
					        })
					    })
					    .catch((err) => {
					        console.error(err)
					    });
				// }

			},
			async ceshi() {
				this.$u.get("/app/user/userInfo").then((res) => {
					console.log('进入跳转')
					uni.switchTab({
						url: '/pages/index/index'
					})
				})
			},
		}
	}
</script>

<style lang="scss" >
	/deep/ .u-checkbox{
		display: block !important;
	}
	.yinsi{
		width: 100%;
		justify-content: center;
		display: flex;
		align-items: center;
		font-size: 24rpx;
		margin-top: 56rpx;
		color: #979797;
		.yinsiwz{
			margin-left: 4rpx;
		}
		text{
			color: #fff;
		}
	}
	page{
		background: #FFFFFF;
		background-image: url('https://api.ccttiot.com/smartmeter/img/static/uSDAKkwGLuWmNUnwnm6m');
		background-size: cover;
		/* 确保背景图覆盖整个区域 */
		background-repeat: no-repeat;
		/* 防止背景图重复 */
		background-position: center;
	}
	.page {
		padding: 0 64rpx;
		.page1{
			.tit{
				margin-top: 200rpx;
				font-weight: 500;
				font-size: 40rpx;
				color: #FFFFFF;
			}
			.cont{
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 52rpx;
				width: 620rpx;
				height: 366rpx;
				background: #FFF5D6;
				box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.15);
				border-radius: 30rpx 30rpx 30rpx 30rpx;
				.img{
					width: 208rpx;
					image{
						width: 208rpx;
						height: 208rpx;
					}
					.txt{
						width: 100%;
						text-align: center;
						font-weight: 500;
						font-size: 40rpx;
						color: #3D3D3D;
					}
				}
			}
			.act1{
				background: #FFE593;
			}
			.btn{
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 134rpx;
				width: 620rpx;
				height: 86rpx;
				background: #FFE47F;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				font-weight: 500;
				font-size: 36rpx;
				color: #FFFFFF;
			}
		}
		.page2{
			.img_box{
				margin-top: 250rpx;
				margin-left: 86rpx;
				width: 452rpx;
				height: 452rpx;
				image{
					width: 452rpx;
					height: 452rpx;
				}
			}
			.button{
				margin-top: 204rpx;
				margin-left: 18rpx;
				width: 586rpx;
				height: 90rpx;
				background: #FFF5D6;
				border-radius: 54rpx 54rpx 54rpx 54rpx;
				line-height: 90rpx;
				font-weight: 500;
				font-size: 40rpx;
				color: #FFC107;
			}
		}
	}
</style>