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

<template>
  <view>
    <!-- <view class="border-bottom">
      <u-tabs
        class="p-fixed left0 right0 zIndex"
        name="label"
        :list="list"
        :is-scroll="false"
        :current="current"
        @change="change"
      ></u-tabs>
    </view> -->
		<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 in listData"
          :key="item.id"
          @tap="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"
            ><text>{{ item.startTime }}</text></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,
      // 加载更多
      status: "loadmore",
      page: 1,
      limit: 10,
      type: "",
      loadMore: true,
      listData: [],
      statusMap: {},
      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() {
    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: '../lubrication-add/lubrication-add'
      // 	});
      // } else {
      // 	uni.navigateTo({
      // 		url: '../lubrication-detail/lubrication-detail'
      // 	});
      // }
			if (this.maskId != 0) return this.maskId = 0
      uni.navigateTo({
        url: "/pages/lubrication-detail/lubrication-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();
    },
    initData() {
      const that = this;
      that.status = "loading";
      this.$Http
        .getCheckJobPage({
          pageNum: this.page,
          pageSize: this.limit,
          type: 3,
          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>