From 2b7aa252800610ab2e9e46bcaa99dde37c557d1d Mon Sep 17 00:00:00 2001
From: Cxx0822 <1556464090@qq.com>
Date: Sat, 12 Sep 2026 19:47:20 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0=E5=9B=BE=E7=89=87?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E6=A0=BC=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/record/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/record/index.vue b/src/pages/record/index.vue
index c18b2b6..39fbf61 100644
--- a/src/pages/record/index.vue
+++ b/src/pages/record/index.vue
@@ -1 +1 @@
-<template>
  <view class="min-h-screen flex flex-col" style="background-image: linear-gradient(180deg, #4CAF50 0%, #8BC34A 42%, #E8F5E9 100%)">
    <view class="self-center py-3 flex items-center gap-2 w-full">
      <view class="grid grid-cols-3 items-center w-full">
        <view></view>

        <view v-if="patchStore.currentPatch.crop" @click="updateCropClick" class="flex flex-col">
          <text class="text-center text-lg text-white font-semibold truncate">
            {{ patchStore.currentPatch.crop.name }}
          </text>
          <text v-if="patchStore.currentPatch.crop.variety" class="text-center text-sm text-white/70 truncate">
            {{ patchStore.currentPatch.crop.variety }}
          </text>
          <text v-if="patchStore.currentPatch.crop.date" class="text-center text-sm text-white/70 truncate">
            📅 {{ patchStore.currentPatch.crop?.date }}
          </text>
        </view>

        <view v-else class="self-center py-3">
          <wd-button type="info" @click="addCropClick">点击添加作物</wd-button>
        </view>

        <view class="flex justify-end">
          <wd-button icon="list" type="info" round @click="showHistoryClick"></wd-button>
        </view>
      </view>
    </view>

    <view class="px-4">
      <view
          v-for="(item, index) in patchStore.recordList"
          :key="item.id"
          class="flex"
      >
        <!-- 时间轴 -->
        <view class="flex flex-col items-center mr-2">
          <view class="w-20 h-20 rounded-full bg-gray-300"/>
          <view v-if="index !== patchStore.recordList.length - 1" class="flex-1 w-[2px] bg-gray-200"/>
        </view>

        <view class="flex-1 pb-4">
          <wd-card>
            <template #title>
              <view class="w-full flex flex-col gap-1.5" @click="updateRecordClick(item)">
                <view class="flex justify-between items-center">
                  <view class="text-base font-medium">
                    {{ item.type }}
                  </view>
                  <wd-tag type="primary" round>
                    {{ item.stage }}
                  </wd-tag>
                  <view class="text-xs text-gray-400">
                    {{ item.date }}
                  </view>
                </view>
              </view>
            </template>

            <view class="flex flex-col gap-2">
              <view
                  v-if="item.images.length"
                  :class="`grid gap-2 mt-2 ${gridCols(item.images.length)}`"
              >
                <view
                    v-for="(url, i) in item.images"
                    :key="i"
                    class="w-full rounded-lg overflow-hidden"
                    @click="previewImages(item.images, i)"
                >
                  <wd-img
                      :src="`${patchStore.baseUrl}/${url}`"
                      width="100%"
                      mode="widthFix"
                      lazy-load
                      :radius="8"
                  />
                </view>
              </view>

              <view v-if="item.videos.length" class="mt-2">
                <view
                    v-for="(url, i) in item.videos"
                    :key="i"
                    class="relative w-full overflow-hidden rounded-lg bg-black"
                    @click="playVideo(url)"
                >
                  <view class="h-[360rpx] flex items-center justify-center">
                    <wd-icon
                        name="play-circle-fill"
                        size="40px"
                        color="#fff"
                    />
                  </view>
                </view>
              </view>

              <text class="text-sm text-gray-500">
                {{ item.content }}
              </text>
            </view>
          </wd-card>
        </view>
      </view>
    </view>

    <wd-empty v-if="patchStore.recordList.length === 0" tip="暂无数据"/>

    <wd-picker v-model="value" v-model:visible="showHistory" :columns="columns" />

    <liu-drag-button v-if="patchStore.showRecordFab && patchStore.currentPatch.crop"
                     background="#22c55e" @clickBtn="addRecordClick">
      <wd-icon name="plus" size="24px"></wd-icon>
    </liu-drag-button>

    <record-popup />
    <crop-popup />
    <view class="h-[10px]"></view>
  </view>
</template>

<script setup lang="ts">
import {computed, ref} from 'vue'
import { usePatchStore } from "@/stores/patch";
import RecordPopup from "@/components/RecordPopup.vue";
import type { IRecord } from "@/types";
import { formatDate } from "@/utils";
import CropPopup from "@/components/CropPopup.vue";

const showHistory = ref(false)
const value = ref<string[]>([])
const columns = ref([
  { label: '选项1', value: '1' },
  { label: '选项2', value: '2' },
  { label: '选项3', value: '3' }
])

