pet-system-merchant-app/pages/login/register.vue

<template>
	<view class="login-page">
		<nav-bar title="注册" bgColor="transparent" color="#fff" :showBack="false"></nav-bar>

		<!-- 顶部渐变装饰区 -->
		<view class="hero-bg">
			<view class="deco-circle c1"></view>
			<view class="deco-circle c2"></view>
			<view class="deco-circle c3"></view>

			<!-- 返回按钮 -->
			<view class="back-btn" @click="onClickLeft">
				<uni-icons type="left" size="22" color="#fff"></uni-icons>
			</view>

			<!-- Logo 区域 -->
			<view class="hero-content">
				<text class="brand-desc">开启您的好萌友服务之旅</text>
			</view>
		</view>

		<!-- 表单白色卡片区 -->
		<view class="form-card">

			<!-- 头像上传 -->
			<view class="avatar-upload-wrap" @click="onChooseAvatar">
				<image v-if="avatar" :src="avatar" class="avatar-image" mode="aspectFill"></image>
				<view v-else class="avatar-placeholder">
					<uni-icons type="camera-filled" size="32" color="#ccc"></uni-icons>
					<text class="avatar-text">上传头像</text>
				</view>
			</view>

			<!-- 商户名称 -->
			<view class="input-group">
				<view class="input-icon-wrap">
					<uni-icons type="shop" size="18" color="#ffc837"></uni-icons>
				</view>
				<input class="custom-input" v-model="companyName" placeholder="请输入商户名称"
					placeholder-class="input-placeholder" />
			</view>

			<!-- 用户账号 -->
			<view class="input-group">
				<view class="input-icon-wrap">
					<uni-icons type="person" size="18" color="#ffc837"></uni-icons>
				</view>
				<input class="custom-input" v-model="username" placeholder="请输入用户账号"
					placeholder-class="input-placeholder" />
			</view>

			<!-- 姓名 -->
			<view class="input-group">
				<view class="input-icon-wrap">
					<uni-icons type="staff" size="18" color="#ffc837"></uni-icons>
				</view>
				<input class="custom-input" v-model="name" placeholder="请输入姓名" placeholder-class="input-placeholder" />
			</view>

			<!-- 邮箱 -->
			<view class="input-group">
				<view class="input-icon-wrap">
					<uni-icons type="email" size="18" color="#ffc837"></uni-icons>
				</view>
				<input class="custom-input" v-model="email" placeholder="请输入邮箱" placeholder-class="input-placeholder" />
			</view>

			<!-- 密码 -->
			<view class="input-group">
				<view class="input-icon-wrap">
					<uni-icons type="locked" size="18" color="#ffc837"></uni-icons>
				</view>
				<input class="custom-input" v-model="password" type="password" placeholder="请输入密码"
					placeholder-class="input-placeholder" />
			</view>

			<!-- 确认密码 -->
			<view class="input-group">
				<view class="input-icon-wrap">
					<uni-icons type="locked" size="18" color="#ffc837"></uni-icons>
				</view>
				<input class="custom-input" v-model="confirmPassword" type="password" placeholder="请再次输入密码"
					placeholder-class="input-placeholder" />
			</view>


			<!-- 协议勾选 -->
			<view class="agreement-row">
				<checkbox-group @change="onCheckChange">
					<label class="agree-label">
						<checkbox :checked="checked" color="#ffc837" style="transform: scale(0.7);" />
						<text class="agree-text">我已阅读并同意</text>
						<text class="text-link" @click.stop="showAgreement(2)">《隐私政策》</text>
						<text class="agree-text">和</text>
						<text class="text-link" @click.stop="showAgreement(1)">《用户服务协议》</text>
					</label>
				</checkbox-group>
			</view>

			<!-- 提交注册按钮 -->
			<button class="login-btn" @click="onSubmit">提交注册申请</button>

			<!-- 返回登录 -->
			<view class="register-redirect-row">
				<text class="redirect-hint">已有账号？</text>
				<text class="redirect-action" @click="goToLogin">立即登录</text>
			</view>
		</view>

		<!-- 自定义权限弹窗 -->
		<view class="permission-modal-mask" v-if="showPermissionModal" @touchmove.stop.prevent>
			<view class="permission-modal-content">
				<view class="permission-modal-header">
					<view class="shield-icon-box">
						<uni-icons type="info-filled" size="30" color="#ff9500"></uni-icons>
					</view>
					<text class="permission-modal-title">权限申请提示</text>
				</view>
				
				<view class="permission-modal-body">
					<text class="permission-desc-main">为了正常更换头像，我们需要获取您的以下权限：</text>
					
					<view class="permission-list-box">
						<view class="permission-item-box">
							<view class="icon-circle">
								<uni-icons type="images-filled" size="20" color="#ff9500"></uni-icons>
							</view>
							<view class="item-text-box">
								<text class="item-name-text">存储与相册权限</text>
								<text class="item-desc-text">用于从相册中选择已有照片作为头像</text>
							</view>
						</view>
						
						<view class="permission-item-box">
							<view class="icon-circle">
								<uni-icons type="camera-filled" size="20" color="#ff9500"></uni-icons>
							</view>
							<view class="item-text-box">
								<text class="item-name-text">相机拍照权限</text>
								<text class="item-desc-text">用于拍摄新照片并上传作为头像</text>
							</view>
						</view>
					</view>
				</view>
				
				<view class="permission-modal-footer">
					<button class="btn-decline" @click="declinePermission">暂不授权</button>
					<button class="btn-grant" @click="confirmPermission">同意并授权</button>
				</view>
			</view>
		</view>

	</view>
