|
@@ -0,0 +1,231 @@
|
|
|
+<template>
|
|
|
+ <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>
|
|
|
+ <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>
|
|
|
+ <view class="order-time">
|
|
|
+ {{'2023-10-21 15:22:55'}}
|
|
|
+ </view>
|
|
|
+ <view class="order-site">
|
|
|
+ {{'三江换电站'}}
|
|
|
+ </view>
|
|
|
+ <view class="order-reason">
|
|
|
+ {{'三江换电站三江换电站三江换电站三江换电站三江换电站三江换电站三江换电站三江换电站三江换电站三江换电站三江换电站三江换电站三江换电站'}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view v-if="no_more" class="no-more">亲, 没有更多了
|
|
|
+ </view>
|
|
|
+ <!-- 无数据提供的页面 -->
|
|
|
+ <view v-if="!item.dataSet.length">
|
|
|
+ <view class="yoshop-notcont">
|
|
|
+ <text class="cont">亲,暂无订单哦</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ </swiper-item>
|
|
|
+ </swiper>
|
|
|
+ <u-select :list="siteList" v-model="show" @confirm="siteSelectCallback"> </u-select>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ //表头列表
|
|
|
+ tabsList: [{
|
|
|
+ name: '工单上报'
|
|
|
+ }, {
|
|
|
+ name: '处理记录'
|
|
|
+ }],
|
|
|
+ current: 0,
|
|
|
+ swiperCurrent: 0,
|
|
|
+ scrollerHeight: 0,
|
|
|
+ swiperContentHeight: 0,
|
|
|
+ tabs:[
|
|
|
+ {name:'工单上报',index:0,dataSet:[]},
|
|
|
+ {name:'处理记录2',index:1,dataSet:[]},
|
|
|
+ ],
|
|
|
+ formData: {
|
|
|
+ name: '全部站点',
|
|
|
+ },
|
|
|
+ show: false,
|
|
|
+ siteList: [
|
|
|
+ {label: '全部站点', value: ''},
|
|
|
+ {label: '兰州皋兰站', value: '1'},
|
|
|
+ {label: '河北沧州站', value: '2'}
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //第一次加载
|
|
|
+ onLoad(e) {
|
|
|
+ console.log('打印参数:',this.current)
|
|
|
+ this.swiperCurrent = e.type
|
|
|
+ this.current = e.type
|
|
|
+ this.tabsChange(0);
|
|
|
+ },
|
|
|
+ onReady() {
|
|
|
+ let that = this
|
|
|
+ uni.getSystemInfo({
|
|
|
+ success: function (res) {
|
|
|
+ let windowHeight= res.windowHeight;
|
|
|
+ that.swiperContentHeight = (windowHeight-158) + 'px';
|
|
|
+ that.scrollerHeight = (windowHeight-5) + 'px'; // 给5px的底部间距
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //页面显示
|
|
|
+ onShow() {
|
|
|
+
|
|
|
+ },
|
|
|
+ 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;
|
|
|
+ },
|
|
|
+ // scroll-view到底部加载更多
|
|
|
+ onreachBottom() {
|
|
|
+ this.tabsChange(this.swiperCurrent);
|
|
|
+ },
|
|
|
+ //站点选择
|
|
|
+ siteSelectCallback(data) {
|
|
|
+ uni.hideKeyboard();
|
|
|
+ this.formData.name = data[0].label;
|
|
|
+ },
|
|
|
+ //跳转详情页面
|
|
|
+ gotoDetail(item) {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/index/orderDetail?id=' + item.id
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .page-content {
|
|
|
+ height: 100vh;
|
|
|
+ position: relative;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: $uni-bg-color;
|
|
|
+ padding-bottom: env(safe-area-inset-bottom);
|
|
|
+ .page-search-container {
|
|
|
+ display: flex;
|
|
|
+ background: #FFFFFF;
|
|
|
+ .page-search-text {
|
|
|
+ margin-left: 30rpx;
|
|
|
+ width: 30%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .swiper-group {
|
|
|
+ padding: 0 32rpx;
|
|
|
+ height: 100% !important;
|
|
|
+ .order-container {
|
|
|
+ height: 270rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ margin-top: 10rpx;
|
|
|
+ padding: 32rpx;
|
|
|
+ .order-title-container {
|
|
|
+ display: flex;
|
|
|
+ .order-title-text {
|
|
|
+ height: 44rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-family: PingFang SC-Medium, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #1D2129;
|
|
|
+ line-height: 44rpx;
|
|
|
+ width: calc(100% - 154rpx);
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+ .order-status {
|
|
|
+ height: 44rpx;
|
|
|
+ font-size: 22rpx;
|
|
|
+ font-family: PingFang SC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #3F8CFF;
|
|
|
+ line-height: 44rpx;
|
|
|
+ width: 80rpx;
|
|
|
+ text-align: center;
|
|
|
+ background: #e8F1FF;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ margin-left: 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .order-time {
|
|
|
+ font-size: 22rpx;
|
|
|
+ font-family: PingFang SC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #86909C;
|
|
|
+ line-height: 40rpx;
|
|
|
+ margin-top: 16rpx;
|
|
|
+ }
|
|
|
+ .order-site {
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-family: PingFang SC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #4E5969;
|
|
|
+ line-height: 40rpx;
|
|
|
+ margin-top: 16rpx;
|
|
|
+ }
|
|
|
+ .order-reason {
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-family: PingFang SC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #4E5969;
|
|
|
+ line-height: 40rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ margin-top: 16rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+</style>
|