WorkloadApp/pages/daily/daily.vue

<template>
  <view class="page">
    <view class="content">
      <view class="head">
        <span class="title">项目日志</span>
        <navigator
          url="/pages/daily/form"
          class="self"
          open-type="navigate"
          hover-class="navigator-hover"
        >
          写日志
        </navigator>
      </view>
      <uni-search-bar
        bgColor="#FFFFFF"
        :radius="20"
        placeholder="请输入日志标题"
        v-model="searchKeyword"
        @confirm="handelSearchConfirm"
      />
      <scroll-view
        class="list"
        :scroll-top="scrollTop"
        scroll-y="true"
        @scrolltolower="scrollToLower()"
      >
        <view class="item" v-for="item in list" :key="item.log_id">
          <!-- <view class="time">{{ item.c_time | getTime }}</view> -->
          <view class="box" @click="() => handlerDetailClick(item.log_id)">
            <!-- <view class="title">{{ item.author_name }}的金科环境项目日志</view> -->
            <!-- <view class="desc"> -->
            <view class="desc-title">{{ item.c_time | getTime }}</view>
            <view class="desc-content">
              {{ item.author_name }}的金科环境项目日志
            </view>
            <!-- </view> -->
          </view>
        </view>
        <view class="loadmore">{{ loadMoreText }}</view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import { queryDaily } from "@/services/daily";
import mixin from "@/utils/listMixin";
import moment from "moment";

export default {
  mixins: [mixin],
  data() {
    return {
      searchKeyword: "",
      scrollTop: 0,
      loadMoreText: "",
      list: [],
    };
  },

  onShow() {
    this.pagination.currentPage = 1;
    this.initData();
  },
  filters: {
    getTime: (time) => {
      return moment(time).format("YYYY-MM-DD HH:mm");
    },
  },
  methods: {
    handelSearchConfirm() {},
    scrollToLower() {
      if (this.list.length >= this.pagination.total) {
        this.loadMoreText = "没有更多数据了";
        return;
      }
      this.pagination.currentPage++;
      this.initData();
    },
    async getList(params) {
      let res = await queryDaily(params);
      this.list = res.data.list;
      return res.data;
    },
    handlerDetailClick(id) {
      uni.navigateTo({
        url: `/pages/daily/form?id=${id}`,
      });
    },
  },
};
</script>

<style lang="less" scoped>
.content {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding-top: 150rpx;
  ::v-deep {
    .uni-searchbar {
      width: 100%;
      .uni-searchbar__box {
        border: 1px solid #ccc;
      }
    }
  }
}
.head {
  width: calc(100% - 60rpx);
  padding: 40rpx;
  position: fixed;
  background: url("~@/static/app-plus/menu-title-bg.png") no-repeat center;
  background-size: 100% 100%;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1;
  top: 0;
  .title {
    font: 18px bold;
    color: #fff;
  }
  .self {
    font: 14px;
    padding-left: 20rpx;
    color: #fff;
  }
}
.list {
  width: 90%;
  height: calc(90vh - 130rpx);
  ::v-deep {
    .uni-list--border-top {
      background-color: transparent;
    }
    .uni-list-item__container {
      padding: 12rpx 30rpx;
    }
  }
}
.loadmore {
  padding: 30rpx 0px;
  font-size: 16px;
  color: gray;
  text-align: center;
}
.item {
  margin-top: 20rpx;
  .time {
    padding-left: 25rpx;
    font-size: 24rpx;
    color: #7a7a7a;
    line-height: 32rpx;
    margin-bottom: 10rpx;
  }
  .box {
    padding: 20rpx;
    border-radius: 5rpx;
    border: 1px solid #ccc;
    box-shadow: 0 1rpx 4rpx rgba(255, 255, 255, 0.2);
    .title {
      font-size: 28rpx;
      font-weight: 400;
      color: #4a90e2;
      line-height: 40rpx;
      margin-bottom: 18rpx;
    }
    .desc {
      display: flex;
      font-size: 28rpx;
      font-weight: 400;
      color: #4a4a4a;
      line-height: 40rpx;
      .desc-title {
        flex-shrink: 1;
      }
      .desc-content {
        flex: 1;
        display: -webkit-box;
        -webkit-line-clamp: 2; /* 显示的行数 */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
      }
    }
  }
}
</style>