hfb_sys/frontend/src/features/admin/views/AdminMohongConfigView.vue

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { Upload } from '@element-plus/icons-vue'
import {
  fetchAdminMohongConfig,
  updateAdminMohongConfig,
  type MohongConfig,
} from '@/features/mohong/api/mohong'
import { uploadAdminFile } from '@/shared/api/files'
import { readError } from '@/shared/utils/error'

const loading = ref(false)
const saving = ref(false)
const form = reactive<MohongConfig>({
  default_qrcode_url: '',
  order_copy_template: '',
})

onMounted(load)

async function load() {
  loading.value = true
  try {
    const config = await fetchAdminMohongConfig()
    Object.assign(form, config)
  } catch (error) {
    ElMessage.error(readError(error, '加载配置失败'))
  } finally {
    loading.value = false
  }
}

async function handleSave() {
  saving.value = true
  try {
    const config = await updateAdminMohongConfig({
      default_qrcode_url: form.default_qrcode_url,
      order_copy_template: form.order_copy_template,
    })
    Object.assign(form, config)
    ElMessage.success('已保存')
  } catch (error) {
    ElMessage.error(readError(error, '保存失败'))
  } finally {
    saving.value = false
  }
}

async function uploadQrcode(file: File) {
  try {
    const uploaded = await uploadAdminFile(file, 'crash')
    form.default_qrcode_url = uploaded.url
    ElMessage.success('上传成功')
  } catch (error) {
    ElMessage.error(readError(error, '上传失败'))
  }
  return false
}
</script>

<template>
  <div v-loading="loading" class="admin-page">
    <div class="page-head">
      <div>
        <h2>撞车配置</h2>
        <p>
          全局默认固定二维码与订单复制模板。商品可覆盖默认二维码；支付后用户在订单详情扫码并复制信息联系客服。
        </p>
      </div>
      <el-button type="primary" :loading="saving" @click="handleSave">保存配置</el-button>
    </div>

    <el-form label-width="140px" class="config-form">
      <el-form-item label="默认固定二维码">
        <div class="qr-row">
          <el-image
            v-if="form.default_qrcode_url"
            :src="form.default_qrcode_url"
            fit="contain"
            style="width: 160px; height: 160px; border-radius: 12px; background: #f7f9fc"
          />
          <div class="qr-actions">
            <el-upload :show-file-list="false" accept="image/*" :before-upload="uploadQrcode">
              <el-button :icon="Upload">上传二维码</el-button>
            </el-upload>
            <el-input v-model="form.default_qrcode_url" placeholder="或直接填写图片 URL" />
          </div>
        </div>
      </el-form-item>
      <el-form-item label="复制文案模板">
        <el-input v-model="form.order_copy_template" type="textarea" :rows="8" />
        <div class="hint">
          可用变量：&#123;&#123;order_no&#125;&#125; &#123;&#123;created_at&#125;&#125;
          &#123;&#123;items&#125;&#125;（多商品明细） &#123;&#123;product_title&#125;&#125;
          &#123;&#123;quantity&#125;&#125; &#123;&#123;amount&#125;&#125;
          &#123;&#123;buyer_name&#125;&#125; &#123;&#123;buyer_phone&#125;&#125;
          &#123;&#123;unit&#125;&#125;
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<style scoped>
.admin-page {
  display: grid;
  gap: 16px;
}
.page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.page-head h2 {
  margin: 0 0 4px;
}
.page-head p {
  margin: 0;
  color: #6b7a90;
  font-size: 13px;
}
.config-form {
  max-width: 820px;
  padding: 20px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #eef1f5;
}
.qr-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  width: 100%;
}
.qr-actions {
  flex: 1;
  display: grid;
  gap: 10px;
}
.hint {
  margin-top: 8px;
  color: #8a94a6;
  font-size: 12px;
  line-height: 1.5;
}
</style>