jiliangxiaochengxu/pages/work/index.vue

<!-- @format -->

<template>
  <view
    style="height: 100vh; background-color: #f3f4f9; padding: 20rpx"
    class=""
  >
    <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 v-if="ledgerList.length">
      <view
        v-for="item in ledgerList"
        style="
          background-color: #fff;
          border-radius: 20rpx;
          padding: 20rpx;
          margin: 0rpx auto 20rpx;
        "
        class=""
      >
        <view @click="detailInfo(item)" class="">
          <view style="display: inline-block" class="">
            <view
              style="line-height: 60rpx; font-size: 36rpx; font-weight: 700"
              class=""
            >
              {{ item.title }}
            </view>
            <view>
              {{ item.typeName }}
            </view>
            <view style="line-height: 50rpx; color: #929292" class="">
              {{ item.createTime }}
            </view>
          </view>
          <view style="float: right; margin-top: 30rpx" class="">
            <view v-if="item.readStatus == 1" style="color: limegreen" class="">
              已读消息
            </view>
            <view v-if="item.readStatus == 0" style="color: red" class="">
              未读消息
            </view>
          </view>
        </view>
      </view>
    </view>
    <view v-else>
      <u-empty mode="message"> </u-empty>
    </view>
  </view>
</template>

<script>
import { getReadMessageState } from "@/api/work.js";

import { msgList } from "@/api/work.js";
export default {
  data() {
    return {
      tabsList: [
        {
          name: "未读",
          state: 0,
        },
        {
          name: "已读",
          state: 1,
        },
      ],
      readColor: {
        已撤回: "#fa3534",
        已接收: "#2979ff",
        待提交: "#2979ff",
        备案中: "#2979ff",
        已拒绝: "#fa3534",
        勿备案: "#fa3534",
        未备案: "#909399",
        免备案: "#909399",
        已退回: "#fa3534",
      },

      read: [], //备案字典
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        readStatus: 0,
      },
      ledgerList: [],
      total: 0,
      current: 0,
      swiperDotIndex: 0,
      data: [
        {
          image: "/static/images/banner/banner01.jpg",
        },
        {
          image: "/static/images/banner/banner02.jpg",
        },
        {
          image: "/static/images/banner/banner03.jpg",
        },
      ],
    };
  },
  onShow() {
    this.getList();
    uni.startPullDownRefresh();
    getReadMessageState().then(({ data }) => {
      uni.setTabBarBadge({
        //显示数字
        index: 1, //tabbar下标
        text: `${data.count}`, //数字
      });
    });
  },
  onLoad() {
    // useDict("read_status").then((res) => {
    // 	this.read = res;
    // });
    this.getList();
    uni.startPullDownRefresh();
  },
  onPullDownRefresh() {
    this.getList();
    setTimeout(function () {
      uni.stopPullDownRefresh();
    }, 800);
  },
  methods: {
    handleChange(row) {
      this.queryParams.readStatus = row.state;
      this.getList();
    },
    detailInfo(item) {
      uni.navigateTo({
        url: "/pages/work/detailInfo?id=" + item.id,
      });
    },
    getList() {
      uni.showLoading({
        title: "加载中...",
      });
      msgList({
        ...this.queryParams,
      }).then(({ rows, total }) => {
        this.ledgerList = rows;
        this.total = 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++;

          msgList({
            ...this.queryParams,
          }).then(({ rows, total }) => {
            this.ledgerList = [...this.ledgerList, ...rows];
            this.total = total;
          });
        }
        setTimeout(() => {
          uni.hideLoading();
        }, 500);
      }
    },
    clickBannerItem(item) {
      console.info(item);
    },
    changeSwiper(e) {
      this.current = e.detail.current;
    },
    changeGrid(e) {
      this.$modal.showToast("模块建设中~");
    },
  },
};
</script>

<style lang="scss">
/* #ifndef APP-NVUE */
page {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background-color: #fff;
  min-height: 100%;
  height: auto;
}

view {
  font-size: 14px;
  line-height: inherit;
}

/* #endif */

.text {
  text-align: center;
  font-size: 26rpx;
  margin-top: 10rpx;
}

.grid-item-box {
  flex: 1;
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 15px 0;
}

.uni-margin-wrap {
  width: 690rpx;
  width: 100%;
}

.swiper {
  height: 300rpx;
}

.swiper-box {
  height: 150px;
}

.swiper-item {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  height: 300rpx;
  line-height: 300rpx;
}

@media screen and (min-width: 500px) {
  .uni-swiper-dot-box {
    width: 400px;
    /* #ifndef APP-NVUE */
    margin: 0 auto;
    /* #endif */
    margin-top: 8px;
  }

  .image {
    width: 100%;
  }
}
</style>