smartswrtch-app/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="syflag">
				<view class="input_txt" style="width: 536rpx;font-size: 24rpx;line-height: 32rpx;">
					您暂未授权共享开关小程序获取你的信息，将无法正常使用小程序的功能。如需要正常使用请点击“授权”按钮，打开头像，昵称等信息的授权。
				</view>
				<!-- <button class="button" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"
					style="margin-left: -10rpx;">
					授权登录
				</button> -->
				<button class="button" @click="getPhoneNumber"
					style="margin-left: -10rpx;">
					授权登录
				</button>
				<view class="">
					<view class="buttons" style="margin-top: 50rpx;margin-left: -10rpx;" @click="btnshoudong">
						—— 账号密码登录 ——
					</view>
				<!-- 	<view class="buttons" style="margin-top: 50rpx;margin-left: -10rpx;" @click="btnyzm">
						—— 验证码登录 ——
					</view> -->
					<view class="buttons" style="margin-top: 50rpx;margin-left: -10rpx;" @click="btnbudl">
						—— 暂不授权登录 ——
					</view>
				</view>
			</view>

			<!-- 账号密码登录 -->
			<view class="zhangh" v-if="dlflag">
				<view class="tit">
					账号密码登录
				</view>
				<!-- <input type="text" v-model="zh" placeholder="请输入你的账号" /> -->
				<view class="" style="margin-top: 30rpx;">
					<u-input v-model="zh" :border="border" placeholder="请输入你的账号" />
				</view>

				<view class="" style="margin-top: 30rpx;">
					<u-input v-model="mm" :type="onetype" :border="border" placeholder="请输入你的密码"
						:password-icon="passwordIcon" />
				</view>
				<view class="mmdl" @click="btndl">
					登录
				</view>
				<view class="mmdl" @click="btnqx(1)"
					style="background-color: #fff;border: 1px solid #efefef;color: #000;margin-top: 20rpx;">
					取消
				</view>
			</view>

			<!-- 验证码登录 -->
			<view class="zhangh" v-if="yzmflag">
				<view class="tit">
					验证码登录
				</view>
				<view class="" style="margin-top: 30rpx;">
					<u-input v-model="zh" :border="border" placeholder="请输入你的账号" />
				</view>


				<view class="" style="margin-top: 30rpx;display: flex;align-items: center;justify-content: space-between;">
					<u-input v-model="yzm" :border="border" placeholder="请输入验证码" />
					<u-toast ref="uToast"></u-toast>
					<u-verification-code :seconds="seconds" @start="start" ref="uCode"
						@change="codeChange"></u-verification-code>
						<u-button @click="getCode">{{tips}}</u-button>
				</view>

				<view class="mmdl" @click="btndl">
					登录
				</view>
				<view class="mmdl" @click="btnqx(2)"
					style="background-color: #fff;border: 1px solid #efefef;color: #000;margin-top: 20rpx;">
					取消
				</view>
			</view>



		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tips: '',
				seconds: 60,
				onetype: 'password',
				passwordIcon: true,
				border: true,
				twopwd: 'password',
				bgc: {
					backgroundColor: "#7D86EF",
				},
				tittxt: "授权登录",
				chooseType: true,
				usertype: '',
				login: false,
				id: '',
				dlflag: false,
				zh: '',
				mm: '',
				yzm: '',
				yzmflag: false,
				syflag: true
			}
		},
		onLoad(option) {
			if (option.id) {
				this.id = option.id
			}
		},
		// 分享到好友（会话）
		onShareAppMessage: function() {
			return {
				title: '创想物联',
				path: '/pages/shouye/index'
			}
		},

		// 分享到朋友圈  
		onShareTimeline: function() {
			return {
				title: '创想物联',
				query: '',
				path: '/pages/shouye/index'
			}
		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						this.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 1000);
				} else {
					this.$u.toast('验证码已发送');
				}
			},
			start() {
				this.$u.toast('验证码已发送');
			},



			// 账号密码登录
			btndl() {
				let data = {
					username: this.zh,
					password: this.mm
				}
				this.$u.post("/app/auth/login", data).then(res => {
					if (res.code == 200) {
						wx.setStorageSync('token', res.token);
						this.ceshi()
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000,
						})
					}
				})
			},
			btnqx(num) {
				if (num == 1) {
					this.dlflag = false
					this.syflag = true
				} else {
					this.yzmflag = false
					this.syflag = true
				}
			},
			btnyzm() {
				this.yzmflag = true
				this.syflag = false
			},
			btnshoudong() {
				this.dlflag = true
				this.syflag = false
			},
			userType(num) {
				this.chooseType = false
				this.login = true
				if (num == 1) {
					this.usertype = '01'
				} else {
					this.usertype = '00'
				}
			},
			getPhoneNumber(){
				uni.showLoading({  
				    title: '登录中...',  
				    mask: true 
				})
				let taht = this
				wx.login({
					success(res) {
						if (res.code) {
							let data = {
								loginCode: res.code,
							}
							taht.$u.post('/app/auth/wxLogin', data).then(res => {
								if (res.code == 10003) {
									uni.hideLoading()
									uni.navigateTo({
										url: '/pages/login/login'
									})
								} else if (res.code == 200) {
									uni.setStorageSync('token', res.token)
									taht.ceshi()
								}
							})
						}
					},
				})
			},
			// 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() {
				uni.hideLoading()
				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">
	/deep/ .u-size-default{
		    height: 37px !important;
			line-height: 35px !important;
			margin-left: 10rpx;
	}
	/deep/ .u-btn{
		padding: 0 20rpx !important;
	}
	page {
		background: #FFFFFF;
	}

	.zhangh {
		width: 562rpx;
		text-align: center;

		.tit {
			font-size: 40rpx;
			color: #000;
			margin-bottom: 30rpx;
		}

		// input{
		// 	width: 562rpx;
		// 	height: 90rpx;
		// 	margin-top: 20rpx;
		// 	border-radius: 20rpx;
		// 	background-color: #eeefee;
		// 	text-align: center;
		// 	padding-left: 30rpx;
		// 	box-sizing: border-box;
		// 	text-align: left;
		// }
		.mmdl {
			width: 562rpx;
			height: 80rpx;
			background: #8883F0;
			border-radius: 52rpx 52rpx 52rpx 52rpx;
			font-weight: 500;
			font-size: 36rpx;
			color: #FFFFFF;
			line-height: 80rpx;
			margin-top: 50rpx;
		}
	}

	.buttons {
		width: 562rpx;
		text-align: center;
		padding-bottom: 5rpx;
		box-sizing: border-box;
		color: #ccc;
	}

	.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>