login.vue 4.9 KB
<!--pages/login/login.wxml-->
<template>
	<view class="">


		<view class="top">
			<view class="notLogin" style="margin-top: 40rpx;" @click="toIndex">
				暂不登录
			</view>
			<view class="header">
				<view class="logo">
					<img src="/static/uview/common/logo.png"></img>
				</view>
				<view class="title">设备乐</view>
				<view class="tips">未注册用户登录将自动注册账号</view>
			</view>
		</view>
		<view class="login">
			<button v-if="!checked"  @getphonenumber="getPhoneNumber" class="loginBtn" @click="mobileLogin">一键授权登录
			</button>
			<button v-else open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" @click="mobileLogin" class="loginBtn">一键授权登录
			</button>
			<view class="codeLogin" @click="goCodeLoGin">短信验证码登录 </view>
		</view>
		<view class="agree">
			<u-checkbox-group @change="checkboxGroupChange">
				<u-checkbox value="checked" checked-color="#f32e21" @change="onChange" icon-size="22px">
				</u-checkbox>
			</u-checkbox-group>
			已阅读并同意<text @click="goTreaty" data-type="10">《用户协议》</text>和 <text @click="goTreaty1"
				data-type="20">《隐私协议》</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				checked: false,
				session_key: '',
				openid: '',
				code: '',
				encryptedData: '',
				iv: '',
				hasUserInfo: false,
				mobile: '',
				userInfo: '',
				type: '',
				partner: '',
			}
		},
		methods: {
			goCodeLoGin() {
				uni.navigateTo({
					url: "/pages/subPages/codeLogin"
				})
			},
			mobileLogin() {
				if (!this.checked) return uni.showToast({
					title: '请先同意服务协议和隐私权限',
					icon: 'none'
				})
			},

			checkboxGroupChange(e) {
				console.log(e);
				if (e.length > 0) {
					this.checked = true
				} else {
					this.checked = false
				}
			},
			onChange() {

			},
			toIndex() {
				uni.reLaunch({
					url: "/pages/index/buy"
				})
			},
			goTreaty(){
				uni.navigateTo({
					url:'/pages/subPages/service'
				})
			},
			goTreaty1(){
				uni.navigateTo({
					url:'/pages/subPages/ys'
				})
			},
			getPhoneNumber(e) {
				console.log(e);
				
				
				uni.showLoading({
					title: '加载中'
				})
				if (e.detail.errMsg == 'getPhoneNumber:fail user deny' || e.detail.errMsg ==
					'getPhoneNumber:fail:user deny') {
					wx.hideLoading()
					return wx.showToast({
						title: '您已取消授权',
						icon: 'none'
					})
				}
				wx.login({
					provider: 'weixin', //使用微信登录
					success(res) {
						console.log(res);
					},
					complete(res) {
						console.log(res);
						uni.$u.http.get(`/api/common/code?code=${res.code}`).then((res) => {
							console.log(res);
							uni.hideLoading()
							uni.setStorageSync('token', res.data.token || '')
							// console.log(res);
							uni.navigateTo({
								url: "/pages/index/index"
							})
						}).catch(err => {
							console.log(err);
						})
					}
				});

			},
		}
	}
</script>
<style scoped>
	.top {
		position: relative;
		width: 100%;
		height: 510rpx;
		opacity: 1;
		/* background: linear-gradient(180deg, rgba(232, 234, 237, 1) 0%, rgba(255, 255, 255, 1) 100%); */
	}

	.notLogin {
		margin-right: 32rpx;
		text-align: right;
		padding-top: 140rpx;
		right: 32rpx;
		opacity: 1;
		color: rgba(13, 16, 19, 0.6);
		font-size: 28rpx;
		font-weight: 400;
		font-family: "PingFang SC";
		line-height: 40rpx;
		letter-spacing: 0.6rpx;
	}

	.header {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: absolute;
		top: 238rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	.header image {
		width: 160rpx;
		height: 160rpx;
		border-radius: 50%;
	}

	.header .title {
		opacity: 1;
		color: rgba(13, 16, 19, 0.9);
		font-size: 52rpx;
		font-weight: 500;
		font-family: "PingFang SC";
		text-align: left;
		line-height: 64rpx;
	}

	.tips {
		margin-top: 32rpx;
		width: 100%;
		top: 32rpx;
		color: rgba(13, 16, 19, 0.4);
		font-size: 24rpx;
		font-weight: 400;
		font-family: "PingFang SC";
		text-align: left;
		line-height: 32rpx;
		letter-spacing: 0.6rpx;
	}

	.login {
		left: 50%;
		transform: translateX(-50%);
		position: absolute;
		top: 810rpx;
	}

	.loginBtn {
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		margin-top: 236rpx;
		margin: 0 auto;
		width: 540rpx;
		height: 108rpx;
		border-radius: 16rpx;
		opacity: 1;
		background: #3375D8;
	}

	.codeLogin {
		margin-top: 32rpx;
		height: 40rpx;
		opacity: 1;
		color: #3375D8;
		font-size: 28rpx;
		font-weight: 500;
		font-family: "PingFang SC";
		text-align: center;
		line-height: 40rpx;
		letter-spacing: 0.6rpx;
	}

	.agree {
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		width: 100%;
		position: absolute;
		bottom: 10%;
		left: 50%;
		transform: translateX(-50%);
		font-size: 24rpx;
		color: rgba(0, 0, 0, 0.6);
	}

	.agree text {
		color: rgba(0, 0, 0, 0.9);
	}
</style>