huasheng-erp-order-system-applet/pages/login/components/WechatLogin.vue

<template>
	<view class="wechat-login-container">
		<view class="content-wrapper">
			<view class="action-section">
				<button class="main-btn" @click="startLoginFlow">
					<image class="btn-icon" :src="assets.wechat" mode="aspectFit"></image>
					<text>授权手机号码登录</text>
				</button>

				<view class="agreement-box">
					<label class="checkbox-label" @click="toggleAgreed">
						<checkbox :checked="isAgreed" color="#C1001C" style="transform:scale(0.7)" />
						<text class="agreement-text">我已阅读并同意
							<text class="link" @click.stop="showProtocol('user')">《用户协议》</text> 与
							<text class="link" @click.stop="showProtocol('privacy')">《隐私政策》</text>
						</text>
					</label>
				</view>
			</view>

			<view class="footer-section">
				<text>© 2026 ERP Order System. All Rights Reserved.</text>
			</view>
		</view>

		<view class="global-mask" v-if="activeModal" @click="closeAllModals"></view>

		<!-- 协议拦截确认弹窗 -->
		<view class="confirm-modal center-card" v-if="activeModal === 'confirm'">
			<view class="card-title">服务协议提示</view>
			<view class="card-body">请您阅读并同意我们的协议内容，以便为您提供更安全的服务体验。</view>
			<view class="card-footer-btns">
				<view class="btn-item cancel" @click="activeModal = ''">拒绝</view>
				<view class="btn-item agree" @click="agreeAndClose">同意并继续</view>
			</view>
		</view>

		<!-- 头像昵称授权弹窗 -->
		<view class="simulated-profile-pop bottom-pop" v-if="activeModal === 'profile'">
			<view class="pop-header-bar">
				<text class="pop-cancel" @click="activeModal = ''">取消</text>
				<text class="pop-main-title">获取头像昵称</text>
				<text class="pop-done" @click="activeModal = 'phone'">保存</text>
			</view>
			<view class="profile-edit-content">
				<view class="avatar-edit-box">
					<button class="avatar-wrapper-btn" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
						<image class="current-avatar"
							:src="avatarPreviewUrl || 'https://img.icons8.com/color/144/user.png'"></image>
						<view class="camera-icon">
							<image src="https://img.icons8.com/ios-glyphs/30/999999/camera.png" mode="aspectFit">
							</image>
						</view>
					</button>
					<text class="edit-hint">点击修改头像</text>
				</view>
				<view class="nickname-edit-box">
					<text class="label">昵称</text>
					<input class="nickname-input" type="nickname" :value="userName" placeholder="请输入昵称"
						@blur="onNicknameBlur" @input="onNicknameChange" />
				</view>
				<view class="auth-notice-box">
					<text class="notice-text">授权后，开发者将获得您的头像和昵称，用于展示您的个人资料。</text>
				</view>
			</view>
			<view class="bottom-action">
				<button class="confirm-btn-fixed" @click="goToPhoneAuth">确定</button>
			</view>
		</view>

		<!-- 手机号授权弹窗 -->
		<view class="phone-auth-pop bottom-pop" v-if="activeModal === 'phone'">
			<view class="p-header">
				<image class="p-mini-logo" :src="assets.logo" mode="aspectFill"></image>
				<text class="p-app-name">ERP 智能下单系统 申请</text>
			</view>
			<view class="p-body">
				<text class="p-title">获取您的手机号</text>
				<text class="p-phone-hint">是否允许我们获取您的手机号，用于登录和订单通知？</text>
			</view>
			<view class="p-footer-btns">
				<button class="p-btn-fixed p-deny" @click="activeModal = ''">拒绝</button>
				<button class="p-btn-fixed p-allow" open-type="getPhoneNumber"
					@getphonenumber="handleGetPhoneNumber">允许</button>
			</view>
		</view>

		<!-- 协议富文本弹窗 -->
		<view class="protocol-modal center-card" v-if="activeModal === 'protocol'">
			<view class="p-pop-header">
				<text class="p-pop-title">{{ currentProtocol.title }}</text>
				<text class="p-pop-close" @click="activeModal = ''">×</text>
			</view>
			<scroll-view scroll-y class="p-pop-scroll">
				<view class="rich-text-wrapper">
					<rich-text :nodes="currentProtocol.content"></rich-text>
				</view>
			</scroll-view>
			<view class="p-pop-footer">
				<button class="p-pop-btn" @click="activeModal = ''">我已了解</button>
			</view>
		</view>
	</view>
