JCSS / jcss-miniprogram

  <template>
    <view class="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 > 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(() => {

    // 初始化分页数据
    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)

    // rows.value = res.list
    pagingRef.value?.complete(res?.list || [], res?.total)

  }
  </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: 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>