</template>

<script setup>
import { ref } from 'vue'
import navBar from '@/components/nav-bar/index.vue'
import { register } from '@/api/auth'

const avatar = ref('')
const companyName = ref('')
const username = ref('')
const name = ref('')
const email = ref('')
const password = ref('')
const confirmPassword = ref('')
const checked = ref(false)
const showPermissionModal = ref(false)


const onChooseAvatar = () => {
	const hasShown = uni.getStorageSync('has_shown_avatar_permission')
	if (!hasShown) {
		showPermissionModal.value = true
	} else {
		chooseAvatarImage()
	}
}

const chooseAvatarImage = () => {
	uni.chooseImage({
		count: 1,
		sizeType: ['compressed'],
		sourceType: ['album', 'camera'],
		success: (res) => {
			avatar.value = res.tempFilePaths[0]
		}
	})
}

const confirmPermission = () => {
	showPermissionModal.value = false
	uni.setStorageSync('has_shown_avatar_permission', true)
	chooseAvatarImage()
}

const declinePermission = () => {
	showPermissionModal.value = false
	uni.setStorageSync('has_shown_avatar_permission', true)
}

const onCheckChange = () => {
	checked.value = !checked.value
}

const goToLogin = () => {
	uni.reLaunch({
		url: '/pages/login/index'
	})
}

const onClickLeft = () => {
	uni.navigateBack({
		fail: () => {
			goToLogin()
		}
	})
}

const showAgreement = (agreementId) => {
	const title = agreementId === 1 ? '用户服务协议' : '隐私政策'
	uni.navigateTo({
		url: `/pages/my/agreement/detail/index?id=${agreementId}&title=${encodeURIComponent(title)}`
	})
}