</template>

<script>
import assets from '@/utils/assets.js';
import { getAgreement } from '@/api/system/agreement.js';
import { login, getWechatPhone, wechatRegister } from '@/api/auth.js';
import { uploadFile } from '@/api/resource/oss.js';

export default {
	name: 'WechatLogin',
	emits: ['login-success'],
	data() {
		return {
			assets,
			isAgreed: false,
			activeModal: '',
			avatarOssId: null,
			avatarPreviewUrl: '',
			userName: '微信用户',
			currentProtocol: { title: '', content: '' },
			protocols: {
				user: { title: '', content: '' },
				privacy: { title: '', content: '' }
			},
			openId: '',
			unionId: '',
			phoneNumber: ''
		}
	},
	methods: {
		toggleAgreed() {
			this.isAgreed = !this.isAgreed;
		},
		startLoginFlow() {
			if (!this.isAgreed) {
				this.activeModal = 'confirm';
			} else {
				this.performLogin();
			}
		},
		agreeAndClose() {
			this.isAgreed = true;
			this.activeModal = '';
		},
		async performLogin() {
			try {
				uni.showLoading({ title: '登录中...' });

				const loginRes = await new Promise((resolve, reject) => {
					wx.login({ success: resolve, fail: reject });
				});

				if (!loginRes.code) {
					uni.hideLoading();
					uni.showToast({ title: '获取登录凭证失败', icon: 'none' });
					return;
				}

				const res = await login({ loginCode: loginRes.code, grantType: 'wechatApplet' });
				uni.hideLoading();

				if (res.data && res.data.access_token) {
					uni.setStorageSync('token', res.data.access_token);
					uni.setStorageSync('isLogin', true);
					uni.showToast({ title: '登录成功', icon: 'success' });
					setTimeout(() => {
						uni.reLaunch({ url: '/pages/order/index' });
					}, 1000);
				} else if (res.data && res.data.openid) {
					this.openId = res.data.openid;
					this.unionId = res.data.unionid || '';
					this.activeModal = 'profile';
				} else {
					uni.showToast({ title: '登录失败', icon: 'none' });
				}
			} catch (error) {
				uni.hideLoading();
				console.error('登录错误：', error);
				uni.showToast({ title: error || '登录失败', icon: 'none' });
			}
		},
		async onChooseAvatar(e) {
			const tempPath = e.detail.avatarUrl;
			console.log('[微信信息] 头像临时路径:', tempPath);
			this.avatarPreviewUrl = tempPath;
			try {
				uni.showLoading({ title: '上传头像...' });
				const res = await uploadFile(tempPath);
				uni.hideLoading();
				this.avatarOssId = res.ossId;
				this.avatarPreviewUrl = res.url;
				console.log('[微信信息] 头像OSS上传成功, ossId:', this.avatarOssId);
			} catch (err) {
				uni.hideLoading();
				console.error('[微信信息] 头像上传失败:', err);
				uni.showToast({ title: err || '头像上传失败', icon: 'none' });
			}
		},
		onNicknameBlur(e) {
			this.userName = e.detail.value;
			console.log('[微信信息] 昵称(blur):', this.userName);
		},
		onNicknameChange(e) {
			this.userName = e.detail.value;
			console.log('[微信信息] 昵称(input):', this.userName);
		},
		async goToPhoneAuth() {
			this.phoneNumber = '';
			this.activeModal = 'phone';
		},
		async handleGetPhoneNumber(e) {
			if (e.detail.errMsg !== 'getPhoneNumber:ok') {
				uni.showToast({ title: '获取手机号失败，请重试', icon: 'none' });
				return;
			}

			try {
				uni.showLoading({ title: '获取手机号中...' });

				const phoneRes = await getWechatPhone({
					phoneCode: e.detail.code,
					openId: this.openId
				});

				uni.hideLoading();

				this.phoneNumber = phoneRes.data;

				uni.showLoading({ title: '注册中...' });

				const registerRes = await wechatRegister({
					openId: this.openId,
					unionId: this.unionId,
					phone: this.phoneNumber,
					nickname: this.userName,
					avatar: this.avatarOssId
				});

				uni.hideLoading();

				this.performLogin();
			} catch (error) {
				uni.hideLoading();
				console.error('注册错误：', error);
				uni.showToast({ title: error || '注册失败', icon: 'none' });
			}
		},
		showProtocol(type) {
			this.currentProtocol = this.protocols[type];
			this.activeModal = 'protocol';
		},
		closeAllModals() {
			this.activeModal = '';
		}
	},
	async mounted() {
		try {
			const [userRes, privacyRes] = await Promise.all([
				getAgreement(1),
				getAgreement(2)
			]);
			this.protocols.user = { title: userRes.data.title, content: userRes.data.content };
			this.protocols.privacy = { title: privacyRes.data.title, content: privacyRes.data.content };
		} catch (e) {
			console.error('[协议] 加载失败', e);
			uni.showToast({ title: e || '加载协议失败', icon: 'none' });
		}
	}
}
</script>

