feat: 商业认证+核算页面重写，管理入口移到用户菜单

商业认证: - 重写申请表单：认证类型、企业名称、联系电话、业务描述 - 状态栏样式：左侧彩色条（绿/橙/红） - 用户管理页：同一用户只显示一条，可展开历史查看拒绝原因 - 后端 API 补充 reject_reason 字段商业核算: - 成分表改为标准表格（精油/用量/单价/小计） - 总成本显示栏（绿色背景大字） - 定价字段放在成本下方管理入口: - 操作日志/Bug/用户管理从主 tab 栏移到管理员用户菜单 - 添加配方按钮对所有用户可见 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-10 10:01:36 +00:00
parent ad95ba7d1f
commit 418986e46c
7 changed files with 223 additions and 102 deletions
--- a/frontend/src/views/MyDiary.vue
+++ b/frontend/src/views/MyDiary.vue
@@ -241,56 +241,58 @@
      </div>

      <!-- Business Verification -->
-      <div ref="bizCertRef" class="section-card">
-        <h4>💼 商业认证</h4>
+      <div ref="bizCertRef" class="section-card biz-card">
+        <h4>🏢 商业用户认证</h4>

        <!-- 已认证 -->
-        <div v-if="auth.isBusiness" class="biz-status biz-approved">
-          <div class="biz-status-icon">✅</div>
-          <div class="biz-status-text">已认证商业用户</div>
+        <div v-if="auth.isBusiness" class="biz-status-bar biz-approved">
+          <span>✅ 已认证商业用户</span>
        </div>

        <!-- 审核中 -->
-        <template v-else-if="bizApp.status === 'pending'">
-          <div class="biz-status biz-pending">
-            <div class="biz-status-icon">⏳</div>
-            <div class="biz-status-text">认证申请审核中</div>
-            <div class="biz-status-detail">商户名：{{ bizApp.business_name }}</div>
-            <div class="biz-status-detail">提交时间：{{ formatDate(bizApp.created_at) }}</div>
-          </div>
-        </template>
+        <div v-else-if="bizApp.status === 'pending'" class="biz-status-bar biz-pending">
+          <span>⏳ 认证申请审核中</span>
+          <div class="biz-status-detail">商户名：{{ bizApp.business_name }} · 提交时间：{{ formatDate(bizApp.created_at) }}</div>
+        </div>

-        <!-- 被拒绝，可重新申请 -->
+        <!-- 被拒绝 -->
        <template v-else-if="bizApp.status === 'rejected'">
-          <div class="biz-status biz-rejected">
-            <div class="biz-status-icon">❌</div>
-            <div class="biz-status-text">认证申请未通过</div>
-            <div v-if="bizApp.reject_reason" class="biz-reject-reason">原因：{{ bizApp.reject_reason }}</div>
+          <div class="biz-status-bar biz-rejected">
+            <span>❌ 认证申请未通过</span>
+            <div v-if="bizApp.reject_reason" class="biz-status-detail">原因：{{ bizApp.reject_reason }}</div>
          </div>
          <p class="hint-text">你可以修改信息后重新申请。</p>
-          <div class="form-group">
-            <label>商户名称</label>
-            <input v-model="businessName" class="form-input" placeholder="你的商户/品牌名称" />
-          </div>
-          <div class="form-group">
-            <label>申请说明</label>
-            <textarea v-model="businessReason" class="form-textarea" rows="3" placeholder="请说明您的业务情况和申请理由..."></textarea>
-          </div>
-          <button class="btn-primary" @click="applyBusiness" :disabled="!businessName.trim()">重新申请</button>
        </template>

-        <!-- 首次申请 -->
-        <template v-else>
-          <p class="hint-text">申请商业认证后可使用商业核算功能，请填写以下信息。</p>
-          <div class="form-group">
-            <label>商户名称</label>
-            <input v-model="businessName" class="form-input" placeholder="你的商户/品牌名称" />
+        <!-- 申请表单（首次或被拒后重新申请） -->
+        <template v-if="!auth.isBusiness && bizApp.status !== 'pending'">
+          <div class="biz-form">
+            <div class="form-group">
+              <label class="form-label">认证类型 *</label>
+              <select v-model="bizType" class="form-select">
+                <option value="">请选择</option>
+                <option value="individual">个体经营户</option>
+                <option value="company">公司</option>
+                <option value="studio">工作室/美容院</option>
+                <option value="distributor">代理商</option>
+              </select>
+            </div>
+            <div class="form-group">
+              <label class="form-label">企业/商户名称 *</label>
+              <input v-model="businessName" class="form-input" placeholder="你的企业或品牌名称" />
+            </div>
+            <div class="form-group">
+              <label class="form-label">联系电话 *</label>
+              <input v-model="bizPhone" class="form-input" type="tel" placeholder="联系电话" />
+            </div>
+            <div class="form-group">
+              <label class="form-label">业务描述</label>
+              <textarea v-model="businessReason" class="form-textarea" rows="3" placeholder="描述你的业务范围和计划..."></textarea>
+            </div>
+            <div style="display:flex;gap:10px;margin-top:12px">
+              <button class="btn-primary" @click="applyBusiness" :disabled="!businessName.trim() || !bizType">💾 提交申请</button>
+            </div>
          </div>
