kaiguan-zfb/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/uCqHftk2W2zEPX03DLcb" mode=""></image>
		</view>
		<view class="tip">
			欢迎来到共享开关
		</view>
		<view class="inputbox">
			<!-- 在这里放置你的输入框 -->
			<!-- <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">
				<view class="input_txt" style="width: 536rpx;font-size: 24rpx;line-height: 32rpx;">
					您暂未授权共享开关小程序获取你的信息，将无法正常使用小程序的功能。如需要正常使用请点击“授权”按钮，打开头像，昵称等信息的授权。
				</view>

				<button class="button" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"
					style="margin-top: 280rpx;margin-left: -10rpx;">
					授权登录
				</button>
				<button class="button" style="margin-top: 50rpx;margin-left: -10rpx;" @click="btnbudl">
					暂不授权登录
				</button>
			</view> 
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgc: {
					backgroundColor: "#7D86EF",
				},
				tittxt: "授权登录",
				chooseType: true,
				usertype: '',
				login: false,
				id:''
			}
		},
		onLoad(option) {
			if(option.id){
				this.id = option.id
			}
		},
		methods: {
			userType(num) {
				this.chooseType = false
				this.login = true
				if (num == 1) {
					this.usertype = '01'
				} else {
					this.usertype = '00'
				}
			},
			getPhoneNumber(e) {
				let that = this;
				console.log("eeeeeeee", e);
				const wxLoginAsync = () => {
					return new Promise((resolve, reject) => {
						wx.login({success(res) {
								if (res.code) {
									let data = {
										loginCode: res.code,
										mobileCode: e.detail.code,
									}
									resolve(data);
								} else {
									reject(res.errMsg)
								}
							},fail(err) {
								reject(err)
							}
						})
					})
				}
				wxLoginAsync().then(async (data) => {
						this.$u.post("/app/auth/wxLogin", data).then((res) => {
							if (res.code == 200) {
								wx.setStorageSync('token', res.token);
								that.ceshi()
							}
						})
					}).catch((err) => {
						console.error(err)
					})
			},
			async ceshi() {
				this.$u.get("/app/user/userInfo").then((res) => {
					if(this.id == 1){
						uni.navigateBack()
					}else{
						uni.reLaunch({
							url: '/pages/shouye/index'
						})
					}
				})
			},
			
			btnbudl(){
				uni.reLaunch({
					url: '/pages/shouye/index'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #FFFFFF;
	}

	.page {
		position: relative;
		/* 添加相对定位 */
	}

	.imgbox {
		width: 750rpx;
		height: 576rpx;
		z-index: 0;

		image {
			width: 750rpx;
			height: 576rpx;
		}
	}

	.tip {
		width: 204rpx;
		position: absolute;
		top: 400rpx;
		left: 30rpx;
		font-weight: 500;
		font-size: 48rpx;
		color: #FFFFFF;
		line-height: 66rpx;
	}

	.inputbox {
		position: absolute;
		/* 或者 fixed，根据你的需求 */
		top: 700rpx;
		/* 调整这里来控制距离顶部的距离 */

		width: 750rpx;
		/* 调整输入框的宽度 */
		padding: 100rpx 0;
		background: #fff;
		/* 设置背景颜色，这里是红色的半透明 */
		border-radius: 50rpx;
		/* 设置圆角 */
		z-index: 999;
		/* 设置 z-index，确保在其他内容上方显示 */
		padding-left: 104rpx;

		.input_txt {
			font-weight: 400;
			font-size: 32rpx;
			color: #3D3D3D;
			line-height: 44rpx;
		}

		.button {
			margin-top: 64rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 562rpx;
			height: 96rpx;
			background: #8883F0;
			border-radius: 52rpx 52rpx 52rpx 52rpx;

			font-weight: 500;
			font-size: 36rpx;
			color: #FFFFFF;
		}
	}
</style>