191 lines
7.7 KiB
Vue
191 lines
7.7 KiB
Vue
<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>
|