wxapp_shuibei/pages/users/login/index.vue

<template>
	<div class="login-wrapper bglogin">
		<up-navbar title="登录" placeholder>
			<template #left>
				<!--        <view-->
				<!--            v-if="appStore?.$wxConfig?.auditModeEnabled"-->
				<!--            @click="backHome"-->
				<!--        >-->
				<!--          <image src="@/static/images/tabbar/1-001.png" style="height: 40rpx;width: 40rpx;"></image>-->
				<!--        </view>-->
				<view class="back_extend" v-if="appStore?.$wxConfig?.auditModeEnabled" @click="backHome">
					{{ "<" }} 回到首页
				</view>
			</template>
		</up-navbar>
		<div class="shading">
			<view class="">Hello！</view>
			<view class="">欢迎来到水贝搬运工</view>
			<image src="@/static/images/login_ip.png" class="ip-pic"></image>
		</div>
		<div class="whiteBg" v-if="formItem === 1">
			<view class="whiteBg-tab whiteBg-tabimg" :class="{'whiteBg-tabs whiteBg-tabsimg':current == 1}">
				<view @click="current = item.type" :class="{active:current != index,noActive:current == index}"
					class="whiteBg-tab-li" v-for="(item,index) in navList" :key="index">
					<view class="">{{ item.name }}</view>
				</view>
			</view>
			<div class="list">
				<div class="item">
					<input type="text" maxlength="11" class="texts" placeholder="输入手机号码" v-model="account" required />
				</div>
				<template v-if="current == 0">
					<div class="item">
						<input type="password" class="texts" placeholder="填写登录密码" v-model="password" required />
					</div>
				</template>
				<template v-else-if="current == 1">
					<div class="item">
						<input type="number" placeholder="填写验证码" class="texts" v-model="captcha" maxlength="6" />
						<button class="code" :disabled="disabled" :class="disabled === true ? 'on' : ''" @click="code">
							{{ text }}
						</button>
					</div>
					<div class="item">
						<input type="text" class="texts" placeholder="输入邀请码" v-model="inviteCode" />
					</div>
				</template>

			</div>
			<div class="privacy-box" @click="aloneChecked = !aloneChecked">

				<image v-if="aloneChecked" src="/static/images/select-active@2x.png" mode=""></image>
				<image v-else src="/static/images/select@2x.png" mode=""></image>
				<view class="">我已阅读并同意</view>
				<view class="privacy-text" @click.stop="openPrivacy">《用户协议》</view>
				<view class="privacy-text" @click.stop="openPrivacy">《隐私政策》</view>
			</div>
			<view class="footer">
				<button class="logon" @click="loginMobile" v-if="current !== 0">登录</button>
				<!-- <button class="logonWX"  open-type="getPhoneNumber" @getphonenumber="getPhoneNumberFn" v-if="current !== 0">微信登录</button> -->
				<button class="logon" @click="submit" v-if="current === 0">登录</button>
			</view>
			<view class="wx-login" open-type="getPhoneNumber" @getphonenumber="getPhoneNumberFn" v-if="current !== 0">
				<view class="wx-login-tip">
					<view class="login-line">
					</view>
					<text class="wx-tip">第三方登录</text>
					<view class="login-line">
					</view>
				</view>
				<view class="wx-login-btn">
					<button class="logonWX" open-type="getPhoneNumber" @getphonenumber="getPhoneNumberFn"
						v-if="current !== 0">
						<image class="wx-icon" src="@/static/images/wxLogin.png" mode="widthFix"></image>
					</button>
				</view>
			</view>

		</div>
	</div>
</template>

