mudu-vx/src/views/vxEwm/garden/park/components/enterpriseList.vue

<template>
  <div class="enterprise-list">
    <div class="serch-input">
      <div class="input-box">
        <input
          type="text"
          v-model="querParams.name"
          placeholder="请输入搜索关键词"
        />
        <div class="input-close" v-show="querParams.name">
          <van-icon name="clear" @click="querParams.name = undefined" />
        </div>
      </div>
      <div class="serch-btn" @click="onSearch"></div>
    </div>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div class="list-box">
        <div
          class="list-item"
          v-for="item in enterpriseList"
          :key="item.id"
          @click="onInfoClcik(item)"
        >
          <div class="item-name">{{ item.name }}</div>
          <div class="item-icon"><van-icon name="arrow" color="#CCCCCC" /></div>
        </div>
      </div>
    </van-list>
  </div>
</template>

<script>
import xApi from '@/api/xApi'
export default {
  props: {
    parkProfileId: {
      type: String,
    },
  },
  data() {
    return {
      total: 0,
      querParams: {
        ParkID: null,
        page: 1,
        limit: 10,
        name: undefined,
      },
      enterpriseList: [],
      loading: false,
      finished: false,
    }
  },
  created() {
    this.querParams.ParkID = this.parkProfileId

    console.log(this.querParams)
  },
  methods: {
    onLoad() {
      setTimeout(() => {
        this.getList()
      }, 500)
    },
    getList() {
      xApi.allenterpriselist(this.querParams).then((res) => {
        this.enterpriseList.push(...res.data)
        this.total = res.count
        this.loading = false
        // 数据全部加载完成
        if (this.enterpriseList.length >= this.total) {
          this.finished = true
        }
        this.querParams.page++
      })
    },
    onSearch() {
      this.loading = false
      this.finished = false
      this.querParams.page = 1
      this.querParams.limit = 10
      this.total = 0
      this.enterpriseList = []
      this.getList()
    },
    onInfoClcik(item) {
      this.$router.push({
        path: '/enterpriseData',
        query: {
          id: item.id,
          isShow: true,
        },
      })
    },
  },
}
</script>

<style lang="scss" scoped>
div {
  box-sizing: border-box;
}
.enterprise-list {
  height: 100%;
  overflow: hidden;
}
.serch-input {
  height: 0.8rem;
  border-radius: 28px;
  background-color: #fff;
  box-shadow: 0 2px 12px 0 #0000001a;
  padding: 0 0.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.2rem;
  .input-box {
    flex: 1;
    display: flex;
    align-items: center;
    input {
      border: 0;
      width: 90%;
      height: 0.5rem;

      line-height: 0.5rem;
      font-size: 0.22rem;
      font-weight: 500;
    }
    input::placeholder {
      font-size: 0.22rem;
      color: #cccccc;
      font-weight: 500;
    }
  }
}
.serch-btn {
  height: 0.3rem;
  width: 0.3rem;
  background: url('~@/assets/image/vxEwm/search-btn.png');
  background-size: 100% 100%;
}
/deep/ .van-list {
  height: calc(100% - 1.4rem);
  overflow-y: auto;
  border-radius: 16px;
}

.list-box {
  border-radius: 25px;
  background-color: #fff;
  box-shadow: 0 2px 12px 0 #0000001a;
  padding: 0 0.35rem;

  .list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.25rem 0;
    border-bottom: 1px solid RGBA(218, 218, 218, 0.6);
    .item-name {
      font-size: 0.24rem;
      font-weight: bold;
      color: #333333;
      white-space: nowrap; /* 让文本只显示在一行 */
      overflow: hidden; /* 隐藏溢出部分 */
      text-overflow: ellipsis; /* 显示省略号 */
    }
  }
  & > div:first-child {
    border-radius: 16px 16px 0 0;
  }
  & > div:last-child {
    border-radius: 0 0 16px 16px;
    border: 0;
  }
}
/deep/.van-cell__value {
  font-weight: 550;
  font-size: 0.24rem;
  color: #333333;
}
</style>