product_wx/pages/subPackages/resourceReservation_manage/components/shareResources.vue

<template>
  <div class="shareResources">
    <div style="width: 82%">
      <van-tabs :active="active" @change="onChange">
        <!--          <van-tab title="会议室" :name="0"></van-tab>-->
        <!--          <van-tab title="打印机" :name="1"></van-tab>-->
        <!--          <van-tab title="办公桌" :name="2"></van-tab>-->
        <!--          <van-tab title="其他" :name="3"></van-tab>-->
        <van-tab :title="item.label" :name="item.value" v-for="item in resourceTypeList"></van-tab>
      </van-tabs>
    </div>
    <div class="shareListBody">
      <div class="shareItem" v-for="item in meetingList" @tap="toDetail(item)">
        <img :src="item.url" class="shareItemImg">
        <div class="shareItemRight">
          <span class="shareItemTitle">{{ item.roomName }}</span>
          <span class="shareItemInfo">位置：{{ item.position }}</span>
          <span class="shareItemInfo">容纳人数：<span style="color: rgba(3, 101, 249, 1)">{{ item.seatNumber }}人</span></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {getByCodes, getMeetingRoomList} from "@/js_sdk/http";
import dayjs from "dayjs";

export default {
  name: "shareResources",
  data() {
    return {
      dc_key: ['RESOURCE_TYPE'],
      active: 1,
      resourceTypeList: [],
      dic_SelectList: [],
      meetingList: []
    }
  },
  created() {
    this.getByCodes()
    this.getList()
  },
  onLoad(options){

  },
  methods: {
    async getByCodes() {
      let data = await getByCodes(JSON.stringify(this.dc_key));
      this.dic_SelectList = this.$common.handleDicList(data);
      this.resourceTypeList = this.dic_SelectList.RESOURCE_TYPE

    },
    getList() {
      const _this = this
      _this.meetingList = []
      const data = {
        pageNum : 1,
        pageSize : 100,
        useRange : 2, // 1 内部 2 园区企业
        resourceType : this.active
      }
      getMeetingRoomList(data).then(res => {
        console.log('res', res)
        if (res.rows) {
          res.rows.forEach(function (item) {
            const jsonMap = _this.getItemJson(item)
            _this.meetingList.push(jsonMap)
          })
        }
      })
    },
    getItemJson(item) {
      item.url = JSON.parse(item.roomImg)[0].url
      console.log(item.url)
      return item
    },
    onChange(e) {
      console.log('e', e)
      this.active = e.detail.name
      this.getList()
    },
    toDetail(item) {
      uni.navigateTo({
        url: '/pages/subPackages/resourceReservation_manage/detail?id=' + item.id
      })
    }
  }
}
</script>

<style lang="scss">
.shareResources {
  margin-top: 24rpx;
  background: white;
  min-height: 1344rpx;
  padding-bottom: 100rpx;

  .shareListBody {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 16rpx;

    .shareItem {
      width: 686rpx;
      height: 224rpx;
      background: rgba(245, 247, 250, 1);
      box-sizing: border-box;
      display: flex;
      align-items: center;
      padding: 32rpx 24rpx;
      border-radius: 16rpx;
      margin-bottom: 24rpx;

      .shareItemImg {
        width: 220rpx;
        height: 160rpx;
      }

      .shareItemRight {
        display: flex;
        flex-direction: column;
        margin-left: 24rpx;

        .shareItemTitle {
          color: rgba(24, 23, 42, 1);
          font-size: 32rpx;
          font-weight: 600;
          margin-bottom: 16rpx;
        }

        .shareItemInfo {
          color: rgba(102, 102, 102, 1);
          font-size: 26rpx;
          line-height: 40rpx;
        }
      }
    }
  }
}
</style>