JCSS / jcss-miniprogram

<template>
  <view class="container">
    <!-- ✅ 顶部固定吸顶Tabs区域 - 核心新增 -->
    <up-sticky bg-color="#ffffff">
      <view class="header-wrap">
        <up-tabs
            v-model="activeTab"
            :list="tabList"
            active-color="#1989fa"
            inactive-color="#666"
            font-size="30rpx"
            @click="handleTabChange"
            :scrollable="false"
        />
      </view>
    </up-sticky>

    <!-- ✅ Tab0 基本信息页面 (树木的详情编辑页，保留你原编辑页核心结构，这里给你做了标准基础版，可直接加表单) -->
    <view v-show="activeTab === 0" class="base-info-wrap">
      <up-card :border="false" :show-head="false" class="base-card">
        <view class="card-body-inner">
          <view class="record-list-left" :style="`background-image: url(${treeInfo.treephoto});`"></view>
          <view class="record-list-right">
            <view class="record-list-right-title">
              <view class="u-line-1 treetypeName">{{ treeInfo.treetype }}</view>
            </view>
            <view class="fs-mt8 fs-align__center">
              <img src="../../../static/imgs/tree/tree-high.png" style="width: 14px;height: 14px;margin-right: 6px;" alt=""> 高度：{{ treeInfo.treeheight }} 米
            </view>
            <view class="fs-mt8 fs-align__center">
              <img src="../../../static/imgs/tree/treearound.png" style="width: 14px;height: 14px;margin-right: 6px;" alt="">胸径：{{ treeInfo.dbh }} 厘米
            </view>
            <view class="fs-mt8 fs-align__center">
              <text>树木编号：{{ treeInfo.treenumber }}</text>
            </view>
          </view>
        </view>
        <!-- 这里可以继续加你的 编辑表单/其他基本信息 -->
      </up-card>
    </view>

    <!-- ✅ Tab1 变更日志页面 - 和列表页布局完全一致 + 无新增按钮 + 点击卡片跳转详情 -->
    <view v-show="activeTab === 1" class="log-wrap">
      <up-empty v-if="logRows.length === 0" text="暂无变更日志"></up-empty>
      <view class="record-wrap" v-else>
        <up-card
            v-for="item in logRows"
            :key="item.id"
            :border="false"
            :show-head="false"
            class="tree-card"
            :foot-border-top="false"
            @click="toLogDetailPage(item.id)"
        >
          <template #body>
            <view class="card-body-inner">
              <!-- ✅ 保留你要求的背景图写法 -->
              <view class="record-list-left" :style="`background-image: url(${item.treephotoone});`"></view>
              <view class="record-list-right">
                <view class="record-list-right-title">
                  <view class="u-line-1 treetypeName">{{ item.treetype }}</view>
                  <view style="text-align: right">{{ timeFormat(item.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=""> 高度：{{ item.treeheight }} 米
                </view>
                <view class=" fs-align__center">
                  <img src="../../../static/imgs/tree/treearound.png" style="width: 14px;height: 14px;margin-right: 6px;" alt="">胸径：{{ item.dbh }} 厘米
                </view>
              </view>
            </view>
            <view class="treenumber-no">
              树木编号：{{ item.treenumber }}
            </view>
          </template>
        </up-card>
      </view>
    </view>

    <!-- ✅ 新增按钮 只在【基本信息Tab】显示，变更日志Tab自动隐藏，无需手动处理 -->
    <view class="fixed-bottom-btn-wrap">
      <up-button
          type="primary"
          @click="toAddTreePage"
          v-show="count > 0 && count > rows.length && activeTab === 0"
      >
        新增树木录入
      </up-button>
    </view>

  </view>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app';
import { treeRoadReq,treeLogReq } 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 treeId = ref('')

// ========== Tab切换核心变量 ==========
const activeTab = ref(0); // 0=基本信息 1=变更日志
const tabList = ref([
  { name: '基本信息' },
  { name: '变更日志' }
]);

// ========== 数据变量 ==========
const treeInfo = reactive({ // 基本信息-单棵树详情
  treephoto: '',
  treetype: '',
  treeheight: '',
  dbh: '',
  treenumber: '',
  updatetime: ''
})
const logRows = ref([]) // 变更日志列表数据

// ========== 生命周期 ==========
onLoad((options) => {
  console.log('编辑页入参', options)
  roadId.value = options.roadId || ''
  count.value = options.count || 0
  treeId.value = options.id || '' // 树木主键ID
})

onShow(() => {
  treeRoadQuery()
  if(activeTab.value === 0){
    // getTreeDetail() // 进入页面默认加载基本信息
  }
})

// ========== Tab切换事件 ==========
const handleTabChange = (item) => {
  activeTab.value = item.index
  // 切换到哪个tab，加载对应的数据
  if(activeTab.value === 0){
    getTreeDetail() // 加载基本信息
  }else if(activeTab.value === 1){
    getTreeLogList() // 加载变更日志列表
  }
}

// ========== 接口请求 ==========
// 树木列表查询
const treeRoadQuery = async () => {
  const res = await treeRoadReq( {road: roadId.value})
  rows.value = res.list
}

// // 获取单棵树的基本信息
// const getTreeDetail = async () => {
//   const res = await treeDetailReq({ id: treeId.value })
//   Object.assign(treeInfo, res)
// }

// 获取树木的变更日志列表
const getTreeLogList = async () => {
  const res = await treeLogReq({ treeid: treeId.value })
  logRows.value = res.list
}

// ========== 页面跳转 ==========
// 前往修改页面(原有)
const toEditPage = (id) => {
  uni.navigateTo({
    url: `/pages-sub/data/tree-archive/editTree?id=${id}&roadId=${roadId.value}`
  })
}

// 前往新增页面(原有)
const toAddTreePage = () => {
  uni.navigateTo({
    url: `/pages-sub/data/tree-archive/addTree?roadId=${roadId.value}`
  })
}

// ✅ 新增：点击变更日志卡片 前往日志详情页面
const toLogDetailPage = (logId) => {
  uni.navigateTo({
    url: `/pages-sub/data/tree-archive/logDetail?id=${logId}&treeId=${treeId.value}`
  })
}
</script>

<style scoped lang="scss">
.container {
  min-height: 100vh;
}

// ✅ 顶部tabs吸顶样式
.header-wrap {
  background-color: #fff;
  padding: 10rpx 0;
  box-shadow: 0 2rpx 4rpx rgba(0,0,0,0.03);
}

// 基本信息样式
.base-info-wrap {
  padding: 20rpx 10rpx;
}
.base-card {
  background: #fff;
  border-radius: 6px;
  padding: 10px;
}

// 变更日志样式 和列表页完全一致
.log-wrap {
  min-height: calc(100vh - 120rpx);
}
.record-wrap {
  padding-bottom: 20px;
}

.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 {
  padding: 3px 10px;
  background: #bdefd0;
  font-size: 12px;
  margin-top: 8px;
}

// up-card样式适配
.tree-card {
  //margin: 15px 10px 0;
  //padding: 10px;
  //border-radius: 6px;
  //font-size: 14px;
  //box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
  //background-color: #ffffff;
}
.card-body-inner{
  display: flex;
}


.addTree {
  width: 100%;
  position: fixed;
  bottom: 0;
}


.fs-align__center {
  display: flex;
  align-items: center;
}

</style>