JCSS / jcss-miniprogram

  <template>

    <view class="page-container">

      <up-form :model="formData" ref="formRef" label-width="140rpx" border-bottom>
        <up-form-item label="名称" prop="treetype" required>

          <up-input v-model="formData.treetype" border="none" readonly placeholder=""/>
        </up-form-item>
  
        <!-- 新增：树种类型 treeSpeciesType -->
        <up-form-item label="树种类型">
          <text class="show-text">{{ uni.$dict.getDictLabel('tree_species_type',formData.treeSpeciesType) || '' }}</text>
  
           <!-- <text class="show-text">{{ formData.treeSpeciesType || '' }}</text> -->

        </up-form-item>

        <view class="form-row-wrap">
          <up-row gutter="10">
            <up-col span="6">
              <up-form-item label="胸径" prop="dbh" required>

                <up-input v-model="formData.dbh" maxlength="10" border="none" input-align="left" readonly placeholder=""/>

                <template #right>
                  <text style="padding-left: 12rpx;color:#ccc;font-size:14px">厘米</text>
                </template>
              </up-form-item>
            </up-col>
            <up-col span="6">
              <up-form-item label="高度" prop="treeheight">

                <up-input v-model="formData.treeheight" maxlength="10" border="none" input-align="left" readonly placeholder=""/>

                <template #right>
                  <text style="padding-left: 12rpx;color:#ccc;font-size:14px;">米</text>
                </template>
              </up-form-item>
            </up-col>
          </up-row>
        </view>

        <up-form-item label="位置" prop="growlocation" required class="location-form-item">

          <up-input v-model="formData.growlocation" readonly border="none" placeholder=""/>

        </up-form-item>
  
        <up-row gutter="10">
          <up-col span="6">
            <up-form-item label="经度" :borderBottom="false">

              <up-input v-model="formData.longitude" readonly border="none" placeholder=""/>

            </up-form-item>
          </up-col>
          <up-col span="6">
            <up-form-item label="纬度" :borderBottom="false">

              <up-input v-model="formData.latitude" readonly border="none" placeholder=""/>

            </up-form-item>
          </up-col>
        </up-row>
  
        <up-form-item label="管护单位" prop="managedutyunit" required>

          <up-input v-model="formData.managedutyunit" maxlength="30" border="none" readonly placeholder=""/>

        </up-form-item>
  
        <up-form-item label="权属分类" prop="oldtreeownershipText" required>
          <text class="show-text">{{ uni.$dict.getDictLabel('tree_ownership',formData.oldtreeownership) || '' }}</text>
        </up-form-item>

        <up-form-item label="图片信息" prop="treeImgList" required>
          <up-upload
              :file-list="formatImgList(formData.treeImgList)"
              multiple
              :width="70"
              :height="70"
              :maxCount="formatImgList(formData.treeImgList).length"
              disabled

              :deletable="false"

              :preview-full-image="true"
          ></up-upload>
        </up-form-item>
  
        <view class="animated-area">
          <up-row gutter="10">
            <up-col span="6">
              <up-form-item label="拉丁文" prop="latinname">

                <up-input v-model="formData.latinname" maxlength="30" border="none" readonly placeholder=""/>

              </up-form-item>
            </up-col>
            <up-col span="6">
              <up-form-item label="级别">
                <text class="show-text">{{ uni.$dict.getDictLabel('tree_level',formData.treelevel) || '' }}</text>
              </up-form-item>
            </up-col>
          </up-row>
  
          <up-form-item label="生长环境" prop="growthenvironment">

            <up-input v-model="formData.growthenvironment" maxlength="50" border="none" readonly placeholder=""/>

          </up-form-item>
  
          <view class="form-row-wrap">
            <up-row gutter="10">
              <up-col span="6">

                <!-- 预估树龄 → 栽种年月，绑定plantingDate -->
                <up-form-item label="栽种年月">
                  <up-input v-model="formData.plantingDate" maxlength="10" border="none" input-align="left" readonly placeholder=""/>

                </up-form-item>
              </up-col>
              <up-col span="6">
                <up-form-item label="干周" prop="weekday">

                  <up-input v-model="formData.weekday" maxlength="10" border="none" input-align="left" readonly placeholder=""/>

                  <template #right>
                    <text style="padding-left:12rpx;color:#ccc;font-size:14px">厘米</text>
                  </template>
                </up-form-item>
              </up-col>
            </up-row>
          </view>
  
          <view class="form-row-wrap">
            <up-row gutter="10">
              <up-col span="6">
                <up-form-item label="东西冠幅" prop="canopyeastwest">

                  <up-input v-model="formData.canopyeastwest" maxlength="10" border="none" input-align="left" readonly placeholder=""/>

                  <template #right>
                    <text style="padding-left:12rpx;color:#ccc;font-size:14px">米</text>
                  </template>
                </up-form-item>
              </up-col>
              <up-col span="6">
                <up-form-item label="南北冠幅" prop="canopysouthnorth">

                  <up-input v-model="formData.canopysouthnorth" maxlength="10" border="none" input-align="left" readonly placeholder=""/>

                  <template #right>
                    <text style="padding-left:12rpx;color:#ccc;font-size:14px">米</text>
                  </template>
                </up-form-item>
              </up-col>
            </up-row>
          </view>
        </view>
  
      </up-form>
    </view>

  </template>
  

  <script setup>
  import { ref, reactive } from 'vue'
  import { onReady, onLoad, onShow, onUnload } from '@dcloudio/uni-app';
  import { treeDetailReq } from "@/api/tree-archive/tree-archive.js";
  import { useUserStore } from '@/pinia/user';
  
  // ========== 状态管理 ==========
  const formRef = ref(null)
  const userStore = useUserStore();
  

  // 表单数据【新增 plantingDate、treeSpeciesType】

  const formData = reactive({
    treetype: '',

    treeSpeciesType: '', // 新增：树种类型

    treeheight: '',
    dbh: '',
    treelevel: '',
    treeleveltext: '',
    managedutyunit: '',
    oldtreeownership: '',
    oldtreeownershipText: '',
    latinname: '',

    estimationtreeage: '', // 字段保留不再使用
    plantingDate: '', // 新增：栽种年月

    canopysouthnorth: '',
    canopyeastwest: '',
    weekday: '',
    growlocation: '',
    growthenvironment: '',
    treeImgList: [],
    address: '',
    latitude: '',
    longitude: '',
    road: '',
    maintainunit: ''
  })
  

  // 图片格式转换函数

  const formatImgList = (imgList) => {
    if (!imgList || imgList.length === 0) return [];

    return imgList.map(item => {
      if (typeof item === 'string') {
        return { url: item };
      } else {
        return item;
      }
    });
  }
  
  // ========== 生命周期 ==========
  onUnload(() => {
    uni.reLaunch({
      url: '/pages-sub/data/tree-archive/index'
    })
  })
  
  onLoad((options) => {

    const pages = getCurrentPages();
    const currentPage = pages[pages.length - 1];
    if (currentPage.getOpenerEventChannel) {
      const eventChannel = currentPage.getOpenerEventChannel();
      eventChannel.on('logData', (data) => {
        console.log('接收上一页完整数据：', data);
        Object.assign(formData, data);

      });
    }
  })
  
  onShow(async () => {})
  onReady(() => {});
  </script>
  

  <style scoped lang="scss">

  .page-container {

    padding: 25rpx;
    box-sizing: border-box;
    background: #fff;
  }
  
  .location-form-item {
    padding-right: 10rpx;
  }
  

  :deep(.u-input__inner) {
    color: #333;
    background-color: transparent !important;
  }
  

  .show-text {
    font-size: 28rpx;
    color: #333;
    line-height: 80rpx;
    width: 100%;
    display: block;
    text-align: left;
  }

  .form-row-wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    :deep(.u-form-item) {
      position: relative;
      margin-bottom: 0 !important;
    }
  }
  .form-row-wrap + .u-form-item {
    margin-top: 25rpx !important;
  }
  .animated-area {
    margin-top: 10rpx;
  }

  </style>