2

frontend/pages/product/submission-detail.vue

@@ -0,0 +1,190 @@
+<template>
+  <scroll-view scroll-y class="page" v-if="detail">
+    <view class="header">
+      <text class="model">{{ detail.model }}</text>
+      <text :class="['status', statusClass(detail.status)]">{{ statusLabel(detail.status) }}</text>
+    </view>
+
+    <view class="section">
+      <view class="row"><text class="label">名称</text><text class="value">{{ detail.name || '-' }}</text></view>
+      <view class="row"><text class="label">品牌</text><text class="value">{{ detail.brand || '-' }}</text></view>
+      <view class="row"><text class="label">规格</text><text class="value">{{ detail.spec || '-' }}</text></view>
+      <view class="row"><text class="label">产地</text><text class="value">{{ detail.origin || '-' }}</text></view>
+      <view class="row"><text class="label">条码</text><text class="value">{{ detail.barcode || '-' }}</text></view>
+      <view class="row"><text class="label">单位</text><text class="value">{{ unitName }}</text></view>
+      <view class="row"><text class="label">类别</text><text class="value">{{ categoryName }}</text></view>
+      <view class="row"><text class="label">安全库存</text><text class="value">{{ stockRange }}</text></view>
+    </view>
+
+    <view class="section">
+      <view class="block-title">参数</view>
+      <view v-if="parameterPairs.length" class="params">
+        <view class="param" v-for="item in parameterPairs" :key="item.key">
+          <text class="param-key">{{ item.key }}</text>
+          <text class="param-val">{{ item.value }}</text>
+        </view>
+      </view>
+      <view v-else class="placeholder">未填写参数</view>
+    </view>
+
+    <view class="section">
+      <view class="block-title">图片</view>
+      <view v-if="detail.images && detail.images.length" class="images">
+        <image v-for="(img, idx) in detail.images" :key="idx" :src="img" class="image" mode="aspectFill" @click="preview(idx)" />
+      </view>
+      <view v-else class="placeholder">未上传图片</view>
+    </view>
+
+    <view class="section">
+      <view class="block-title">备注</view>
+      <view class="placeholder">{{ detail.remark || '无' }}</view>
+    </view>
+
+    <view class="section">
+      <view class="row"><text class="label">提交时间</text><text class="value">{{ formatTime(detail.createdAt) }}</text></view>
+      <view class="row"><text class="label">审核时间</text><text class="value">{{ formatTime(detail.reviewedAt) }}</text></view>
+      <view class="row" v-if="detail.reviewRemark"><text class="label">审核说明</text><text class="value">{{ detail.reviewRemark }}</text></view>
+    </view>
+
+    <view class="footer">
+      <button size="mini" @click="back">返回</button>
+      <button size="mini" type="warn" v-if="detail.status === 'rejected'" @click="resubmit">重新提交</button>
+    </view>
+  </scroll-view>
+  <view v-else class="loading">加载中...</view>
+</template>
+
+<script>
+import { get } from '../../common/http.js'
+
+export default {
+  data() {
+    return {
+      id: '',
+      detail: null,
+      unitName: '-',
+      categoryName: '-'
+    }
+  },
+  async onLoad(query) {
+    this.id = query?.id || ''
+    if (!this.id) {
+      uni.showToast({ title: '参数缺失', icon: 'none' })
+      return
+    }
+    await this.loadDetail()
+  },
+  methods: {
+    async loadDetail() {
+      try {
+        const data = await get(`/api/products/submissions/${this.id}`)
+        this.detail = data
+        this.unitName = this.unitLookup(data.unitId)
+        this.categoryName = this.categoryLookup(data.categoryId)
+      } catch (e) {
+        const msg = e?.message || '加载失败'
+        uni.showToast({ title: msg, icon: 'none' })
+      }
+    },
+    statusLabel(s) {
+      if (s === 'approved') return '已通过'
+      if (s === 'rejected') return '已驳回'
+      return '待审核'
+    },
+    statusClass(s) {
+      if (s === 'approved') return 'approved'
+      if (s === 'rejected') return 'rejected'
+      return 'pending'
+    },
+    parameterPairs() {
+      const params = this.detail?.parameters
+      if (!params || typeof params !== 'object') return []
+      return Object.keys(params).map(k => ({ key: k, value: params[k] }))
+    },
+    preview(idx) {
+      if (!this.detail?.images || !this.detail.images.length) return
+      uni.previewImage({ urls: this.detail.images, current: idx })
+    },
+    formatTime(value) {
+      if (!value) return '-'
+      try {
+        const d = new Date(value)
+        if (!Number.isFinite(d.getTime())) return value
+        const y = d.getFullYear()
+        const m = String(d.getMonth() + 1).padStart(2, '0')
+        const day = String(d.getDate()).padStart(2, '0')
+        const hh = String(d.getHours()).padStart(2, '0')
+        const mm = String(d.getMinutes()).padStart(2, '0')
+        return `${y}-${m}-${day} ${hh}:${mm}`
+      } catch (_) { return value }
+    },
+    unitLookup(id) {
+      try {
+        const list = uni.getStorageSync('CACHE_UNITS') || []
+        const found = list.find(x => String(x.id) === String(id))
+        return found ? found.name : '-'
+      } catch (_) { return '-' }
+    },
+    categoryLookup(id) {
+      try {
+        const list = uni.getStorageSync('CACHE_CATEGORIES') || []
+        const found = list.find(x => String(x.id) === String(id))
+        return found ? found.name : '-'
+      } catch (_) { return '-' }
+    },
+    back() {
+      uni.navigateBack({ delta: 1 })
+    },
+    resubmit() {
+      const payload = {
+        model: this.detail.model,
+        name: this.detail.name,
+        brand: this.detail.brand,
+        spec: this.detail.spec,
+        origin: this.detail.origin,
+        unitId: this.detail.unitId,
+        categoryId: this.detail.categoryId,
+        remark: this.detail.remark,
+        barcode: this.detail.barcode,
+        parameters: this.detail.parameters
+      }
+      const query = encodeURIComponent(JSON.stringify(payload))
+      uni.navigateTo({ url: `/pages/product/submit?prefill=${query}` })
+    }
+  },
+  computed: {
+    stockRange() {
+      const min = this.detail?.safeMin
+      const max = this.detail?.safeMax
+      if (min == null && max == null) return '-'
+      if (min != null && max != null) return `${min} ~ ${max}`
+      if (min != null) return `≥ ${min}`
+      return `≤ ${max}`
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.page { padding: 24rpx 24rpx 160rpx; background: #f6f7fb; }
+.header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20rpx; }
+.model { font-size: 36rpx; font-weight: 700; color: #2d3a4a; }
+.status { font-size: 26rpx; padding: 6rpx 18rpx; border-radius: 999rpx; }
+.status.pending { background: rgba(246, 190, 0, 0.15); color: #c47f00; }
+.status.approved { background: rgba(103,194,58,0.15); color: #409eff; }
+.status.rejected { background: rgba(255,87,115,0.18); color: #f56c6c; }
+.section { background: #fff; border-radius: 16rpx; padding: 20rpx 22rpx; margin-bottom: 24rpx; box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.04); }
+.row { display: flex; justify-content: space-between; padding: 12rpx 0; border-bottom: 1rpx solid #f1f2f5; }
+.row:last-child { border-bottom: none; }
+.label { width: 160rpx; font-size: 26rpx; color: #7a8899; }
+.value { flex: 1; text-align: right; font-size: 26rpx; color: #2d3a4a; word-break: break-all; }
+.block-title { font-size: 28rpx; font-weight: 600; color: #2d3a4a; margin-bottom: 12rpx; }
+.placeholder { font-size: 26rpx; color: #7a8899; }
+.params { display: flex; flex-direction: column; gap: 12rpx; }
+.param { display: flex; justify-content: space-between; font-size: 26rpx; color: #2d3a4a; }
+.param-key { color: #7a8899; }
+.images { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12rpx; }
+.image { width: 100%; height: 200rpx; border-radius: 16rpx; background: #f0f2f5; }
+.footer { display: flex; justify-content: flex-end; gap: 20rpx; }
+.loading { height: 100vh; display: flex; align-items: center; justify-content: center; color: #7a8899; }
+</style>