const patchStore = usePatchStore()

function gridCols(count: number): string {
  if (count === 1) return 'grid-cols-1'
  if (count === 2) return 'grid-cols-2'
  if (count === 4) return 'grid-cols-2'
  return 'grid-cols-3'
}

function previewImages(urls: string[], index: number) {
  const fullUrls = urls.map(url => `${patchStore.baseUrl}/${url}`)
  uni.previewImage({ urls: fullUrls, current: fullUrls[index] })
}

function playVideo(url: string) {
  const fullUrl = `${patchStore.baseUrl}/${url}`
  wx.previewMedia({
    sources: [{ url: fullUrl, type: 'video' }],
    current: 0,
    fail: (err) => {
      console.error(err)
      uni.showToast({ title: '视频预览失败', icon: 'none' })
    }
  })
}

function addCropClick() {
  patchStore.cropForm = {
    id: 0,
    patch_id: patchStore.currentPatch.id,
    name: '',
    variety: '',
    date: formatDate(Date.now()),
  }
  patchStore.cropApiType = 'ADD'
  patchStore.showCropPopup = true
  patchStore.showRecordFab = false
}

function updateCropClick() {
  patchStore.cropForm = JSON.parse(JSON.stringify(patchStore.currentPatch.crop))
  patchStore.cropApiType = 'UPDATE'
  patchStore.showCropPopup = true
  patchStore.showRecordFab = false
}

function addRecordClick() {
  patchStore.recordForm = {
    id: 0,
    crop_id: patchStore.currentPatch.crop.id,
    type: '💧 浇水',
    date: formatDate(Date.now()),
    content: '',
    images: [],
    videos: [],
    stage: '生长期'
  }
  patchStore.imageFileList = []
  patchStore.videoFileList = []
  patchStore.recordApiType = 'ADD'
  patchStore.showRecordPopup = true
  patchStore.showRecordFab = false
}

function updateRecordClick(record: IRecord) {
  patchStore.recordForm = JSON.parse(JSON.stringify(record))

  patchStore.imageFileList = []
  patchStore.recordForm.images.forEach(image => {
    patchStore.imageFileList.push({
      url: `${patchStore.baseUrl}/${image}`,
    })
  })

  patchStore.videoFileList = []
  patchStore.recordForm.videos.forEach(video => {
    patchStore.videoFileList.push({
      url: `${patchStore.baseUrl}/${video}`,
    })
  })

  patchStore.recordApiType = 'UPDATE'
  patchStore.showRecordPopup = true
  patchStore.showRecordFab = false
}

function showHistoryClick() {
  // showHistory.value = true
  uni.showToast({ title: '查看历史作物，正在开发', icon: 'none' })
}
</script>
\ No newline at end of file
+<template>
  <view class="min-h-screen flex flex-col" style="background-image: linear-gradient(180deg, #4CAF50 0%, #8BC34A 42%, #E8F5E9 100%)">
    <view class="self-center py-3 flex items-center gap-2 w-full">
      <view class="grid grid-cols-3 items-center w-full">
        <view></view>

        <view v-if="patchStore.currentPatch.crop" @click="updateCropClick" class="flex flex-col">
          <text class="text-center text-lg text-white font-semibold truncate">
            {{ patchStore.currentPatch.crop.name }}
          </text>
          <text v-if="patchStore.currentPatch.crop.variety" class="text-center text-sm text-white/70 truncate">
            {{ patchStore.currentPatch.crop.variety }}
          </text>
          <text v-if="patchStore.currentPatch.crop.date" class="text-center text-sm text-white/70 truncate">
            📅 {{ patchStore.currentPatch.crop?.date }}
          </text>
        </view>

        <view v-else class="self-center py-3">
          <wd-button type="info" @click="addCropClick">点击添加作物</wd-button>
        </view>

        <view class="flex justify-end">
          <wd-button icon="list" type="info" round @click="showHistoryClick"></wd-button>
        </view>
      </view>
    </view>

    <view class="px-4">
      <view
          v-for="(item, index) in patchStore.recordList"
          :key="item.id"
          class="flex"
      >
        <!-- 时间轴 -->
        <view class="flex flex-col items-center mr-2">
          <view class="w-20 h-20 rounded-full bg-gray-300"/>
          <view v-if="index !== patchStore.recordList.length - 1" class="flex-1 w-[2px] bg-gray-200"/>
        </view>

        <view class="flex-1 pb-4">
          <wd-card>
            <template #title>
              <view class="w-full flex flex-col gap-1.5" @click="updateRecordClick(item)">
                <view class="flex justify-between items-center">
                  <view class="text-base font-medium">
                    {{ item.type }}
                  </view>
                  <wd-tag type="primary" round>
                    {{ item.stage }}
                  </wd-tag>
                  <view class="text-xs text-gray-400">
                    {{ item.date }}
                  </view>
                </view>
              </view>
            </template>

            <view class="flex flex-col gap-2">
              <view
                  v-if="item.images.length"
                  :class="`grid gap-2 mt-2 ${gridCols(item.images.length)}`"
              >
                <view
                    v-for="(url, i) in item.images"
                    :key="i"
                    class="w-full rounded-lg overflow-hidden"
                    @click="previewImages(item.images, i)"
                >
                  <wd-img
                      :src="`${patchStore.baseUrl}/${url}`"
                      width="100%" height="30vh"
                      mode="aspectFill" lazy-load :radius="8"
                  />
                </view>
              </view>

              <view v-if="item.videos.length" class="mt-2">
                <view
                    v-for="(url, i) in item.videos"
                    :key="i"
                    class="relative w-full overflow-hidden rounded-lg bg-black"
                    @click="playVideo(url)"
                >
                  <view class="h-[360rpx] flex items-center justify-center">
                    <wd-icon
                        name="play-circle-fill"
                        size="40px"
                        color="#fff"
                    />
                  </view>
                </view>
              </view>

              <text class="text-sm text-gray-500">
                {{ item.content }}
              </text>
            </view>
          </wd-card>
        </view>
      </view>
    </view>

    <wd-empty v-if="patchStore.recordList.length === 0" tip="暂无数据"/>

    <wd-picker v-model="value" v-model:visible="showHistory" :columns="columns" />

    <liu-drag-button v-if="patchStore.showRecordFab && patchStore.currentPatch.crop"
                     background="#22c55e" @clickBtn="addRecordClick">
      <wd-icon name="plus" size="24px"></wd-icon>
    </liu-drag-button>

    <record-popup />
    <crop-popup />
    <view class="h-[10px]"></view>
  </view>
