tsg-app/pages/mypage/compents/xcrw/index.vue

<template>
	<view :style="{height:'100vh',overflow:'hidden'}">
		<u-status-bar></u-status-bar>
		<u-navbar title="巡查任务" :autoBack="true" :titleStyle="{
				fontSize:'18px'
			}" :height='44' :safeAreaInsetTop=true leftIconSize='20' leftIconColor='rgb(153, 153, 153)'>
		</u-navbar>
		<view style="padding:0 10px; margin-top:50px">
			<view class="time-ranger" >
    		    <view class="start-time">
    		    <text>开始时间</text>
    		    <text @click="showTime=true" style="margin-left:15%;color:#3399ef">{{stm}}</text>
    		  </view>
    		  <view class="end-time">
    		    <text>结束时间</text>
    		    <text @click="showTime1=true" style="margin:0 15%;color:#3399ef">{{etm}}</text>
    		     <view class="search-btn" @click="searchHandle">
    		      搜索
    		    </view>
    		  </view>

        </view>
		<view class="" style='overflow: auto;max-height:calc(100vh - 180px)' v-if="list.length !== 0">		
			<view class="" v-for="(item,i) in list" :key="i" @click="toDetail(item)" style="background-color: #fff;margin-top:10px;padding: 10px;">
				<view class="item">
					<!-- {{item.title}} -->
					<view class="title">
						{{item.taskTitle}}
					</view>
					<view class="titleRight" >
						<view class="border">
							{{status[item.status]}}
						</view>
						<u-icon name="arrow-right"  size="20"></u-icon>
					</view>
				</view>
				<view class="contentItem">
					<view class="itemC">
						<text>接收时间</text>
						<text>{{item.receiveTime}}</text>
					</view>
					<view class="itemC">
						<text>完成时间</text>
						<text>{{item.finishTime}}</text>
					</view>
				</view>
			</view>
			</view>
<view style="height:calc(100vh - 150px);display: flex;align-items: center;justify-content: center;background-color: #fff;" v-else>
				<image src="../../../../static/empty.png" mode="" ></image>
			</view>
		</view>
		  <u-datetime-picker
                :show="showTime"
                v-model="startTime"
                mode="date"
                @confirm="handleStartTime"
                @cancel="showTime=false"
				:minDate="minDate"
				               :maxDate="maxDate"
        ></u-datetime-picker>
         <u-datetime-picker
                :show="showTime1"
                v-model="endTime"
                mode="date"
                @confirm="handleEndTime"
                @cancel="showTime1=false"
				:minDate="minDate"
				               :maxDate="maxDate"
        ></u-datetime-picker>
	</view>
</template>

<script>
	import moment from 'moment'
    const stm = moment().startOf('year').set({minute: 0, second: 0}).format("YYYY-MM-DD");
    const etm =  moment().set({minute: 0, second: 0}).format("YYYY-MM-DD");
	export default {
		data() {
			return {
				status:{
					0:'开始任务',
					1:'继续任务',
					2:'已完成'
				},
				minDate:moment().startOf('year').valueOf(),
				maxDate:moment().valueOf(),
				  startTime:stm,
    		      endTime:etm,
    		      stm,
    		      etm,
    		      showTime:false,
    		      showTime1:false,
				  list: []
			};
		},
		mounted() {
			this.getData()
		},
		methods: {
				searchHandle(){
    			     this.getData()
     		   },
			    handleStartTime(e){
    				   let time = moment(e.value).format("YYYY-MM-D")
    				    this.stm = time;
    				    this.showTime = false
    				  }, 
    				  handleEndTime(e){
    				     let time = moment(e.value).format("YYYY-MM-DD")
    				     this.etm = time;
    				    this.showTime1 = false
    				  },
			
			async getData(){
				const userId = uni.getStorageSync('value')?.userId
				const params = {
					dateRangeSo:{
						start:moment(this.stm).format("YYYY-MM-DD 00:00:00"),
                        end:moment(this.etm).format("YYYY-MM-DD 23:59:59"),
					},
					inspectUserId:userId,
					statusList:[2]
				}
				try {
					const res = await uni.$http.post("/gunshiApp/tsg/inspect/task/list",params)
						this.list = [...res.data.data];
				} catch (error) {
					uni.$showMsg();
				}
			},
			toDetail(record){
				uni.navigateTo({
					url:`/pages/mypage/compents/xcrw/detail/index?taskTitle=${record.taskTitle}&taskType=${record.taskType}&taskContent=${record.taskContent}&startDate=${record.startDate}&endDate=${record.endDate}&status=${record.status}&id=${record.id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.myTitleStyle {
		font-size: 30px;
		background-color: red;
		height: 200px;
	}

	.tabsClass {
		margin-top: 44px;
		height: 44px;
		padding: 0 40px;
		border-top: 1px solid #eee;
		border-bottom: 1px solid #eee;
	}

	.item {
		border-bottom: 1px solid #f0f0f0;
		padding-bottom: 10px;
		display: flex;
		justify-content: space-between;

		.title {
			border-width: 0px;
			font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
			font-weight: 700;
			font-style: normal;
			font-size: 15px;
			color: #666666
		}

		.titleRight {
			display: flex;
			.border {
				border-width: 0px;
				background-color: rgba(236, 245, 255, 1);
				box-sizing: border-box;
				border-width: 1px;
				border-style: solid;
				border-color: rgba(187, 220, 255, 1);
				border-radius: 5px;
				box-shadow: none;
				width: 75px;
				height: 25px;
				color: #689FFF;
				text-align: center;
			}
		}

	}
	.contentItem{
		.itemC{
			display: flex;
			justify-content: space-between;
			display: flex;
			color: #666666;
			padding: 10px;
		}
	}
</style>