treeRecord.vue
4.2 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
<template>
<view class="container">
<!-- 空数据组件 -->
<up-empty v-if="rows.length === 0" text="暂无数据" marginTop="100"></up-empty>
<!-- 树木列表：up-card重构 + 保留原始背景图写法 核心满足你的要求 -->
<view class="record-wrap" v-else>
<up-card
v-for="i in rows"
:key="i.id"
: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="record-list-right-title">
<view class="u-line-1 treetypeName">{{ i.treetype }}</view>
<view style="text-align: right">{{ timeFormat(i.updatetime) }}</view>
</view>
<view class="fs-align__center " style="margin: 5px 0">
<img src="../../../static/imgs/tree/tree-high.png" style="width: 14px;height: 14px;margin-right: 6px;" alt=""> 高度：{{ i.treeheight }} 米
</view>
<view class=" fs-align__center">
<img src="../../../static/imgs/tree/treearound.png" style="width: 14px;height: 14px;margin-right: 6px;" alt="">胸径：{{ i.dbh }} 厘米
</view>
</view>
</view>
<view class="treenumber-no">
树木编号：{{ i.treenumber }}
</view>
</template>
<!-- <template #foot>-->
<!-- <view class="treenumber-no">-->
<!-- 树木编号：{{ i.treenumber }}-->
<!-- </view>-->
<!-- </template>-->
</up-card>
</view>
<!-- 底部新增按钮 -->
<view class="fixed-bottom-btn-wrap">
<up-button
type="primary"
@click="toAddTreePage"
v-show="count > 0 && count > rows.length"
>
新增树木录入
</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)
onLoad((options) => {
console.log(options)
roadId.value = options.roadId
count.value = options.count
})
onShow(() => {
treeRoadQuery()
})
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 treeRoadQuery = async () => {
const res = await treeRoadReq( {road: roadId.value})
console.log(res)
rows.value = res.list
}
</script>
<style scoped lang="scss">
// ✅ 你的原始样式 一行没删、一行没改、全部保留
.container {
min-height: 100vh;
}
.record-wrap {
padding-bottom: 60px;
}
.record-list-wrap {
margin: 15px 10px 0;
padding: 10px;
border-radius: 6px;
font-size: 14px;
}
.treetypeName {
flex: 1;
font-size: 16px;
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;
}
.record-list-right-title {
display: flex;
justify-content: space-between;
}
.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;
}
</style>