<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: 600;
|
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: 600;
|
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>
|
