purchase-let/pages/login/login.vue

<template>
	<view>
		<up-navbar title="登录" :autoBack="false" placeholder bgColor="rgba(0,0,0,0)">
			<template #left>
				<up-icon v-if="!showWeixin" @click="navBack" name="arrow-left" size="20"></up-icon>
				<view v-else></view>
			</template>
		</up-navbar>
		<view class="login-box">
			<image class="logo" src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/35adb202404271727457954.png">
			</image>
			<view class="tips">欢迎登录惠农批发</view>
			<block v-if="showWeixin">
				<up-transition :show="showWeixin">
					<view class="btn">
						<up-button @click="weixinLogin" color="#20B128" size="large"><up-icon name="weixin-fill"
								color="#fff" size="28"></up-icon>微信快捷登录</up-button>
					</view>
					<!-- <view class="btn">
            <up-button @click="officialCode" color="#20B128" size="large"><up-icon name="weixin-fill" color="#fff"
                size="28"></up-icon>公众号授权</up-button>
          </view> -->
					<!-- <view class="btn">
						<up-button color="#ECFFEE" @click="showWeixin=false" size="large"><text
								style="color: #20B128;">使用短信验证登录</text></up-button>
					</view> -->
				</up-transition>
			</block>
			<block v-else>
				<up-transition :show="!showWeixin">
					<view class="form">
						<view class="input">
							<up-input :customStyle="{height: '100%'}" v-model="loginForm.phone" placeholderClass="place"
								border="none" placeholder="请输入手机号" type="number">
								<template #prefix>
									<image style="height: 40rpx;width: 40rpx;margin-top: 6rpx;"
										src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/48491202404281006484208.png">
									</image>
								</template>
							</up-input>
						</view>
						<view class="input">
							<up-input :customStyle="{height: '100%'}" v-model="loginForm.code" :maxlength="4"
								placeholderClass="place" border="none" placeholder="请输入验证码" type="number">
								<template #prefix>
									<image style="height: 40rpx;width: 40rpx;margin-top: 6rpx;"
										src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/3a42f202404281007454918.png">
									</image>
								</template>
								<template #suffix>
									<up-code :seconds="seconds" ref="uCodeRef" @change="codeChange"></up-code>
									<view style="color: #20B128;" @click="getCode">{{tips}}</view>
								</template>
							</up-input>
						</view>
					</view>
					<view class="btn">
						<up-button color="#20B128" size="large" @click="codeLogin">登录</up-button>
					</view>
				</up-transition>
			</block>
			<view class="wx-login" v-if="!showWeixin" @click="navBack">
				微信登录
			</view>
			<view class="agreement">
				<image v-if="!isAgree" @click="isAgree=true" src="@/static/icon/n-check.png"></image>
				<image v-else @click="isAgree=false" src="@/static/icon/check.png"></image>
				<view>
					我已同意<text>《用户协议》</text>与<text>《隐私政策》</text>
				</view>
			</view>
		</view>
		<bindPhone :show="showBind" @close="showBind = false" @change="getPhoneNumber" />
		<modal :show="showOfficial" @close="showOfficial = false" @change="officialCode()" title="您还未绑定公众号"
			content="需要绑定公众号后才可以接收消息" confirmText="立即绑定" />
	</view>
</template>

