You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
615 lines
13 KiB
615 lines
13 KiB
<template>
|
|
<view class="page" @touchome.stop.prevent="preventHandler">
|
|
|
|
<view class="search">
|
|
|
|
<view class="search-input">
|
|
<image class="search-input-img" src="../../static/baseIcon/search.png" mode="aspectFill"></image>
|
|
<input class="search-input-text" placeholder="输入项目名称" @input="searchInput" :disabled="false" />
|
|
</view>
|
|
|
|
<text class="search-text" @click="drawerClick">筛选</text>
|
|
|
|
</view>
|
|
|
|
<scroll-view class="scrollviewCss" scroll-y="false" refresher-enabled="true" :refresher-triggered="triggered"
|
|
:refresher-threshold="45" refresher-background="#f8f8f8" @refresherrefresh="onRefresh"
|
|
@refresherrestore="onRestore" @refresherabort="onAbort" @scrolltolower="scrollBottem">
|
|
|
|
<view>
|
|
<view v-for="(item,index) in dataList" class="newslist" @click="itemClick(item)">
|
|
|
|
<view class="item">
|
|
|
|
<view class="item-name" v-html="highLight(item.projectName)">{{item.projectName}}</view>
|
|
<text class="item-date">{{item.orderDate}}</text>
|
|
|
|
</view>
|
|
<text class="item-num">{{item.pledgeRatePercent}}%</text>
|
|
<image src="../../static/baseIcon/zy.png" style="width: 15px;height: 15px;margin-left: 5px;"
|
|
mode="aspectFill">
|
|
</image>
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
<!-- 加载....没有更多 -->
|
|
<view style="line-height: 60rpx;margin-bottom: 50rpx;">
|
|
<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" />
|
|
</view>
|
|
</scroll-view>
|
|
|
|
<uni-drawer ref="drawer" width="320" mode="right">
|
|
|
|
<view class="drawerView">
|
|
<text style="color: #101010;font-size: 16px;font-weight: 600;font-family: sans-serif;">数据日期</text>
|
|
<view class="drawerView-date">
|
|
<input class="drawerView-date-text" v-model="listQuery.params.dataDateStart" placeholder="开始日期"
|
|
:disabled="true" @click="openDate(1)">
|
|
<text style="margin-left: 10px;margin-right: 10px;color: #777;">至</text>
|
|
<input class="drawerView-date-text" v-model="listQuery.params.dataDateEnd" placeholder="结束日期"
|
|
:disabled="true" @click="openDate(2)">
|
|
</view>
|
|
|
|
<!-- <text
|
|
style="color: #101010;font-size: 16px;font-weight: 600;font-family: sans-serif; margin-top: 20px;">选择项目</text> -->
|
|
|
|
|
|
<!-- <scroll-view scroll-y :show-scrollbar="true"
|
|
style="display: flex;flex-direction: column; margin-top: 20px;width: 100%; height:50%; overflow:auto;">
|
|
|
|
<view class="to_do_content_list" :class="{'to_do_finish':item.checked}"
|
|
v-for="(item,index) in personnelList" :key="index" @click="select(item.id)">
|
|
<view class="to_do_content_list_checkbox">
|
|
<view class="checkbox"></view>
|
|
</view> -->
|
|
<!-- 内容 -->
|
|
<!-- <view class="to_do_content_list_cont">{{item.date}}</view>
|
|
</view>
|
|
|
|
|
|
|
|
</scroll-view> -->
|
|
|
|
|
|
|
|
|
|
<view class="drawerView-bom">
|
|
|
|
<text class="drawerView-bom-text1" @click="resetClik">重置</text>
|
|
<text class="drawerView-bom-text2" @click="assignClick">确定</text>
|
|
|
|
</view>
|
|
|
|
<u-datetime-picker ref="datetimePicker" :closeOnClickOverlay='true' @close="cancelClick"
|
|
@cancel="cancelClick" @confirm="confirmClick" :show="datetimeShow" v-model="selectDate" mode="date"
|
|
:formatter="formatter">
|
|
|
|
</u-datetime-picker>
|
|
|
|
</view>
|
|
|
|
</uni-drawer>
|
|
</view>
|
|
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
formatTimeTwo
|
|
} from "@/utils/index";
|
|
export default {
|
|
data() {
|
|
return {
|
|
searchText: "",
|
|
search: {
|
|
calculatedValue: "",
|
|
endDate: "",
|
|
},
|
|
selectDate: "",
|
|
datetimeShow: false,
|
|
datetimeIndex: "1",
|
|
personnelList: [
|
|
|
|
],
|
|
triggered: true,
|
|
status: 'loadmore',
|
|
iconType: 'flower',
|
|
loadText: {
|
|
loadmore: '轻轻上拉',
|
|
loading: '努力加载中',
|
|
nomore: '拉也没用，没有了'
|
|
},
|
|
listQuery: {
|
|
current: 1,
|
|
size: 10,
|
|
params: {
|
|
projectName: "",
|
|
dataDateStart: "",
|
|
dataDateEnd: "",
|
|
}
|
|
},
|
|
loadingType: 'more', //加载更多状态
|
|
dataList: [
|
|
|
|
],
|
|
|
|
};
|
|
},
|
|
|
|
onShow() {
|
|
this.listQuery.current = 1
|
|
this.dataList = [];
|
|
this.loadData();
|
|
},
|
|
onLoad() {
|
|
|
|
},
|
|
// onPullDownRefresh() {
|
|
// this.listQuery.current = 1
|
|
// this.loadData('refresh');
|
|
// setTimeout(function() {
|
|
// uni.stopPullDownRefresh();
|
|
// }, 2000);
|
|
// },
|
|
// //加载更多
|
|
// onReachBottom() {
|
|
|
|
// },
|
|
onReady() {
|
|
/* #ifdef MP-WEIXIN */
|
|
// 微信小程序需要用此写法
|
|
this.$refs.datetimePicker.setFormatter(this.formatter)
|
|
/* #endif */
|
|
},
|
|
methods: {
|
|
// 禁止滑动
|
|
preventHandler() {
|
|
return
|
|
},
|
|
/* 滚动到底部 */
|
|
scrollBottem() {
|
|
console.log("滚动高度")
|
|
this.status = "nomore"
|
|
console.log("长度：》》》", this.dataList.length);
|
|
this.listQuery.current = this.listQuery.current + 1
|
|
this.loadData();
|
|
},
|
|
onRefresh() {
|
|
// setTimeout(() => {
|
|
|
|
// }, 2000)
|
|
console.log("进入");
|
|
|
|
this.listQuery.current = 1
|
|
this.loadData('refresh');
|
|
setTimeout(function() {
|
|
this.triggered = false;
|
|
uni.stopPullDownRefresh();
|
|
}, 2000);
|
|
},
|
|
/* 下拉被复位 */
|
|
onRestore() {
|
|
this.triggered = true; // 需要重置
|
|
console.log(this.triggered);
|
|
console.log("停止");
|
|
},
|
|
/* 下拉被中止，没下拉完就松手就会触发 */
|
|
onAbort() {
|
|
console.log("onAbort");
|
|
},
|
|
searchInput(e) {
|
|
console.log("searchText》》》", e.detail.value);
|
|
this.searchText = e.detail.value
|
|
|
|
this.listQuery.params.projectName = this.searchText
|
|
this.listQuery.current = 1
|
|
this.dataList = [];
|
|
console.log("searchInput>>",this.listQuery);
|
|
this.loadData("refresh");
|
|
},
|
|
highLight(value) {
|
|
console.log("highLight》》》", value);
|
|
if (value == '' || value == undefined || value == null)
|
|
return
|
|
if (value.includes(this.searchText)) {
|
|
value = value.replace(
|
|
this.searchText,
|
|
"<font style='color:red!important'>" + this.searchText + "</font>"
|
|
)
|
|
return value
|
|
} else {
|
|
return value
|
|
}
|
|
},
|
|
drawerClick() {
|
|
this.$refs['drawer'].open()
|
|
},
|
|
openDate(type) {
|
|
switch (type) {
|
|
case 1:
|
|
this.datetimeIndex = "1"
|
|
this.datetimeShow = true
|
|
break;
|
|
case 2:
|
|
this.datetimeIndex = "2"
|
|
this.datetimeShow = true
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
},
|
|
formatter(type, value) {
|
|
|
|
if (type === 'year') {
|
|
return `${value}年`
|
|
}
|
|
if (type === 'month') {
|
|
return `${value}月`
|
|
}
|
|
if (type === 'day') {
|
|
return `${value}日`
|
|
}
|
|
return value
|
|
},
|
|
cancelClick() {
|
|
this.datetimeShow = false
|
|
},
|
|
confirmClick(date) {
|
|
console.log('confirmClick', date)
|
|
console.log('confirmClick', formatTimeTwo(parseInt(date.value), "Y-M-D"))
|
|
|
|
switch (this.datetimeIndex) {
|
|
case "1":
|
|
this.listQuery.params.dataDateStart = formatTimeTwo(parseInt(date.value), "Y-M-D")
|
|
break;
|
|
case "2":
|
|
this.listQuery.params.dataDateEnd = formatTimeTwo(parseInt(date.value), "Y-M-D")
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
this.datetimeShow = false
|
|
|
|
},
|
|
// 点击item 选中
|
|
select(id) {
|
|
|
|
for (var i = 0; i < this.personnelList.length; i++) {
|
|
let item = this.personnelList[i]
|
|
|
|
if (item.id == id) {
|
|
item.checked = !item.checked
|
|
} else {
|
|
item.checked = false
|
|
}
|
|
|
|
}
|
|
|
|
let index = this.personnelList.findIndex((item) => item.id == id)
|
|
console.log("我被点击了", this.personnelList[index].date);
|
|
|
|
// this.personnelList[index].checked = !this.personnelList[index].checked
|
|
},
|
|
resetClik() {
|
|
this.listQuery.params = {
|
|
dataDateStart: "",
|
|
dataDateEnd: "",
|
|
}
|
|
},
|
|
|
|
assignClick() {
|
|
console.log('confirm', this.listQuery)
|
|
this.datetimeShow = false
|
|
this.listQuery.params.projectName = this.searchText
|
|
this.listQuery.current = 1
|
|
this.dataList = [];
|
|
this.$refs['drawer'].close()
|
|
|
|
this.loadData("refresh");
|
|
// uni.showToast({
|
|
// icon: "none",
|
|
// title: JSON.stringify(this.listQuery),
|
|
// duration: 5000,
|
|
// });
|
|
},
|
|
|
|
//加载商品 ，带下拉刷新和上滑加载
|
|
async loadData(type = 'add', loading) {
|
|
//没有更多直接返回
|
|
if (type === 'add') {
|
|
if (this.loadingType === 'nomore') {
|
|
return;
|
|
}
|
|
this.loadingType = 'loading';
|
|
} else {
|
|
this.loadingType = 'more';
|
|
}
|
|
|
|
var list = []
|
|
console.log('loadData', this.listQuery)
|
|
this.$api.projectListPage(this.listQuery).then((resp) => {
|
|
// if (resp.success) {
|
|
console.log('1111', resp)
|
|
|
|
this.listQuery.current=resp.current,
|
|
list = resp.records
|
|
|
|
console.log("消息列表", list)
|
|
// this.goodsList = list;
|
|
// let goodsList = await this.$api.json('goodsList');
|
|
if (type === 'refresh') {
|
|
this.dataList = [];
|
|
}
|
|
|
|
this.dataList = this.dataList.concat(list);
|
|
console.log("消息列表>>>>>", this.dataList.length)
|
|
//判断是否还有下一页，有是more 没有是nomore(测试数据判断大于20就没有了)
|
|
this.loadingType = this.dataList.length > list.total ? 'nomore' : 'more';
|
|
if (type === 'refresh') {
|
|
if (loading == 1) {
|
|
uni.hideLoading();
|
|
} else {
|
|
uni.stopPullDownRefresh();
|
|
}
|
|
}
|
|
|
|
}).catch(e => {
|
|
console.log('eeeee', e)
|
|
})
|
|
|
|
},
|
|
itemClick(item) {
|
|
console.log('itemClick', item)
|
|
uni.navigateTo({
|
|
url: '../index/RegulatoryReporting?projectSid=' + item.projectSid + "&orderDate=" + item.orderDate
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.popup-show {
|
|
overflow: hidden;
|
|
position: fixed;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.page {
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
.drawerView {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 15px 20px;
|
|
background: #fff;
|
|
|
|
.drawerView-date {
|
|
margin-top: 20px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
|
|
.drawerView-date-text {
|
|
text-align: center;
|
|
background-color: #F4F5F9;
|
|
border-radius: 20px;
|
|
padding: 10px 20px;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
|
|
.to_do_content_list {
|
|
position: relative;
|
|
padding: 15px;
|
|
margin: 15px;
|
|
border-radius: 5px;
|
|
background: #eee;
|
|
color: #666;
|
|
overflow: hidden;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
// .to_do_content_list::after {
|
|
// position: absolute;
|
|
// content: "";
|
|
// top: 0;
|
|
// bottom: 0;
|
|
// left: 0;
|
|
// width: 10px;
|
|
// background: #2C405A;
|
|
|
|
// }
|
|
|
|
.to_do_content_list_checkbox {
|
|
padding-right: 20px;
|
|
padding-left: 10px;
|
|
}
|
|
|
|
.checkbox {
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 50%;
|
|
background: #FFFFFF;
|
|
}
|
|
|
|
.to_do_finish .checkbox {
|
|
position: relative;
|
|
background: #FFFFFF;
|
|
}
|
|
|
|
.to_do_finish .checkbox:after {
|
|
position: absolute;
|
|
content: "";
|
|
height: 10px;
|
|
width: 10px;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
margin: auto;
|
|
border-radius: 50%;
|
|
background: #007AFF;
|
|
}
|
|
|
|
.to_do_finish .to_do_content_list_cont {
|
|
color: #007AFF;
|
|
}
|
|
|
|
// .to_do_finish.to_do_content_list:before {
|
|
|
|
// position: absolute;
|
|
// content: "";
|
|
// left: 40px;
|
|
// right: 10px;
|
|
// top: 0;
|
|
// bottom: 0;
|
|
// height: 2px;
|
|
// margin: auto 0;
|
|
// background: #007AFF;
|
|
// }
|
|
|
|
.to_do_finish.to_do_content_list::after {
|
|
background: #C35CDF;
|
|
}
|
|
|
|
|
|
.drawerView-bom {
|
|
width: 85%;
|
|
position: fixed;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
bottom: 0;
|
|
min-height: 40px;
|
|
margin-bottom: 50px;
|
|
background: #EA4726;
|
|
border-radius: 20px;
|
|
padding: 1px;
|
|
|
|
.drawerView-bom-text1 {
|
|
flex: 1;
|
|
text-align: center;
|
|
min-height: 38px;
|
|
line-height: 38px;
|
|
color: #EA4726;
|
|
background: #fff;
|
|
font-size: 14px;
|
|
border-radius: 20px 0px 20px 20px;
|
|
// border-top-left-radius: 20px;
|
|
// border-bottom-left-radius: 20px;
|
|
// border-bottom-right-radius:20px;
|
|
}
|
|
|
|
.drawerView-bom-text2 {
|
|
flex: 1;
|
|
line-height: 38px;
|
|
color: #fff;
|
|
font-size: 14px;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.search {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
background: #007AFF;
|
|
width: 100%;
|
|
padding: 10px;
|
|
|
|
.search-input {
|
|
flex: 1;
|
|
margin-left: 15px;
|
|
background: #fff;
|
|
border-radius: 30px;
|
|
padding: 5px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
margin-right: 35px;
|
|
|
|
.search-input-img {
|
|
margin-left: 10px;
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
.search-input-text {
|
|
margin-left: 10px;
|
|
font-size: 14px;
|
|
color: #000;
|
|
}
|
|
}
|
|
|
|
.search-text {
|
|
margin-right: 30px;
|
|
font-size: 15px;
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
.scrollviewCss {
|
|
overflow-y: hidden;
|
|
height: 90vh;
|
|
|
|
.newslist {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
background: #fff;
|
|
border-radius: 12px;
|
|
margin-left: 12px;
|
|
margin-right: 12px;
|
|
margin-top: 12px;
|
|
padding: 15px 20px;
|
|
|
|
.item {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.item-name {
|
|
font-size: 16px;
|
|
color: #000;
|
|
font-weight: 1000;
|
|
font-family: sans-serif;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 1;
|
|
-webkit-box-orient: vertical;
|
|
margin-right: 20px;
|
|
}
|
|
|
|
.item-date {
|
|
margin-top: 10px;
|
|
font-size: 14px;
|
|
color: #717171;
|
|
}
|
|
|
|
}
|
|
|
|
.item-num {
|
|
font-size: 13px;
|
|
color: #fff;
|
|
background: #F67E35;
|
|
border-radius: 15px;
|
|
padding: 5px 10px;
|
|
|
|
}
|
|
|
|
|
|
}
|
|
}
|
|
}
|
|
</style>
|