const onSubmit = async () => {
	// 1. 商户名称验证
	if (!companyName.value) {
		uni.showToast({ title: '请输入商户名称', icon: 'none' })
		return
	}
	if (companyName.value.length < 2 || companyName.value.length > 50) {
		uni.showToast({ title: '商户名称长度需在 2 到 50 个字符之间', icon: 'none' })
		return
	}

	// 2. 用户账号验证
	if (!username.value) {
		uni.showToast({ title: '请输入用户账号', icon: 'none' })
		return
	}
	const usernameRegex = /^[a-zA-Z0-9_-]{4,20}$/
	if (!usernameRegex.test(username.value)) {
		uni.showToast({ title: '账号必须为 4 到 20 位字母、数字、下划线或减号', icon: 'none' })
		return
	}

	// 3. 姓名验证
	if (!name.value) {
		uni.showToast({ title: '请输入姓名', icon: 'none' })
		return
	}
	if (name.value.length < 2 || name.value.length > 20) {
		uni.showToast({ title: '姓名长度需在 2 到 20 个字符之间', icon: 'none' })
		return
	}

	// 4. 邮箱验证
	if (!email.value) {
		uni.showToast({ title: '请输入邮箱', icon: 'none' })
		return
	}
	const emailRegex = /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/
	if (!emailRegex.test(email.value)) {
		uni.showToast({ title: '请输入正确的邮箱格式', icon: 'none' })
		return
	}

	// 5. 密码验证
	if (!password.value) {
		uni.showToast({ title: '请输入密码', icon: 'none' })
		return
	}
	if (password.value.length < 6 || password.value.length > 20) {
		uni.showToast({ title: '密码长度需在 6 到 20 个字符之间', icon: 'none' })
		return
	}

	// 6. 确认密码验证
	if (!confirmPassword.value) {
		uni.showToast({ title: '请再次输入密码', icon: 'none' })
		return
	}
	if (password.value !== confirmPassword.value) {
		uni.showToast({ title: '两次输入的密码不一致', icon: 'none' })
		return
	}

	// 7. 协议勾选验证
	if (!checked.value) {
		uni.showToast({ title: '请先阅读并勾选协议', icon: 'none' })
		return
	}

	try {
		uni.showLoading({ title: '提交申请中...' })
		await register({
			avatar: avatar.value,
			companyName: companyName.value,
			username: username.value,
			name: name.value,
			email: email.value,
			password: password.value,
			confirmPassword: confirmPassword.value
		})

		uni.hideLoading()
		uni.showToast({
			title: '提交成功',
			icon: 'success'
		})

		// 缓存商户名称和提交时间，供审核界面展示使用
		uni.setStorageSync('registered_merchant', companyName.value)
		uni.setStorageSync('registered_time', new Date().toLocaleString())

		setTimeout(() => {
			uni.reLaunch({
				url: '/pages/login/review'
			})
		}, 1000)
	} catch (error) {
		console.error('Register error:', error)
		uni.hideLoading()
		setTimeout(() => {
			uni.showToast({ title: typeof error === 'string' ? error : '注册提交失败', icon: 'none' })
		}, 100)
	}
}


</script>

<style lang="scss" scoped>
.login-page {
	min-height: 100vh;
	background: #f2f3f7;
	display: flex;
	flex-direction: column;
}

:deep(.nav-bar) {
	position: absolute !important;
}

.back-btn {
	position: absolute;
	top: calc(var(--status-bar-height, 44px) + 20rpx);
	left: 32rpx;
	width: 76rpx;
	height: 76rpx;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.35);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
	z-index: 1000;
}

