usky-web-mobile/src/components/list-test/list-test.vue

<template>
  <view class="site-wrapper" ref="contentWrapper">
    <!-- 筛选框start -->
    <view class="ding">
      <view class="cu-bar search bg-gray filter-section">
        <view class="search-form round bg-white">
          <text class="cuIcon-search"></text>
          <uni-easyinput v-model="nowSiteName" placeholder="请输入站点名称" prefixIcon="search" @focus="InputFocus" @blur="InputBlur" />
        </view>
        <view class="action">
          <button class="cu-btn bg-blue round" @click="searchData">查询</button>
        </view>
      </view>
    </view>
    <!-- 筛选框end -->

    <!-- 站点列表start -->
    <view class="site-items">
      <view class="cu-list menu-avatar">
        <view class="cu-item" :class="modalName == 'move-box-' + index ? 'move-cur' : ''" v-for="(item, index) in bindData" :key="index" :data-target="'move-box-' + index">
          <view class="cu-avatar round lg" v-bind:style="{ 'background-image': 'url(' + nowIcon + ')' }"></view>

          <view class="content" v-if="nowType == 1" @tap="goNowUrl(item)">
            <view class="text-grey site-tit">
              <text style="width: 260rpx" class="inOneLine">{{ item.siteName }}</text>

              <text style="font-size: 14px; text-align: right"> （ 共{{ item.siteAlarmCount }}个未处理告警 ） </text>
            </view>
          </view>

          <view class="content" v-else @tap="goNowUrl" @longpress="showDetail(item)">
            <view class="text-grey site-tit">
              {{ item.siteName }}
              <text>（共3个设备）</text>
            </view>
            <view class="showDetail" v-if="item.isShow" @tap.stop="goNowDetailUrl">查看详情</view>
          </view>

          <view class="nav-right num">
            <view class="text-grey">
              <text class="icon iconfont margin-right-xs margin-left-lg">&#xe629;</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 站点列表end -->
  </view>
</template>

<script>
export default {
  // name: 'listTest',
  props: {
    bindType: {
      type: Number,
      default: "",
    },
    bindData: {
      type: Array,
      default: "",
    },
    bindUrl: {
      type: String,
      default: "",
    },
    bindDetailUrl: {
      type: String,
      default: "",
    },
    bindIcon: {
      type: String,
      default: "",
    },
    bindNum: {
      type: String,
      default: "",
    },
    bindSiteName: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      modalName: null,
      nowData: this.bindData,
      nowUrl: this.bindUrl,
      nowDetailUrl: this.bindDetailUrl,
      nowIcon: this.bindIcon,
      nowNum: this.bindNum,
      nowType: this.bindType,
      nowSiteName: this.bindSiteName,
    };
  },
  onPullDownRefresh() {
    console.log("refresh");
    setTimeout(function () {
      uni.stopPullDownRefresh();
    }, 1000);
  },

  computed: {
    newSiteListData() {
      return this.nowData.map((item) => {
        this.$set(item, "isShow", false);
        return item;
      });
    },
  },

  mounted() {
    document.addEventListener("click", (e) => {
      if (e.target.className != "showDetail") {
        this.nowData.forEach((item) => {
          item.isShow = false;
        });
      }
    });
  },
  methods: {
    searchData() {
      // console.log("a: "+val, oldVal);
      this.$parent.getDataList({
        siteName: this.nowSiteName,
      });
    },

    // 隐藏显示
    showDetail(e) {
      // 存储点击那一项的状态
      const nowStatu = e.isShow;
      // 将每一项列表的isShow设置为false,让所有的列表都隐藏
      this.nowData.forEach((item) => {
        item.isShow = false;
      });
      // 用于再次点击该项的取反
      e.isShow = !nowStatu;
    },

    // 页面跳转
    goNowUrl(item) {
      if (item.siteAlarmCount) {
        uni.navigateTo({
          url: this.nowUrl + "?companyCode=" + item.companyCode,
          success: (res) => {},
          fail: () => {},
          complete: () => {},
        });
      }
    },

    goNowDetailUrl() {
      uni.navigateTo({
        url: this.nowDetailUrl,
        success: (res) => {},
        fail: () => {},
        complete: () => {},
      });
    },
    InputFocus(e) {
      this.InputBottom = e.detail.height;
    },
    InputBlur(e) {
      this.InputBottom = 0;
    },
  },
};
</script>

<style lang="scss">
.showDetail {
  position: absolute;
  background: #fff;
  box-shadow: 0 1px 6px 0 rgb(32 33 36 / 28%);
  padding: 0rpx 32rpx;
  border-radius: 10rpx;
  top: 42rpx;
  right: 0%;
  z-index: 3000000;
  font-size: $uni-font-size-base;
}
</style>