android-cloud-H5/pages/rtcEngine/components/CloudList.vue

<template>
  <!-- 云机列表 -->
  <div class="cloud-list-wrap" >
    <van-list :style="listStyle" :finished="false">
      <div v-for="item in list" :key="item.userCardId" class="cloud-list-item-wrap flex" :class="{'cloud-list-item-active': userCardId === item.userCardId}" @click="changeCloud(item)">
        <!-- 云机套餐头像 -->
        <div class="cloud-id-avatar-wrap items-center pr-2">
          <van-image
            width="24"
            height="24"
            :src="imgFun(item.buyVipType, item.androidVersion)"
          >
            <!-- 图片加载中显示 -->
            <template v-slot:loading>
              <van-loading type="spinner" size="20" />
            </template>
          </van-image>
        </div>
        <!-- 云机名称和ID -->
        <div class="cloud-id-desc-wrap">
          <div class="cloud-id-name mb-1">{{ item.diskName }}</div>
          <div class="cloud-id-detail-wrap">ID {{ item.userCardId }}</div>
        </div>
      </div>
    </van-list>
  </div>
</template>

<script>
export default {
  name: 'CloudList',
  props: {
    // 云机列表高度
    height: {
      type: String,
      default: '50px'
    },
    // 当前云机id
    userCardId: {
      type: [String, Number],
      default: ''
    },
    // 当前选择的云机分组id 默认-1, 代表全部设备
    activeGroupId: {
      type: Number,
      default: -1,
    },
    // 所有云机列表
    cloudList: {
      type: Array,
      default: () => []
    },
    // 云机套餐的图标
    imgFun: {
      type: Function,
      default: () => () => {}
    }
  },
  computed: {
    // 云机列表高度
    listStyle() {
      return {height: this.height, overflowY: 'auto'}
    },
    list() {
      // 如果当前分组id为-1, 则返回所有云机列表
      if(this.activeGroupId === -1 ) {
        return this.cloudList;
      }
      // 过滤出当前分组的云机列表
      return this.cloudList.filter(item => item.groupId === this.activeGroupId);
    }
  },
  methods: {
    // 切换云机
    changeCloud(item) {
      // 如果当前云机id和选中的云机id相同, 则不做任何操作
      if(+this.userCardId === item.userCardId) return;
      this.$emit('changeCloud', item);
      // 关闭popup
      this.$emit('update:levitatedSphereVisible', false);
    }
  }
}
</script>

<style lang="scss" scoped>
.cloud-list-item-wrap{
  padding: 8px 16px;
  border: 1px solid transparent;

  &.cloud-list-item-active{
    background-color: rgba(254,174,77,0.1);
    border: 1px solid #FEAE4D;
  }
}
.cloud-id-avatar-wrap{
  display: flex;
}
.cloud-id-desc-wrap{
  text-align: left;
  flex: 1;
  color: #F9F9F9;
  font-size: 10px;
}
</style>