158 lines
7.3 KiB
HTML
158 lines
7.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
<title>员工注册 - 宠小它</title>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f5f5f5; }
|
|
#app { max-width: 430px; margin: 0 auto; min-height: 100vh; }
|
|
|
|
.page { min-height: 100vh; background: linear-gradient(135deg, #07c160 0%, #10b76f 100%); padding: 60px 32px 32px; }
|
|
.back-btn { color: #fff; font-size: 14px; cursor: pointer; margin-bottom: 32px; opacity: 0.8; }
|
|
.back-btn:active { opacity: 0.6; }
|
|
.title { font-size: 26px; font-weight: 700; color: #fff; margin-bottom: 8px; }
|
|
.subtitle { font-size: 14px; color: rgba(255,255,255,0.7); margin-bottom: 40px; }
|
|
|
|
.form-card { background: #fff; border-radius: 16px; padding: 32px 24px; }
|
|
.form-group { margin-bottom: 20px; }
|
|
.form-label { font-size: 14px; color: #333; font-weight: 500; margin-bottom: 8px; display: block; }
|
|
.form-input { width: 100%; height: 48px; border: 1px solid #eee; border-radius: 8px; padding: 0 16px; font-size: 15px; outline: none; box-sizing: border-box; }
|
|
.form-input:focus { border-color: #07c160; }
|
|
|
|
.invite-hint { background: #f0f9f4; border: 1px solid #b7eb8f; border-radius: 8px; padding: 12px; margin-bottom: 20px; font-size: 13px; color: #52c41a; }
|
|
|
|
.submit-btn { width: 100%; height: 48px; background: #07c160; color: #fff; border: none; border-radius: 8px; font-size: 16px; font-weight: 500; cursor: pointer; margin-top: 8px; }
|
|
.submit-btn:active { opacity: 0.9; }
|
|
.submit-btn:disabled { background: #ccc; cursor: not-allowed; }
|
|
|
|
.to-login { text-align: center; margin-top: 24px; font-size: 14px; color: #999; }
|
|
.to-login a { color: #07c160; text-decoration: none; cursor: pointer; }
|
|
|
|
.success-card { background: #fff; border-radius: 16px; padding: 40px 24px; text-align: center; }
|
|
.success-icon { font-size: 60px; margin-bottom: 16px; }
|
|
.success-title { font-size: 20px; font-weight: 600; color: #333; margin-bottom: 8px; }
|
|
.success-sub { font-size: 14px; color: #999; margin-bottom: 32px; }
|
|
.success-info { background: #f9f9f9; border-radius: 12px; padding: 20px; text-align: left; margin-bottom: 24px; }
|
|
.info-item { display: flex; justify-content: space-between; padding: 6px 0; font-size: 14px; }
|
|
.info-item .label { color: #999; }
|
|
.info-item .value { color: #333; font-weight: 500; }
|
|
|
|
.to-login-btn { width: 100%; height: 48px; background: #07c160; color: #fff; border: none; border-radius: 8px; font-size: 16px; font-weight: 500; cursor: pointer; margin-top: 16px; }
|
|
|
|
.toast { position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,0.7);color:#fff;padding:12px 24px;border-radius:8px;font-size:14px;z-index:1000; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<div v-if="!registered" class="page">
|
|
<div class="back-btn" @click="goLogin">← 返回登录</div>
|
|
<div class="title">员工注册</div>
|
|
<div class="subtitle">加入宠物店团队</div>
|
|
|
|
<div class="form-card">
|
|
<div class="invite-hint">请输入店长提供的邀请码加入团队</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">邀请码</label>
|
|
<input class="form-input" v-model="form.inviteCode" placeholder="请输入8位邀请码" maxlength="8" style="text-transform:uppercase;" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">您的姓名</label>
|
|
<input class="form-input" v-model="form.name" placeholder="请输入您的姓名" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">手机号</label>
|
|
<input class="form-input" type="tel" v-model="form.phone" placeholder="请输入手机号" maxlength="11" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">登录密码</label>
|
|
<input class="form-input" type="password" v-model="form.password" placeholder="请设置登录密码" />
|
|
</div>
|
|
<button class="submit-btn" :disabled="loading" @click="handleRegister">
|
|
{{ loading ? '注册中...' : '注册' }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-else class="page">
|
|
<div class="back-btn" style="opacity:0;">←</div>
|
|
<div class="title">注册成功</div>
|
|
<div class="subtitle">欢迎加入 {{ result.store ? result.store.name : '' }}</div>
|
|
|
|
<div class="success-card">
|
|
<div class="success-icon">✅</div>
|
|
<div class="success-title">注册成功</div>
|
|
<div class="success-sub">您已成功加入团队，可以使用手机号和密码登录了</div>
|
|
<div class="success-info">
|
|
<div class="info-item">
|
|
<span class="label">所属店铺</span>
|
|
<span class="value">{{ result.store ? result.store.name : '-' }}</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<span class="label">您的账号</span>
|
|
<span class="value">{{ result.user ? result.user.phone : '-' }}</span>
|
|
</div>
|
|
</div>
|
|
<button class="to-login-btn" @click="goLogin">前往登录 →</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="toast.show" class="toast">{{ toast.text }}</div>
|
|
</div>
|
|
|
|
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
|
|
<script>
|
|
const { createApp, ref } = Vue
|
|
const BASE = 'http://localhost:8080'
|
|
|
|
createApp({
|
|
setup() {
|
|
const form = ref({ inviteCode: '', name: '', phone: '', password: '' })
|
|
const loading = ref(false)
|
|
const registered = ref(false)
|
|
const result = ref({})
|
|
const toast = ref({ show: false, text: '' })
|
|
|
|
const showToast = (text) => {
|
|
toast.value = { show: true, text }
|
|
setTimeout(() => { toast.value.show = false }, 1500)
|
|
}
|
|
|
|
const handleRegister = async () => {
|
|
const f = form.value
|
|
if (!f.inviteCode || f.inviteCode.length !== 8) return showToast('请输入8位邀请码')
|
|
if (!f.name) return showToast('请输入您的姓名')
|
|
if (!f.phone || f.phone.length !== 11) return showToast('请输入正确的手机号')
|
|
if (!f.password || f.password.length < 6) return showToast('密码至少6位')
|
|
|
|
loading.value = true
|
|
try {
|
|
const res = await fetch(`${BASE}/api/user/register-staff`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(f)
|
|
})
|
|
const data = await res.json()
|
|
if (data.code === 200) {
|
|
result.value = data.data
|
|
registered.value = true
|
|
} else {
|
|
showToast(data.message || '注册失败')
|
|
}
|
|
} catch (e) {
|
|
showToast('网络错误，请稍后重试')
|
|
}
|
|
loading.value = false
|
|
}
|
|
|
|
const goLogin = () => { window.location.href = 'login.html' }
|
|
|
|
return { form, loading, registered, result, toast, handleRegister, goLogin }
|
|
}
|
|
}).mount('#app')
|
|
</script>
|
|
</body>
|
|
</html>
|