<template>
<view class="task" style="width: 100vw; height: 100vh; background-color: #eee;">
<!-- 切换 -->
<view class="task_tab" style="position: fixed;top: 0;" >
<view class="task_tab_title" v-for="(item, index) in title" :key="item.name" @tap="selectTitle(item.name,item.type)"
:class="{ 'selected': item.name === selectedTitle }">
{{item.name}}
</view>
</view>
<!-- 列表 -->
<view v-if="firstList.length == 0" style="width: 100vw;height: 100vw; display: flex; flex-direction: column; align-items: center;justify-content: center;">
<view class="logo1">
<img src="/static/wu.png" alt="" />
</view>
<view class="viewname">
暂无数据！
</view>
</view>
<view v-else class="task_list" style="margin-top: 130rpx; margin-bottom: 200rpx;">
<view class="task_list_column" style="margin-bottom: 20rpx;" v-for="item in firstList" :key="item.id" @click="detailPages(item.id)">
<view class="task_list_column_label">
<view class="quest_label">
急救任务 ：{{item.order_no}}
</view>
<view class="quest_status" v-if="item.status === 1">
代接单
</view>
<view class="quest_status" v-if="item.status === 3">
已完成
</view>
<view class="quest_status" style="color: #5580FF;" v-if="item.status === 2">
进行中
</view>
</view>
<view class="task_list_column_car">
<view class="logo">
<img src="/static/toes.png" alt="" />
</view>
<view class="userName">
<view class="usercar">
车牌号：{{item.licence_plate}}
</view>
<view class="user">
驾驶员:{{item.driver}}
</view>
<view class="user">
患者受伤类型：{{item.bruise_type}}
</view>
</view>
</view>
<view class="task_list_column_time" style="display: flex;">
<view>
<view class="discharge">
<view class="icon">
<img src="/static/shijian.png" alt="" />
</view>
<view class="time">
出车时间：{{item.driving_time}}
</view>
</view>
<view class="discharge" v-if="item.status === 3">
<view class="icon">
<img src="/static/shijian.png" alt="" />
</view>
<view class="time" >
回院时间：{{item.driving_end_time || ''}}
</view>
</view>
</view>
<button v-if="item.status === 2" type="primary" style="height: 80rpx; width: 130rpx;margin-top: 30rpx;" @click.stop="completionBtn(item.id)">完成</button>
</view>
</view>
<u-loadmore :status="status" />
</view>
</view>
</template>
<script>
import {request} from '../../request/request.js'
export default {
data() {
return {
status: 'loading',
firstList:[],
title: [{
name: "今日急诊任务",
type:'day'
}, {
name: "本周",
type:'week'
}, {
name: "本月",
type:'month'
}, {
name: "所有任务",
type:''
}],
selectedTitle: '今日急诊任务', // 初始选中第一个标题
type:'day'
}
},
mounted() {
this.getfirstList()
},
methods:{
//获取的上传信息
selectTitle(title,type) {
this.selectedTitle = title;
this.type = type
this.getfirstList()
},
// 获取信息列表
async getfirstList(){
const type = this.type
this.status = 'loading';
const res = await request({url:'/dispatchOrder/taskList',data:{type}})
this.firstList = res
this.status = 'nomore';
},
// 跳转详情
detailPages(id){
uni.navigateTo({
url: `/PagesB/detailPages/detailPages?id=${id}`
});
},
async completionBtn(id){
await request({url:`/dispatchOrder/${id}`})
this.getfirstList()
}
}
}
</script>
<style lang="scss" scoped>
.task {
width: 100%;
height: 100%;
box-sizing: border-box;
.logo1 {
width: 326rpx;
height: 315rpx;
img {
width: 100%;
height: 100%;
}
}
.viewname{
font-family: Adobe Heiti Std;
font-size: 28rpx;
color: #999999;
line-height: 48rpx;
}
.task_tab {
width: 100%;
height: 100rpx;
background-color: #fff;
padding-left: 30rpx;
display: flex;
align-items: center;
border-bottom: 20rpx solid #F5F7FC;
.task_tab_title {
margin-right: 40rpx;
padding-bottom: 20rpx;
font-family: SourceHanSansSC, SourceHanSansSC;
font-weight: 400;
font-size: 28rpx;
color: #3B3B3B;
line-height: 29rpx;
margin-top: 20rpx;
margin-right: 80rpx;
}
.selected {
/* 添加选中标题的样式 */
color: #5581FF;
font-weight: bold;
border-bottom: 1rpx solid #5581FF;
}
}
.task_list{
width: calc(100% );
// padding: 20rpx;
height: 370rpx;
background: #F5F7FC;
.task_list_column{
height: 370rpx;
padding: 20rpx;
background: #fff;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: space-around;
.task_list_column_label{
width: 100%;
height: 50rpx;
display: flex;
justify-content: space-between;
align-items: center;
.quest_label{
font-weight: 400;
font-size: 24rpx;
color: #3B3B3B;
}
.quest_status{
font-weight: 400;
font-size: 24rpx;
color: #959595;
}
}
.task_list_column_car{
width: 100%;
height: 200rpx;
display: flex;
align-items: center;
border-bottom: 1rpx solid #D7D7D7;
.logo{
width: 141rpx;
height: 118rpx;
background-color: rgba(85,129,255,.1);
display: flex;
align-items: center;
justify-content: center;
margin-right: 20rpx;
img{
width: 110rpx;
height: 75rpx;
}
}
.userName{
.usercar{
font-family: SourceHanSansSC, SourceHanSansSC;
font-weight: 400;
font-size: 28rpx;
color: #000000;
}
.user{
font-family: SourceHanSansSC, SourceHanSansSC;
font-weight: 400;
font-size: 24rpx;
color: #959595;
}
}
}
.task_list_column_time{
width: 100%;
height: 130rpx;
.discharge {
display: flex;
align-items: center;
margin-top: 20rpx;
.icon{
width: 40rpx;
height: 40rpx;
margin-right: 20rpx;
img {
height: 100%;
width: 100%;
}
}
.time {
font-family: SourceHanSansSC, SourceHanSansSC;
font-weight: 400;
font-size: 28rpx;
color: #4A4A4A;
line-height: 30rpx;
}
}
}
}
}
}
</style>