|
|
@@ -2,42 +2,47 @@
|
|
|
<view class="page-content">
|
|
|
<view class="page-search-container">
|
|
|
<u-input type="select" class="page-search-text" :select-open="show" placeholder="请选择换电站" v-model="formData.name" @click="show = true"/>
|
|
|
- <u-tabs-swiper ref="tabs" :list="tabsList" :current="current" :is-scroll="false" bar-height="6" bar-width="40" active-color="#2979ff" @change="tabsChange" ></u-tabs-swiper>
|
|
|
+ <view class="searchType-top-container">
|
|
|
+ <view :class="current == 0 ? 'searchType-top-left-active' : 'searchType-top-left'" @click="tabsChange(0)">
|
|
|
+ 工单上报
|
|
|
+ </view>
|
|
|
+ <view :class="current == 1 ? 'searchType-top-right-active' : 'searchType-top-right'" @click="tabsChange(1)">
|
|
|
+ 参与工单
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <swiper class="swiper-group" :style="{height:swiperContentHeight}" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
|
|
|
- <swiper-item class="swiper-item" v-for="(item, index) in tabs" :key="index">
|
|
|
- <scroll-view class="scroll-content-container" :style="{height:scrollerHeight}" scroll-y @scrolltolower="onreachBottom" @click="gotoDetail(item)">
|
|
|
- <view class="order-container" v-for="(order,i) in item.dataSet" :key="i">
|
|
|
- <view class="order-title-container">
|
|
|
- <view class="order-title-text">
|
|
|
- 充电机故障充电机故障充电机故障充电机故障
|
|
|
- </view>
|
|
|
- <view class="order-status">
|
|
|
- 待处理
|
|
|
- </view>
|
|
|
+ <view class="swiper-group">
|
|
|
+ <scroll-view class="scroll-content-container" :style="{height:scrollerHeight}" scroll-y @scrolltolower="onreachBottom">
|
|
|
+ <view class="order-container" v-for="(order,i) in orderlist" :key="i" @click="gotoDetail(order)">
|
|
|
+ <view class="order-title-container">
|
|
|
+ <view class="order-title-text">
|
|
|
+ {{order.problemTitle || '-'}}
|
|
|
</view>
|
|
|
- <view class="order-time">
|
|
|
- {{'2023-10-21 15:22:55'}}
|
|
|
- </view>
|
|
|
- <view class="order-site">
|
|
|
- {{'三江换电站'}}
|
|
|
- </view>
|
|
|
- <view class="order-reason">
|
|
|
- {{'三江换电站三江换电站三江换电站三江换电站三江换电站三江换电站三江换电站三江换电站三江换电站三江换电站三江换电站三江换电站三江换电站'}}
|
|
|
+ <view class="order-status">
|
|
|
+ {{order.status == 0 ? '未处理' : (order.status == 1 ? '待处理' : '已完结')}}
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view v-if="no_more" class="no-more">亲, 没有更多了
|
|
|
+ <view class="order-time">
|
|
|
+ {{order.occurrenceTime || '-'}}
|
|
|
</view>
|
|
|
- <!-- 无数据提供的页面 -->
|
|
|
- <view v-if="!item.dataSet.length">
|
|
|
- <view class="yoshop-notcont">
|
|
|
- <text class="cont">亲，暂无订单哦</text>
|
|
|
- </view>
|
|
|
+ <view class="order-site">
|
|
|
+ {{order.stationName || '-'}}
|
|
|
+ </view>
|
|
|
+ <view class="order-reason">
|
|
|
+ {{order.deviceProblem || '-'}}
|
|
|
</view>
|
|
|
- </scroll-view>
|
|
|
- </swiper-item>
|
|
|
- </swiper>
|
|
|
- <u-select :list="siteList" v-model="show" @confirm="siteSelectCallback"> </u-select>
|
|
|
+ </view>
|
|
|
+ <view v-if="noMore" class="more-data">
|
|
|
+ {{textInfo}}
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ <view v-if="!orderlist.length">
|
|
|
+ <view class="yoshop-notcont">
|
|
|
+ <text class="cont">暂无工单</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <u-select :list="siteList" v-model="show" value-name="stationCode" label-name="stationName" @confirm="siteSelectCallback"> </u-select>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
@@ -45,37 +50,36 @@
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
- //表头列表
|
|
|
- tabsList: [{
|
|
|
- name: '工单上报'
|
|
|
- }, {
|
|
|
- name: '参与工单'
|
|
|
- }],
|
|
|
+ //当前下标
|
|
|
current: 0,
|
|
|
- swiperCurrent: 0,
|
|
|
scrollerHeight: 0,
|
|
|
swiperContentHeight: 0,
|
|
|
- tabs:[
|
|
|
- {name:'工单上报',index:0,dataSet:[]},
|
|
|
- {name:'参与工单',index:1,dataSet:[]},
|
|
|
- ],
|
|
|
+ //查询条件
|
|
|
formData: {
|
|
|
name: '全部站点',
|
|
|
+ stationCode: null,
|
|
|
+ recordType: 0,
|
|
|
+ pageIndex: 1,
|
|
|
+ pageSize: 10,
|
|
|
},
|
|
|
+ //是否显示站点
|
|
|
show: false,
|
|
|
- siteList: [
|
|
|
- {label: '全部站点', value: ''},
|
|
|
- {label: '兰州皋兰站', value: '1'},
|
|
|
- {label: '河北沧州站', value: '2'}
|
|
|
- ]
|
|
|
+ //站点列表
|
|
|
+ siteList: [],
|
|
|
+ //是否更多
|
|
|
+ noMore: false,
|
|
|
+ //工单列表
|
|
|
+ orderlist: [],
|
|
|
+ //总条数
|
|
|
+ pageTotal: 0,
|
|
|
+ //提示
|
|
|
+ textInfo: '',
|
|
|
}
|
|
|
},
|
|
|
//第一次加载
|
|
|
onLoad(e) {
|
|
|
- console.log('打印参数:',this.current)
|
|
|
- this.swiperCurrent = e.type
|
|
|
- this.current = e.type
|
|
|
- this.tabsChange(0);
|
|
|
+ this.current = e.type;
|
|
|
+ this.formData.recordType = e.type;
|
|
|
},
|
|
|
onReady() {
|
|
|
let that = this
|
|
|
@@ -83,55 +87,51 @@
|
|
|
success: function (res) {
|
|
|
let windowHeight= res.windowHeight;
|
|
|
that.swiperContentHeight = (windowHeight-158) + 'px';
|
|
|
- that.scrollerHeight = (windowHeight-5) + 'px'; // 给5px的底部间距
|
|
|
+ that.scrollerHeight = (windowHeight - 60) + 'px'; // 给5px的底部间距
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
//页面显示
|
|
|
onShow() {
|
|
|
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getSites();
|
|
|
+ this.getDataList();
|
|
|
},
|
|
|
methods: {
|
|
|
// tabs通知swiper切换
|
|
|
tabsChange(index) {
|
|
|
- this.swiperCurrent = index;
|
|
|
- let list = [
|
|
|
- {name: '苹果', price: 3000, sb: '一类-化工', sl: 8},
|
|
|
- {name: '苹果', price: 3000, sb: '一类-化工', sl: 8},
|
|
|
- {name: '苹果', price: 3000, sb: '一类-化工', sl: 8},
|
|
|
- {name: '苹果', price: 3000, sb: '一类-化工', sl: 8},
|
|
|
- {name: '苹果', price: 3000, sb: '一类-化工', sl: 8},
|
|
|
- {name: '苹果', price: 3000, sb: '一类-化工', sl: 8},
|
|
|
- {name: '苹果', price: 3000, sb: '一类-化工', sl: 8},
|
|
|
- {name: '苹果', price: 3000, sb: '一类-化工', sl: 8},
|
|
|
- {name: '苹果', price: 3000, sb: '一类-化工', sl: 8},
|
|
|
- {name: '苹果', price: 3000, sb: '一类-化工', sl: 8},
|
|
|
- {name: '苹果', price: 3000, sb: '一类-化工', sl: 8},
|
|
|
- {name: '苹果', price: 3000, sb: '一类-化工', sl: 8},
|
|
|
- ]
|
|
|
- this.tabs[index].dataSet = this.tabs[index].dataSet.concat(list);
|
|
|
- },
|
|
|
- // swiper-item左右移动，通知tabs的滑块跟随移动
|
|
|
- transition(e) {
|
|
|
- let dx = e.detail.dx;
|
|
|
- this.$refs.tabs.setDx(dx);
|
|
|
- },
|
|
|
- // 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
|
|
|
- // swiper滑动结束，分别设置tabs和swiper的状态
|
|
|
- animationfinish(e) {
|
|
|
- let current = e.detail.current;
|
|
|
- this.$refs.tabs.setFinishCurrent(current);
|
|
|
- this.swiperCurrent = current;
|
|
|
- this.current = current;
|
|
|
+ this.current = index;
|
|
|
+ this.formData.pageIndex = 1;
|
|
|
+ if(index == 1) {
|
|
|
+ this.formData.recordType = 1
|
|
|
+ } else {
|
|
|
+ this.formData.recordType = 0
|
|
|
+ }
|
|
|
+ this.getDataList();
|
|
|
},
|
|
|
// scroll-view到底部加载更多
|
|
|
onreachBottom() {
|
|
|
- this.tabsChange(this.swiperCurrent);
|
|
|
+ this.noMore = true;
|
|
|
+ this.textInfo = '向上拉加载更多';
|
|
|
+ if(this.pageTotal > this.formData.pageIndex * this.formData.pageSize) {
|
|
|
+ this.textInfo = '加载中...'
|
|
|
+ this.formData.pageIndex += 1;
|
|
|
+ this.getDataList();
|
|
|
+ } else {
|
|
|
+ this.textInfo = '我是有底线的';
|
|
|
+ setTimeout(() => {
|
|
|
+ this.noMore = false;
|
|
|
+ }, 1000);
|
|
|
+ }
|
|
|
},
|
|
|
//站点选择
|
|
|
siteSelectCallback(data) {
|
|
|
uni.hideKeyboard();
|
|
|
this.formData.name = data[0].label;
|
|
|
+ this.formData.stationCode = data[0].value;
|
|
|
+ this.getDataList();
|
|
|
},
|
|
|
//跳转详情页面
|
|
|
gotoDetail(item) {
|
|
|
@@ -139,7 +139,39 @@
|
|
|
url: '/pages/index/orderDetail?id=' + item.id
|
|
|
})
|
|
|
},
|
|
|
-
|
|
|
+ //获取权限内所有站点列表
|
|
|
+ getSites() {
|
|
|
+ let _that = this;
|
|
|
+ _that.siteList = [];
|
|
|
+ let siteList = [{stationName: '全部站点', stationCode: ''}];
|
|
|
+ _that.$http.getHasStationCodeAndName().then(res => {
|
|
|
+ uni.hideLoading();
|
|
|
+ if(res.code == 200) {
|
|
|
+ siteList = siteList.concat(res.data);
|
|
|
+ _that.siteList = siteList
|
|
|
+ } else {
|
|
|
+ _that.$utils.msg(res.msg);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //获取列表数据
|
|
|
+ getDataList() {
|
|
|
+ let _that = this;
|
|
|
+ uni.showLoading({
|
|
|
+ title: '搜索中...',
|
|
|
+ })
|
|
|
+ _that.$http.getOrderLogList(_that.formData).then(res => {
|
|
|
+ if(res.code == 200) {
|
|
|
+ if (_that.formData.pageIndex == 1) _that.orderlist = [];
|
|
|
+ _that.pageTotal = res.data.total;
|
|
|
+ _that.orderlist = _that.orderlist.concat(res.data.list);
|
|
|
+ _that.noMore = false;
|
|
|
+ } else {
|
|
|
+ _that.$utils.msg(res.msg);
|
|
|
+ }
|
|
|
+ uni.hideLoading();
|
|
|
+ })
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
@@ -151,6 +183,7 @@
|
|
|
box-sizing: border-box;
|
|
|
background: $uni-bg-color;
|
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
|
+ overflow-y: hidden;
|
|
|
.page-search-container {
|
|
|
display: flex;
|
|
|
background: #FFFFFF;
|
|
|
@@ -158,6 +191,50 @@
|
|
|
margin-left: 30rpx;
|
|
|
width: 30%;
|
|
|
}
|
|
|
+ .searchType-top-container {
|
|
|
+ display: flex;
|
|
|
+ width: 70%;
|
|
|
+ height: 80rpx;
|
|
|
+ margin-left: 40rpx;
|
|
|
+ .searchType-top-left {
|
|
|
+ width: 50%;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-family: PingFang SC-Medium, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #131212;
|
|
|
+ line-height: 80rpx;
|
|
|
+ }
|
|
|
+ .searchType-top-left-active {
|
|
|
+ width: 50%;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-family: PingFang SC-Medium, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #3F8CFF;
|
|
|
+ line-height: 80rpx;
|
|
|
+ border-bottom: 1rpx solid #3F8CFF;
|
|
|
+ }
|
|
|
+ .searchType-top-right {
|
|
|
+ width: 50%;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-family: PingFang SC-Medium, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #131212;
|
|
|
+ line-height: 80rpx;
|
|
|
+ }
|
|
|
+ .searchType-top-right-active {
|
|
|
+ width: 50%;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-family: PingFang SC-Medium, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #3F8CFF;
|
|
|
+ line-height: 80rpx;
|
|
|
+ border-bottom: 1rpx solid #3F8CFF;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
.swiper-group {
|
|
|
padding: 0 32rpx;
|
|
|
@@ -225,7 +302,29 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
+ .more-data {
|
|
|
+ background: #FFFFFF;
|
|
|
+ margin-top: 10rpx;
|
|
|
+ line-height: 60rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-family: PingFang SC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #989796;
|
|
|
+ }
|
|
|
+ .yoshop-notcont {
|
|
|
+ position: fixed;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -30%);
|
|
|
+ .cont {
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-family: PingFang SC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #4E5969;
|
|
|
+ line-height: 40rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
</style>
|
renmy