|
@@ -0,0 +1,290 @@
|
|
|
+<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>
|