Files
patch-mp/src/pages/index/index.vue
2026-09-10 16:27:19 +08:00

148 lines
4.5 KiB
Vue

<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 text-gray-800">
<wd-img :width="40" :height="40" :src="imgURL" />
<view class="flex min-w-0 flex-col">
<text class="truncate text-lg text-white font-semibold">
{{ greeting }}
</text>
<text class="mt-0.5 text-xs text-white/70">
{{ today }} · 记录每一次耕耘
</text>
</view>
</view>
<view class="p-3">
<wd-search v-model="patchStore.patchSearch"
:maxlength="20" :placeholder-left="true" :hide-cancel="true"
placeholder="请输入菜地名称或者菜地地点"
@change="patchStore.queryPatchList()"
@clear="patchStore.queryPatchList()"/>
</view>
<wd-card v-for="(item, index) in patchStore.patchList" :key="item.id">
<template #title>
<view class="wd-card__title-text flex items-center justify-between" @click="editPatchClick(item)">
<text>{{ item.name }}</text>
<text v-if="item.location" class="text-sm text-[#999]">{{ item.location }}</text>
</view>
</template>
<wd-img width="100%" height="40vh" :src="`${patchStore.baseUrl}/${item.crop?.images[0]}`"
lazy-load mode="aspectFill" @click="handlePreview(item.crop)">
<template #error>
<view class="error-wrap">暂无记录</view>
</template>
</wd-img>
<template #footer>
<view class="flex-1 flex justify-between items-center">
<view v-if="item.crop" class="flex flex-col gap-1">
<view class="text-base font-medium">
{{ item.crop.name }}
<text class="text-sm text-gray-400 font-normal ml-1">{{ item.crop.variety }}</text>
</view>
<view class="flex gap-1 align-center">
<wd-text v-if="item.crop.stage" :text="item.crop.stage"/>
<wd-text :text="`📅 ${item.crop.date}`"/>
</view>
</view>
<wd-text v-else text="暂无作物 请先添加"/>
<view class="flex gap-1">
<wd-button icon="list" round @click="viewDetailClick(item)"></wd-button>
</view>
</view>
</template>
</wd-card>
<wd-empty v-if="patchStore.patchList.length === 0" tip="暂无数据"/>
<liu-drag-button v-if="patchStore.showPatchFab" background="#22c55e" @clickBtn="addPatchClick">
<wd-icon name="plus" size="24px"></wd-icon>
</liu-drag-button>
<patch-popup />
<view class="h-[10px]"></view>
</view>
</template>
<script lang="ts" setup>
import { computed } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import appLogo from '@/static/logo.png'
import { usePatchStore } from "@/stores/patch";
import type {ICrop, IPatch} from "@/types";
import PatchPopup from "@/components/PatchPopup.vue";
defineOptions({ name: 'Home' })
const patchStore = usePatchStore()
const imgURL = appLogo
// ===== 时间 =====
const now = new Date()
const hour = now.getHours()
const greeting = computed(() => {
if (hour < 6) return '夜深了 🌙'
if (hour < 12) return '早上好 ☀️'
if (hour < 18) return '下午好 👋'
return '晚上好 ✨'
})
const today = computed(() => {
const m = now.getMonth() + 1
const d = now.getDate()
const w = ['日', '一', '二', '三', '四', '五', '六'][now.getDay()]
return `${m}${d}日 周${w}`
})
onShow(async () => {
await loadData()
})
async function loadData() {
await patchStore.queryPatchList()
}
function addPatchClick() {
patchStore.patchForm = {
id: 0,
name: '',
location: '',
status: ''
}
patchStore.patchApiType = 'ADD'
patchStore.showPatchPopup = true
patchStore.showPatchFab = false
}
function editPatchClick(patch: IPatch) {
patchStore.patchForm = JSON.parse(JSON.stringify(patch))
patchStore.patchApiType = 'UPDATE'
patchStore.showPatchPopup = true
patchStore.showPatchFab = false
}
async function viewDetailClick(patch: IPatch) {
patchStore.currentPatch = patch
if (patch.crop) {
await patchStore.queryRecordList(patch.crop.id)
} else {
patchStore.recordList = []
}
wx.navigateTo({
url: '/pages/record/index'
})
}
function handlePreview(crop: ICrop) {
const fullUrls = crop.images?.map(url => `${patchStore.baseUrl}/${url}`) as string[]
uni.previewImage({ urls: fullUrls, current: fullUrls[0] })
}
</script>