baodeng_xcx/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="imgbox">
			<image src="https://api.ccttiot.com/smartmeter/img/static/uGfU2kTWiHxXEWrNAOuA" mode=""></image>
		</view>
		<button class="ceshi" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" v-if="checked">
			授权登录
		</button>
		<button class="ceshi" @click="btndl" v-else>授权登录</button>
		<button class="zanbu" @click="btnzanbu">暂不登录</button>
		<view class="tip" @click="btnxz">
		    <u-checkbox-group>
		    	<u-checkbox @change.stop="checkboxGroupChange" v-model="checked" shape="circle" active-color="#FF8998" size="26"></u-checkbox>
		    </u-checkbox-group>	我已阅读并同意<text style="color: #FF8998;" @click="btabout">《服务协议》</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgc: {
					backgroundColor: "#010000",
				},
				tittxt:"登录",
				chooseType:true,
				usertype:'',
				login:false,
				checked:false,
				fxid:'',
				yi:true
			}
		},
		onLoad(option) {
			console.log(option);
			if(option.fxid){ //判断是否分享未登录 进入登录页
				this.fxid = option.fxid
			}
		},
		methods: {
			btabout(){
				console.log(11);
				uni.navigateTo({
					url:'/page_shanghu/about?tit=' + '服务协议' + '&type=4'
				})
			},
			checkboxGroupChange(e) {
				console.log(e);
				this.yi = false
				setTimeout(()=>{
					this.yi = true
				},2000)
			},
			btnxz(){
				if(this.yi == true){
					this.checked = !this.checked
					console.log(11);
				}
				console.log(22);
			},
			// 测试登录
			btndl(){
				if(this.checked == false){
					uni.showToast({
						title: '请勾选《服务协议》',
						icon: 'none',
						duration:2000
					})
				}
			},
			// 暂不登录
			btnzanbu(){
				uni.switchTab({
					url:'/pages/index/index'
				})
			},
			
			getPhoneNumber(e) {
				if(this.checked == false){
					uni.showToast({
						title: '请勾选服务协议，法律条款以及隐私政策',
						icon: 'none',
						duration:2000
					})
					return
				}
			    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,
			                            mobileCode: e.detail.code,
										appId:that.$store.state.appid
			                        };
			                        resolve(data);
			                    } else {
			                        reject(res.errMsg);
			                    }
			                },
			                fail(err) {
			                    reject(err);
			                }
			            });
			        });
			    };
			    wxLoginAsync()    
			        .then(async (data) => {
			            this.$u.post("/wxLogin",data).then((res) => {
			            	if (res.code == 200) {
								console.log(res,'resres');
								wx.setStorageSync('token', res.token);
								that.ceshi()
			            	}
			            });
			           
			        })
			        .catch((err) => {
			            console.error(err);
			        });
			},
			async ceshi() {
				this.$u.get("/getInfo").then((res) => {
					console.log('进入跳转');
					let that = this
					if(res.code == 200){
						console.log(that.fxid,'121212121');
						if(that.fxid){ //判断是否有分享id，有则直接跳转拼桌详情页
							uni.setStorageSync('user',res.user)
							uni.reLaunch({
								url: '/page_user/pingzhuo/zhuozixq?fxid=' + that.fxid
							})
						}else{
							uni.setStorageSync('user',res.user)
							uni.switchTab({
								url: '/pages/index/index'
							})
						}
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration:2000
						})
					} 
				});
			},
		}
	}
</script>

<style lang="scss" >
	page{
		// background: #010000;
	}
	.page {
		position: relative; /* 添加相对定位 */
	}
	.zanbu{
		font-weight: 600;
		font-size: 36rpx;
		color: #808080;
		position: fixed;
		bottom: 292rpx;
		left: 50%;
		transform: translateX(-50%);
		background-color: transparent;
	}
    .ceshi{
		width: 614rpx;
		height: 108rpx;
		border-radius: 54rpx 54rpx 54rpx 54rpx;
		border: 2rpx solid #FF8998;
		background-color: transparent;
		font-weight: 600;
		font-size: 36rpx;
		color: #FF8998;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		bottom: 398rpx;
		left: 50%;
		transform: translateX(-50%);
	}
	.imgbox {
		width: 100%;
		height: 100vh;
		z-index: 0;
        position: fixed;
		top: 0;
		left: 0;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.button{
		margin-top: 200rpx;
		width: 586rpx;
		height: 90rpx;
		background: #4C97E7;
		border-radius: 54rpx 54rpx 54rpx 54rpx;
		font-weight: 500;
		font-size: 40rpx;
		color: #FFFFFF;
	}
	/deep/ .u-checkbox{
		width: 40rpx !important;
	}
	.tip{
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		color: #FFFFFF;
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		bottom: 100rpx;
		height: 200rpx;
		z-index: 1;
		width: 100%;
		image{
			width: 26rpx;
			height: 26rpx;
		}
	}

	
</style>