<style scoped>
.wechat-login-container {
	width: 100%;
	position: relative;
	display: flex;
	flex-direction: column;
}

.content-wrapper {
	position: relative;
	z-index: 2;
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: 40rpx 80rpx 0;
	box-sizing: border-box;
}

.main-btn {
	width: 100%;
	height: 100rpx;
	background: linear-gradient(135deg, #C1001C 0%, #FF4D4F 100%);
	border-radius: 50rpx;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32rpx;
	font-weight: bold;
	box-shadow: 0 12rpx 30rpx rgba(193, 0, 28, 0.2);
	border: none;
	margin-bottom: 40rpx;
}

.btn-icon {
	width: 48rpx;
	height: 48rpx;
	margin-right: 16rpx;
}

.agreement-text {
	font-size: 24rpx;
	color: #999;
}

.link {
	color: #C1001C;
	margin: 0 4rpx;
	font-weight: 500;
}

.footer-section {
	margin-top: auto;
	padding-bottom: 60rpx;
	text-align: center;
	font-size: 20rpx;
	color: #dcdcdc;
}

/* ========== 弹窗通用 ========== */
.global-mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 998;
}

.center-card {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 620rpx;
	background: #fff;
	border-radius: 32rpx;
	z-index: 1000;
	box-shadow: 0 30rpx 80rpx rgba(0, 0, 0, 0.15);
	padding: 50rpx 40rpx;
	display: flex;
	flex-direction: column;
}

.bottom-pop {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: #fff;
	border-radius: 40rpx 40rpx 0 0;
	z-index: 1001;
	padding: 40rpx;
	padding-bottom: calc(50rpx + env(safe-area-inset-bottom));
	box-shadow: 0 -10rpx 40rpx rgba(0, 0, 0, 0.05);
}

button {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
	line-height: normal !important;
}

button::after {
	border: none;
}

/* ========== 协议拦截弹窗 ========== */
.card-title {
	font-size: 38rpx;
	font-weight: bold;
	text-align: center;
	margin-bottom: 30rpx;
}

.card-body {
	font-size: 28rpx;
	color: #666;
	line-height: 1.6;
	text-align: center;
	margin-bottom: 50rpx;
}

.card-footer-btns {
	display: flex;
	gap: 24rpx;
}

.btn-item {
	flex: 1;
	height: 90rpx;
	border-radius: 45rpx;
	font-size: 30rpx;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: center;
	line-height: 90rpx;
}

.btn-item.cancel {
	background: #f8f8f8;
	color: #999;
}

.btn-item.agree {
	background: #C1001C;
	color: #fff;
	font-weight: bold;
}

/* ========== 协议内容弹窗 ========== */
.p-pop-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30rpx;
}

.p-pop-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #1a1a1a;
}

.p-pop-close {
	font-size: 48rpx;
	color: #ccc;
	padding: 10rpx;
}

.p-pop-scroll {
	max-height: 55vh;
	margin-bottom: 30rpx;
}

