180 lines
7.8 KiB
HTML
180 lines
7.8 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; }
|
|
|
|
.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; }
|
|
.copy-btn { width: 100%; height: 44px; background: #f5f5f5; color: #07c160; border: 1px solid #07c160; border-radius: 8px; font-size: 14px; cursor: pointer; }
|
|
.copy-btn:active { opacity: 0.8; }
|
|
|
|
.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; }
|
|
</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="form-group">
|
|
<label class="form-label">店铺名称</label>
|
|
<input class="form-input" v-model="form.storeName" placeholder="请输入店铺名称" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">您的姓名</label>
|
|
<input class="form-input" v-model="form.bossName" 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">您的店铺已创建完成</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.name }}</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<span class="label">您的账号</span>
|
|
<span class="value">{{ result.user.phone }}</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<span class="label">初始密码</span>
|
|
<span class="value">{{ result.user.password }}</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<span class="label">员工邀请码</span>
|
|
<span class="value">{{ result.store.inviteCode }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<button class="copy-btn" @click="copyCode">📋 复制员工邀请码</button>
|
|
<button class="to-login-btn" @click="goLogin">前往登录 →</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Toast -->
|
|
<div v-if="toast.show" style="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;">
|
|
{{ 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({ storeName: '', bossName: '', phone: '', password: '' })
|
|
const loading = ref(false)
|
|
const registered = ref(false)
|
|
const result = ref({ store: {}, user: {} })
|
|
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.storeName) return showToast('请输入店铺名称')
|
|
if (!f.bossName) 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-boss`, {
|
|
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 copyCode = () => {
|
|
navigator.clipboard.writeText(result.value.store.inviteCode)
|
|
showToast('邀请码已复制')
|
|
}
|
|
|
|
const goLogin = () => {
|
|
window.location.href = 'login.html'
|
|
}
|
|
|
|
return { form, loading, registered, result, toast, handleRegister, copyCode, goLogin }
|
|
}
|
|
}).mount('#app')
|
|
</script>
|
|
</body>
|
|
</html>
|