</template>

<script setup lang="ts">
import {computed, ref} from 'vue'
import { usePatchStore } from "@/stores/patch";
import RecordPopup from "@/components/RecordPopup.vue";
import type { IRecord } from "@/types";
import { formatDate } from "@/utils";
import CropPopup from "@/components/CropPopup.vue";

const showHistory = ref(false)
const value = ref<string[]>([])
const columns = ref([
  { label: '选项1', value: '1' },
  { label: '选项2', value: '2' },
  { label: '选项3', value: '3' }
])

const patchStore = usePatchStore()

function gridCols(count: number): string {
  if (count === 1) return 'grid-cols-1'
  if (count === 2) return 'grid-cols-2'
  if (count === 4) return 'grid-cols-2'
  return 'grid-cols-3'
}

function previewImages(urls: string[], index: number) {
  const fullUrls = urls.map(url => `${patchStore.baseUrl}/${url}`)
  uni.previewImage({ urls: fullUrls, current: fullUrls[index] })
}

function playVideo(url: string) {
  const fullUrl = `${patchStore.baseUrl}/${url}`
  wx.previewMedia({
    sources: [{ url: fullUrl, type: 'video' }],
    current: 0,
    fail: (err) => {
      console.error(err)
      uni.showToast({ title: '视频预览失败', icon: 'none' })
    }
  })
}

function addCropClick() {
  patchStore.cropForm = {
    id: 0,
    patch_id: patchStore.currentPatch.id,
    name: '',
    variety: '',
    date: formatDate(Date.now()),
  }
  patchStore.cropApiType = 'ADD'
  patchStore.showCropPopup = true
  patchStore.showRecordFab = false
}

function updateCropClick() {
  patchStore.cropForm = JSON.parse(JSON.stringify(patchStore.currentPatch.crop))
  patchStore.cropApiType = 'UPDATE'
  patchStore.showCropPopup = true
  patchStore.showRecordFab = false
}

function addRecordClick() {
  patchStore.recordForm = {
    id: 0,
    crop_id: patchStore.currentPatch.crop.id,
    type: '💧 浇水',
    date: formatDate(Date.now()),
    content: '',
    images: [],
    videos: [],
    stage: '生长期'
  }
  patchStore.imageFileList = []
  patchStore.videoFileList = []
  patchStore.recordApiType = 'ADD'
  patchStore.showRecordPopup = true
  patchStore.showRecordFab = false
}

function updateRecordClick(record: IRecord) {
  patchStore.recordForm = JSON.parse(JSON.stringify(record))

  patchStore.imageFileList = []
  patchStore.recordForm.images.forEach(image => {
    patchStore.imageFileList.push({
      url: `${patchStore.baseUrl}/${image}`,
    })
  })

  patchStore.videoFileList = []
  patchStore.recordForm.videos.forEach(video => {
    patchStore.videoFileList.push({
      url: `${patchStore.baseUrl}/${video}`,
    })
  })

  patchStore.recordApiType = 'UPDATE'
  patchStore.showRecordPopup = true
  patchStore.showRecordFab = false
}

function showHistoryClick() {
  // showHistory.value = true
  uni.showToast({ title: '查看历史作物，正在开发', icon: 'none' })
}
</script>
\ No newline at end of file