jiliangxiaochengxu/pages/verification/verificationList.vue

<!-- @format -->
<!-- @format -->

<template>
  <view class="container">
    <view @click="handleApplicat" class="createFixed">
      <u-icon name="plus" color="#fff" size="14"></u-icon
      ><span style="margin-left: 10rpx">检定申请</span>
    </view>

    <view style="margin: 15rpx 0" v-if="activeContent == '我的申请'">
      <view style="background: #fff; padding: 10rpx 0; margin-bottom: 15rpx">
        <u-search
          @custom="sousuo"
          shape="square"
          placeholder="请输入检定单编号"
          style="width: 95%; margin: 0rpx auto"
        ></u-search>
      </view>

      <view
        style="
          width: 100%;
          display: flex;
          justify-content: center;
          margin-bottom: 30rpx;
        "
      >
        <u-tabs
          :itemStyle="{ width: '250rpx', marginBottom: '20rpx' }"
          :lineWidth="50"
          :activeStyle="{ color: '#3c9cff' }"
          :list="tabsList"
          @click="handleChange"
        ></u-tabs>
      </view>
      <view
        class="contentItems"
        @click="handleDetails(item)"
        v-for="item in ledgerList"
        :key="item.id"
      >
        <view
                class="rightTipc"
                :style="{
              background: item.checkMethod == '1' ? '#3c9cff' : '#19be6b',
            }"
        >{{item.checkMethod == "1" ? "外检" : "送检"}}</view
        >
        <view class="content">
          <!-- <view class="title">器具名称</view> -->
          <view
            style="color: black; font-size: 36rpx; font-weight: 700"
            class="message"
            >{{ item.instrumentSummary }}
          </view>
        </view>
        <view class="content">
          <view class="title"
            >检定单编号:
            <text
              class="message"
              style="
                margin-left: 10rpx;
                color: red;
                font-weight: 700;
                font-size: 30rpx;
              "
            >
              {{ item.number }}
            </text>
          </view>
        </view>

        <view class="content">
          <view class="title">申请人:</view>
          <view style="width: 100rpx" class="message">{{
            item.startUserName
          }}</view>
        </view>
        <view class="content">
          <view class="title">发起时间:</view>
          <view style="padding-top: 5rpx" class="message">{{
            item.createTime
          }}</view>
          <!-- </view> -->
        </view>
        <view style="display: flex; justify-content: space-between" class="">
          <view style="display: flex" class="content">
            <view class="title">申请人手机号:</view>
            <view style="padding-top: 5rpx" class="message">{{
              item.startUserMobile
            }}</view>
          </view>
          <view style="display: flex; align-items: center" class="content">
            <view class="title">器具数量:</view>
            <view style="padding-top: 5rpx" class="message">{{
              item.total
            }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getPageList } from "@/api/verification";
