ydd_front/mer_uniapp/pages/rider_index/components/rider_shipping/index.vue

<template>
	<view class="container">
		<view class="dom-top">
			<view class="dom-item" v-for="(item, index) in domTopData" :key="index" @tap="statusClick(item.id)">
				<text :class="item.id === riderStatus ? 'active-dom-top' : ''">{{item.name}}</text>
			</view>
		</view>
		<view class="flex-center flex-col noCommodity" v-if="noDataTip">
			<view class='pictrue'>
				<image :src="urlDomain+'crmebimage/presets/noSearch.png'"></image>
			</view>
			<text class="text-ccc">{{noDataTip}}</text>
		</view>
		<scroll-view scroll-y @scrolltolower="onScrollBottom" style="overflow: hidden;">
			<view v-for="(item, index) in riderData" :key="index" style="margin: 10rpx 0;">
				<rider-order :orderInfo="item" @orderCilck="goOrderClick" :statusId="riderStatus"></rider-order>
			</view>
			<view class='loadingicon flex-center' :hidden='!loading'>
				<text class='loading iconfont icon-jiazai' style="width: auto;"></text>加载更多
			</view>
			<view class="flex-center no-data-tip" v-if="loadTitle">{{loadTitle}}</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		getRiderList
	} from '@/api/rider.js';
	import riderOrder from "@/components/riderOrder/index.vue";
	let app = getApp();
	export default {
		name: 'riderShipping',
		components: {
			riderOrder,
		},
		data() {
			return {
				urlDomain: this.$Cache.get("imgHost"),
				riderData: [], // 订单数组
				loading: false, //是否加载中
				loadTitle: '', //提示语
				page: 1,
				limit: 2,
				isReceiveId: null,
				riderStatus: 1,
				domTopData: [{
						id: 1,
						name: '待接单'
					},
					{
						id: 8,
						name: '待取货'
					},
					{
						id: 4,
						name: '配送中'
					},
					{
						id: 5,
						name: '已完成'
					}
				],
			}
		},
		created() {
			this.getRiderDataList()
		},
		methods: {
			/**
			 * 切换类型
			 */
			statusClick: function(status) {
				if (status == this.riderStatus) return;
				this.page = 1;
				this.riderStatus = status;
				this.getRiderDataList();
			},
			/**
			 * 获取订单列表
			 */
			getRiderDataList: function() {
				let that = this;
				if (that.loading) return;
				that.loading = true;
				getRiderList({
					status: that.riderStatus,
					page: that.page,
					limit: that.limit
				}).then(res => {
					let list = res.data.list || [];
					that.riderData = that.$util.SplitArray(list, that.riderData);
					that.$set(that, 'riderData', that.riderData);
					that.loading = false;
					if (that.riderData.length == 0) {
						that.loadTitle = ''
						that.noDataTip = ' 暂无订单~ ';
					} else {
						that.noDataTip = ''
						that.loadTitle = list.length < that.limit ? "我也是有底线的~" : '';
					}
					that.page = that.page + 1;
				}).catch(err => {
					that.loading = false;
					that.loadTitle = "加载更多";
				})
			},
			goOrderClick(id) {
				this.isReceiveId = id
				console.log(id)
			},
			onScrollBottom() {
				if (this.loading) return;
				if (!this.loadTitle) {
					this.getRiderDataList()
				}
			}
		},
		mounted() {

		},
	}
</script>

<style scoped lang="scss">
	.container {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}
	.no-data-tip {
		color: #CCC;
	}

	.dom-top {
		width: 100%;
		height: 96rpx;
		font-weight: 400;
		font-size: 27rpx;
		color: #141414;
		background-color: #fff;
		// padding: 19rpx 115rpx 38rpx 115rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.dom-item {
			flex: 1;
			text-align: center;
			height: 96rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

	}



	.active-dom-top {
		color: $bg-color-primary;
		border-bottom: 9rpx solid $bg-color-primary;
		border-bottom-top-radius: 6rpx;
		border-bottom-bottom-radius: 6rpx;
		border-bottom-left-radius: 6rpx;
		border-bottom-right-radius: 6rpx;
	}
</style>