FleetManagement-MPWEIXIN/Order/pages/index/index.vue

<template>
	<view class="order-body flex column">
		<!-- 顶部筛选 -->
		<view class="order-search-container">
			<view class="order-filterGroups-container flex">
				<view @click="select(item)" v-for=" (item,index) in filterGroups" :key="index"
					:class=" searchParams.params.status==item.value? 'order-filter-item-is' : 'order-filter-item'">
					{{item.label}}
				</view>
			</view>
		</view>
		<!-- 是否上传/共计 -->
		<view class="order-other-search flex ac">
			<view class="order-other-search-left ">
				<uni-data-select placeholder='是否上传费用' v-model="searchParams.params.uploadFlag" :localdata="range"
					@change="change"></uni-data-select>
			</view>
			<view class="order-other-search-right">共计： <text>{{currentCount}}单</text> </view>
		</view>
		<!-- 列表 -->
		<view class="order-list oneflex">
			<scroll-view v-if="orderList.length" class="scroll" @refresherrefresh='refresherrefresh'
				:refresher-enabled='true' :refresher-triggered='refresherTriggered'
				style="height: 100%;padding-bottom: 50px;" scroll-y="true" @scrolltolower='scrolltolower'>
				<order-item @orderItemCenterClick='orderItemCenterClick' @orderItemFooterClick='orderItemFooterClick'
					:order-data="item" :key="index" v-for="(item,index) in orderList"></order-item>
			</scroll-view>

		</view>
	</view>
</template>

<script>
	import orderApi from '@/api/order.js'
	import orderItem from "@/components/orderItem/orderItem.vue"
	export default {
		components: {
			orderItem
		},
		options: {
			styleIsolation: 'shared'
		},
		data() {
			return {
				currentCount:0,
				range: [{
						value: 1,
						text: "未上传"
					},
					{
						value: 2,
						text: "已上传"
					}
				],
				orderList: [],
				searchParams: {
					"pageSize": 10,
					"currentPage": 1,
					"params": {
						"driverId": uni.getStorageSync('user')?.driverId || "",
						"status": "", //1 ：已下单 2：已发货； 3：已卸货； 4已取消；
						"uploadFlag": "" //上传费用标识：1：未上传；2：已上传；
					}
				},
				refresherTriggered: false,
				filterGroups: [{
						label: "全部",
						value: ""
					},
					{
						label: "待发货",
						value: "1"
					},
					{
						label: "待卸货",
						value: "2"
					},
					{
						label: "已卸货",
						value: "3"
					},
					{
						label: "已取消",
						value: "4"
					}
				]
			}
		},
		created() {
			this.getList();
		},
		onShow() {},
		methods: {
			change() { 
				this.refresherrefresh(false)
			},
			orderItemFooterClick(e) {
				if (e.status == '4') return
				uni.navigateTo({
					url: `/Enter/pages/${this.tool.orderStatus(e.status).router}/index?orderData=${encodeURIComponent(JSON.stringify(e))}`
				})
			},
			orderItemCenterClick(e) { 
				uni.navigateTo({
					url:`/Order/pages/details/index?orderData=${encodeURIComponent(JSON.stringify(e))}`
				})  
			},
			getList() {
				orderApi.getOwnFleetOrders(this.searchParams).then(res => {
					({currentCount:this.currentCount=0} = res.data);
					if (res.code == 20000) {
						if (this.searchParams.currentPage !== 1) {
							this.orderList = this.orderList.concat(res.data.list)
						} else {
							this.orderList = res.data.list
						}
					}
					this.refresherTriggered = false
				})
			},
			scrolltolower() {
				this.searchParams.currentPage += 1;
				this.getList()
			},
			refresherrefresh(isRefresherTriggered=true) { 
				if(isRefresherTriggered) this.refresherTriggered = true; 
				this.searchParams.currentPage = 1;
				this.getList()
			},
			select(e) {
				this.searchParams.params.status = e.value;
				this.searchParams.currentPage = 1;
				this.getList();
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .uni-select{
		border: none !important;
	}
	@import 'index.scss';
</style>