check-uniapp/pages/index/index.vue

<template>
  <view class="orderPage">
    <van-sticky :offset-top="40">
      <van-tabs
        sticky
        v-model="searchForm.basetype"
        class="van-hairline--bottom"
        @click="tabList(searchForm.basetype)"
      >
        <van-tab
          v-for="(item, key) in tabOptions"
          :key="key"
          :title="`${item.name}(${item.num})`"
        ></van-tab>
      </van-tabs>
    </van-sticky>
    <!-- :finished="finished" -->
    <van-list
      v-model="loading"
      :immediate-check="false"
      :error.sync="error"
      error-text="请求失败，点击重新加载"
      finished-text="没有更多了~"
      @load="getList"
    >
      <view
        class="list-item"
        v-for="(item, key) in pcsjList"
        :key="key"
        @click="goDetail(item)"
      >
        <div class="nameTitle">{{ item.name }}</div>
        <div>下发时间：{{ item.jsdw }}</div>
        <div>结束时间：{{ item.jsdw }}</div>
        <div>核查图斑：{{ item.spotsnumber || 0 }}个</div>
        <div>核查人员：{{ item.jsdw }}</div>
        <view class="status">{{ item.status }}</view>
      </view>
    </van-list>
  </view>
</template>
<script>
import { listPcsj } from "@/api/apis.js";
export default {
  name: "list",
  components: {},
  data() {
    return {
      searchForm: {},
      tabOptions: [
        {
          name: "全部",
          num: 2,
        },
        {
          name: "未完成",
          num: 1,
        },
        {
          name: "已完成",
          num: 1,
        },
      ],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: "", //文件名称
        xzqdm: "", //区县名称
        filetime: "", //录入时间
        readtime: "", //处理时间
      },
      loading: false,
      pcsjList: [
        {
          name: "sjcdsicjdifc",
          status: 0,
        },
        {},
        {},
        {},
        {},
        {},
      ],
      total: 0,
    };
  },
  mounted() {
    // this.getList();
  },

  unmounted() {},
  methods: {
    getList() {
      this.loading = true;
      listPcsj(this.queryParams).then((res) => {
        console.log(res, "00s00s");
        this.pcsjList = res.rows;
        this.total = res.total;
        this.loading = false;
      });
    },
    //跳转到详情页
    goDetail(value) {
      uni.setStorage({
        key: "my_param",
        data: value,
        success: () => {
          uni.switchTab({ url: "/pages/check/index" });
        },
      });
      //   uni.navigateTo({
      //     url: "/pages/check/index?item=" + value,
      //   });
    },
  },
};
</script>
<style scoped lang="scss">
page {
  background: $page-bg-color;
  height: 100%;
}

.orderPage {
  padding: 30rpx;
  background: azure;
  padding-bottom: 50px;

  .list-item {
    background: #fff;
    padding: 40rpx 20rpx;
    border-radius: 20rpx;
    margin-bottom: 30rpx;
    position: relative;

    .nameTitle {
      color: red;
      line-height: 50rpx;
    }

    .status {
      width: 100rpx;
      height: 100rpx;
      background: aqua;
      position: absolute;
      right: 20rpx;
      top: 20rpx;
    }
  }
}
</style>