treeRecord.vue
4.55 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
<template>
<view class="page-container">
<!-- 内容区域 - 集成z-paging分页 -->
<z-paging
ref="pagingRef"
v-model="rows"
@query="fetchData"
:auto-show-system-loading="true"
>
<!-- 空数据提示 -->
<template #empty>
<empty-view/>
</template>
<!-- 空数据组件 -->
<!-- <up-empty v-if="rows.length === 0" text="暂无数据" marginTop="100"></up-empty>-->
<!-- 树木列表：up-card重构 + 保留原始背景图写法 核心满足你的要求 -->
<view class="record-wrap">
<up-card
v-for="i in rows"
:key="i.treenumber"
:border="false"
:show-head="false"
class="tree-card"
:foot-border-top="false"
@click="toEditPage(i.id)"
>
<template #body>
<view class="card-body-inner">
<view class="record-list-left" :style="`background-image: url(${i.treephoto});`"></view>
<view class="record-list-right">
<view class="up-flex up-flex-items-center up-flex-between">
<view class="u-line-1 treetypeName">{{ i.treetype }}</view>
<view style="text-align: right">{{ timeFormat(i.updatetime) }}</view>
</view>
<view class="up-flex up-flex-items-center" style="margin: 8px 0">
<img src="../../../static/imgs/tree/tree-high.png" style="width: 12px;height: 12px;margin-right: 6px;"
alt=""> 高度：{{ i.treeheight }} 米
</view>
<view class="up-flex up-flex-items-center">
<img src="../../../static/imgs/tree/treearound.png"
style="width: 12px;height: 12px;margin-right: 6px;" alt="">胸径：{{ i.dbh }} 厘米
</view>
</view>
</view>
<view class="treenumber-no">
树木编号：{{ i.treenumber }}
</view>
</template>
</up-card>
</view>
</z-paging>
<!-- 底部新增按钮 -->
<view class="fixed-bottom-btn-wrap">
<up-button
type="primary"
@click="toAddTreePage"
v-show="count > 0 && count > allCount"
>
新增树木录入
</up-button>
</view>
</view>
</template>
<script setup>
import { ref } from 'vue'
import { onLoad, onShow, onUnload } from '@dcloudio/uni-app';
onUnload(() => {
// 关闭所有页面，直接打开【行道树档案】主页面 【微信小程序完美兼容，无任何报错】
uni.reLaunch({
url: '/pages-sub/data/tree-archive/index'
})
})
import { treeRoadReq } from "@/api/tree-archive/tree-archive.js";
import { timeFormat } from '@/uni_modules/uview-plus';
const rows = ref([])
const roadId = ref('')
const count = ref(0)
const allCount = ref(0)
onLoad((options) => {
console.log(options)
roadId.value = options.roadId
count.value = options.count
})
onShow(() => {
// 初始化分页数据
pagingRef.value?.reload()
})
const toEditPage = (id) => {
uni.navigateTo({
url: `/pages-sub/data/tree-archive/editTree?id=${id}`
})
}
const toAddTreePage = () => {
uni.navigateTo({
url: `/pages-sub/data/tree-archive/addTree?roadId=${roadId.value}`
})
}
const pagingRef = ref(null) // z-paging实例
const fetchData = async (pageNo, pageSize) => {
const res = await treeRoadReq({road: roadId.value, pageNo, pageSize})
console.log(res)
allCount.value = res.total
// rows.value = res.list
pagingRef.value?.complete(res?.list || [], res?.total)
}
</script>
<style scoped lang="scss">
// ✅ 你的原始样式 一行没删、一行没改、全部保留
.page-container {
min-height: 100vh;
}
.record-wrap {
padding-bottom: 20px;
}
.record-list-wrap {
margin: 15px 10px 0;
padding: 10px;
border-radius: 6px;
font-size: 14px;
}
.treetypeName {
flex: 1;
font-size: 14px;
font-weight: bold;
}
.record-list-left {
height: 70px;
width: 70px;
background-size: 100% 100%;
background-repeat: no-repeat; // 新增：防止图片平铺
background-position: center; // 新增：图片居中显示
}
.record-list-right {
margin-left: 20px;
flex: 1;
overflow: hidden;
}
.treenumber-no {
margin-top: 5px;
padding: 3px 10px;
background: #bdefd0;
font-size: 12px;
}
// ✅ 只加了这2个适配up-card的样式，无其他修改
.tree-card {
//margin: 15px 10px 0;
//
//border-radius: 6px;
//box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
//background: #fff;
}
.card-body-inner {
display: flex;
font-size: 12px;
}
</style>