login.vue 4.8 KB
<template>
	<view class="Login">
		<view class="" style="padding-top:216rpx;box-sizing: border-box;text-align: center;">
			<image src="/static/image/logo.png" mode="" style="width: 160rpx;height: 160rpx;"></image>
			<view class="title">
				社区淘
			</view>
			<view class="desc">
				来到社区淘,闲置就近卖
			</view>
		</view>

		<view class="btn" v-if="checked">
			登录
			<button class="sys_btn" @click="GetUser()"></button>
		</view>
		<view class="btn1" v-else @click="login">
			登录
		</view>
		<view class="hintBox" @click="radioText" style="text-align: center;">
			<image src="/static/image/select.png" mode="" style="width: 36rpx;height: 36rpx;margin-right: 14rpx;"
				v-if="checked"> </image>
			<image src="/static/image/unselect.png" mode="" style="width: 36rpx;height: 36rpx;margin-right: 14rpx;"
				v-else></image>
			<text>我已阅读并同意</text><text style="color:#FF834D;" @click.stop="goUserDeal">《用户服务协议》</text>
		</view>
		<view class="">
			<image src="" mode=""></image>
		</view>
	</view>
</template>

<script>
	import request from '../../utils/request.js'
	export default {
		data() {
			return {
				checked: '',
				ivs: '',
				encryptedDatas: '',
				dataSource: {}
			}
		},
		onLoad() {},
		methods: {
			radioText() {
				this.checked = !this.checked
			},
			//获取用户信息
			GetUser() {
				wx.getUserProfile({
					desc: '用于完善会员资料', // 声明获取用户个人信息后的用途,后续会展示在弹窗中,请谨慎填写
					success: (res) => {
						console.log(res, 'res')
						// this.dataSource = res
						this.ivs = res.iv
						this.encryptedDatas = res.encryptedData
						this.appLoginWx()
						// uni.setStorageSync('userInfo', res.userInfo)

					}
				})
			},
			appLoginWx() {
				let that = this
				uni.getProvider({
					service: 'oauth',
					success: function(res) {
						if (~res.provider.indexOf('weixin')) {
							uni.login({
								provider: 'weixin',
								success: function(loginRes) {

									// console.log(uni.getStorageSync('pid'),'pidd')
									// 获取用户信息
									// uni.getUserInfo({
									// 	provider: 'weixin',
									// 	success: function(infoRes) {
									console.log(loginRes, 'ressssssssssssss')
									request.get('/api/member/login', {
										code: loginRes.code,
										// rawData: JSON.stringify(uni
										// 	.getStorageSync(
										// 		'userInfo')),
										// pid: uni.getStorageSync('pid')
									}).then(res => {
										console.log(res, 'res', that.encryptedDatasd)
										if (res.code == 1) {
											console.log(that.encryptedDatas, 'encry')
											request.get('/api/member/logins', {
													sessionKey: res.data.session_key,
													encryptedData: that.encryptedDatas,
													openid: res.data.openid,
													iv: that.ivs
												}).then(res => {
													uni.setStorageSync(
														'userInfo', res
														.data)
														uni.setStorageSync(
															'token', res
															.data.token)
												}).catch(err => {}),

												uni.setStorageSync('token',
													res.data.userInfo
													.token)
											uni.navigateTo({
												url: '/pages/index/index'
											})
										}

									})
									// 	},
									// 	fail: () => {
									// 		uni.showToast({
									// 			title: "微信登录授权失败",
									// 			icon: "none"
									// 		});
									// 	}
									// });
								},
								fail: () => {
									uni.showToast({
										title: "微信登录授权失败",
										icon: "none"
									});
								}
							});
						}
					}
				});
			}
		}
	}
</script>

<style>
	/* @import url("/common/uni.css"); */
	.button-hover {
		background-color: #ff834d !important;
	}

	.Login {
		min-height: 100vh;
		background-color: #fff;
	}

	.btn {
		margin: 0 auto;
		margin-top: 320rpx;
		width: 424rpx;
		height: 80rpx;
		background: #ff834d;
		border: 2rpx solid #FF834D;
		position: relative;
		font-size: 32rpx;
		color: #fff;
		text-align: center;
		line-height: 80rpx;
		border-radius: 48rpx;
		position: relative;
	}

	.btn1 {
		margin: 0 auto;
		margin-top: 320rpx;
		width: 424rpx;
		height: 80rpx;
		background: #ff834d;
		border: 2rpx solid #FF834D;
		position: relative;
		font-size: 32rpx;
		color: #fff;
		text-align: center;
		line-height: 80rpx;
		border-radius: 48rpx;
		opacity: 0.5;
	}

	button {
		width: 426rpx;
		height: 80rpx;
		position: absolute;
		top: 0;
		left: 0;
		background: transparent;
		border-radius: 48rpx;
	}

	.uni-padding-wrap {
		margin-top: 40rpx;
	}

	.title {
		font-size: 40rpx;
		color: #3ba3e0;
	}

	.desc {
		color: #969799;
		font-size: 26rpx;
	}

	.hintBox {
		font-size: 26rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 24rpx;
	}
</style>