tongli_WeChat/pages/login/login.vue

<template>
	<view class="bg">
		<image src="https://static.ticket.sz-trip.com/tongli/images/user/logos.png" class="logo"></image>
		
		<view :class="['btn', 'flex-center', {'btns': flag}]" @click="getUserInfo()">快捷登录</view>
		<view class="btn, flex-center" @click="cancel()" style="margin-top: 113rpx;">取消</view>
		
		<image src="https://static.ticket.sz-trip.com/yandu/images/user/tips.png" class="tips" v-show="!flag"></image>
		<footer class="flex-between">
			<view @click="flag = !flag" :style="{border: flag ? 'none' : ''}"><image src="https://static.ticket.sz-trip.com/yandu/images/user/dui.png" v-show="flag"></image></view>
			我已阅读并同意 <span @click="gotoPath('/subPackages/user/privacy')">《用户服务协议》、《隐私政策》</span>
		</footer>
		
		<uni-popup ref="popup" type="bottom" background-color="#fff">
			<button type="default" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber" style="width: 100%;height: 12vh;line-height: 12vh;">点击授权手机号</button>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				flag: false
			}
		},
		methods: {
			decryptPhoneNumber(e){
				if( e.detail.errMsg == "getPhoneNumber:ok" ){ //成功
					this.$refs.popup.close()
					this.Post({
						code: e.detail.code,
						encryptedData: e.detail.encryptedData,
						iv: e.detail.iv,
						token: uni.getStorageSync('token1')
					},'/api/mini_program/bindPhoneNumber').then(res => {
						this.$store.commit('changeUserInfo', res.data.userinfo)
						if (this.$store.state.user.toPath.includes('user/user')) {
							uni.switchTab({
								url: this.$store.state.user.toPath
							})
						} else {
							uni.navigateBack({})
						}
					})
				}
			},
			getUserInfo() {
				if(!this.flag) return;
				
				var _this = this
				uni.login({
					provider: 'weixin',
					success(loginRes) {
						uni.getUserInfo({
							withCredentials: true,
							success(res) {
								_this.Post({
									code: loginRes.code,
									userInfo: res.userInfo,
									encryptedData: res.encryptedData,
									iv: res.iv,
									wechat_qrcode: uni.getStorageSync('wechat_qrcode')?uni.getStorageSync('wechat_qrcode'):''
								}, '/api/mini_program/login').then(resTwo => {
									_this.$store.commit('changeUserInfo', resTwo.data.userinfo)
									if(resTwo.data.userinfo.mobile){
										if (_this.$store.state.user.toPath.includes('user/user')) {
											uni.switchTab({
												url: _this.$store.state.user.toPath
											})
										} else {
											uni.navigateBack({})
										}
									}else{
										uni.setStorageSync('token1', resTwo.data.userinfo.token)
										_this.$refs.popup.open('bottom')
									}
								})
							}
						})
					},
					fail(err) {
						console.log(err);
					},
				})
			},
			cancel() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bg {
		height: 100vh;
	}
	
	.logo {
		width: 186rpx;
		height: 186rpx;
		position: absolute;
		top: 79rpx;
		left: 50%;
		transform: translate(-50%, 0);
	}
	
	.btn {
		width: 667rpx;
		height: 93rpx;
		background: #CCCCCC;
		border-radius: 20rpx;
		font-weight: 500;
		font-size: 35rpx;
		color: #FFFFFF;
		position: absolute;
		top: 301rpx;
		left: 50%;
		transform: translate(-50%,0)
	}
	.btns {
		background: #71B580;
	}
	
	.tips {
		position: absolute;
		left: 54rpx;
		bottom: 155rpx;
		width: 293.33rpx;
		height: 72.67rpx;
	}
	
	footer {
		padding: 0 68rpx;
		position: absolute;
		bottom: 94rpx;
		font-weight: 500;
		font-size: 25rpx;
		color: #333333;
		width: 100%;
		
		view {
			width: 48rpx;
			height: 48rpx;
			border-radius: 50%;
			overflow: hidden;
			border: 1rpx solid #666666;
			
			image {
				width: 100%;
				height: 100%;
			}
		}
		
		span {
			color: rgba(113, 181, 128, 1);
		}
	}
</style>