JCSS / jcss-miniprogram

  <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>