import { useDict, paraseDict } from "@/utils/index";
export default {
  data() {
    return {
      recordColor: {
        已撤回: "#fa3534",
        已接收: "#2979ff",
        待提交: "#2979ff",
        备案中: "#2979ff",
        已拒绝: "#fa3534",
        勿备案: "#fa3534",
        未备案: "#909399",
        免备案: "#909399",
        已退回: "#fa3534",
      },
      record: [], //备案字典
      activeContent: "我的申请",
      tabsList: [
        {
          name: "本年度",
          dateType: 0,
        },
        {
          name: "三年内",
          dateType: 1,
        },
        {
          name: "其他",
          dateType: 2,
        },
      ],
      ledgerList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        filingNo: "",
        orderByColumn: "createTime",
        isAsc: "Desc",
        dateType: 0,
      },
      total: 0,
    };
  },
  async onLoad() {
    useDict("ejian_instrFillingStatus").then((res) => {
      this.record = res;
    });
    this.getList();
    uni.startPullDownRefresh();
  },
  onPullDownRefresh() {
    this.getList();
    console.log("refresh");
    setTimeout(function () {
      uni.stopPullDownRefresh();
    }, 800);
  },
  onShow() {
    uni.$on("query", (query) => {
      if (query.a == "one") {
        console.log("query", query);
        console.log("11111111111111111111111");
        uni.startPullDownRefresh();
        setTimeout(() => {
          this.queryParams.pageNum = 1;
          this.queryParams.pageSize = 10;
          this.getList();
        }, 1500);
      }
    });
  },
  computed: {
    //备案状态
    recordStatus() {
      return (row) => {
        return paraseDict(this.record, row);
      };
    },
  },
  methods: {
    sousuo(val) {
      this.queryParams.number = val;
      this.getList();
    },
    getList() {
      getPageList({
        ...this.queryParams,
      }).then((res) => {
        this.ledgerList = res.rows;
        this.total = res.total;
        uni.hideLoading();
      });
    },
    onReachBottom() {
      //触底事件
      if (this.queryParams.pageNum * this.queryParams.pageSize >= this.total) {
        uni.showToast({
          title: "没有更多数据了",
          icon: "none",
          duration: 1000,
        });
        setTimeout(() => {
          uni.hideLoading();
        }, 500);
      } else {
        if (this.queryParams.pageNum <= this.queryParams.pageNum - 1) {
          setTimeout(() => {
            uni.hideLoading();
          }, 500);
        } else {
          uni.showLoading({
            title: "加载中",
          });
          this.queryParams.pageNum++;

          getPageList({
            ...this.queryParams,
          }).then(({ rows, total }) => {
            this.ledgerList = [...this.ledgerList, ...rows];
            this.total = total;
          });
        }
        setTimeout(() => {
          uni.hideLoading();
        }, 500);
      }
    },
    //备案申请
    handleApplicat() {
      uni.navigateTo({
        url: "/pages/verification/list",
        success: (res) => {},
        fail: () => {},
        complete: () => {},
      });
    },
    handleChange(row) {
      uni.showLoading({
        title: "加载中...",
      });
      this.queryParams.dateType = row.dateType;
      this.getList();
    },
    handleCurrentForm() {},
    handleDetails(item) {
      uni.navigateTo({
        url:
          "/pages/verification/institution?id=" +
          item.id +
          "&danwei=" +
          item.instrumentSummary +
          "&applypeople=" +
          item.startUserName +
          "&userMobile=" +
          item.startUserMobile +
          "&createTime=" +
          item.createTime +
          "&checkMethod=" +
          item.checkMethod,
        success: (res) => {},
        fail: () => {},
        complete: () => {},
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.createFixed {
  background: #2979ff;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200rpx;
  /* 宽度保持不变 */
  height: 70rpx;
  /* 高度保持不变 */
  border-radius: 90rpx;
  /* 设置为较大的值以形成胶囊形状 */
  position: fixed;
  right: 30rpx;
  bottom: 200rpx;
  color: white;
  z-index: 10;
}

.createNew {
  font-size: 30rpx;
  margin: 10rpx 0 10rpx 10rpx;
  color: #3c9ff3;
}

.container {
  height: 100vh;
  background: rgb(243, 244, 249);

  .contentItems {
    width: 93%;
    border-radius: 6px;
    background: #fff;
    margin: 20rpx auto 10rpx;
    padding: 10rpx 30rpx 10rpx;
    position: relative;
    overflow: hidden;

    .content {
      // border-bottom: 1px solid rgb(242, 242, 242);
      padding: 10rpx 0;
      display: flex;

      // justify-content: space-between;
    }

    .content:last-child {
      border-bottom: none;
    }

    .title {
      font-size: 28rpx;
      color: rgb(146, 146, 146);
      letter-spacing: 3rpx;
    }

    .message {
      font-size: 28rpx;
      color: rgb(146, 146, 146);
    }
  }
}

.rightTipc {
  position: absolute;
  top: 17rpx;
  right: -37rpx;
  text-align: center;
  font-size: 26rpx;
  height: 50rpx;
  line-height: 50rpx;
  width: 160rpx;
  transform: rotateZ(45deg);
  color: #fff;
  background: #2979ff;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
</style>