WorkloadApp/pages/daily/projectDaily.vue

<template>
  <view class="page">
    <view class="content">
      <view class="head">
        <span class="title">项目列表</span>
        <navigator
          :url="`/pages/daily/form?project_id=${project_id}`"
          class="self"
          open-type="navigate"
          hover-class="navigator-hover"
        >
          写日志
        </navigator>
      </view>

      <view class="search">
        <uni-search-bar
          bgColor="#FFFFFF"
          style="padding: 20rpx 30rpx"
          :radius="20"
          placeholder="请输入日志标题"
          v-model="filter.searchKeyword"
          @confirm="handelSearchConfirm"
        />
        <view class="selectRow">
          <view class="selectCol">
            <picker
              style="max-width: 80%"
              :range="[]"
              range-key="label"
              @change="handelChange"
            >
              <view class="pickerSlot">
                <view class="itemText"> 提交人 </view>
                <!-- v-if="selectedValues[index] === null" -->
                <image
                  class="triangle"
                  src="/static/triangle@2x.png"
                  mode="widthFix"
                />
              </view>
            </picker>
            <!-- <uni-icons
              v-if="selectedValues[index] !== null"
              type="closeempty"
              size="14"
              @click="cleanSelect(index)"
            ></uni-icons> -->
          </view>
          <view class="selectCol">
            <uniDatetimePicker
              style="max-width: 80%"
              type="daterange"
              hide-second
              clear-icon
              @change="handelTimePickerChange"
            >
              <view class="pickerSlot">
                <view class="itemText">
                  <!-- {{
                    timerange.length !== 0
                      ? `${timerange[0]}~${timerange[0]}`
                      : item.placeholder
                  }} -->
                  发布日期
                </view>
                <image
                  class="triangle"
                  src="/static/triangle@2x.png"
                  mode="widthFix"
                />
              </view>
            </uniDatetimePicker>
            <!-- <uni-icons
              v-if="timerange.length === 2"
              type="closeempty"
              size="14"
              @click="cleanSelect(index)"
            ></uni-icons> -->
          </view>
        </view>
      </view>
      <scroll-view
        class="list"
        :scroll-top="scrollTop"
        scroll-y="true"
        @scrolltolower="scrollToLower()"
      >
        <view class="item">
          <view class="box">
            <view class="title">张三的金科环境项目日志</view>
            <view class="desc">
              <view class="desc-title">日志概述：</view>
              <view class="desc-content">
                项目进展顺利项目进展顺利项目进项目进展顺利项目进展顺利项目进
              </view>
            </view>
            <view class="bottom">
              <view class="time">07-12 8:50</view>
              <view class="user">提交人：xxx</view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import uniDatetimePicker from "@/uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue";
import moment from "moment";
export default {
  components: {
    uniDatetimePicker,
  },
  data() {
    return {
      scrollTop: 0,
      filter: { searchKeyword: "" },
      project_id: "",
    };
  },
  methods: {
    handelSearchConfirm() {},
    handelChange() {},
    scrollToLower() {
      // if (this.projectList.length >= this.pagination.total) {
      //   this.loadMoreText = "没有更多数据了";
      //   return;
      // }
      // this.pagination.currentPage++;
      // this.initData();
    },
    handelTimePickerChange(time) {
      if (time.length !== 2) {
        return;
      }
      this.filter.start = moment(time[0]).format("YYYY-MM-DD 00:00:00");

      this.filter.end = moment(time[1]).format("YYYY-MM-DD 23:59:59");
    },
  },
  onLoad(options) {
    this.project_id = options.project_id;
  },
};
</script>

<style lang="less" scoped>
.content {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding-top: 150rpx;
}

.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 - 200rpx);
  ::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;

  .box {
    padding: 40rpx;
    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;
      }
    }
    .bottom {
      display: flex;
      justify-content: space-between;
      margin-top: 40rpx;
      font-size: 22rpx;
      font-weight: 400;
      color: #7a7a7a;
      line-height: 30rpx;
    }
  }
}
.search {
  width: 100%;
  ::v-deep {
    .uni-searchbar {
      width: 100%;
      .uni-searchbar__box {
        border: 1px solid #ccc;
      }
    }
  }
}
.selectRow {
  display: flex;
  height: 40px;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.selectCol {
  width: 200rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pickerSlot {
  width: 100%;
  height: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.itemText {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

.triangle {
  margin: 0;
  padding: 0;
  margin-left: 3px;
  width: 25rpx;
  margin-left: 5rpx;
}
</style>