xiamen-sb-uniapp/pages/check/check.vue

<template>
  <view>

<!--    <my-add-button
      @handleClick="handleClick"
    />-->
    <common-tabs :list='list' :current="current" @change='change' />
    <view class="p-top8">
      <template v-if="listData.length > 0">
        <view
          class="mx3 my2 p3 bg-color-white box p-relative"
          v-for="(item, index) in listData"
          :key="item.id"
          @click="handleDetail(item.id)"
          @longpress="showMask(item.id,$event)"
        >
				<common-mask :item="item" :maskId="maskId" @hide='maskId = 0' @del='handleDel(item.id)' />
          <view class="d-flex j-between border-bottom pb-2 a-center">
            <view class="text-color-b f-size-26">{{ item.name }}</view>
            <my-badge
              :text="statusMap[item.status]"
              :status="dict[item.status]"
            />
          </view>
          <view class="mt-2 d-flex j-between">
            <view class="text-color-3 f-size-32 f-weight-bold">{{
              item.sbName
            }}</view>
          </view>
          <view class="f-size-26 text-color-6 f-weight-4 mt-2">{{
            item.startTime
          }}</view>
        </view>
        <view class="py3">
          <u-loadmore :status="status" />
        </view>
      </template>
      <template v-else>
        <view class="empty">
          <u-empty text="暂无数据" mode="list"></u-empty>
        </view>
      </template>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      current: 0,
        sbId: "",
      // 加载更多
      status: "loadmore",
      page: 1,
      limit: 10,
      type: "",
      loadMore: true,
      listData: [],
      statusMap: null,
      sbStatusMap: null,
      dict: null,
			maskId: 0,
    };
  },
  onPullDownRefresh() {
    // 请求结束取消刷新
    this.page = 1;
    this.loadMore = true;
    this.listData = [];
    this.initData();
    uni.stopPullDownRefresh();
  },
  onReachBottom() {
    if (this.loadMore) {
      this.page++;
      this.initData();
    }
  },
  onLoad(options) {
      this.sbId = options.sbId
    this.initData();
    this.statusMap = this.$DictCache.getLabelByValueMapByType(
      this.$DictCache.TYPE.CHECK_JOB_STATUS
    );
    this.sbStatusMap = this.$DictCache.getLabelByValueMapByType(
      this.$DictCache.TYPE.CHECK_JOB_SB_STATUS
    );
    this.list = [{ label: "全部", value: "" }].concat(
      this.$DictCache.getChildrenList(this.$DictCache.TYPE.CHECK_JOB_STATUS)
    );
    this.dict = this.$DictCache.COLOR.CHECK_JOB_STATUS;
  },
	onHide() {
		this.maskId = 0
	},
  methods: {
		showMask(id, e) {
			this.maskId = id
			// #ifdef H5
			e.preventDefault()
			// #endif
		},
    handleDel(id) {
      let that = this;
      let params = [];
      params.push(id);
      uni.showModal({
        title: "提示",
        content: "您确认删除吗?",
        success: (res) => {
          if (res.confirm) {
            this.$Http.deleteCheckJobs(params).then((res) => {
              uni.showToast({ title: "删除成功" });
              this.page = 1;
              this.loadMore = true;
              this.listData = [];
              this.initData();
            });
          } else if (res.cancel) {
          }
        },
      });
    },
    // 详情
    handleDetail(id) {
      // if (index == 0) {
      // 	uni.navigateTo({
      // 		url: '../check-add/check-add'
      // 	});
      // } else {
      // 	uni.navigateTo({
      // 		url: '../check-detail/check-detail'
      // 	});
      // }
			if (this.maskId != 0) return this.maskId = 0
      uni.navigateTo({
        url: "/pages/check-detail/check-detail?detailId=" + id,
      });
    },
    // tab
    change(index) {
      this.current = index;
      if (index == 0) {
        this.type = "";
      } else {
        this.type = index;
      }
      this.page = 1;
      this.loadMore = true;
      this.listData = [];
      this.initData();
    },
    handleClick() {
      uni.navigateTo({
          url: "/pages/check-add/check-add-test",
      });
    },
    initData() {
      const that = this;
      that.status = "loading";
      this.$Http
        .getCheckJobPage({
          pageNum: this.page,
          pageSize: this.limit,
          sbId: this.sbId,
          type: 1,
          filter: 0,
          status: this.type,
        })
        .then((res) => {
          const data = res.data.rows;
          if (data && data.length > 0 && data.length < that.limit) {
            that.status = "nomore";
            that.loadMore = false;
          } else if (data.length == that.limit) {
            that.status = "loadmore";
          } else {
            that.status = "nomore";
          }
          that.listData = [...that.listData, ...data];
        });
    },
  },
};
</script>

<style>
page {
  background-color: #f4f4f4;
}

.box {
  padding-right: 0;
  border-radius: 20rpx;
}
</style>