JCSS / jcss-miniprogram

  <template>
    <view class="container">

      <!-- 空数据组件 -->
      <up-empty v-if="rows.length === 0" text="暂无数据"></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 } from '@dcloudio/uni-app';

  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>