uniapp-qxk/pages/order/order.vue

<template>
	<view>
		<!-- tabs选项卡 -->
		<view class="lf-flex">
			<view style="width: 84%;">
				<u-tabs
					:current="tabIndex" 
					:list="tabList" 
					:lineWidth="34"
					:scrollable="false" 
					:itemWidth="100 / tabList.length +'%'" 
					lineColor="#E7A23F"
					@change="switchTab"
				>
				</u-tabs>
			</view>
			<view class="filter-icon">
				<image src="@/static/icon/filter.png" @click="showFilter = !showFilter"></image>
			</view>
		</view>
		
		<!-- 筛选 -->
		<view class="filter-box" v-if="showFilter">
			<view class="flex-col group_6" >
			  <view class="flex-col section_5">
			    <view class="flex-col">
			      <text class="text_7">按收货确认时间</text>
			      <view class="flex-col group_8">
			        <view class="lf-flex lf-flex-wrap">
						<view class="filter-date-item" :class="{active: filterGather.date == item.value}" @click="filterGather.date = item.value" v-for="(item, index) in receivingTimeList" :key="index">{{ item.label }}</view>
			        </view>
			      </view>
			    </view>
			    <view class="flex-col group_11">
			      <text class="text_15">按送评信息</text>
			      <view class="flex-row group_12">
			        <view class="flex-col items-center text-wrapper_2">
					  <u-input v-model="filterGather.name" placeholder="输入送评人姓名或手机号"></u-input>
			        </view>
			        <view class="flex-col items-start text-wrapper_3">
					  <u-input v-model="filterGather.label" placeholder="输入标签"></u-input>
			        </view>
			      </view>
			    </view>
			    <view class="flex-col group_13">
			      <text class="text_18">按送评信息</text>
			      <view class="flex-col items-start text-wrapper_4">
					<u-input v-model="filterGather.number" placeholder="输入评级编号" class="text-wrapper_4-input" ></u-input>
			      </view>
			    </view>
			    <view class="flex-row group_14">
			      <view class="flex-col items-center text-wrapper_5" @click="reset">
			        <text>重置</text>
			      </view>
			      <view class="flex-col items-center text-wrapper_6" @click="confirm">
			        <text>确认</text>
			      </view>
			    </view>
			  </view>
			  <view class="flex-col items-center group_15">
			    <view class="section_7"> </view>
			  </view>
			</view>
		</view>
		
		
		
		<!-- 页面主体滚动区域 -->
		<swiper :current="tabIndex" :style="{height: swiperContentHeight}" @change="swiperChange">
			<swiper-item v-for="(tabItem, idx) in tabList" :key="idx" :item-id="tabItem.ident" @touchmove="stopTouchMove">
				<scroll-view 
					:style="{height: swiperContentHeight, 'padding-top': '30rpx'}" 
					:scroll-y="true"
					:refresher-enabled="true"
					:refresher-triggered="tabItem.isRefresher"
					@scrolltolower="scrolltolower"
					@refresherrefresh="refresherrefresh"
				>
					<view class="item-box" v-for="(item, index) in tabItem.data" :key="index">
						<view class="flex-col section_5">
						  <view class="justify-between">
						    <view class="flex-row group_8">
						      <image
						        src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/62677e395a7e3f03107ffc5f/62677e4a35a7e10011e93a80/16509497798740970822.png"
						        class="image_7"
						      />
						      <text class="text_7">在线送评</text>
						    </view>
						    <text class="text_8">待确认</text>
						  </view>
						  <view class="justify-between group_9">
						    <view class="flex-row">
						      <text>李丽丽</text>
						      <text class="text_10">15273936409</text>
						    </view>
						    <text>共5件</text>
						  </view>
						  <view class="justify-between group_11">
						    <text class="text_12">更多</text>
						    <view class="flex-row">
						      <view class="flex-col items-center text-wrapper">
						        <text>取消</text>
						      </view>
						      <view class="flex-col items-center text-wrapper_1">
						        <text>寄送藏品</text>
						      </view>
						    </view>
						  </view>
						</view>
					</view>
					
					<!-- 当前tab下没有数据且无分页数据时，显示系统剪辑中 -->
					<view class="nomore-box" v-if="tabItem.data.length <= 0 && !tabItem.isPage">
						<image src="@/static/images/nomore.png"></image>
						<view>暂无订单记录</view>
					</view>
					<!-- 加载中和暂无更多显示 -->
					<u-loadmore :status="tabItem.status" margin-bottom="20" marginTop="20" v-else></u-loadmore>
					<!-- 底部修饰，解决部分机型底部被挡住且padding和margin都不生效的BUG -->
					<view class="additional"></view>
				</scroll-view>
			</swiper-item>
		</swiper>
		
		<!-- 轻提示 -->
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	
	export default {
		data(){
			let publicKey = {
				page: 1,
				pageSize: 5,
				isPage: true,
				status: 'loading', // loading加载，nomore没有更多了
				isRefresher: false, // 下拉刷新状态，默认没有开启下拉
			}
			return {
				showFilter: false,
				tabList: [{
					name: '全部',
					ident: 'all',
					data: [],
					badge: {isDot: false},
					requestFunction: 'getList',
					...publicKey
				},{
					name: '待确认',
					ident: 'video',
					data: [],
					badge: {isDot: false},
					requestFunction: 'getList',
					...publicKey
				},{
					name: '评级中',
					ident: 'image',
					data: [],
					badge: {isDot: false},
					requestFunction: 'getList',
					...publicKey
				},{
					name: '待付款',
					ident: 'share',
					data: [],
					badge: {isDot: false},
					requestFunction: 'getList',
					...publicKey
				},{
					name: '待收货',
					ident: 'short',
					data: [],
					badge: {isDot: false},
					requestFunction: 'getList',
					...publicKey
				}],
				tabIndex: 0,
				receivingTimeList: [{
					label: '1个月内',
					value: '1'
				},{
					label: '3个月内',
					value: '2'
				},{
					label: '6个月内',
					value: '3'
				},{
					label: '今年',
					value: '4'
				},{
					label: '2021年',
					value: '5'
				},{
					label: '2020年',
					value: '6'
				},{
					label: '2019年',
					value: '7'
				}],
				filterGather: {
					date: '1',
					name: '',
					label: '',
					number: ''
				}
			}
		},
		computed: {
			// 传入对应tab的ident值，在当前tabIndex下是否匹配，匹配上返回true，否则返回false，调用matchTabIdent(par1, par2, ...)
			matchTabIdent(){
				let that = this;
				return function(){
					let identList = Array.from(arguments);
					let hasKey = identList.some(item => that.tabList[that.tabIndex].ident === item);
					return hasKey;
				}
			},
			// 计算获得swiper内容区域剩余高度
			swiperContentHeight(){
				return `calc(100vh - 80rpx - 10rpx)`;
			}
		},
		onLoad(options){
			this.tabIndex = Number(options.current || this.tabIndex);
			this[ this.tabList[this.tabIndex].requestFunction ](); // 获取当前tab下的数据列表
		},
		methods: {
			confirm(){
				this.$msg('确认');
				this.showFilter = false;
			},
			reset(){
				this.filterGather = this.$options.data().filterGather;
			},
			// 获取数据
			getList(options = {}){
				let tabItem = this.tabList[this.tabIndex];
				
				setTimeout(() => {
					if(tabItem.page === 1){
						tabItem.data = [1,2,3,4,5]
					}else{
						let arr = [Math.random(), Math.random(), Math.random(), Math.random(), Math.random()];
						tabItem.data.push(...arr);
						if(tabItem.page === 4){
							tabItem.isPage = false;
							tabItem.status = "nomore";
						}
					}
					
					if(options.refresher){
						this.$refs.uToast.show({
							title: '刷新成功',
							type: 'success'
						});
						tabItem.isRefresher = false;
					}
				}, 800);
			},
			// 切换tab
			switchTab(item){
				this.tabIndex = item.index;
				// 判断所切换到的tab下是否有数据并且isPage为true，如果没有再请求，否则啥也不干
				let tabItem = this.tabList[this.tabIndex];
				if(tabItem.data.length === 0 && tabItem.isPage){
					this[ tabItem.requestFunction ]();
				}
			},
			// swiper滑动响应事件
			swiperChange(event){
				// 事件触发类型为触摸时才做处理，否则是因为switchTab方法执行导致的事件回调
				if(event.detail.source === 'touch'){
					this.tabIndex = event.detail.current;
					// 判断所切换到的tab下是否有数据并且isPage为true，如果没有再请求，否则啥也不干
					let tabItem = this.tabList[this.tabIndex];
					if(tabItem.data.length === 0 && tabItem.isPage){
						this[ tabItem.requestFunction ]();
					}
				}
				console.log("swiperChange", event);
			},
			stopTouchMove(){
				return false;
			},
			// 下拉刷新，重新获取页面数据，将状态置回初始值再请求
			refresherrefresh(){
				let tabItem = this.tabList[this.tabIndex];
				tabItem.isRefresher = true;
				tabItem.page = 1;
				tabItem.isPage = true;
				tabItem.status = 'loading';
				tabItem.data = [];
				this[tabItem.requestFunction]({refresher: true});
			},
			// 滚动到底部
			scrolltolower(){
				let tabItem = this.tabList[this.tabIndex];
				if(tabItem.isPage){
					tabItem.page++;
					this[tabItem.requestFunction]();
				}
			}
		}
	}
