MP-XiaoXing/BagAuth/pages/login/login.vue

<template>
	<view v-if="loginType" class="login-page bg-white">
		<view class="image login-bg">
			<!-- <image :src="imgURL+'login-bg.png'" mode="widthFix"></image> -->
			<!-- <image src="../../../BagStation/static/img/LV.png" mode="widthFix"></image> -->
			<image src="../../../static/img/login-bg.png" mode="widthFix"></image>
		</view>
		<scroll-view scroll-x class=" bg-white nav padding">
			<view class="flex text-center padding-bottom">
				<view class="cu-item  flex-sub">
				</view>
				<view class="cu-item  flex-sub" :class="0==TabCur?'text-red cur':''" @tap="tabSelect(0)">
					个人账号
				</view>
				<view class="cu-item  flex-sub">
				</view>
				<!--<view class="cu-item  flex-sub" :class="1==TabCur?'text-red cur':''" @tap="tabSelect(1)">
					企业账号
				</view>-->
			</view>
		</scroll-view>
		<view class="cu-load load-modal" v-if="loadModal">
			<view class="gray-text">加载中...</view>
		</view>
		<view class="margin-lg flex flex-direction text-center">
			<button v-if="checked" class="cu-btn round  bg-main-oil  lg text-lg" open-type="getPhoneNumber"
				@getphonenumber="decryptPhoneNumber">
				<text class="cuIcon-weixin padding-right-xs"> </text>
				<text>
					微信用户一键登录
				</text>
			</button>
			<button v-else class="cu-btn round  bg-main-oil  lg text-lg" @click="$refs.popup.open('center')">
				<text class="cuIcon-weixin padding-right-xs"> </text>
				<text>
					微信用户一键登录
				</text>
			</button>
			<!-- 			<button class="cu-btn margin-top round lg" @tap="refuseEmpower">
				输入手机号码登录
			</button> -->
			<button class="cu-btn bg-0 margin-top round  text-sm" @tap="refuseLogin">
				跳过
			</button>
		</view>
		<loginBottom ref='loginBottom' :checked='checked' @onCheck="checkAgree" />
		<uni-popup ref='popup'>
			<view class="protocol_body">
				<view class="protocol_header">
					使用协议及隐私保护
				</view>
				<view class="protocol_content">
					为了更好地保障您的合法权益，请您阅读并同意 <text style="  color: black; font-weight: 600;" @click="$refs.loginBottom.toAgree('baichuanUserAgree')">《用户协议》</text> 与 <text style=" color: black; font-weight: 600;" @click="$refs.loginBottom.toAgree('baichuanPrivacyAgreement')">《隐私政策》</text>。
				</view>
				<view class="protocol_footer">
					<button @click="$refs.popup.close()" class="protocol_footer_close">取消</button>
					<button @click="checked=true;$refs.popup.close();" class="protocol_footer_confirm">确定</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	// import uniteApi from '@/api/unite'
	// import weixinApi from '@/api/weixin'
	import loginBottom from './components/loginBottom.vue'
	import oilIdentityApi from '@/api/oil-identity'

	export default {
		components: {
			loginBottom
		},
		data() {
			return {
				loginType:false,
				// imgsrc:require('../../../BagStation/static/img/login-bg.png'),
				checked: false,
				userHandle: false,
				TabCur: 0,
				accuntSource: false,
				imgURL: this.global.imgURL,
				loadModal: false,
				active: 0,
				password: "",
				random: '',
				driver: {},
				count: 0,
				loginRes: {},
				sessionKey: '',
				nickName: '',
				loginOut: uni.getStorageSync('loginOut') ? true : false
			}
		},
		onLoad(e) {
			if(e.loginType){
				this.loginType = Boolean(e.loginType); 
				console.log(e.loginType,'e.loginType')
			}
			uni.clearStorageSync()
			// this.refreshLocation()
			uni.login({
				provider: 'weixin',
				success: (loginRes) => {
					console.log(loginRes, '+++++++')
					const code = loginRes.code
					this.onceCode = code
					console.log(this.onceCode, '----------')
					oilIdentityApi.sendCode(this.onceCode).then(res => {
						console.log(res, '++++++++++++++++')
						if (res.code === 20000) {
							this.sessionKey = res.data.sessionKey
							uni.setStorageSync('openid', res.data.openId)
							uni.setStorageSync('unionid', res.data.unionId)
							this.autoLogin()

						} else if (res.code == 1002) {
							uni.showModal({
								title: '微信登录失败提醒',
								content: `${res.msg}如有疑问，请联系客服处理`
							})
						} else {
							// console.log('res', res.code)

						}

					}).catch(err => {
						console.log(err)
						uni.reLaunch({
							url: '/BagAuth/pages/login/boforeLogin/boforeLogin',
							fail: (err) => {
								// console.log(err)
							}
						})
					})

				},
				fail: err => {},
			})
		},
		methods: {
			checkAgree(val) {
				this.checked = val
			},
			refuseLogin() {
				uni.setStorageSync('loginType',false)
				uni.switchTab({
					url: '/pages/tabbar/home/home'
				})
			},
			refreshLocation() {
				// uni.getLocation({
				// 	type: 'wgs84',
				// 	success: function(res) {
				// 		uni.setStorageSync('location', res)
				// 	}
				// });
			},
			autoLogin() {
				// let url = 'loginCompany'
				let url = 'loginPersonal'
				oilIdentityApi.autoLogin({
					unionId: uni.getStorageSync('unionid')
				}, url).then(res => {
					if (res.code == 20000) {
						this.loginSuccess(res)
					}else{
					}
				})
			},
			refuseEmpower() {
				uni.navigateTo({
					url: '/BagAuth/pages/login/oldLogin'
				})
			},



			decryptPhoneNumber(e) {
				if (!this.checked) {
					uni.showToast({
						title: '请您阅读并同意协议',
						icon: 'none'
					})
					return
				}
				// console.log(e.detail)
				if (e.detail.errMsg === 'getPhoneNumber:ok') {
					const data1 = {
						...e.detail,
						sessionKey: this.sessionKey,
						unionId: uni.getStorageSync('unionid'),
						openId: uni.getStorageSync('openid'),
					}
					let url1 = 0 == this.TabCur ? 'bindLoginByPhonePersonal' : 'bindLoginByPhoneCompany'
					this.bindLoginByPhone(data1, url1)
				} else {
					uni.showModal({
						title: '用户拒绝手机号的授权',
						content: `请输入手机号码登录，如有疑问，请联系客服处理`
					})
				}
			},
			bindLoginByPhone(data, url) {
				if (this.count < 1) {
					oilIdentityApi.bindLoginByPhone(data, url).then(res => {
						console.log(res)
						if (res.code == 20000) {
							this.loginSuccess(res) 
						}
					})
				}

			},

			tabSelect(e) {
				this.TabCur = e;
			},
			loginSuccess(res) {
				let resData = res.data
				if (resData.authTokenDTO.loginFlag) {
					uni.setStorageSync('Authorization', resData.authTokenDTO.accessToken)
					uni.setStorageSync('accountStatus', resData.isCompanyAccount)

					let user = resData.authTokenDTO.loginUser
					uni.setStorageSync('user', user)

					setTimeout(() => {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							complete: (err) => {
								// console.log(err)
							}
						})
					}, 1000);
					//  这里有问题
					uni.switchTab({
						url: '/pages/tabbar/home/home'
					})
				}else{ 
					console.log(this.loginType,'loginTypeloginTypeloginType')
					if(!this.loginType){
						this.refuseLogin()
					}
					console.log('禁摩登录i失败==================')
				}
			},
		}
	}
