<template>
|
<view class="main_app">
|
<div class="main_head">
|
<view class="head_wrap">
|
<view class="search_wrap">
|
<image class="mr12 search" src="@/static/home/ic_search@2x.png" mode="widthFix"></image>
|
<input v-model="param.roomName" @confirm="handleQuery" type="text" placeholder="搜索楼宇/房间名称"
|
placeholder-class="placeholder9" />
|
</view>
|
</view>
|
<!-- -->
|
<view class="tabs">
|
<view class="tab" :class="{active: activeTab == '0,1'}" @click="tabsClick('0,1')">
|
<text>待处理</text>
|
<text class="border"></text>
|
</view>
|
<view class="tab" :class="{active: activeTab == 2}" @click="tabsClick(2)">
|
<text>已处理</text>
|
<text class="border"></text>
|
</view>
|
<view class="tab" @click="allClick">
|
<view class="name">
|
<image v-if="selectAll" class="icon" src="@/static/checked.png" mode=""></image>
|
<image v-else class="icon" src="@/static/check.png" mode=""></image>
|
<text>查看全部</text>
|
</view>
|
<text class="border"></text>
|
</view>
|
</view>
|
</div>
|
<!-- -->
|
<scroll-view scroll-y="true" class="scroll_Y" @scrolltolower="scrolltolower">
|
<view class="list">
|
<view class="item" v-for="item in list" @click="itemClick(item)">
|
<image v-if="item.dealStatus == 0 || item.dealStatus == 1" src="@/static/side/workordered.png" class="icon"></image>
|
<image v-else src="@/static/side/workorder.png" class="icon"></image>
|
<view class="content">
|
<view class="name_wrap line">
|
<view class="name">{{item.buildingName}}/{{item.roomNum || item.floorName}}</view>
|
<view class="status gray" v-if="item.dealStatus == 2">已处理</view>
|
<view class="status" v-if="item.dealStatus == 0">待处理</view>
|
<view class="status" v-if="item.dealStatus == 1">待处理</view>
|
</view>
|
<view class="line">位置类型：{{item.areaType == '0' ? '室内装修' : '公共区域'}}</view>
|
<view class="line">工单分类：{{item.categoryName}}</view>
|
<view class="line">上报时间：{{item.createDate}}</view>
|
<view class="line" v-if="item.getDate">上门时间：{{item.getDate}}</view>
|
</view>
|
</view>
|
<view v-if="list.length == 0" class="empty_wrap">
|
<image src="@/static/empty.png" mode=""></image>
|
<view class="">暂无数据</view>
|
</view>
|
</view>
|
</scroll-view>
|
<!-- -->
|
</view>
|
</template>
|
|
<script>
|
import {
|
ywWorkorder
|
} from '@/api'
|
export default {
|
data() {
|
return {
|
param: {},
|
activeTab: '0,1',
|
selectAll: false,
|
|
list: [],
|
total: 0,
|
page: 1,
|
};
|
},
|
onLoad() {
|
this.getList()
|
},
|
methods: {
|
scrolltolower() {
|
const {
|
total,
|
list
|
} = this
|
if (list.length < total) {
|
this.page = this.page + 1
|
this.getList()
|
} else {
|
this.showToast('暂无更多数据')
|
}
|
},
|
tabsClick(val) {
|
this.activeTab = val
|
this.list = []
|
this.page = 1
|
this.getList()
|
},
|
allClick() {
|
this.selectAll = !this.selectAll
|
this.list = []
|
this.page = 1
|
this.getList()
|
},
|
itemClick(item) {
|
uni.navigateTo({
|
url: `/pages/workOrder/detail?id=${item.id}`
|
})
|
},
|
handleQuery() {
|
this.list = []
|
this.page = 1
|
this.getList()
|
},
|
getList() {
|
const {
|
page,
|
total,
|
list,
|
activeTab,
|
param,
|
selectAll
|
} = this
|
ywWorkorder({
|
page,
|
capacity: 10,
|
model: {
|
...param,
|
queryStatus: activeTab,
|
dealUserId: selectAll ? '' : uni.getStorageSync('userInfo').id,
|
}
|
}).then(res => {
|
this.list = [...this.list, ...res.data.records]
|
this.total = res.data.total
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.main_app {
|
padding: 30rpx;
|
}
|
|
.tabs {
|
display: flex;
|
width: 750rpx;
|
margin: 12rpx -30rpx 0;
|
border-bottom: 1rpx solid #E5E5E5;
|
|
.tab {
|
font-size: 30rpx;
|
color: #666666;
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: flex-end;
|
height: 88rpx;
|
|
.name {
|
display: flex;
|
align-items: center;
|
}
|
|
.icon {
|
width: 28rpx;
|
height: 28rpx;
|
margin-right: 10rpx;
|
}
|
|
.border {
|
width: 54rpx;
|
height: 6rpx;
|
background-color: #fff;
|
border-radius: 3rpx;
|
margin-top: 24rpx;
|
}
|
}
|
|
.active {
|
font-weight: 600;
|
font-size: 32rpx;
|
color: #222222;
|
|
.border {
|
background-color: $primaryColor;
|
}
|
|
}
|
|
}
|
|
.head_wrap {
|
display: flex;
|
align-items: center;
|
|
.search_wrap {
|
display: flex;
|
align-items: center;
|
width: 100%;
|
height: 76rpx;
|
background: #F7F7F7;
|
border-radius: 38rpx;
|
padding-left: 30rpx;
|
|
input {
|
flex: 1;
|
}
|
|
.search {
|
width: 28rpx;
|
height: 28rpx;
|
}
|
}
|
|
}
|
.scroll_Y{
|
height: calc(100vh - 250rpx);
|
}
|
.list {
|
.item {
|
display: flex;
|
// height: 290rpx;
|
padding: 30rpx 0;
|
border-bottom: 2rpx solid #E5E5E5;
|
|
.icon {
|
width: 80rpx;
|
height: 80rpx;
|
margin-right: 24rpx;
|
}
|
|
.content {
|
flex: 1;
|
color: #666666;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
|
.line {
|
margin-bottom: 20rpx;
|
|
&:nth-last-child(1) {
|
margin-bottom: 0;
|
}
|
}
|
|
.name_wrap {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
|
.name {
|
display: flex;
|
align-items: flex-end;
|
font-weight: 600;
|
font-size: 34rpx;
|
color: #222222;
|
}
|
|
.status {
|
color: $primaryColor;
|
}
|
|
.gray {
|
color: #999999;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