</script>

<style>
	/* 修复ios页面左右漂浮BUG */
	page{
		overflow: hidden;
	}
</style>
<style scoped lang="scss">
	.filter-icon{
		width: 16%;
		height: 34rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-left: 2rpx solid #F6F6F6;
		image{
			width: 36rpx;
			height: 32rpx;
		}
	}
	
	.filter-box{
		position: absolute;
		z-index: 9999;
		width: 750rpx;
		
		.text-wrapper_1 {
		  margin-left: 16rpx;
		  flex: 1 1 160rpx;
		  color: rgb(51, 51, 51);
		  font-size: 28rpx;
		  font-weight: 500;
		  line-height: 40rpx;
		  white-space: nowrap;
		  padding: 14rpx 0;
		  background-color: rgb(246, 246, 246);
		  border-radius: 10rpx;
		  height: 68rpx;
		}
		.left-text-wrapper {
		  padding: 14rpx 0;
		  background-color: rgb(246, 246, 246);
		  border-radius: 10rpx;
		  width: 160rpx;
		  height: 68rpx;
		}
		.group_6 {
		  padding-top: 2rpx;
		}
		.section_5 {
		  padding: 40rpx 32rpx 50rpx;
		  background-color: rgb(255, 255, 255);
		}
		.group_15 {
		  padding: 506rpx 0 16rpx;
		  position: relative;
		}
		.group_11 {
		  margin-top: 50rpx;
		}
		.group_13 {
		  margin-top: 50rpx;
		}
		.group_14 {
		  margin-top: 50rpx;
		}
		
		.section_7 {
		  background-color: rgba(0, 0, 0, 0.5);
		  width: 750rpx;
		  height: 528rpx;
		  top: 0;
		  right: 0;
		  bottom: 0;
		  left: 0;
		  position: absolute;
		}
		.text_7 {
		  color: rgb(51, 51, 51);
		  font-size: 32rpx;
		  font-weight: 500;
		  line-height: 44rpx;
		  white-space: nowrap;
		}
		.group_8 {
		  margin-top: 20rpx;
		}
		.text_15 {
		  color: rgb(51, 51, 51);
		  font-size: 32rpx;
		  font-weight: 500;
		  line-height: 44rpx;
		  white-space: nowrap;
		}
		.group_12 {
		  margin-top: 20rpx;
		  color: rgb(195, 195, 195);
		  font-size: 28rpx;
		  font-weight: 500;
		  line-height: 40rpx;
		  white-space: nowrap;
		}
		.text_18 {
		  color: rgb(51, 51, 51);
		  font-size: 32rpx;
		  font-weight: 500;
		  line-height: 44rpx;
		  white-space: nowrap;
		}
		.text-wrapper_4 {
		  margin-top: 18rpx;
		  // padding: 12rpx 0;
		  color: rgb(195, 195, 195);
		  font-size: 28rpx;
		  font-weight: 500;
		  line-height: 40rpx;
		  white-space: nowrap;
		  border-radius: 10rpx;
		  border: solid 2rpx rgb(195, 195, 195);
		  /deep/.u-input{
			  width: 100%;
		  }
		}
		.text-wrapper_5 {
		  padding: 24rpx 0;
		  flex: 1 1 330rpx;
		  color: rgb(195, 195, 195);
		  font-size: 32rpx;
		  font-weight: 600;
		  line-height: 44rpx;
		  white-space: nowrap;
		  border-radius: 10rpx;
		  height: 96rpx;
		  border: solid 2rpx rgb(195, 195, 195);
		}
		.text-wrapper_6 {
		  margin-left: 26rpx;
		  padding: 26rpx 0;
		  flex: 1 1 330rpx;
		  color: rgb(255, 255, 255);
		  font-size: 32rpx;
		  font-weight: 600;
		  line-height: 44rpx;
		  white-space: nowrap;
		  background-color: rgb(231, 162, 63);
		  border-radius: 10rpx;
		  height: 96rpx;
		}
		.group_10 {
		  margin-top: 20rpx;
		  color: rgb(51, 51, 51);
		  font-size: 28rpx;
		  font-weight: 500;
		  line-height: 40rpx;
		  white-space: nowrap;
		}
		.text-wrapper_2 {
		  // padding: 12rpx 0;
		  flex: 1 1 auto;
		  border-radius: 10rpx;
		  height: 68rpx;
		  border: solid 2rpx rgb(195, 195, 195);
		}
		.text-wrapper_3 {
		  margin-left: 28rpx;
		  // padding: 12rpx 0;
		  border-radius: 10rpx;
		  width: 308rpx;
		  height: 68rpx;
		  border: solid 2rpx rgb(195, 195, 195);
		}
		.text_19 {
		  margin-left: 18rpx;
		}
		.text-wrapper {
		  padding: 14rpx 0;
		  flex: 1 1 160rpx;
		  color: rgb(255, 255, 255);
		  font-size: 28rpx;
		  font-weight: 500;
		  line-height: 40rpx;
		  white-space: nowrap;
		  background-color: rgb(231, 162, 63);
		  border-radius: 10rpx;
		  height: 68rpx;
		}
		.view_3 {
		  margin-left: 14rpx;
		}
		.view_6 {
		  margin-left: 16rpx;
		}
		.view_7 {
		  margin-left: 14rpx;
		}
		.text_17 {
		  margin-left: 18rpx;
		}
	}
	
	
	.item-box{
		width: 686rpx;
		// height: 300rpx;
		margin: 0 auto;
		background-color: #f6f6f6;
		&:nth-child(n+2){
			margin-top: 20rpx;
		}
		
		.section_5 {
		  padding: 40rpx 32rpx 0;
		  background-color: rgb(255, 255, 255);
		}
		.group_9 {
		  margin-top: 30rpx;
		  color: rgb(51, 51, 51);
		  font-size: 32rpx;
		  font-weight: 500;
		  line-height: 44rpx;
		  white-space: nowrap;
		}
		.group_11 {
		  margin-top: 26rpx;
		  padding: 32rpx 0 28rpx;
		  border-top: solid 2rpx rgb(239, 239, 239);
		}
		.group_8 {
		  color: rgb(153, 153, 153);
		  font-size: 28rpx;
		  line-height: 40rpx;
		  white-space: nowrap;
		}
		.text_8 {
		  color: rgb(43, 102, 234);
		  font-size: 28rpx;
		  font-weight: 500;
		  line-height: 40rpx;
		  white-space: nowrap;
		}
		.text_12 {
		  align-self: center;
		  color: rgb(153, 153, 153);
		  font-size: 28rpx;
		  line-height: 40rpx;
		  white-space: nowrap;
		}
		.image_7 {
		  width: 40rpx;
		  height: 40rpx;
		}
		.text_7 {
		  margin-left: 12rpx;
		}
		.text_10 {
		  margin-left: 21rpx;
		}
		.text-wrapper {
		  padding: 10rpx 0;
		  color: rgb(153, 153, 153);
		  font-size: 28rpx;
		  font-weight: 500;
		  line-height: 40rpx;
		  white-space: nowrap;
		  border-radius: 32rpx;
		  width: 160rpx;
		  height: 64rpx;
		  border: solid 2rpx rgb(153, 153, 153);
		}
		.text-wrapper_1 {
		  margin-left: 18rpx;
		  padding: 10rpx 0;
		  color: rgb(231, 162, 63);
		  font-size: 28rpx;
		  font-weight: 500;
		  line-height: 40rpx;
		  white-space: nowrap;
		  border-radius: 32rpx;
		  width: 160rpx;
		  height: 64rpx;
		  border: solid 2rpx rgb(231, 162, 63);
		}
	}
	
	.nomore-box{
		width: 686rpx;
		height: 500rpx;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		image{
			width: 434rpx; 
			height: 260rpx;
		}
		view{
			text-align: center; 
			color: #777777;
			margin-top: 40rpx;
		}
	}
	
	// 解决scroll-view底部padding和margin都不生效贴边的BUG
	.additional{
		height: calc( env(safe-area-inset-bottom) + 20rpx );
		height: calc( constant(safe-area-inset-bottom) + 20rpx );
	}
	
	.filter-date-item{
		width: 160rpx;
		height: 68rpx;
		background: #F6F6F6;
		border-radius: 10rpx;
		font-size: 28rpx;
		color: #333333;
		margin-right: 16rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		&:nth-child(4n){
			margin-right: 0rpx;
		}
		&:nth-child(n+5){
			margin-top: 16rpx;
		}
		&.active{
			color: #FFFFFF;
			background-color: #E7A23F;
		}
	}
</style>