login.vue 3.9 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" open-type="getUserInfo" lang="zh_CN" @getuserinfo="appLoginWx"></button>
		</view>
		<view class="btn1" v-if="!checked" @click="login">
			登录
		</view>
		<view class="uni-padding-wrap">
			<view style="text-align: center;font-size: 24rpx;">
				<label class="radio" @change="radioChange"
					style="display: flex;align-items: center;justify-content: center;">
					<radio value="r1" :checked="checked" @click="radioChange" color="#FF834D" />
					<text @click="radioText">我已阅读并同意</text><text style="color:#FF834D;" @click.stop="goUserDeal">《用户服务协议》</text>
				</label>
			</view>
		</view>
	</view>
</template>

<script>
	import request from '../../utils/request.js'
	export default {
		data() {
			return {
				checked: false
			}
		},

		methods: {
			radioChange(e) {
				this.checked = !this.checked
			},
			radioText(){
				this.checked = !this.checked
			},
			//用户协议
			goUserDeal() {
				uni.navigateTo({
					url: '/myPackage/pages/me/user-deal'
				})
			},
			login() {
				uni.showToast({
					title: '请选择用户协议',
					icon: "none"
				})
			},
			appLoginWx() {
				uni.getProvider({
					service: 'oauth',
					success: function(res) {
						if (~res.provider.indexOf('weixin')) {
							uni.login({
								provider: 'weixin',
								success: function(loginRes) {
									console.log(loginRes)
									// 获取用户信息
									uni.getUserInfo({
										provider: 'weixin',
										success: function(infoRes) {
											uni.setStorageSync('userInfo', infoRes
												.userInfo)
											request.post('/api/common/login', {
												code: loginRes.code,
												rawData: JSON.stringify(uni
													.getStorageSync(
														'userInfo')),
												pid: uni.getStorageSync('pid')
											}).then(res => {
												if (res.code == 1) {
													uni.setStorageSync(
														'userInfo', res
														.data.userInfo)
													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");

	.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: 84rpx;
		position: absolute;
		top: 0;
		left: 0;
		background: transparent;
		border-radius: 48rpx;
	}

	radio {
		transform: scale(0.6);
	}

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

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

	.desc {
		color: #969799;
		font-size: 26rpx;
	}
</style>