<script setup>
	import {
		ref,
		watch,
		onMounted
	} from "vue";
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		useAppStore
	} from "@/stores/app";
	import {
		loginH5,
		loginMobile as loginMobileApi,
		registerVerify,
		register,
		getUserInfo,
	} from "@/api/user";
	import {
		getLogo,
		appAuth,
		appleLogin
	} from "@/api/public";
	import {
		VUE_APP_API_URL
	} from "@/utils";
	import {
		useSendCode
	} from "@/hooks/useSendCode";
	import Cache from "@/utils/cache";
	import {
		getPhoneNumber
	} from "@/utils/util.js";
	import {
		useToast
	} from "@/hooks/useToast.js";
	// import {
	// 	useGoEasy
	// } from "@/plugin/goeasy";
	// import {
	// 	getGroupchatList
	// } from "@/api/customerService";
	import {
		footprintScan
	} from "@/api/merchant.js";
	import {
		EXPIRES_TIME
	} from "@/config/cache";
	const appStore = useAppStore();
	const {
		Toast
	} = useToast();
	// const {
	// 	connect,
	// 	GoEasy
	// } = useGoEasy();


	const BACK_URL = "login_back_url";

	// Reactive state
	const navList = ref([{
		name: "快速登录",
		type: 1
	}, {
		name: "账号登录",
		type: 0
	}]);
	const current = ref(1);
	const account = ref("");
	const inviteCode = ref(""); // 邀请码
	const password = ref("");
	const captcha = ref("");
	const formItem = ref(1);
	const type = ref("login");
	const logoUrl = ref("");
	const keyCode = ref("");
	const codeUrl = ref("");
	const codeVal = ref("");

	const platform = ref("");




	const appleShow = ref(false);
	const aloneChecked = ref(false);

	const merchantId = ref('');
	const userInfo = ref({});

	// Watch formItem to update type
	watch(formItem, (newVal) => {
		type.value = newVal === 1 ? "login" : "register";
	});

	const {
		disabled,
		text,
		sendCode
	} = useSendCode();


	function openPrivacy() {
		// void plus.runtime.openWeb("https://www.shuibeibyg.com/shenhe.html");
		goDetail("https://www.shuibeibyg.com/shenhe.html")
	}
	const goDetail = (url) => {
		const webviewPageUrl = `/pages/webview/privacy?path=${url}`;
		uni.navigateTo({
			url: webviewPageUrl,
			fail: (err) => {
				console.error("跳转到webview页面失败：", err);
				uni.showToast({
					title: "跳转失败，请重试",
					icon: "none",
					duration: 1500,
				});
			},
		});
	};

	// Get logo image
	const getLogoImage = async () => {
		try {
			const res = await getLogo();
			logoUrl.value = res.data.logoUrl || "/static/images/logo2.png";
		} catch (err) {
			console.error(err);
		}
	};

	// 验证码登录
	const loginMobile = async () => {
		if (!account.value)
			return uni.showToast({
				title: "请填写手机号码",
				icon: "none"
			});
		if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(account.value))
			return uni.showToast({
				title: "请输入正确的手机号码",
				icon: "none"
			});
		if (!captcha.value)
			return uni.showToast({
				title: "请填写验证码",
				icon: "none"
			});
		if (!/^[\w\d]+$/i.test(captcha.value))
			return uni.showToast({
				title: "请输入正确的验证码",
				icon: "none"
			});
		if (!aloneChecked.value) {
			return Toast({
				title: "请阅读并同意用户协议和隐私政策",
				icon: "none"
			});
		}
		try {
			const res = await loginMobileApi({
				phone: account.value,
				captcha: captcha.value,
				platformType: "app",
				spread_spid: Cache.get("spread"),
				inviteCode: inviteCode.value,
			});
			// 使用 LOGIN action 保存 token 到缓存
			appStore.LOGIN({
				token: res.data.token
			});
			// 保存过期时间（999天后过期）
			const expiresTime = Math.round(new Date() / 1000) + 999 * 24 * 60 * 60;
			Cache.set(EXPIRES_TIME, expiresTime, 0);
			await getUserInfoFn(res.data);
		} catch (res) {
			const message = typeof res === "object" ? res.message : res;
			uni.showToast({
				title: message,
				icon: "none"
			});
		}
	};

	// 注册
	const registerFn = async () => {
		if (!account.value)
			return uni.showToast({
				title: "请填写手机号码",
				icon: "none"
			});
		if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(account.value))
			return uni.showToast({
				title: "请输入正确的手机号码",
				icon: "none"
			});
		if (!captcha.value)
			return uni.showToast({
				title: "请填写验证码",
				icon: "none"
			});
		if (!/^[\w\d]+$/i.test(captcha.value))
			return uni.showToast({
				title: "请输入正确的验证码",
				icon: "none"
			});
		if (!password.value)
			return uni.showToast({
				title: "请填写密码",
				icon: "none"
			});
		// 正则1：验证长度6-18位
		const lengthReg = /^.{6,18}$/;
		// 正则2：必须包含至少1个数字（\d）和至少1个字母（a-zA-Z）
		const hasNumAndLetterReg = /(?=.*\d)(?=.*[a-zA-Z])/;
		if (!lengthReg.test(password.value)) {
			return uni.showToast({
				title: "密码长度必须为6-18位",
				icon: "none"
			});
		} else if (!hasNumAndLetterReg.test(password.value)) {
			return uni.showToast({
				title: "密码必须同时包含数字和字母",
				icon: "none"
			});
		}
		try {
			const res = await register({
				account: account.value,
				captcha: captcha.value,
				password: password.value,
				spread: Cache.get("spread"),
			});
			uni.showToast({
				title: res.message,
				icon: "none"
			});
			formItem.value = 1;
		} catch (res) {
			uni.showToast({
				title: res.message,
				icon: "none"
			});
		}
	};

	// 发送验证码
	const code = async () => {
		if (!account.value)
			return uni.showToast({
				title: "请填写手机号码",
				icon: "none"
			});
		if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(account.value))
			return uni.showToast({
				title: "请输入正确的手机号码",
				icon: "none"
			});

		if (formItem.value === 2) type.value = "register";
		try {
			const res = await registerVerify(account.value);
			uni.showToast({
				title: res.message,
				icon: "none"
			});
			sendCode();
		} catch (err) {
			uni.showToast({
				title: err.message,
				icon: "none"
			});
		}
	};

	// Navigation tab switch
	const navTap = (index) => {
		current.value = index;
	};

	// 账号密码登录
	const submit = async () => {
		
		appStore.setIndexRefersh(true)
		if (!account.value) return Toast({
			title: "请填写账号",
			icon: "none"
		});
		if (!/^[\w\d]{5,16}$/i.test(account.value))
			return Toast({
				title: "请输入正确的账号",
				icon: "none"
			});
		if (!password.value) return Toast({
			title: "请填写密码",
			icon: "none"
		});
		if (!aloneChecked.value) {
			return Toast({
				title: "请阅读并同意用户协议和隐私政策",
				icon: "none"
			});
		}
		try {
			const {
				data
			} = await loginH5({
				account: account.value,
				password: password.value,
				platformType: "app",
				spread: Cache.get("spread"),
			});
			appStore.LOGIN({
				token: data.token
			});
			// 保存过期时间（999天后过期）
			const expiresTime = Math.round(new Date() / 1000) + 999 * 24 * 60 * 60;
			Cache.set(EXPIRES_TIME, expiresTime, 0);

			await getUserInfoFn(data);
		} catch (err) {
			const message = typeof err === "object" ? err.message : err;
			uni.showToast({
				title: message,
				icon: "none",
			});
		}
	};
	// 订阅已加入的群组
	// function getGroupchatListFn(uid) {
	// 	getGroupchatList({
	// 		userId: uid
	// 	}).then((res) => {
	// 		if (res && res.data && res.data.length > 0) {
	// 			//订阅群消息
	// 			var groupIds = res.data;
	// 			GoEasy.im.subscribeGroup({
	// 				groupIds: groupIds,
	// 				onSuccess: function() {
	// 					//订阅成功
	// 					console.log("Group message subscribe successfully.");
	// 				},
	// 				onFailed: function(error) {
	// 					//订阅失败
	// 					console.log(
	// 						"Failed to subscribe group message, code:" +
	// 						error.code +
	// 						" content:" +
	// 						error.content
	// 					);
	// 				},
	// 			});
	// 		}
	// 	});
	// }
	const getUserInfoFn = async (data) => {
		try {
			appStore.SETUID(data.uid);
			const res = await getUserInfo();
			appStore.UPDATE_USERINFO(res.data);
			userInfo.value = res.data;

			// connect({
			// 	id: appStore.uid?.toString(),
			// 	data: {
			// 		avatar: appStore.$userInfo?.avatar,
			// 		nickname: appStore.$userInfo?.nickname,
			// 		phone: appStore.$userInfo?.phone,
			// 		uid: appStore.uid?.toString(),
			// 	},
			// });
			// 订阅已加入的群组
			// await getGroupchatListFn(data.uid);

			if (merchantId.value != '') {
				let obj = {
					merchantId: merchantId.value,
					userId: res.data.userId
				}
				
				await footprintScanFn(obj)
			} else {
				console.log('============')
				appStore.UPDATE_MERCHANT_ID('')
				Toast({
					title: "登录成功"
				});
				backHome();
			}
		} catch (err) {
			console.error(err);
			uni.showToast({
				title: err.msg,
				icon: "none"
			});
		}
	};
	const backHome = () => {
		if (userInfo.value.merchant && userInfo.value.merchant.id) {
			uni.navigateTo({
				url: "/pages/merchantCenter/index"
			})
		} else {
			uni.switchTab({
				url: "/pages/index/index",
			});
		}
	};
	const footprintScanFn = async (data) => {
		const res = await footprintScan(data);
		appStore.USERINFO();
		Toast({
			title: "登录成功"
		});
		backHome();
	}
	const getPhoneNumberFn = async (e) => {
		// Toast({ title: "登录中..." });
		appStore.setIndexRefersh(true)
		if (!aloneChecked.value) {
			return Toast({
				title: "请阅读并同意用户协议和隐私政策",
				icon: "none"
			});
		}
		const res = await getPhoneNumber(e);
		console.log('res', res);
		if (res) {
			appStore.LOGIN({
				token: res.data.token
			});
			// 保存过期时间（999天后过期）
			const expiresTime = Math.round(new Date() / 1000) + 999 * 24 * 60 * 60;
			Cache.set(EXPIRES_TIME, expiresTime, 0);
			await getUserInfoFn(res.data);
		}
	}
	onLoad(() => {
		console.log(appStore.$wxConfig)
		merchantId.value = appStore.merchantId || '';
		getLogoImage();
	});

	onMounted(() => {
		uni.getSystemInfo({
			success(res) {
				platform.value = res.platform.toLowerCase();
				if (platform.value === "ios" && res.system.split(" ")[1] >= 13) {
					appleShow.value = true;
				}
			},
		});
	});