<script setup>
	import {
		onBackPress
	} from "@dcloudio/uni-app"
	import {
		ref
	} from "vue"
	import {
		userLoginApi,
		userLoginWeixinApi,
		getMobileByMnpApi
	} from "@/api/user.js";
	import useUserStore from "@/store/user.js"
	import bindPhone from "@/components/bindPhone.vue"
	import modal from "@/components/modal.vue"


	const showOfficial = ref(false);
	const navToIndex = () => {
		if (userStore.userInfo && userStore.token) uni.reLaunch({
			url: '/pages/index/index'
		})
		// if (!userStore.userInfo.supplier) uni.reLaunch({
		// 	url: '/pages/index/index'
		// })
		// else if (userStore.userInfo.supplier && !userStore.userInfo.supplier.openid) {
		// 	return showOfficial.value = true;
		// } else {
		// 	uni.reLaunch({
		// 		url: '/pageQuota/quotation/index'
		// 	})
		// }
	}

	// 微信公众号绑定
	const officialCode = () => {
		uni.navigateTo({
			url: `/pages/code/code?id=${userStore.userInfo.id}`,
			success: () => {
				let user = userStore.userInfo;
				user.supplier ? user.supplier.openid = 1 : user.supplier = {};
				userStore.setUserInfo(user);
			}
		})
	}

	const userStore = useUserStore(); //使用pinia进行状态管理
	if (userStore.userInfo && userStore.userInfo.mobile) {
		navToIndex();
	} else {
		userStore.setToken('');
		userStore.setUserInfo({});
	}

	const showWeixin = ref(true); //是否显示微信登录
	const isAgree = ref(false); //是否同意协议

	const weixinLogin = () => {
		if (!isAgree.value) {
			uni.$u.sleep(1000).then(res => {
				isAgree.value = true;
			})
			return uni.$u.toast('请先阅读并同意协议');
		}
		uni.showLoading({
			title: '登录中'
		})
		uni.login({
			provider: 'weixin',
			success: (res) => {
				userLoginWeixinApi({
					code: res.code
				}).then(res => {
					uni.hideLoading();
					userStore.setToken(res.data.token);

					if (!res.data.mobile) { //未绑定手机号
						return showBind.value = true;
					} else {
						userStore.setUserInfo(res.data);
						//再次登录 已有手机号 判断是否员工

						//身份授权成功 核销人员
						if (res.data.is_staff == 1) {
							userStore.setUserInfo(res.data);
							uni.reLaunch({
								url: "/multipleShop/verificationOrder/index"
							})
						} else {
							// 授权成功 是否是通过分享进来的,如果是缓存有门店信息
							let storeInfo = uni.getStorageSync('STORE_INFO');
							if (storeInfo) {
								storeInfo = JSON.parse(storeInfo);
								// 直接选择门店
								uni.reLaunch({
									url: "/pages/index/index?id=" + storeInfo.id
								})
							} else {
								// 直接选择门店
								uni.reLaunch({
									url: "/multipleShop/index/index"
								})
							}
						}
					}
				})
			},
			fail: (err) => {
				console.log(err);
				uni.$u.toast('登录失败');
			}
		})
	}

	const showBind = ref(false); //是否显示绑定手机号弹窗
	const getPhoneNumber = (e) => {
		if (e.detail?.errMsg == 'getPhoneNumber:ok') {
			getMobileByMnpApi({
				code: e.detail.code
			}).then(res => {
				//手机号获取成功 可以本地缓存用户信息以及token
				userStore.setUserInfo(res.data);
				//身份授权成功 核销人员
				if (res.is_staff == 1) {
					userStore.setUserInfo(res.data);
					uni.reLaunch({
						url: "/multipleShop/verificationOrder/index"
					})
				} else {
					// 授权成功 是否是通过分享进来的,如果是缓存有门店信息
					let storeInfo = uni.getStorageSync('STORE_INFO');
					if (storeInfo) {
						storeInfo = JSON.parse(storeInfo);
						// 直接选择门店
						uni.reLaunch({
							url: "/pages/index/index?id=" + storeInfo.id
						})
					} else {
						// 直接选择门店
						uni.reLaunch({
							url: "/multipleShop/index/index"
						})
					}
				}
			})
		} else {
			console.log("用户拒绝授权");
			return uni.$u.toast('您拒绝了授权');
		}
	}

	const loginForm = ref({
		phone: '15366662222',
		code: ''
	})
	const isPhone = () => { //检验手机号是否正确
		loginForm.value.phone = loginForm.value.phone.replace(/\s*/g, ""); //去除空格
		return !/^1[3456789]\d{9}$/.test(loginForm.value.phone);
	}
	const codeLogin = () => {
		if (!isAgree.value) return uni.$u.toast('请先阅读并同意协议');
		// 验证码登录
		if (isPhone()) return uni.$u.toast('请输入正确的手机号码');
		console.log('登录');
		userLoginApi({
			account: '17811111111',
			password: '1111',
			terminal: 3,
			scene: 1
		}).then(res => {
			console.log(res);
		})
	}

	const tips = ref('');
	const seconds = ref(60);
	const uCodeRef = ref(null);

	const codeChange = (text) => {
		tips.value = text;
	};

	const getCode = () => {
		if (!isAgree.value) return uni.$u.toast('请先阅读并同意协议');
		if (uCodeRef.value.canGetCode) {
			if (isPhone()) return uni.$u.toast('请输入正确的手机号码');
			// 模拟向后端请求验证码
			uni.showLoading({
				title: '正在获取验证码',
			});
			setTimeout(() => {
				uni.hideLoading();
				// 这里此提示会被start()方法中的提示覆盖
				uni.$u.toast('验证码已发送');
				// 通知验证码组件内部开始倒计时
				uCodeRef.value.start();
			}, 2000);
		} else {
			uni.$u.toast('倒计时结束后再发送');
		}
	};

	// 微信小程序无法拦截原生返回按钮，所以使用自定义导航拦截返回
	const navBack = () => {
		if (showWeixin.value == false) {
			showWeixin.value = true;
			return true;
		} else uni.navigateBack();
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.login-box {
		width: 700rpx;
		height: 80vh;
		margin: 0 auto;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 10vh;
		position: relative;

		.logo {
			height: 152rpx;
			width: 152rpx;
		}

		.tips {
			color: #444444;
			font-size: 28rpx;
			margin: 30rpx 0;
		}

		.btn {
			width: 600rpx;
			margin-top: 40rpx;
			font-size: 32rpx !important;
		}

		.form {
			.input {
				background-color: #ECFFEE;
				width: 600rpx;
				height: 90rpx;
				box-sizing: border-box;
				padding: 0 20rpx;
				margin-bottom: 40rpx;

				.place {
					color: #333;
				}

				.customStyle {
					color: red;
				}
			}
		}

		.wx-login {
			width: 200rpx;
			text-align: center;
			padding: 20rpx;
			border-radius: 100rpx;
			background-color: #EFEFEF;
			position: absolute;
			bottom: 80rpx;
			left: 50%;
			transform: translateX(-50%);
		}

		.wx-login:active {
			background-color: #ECFFEE;
		}

		.agreement {
			position: absolute;
			bottom: 0rpx;
			left: 0;
			width: 100%;
			display: flex;
			justify-content: center;
			color: #444;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 10rpx;
			}

			text {
				color: #20B128;
			}
		}
	}
</style>