.rich-text-wrapper {
	padding: 10rpx 0;
	color: #444;
	font-size: 28rpx;
}

.p-pop-footer {
	padding-top: 20rpx;
}

.p-pop-btn {
	width: 100%;
	height: 90rpx;
	background: #C1001C;
	color: #fff;
	border-radius: 45rpx;
	font-size: 30rpx;
	font-weight: bold;
}

/* ========== 头像授权弹窗 ========== */
.pop-header-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 60rpx;
}

.pop-cancel {
	font-size: 30rpx;
	color: #999;
}

.pop-main-title {
	font-size: 32rpx;
	font-weight: bold;
}

.pop-done {
	font-size: 30rpx;
	color: #C1001C;
	font-weight: bold;
}

.profile-edit-content {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.avatar-wrapper-btn {
	width: 170rpx;
	height: 170rpx;
	border-radius: 85rpx;
	background: #f8f8f8;
	position: relative;
	margin-bottom: 24rpx;
	padding: 0 !important;
	overflow: visible;
	display: flex !important;
	align-items: center;
	justify-content: center;
	border: none;
}

.current-avatar {
	width: 100%;
	height: 100%;
	border-radius: 85rpx;
	border: 4rpx solid #fff;
	box-shadow: 0 4rpx 15rpx rgba(0, 0, 0, 0.05);
}

.camera-icon {
	position: absolute;
	bottom: 0;
	right: 0;
	background: #fff;
	width: 56rpx;
	height: 56rpx;
	border-radius: 28rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.12);
	z-index: 5;
}

.camera-icon image {
	width: 30rpx;
	height: 30rpx;
}

.edit-hint {
	font-size: 24rpx;
	color: #999;
	margin-bottom: 70rpx;
	width: 100%;
	text-align: center;
	display: block;
}

.nickname-edit-box {
	width: 100%;
	display: flex;
	align-items: center;
	padding: 36rpx 0;
	border-top: 1rpx solid #f0f0f0;
	border-bottom: 1rpx solid #f0f0f0;
	margin-bottom: 40rpx;
}

.nickname-edit-box .label {
	width: 130rpx;
	font-size: 32rpx;
}

.nickname-input {
	flex: 1;
	font-size: 32rpx;
}

.notice-text {
	font-size: 24rpx;
	color: #bfbfbf;
	text-align: center;
	display: block;
	margin-bottom: 60rpx;
}

.confirm-btn-fixed {
	width: 100%;
	height: 96rpx;
	background: #C1001C;
	color: #fff;
	border-radius: 16rpx;
	font-size: 32rpx;
	font-weight: bold;
}

/* ========== 手机号授权弹窗 ========== */
.p-header {
	display: flex;
	align-items: center;
	margin-bottom: 50rpx;
}

.p-mini-logo {
	width: 44rpx;
	height: 44rpx;
	border-radius: 8rpx;
	margin-right: 16rpx;
}

.p-app-name {
	font-size: 28rpx;
	color: #7f7f7f;
}

.p-title {
	font-size: 40rpx;
	font-weight: bold;
	color: #000;
	margin-bottom: 44rpx;
	display: block;
}

.p-phone-hint {
	font-size: 30rpx;
	color: #666;
	line-height: 1.5;
	display: block;
	margin-bottom: 60rpx;
}

.p-number-card {
	background: #fbfbfb;
	padding: 36rpx;
	border-radius: 20rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30rpx;
	border: 1rpx solid #f0f0f0;
}

.p-real-num {
	font-size: 36rpx;
	font-weight: bold;
	color: #1a1a1a;
	display: block;
}

.p-num-hint {
	font-size: 24rpx;
	color: #999;
}

.p-other-link {
	font-size: 28rpx;
	color: #576b95;
	display: block;
	margin-bottom: 60rpx;
}

.p-footer-btns {
	display: flex;
	gap: 30rpx;
}

.p-btn-fixed {
	flex: 1;
	height: 96rpx;
	border-radius: 16rpx;
	font-size: 32rpx;
	border: none;
}

.p-deny {
	background: #f2f2f2;
	color: #C1001C;
}

.p-allow {
	background: #C1001C;
	color: #fff;
	font-weight: bold;
}
</style>