-          <div class="form-group">
-            <label>申请说明</label>
-            <textarea v-model="businessReason" class="form-textarea" rows="3" placeholder="请说明您的业务情况和申请理由..."></textarea>
-          </div>
-          <button class="btn-primary" @click="applyBusiness" :disabled="!businessName.trim()">提交申请</button>
        </template>
      </div>
    </div>
@@ -341,6 +343,8 @@ const newPassword = ref('')
 const confirmPassword = ref('')
 const businessName = ref('')
 const businessReason = ref('')
+const bizType = ref('')
+const bizPhone = ref('')
 const bizApp = ref({ status: null })

 onMounted(async () => {
@@ -669,24 +673,30 @@ async function changePassword() {
 }

 async function applyBusiness() {
-  if (!businessName.value.trim()) {
-    ui.showToast('请填写商户名称')
+  if (!businessName.value.trim() || !bizType.value) {
+    ui.showToast('请填写必填项')
    return
  }
+  const typeLabels = { individual: '个体经营户', company: '公司', studio: '工作室/美容院', distributor: '代理商' }
+  const info = [
+    `认证类型：${typeLabels[bizType.value] || bizType.value}`,
+    bizPhone.value ? `联系电话：${bizPhone.value}` : '',
+    businessReason.value ? `业务描述：${businessReason.value}` : '',
+  ].filter(Boolean).join('\n')
  try {
    const res = await api('/api/business-apply', {
      method: 'POST',
      body: JSON.stringify({
        business_name: businessName.value.trim(),
-        document: businessReason.value.trim(),
+        document: info,
      }),
    })
    if (res.ok) {
      businessName.value = ''
      businessReason.value = ''
-      bizApp.value = { status: 'pending', business_name: businessName.value }
+      bizType.value = ''
+      bizPhone.value = ''
      ui.showToast('申请已提交，请等待管理员审核')
-      // Reload status
      const bizRes = await api('/api/my-business-application')
      if (bizRes.ok) bizApp.value = await bizRes.json()
    } else {
@@ -1147,19 +1157,27 @@ async function applyBusiness() {
  text-align: center;
 }

-.biz-status {
-  padding: 16px;
-  border-radius: 12px;
-  text-align: center;
+.biz-card { border-radius: 16px; }
+.biz-status-bar {
+  padding: 12px 16px;
+  border-radius: 10px;
+  font-size: 14px;
+  font-weight: 500;
  margin-bottom: 12px;
+  line-height: 1.6;
 }
-.biz-status-icon { font-size: 32px; margin-bottom: 8px; }
-.biz-status-text { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
-.biz-status-detail { font-size: 12px; color: #999; }
-.biz-approved { background: #e8f5e9; color: #2e7d5a; }
-.biz-pending { background: #fff8e1; color: #e65100; }
-.biz-rejected { background: #fce4ec; color: #c62828; }
-.biz-reject-reason { font-size: 13px; margin-top: 8px; padding: 8px 12px; background: rgba(0,0,0,0.05); border-radius: 8px; }
+.biz-status-bar.biz-approved { background: #e8f5e9; color: #2e7d32; border-left: 3px solid #4caf50; }
+.biz-status-bar.biz-pending { background: #fff3e0; color: #e65100; border-left: 3px solid #ff9800; }
+.biz-status-bar.biz-rejected { background: #ffebee; color: #c62828; border-left: 3px solid #f44336; }
+.biz-status-detail { font-size: 12px; margin-top: 4px; opacity: 0.8; }
+.biz-form { margin-top: 8px; }
+.biz-form .form-group { margin-bottom: 14px; }
+.biz-form .form-label { display: block; font-size: 13px; font-weight: 600; color: #3e3a44; margin-bottom: 6px; }
+.biz-form .form-select {
+  width: 100%; padding: 10px 14px; border: 1.5px solid #d4cfc7; border-radius: 10px;
+  font-size: 14px; font-family: inherit; background: #fff; outline: none; box-sizing: border-box;
+}
+.biz-form .form-select:focus { border-color: #7ec6a4; }

 /* Buttons */
 .btn-primary {