zdtap-uniapp-main/pages/index/chooseLogin.vue

<template>
	<view class="page-content">
		
		<view style="margin: 0rpx auto 200rpx;color: #0B0E26;font-size: 36rpx;font-weight: bold;">欢迎加入啤啤猩球</view>
		<button class="cu-btn btn bg-zd margin-bottom text-white" @click="toLogin">
			<!-- <text class="cuIcon-weixin text-green margin-right-xs" style="font-size: 44rpx !important;"></text> -->
			微信一键登录</button>
			<!-- open-type="getPhoneNumber" -->
			<button class="cu-btn btn margin-bottom" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">
				手机号快捷登录</button>
		<!-- <button class="cu-btn btn margin-bottom" style="background: #F2F2F2;" open-type="getPhoneNumber" @click="toPhoneLogin">
			
			其他手机号登录</button> -->
		<!-- <button class="cu-btn btn" style="margin-bottom: 100rpx;" @click="toReg">立即认证门店</button> -->
		<view class="agreement-box">
			<checkbox-group @change="checkboxChange" class="checkbox-group">
				<checkbox value="1" :checked="isAgree" color="#19367A" class="checkbox" />
				<text class="agreement-text">我已阅读并同意</text>
				<text class="link" @click="toAgreement">《软件使用协议》</text>
			</checkbox-group>
		</view>
	</view>
</template>

<script>
	import {
		getOpenId,
		getUserInfo,
		phoneCodeLoginApi
		
	} from '@/api/login.js'
	import { getBarInfo } from "@/api/bar.js"
	export default {
		data() {
			return {
				isAgree: false
			};
		},
		onLoad() {

		},
		methods: {
			// 微信登录
			toLogin() {
				if (!this.isAgree) {
					uni.showToast({
						title: '请先同意软件使用协议',
						icon: 'none'
					})
					return
				}
				uni.login({
					provider: 'weixin',
					success: (loginRes) => {
						if (loginRes.code) {
							uni.showLoading({
								mask: true
							})
							getOpenId(loginRes.code).then(res => {
								this.openId = res.openId
								if (res.token) {
									uni.setStorageSync('token', res.token)
									this.getUserInfoFun()
									this.getBarInfoFun()
								}
							})
						}
					}
				})
			},
			decryptPhoneNumber(e) {
				if (!this.isAgree) {
					uni.showToast({
						title: '请先同意软件使用协议',
						icon: 'none'
					})
					return
				}
				const data = { 
					code: e.detail.code
				}
				uni.showLoading()
				phoneCodeLoginApi(data).then(res=>{
					if (res.token) {
						uni.setStorageSync('token', res.token)
						this.getUserInfoFun()
						this.getBarInfoFun()
					}
				})
			},
			// 获取用户信息
			getUserInfoFun() {
				getUserInfo().then(res => {
					if (res.user && res.user.barId) {
						this.userInfo = res.user
						uni.setStorageSync('userInfo', res.user)
						uni.reLaunch({
							url: '/pages/index/index'
						})
					} else {
						uni.showModal({
							title: '提示',
							content: '您还未认证门店，请先认证',
							showCancel: true,
							success: (res) => {
								if (res.confirm) {
									uni.navigateTo({
										url: '/pages/index/registration?openId=' + this.openId
									})
								}
							}
						})
					}
					uni.hideLoading()
				})
			},
			// 认证门店 注册
			toReg() {
				if (this.openId) {
					uni.navigateTo({
						url: '/pages/index/registration?openId=' + this.openId
					})
				} else {
					uni.login({
						provider: 'weixin', //使用微信登录
						success: (loginRes) => {
							if (loginRes.code) {
								uni.showLoading({
									mask: true
								})
								getOpenId(loginRes.code).then(res => {
									this.openId = res.openId
									uni.navigateTo({
										url: '/pages/index/registration?openId=' + this.openId
									})
									uni.hideLoading()
								})
							}
						}
					})
				}

			},
			// 获取酒吧信息
			getBarInfoFun() {
				getBarInfo().then(res => {
					uni.setStorageSync('barInfo', res.data)
				})
			},
			// 手机号登录
			toPhoneLogin() {
				
				// uni.navigateTo({
				// 	url: "/pages/index/phoneLogin"
				// })
			},
			// 跳转到协议页面
			toAgreement() {
				uni.navigateTo({
					url: '/pages/index/userAgreement'
				})
			},
			// 协议勾选
			checkboxChange(e) {
				this.isAgree = e.detail.value.length > 0
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-content {
		display: flex;
		flex-direction: column;
		// align-items: center;
		justify-content: center;
		height: 100vh;
		padding: 0 40rpx;
		// background-color: #FDFDFD;
		// background: linear-gradient(180deg, #FEE034 0%, #FDFDFD 30%, #FDFDFD 100%);
		background-color: #FFF;
		.agree-text {
			position: fixed;
			bottom: 100rpx;
			left: 0;
			right: 0;
			text-align: center;
		}

		.btn {
			width: 686rpx;
			height: 80rpx;
			border-radius: 12rpx;
			// box-shadow: 0px 10px 24px 0px rgba(43, 45, 51, 0.2);
		}

		.agreement-box {
			position: fixed;
			bottom: 100rpx;
			left: 0;
			right: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			
			.checkbox-group {
				display: flex;
				align-items: center;
				justify-content: center;
				
				.checkbox {
					transform: scale(0.8);
					margin-right: 8rpx;
				}
				
				.agreement-text {
					font-size: 24rpx;
					color: #666666;
					margin-right: 4rpx;
				}
				
				.link {
					font-size: 24rpx;
					color: #19367A;
				}
			}
		}
	}
</style>