youngee_b_api/pages/login/login.vue

<template>
	<view class="container">
		<view class="head">
			<view class="head-image">
				<image :src="defaultavatarUrl" mode="" style="border-radius: 50%; width: 100%;height: 100%;"></image>
			</view>
			<view class="head-text">
				<p style="font-weight:bold;font-size: 35rpx;padding-bottom: 20rpx;">样叽</p>
				<p style="font-weight:bold;font-size: 35rpx;">YounGee</p>
			</view>
		</view>
		<view class="body">
			<button class="login-btn" @click="toggle('bottom')">微信授权</button>
			<button class="exit-btn" @click="exit()">取消登录</button>
			<view class="xieyi">
				<uni-data-checkbox multiple class="xieyi-btn" v-model="value" :localdata="range" @change="select">
				</uni-data-checkbox>
				<p class="xieyi-read">阅读并同意</p>
				<a class="xieyi-content" src="">《用户协议及隐私政策》</a>
			</view>
		</view>
		<view>
			<!-- 底部普通弹窗 -->
			<uni-popup ref="popup" background-color="#fff" @change="change" style="border-radius: 20rpx;">
				<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }"
					style="    ">
					<view class=""
						style="width: 90%; margin: 0 auto; margin-top: 10% !important;margin-bottom: 10% !important;">
						<view class="Tasktext">
							<image :src="picture.task15" mode=""></image>
							<span>YoungGee申请使用</span>
						</view>
						<view class="">
							<h5>你的微信头像、昵称、地区及性别信息</h5>
						</view>
						<!-- 黑线 -->
						<view class="" style="border-bottom: 2rpx solid #C0C0C0;margin-top: 3%;margin-bottom: 3%;">
						</view>
						<view class="" style="display: flex;justify-content:space-around;">

							<image :src="picture.jpg7" mode="" style="width: 84rpx;height: 84rpx;border-radius: 10rpx;">
							</image>
							<view class="" style="width: 70%;">
								<p style='color: #000000; font-size: 28rpx;'>昵称</p>
								<p style='color: #999999; font-size: 24rpx;margin-top: 2%;'>微信个人信息</p>
							</view>
							<view class="" style="margin-top: 3%;">
								<image :src="picture.png6" mode="" style="width: 32rpx;height: 22rpx;"></image>
							</view>
						</view>

						<!-- 黑线 -->
						<view class="" style="border-bottom: 2rpx solid #C0C0C0;margin-top: 3%;margin-bottom: 3%;">
						</view>
						<view class="butto" style="margin-top: 3%;">
							<button class="mini-btn" size="mini" @tap="Reset"
								style="background-color: #F2F2F2;color:#20AC19 ; margin-right: 5%;">拒绝</button>
							<button class="mini-btn" size="mini" @tap="determine"
								style="background-color: #20AC19;color:#F2F2F2 ;margin-left: 5%;">允许</button>
						</view>
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: 0,
				range: [{
					"value": 1,
					"text": ""
				}],
				defaultavatarUrl: 'https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/logoxin01.png',
				picture: {
					home8: 'https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/home8.png',
					deng5: 'https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/deng5.png',
					deng1: 'https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/deng1.png',
					task15: 'https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/task15.png',
					jpg7: 'https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/7.jpg',
					png6: 'https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/6.png'
				},
				type: 'center',
				nickname: '',
				gender: '',
			};
		},
		onLoad() {},
		methods: {

			select() {
				console.log(this.value)
			},
			//swiper滑动事件
			swiperChange: function(e) {
				this.swiper.index = e.detail.current;
			},
			//底部弹出层
			change(e) {
				console.log('当前模式：' + e.type + ',状态：' + e.show);
			},

			exit() {
				uni.navigateBack()
			},
			toggle(type) {
				//新版登录方式
				if (this.value.length !== 1) {
					uni.showToast({
						title: '请先阅读并同意协议',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				uni.getUserProfile({
					desc: '登录',
					success: (res) => {
						//console.log(res);
						console.log(res)
						this.nickname = res.userInfo.nickName

						this.gender = res.userInfo.gender
						uni.setStorageSync('nickName', res.userInfo.nickName);
						uni.setStorageSync('avatarUrl', res.userInfo.avatarUrl);
						try {
							this.login();

						} catch (e) {}
					},
					fail: (res) => {
						console.log(res)
					}
				});
			},
			// 获取手机号
			onGetPhoneNumber(e) {
				if (e.detail.errMsg == "getPhoneNumber:fail user deny") { //用户决绝授权  
					//拒绝授权后弹出一些提示  
				} else {
					//允许授权  
					console.log(e)
					this.$refs.popup.open('bottom')
					e.detail.encryptedData //加密的用户信息  
					e.detail.iv //加密算法的初始向量  时要用到  
				}
			},
			//登录
			login() {
				let _this = this;
				// 获取登录用户code
				uni.login({
					provider: 'weixin',
					onlyAuthorize: true,
					success: function(res) {
						// console.log(res);
						if (res.code) {

							let code = res.code;
							_this.$https.post('/youngee/c/p/login', {
									code: res.code, //wx.login 登录成功后的code 
									gender: _this.gender,
									nickname: _this.nickname
								})
								.then(res => {
									if (res.data.code == -6) {
										uni.showToast({
											title: '您已被拉黑，请联系客服',
											icon: 'none',
											duration: 2000
										});
									} else {
										console.log(res)
										uni.setStorageSync('token', res.data.data.token);
										uni.setStorageSync('cookie', res.header['Set-Cookie']);
										uni.navigateBack()
									}
								})
							// uni.request({
							// 	url: 'http://localhost:8199/youngee/c/p/login', //演示地址，请以你的后端接口为准  
							// 	method: 'POST',
							// 	data: {
							// 		code: res.code, //wx.login 登录成功后的code 
							// 		gender: _this.gender,
							// 		nickname: _this.nickname
							// 	},
							// 	success: (cts) => {
							// 		if (cts.data.code == -6) {
							// 			uni.showToast({
							// 				title: '您已被拉黑，请联系客服',
							// 				icon: 'none',
							// 				duration: 2000
							// 			});
							// 		} else {

							// 			console.log(cts)
							// 			uni.setStorageSync('token', cts.data.data.token);
							// 			uni.setStorageSync('cookie', cts.header['Set-Cookie']);
							// 			uni.navigateBack()
							// 		}
							// 	}
							// });
						} else {
							uni.showToast({
								title: '登录失败！',
								duration: 2000
							});
							console.log('登录失败！' + res.errMsg)
						}
					}
				});
			},
			determine() {
				uni.showToast({
					title: "登录成功",
					duration: 1000,
				});
				this.$refs.popup.close()
			},
			xieyi() {
				console.log('进入协议')
			},
		}
	}
</script>
<style>
	.content {
		border-radius: 20rpx 20rpx 0 0 !important;
	}
</style>
<style lang="scss" scoped>
	.head {
		display: flex;
		align-items: center;
		/* 垂直居中 */
		height: 200rpx;
		margin-top: 30%;
		margin-bottom: 20%;
	}

	.head-image {
		display: inline-block;
		margin: 0 50rpx 0 150rpx;
		width: 160rpx;
		height: 160rpx;
		background-color: #F0D232;
		border-radius: 50%;
	}

	.login-btn {
		margin: 30rpx;
		font-size: 35rpx;
		background-color: #F0D232;
		border: none;
		border-radius: 0;
	}

	.exit-btn {
		margin: 30rpx;
		font-size: 35rpx;
		border: 1rpx solid #000000;
		border-radius: 0;
	}

	.xieyi {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.xieyi-btn {
		width: 40rpx;
		display: inline-block;
		font-size: 25rpx;
	}

	.xieyi-content {
		display: inline-block;
		font-size: 25rpx;
	}

	.xieyi-read {
		display: inline-block;
		font-size: 25rpx;
	}

	/deep/ .content {
		border-radius: 20rpx 20rpx 0 0 !important;
	}

	.Tasktext {
		// padding-top: 5%;
		padding: 0 0 0 1%;
		height: 80rpx;
	}

	.Tasktext span {
		color: #333333;
		font-size: 40%;
		font-weight: 550;
		text-indent: 2em;

	}

	.TitleText1 p {
		color: #333333;
		font-size: 50%;

	}

	.Tasktext {
		// height: 70rpx;
	}

	.Tasktext image {
		vertical-align: middle;
		width: 50rpx;
		height: 50rpx;
		display: inline-block;
		padding-right: 14rpx;
	}

	.butto {
		text-align: center;
	}

	.mini-btn {
		height: 55rpx;
		width: 150rpx;
		line-height: 55rpx;
		margin: 30rpx;
	}

	.diagram {
		padding-top: 30%;
	}

	.but {
		width: 80%;
		height: 60rpx;
		background-color: #FFD700;
		border-radius: 30rpx;
		border: 6rpx solid #0C0A03;
		text-align: center;
		line-height: 60rpx;
		margin: 0 auto;
		position: relative;
		font-size: 30rpx;
		font-weight: 550;
		letter-spacing: 7px;
	}

	.but span {
		font-size: 30rpx;
		font-weight: 550;
		letter-spacing: 7px;
	}

	.bei {
		// position: relative;
	}

	.mark {
		position: absolute;
		width: 8rpx;
		height: 8rpx;
		border: 2rpx solid #0C0A03;
		border-radius: 20px;
		background-color: #1E90FF;

	}

	.butt {
		text-align: center;
		padding-top: 10rpx;
	}

	.butt span {
		font-size: 24rpx;
		color: #969696;
	}
</style>