xinjiangMiniProgram/pages/subPage/login/login.vue

<template>
	<view class="content">
		<view class="padding">
			<view class="logoCon">
				<view class="logo">
					<image src="@/static/images/logo.png" mode=""></image>
				</view>
				<view class="name">事务通</view>
			</view>

			<view class="oneBtnBox" v-if="!isCheck">
				<oneBtn text="微信一键登录" @oneBtnClick="handleBtnClick"></oneBtn>
			</view>
			<view class="oneBtnBox" v-else>
				<button type="default" open-type="getPhoneNumber"  @getphonenumber="getPhoneNumber" class="cotact">联系客服</button>
				<oneBtn text="微信一键登录"></oneBtn>
			</view>
			
			<view style="padding-top: 30rpx;">
				<privacyRadion style="margin-top: 40rpx;"  @changeRadio="changeRadio" :isCheck="isCheck"/>
			</view>
		</view>
	</view>
</template>

<script>
	import { weixinLogin } from '@/config/api.js'
	import { toast} from '@/uni_modules/uview-plus'
	export default {
		data() {
			return {
				FormData: {
					phone: '',
					code: ''
				},
				isCheck: false
			}
		},
		methods: {
			handleBtnClick() {
				this.$u.toast('请先勾先勾选用户协议与隐私政策')
			},
			// 是否选择协议
			changeRadio(val) {
				 uni.hideKeyboard();
				this.isCheck = val
			},
			async getPhoneNumber (e) {
				if(!this.isCheck) return this.$u.toast('请勾选产品协议与隐私政策');
				let phoneCode = e.detail.code
				console.log('来到这里了吗？')
				console.log(phoneCode)
			    console.log(e.detail.errMsg) // 回调信息（成功失败都会返回）
			    console.log(e.detail)  // 错误码（失败时返回）
				const loginCode = await this.loginFn()
				if(!loginCode||!phoneCode) return
				console.log('登录验证码')
				console.log(loginCode)
				let obj = {
					phoneCode,
					socialCode: loginCode
				}
				const {data: res} = await weixinLogin(obj)
				console.log(res)
				// this.$goPage('/pages/userCenter/login/face')
				// uni.switchTab({
				// 	url: '/pages/tabbar/index/index'
				// })
			  },
			
			loginFn() {
			      // 微信登录
				  return new Promise((resolve,reject)=>{
					  uni.login({
					    provider: 'weixin',
					    success: loginRes => {
					      if (loginRes.code) {
					        // 登录成功，获取用户信息
					  						console.log('loginRes.code')
					  						console.log(loginRes.code)
											resolve(loginRes.code)
					        // this.getUserInfo(loginRes.code);
					      } else {
					        console.error('微信登录失败');
					      }
					    },
					    fail: err => {
							reject(null)
					      console.error('微信登录失败', err);
					    }
					  });
				  })
			      
			    },
		}
	}
</script>

<style lang="scss" scoped>
	image {
		display: block;
		width: 100%;
		height: 100%;
	}

.other {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: 22rpx;
	color: #9C9C9C;
	position: fixed;
	bottom: 80rpx;
	left: 0;
	width: 100%;
  .lineTxt {
	  position: relative;
	  
	&::before {
		content: '';
		position: absolute;
		width: 240rpx;
		height: 1rpx;
		top: 50%;
		background: #e6e6e6;
		right: 150rpx;
		transform: translateY(50%);
		z-index: 99;
	}
	&::after {
		content: '';
		position: absolute;
		width: 240rpx;
		height: 1rpx;
		top: 50%;
		background: #e6e6e6;
		left: 150rpx;
		transform: translateY(50%);
		z-index: 99;
	}
  }

  .icon {
	  width: 80rpx;
	  height: 80rpx;
	  margin: 20rpx 0;
  }

  .txt {
	
  }
}

	.content {
		.logoCon {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding-top: 150rpx;
			.logo {
				width: 160rpx;
				height: 160rpx;
			}

			.name {
				font-size: 32rpx;
				margin-top: 20rpx;
				font-weight: 700;
			}
		}
		.oneBtnBox {
			margin-top: 40rpx;
			position: relative;
			.cotact {
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				opacity: 0;
			}
		}
	}
</style>