李红攀：V2.0.001小程序的农业溯源

src/pages-agri/trace-snapshot/index.vue

@@ -0,0 +1,334 @@
+<template>
+  <view class="yd-page-container">
+    <!-- 顶部导航栏 -->
+    <wd-navbar
+      title="溯源快照"
+      left-arrow placeholder safe-area-inset-top fixed
+      @click-left="handleBack"
+    />
+
+    <!-- 搜索组件 -->
+    <view class="flex items-center px-24rpx">
+      <view class="flex-1" @click="searchVisible = true">
+        <wd-search :placeholder="searchPlaceholder" hide-cancel disabled />
+      </view>
+      <wd-button size="small" type="primary" icon="scan" class="ml-16rpx" @click="handleScanQuery">
+        扫码
+      </wd-button>
+    </view>
+
+    <!-- 快照列表 -->
+    <view class="px-24rpx">
+      <view
+        v-for="item in list"
+        :key="item.id"
+        class="mb-20rpx overflow-hidden rounded-12rpx bg-white shadow-sm"
+        @click="handleDetail(item)"
+      >
+        <view class="p-24rpx">
+          <!-- 头部：溯源码 + 批次号 -->
+          <view class="mb-16rpx flex items-center justify-between">
+            <view class="text-28rpx text-[#333] font-semibold flex-1 truncate">
+              {{ item.traceCode || '-' }}
+            </view>
+            <view class="text-24rpx text-[#1890ff] ml-12rpx">
+              {{ item.batchNo || '' }}
+            </view>
+          </view>
+          <!-- 产品名 + 地块名 -->
+          <view class="mb-12rpx flex items-center justify-between text-26rpx text-[#666]">
+            <text class="text-[#999]">产品</text>
+            <text>{{ item.productName || '-' }}</text>
+          </view>
+          <view class="mb-12rpx flex items-center justify-between text-26rpx text-[#666]">
+            <text class="text-[#999]">地块</text>
+            <text>{{ item.plotName || '-' }}</text>
+          </view>
+          <!-- 采收信息 -->
+          <view class="mb-12rpx flex items-center justify-between text-26rpx text-[#666]">
+            <text class="text-[#999]">采收</text>
+            <text>{{ item.harvestOperatorName || '-' }} / {{ formatTime(item.harvestTime) }}</text>
+          </view>
+          <!-- 装箱信息 -->
+          <view class="mb-12rpx flex items-center justify-between text-26rpx text-[#666]">
+            <text class="text-[#999]">装箱</text>
+            <text>{{ item.packingOperatorName || '-' }} / {{ formatTime(item.packingTime) }}</text>
+          </view>
+          <!-- 入库信息 -->
+          <view class="mb-12rpx flex items-center justify-between text-26rpx text-[#666]">
+            <text class="text-[#999]">入库</text>
+            <text>{{ item.warehouseOperatorName || '-' }} / {{ formatTime(item.warehouseTime) }}</text>
+          </view>
+          <!-- 发运信息 -->
+          <view class="flex items-center justify-between text-26rpx text-[#666]">
+            <text class="text-[#999]">发运</text>
+            <text>{{ item.shipmentOperatorName || '-' }} / {{ item.vehicleNo || '-' }}</text>
+          </view>
+        </view>
+      </view>
+
+      <!-- 加载更多 -->
+      <view v-if="loadMoreState !== 'loading' && list.length === 0" class="py-100rpx text-center">
+        <wd-status-tip image="content" tip="暂无溯源快照数据" />
+      </view>
+      <wd-loadmore
+        v-if="list.length > 0"
+        :state="loadMoreState"
+        @reload="loadMore"
+      />
+    </view>
+
+    <!-- 搜索弹窗 -->
+    <wd-popup v-model="searchVisible" position="top" @close="searchVisible = false">
+      <view class="yd-search-form-container" :style="{ paddingTop: `${getNavbarHeight()}px` }">
+        <view class="yd-search-form-item">
+          <view class="yd-search-form-label">批次号</view>
+          <wd-input v-model="searchForm.batchNo" placeholder="请输入批次号" no-border />
+        </view>
+        <view class="yd-search-form-item">
+          <view class="yd-search-form-label">溯源码</view>
+          <wd-input v-model="searchForm.traceCode" placeholder="请输入溯源码" no-border />
+        </view>
+        <view class="yd-search-form-item">
+          <view class="yd-search-form-label">产品名</view>
+          <wd-input v-model="searchForm.productName" placeholder="请输入产品名称" no-border />
+        </view>
+        <view class="yd-search-form-actions">
+          <wd-button class="flex-1" plain @click="handleReset">重置</wd-button>
+          <wd-button class="flex-1" type="primary" @click="handleSearch">搜索</wd-button>
+        </view>
+        <view class="mt-20rpx">
+          <wd-button type="info" block plain @click="handleTraceCodeQuery">按溯源码查单条</wd-button>
+        </view>
+      </view>
+    </wd-popup>
+
+    <!-- 详情弹窗 -->
+    <wd-popup v-model="detailVisible" position="bottom" custom-style="height: 70%;">
+      <view class="p-24rpx">
+        <view class="text-32rpx text-[#333] font-semibold mb-24rpx">溯源详情</view>
+        <view v-if="currentDetail" class="text-26rpx text-[#666]">
+          <view class="mb-16rpx flex"><text class="text-[#999] w-160rpx">ID</text><text>{{ currentDetail.id }}</text></view>
+          <view class="mb-16rpx flex"><text class="text-[#999] w-160rpx">溯源码</text><text class="flex-1 break-all">{{ currentDetail.traceCode }}</text></view>
+          <view class="mb-16rpx flex"><text class="text-[#999] w-160rpx">批次号</text><text>{{ currentDetail.batchNo }}</text></view>
+          <view class="mb-16rpx flex"><text class="text-[#999] w-160rpx">产品名</text><text>{{ currentDetail.productName || '-' }}</text></view>
+          <view class="mb-16rpx flex"><text class="text-[#999] w-160rpx">地块名</text><text>{{ currentDetail.plotName || '-' }}</text></view>
+          <view class="mb-16rpx flex"><text class="text-[#999] w-160rpx">采收操作人</text><text>{{ currentDetail.harvestOperatorName || '-' }}</text></view>
+          <view class="mb-16rpx flex"><text class="text-[#999] w-160rpx">采收时间</text><text>{{ formatTime(currentDetail.harvestTime) }}</text></view>
+          <view class="mb-16rpx flex"><text class="text-[#999] w-160rpx">装箱操作人</text><text>{{ currentDetail.packingOperatorName || '-' }}</text></view>
+          <view class="mb-16rpx flex"><text class="text-[#999] w-160rpx">装箱时间</text><text>{{ formatTime(currentDetail.packingTime) }}</text></view>
+          <view class="mb-16rpx flex"><text class="text-[#999] w-160rpx">入库操作人</text><text>{{ currentDetail.warehouseOperatorName || '-' }}</text></view>
+          <view class="mb-16rpx flex"><text class="text-[#999] w-160rpx">入库时间</text><text>{{ formatTime(currentDetail.warehouseTime) }}</text></view>
+          <view class="mb-16rpx flex"><text class="text-[#999] w-160rpx">发运操作人</text><text>{{ currentDetail.shipmentOperatorName || '-' }}</text></view>
+          <view class="mb-16rpx flex"><text class="text-[#999] w-160rpx">发运时间</text><text>{{ formatTime(currentDetail.shipmentTime) }}</text></view>
+          <view class="mb-16rpx flex"><text class="text-[#999] w-160rpx">车牌号</text><text>{{ currentDetail.vehicleNo || '-' }}</text></view>
+        </view>
+        <wd-button type="primary" block class="mt-32rpx" @click="detailVisible = false">关闭</wd-button>
+      </view>
+    </wd-popup>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import type { AgriTraceSnapshotVO } from '@/api/agri/trace/snapshot'
+import type { LoadMoreState } from '@/http/types'
+import { onReachBottom } from '@dcloudio/uni-app'
+import { computed, onMounted, reactive, ref } from 'vue'
+import {
+  getAgriTraceSnapshotByTraceCode,
+  getAgriTraceSnapshotPage
+} from '@/api/agri/trace/snapshot'
+import { getNavbarHeight, navigateBackPlus } from '@/utils'
+
+definePage({
+  style: {
+    navigationBarTitleText: '',
+    navigationStyle: 'custom',
+  },
+})
+
+const total = ref(0)
+const list = ref<AgriTraceSnapshotVO[]>([])
+const loadMoreState = ref<LoadMoreState>('loading')
+const queryParams = ref<Record<string, any>>({
+  pageNo: 1,
+  pageSize: 10,
+})
+
+// 搜索相关
+const searchVisible = ref(false)
+const searchForm = reactive({
+  batchNo: '',
+  traceCode: '',
+  productName: ''
+})
+
+// 详情弹窗
+const detailVisible = ref(false)
+const currentDetail = ref<AgriTraceSnapshotVO | null>(null)
+
+/** 搜索条件 placeholder */
+const searchPlaceholder = computed(() => {
+  const conditions: string[] = []
+  if (searchForm.batchNo) conditions.push(`批次:${searchForm.batchNo}`)
+  if (searchForm.traceCode) conditions.push(`溯源码:${searchForm.traceCode}`)
+  if (searchForm.productName) conditions.push(`产品:${searchForm.productName}`)
+  return conditions.length > 0 ? conditions.join(' | ') : '搜索溯源快照'
+})
+
+/** 格式化时间 */
+function formatTime(time?: string | number) {
+  if (!time) return '-'
+  // 如果是时间戳（数字），转换为日期字符串
+  if (typeof time === 'number') {
+    const date = new Date(time)
+    const year = date.getFullYear()
+    const month = String(date.getMonth() + 1).padStart(2, '0')
+    const day = String(date.getDate()).padStart(2, '0')
+    const hours = String(date.getHours()).padStart(2, '0')
+    const minutes = String(date.getMinutes()).padStart(2, '0')
+    return `${year}-${month}-${day} ${hours}:${minutes}`
+  }
+  // 如果是字符串，处理 ISO 格式
+  if (typeof time === 'string') {
+    return time.replace('T', ' ').substring(0, 16)
+  }
+  return '-'
+}
+
+/** 返回上一页 */
+function handleBack() {
+  navigateBackPlus()
+}
+
+/** 查询列表 */
+async function getList() {
+  loadMoreState.value = 'loading'
+  try {
+    const params: Record<string, any> = { ...queryParams.value }
+    if (searchForm.batchNo) params.batchNo = searchForm.batchNo
+    if (searchForm.traceCode) params.traceCode = searchForm.traceCode
+    if (searchForm.productName) params.productName = searchForm.productName
+    const data = await getAgriTraceSnapshotPage(params)
+    list.value = [...list.value, ...data.list]
+    total.value = data.total
+    loadMoreState.value = list.value.length >= total.value ? 'finished' : 'loading'
+  } catch {
+    queryParams.value.pageNo = queryParams.value.pageNo > 1 ? queryParams.value.pageNo - 1 : 1
+    loadMoreState.value = 'error'
+  }
+}
+
+/** 搜索 */
+function handleSearch() {
+  searchVisible.value = false
+  queryParams.value = {
+    pageNo: 1,
+    pageSize: queryParams.value.pageSize,
+  }
+  list.value = []
+  getList()
+}
+
+/** 重置 */
+function handleReset() {
+  searchForm.batchNo = ''
+  searchForm.traceCode = ''
+  searchForm.productName = ''
+  searchVisible.value = false
+  queryParams.value = { pageNo: 1, pageSize: 10 }
+  list.value = []
+  getList()
+}
+
+/** 按溯源码查单条 */
+async function handleTraceCodeQuery() {
+  if (!searchForm.traceCode) {
+    uni.showToast({ title: '请先输入溯源码', icon: 'none' })
+    return
+  }
+  searchVisible.value = false
+  loadMoreState.value = 'loading'
+  try {
+    const data = await getAgriTraceSnapshotByTraceCode(searchForm.traceCode)
+    list.value = data ? [data] : []
+    total.value = list.value.length
+    loadMoreState.value = 'finished'
+  } catch {
+    loadMoreState.value = 'error'
+  }
+}
+
+/** 查看详情 */
+function handleDetail(item: AgriTraceSnapshotVO) {
+  currentDetail.value = item
+  detailVisible.value = true
+}
+
+/** 加载更多 */
+function loadMore() {
+  if (loadMoreState.value === 'finished') return
+  queryParams.value.pageNo++
+  getList()
+}
+
+/** 触底加载更多 */
+onReachBottom(() => {
+  loadMore()
+})
+
+/** 扫码查询 */
+function handleScanQuery() {
+  // #ifdef MP-WEIXIN
+  uni.scanCode({
+    onlyFromCamera: false,
+    scanType: ['qrCode', 'barCode'],
+    success: async (res) => {
+      const result = res.result
+      // 尝试解析溯源码（支持纯字符串或JSON格式）
+      let traceCode: string | undefined
+      try {
+        const parsed = JSON.parse(result)
+        traceCode = parsed.traceCode || parsed.code
+      } catch {
+        // 如果不是JSON，直接使用扫码结果
+        traceCode = result
+      }
+      if (traceCode) {
+        loadMoreState.value = 'loading'
+        try {
+          const data = await getAgriTraceSnapshotByTraceCode(traceCode)
+          list.value = data ? [data] : []
+          total.value = list.value.length
+          loadMoreState.value = 'finished'
+          if (data) {
+            uni.showToast({ title: '查询成功', icon: 'success' })
+          } else {
+            uni.showToast({ title: '未找到该溯源码', icon: 'none' })
+          }
+        } catch {
+          loadMoreState.value = 'error'
+          uni.showToast({ title: '查询失败', icon: 'none' })
+        }
+      } else {
+        uni.showToast({ title: '无法识别溯源码', icon: 'none' })
+      }
+    },
+    fail: () => {
+      uni.showToast({ title: '扫码取消或失败', icon: 'none' })
+    }
+  })
+  // #endif
+  // #ifndef MP-WEIXIN
+  uni.showToast({ title: '当前环境不支持扫码', icon: 'none' })
+  // #endif
+}
+
+/** 初始化 */
+onMounted(() => {
+  getList()
+})
+</script>
+
+<style lang="scss" scoped>
+</style>