</script>

<style lang="scss" scoped>
	::v-deep .u-status-bar {
		background: transparent;
		background-color: transparent !important;
	}

	::v-deep .u-navbar__content {
		background: transparent;
		background-color: transparent !important;
	}

	.login-wrapper {
		//background: url('https://sb-admin.oss-cn-shenzhen.aliyuncs.com/shuibei-mini/new-mini/login@2x.png');
		background-repeat: no-repeat;
		background-size: 100% 624rpx;
		background-color: #FFFFFF;
	}

	.appLogin {


		.hds {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 24rpx;
			color: #b4b4b4;

			.line {
				width: 68rpx;
				height: 1rpx;
				background: #cccccc;
			}

			p {
				margin: 0 20rpx;
			}
		}

		.btn-wrapper {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 30rpx;

			.btn {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 68rpx;
				height: 68rpx;
				border-radius: 50%;
			}

			.apple-btn {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-left: 30rpx;
				background: #000;
				border-radius: 34rpx;
				font-size: 40rpx;

				.icon-s-pingguo {
					color: #fff;
					font-size: 40rpx;
				}
			}

			.iconfont {
				font-size: 40rpx;
				color: #fff;
			}

			.wx {
				margin-right: 30rpx;
				background-color: #61c64f;
			}

			.mima {
				background-color: #28b3e9;
			}

			.yanzheng {
				background-color: #f89c23;
			}
		}
	}

	.code img {
		width: 100%;
		height: 100%;
	}

	.acea-row.row-middle {
		input {
			margin-left: 20rpx;
			display: block;
		}
	}

	.login-wrapper {

		height: 100vh;

		.shading {
			padding: 72rpx 78rpx;
			display: flex;
			justify-content: center;
			flex-direction: column;
			position: relative;
			z-index: 1;

			view {
				color: #333333;
				font-size: 36rpx;
				font-weight: bold;

				&:first-child {
					font-size: 48rpx;
					margin-bottom: 16rpx;
				}
			}

			.ip-pic {
				width: 261rpx;
				height: 480rpx;
				position: absolute;
				right: 14rpx;
				bottom: calc(-76rpx - 88rpx);
			}
		}

		.whiteBg {
			// margin-top: 100rpx;
			background: #FFFFFF;
			border-radius: 48rpx 48rpx 0rpx 0rpx;
			position: relative;
			z-index: 5;

			.whiteBg-tab {
				color: #666666;
				display: flex;
				align-items: center;
				height: 88rpx;
				text-align: center;
				//background: url('https://sb-admin.oss-cn-shenzhen.aliyuncs.com/shuibei-mini/new-mini/logintab1.png');
				background-repeat: no-repeat;
				background-size: cover;

				.active {
					width: 407rpx;

					view {
						color: #F8C008;
						font-weight: bold;
						position: relative;

						&::after {
							left: 50%;
							bottom: -12rpx;
							content: '';
							transform: translateX(-50%);
							position: absolute;
							width: 32rpx;
							height: 8rpx;
							background: #F8C008;
							border-radius: 4rpx;
						}
					}
				}

				.noActive {
					flex: 1;
				}
			}

			.whiteBg-tabs {
				//background: url('https://sb-admin.oss-cn-shenzhen.aliyuncs.com/shuibei-mini/new-mini/logintab.png');
				background-repeat: no-repeat;
				background-size: cover;
			}

			.list {
				padding: 0 80rpx;
				margin-top: 120rpx;

				.item {
					display: flex;
					height: 88rpx;
					align-items: center;
					justify-content: space-between;
					padding: 0 8rpx 0 24rpx;
					background: #F9F7F0;
					border-radius: 16rpx;
					margin-bottom: 32rpx;

					.texts {
						flex: 1;
						font-size: 28rpx;
					}

					.code {
						padding: 0;
						margin: 0;
						width: 188rpx;
						display: flex;
						align-items: center;
						height: 72rpx;
						justify-content: center;
						background: #FFFFFF;
						border-radius: 16rpx;
						color: #F8C008;
						font-size: 28rpx;
						font-weight: bold;
						border: none;

						&::after {
							width: 0;
							border: none;
						}
					}
				}
			}

			.logon {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 88rpx;
				background-color: #F8C008;
				border-radius: 16rpx;
				color: #333333;
				font-size: 32rpx;
				font-weight: bold;
			}

			.logonWX {
				display: flex;
				align-items: center;
				justify-content: center;
				// height: 88rpx;
				background-color: #fff;
				border: none !important;
				border-radius: 16rpx;
				color: #ffffff;
				font-size: 32rpx;
			}

			.logonWX[disabled] {
				background-color: #BEEDC7;
			}
		}

		.privacy-box {
			font-size: 24rpx;
			padding: 0 80rpx;
			display: flex;
			align-items: center;

			image {
				width: 28rpx;
				height: 28rpx;
				margin-right: 8rpx;
			}

			.privacy-text {
				color: #F8C008;

				vertical-align: top;
			}
		}
	}

	.footer {
		padding: 48rpx 80rpx 72rpx;
	}

	.back_extend {
		//position: fixed;
		//top: 50px;
		//left: 10px;
		//font-size: 26rpx;
		//color: #999;
	}

	.wx-login-tip {
		display: flex;
		align-items: center;
		width: 590rpx;
		margin: 0 auto;
		justify-content: space-between;

		.login-line {
			width: 193rpx;
			height: 1rpx;
			background-color: #F1F3F8;
		}

		.wx-tip {
			font-size: 28rpx;
			line-height: 44rpx;
			color: #999;
			flex: 1;
			width: 100rpx;
			text-align: center;
			display: block;
		}
	}

	.wx-login-btn {
		width: 590rpx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 32rpx;
		padding-bottom: 30rpx;

		.wx-icon {
			width: 92rpx;
			height: 92rpx;
		}
	}
</style>