JianjianStreet-aplet/pages/login/login.vue

<template>

	<view v-else class="login">
		<view class="login-img flex align-center justify-center">
			<view class="login_img">
				<image src="@/static/image/logo.jpg" mode=""></image>
			</view>

		</view>
		<view class="login-title">找房租房尽在兼兼街</view>

		<view>
			<view class="btn">
				<button class="btn_class" type="primary" @click="login">授权登录</button>
			</view>
		</view>
		<view class="tips flex align-center justify-between" @click="xieyiChoose = !xieyiChoose">
			<view>
				注册/登录即代表同意
				<text class="xieyi">《用户协议与隐私政策》</text>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				xieyiChoose: true,
				code: '',
				did: '',
				vid: '',
				baomingStyle: {
					fontSize: "30rpx",
					fontWeight: "700",
					height: "100rpx",
					width: "480rpx"
				},
				baomingStyleQuxiao: {
					fontSize: "30rpx",
					fontWeight: "700",
					height: "100rpx",
					width: "480rpx",
					marginTop: "40rpx"
				}
			}
		},
		onLoad(err) {

		},
		methods: {
	
			//微信授权
			login() {
				uni.showLoading()
				uni.getProvider({
					service: 'oauth',
					success: res => {
						uni.hideLoading()
						if (~res.provider.indexOf('weixin')) {
							uni.login({
								provider: 'weixin',
								success: res => {
									console.log("授权登录信息")
									console.log(res)
									this.code = res.code
									uni.getUserInfo({
										provider: 'weixin',
										withCredentials: true,
										success: info => {
											this.getUserProfile(info, res.code)
										},
										fail: (err) => {
											console.log(err)
											uni.showToast({
												title: '拒绝授权将无法使用',
												icon: 'none'
											})
										}
									})
								},
								fail: () => {
									uni.hideLoading()
									uni.showToast({
										title: '微信登录授权失败',
										icon: 'none'
									})
								}
							})
						} else {
							uni.showToast({
								title: '请先安装微信或升级版本',
								icon: 'none'
							})
						}
					},
					fail: () => {
						uni.hideLoading()
						uni.showToast({
							title: '拉取授权失败',
							icon: 'none'
						})
					}
				})
			},
			getUserProfile(user, code) {
				uni.showModal({
					title: '温馨提示',
					content: '亲，请授权后获取您的',
					success: res => {
						if (res.confirm) {
							uni.getUserProfile({
								// desc: '显示用户昵称',
								desc: '获取你的昵称、头像、地区及性别',
								lang: 'zh_CN',
								success: val => {
									// uni.showLoading()
									let params = {
										iv: user.iv,
										code: code,
										encryptedData: user.encryptedData,
										signature: user.signature,
										rawData: user.rawData,
										nickName: val.userInfo.nickName
									}
									this.userInfo = val.userInfo
									this.toLogin(params)
								},
								fail: error => {
									console.log('getUserProfile error =>', error)
									uni.hideLoading()
									uni.showToast({
										title: '微信登录授权失败',
										icon: 'none'
									})
								}
							})
						}
					}
				})
			},
			// 登录
			toLogin(data) {
				this.$functions.showLoading("登录中...")
				this.$api.wxLogin(data).then(res => {
					console.log("等是否",res)
					// 保存token 跳转页面
					uni.setStorageSync("token",res.result.token);
					this.$functions.hideLoading();
					uni.switchTab({
						url: "/pages/index/index"
					})
				}).catch( err => {
					this.$functions.showToast(err.message)
				})
				// this.$request('/job-dev/house/applet/login', data, 'GET', (res) => {
				// 		console.log("登录成功")
				// 		// console.log(res)
				// 		// uni.hideLoading()
				// 		// let {
				// 		// 	result,
				// 		// 	code,
				// 		// 	message
				// 		// } = res
				// 		// result?.token && this.$store.commit('set_userToken', result.token)
				// 		if (res.code === 200) {
				// 			console.log("登录成功");
				// 			console.log(res,"登录成功后的信息")
				// 			uni.showToast({
				// 				title: "登录成功",
				// 				icon: 'none'
				// 			});
				// 		}else{
				// 			uni.showToast({
				// 				title: res.message,
				// 				icon: 'none'
				// 			})
				// 		}
				// 	})
				// 	.catch(err => {
				// 		uni.hideLoading()
				// 		uni.showToast({
				// 			title: err.message,
				// 			icon: 'none'
				// 		})
				// 		console.log(err)
				// 	})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login {
		background-size: 100% 100%;
		height: 70vh;
		padding-top: 154rpx;

		.login-title {
			margin-top: 40rpx;
			font-size: 34rpx;
			font-weight: 700;
			text-align: center;
			padding-bottom: 30rpx;
		}

		.login-img {
			image {
				border-radius: 50%;
				width: 248rpx;
				height: 248rpx;
			}
			.login_img{
				display: flex;
				justify-content: center;
			}
		}

		.btn-box {
			margin-top: 136rpx;
		}
		.btn{
			display: flex;
			justify-content: center;
			.btn_class{
				width: 720rpx;
				border-radius: 20rpx;
			}
		}
		.tips {
			width: 500rpx;
			position: fixed;
			bottom: 52rpx;
			left: 51%;
			transform: translate(-50%, 0);
			font-size: 24rpx;
			color: #707070;

			.xieyi {
				color: #00CCFF;
			}
		}

	}
</style>