399 lines
9.6 KiB
Vue
399 lines
9.6 KiB
Vue
<template>
|
|
<view>
|
|
<headersVue :titles="title" style="position: static !important;">
|
|
<u-icon name="arrow-left" color="#fff" size="18"></u-icon>
|
|
</headersVue>
|
|
<view class="t_left" @click="isShowPop = true">筛选
|
|
<u-icon name="arrow-down-fill" color="#327DFB" size="14"></u-icon>
|
|
</view>
|
|
<view class="content">
|
|
<scroll-view class="school-scroll-view" scroll-y @scrolltolower="onReachBottomCus"
|
|
:style="{ height: scrollHeight + 'px' }" refresher-enabled @refresherrefresh="onRefresherrefresh"
|
|
:refresher-triggered="isTriggered" v-if="orderList && orderList.length > 0">
|
|
<order-item v-for="(item, index) in orderList" :key="index" :order-data="item"
|
|
@click="goDetail(item)" />
|
|
</scroll-view>
|
|
<u-empty mode="list" style="background: white;" v-else>
|
|
</u-empty>
|
|
</view>
|
|
<u-popup round="55" :show="isShowPop" @close="closePop" @open="openPop">
|
|
<view class="popup-content" :style="{'height': windowsHeight + 'px', 'position': 'relative'}">
|
|
<!-- Header -->
|
|
<view class="popup-header">
|
|
<text>选择筛选项</text>
|
|
<view style="display: flex;justify-content: space-between" @click="closePop">
|
|
<u-icon name="close-circle" size="18" color="#327DFB"></u-icon>
|
|
<text style="color:#327DFB;">清除筛选项</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 日期选择器 -->
|
|
<view style="margin-top: 20rpx">
|
|
<uni-datetime-picker v-model="queryParams.datetimeRange" type="daterange" rangeSeparator="至" />
|
|
</view>
|
|
|
|
<!-- 内容滚动区域 -->
|
|
<scroll-view scroll-y="true" class="scroll_view_style"
|
|
style="height: calc(100% - 240rpx); padding-bottom: 120rpx;">
|
|
<view class="popup-body">
|
|
<view class="filter-section">
|
|
<text>业务渠道</text>
|
|
<view class="options">
|
|
<uni-data-select v-model="queryParams.bussiness"
|
|
:localdata="bussinessList"></uni-data-select>
|
|
</view>
|
|
</view>
|
|
<view class="filter-section">
|
|
<text>客户来源</text>
|
|
<view class="options">
|
|
<uni-data-select v-model="queryParams.customSource"
|
|
:localdata="customerSourceList"></uni-data-select>
|
|
</view>
|
|
</view>
|
|
<view class="filter-section">
|
|
<text>检测项目</text>
|
|
<view class="options">
|
|
<uni-data-select v-model="queryParams.projectId"
|
|
:localdata="projectList"></uni-data-select>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
|
|
<!-- 底部固定按钮 -->
|
|
<view class="popup-footer-fixed">
|
|
<u-button @click="closePop" style="background: #F7F8FC;color: black">取消</u-button>
|
|
<u-button @click="submitPop">确定</u-button>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import headersVue from '../../../components/header/headers.vue';
|
|
import OrderItem from '@/components/order-list.vue'
|
|
import request from '../../../utils/request';
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
scrollHeight: 0,
|
|
queryParams: {
|
|
pageNo: 1,
|
|
pageSize: 10,
|
|
userId: null,
|
|
customSource: null,
|
|
projectId: null,
|
|
bussiness: null,
|
|
datetimeRange: []
|
|
},
|
|
windowsHeight: 600,
|
|
isTriggered: false,
|
|
orderList: null,
|
|
pageNo: 1,
|
|
pageSize: 10,
|
|
totalPages: 0,
|
|
title: undefined,
|
|
isShowPop: false,
|
|
bussinessList: [],
|
|
customerSourceList: [],
|
|
projectList: [],
|
|
}
|
|
},
|
|
methods: {
|
|
/**
|
|
* 上滑加载数据
|
|
*/
|
|
onReachBottomCus() {
|
|
//判断 如果页码*页容量大于等于总条数，提示该页数据加载完毕
|
|
console.log('totalPages', this.totalPages);
|
|
if (this.pageNo >= this.totalPages) {
|
|
uni.$u.toast('没有更多数据了')
|
|
return
|
|
}
|
|
//页码+1,调用获取数据的方法获取第二页数据
|
|
this.pageNo++
|
|
//此处调用自己获取数据列表的方法
|
|
this.getList()
|
|
},
|
|
/**
|
|
* 下拉刷新数据
|
|
*/
|
|
onRefresherrefresh() {
|
|
this.isTriggered = true
|
|
this.pageNo = 1
|
|
this.total = 0
|
|
this.schoolList = []
|
|
this.getList()
|
|
},
|
|
goDetail(data) {
|
|
console.log('data', data)
|
|
uni.navigateTo({
|
|
url: "/pages/index/orderdetails?inspectionInfoId=" + data.inspectionInfoId
|
|
})
|
|
},
|
|
calculateScrollHeight() {
|
|
// 获取屏幕高度
|
|
const screenHeight = uni.getSystemInfoSync().windowHeight;
|
|
// 获取顶部区域高度
|
|
const topHeight = 240;
|
|
// 计算滚动区域高度
|
|
this.scrollHeight = screenHeight - topHeight;
|
|
},
|
|
closePop() {
|
|
this.isShowPop = false;
|
|
this.queryParams = {}
|
|
this.queryParams.pageNo = 1
|
|
},
|
|
submitPop() {
|
|
this.queryParams.pageNum = 1;
|
|
this.tableData = null
|
|
this.onRefresherrefresh();
|
|
this.isShowPop = false;
|
|
},
|
|
openPop() {
|
|
this.isShowPop = true;
|
|
},
|
|
async getList() {
|
|
const res = await request({
|
|
url: `/inspectionStaff/getFinishProjectByUserId`,
|
|
methods: 'GET',
|
|
params: this.queryParams
|
|
})
|
|
if (this.pageNo == 1) {
|
|
this.orderList = res.data.records
|
|
} else {
|
|
this.orderList = this.orderList.concat(res.data.records)
|
|
}
|
|
let total = res.data.total
|
|
this.totalPages = Math.ceil(total / this.pageSize);
|
|
this.isTriggered = false
|
|
},
|
|
open() {
|
|
this.$refs.popup.open()
|
|
},
|
|
close() {
|
|
this.$refs.popup.close()
|
|
},
|
|
async getUserInfo() {
|
|
const res = await request({
|
|
url: `/system/user/get?id=${this.queryParams.userId}`,
|
|
methods: 'get'
|
|
})
|
|
console.log('当前登陆人', res.data);
|
|
this.title = res.data.nickname + '项目列表'
|
|
},
|
|
getBusiness() {
|
|
request({
|
|
url: '/channel/tree',
|
|
method: 'get',
|
|
}).then((res) => {
|
|
// 在reres.data.records中找出type为1的所有书数据
|
|
res.data.forEach(item => {
|
|
item.text = item.name
|
|
item.value = item.name
|
|
})
|
|
this.bussinessList = res.data.filter(item => item.type === 0);
|
|
this.customerSourceList = res.data.filter(item => item.type === 1);
|
|
console.log('渠道', this.bussinessList);
|
|
console.log('来源', this.customerSourceList);
|
|
});
|
|
},
|
|
async getInspectionProject() {
|
|
const res = await request({
|
|
url: '/inspection/dl-inspection-project/page',
|
|
method: 'get',
|
|
params: {
|
|
pageNo: 1,
|
|
pageSize: 10000
|
|
}
|
|
})
|
|
this.projectList = res.data.records
|
|
this.projectList.forEach(item => {
|
|
item.text = item.projectName
|
|
item.value = item.id
|
|
})
|
|
},
|
|
},
|
|
onReady() {
|
|
// 动态计算滚动区域高度
|
|
this.calculateScrollHeight();
|
|
uni.getSystemInfo({
|
|
success: function(res) {
|
|
this.windowsHeight = res.windowHeight;
|
|
console.log('屏幕高度：', res.windowHeight);
|
|
}
|
|
});
|
|
},
|
|
onLoad(data) {
|
|
this.getBusiness()
|
|
this.getInspectionProject()
|
|
if (data.userId) {
|
|
this.queryParams.userId = data.userId
|
|
this.getUserInfo()
|
|
}
|
|
if (data.customerSource) {
|
|
this.queryParams.customerSource = data.customerSource
|
|
this.title = '项目列表'
|
|
}
|
|
if (data.range) {
|
|
console.log('时间范围:', data.range);
|
|
// this.queryParams.datetimeRange = data.range
|
|
this.queryParams.datetimeRange = JSON.parse(decodeURIComponent(data.range))
|
|
}
|
|
this.getList()
|
|
|
|
},
|
|
components: {
|
|
headersVue,
|
|
OrderItem // 这里使用大驼峰命名
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.content {
|
|
background-color: #f7f8fa;
|
|
/* min-height: 100vh; */
|
|
padding: 20rpx;
|
|
box-sizing: border-box;
|
|
//padding-top: 200rpx;
|
|
}
|
|
|
|
.school-scroll-view {
|
|
border-radius: 16rpx;
|
|
overflow: hidden;
|
|
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
|
|
background-color: #ffffff;
|
|
padding: 10rpx 0;
|
|
}
|
|
|
|
.uni-popup-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0 20rpx;
|
|
height: 80rpx;
|
|
background-color: #fff;
|
|
border-bottom: 1px solid #f5f5f5;
|
|
font-size: 32rpx;
|
|
color: #333;
|
|
line-height: 80rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.t_left {
|
|
width: 200rpx;
|
|
border: 2px solid #327DFB;
|
|
background: #e3ecfb;
|
|
color: #327DFB;
|
|
font-size: 28rpx;
|
|
box-sizing: border-box;
|
|
padding: 5px 10px;
|
|
border-radius: 50px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 30rpx;
|
|
}
|
|
|
|
.uni-popup-body {
|
|
padding: 20rpx;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.popup-content {
|
|
padding: 20rpx 20rpx 20rpx 20rpx;
|
|
overflow-y: scroll;
|
|
background: white;
|
|
border-radius: 20rpx;
|
|
//height: 80vh;
|
|
}
|
|
|
|
.popup-header {
|
|
font-size: 32rpx;
|
|
color: #101A3E;
|
|
margin-bottom: 40rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.popup-body {
|
|
font-size: 28rpx;
|
|
color: #101A3E;
|
|
}
|
|
|
|
.filter-section {
|
|
margin-top: 30rpx;
|
|
}
|
|
|
|
.filter-section text {
|
|
display: block;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.options {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
//justify-content: space-between; margin-top: 30rpx;
|
|
}
|
|
|
|
.options text {
|
|
margin-right: 20rpx;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.popup-footer {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
/* margin-top: 60rpx; */
|
|
/* margin-bottom: 30rpx; */
|
|
}
|
|
|
|
.popup-footer-fixed button {
|
|
padding: 10rpx 20rpx;
|
|
margin: 0 50rpx;
|
|
border-radius: 5px;
|
|
background-color: #327DFB;
|
|
color: #fff;
|
|
border: none;
|
|
}
|
|
|
|
.options_content {
|
|
background: #F7F8FC;
|
|
border-radius: 15rpx;
|
|
width: 210rpx;
|
|
height: 90rpx;
|
|
line-height: 90rpx;
|
|
text-align: center;
|
|
border: 2rpx solid transparent;
|
|
margin-top: 10rpx;
|
|
transition: all 0.3s ease;
|
|
|
|
&.selected {
|
|
border-color: #327DFB;
|
|
background-color: rgba(50, 125, 251, 0.1);
|
|
color: #327DFB;
|
|
}
|
|
}
|
|
|
|
.filter-section .options u-icon {
|
|
margin-left: 10rpx;
|
|
}
|
|
|
|
.popup-footer-fixed {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
padding: 20rpx;
|
|
background-color: #fff;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
|
|
z-index: 10;
|
|
}
|
|
</style> |