<template>
|
<view class="box">
|
<scroll-view scroll-x class="box_head">
|
<view class="box_head_search">
|
<view class="box_head_search_ipt">
|
<image src="@/static/n/ic_search@2x.png" mode="widthFix"></image>
|
<input type="text" placeholder="搜索任务名称" />
|
</view>
|
<view class="box_head_search_sha" @click="show = true">
|
<image src="@/static/n/ic_shaixuan@2x.png" mode="widthFix"></image>
|
<text>筛选</text>
|
</view>
|
</view>
|
<view class="box_head_list">
|
<view class="box_head_item active">待处理 12</view>
|
<view class="box_head_item">已处理</view>
|
<view class="box_head_item">我发起的</view>
|
</view>
|
</scroll-view>
|
<view class="box_list">
|
<view class="box_list_item" v-for="(item, index) in 3" :key="index">
|
<view class="box_list_item_head">
|
<text>丁恩凯的劳务入厂申请</text>
|
<text class="loading">待审核</text>
|
</view>
|
<view class="box_list_item_nr">
|
<view class="box_list_item_nr_item">
|
<text>被访问人：</text>
|
<text>人事部-王亚蓝</text>
|
</view>
|
<view class="box_list_item_nr_item">
|
<text>进厂时间：</text>
|
<text>12-12 09:00</text>
|
</view>
|
<view class="box_list_item_nr_item">
|
<text>离厂时间：</text>
|
<text>12-12 12:00</text>
|
</view>
|
<view class="box_list_item_nr_item">
|
<text>入厂人数：</text>
|
<text>10</text>
|
</view>
|
<view class="box_list_item_nr_item">
|
<text>来访事由：</text>
|
<text>业务来往</text>
|
</view>
|
<view class="box_list_item_nr_x"></view>
|
<view class="box_list_item_nr_text">
|
2023-12-12 09:00提交
|
</view>
|
</view>
|
</view>
|
</view>
|
<!-- 筛选 -->
|
<u-popup :show="show" mode="bottom" :round="10" :closeable="true" @close="show = false">
|
<view class="search">
|
<view class="search_head">任务筛选</view>
|
<view class="search_list">
|
<view class="search_list_item">
|
<view class="search_list_item_label">创建日期</view>
|
<view class="search_list_item_val">
|
<view class="search_list_item_val_row" @click="tiemShow = true" :style="{ color: search.startTime ? '#000' : '' }">{{search.startTime ? search.startTime : '开始日期'}}</view>
|
<view class="search_list_item_val_z">-</view>
|
<view class="search_list_item_val_row" @click="tiemShow1 = true" :style="{ color: search.endTime ? '#000' : '' }">{{search.endTime ? search.endTime : '结束日期'}}</view>
|
</view>
|
</view>
|
<view class="search_list_item">
|
<view class="search_list_item_label">订单来源</view>
|
<view class="search_list_item_cates">
|
<view :class="index === i ? 'search_list_item_cates_row active' : 'search_list_item_cates_row'"
|
v-for="(item, index) in cate"
|
:key="index"
|
@click="clickItem(index)">
|
{{item.name}}
|
</view>
|
</view>
|
</view>
|
</view>
|
<view class="search_footer">
|
<view class="search_footer_item" @click="show = false">取消</view>
|
<view class="search_footer_item t">提交</view>
|
</view>
|
</view>
|
</u-popup>
|
<u-datetime-picker
|
:show="tiemShow"
|
v-model="time"
|
mode="datetime"
|
@confirm="confirmLeft"
|
@cancel="tiemShow = false"
|
></u-datetime-picker>
|
<u-datetime-picker
|
:show="tiemShow1"
|
v-model="time1"
|
mode="datetime"
|
@confirm="confirmRight"
|
@cancel="tiemShow1 = false"
|
></u-datetime-picker>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
show: false,
|
tiemShow: false,
|
tiemShow1: false,
|
time: '',
|
i: null,
|
time: '',
|
time1: '',
|
search: {
|
startTime: '',
|
endTime: ''
|
},
|
cate: [
|
{ name: '访客申请', id: 1 },
|
{ name: '劳务申请', id: 2 },
|
{ name: '用车申请', id: 3 }
|
]
|
};
|
},
|
methods: {
|
clickItem(index) {
|
this.i = index
|
},
|
confirmLeft(e) {
|
console.log(uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss'))
|
this.search.startTime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss')
|
this.tiemShow = false
|
},
|
confirmRight(e) {
|
this.search.endTime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss')
|
this.tiemShow1 = false
|
}
|
}
|
}
|
</script>
|
<style>
|
page {
|
background-color: #F7F7F7 !important;
|
}
|
</style>
|
<style lang="scss" scoped>
|
.box {
|
width: 100%;
|
.box_head {
|
width: 100%;
|
height: 190rpx;
|
padding: 12rpx 30rpx;
|
box-sizing: border-box;
|
background: #FFFFFF;
|
position: sticky;
|
top: 0;
|
left: 0;
|
.box_head_search {
|
width: 100%;
|
height: 76rpx;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
margin-bottom: 24rpx;
|
.box_head_search_ipt {
|
flex: 1;
|
height: 100%;
|
padding: 0 30rpx;
|
box-sizing: border-box;
|
display: flex;
|
align-items: center;
|
background: #F7F7F7;
|
border-radius: 8rpx;
|
margin-right: 30rpx;
|
image {
|
flex-shrink: 0;
|
width: 28rpx;
|
height: 28rpx;
|
margin-right: 16rpx;
|
}
|
input {
|
flex: 1;
|
height: 100%;
|
font-size: 26rpx;
|
font-weight: 400;
|
color: #B2B2B2;
|
}
|
}
|
.box_head_search_sha {
|
flex-shrink: 0;
|
display: flex;
|
align-items: center;
|
image {
|
width: 28rpx;
|
height: 28rpx;
|
margin-right: 8rpx;
|
}
|
text {
|
font-size: 26rpx;
|
font-weight: 400;
|
color: #333333;
|
}
|
}
|
}
|
.box_head_list {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
.active {
|
border: 1rpx solid #025EEF !important;
|
color: #025EEF !important;
|
}
|
.box_head_item {
|
padding: 0 30rpx;
|
height: 60rpx;
|
line-height: 60rpx;
|
box-sizing: border-box;
|
border-radius: 30rpx;
|
border: 1rpx solid #999999;
|
font-size: 26rpx;
|
font-weight: 400;
|
color: #333333;
|
margin-right: 20rpx;
|
}
|
}
|
}
|
.box_list {
|
width: 100%;
|
padding: 30rpx;
|
box-sizing: border-box;
|
.box_list_item {
|
width: 100%;
|
margin-bottom: 20rpx;
|
&:last-child {
|
margin: 0 !important;
|
}
|
.box_list_item_head {
|
width: 100%;
|
height: 100rpx;
|
padding: 0 30rpx;
|
box-sizing: border-box;
|
background: linear-gradient(270deg, #FEFEFF 0%, #E1F7FE 100%);
|
border-radius: 8rpx 8rpx 0rpx 0rpx;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.loading {
|
color: #025EEF;
|
}
|
.success {
|
color: #03C68F;
|
}
|
.error {
|
color: #E0312A;
|
}
|
text {
|
&:nth-child(1) {
|
font-size: 32rpx;
|
font-weight: 500;
|
color: #222222;
|
}
|
&:nth-child(2) {
|
font-size: 26rpx;
|
font-weight: 400;
|
}
|
}
|
}
|
.box_list_item_nr {
|
padding: 30rpx;
|
width: 100%;
|
box-sizing: border-box;
|
background-color: #FFFFFF;
|
.box_list_item_nr_x {
|
width: 100%;
|
height: 1rpx;
|
background-color: #E5E5E5;
|
}
|
.box_list_item_nr_text {
|
width: 100%;
|
font-size: 26rpx;
|
font-weight: 400;
|
color: #999999;
|
margin-top: 32rpx;
|
}
|
.box_list_item_nr_item {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
margin-bottom: 20rpx;
|
text {
|
&:nth-child(1) {
|
font-size: 26rpx;
|
font-weight: 400;
|
color: #666666;
|
}
|
&:nth-child(2) {
|
font-size: 26rpx;
|
font-weight: 400;
|
color: #333333;
|
}
|
}
|
}
|
}
|
}
|
}
|
.search {
|
width: 100%;
|
padding: 30rpx;
|
box-sizing: border-box;
|
.search_head {
|
width: 100%;
|
text-align: center;
|
font-size: 32rpx;
|
font-weight: 500;
|
color: #222222;
|
}
|
.search_list {
|
width: 100%;
|
margin-top: 34rpx;
|
.search_list_item {
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
margin-bottom: 48rpx;
|
.search_list_item_label {
|
font-size: 30rpx;
|
font-weight: 400;
|
color: #222222;
|
margin-bottom: 24rpx;
|
}
|
.search_list_item_cates {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
flex-wrap: wrap;
|
.active {
|
background: #025EEF !important;
|
color: #ffffff !important;
|
}
|
.search_list_item_cates_row {
|
padding: 0 26rpx;
|
height: 64rpx;
|
line-height: 64rpx;
|
background: #F7F7F7;
|
border-radius: 36rpx;
|
margin-right: 20rpx;
|
font-size: 26rpx;
|
font-weight: 400;
|
color: #333333;
|
&:last-child {
|
margin: 0;
|
}
|
}
|
}
|
.search_list_item_val {
|
width: 100%;
|
height: 64rpx;
|
background: #F7F7F7;
|
border-radius: 36rpx;
|
border: 1rpx solid #E5E5E5;
|
display: flex;
|
align-items: center;
|
.search_list_item_val_row {
|
flex: 1;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 26rpx;
|
font-weight: 400;
|
color: #999999;
|
}
|
.search_list_item_val_z {
|
flex-shrink: 0;
|
font-size: 26rpx;
|
font-weight: 400;
|
color: #999999;
|
margin: 0 30rpx;
|
}
|
}
|
}
|
}
|
.search_footer {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.t {
|
background: #025EEF !important;
|
color: #ffffff !important;
|
}
|
.search_footer_item {
|
flex: 1;
|
height: 88rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 32rpx;
|
font-weight: 400;
|
color: #025EEF;
|
margin-right: 18rpx;
|
border: 1rpx solid #025EEF;
|
border-radius: 44rpx;
|
&:last-child {
|
margin: 0 !important;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
