687 lines
17 KiB
Vue
687 lines
17 KiB
Vue
<template>
|
||
<view class="mbwa-body">
|
||
<div class="page-header">
|
||
<div class="page-header-middle">
|
||
<div style="flex:1;text-align: center;">
|
||
<image src="https://eshangtech.com/ShopICO/uniapp/jryj.png" mode="aspectFit"></image>
|
||
|
||
<div class="page-wcl">
|
||
<span>{{headerContent.UrgentCount||0}}</span>
|
||
条异常
|
||
</div>
|
||
</div>
|
||
|
||
<div class="header-text">
|
||
<p class="normal-day" v-if="headerContent.UrgentCount===0">
|
||
今日暂无异常
|
||
</p>
|
||
<view class="unusual-day" v-else>
|
||
<view v-for="tip in headerContent.List" :key="tip.MBWA_ID">
|
||
{{tip.MBWA_ADDRESS}}:{{tip.MBWA_CONTENT}}
|
||
</view>
|
||
</view>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="massage-tab">
|
||
<div class="massage-unit" :class="{'active':currentTab===0}" @tap="currentTab=0">
|
||
现场
|
||
</div>
|
||
<div class="massage-unit" :class="{'active':currentTab===1}" @tap="currentTab=1">
|
||
异常
|
||
</div>
|
||
<block v-if="screenCodes.length">
|
||
|
||
<picker mode="selector" @change="bindPartChange" :value="selectIndex" range-key="showName" :range="screenCodes" class="now-serverpart">
|
||
<view>{{screenCodes[selectIndex].showName}}</view>
|
||
</picker>
|
||
</block>
|
||
</div>
|
||
|
||
<view style="flex: 1;width: 750upx;overflow: hidden;">
|
||
<scroll-view v-show="currentTab===0" enableBackToTop="true" scroll-y style="height: 100%;" @scrolltolower="reachBottom()">
|
||
|
||
<div class="msg-list" v-if="pageList.length>0">
|
||
<div class="msg-unit" hover-class="navigator-hover" v-for="(value,key) in pageList" :key="key" @tap="toDetail(value)">
|
||
<view class="uni-media-list-body">
|
||
<view class="uni-media-list-text-top">
|
||
<p>
|
||
<span class="area-title">{{value.SHOPNAME}}</span>
|
||
</p>
|
||
<!-- <span class="status-tag shouldDo" v-if="value.SORTNUM==0">待我处理</span> -->
|
||
<span class="status-tag" :class="{'shouldDo':value.SORTNUM==0, 'normal':value.PROCESSMODE===0, 'typeText-color': value.PROCESSMODE === 4}">{{stautsKeys[value.PROCESSMODE]}}</span>
|
||
</view>
|
||
<p class="mbwa-content">{{value.MBWA_CONTENT}}</p>
|
||
<div class="uni-media-list-text-top">
|
||
<span class="area-name">{{value.MEMBERSHIP_NAME}}</span>
|
||
<span class="massage-date">{{value.CREATE_DATE}}</span>
|
||
</div>
|
||
</view>
|
||
<image mode="aspectFill" lazy-load :src="value.IMAGELIST.length>0 ? value.IMAGELIST[0].IMAGE_URL : 'https://eshangtech.com/ShopICO/no-picture.png'"></image>
|
||
|
||
</div>
|
||
|
||
|
||
</div>
|
||
<block v-else>
|
||
<div class="no-msg" v-show="pageMsg.todayloadingType!==0 && pageList.length===0 && pageMsg.todayIsLastDay==1">
|
||
<noFound></noFound>
|
||
</div>
|
||
</block>
|
||
<block v-if="pageMsg.todayloadingType!==0">
|
||
<view class="moredate-box" @tap="showDate" v-if="pageMsg.todayIsLastDay==0">
|
||
<text v-if="searchType==-1">轻按查看昨日巡检</text>
|
||
<text v-else-if="searchType==-2">轻按查看前日巡检</text>
|
||
<text v-else>轻按查看<text>{{nextDate}}</text>巡检</text>
|
||
</view>
|
||
<div class="footer-text" v-else-if="pageList.length!=0">——没有更多数据了——</div>
|
||
</block>
|
||
<div class="footer-text" v-else>正在加载...</div>
|
||
|
||
</scroll-view>
|
||
<scroll-view v-show="currentTab===1" enableBackToTop="true" scroll-y style="height: 100%;" @scrolltolower="reachBottom()">
|
||
<div class="unusual-header" v-if="screenCodes[selectIndex].ServerPart_Name">
|
||
<div class="unusual-header-text">
|
||
{{screenCodes[selectIndex].ServerPart_Name}}今日应巡查点位<span class="red-span">{{headerContent.CheckPoint}}</span>个共{{headerContent.CheckCount}}次,今日未检点位<span class="red-span">{{headerContent.UnCheckPoint}}</span>个共{{headerContent.UnCheckCount}}次,去查看缺检情况吧
|
||
|
||
</div>
|
||
<navigator class="unusual-header-btn" :url="'/pages/mbwa/mbwaUnCheck?id='+screenCodes[selectIndex].ServerPartID" @click="$util.addUserBehavior({intoRoute:'/pages/mbwa/mbwaUnCheck'})">查看详情</navigator>
|
||
</div>
|
||
<div class="msg-list" v-if="waitList.length>0">
|
||
<view class="msg-unit" hover-class="navigator-hover" v-for="(value,key) in waitList" :key="key" @tap="toDetail(value)">
|
||
<view class="uni-media-list-body">
|
||
<view class="uni-media-list-text-top">
|
||
<p>
|
||
<span class="area-title">{{value.SHOPNAME}}</span>
|
||
</p>
|
||
<!-- <span class="status-tag shouldDo" v-if="value.SORTNUM==0">待我处理</span> -->
|
||
<span class="status-tag" :class="{'shouldDo':value.SORTNUM==0 , 'normal':value.PROCESSMODE===0, 'typeText-color': value.PROCESSMODE === 4}">{{stautsKeys[value.PROCESSMODE]}}</span>
|
||
</view>
|
||
<p class="mbwa-content">{{value.MBWA_CONTENT}}</p>
|
||
<div class="uni-media-list-text-top">
|
||
<span class="area-name">{{value.MEMBERSHIP_NAME}}</span>
|
||
<span class="massage-date">{{value.CREATE_DATE}}</span>
|
||
</div>
|
||
</view>
|
||
<image mode="aspectFill" lazy-load :src="value.IMAGELIST.length>0 ? value.IMAGELIST[0].IMAGE_URL : 'https://eshangtech.com/ShopICO/no-picture.png'"></image>
|
||
|
||
</view>
|
||
|
||
<div class="footer-text">{{waitList.length===pageMsg.unusualListCount?'——— 加载完毕 ———':'正在加载...'}}</div>
|
||
</div>
|
||
<div v-else>
|
||
|
||
<noFound :nodata="pageMsg.unusualloadingType===2 && waitList.length===0? true : false"/>
|
||
|
||
</div>
|
||
</scroll-view>
|
||
|
||
</view>
|
||
</view>
|
||
|
||
|
||
</template>
|
||
|
||
<script>
|
||
import { mapGetters,mapMutations } from 'vuex'
|
||
export default {
|
||
|
||
data() {
|
||
let nowTime = this.$util.cutDate(new Date(), 'YYYY/MM/DD')
|
||
|
||
|
||
let day = new Date();
|
||
let num = day.getDay() - 1;
|
||
day.setDate(day.getDate() - num); //本周第一天
|
||
let lastTime = this.$util.cutDate(day, 'YYYY/MM/DD')
|
||
return {
|
||
searchTime: [nowTime, nowTime],
|
||
searchType: -1,
|
||
nextDate: '',
|
||
selectIndex: 0, // 列表中选中的服务区index
|
||
loadingType: 1,
|
||
foundType: 0,
|
||
currentTab: 0,
|
||
themeColor: '#64a0e6',
|
||
headerContent: {}, // 走动式管理头部预警，今日待检信息
|
||
pageList: [],
|
||
waitList: [],
|
||
pageMsg:{
|
||
unusualEnd: false,
|
||
unusualPageIndex: 1,
|
||
unusualListCount: 0,
|
||
unusualPageSize: 10,
|
||
todayloadingType: 0,
|
||
todayPageIndex: 1,
|
||
todayPageSize: 10,
|
||
todayListCount: 0,
|
||
todayIsLastDay: 0,
|
||
},
|
||
screenCodes:[],
|
||
stautsKeys: {
|
||
0: '正常',
|
||
1: '待处理',
|
||
2: '待反馈',
|
||
3: '待确认',
|
||
4: '已确认'
|
||
}
|
||
}
|
||
},
|
||
|
||
computed:{
|
||
...mapGetters({isReloading:'shouldReLoadingList','user': 'getUser'})
|
||
},
|
||
methods: {
|
||
...mapMutations(['shouldReLoadingList']),
|
||
showDate () {
|
||
let _date = this.$util.cutDate(new Date(), 'YYYY/MM/DD',this.searchType)
|
||
this.searchTime = [_date,_date]
|
||
this.searchType -= 1
|
||
this.nextDate = this.$util.cutDate(new Date(), 'YYYY-MM-DD',this.searchType)
|
||
this.pageMsg.todayPageIndex =1
|
||
uni.showLoading({
|
||
title:'正在加载'
|
||
})
|
||
this.getMbwaList()
|
||
},
|
||
getMbwaOutline() { // 获取走动式管理头部预警，今日待检信息
|
||
let _this = this
|
||
_this.$request.$get("GetMbwaOutline",{
|
||
SERVERPART_ID: _this.screenCodes[this.selectIndex].ServerPartID,
|
||
STATISTICSDATE: _this.$util.cutDate(new Date(), 'YYYY/MM/DD'),
|
||
}).then(res => {
|
||
if(res.ResultCode==100) {
|
||
let _data = res.Data
|
||
_this.headerContent = _data
|
||
}else{
|
||
uni.showToast({
|
||
title: _data.ResultDesc,
|
||
icon:'none'
|
||
})
|
||
}
|
||
|
||
})
|
||
},
|
||
getServerList() { // 获取服务区
|
||
let _this = this
|
||
_this.$request.$get('GetPendingItemsBySP',{
|
||
moduleguid: 'c26c1620-2149-4b3d-ac2e-07e0c0494042',
|
||
|
||
}).then(res => {
|
||
if(!res.ResultCode ||res.ResultCode!='100'){
|
||
_this.isShow = false
|
||
}
|
||
|
||
_this.screenCodes = res.Data.List
|
||
_this.screenCodes.map(n=>{
|
||
n.showName = n.ServerPart_Name+'【待办'+n.Count+'条】'
|
||
})
|
||
if(res.Data.List.length>0){
|
||
_this.getMbwaList()
|
||
_this.getUnualList()
|
||
_this.getMbwaOutline()
|
||
|
||
}else{
|
||
_this.pageMsg.todayIsLastDay=1
|
||
_this.pageMsg.todayloadingType = 1
|
||
uni.hideLoading()
|
||
}
|
||
|
||
})
|
||
},
|
||
getMbwaList() { // 以新闻列表模式呈现走动式管理数据
|
||
|
||
let _this = this
|
||
_this.$request.$get('GetMbwaNewList',{
|
||
HASPENDING: 0, // 1：仅查询待处理项；其他：所有列表信息
|
||
USER_ID: _this.user.UserId,
|
||
STATISTICSDATE: _this.searchTime.toString(','),
|
||
SERVERPART_ID: _this.screenCodes[this.selectIndex].ServerPartID,
|
||
pageSize: _this.pageMsg.todayPageSize,
|
||
pageIndex: _this.pageMsg.todayPageIndex
|
||
}).then(rs => {
|
||
|
||
if(!rs.ResultCode ||rs.ResultCode!='100'){
|
||
_this.isShow = false
|
||
}
|
||
let _data = rs.Data.List
|
||
uni.hideLoading()
|
||
|
||
_this.pageMsg.todayIsLastDay = rs.Data.IsLastDate
|
||
_this.pageMsg.todayListCount = rs.Data.TotalCount
|
||
|
||
_this.pageList = (_this.pageMsg.todayPageIndex===1 && _this.searchType === -1) ? _data : _this.pageList.concat(_data)
|
||
|
||
if(_data.length < _this.pageMsg.todayPageSize) {
|
||
_this.pageMsg.todayloadingType = 2
|
||
|
||
}else{
|
||
_this.pageMsg.todayloadingType = 1
|
||
|
||
}
|
||
_this.$forceUpdate()
|
||
|
||
})
|
||
|
||
},
|
||
getUnualList() { // 异常数据
|
||
|
||
let _this = this
|
||
_this.$request.$get('GetMbwaNewList',{
|
||
HASPENDING: 1, // 1：查询异常情况
|
||
USER_ID: _this.user.UserId,
|
||
SERVERPART_ID: _this.screenCodes[this.selectIndex].ServerPartID,
|
||
}).then(rs => {
|
||
if(!rs.ResultCode ||rs.ResultCode!='100'){
|
||
_this.isShow = false
|
||
}else {
|
||
|
||
let _data = rs.Data.List
|
||
|
||
_this.waitList = _this.pageMsg.unusualPageIndex===1 ? _data : _this.waitList.concat(_data)
|
||
|
||
_this.pageMsg.unusualListCount = rs.Data.TotalCount
|
||
if(_data.length < _this.pageMsg.unusualPageSize) {
|
||
|
||
_this.pageMsg.unusualEnd = true
|
||
}
|
||
_this.$forceUpdate()
|
||
|
||
}
|
||
|
||
})
|
||
},
|
||
toDetail(value) {
|
||
this.$util.toNextRoute('navigateTo', '/pages/mbwa/mbwaDetail?MBWA_ID=' + value.MBWA_ID)
|
||
|
||
},
|
||
bindPartChange(e) {
|
||
|
||
this.selectIndex = e.detail.value
|
||
|
||
uni.showLoading({
|
||
title:'正在加载'
|
||
})
|
||
this.getMbwaOutline()
|
||
|
||
// 当前为现场数据
|
||
|
||
let _date = this.$util.cutDate(new Date(), 'YYYY/MM/DD')
|
||
this.searchTime = [_date,_date]
|
||
this.searchType = -1
|
||
this.nextDate = this.$util.cutDate(new Date(), 'YYYY/MM/DD',-1)
|
||
this.pageMsg.todayloadingType = 0
|
||
this.pageMsg.todayPageIndex = 1
|
||
this.getMbwaList()
|
||
|
||
// 当前为异常数据
|
||
|
||
this.pageMsg.unusualEnd =false
|
||
this.pageMsg.unusualPageIndex = 1
|
||
this.getUnualList()
|
||
this.$forceUpdate()
|
||
},
|
||
downFresh() { // 下拉刷新
|
||
let _this = this
|
||
if (_this.currentTab===0) { // 当前为现场数据
|
||
|
||
_this.pageMsg.todayPageIndex = 1
|
||
_this.getMbwaList()
|
||
_this.$forceUpdate()
|
||
} else { // 当前为异常数据
|
||
|
||
|
||
_this.pageMsg.unusualPageIndex = 1
|
||
_this.getUnualList()
|
||
_this.$forceUpdate()
|
||
}
|
||
},
|
||
reloading(){
|
||
this.getServerList()
|
||
},
|
||
reachBottom () {
|
||
let _this = this
|
||
|
||
if (_this.currentTab===0) { // 当前为现场数据
|
||
if(_this.pageMsg.todayloadingType === 1){
|
||
_this.pageMsg.todayloadingType = 0
|
||
_this.loadingType = 1
|
||
_this.pageMsg.todayPageIndex += 1
|
||
_this.getMbwaList()
|
||
_this.$forceUpdate()
|
||
}
|
||
} else { // 当前为异常数据
|
||
if(!_this.pageMsg.unusualEnd){
|
||
_this.pageMsg.unusualPageIndex += 1
|
||
_this.getUnualList()
|
||
|
||
}
|
||
}
|
||
},
|
||
},
|
||
onLoad() {
|
||
uni.showLoading({
|
||
title:'正在加载'
|
||
})
|
||
this.reloading()
|
||
|
||
},
|
||
|
||
onPullDownRefresh() {
|
||
this.downFresh()
|
||
|
||
setTimeout(function() {
|
||
uni.stopPullDownRefresh()
|
||
}, 1000)
|
||
},
|
||
onReachBottom() {
|
||
this.reachBottom()
|
||
},
|
||
onShow() {
|
||
let _this = this
|
||
|
||
if(this.isReloading) {
|
||
uni.showLoading({
|
||
title:'正在加载'
|
||
})
|
||
|
||
_this.getMbwaList()
|
||
_this.getUnualList()
|
||
_this.shouldReLoadingList(false)
|
||
}
|
||
|
||
},
|
||
onUnload() {
|
||
this.$util.addUserBehavior()
|
||
|
||
},
|
||
onHide() {
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
*{
|
||
box-sizing: border-box;
|
||
}
|
||
.mbwa-body{
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
height: 100%;
|
||
width: 750upx;
|
||
}
|
||
.ml60 {
|
||
margin-left: 60upx;
|
||
}
|
||
|
||
.page-header {
|
||
width: 100%;
|
||
|
||
padding: 32upx 24upx 32upx 0;
|
||
background: #fff;
|
||
background-size: cover;
|
||
position: relative;
|
||
box-sizing: border-box;
|
||
}
|
||
.page-header-middle,.unusual-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.page-header-middle .header-text {
|
||
width: 472upx;
|
||
padding-left: 32upx;
|
||
border-left: 1upx solid #f1f1f1;
|
||
|
||
}
|
||
.header-text .normal-day{
|
||
color: #000;
|
||
height: 96upx;
|
||
line-height: 96upx;
|
||
font-size: 32upx;
|
||
}
|
||
.header-text .unusual-day{
|
||
color: #000;
|
||
height: 96upx;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
line-height: 1.5;
|
||
font-size: 32upx;
|
||
}
|
||
.page-header-middle image {
|
||
height: 35upx;
|
||
width: 148upx;
|
||
}
|
||
.page-wcl {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #869097;
|
||
font-size: 24upx;
|
||
}
|
||
|
||
.page-wcl span {
|
||
font-size: 24upx;
|
||
color: #D1352A;
|
||
}
|
||
|
||
.mbwa-content{
|
||
font-size: 30upx;
|
||
color: #000;
|
||
height: 96upx;
|
||
width: 424upx;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
line-height: 1.5;
|
||
}
|
||
.text1 {
|
||
color: #808080;
|
||
}
|
||
.typeText-color{
|
||
color: #999999;
|
||
}
|
||
.massage-tab {
|
||
display: flex;
|
||
height: 80upx;
|
||
|
||
width: 100%;
|
||
margin-top: 32upx;
|
||
background-color: #fff;
|
||
border-bottom: 1upx solid #f1f1f1;
|
||
position: relative;
|
||
}
|
||
.now-serverpart {
|
||
height: 80upx;
|
||
position: absolute;
|
||
right: 32upx;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.now-serverpart:before {
|
||
content: '';
|
||
background: url(../../static/images/mbwa/dw.png) no-repeat center;
|
||
background-size: contain;
|
||
height: 28upx;
|
||
width: 26upx;
|
||
margin-right: 8upx;
|
||
}
|
||
.massage-unit {
|
||
width: 120upx;
|
||
text-align: center;
|
||
line-height: 74upx;
|
||
color: #869097;
|
||
}
|
||
|
||
.massage-unit.active {
|
||
color: #222;
|
||
display: flex;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.massage-unit.active:after {
|
||
content: '';
|
||
height: 6upx;
|
||
width: 40upx;
|
||
background: #48a0f9;
|
||
border-radius: 6upx;
|
||
overflow: hidden;
|
||
}
|
||
.unusual-header {
|
||
margin: 32upx 24upx;
|
||
background: #fff;
|
||
box-shadow: 0px 2upx 8upx 1upx #e2e2e2;
|
||
padding: 16upx 24upx;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.unusual-header .unusual-header-text {
|
||
width: 460upx;
|
||
font-size: 24upx;
|
||
}
|
||
.unusual-header .red-span{
|
||
color: #D13B3B;
|
||
}
|
||
.unusual-header .unusual-header-btn {
|
||
background-color: #64a0e6;
|
||
color: #fff;
|
||
height: 56upx;
|
||
padding: 0 32upx;
|
||
font-size: 24upx;
|
||
line-height: 56upx;
|
||
border-radius: 6upx;
|
||
font-size: 24upx;
|
||
}
|
||
.msg-list {
|
||
background-color: #fff;
|
||
padding: 0 26upx;
|
||
}
|
||
.msg-unit {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 24upx 0;
|
||
box-sizing: border-box;
|
||
}
|
||
.msg-unit image{
|
||
height: 164upx;
|
||
width: 230upx;
|
||
border-radius: 8upx;
|
||
background: #f9f9f9;
|
||
margin-left: 16upx;
|
||
}
|
||
.msg-unit+.msg-unit {
|
||
border-top: 1upx solid #f1f1f1;
|
||
}
|
||
|
||
.uni-media-list-text-top {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.uni-media-list-text-top>p {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.massage-date {
|
||
display: flex;
|
||
align-items: center;
|
||
color: #939393;
|
||
font-size: 24upx;
|
||
|
||
}
|
||
.massage-date:before {
|
||
content: '';
|
||
margin-right: 8upx;
|
||
background: url(../../static/images/mbwa/xcsj.png) no-repeat center;
|
||
background-size: contain;
|
||
height: 20upx;
|
||
width: 20upx;
|
||
|
||
}
|
||
|
||
.area-title {
|
||
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 26upx;
|
||
color: #0C8EE9;
|
||
}
|
||
.area-title:before {
|
||
content: '';
|
||
background: url(../../static/images/mbwa/dw.png) no-repeat center;
|
||
background-size: contain;
|
||
height: 28upx;
|
||
width: 26upx;
|
||
margin-right: 8upx;
|
||
}
|
||
|
||
.area-name {
|
||
display: flex;
|
||
align-items: center;
|
||
color: #565656;
|
||
font-size: 24upx;
|
||
|
||
}
|
||
.area-name:before {
|
||
content: '';
|
||
background: url(../../static/images/mbwa/tsr.png) no-repeat center;
|
||
background-size: contain;
|
||
height: 20upx;
|
||
width: 20upx;
|
||
margin-right: 8upx;
|
||
}
|
||
|
||
.uni-media-list-body {
|
||
/* padding-left: 48upx; */
|
||
height: auto;
|
||
}
|
||
|
||
.status-tag {
|
||
font-size: 24upx;
|
||
/* background: #fff; */
|
||
color: #999;
|
||
border-radius: 4upx;
|
||
width: 96upx;
|
||
text-align: center;
|
||
|
||
}
|
||
.status-tag.shouldDo {
|
||
|
||
color: #f17e5f;
|
||
}
|
||
|
||
.status-tag.normal {
|
||
|
||
color: #72777C;
|
||
}
|
||
.moredate-box {
|
||
padding-top: 40upx;
|
||
padding-bottom: 60upx;
|
||
width: 400upx;
|
||
/* padding: 12upx 24upx; */
|
||
border-radius: 24upx;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
text-align: center;
|
||
color: #686868;
|
||
}
|
||
.footer-text {
|
||
font-size: 24upx;
|
||
text-align: center;
|
||
padding: 26upx 0;
|
||
color: #999;
|
||
}
|
||
</style>
|