</script>

<style>
	.protocol_footer_close {
		width: 185rpx; 
		border-radius: 94rpx 94rpx 94rpx 94rpx;
		opacity: 1;
		border: 1px solid #000000;
		font-size: 26rpx;
	}

	.protocol_footer_confirm {
		width: 185rpx; 
		background: #FD0505;
		border-radius: 56rpx 56rpx 56rpx 56rpx;
		opacity: 1;
		font-size: 26rpx;
		color: #FFFFFF;
	}

	.protocol_footer {
		display: flex;
		justify-content: space-between; 
		color: #FFFFFF;
	}

	.protocol_content {
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 46rpx;
		margin: 60rpx 0;
	}

	.protocol_header {
		width: 330rpx;
		height: 32rpx;
		font-size: 36rpx;
		color: #000000;
		width: 100%;
		text-align: center;
	}

	.protocol_body {
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		opacity: 1;
		padding: 70rpx 50rpx;
		max-width: 634rpx;
		box-sizing: border-box;
	}

	.login-bg {
		width: 100%;
	}

	.login-bg image {
		width: 750upx;
		vertical-align: bottom;
	}

	.login-page {
		height: 750rpx;
		background-color: #fff;
	}

	.bg-0 {
		background-color: transparent;
		color: #555555;
	}
</style>