.hero-bg {
	background: linear-gradient(150deg, #ffd53f 0%, #ff9500 100%);
	padding: 0 40rpx 80rpx;
	position: relative;
	overflow: hidden;
	min-height: 300rpx;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.deco-circle {
	position: absolute;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
}

.c1 {
	width: 400rpx;
	height: 400rpx;
	top: -160rpx;
	right: -120rpx;
}

.c2 {
	width: 260rpx;
	height: 260rpx;
	top: 80rpx;
	left: -100rpx;
}

.c3 {
	width: 160rpx;
	height: 160rpx;
	bottom: 80rpx;
	right: 80rpx;
}

.hero-content {
	position: relative;
	z-index: 2;
}

.brand-desc {
	display: block;
	font-size: 28rpx;
	color: rgba(255, 255, 255, 0.8);
	letter-spacing: 2rpx;
}

.form-card {
	background: #fff;
	border-radius: 56rpx 56rpx 0 0;
	margin-top: -60rpx;
	padding: 60rpx 48rpx 60rpx;
	flex: 1;
	position: relative;
	z-index: 10;
}

.input-group {
	display: flex;
	align-items: center;
	background: #f5f6f8;
	border-radius: 28rpx;
	padding: 0 32rpx;
	height: 100rpx;
	margin-bottom: 32rpx;
}

.input-icon-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 20rpx;
}

.custom-input {
	flex: 1;
	height: 100rpx;
	font-size: 28rpx;
	color: #333;
}

.input-placeholder {
	color: #bbb;
}

.agreement-row {
	margin: 32rpx 0 48rpx 0;
}

.agree-label {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

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

.text-link {
	font-size: 24rpx;
	color: #ff9500;
}

.login-btn {
	width: 100%;
	height: 104rpx;
	font-size: 34rpx;
	font-weight: 700;
	color: #fff;
	background: linear-gradient(90deg, #ffd53f, #ff9500);
	border: none;
	border-radius: 52rpx;
	letter-spacing: 4rpx;

	&::after {
		border: none;
	}
}

.register-redirect-row {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 36rpx;
	font-size: 26rpx;
}

.redirect-hint {
	color: #999;
}

.redirect-action {
	color: #ff9500;
	font-weight: bold;
	margin-left: 12rpx;
	text-decoration: underline;
}

.custom-picker {
	flex: 1;
	height: 100rpx;
}

.picker-value {
	height: 100rpx;
	line-height: 100rpx;
	font-size: 28rpx;
	color: #333;
	text-align: left;
}

.picker-value.placeholder {
	color: #bbb;
}

.textarea-group {
	height: auto;
	align-items: flex-start;
	padding-top: 24rpx;
	padding-bottom: 24rpx;
}

.textarea-icon-wrap {
	margin-top: 4rpx;
}

.custom-textarea {
	flex: 1;
	height: 140rpx;
	font-size: 28rpx;
	color: #333;
	line-height: 1.4;
}

.avatar-upload-wrap {
	display: flex;
	justify-content: center;
	margin-bottom: 40rpx;
}

.avatar-placeholder {
	width: 160rpx;
	height: 160rpx;
	background: #f5f6f8;
	border-radius: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border: 2rpx dashed #d9d9d9;
}

.avatar-image {
	width: 160rpx;
	height: 160rpx;
	border-radius: 50%;
	border: 2rpx solid #eee;
}

.avatar-text {
	font-size: 20rpx;
	color: #999;
	margin-top: 8rpx;
}

/* ==================== 权限弹窗样式 ==================== */
.permission-modal-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10rpx);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 50rpx;
}

.permission-modal-content {
    width: 100%;
    background: #ffffff;
    border-radius: 36rpx;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.15);
    animation: modalFadeIn 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.permission-modal-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 48rpx 40rpx 20rpx;
    
    .shield-icon-box {
        width: 90rpx;
        height: 90rpx;
        border-radius: 45rpx;
        background: #fff8eb;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 16rpx;
    }
    
    .permission-modal-title {
        font-size: 32rpx;
        font-weight: 800;
        color: #1a1a1a;
    }
}

.permission-modal-body {
    padding: 0 40rpx 30rpx;
    
    .permission-desc-main {
        font-size: 26rpx;
        color: #666;
        line-height: 1.5;
        display: block;
        text-align: center;
        margin-bottom: 24rpx;
    }
}

.permission-list-box {
    display: flex;
    flex-direction: column;
    gap: 16rpx;
}

.permission-item-box {
    display: flex;
    align-items: center;
    background: #fdfdfd;
    border: 2rpx solid #f6f7f9;
    border-radius: 20rpx;
    padding: 20rpx;
    
    .icon-circle {
        width: 64rpx;
        height: 64rpx;
        border-radius: 32rpx;
        background: #fff5e6;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 16rpx;
        flex-shrink: 0;
    }
    
    .item-text-box {
        flex: 1;
        
        .item-name-text {
            font-size: 26rpx;
            font-weight: 700;
            color: #333;
            display: block;
            margin-bottom: 4rpx;
            text-align: left;
        }
          
        .item-desc-text {
            font-size: 22rpx;
            color: #999;
            display: block;
            text-align: left;
        }
    }
}

.permission-modal-footer {
    padding: 24rpx 40rpx 40rpx;
    display: flex;
    gap: 20rpx;
    border-top: 2rpx solid #f5f6f8;
    background: #ffffff;
}

.btn-decline {
    flex: 1;
    height: 80rpx;
    line-height: 80rpx;
    font-size: 26rpx;
    color: #666;
    background: #f5f6f8;
    border-radius: 40rpx;
    border: none;
    font-weight: 600;
    text-align: center;
    &::after { border: none; }
}

.btn-grant {
    flex: 1.2;
    height: 80rpx;
    line-height: 80rpx;
    font-size: 26rpx;
    color: #fff;
    background: linear-gradient(90deg, #ffd53f, #ff9500);
    border-radius: 40rpx;
    border: none;
    font-weight: 700;
    box-shadow: 0 6rpx 16rpx rgba(255, 149, 0, 0.2);
    text-align: center;
    &::after { border: none; }
}
</style>