aircraft-pilot/aircraft/server/equipment/equipment.vue

<template>
  <view class="aircraft-equipment">
    <!-- 顶部区域 -->
    <Topnav :topLevel="topLevel" title="爱尚云" />
    <view class="header">
      <view class="header-content">
        <u-image width="100%" :src="fileUrl + banner" mode="widthFix" />
        <view class="top-abs">
          <view class="title">我的设备</view>
        </view>
      </view>
    </view>

    <!-- 设备列表区域 -->
    <scroll-view scroll-y class="device-list">
      <view
        class="device-item"
        v-for="(item, index) in deviceList"
        :key="index"
      >
        <u-image
          class="device-image"
          :src="item.image"
          mode="widthFix"
        ></u-image>
        <view class="device-info">
          <text class="device-name">{{ item.name }}</text>
          <text class="device-model">{{ item.model }}</text>
        </view>
        <button class="detail-btn" @click="goToDetail(item.id)">
          查看详情
        </button>
      </view>
    </scroll-view>

    <u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>
import { tools } from "@/utils/utils.js";
import Topnav from "@/components/topnav/index.vue";

export default {
  // #ifdef MP
  options: {
    styleIsolation: "shared"
  },
  // #endif
  components: { Topnav },
  props: {
    topLevel: {
      type: Number,
      default: 0
    },
  },
  data() {
    return {
      fileUrl: "/static/", //静态资源基础路径
      banner: "devicebg.png",
      deviceList: [],
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    // 初始化
    async init() {
      // 获取设备列表
      const devicesRes = await this.$api.getDevices();
      if (!devicesRes) {
        this.$refs.uToast.show({
          type: 'error',
          title: '设备列表获取失败!'
        });
        return;
      }

      // 为每个设备获取详情
      const deviceList = [];
      for (const device of devicesRes.records) {
        try {
          const detailRes = await this.$api.getDevicesDetail(device.id);
          if (detailRes) {
            // 使用第一张图片作为设备图片
            const image = detailRes.deviceImages && detailRes.deviceImages.length > 0 
              ? detailRes.deviceImages[0].fileFullPath
              : '/static/drone.png';
              
            deviceList.push({
              id: device.id,
              name: device.name,
              model: device.model,
              image: image
            });
          }
        } catch(err) {
          console.error('获取设备详情失败:', err);
          // 使用基本信息添加到列表
          deviceList.push({
            id: device.id,
            name: device.name,
            model: device.model,
            image: '/static/drone.png'
          });
        }
      }
      
      this.deviceList = deviceList;
    },

    // 跳转到设备详情 
    goToDetail(id) {
      uni.navigateTo({
        url: `/aircraft/server/equipment/equipmentDetail?id=${id}`,
      });
    },
  },
};
</script>

<style scoped lang="scss">
.aircraft-equipment {
  min-height: 100vh;
  background-color: #f5f5f5;

  .header {
    background: linear-gradient(180deg, #fff7e6 0%, #fff9ed 100%);
    position: relative;
    width: 100%;
    height: 261rpx;

    .header-content {
      position: relative;
      height: 100%;

      .top-abs {
        position: absolute;
        top: 72px;
		
        .title {
          margin-left: 34rpx;
          font-family: Source Han Sans SC;
          font-weight: 800;
          font-size: 50rpx;
          color: #333333;
        }
      }

      .header-image {
        position: absolute;
        right: 0;
        bottom: 0;
      }
    }
  }

  .device-list {
    padding: 24rpx;
    padding-top: 0;
    height: calc(100vh - 160px);
    box-sizing: border-box;
    
    .device-item {
      height: 200rpx;
      background: #ffffff;
      border-radius: 16rpx;
      margin-bottom: 26rpx;
      padding: 30rpx;
      display: flex;
      align-items: center;

      .device-image {
        width: 142rpx;
        height: 142rpx;
        background: #f3f3f3;
        border-radius: 12rpx;
        border: 2rpx solid #cccccc;
      }

      .device-info {
        flex: 1;
        margin-left: 24rpx;
		margin-bottom: 32rpx;
        .device-name {
		  font-family: Source Han Sans SC;
		  font-weight: bold;
		  font-size: 36rpx;
		  color: #333333;
		  display: block;
		  margin-bottom: 16rpx;
        }

        .device-model {
		  font-family: Source Han Sans SC;
		  font-weight: 400;
		  font-size: 32rpx;
		  color: #666666;
		  display: block;
        }
      }

      .detail-btn {
        border: none;
        background: #fee547;
        border-radius: 12rpx;

        font-family: Source Han Sans SC;
        font-weight: bold;
        font-size: 30rpx;
        color: #333333;
      }
    }
  }
}
</style>