ydd_front/mer_uniapp/pages/rider_index/index.vue

<template>
	<view class="container" :style="{height: winHeight + 'px'}">
		<!-- 状态栏高度 -->
		<view :style="{ height: `${statusBarHeight}px`, width: '100%', backgroundColor: '#FF6702' }"></view>
		<!-- 导航栏 -->
		<view :style="{ height: `${navigationBarHeight}rpx`,lineHeight: `${navigationBarHeight}rpx`}" class="order-nav">
			<!-- <view class="back-button" @tap="handBack()"></view> -->
			{{activeRole == '0' ? '接单' : '我的' }}
		</view>
		<!-- <view class="content-dom"> -->
		<view v-if="activeRole == '0'" style="width: 100%;height: 100%;display: flex;flex-direction: column;overflow: hidden;">
			<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>
			<scroll-view scroll-y style="overflow: hidden;">
				<view v-for="item in riderData" :key="item.id" style="margin: 10rpx 0;">
					<rider-order :orderInfo="item" @orderCilck="goOrderClick"></rider-order>
				</view>
			</scroll-view>
		</view>
		<view v-if="activeRole == '1'" style="position: relative;flex: 1;width: 100%;">
			<view class="item-me-bg"></view>
			<view class="item-me">
				<view class="item-row">
					<view>
						<view class="row-je">2031.7</view>
						<view class="row-jf">累计小费</view>
					</view>
					<view style="width: 2rpx;height: 96rpx;border: 2rpx solid #D6D7DC;margin: 0 80rpx"></view>
					<view>
						<view class="row-je">68</view>
						<view class="row-jf">跑腿订单</view>
					</view>
				</view>
				<view class="item-column">
					<view v-for="(item, index) in riderInfo" :key="index" class="column-box" :style="{paddingTop: index !== 0 ? '27rpx' : ''}"
					 @tap="onRiderClick(item.id)">
						<view class="column-name">
							<image :src="item.img"></image>{{item.name}}
						</view>
						<view class='iconfont icon-jiantou ' style="font-size: 30rpx;"></view>
					</view>
				</view>
			</view>
		</view>
		<!-- </view> -->
		<!-- 底部导航 -->
		<view class="page-footer">
			<view class="foot-item" :class="item.pagePath == activeRouter?'active':''" v-for="(item,index) in footerList" :key="index"
			 @click="goRouter(item)">
				<block v-if="item.pagePath == activeRouter">
					<image :src="item.selectedIconPath"></image>
					<view class="txt">{{item.text}}</view>
				</block>
				<block v-else>
					<image :src="item.iconPath"></image>
					<view class="txt">{{item.text}}</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		registerVerify,
	} from '@/api/api.js';
	import {
		getRiderList
	} from '@/api/rider.js';
	import {
		Debounce
	} from '@/utils/validate.js'
	import riderOrder from "@/components/riderOrder/index.vue";
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
	let app = getApp();
	export default {
		components: {
			riderOrder,
		},
		data() {
			return {
				winHeight: 0,
				activeRouter: '/pages/rider/rider_shipping/index',
				activeRole: '0',
				riderStatus: 1,
				isReceiveId: null,
				domTopData: [{
						id: 1,
						name: '待接单'
					},
					{
						id: 4,
						name: '配送中'
					},
					{
						id: 5,
						name: '已完成'
					}
				],
				riderInfo: [{
					id: 1,
					name: '跑腿记录',
					img: require('./static/run-errands.png'),
					pagePath: ''
				}, {
					id: 2,
					name: '提现',
					img: require('./static/withdrawal.png'),
					pagePath: ''
				}, {
					id: 3,
					name: '返回用户端',
					img: require('./static/run-errands.png'),
					pagePath: ''
				}],
				footerList: [{
						pagePath: "/pages/rider/rider_shipping/index",
						iconPath: require("./static/ddh.png"),
						selectedIconPath: require("./static/ddl.png"),
						text: "订单",
						role: '0'
					},
					{
						pagePath: "/pages/rider/rider_me/index",
						iconPath: require("./static/wdh.png"),
						selectedIconPath: require("./static/wdl.png"),
						text: "我的",
						role: '1'
					}
				],
				statusBarHeight: app.globalData.statusBarHeight,
				navigationBarHeight: 112,
				riderData: [], // 订单数组
				loading: false, //是否加载中
				loadend: false, //是否加载完毕
				loadTitle: '加载更多', //提示语
				page: 1,
				limit: 20
			}
		},
		methods: {
			goRouter(item) {
				if (this.activeRouter == item.pagePath) return
				this.activeRouter = item.pagePath
				this.activeRole = item.role
				// uni.redirectTo({
				// 	url: item.pagePath,
				// 	animationType: 'none' // 关闭默认的滑动效果
				// });
			},
			/**
			 * 获取订单列表
			 */
			getRiderDataList: function() {
				let that = this;
				if (that.loadend) return;
				if (that.loading) return;
				that.loading = true;
				that.loadTitle = "加载更多";
				getRiderList({
					status: that.riderStatus,
					page: that.page,
					limit: that.limit
				}).then(res => {
					let list = res.data.list || [];
					let loadend = list.length < that.limit;
					that.riderData = that.$util.SplitArray(list, that.riderData);
					that.$set(that, 'riderData', that.riderData);
					that.loadend = loadend;
					that.loading = false;
					that.loadTitle = loadend ? "我也是有底线的" : '加载更多';
					that.page = that.page + 1;
				}).catch(err => {
					that.loading = false;
					that.loadTitle = "加载更多";
				})
			},
			/**
			 * 切换类型
			 */
			statusClick: function(status) {
				if (status == this.riderStatus) return;
				this.page = 1;
				this.riderStatus = status;
				this.loadend = false;
				this.getRiderDataList();
			},
			onRiderClick(id) {
				if (id === 3) {
					uni.switchTab({
						url: '/pages/user/index'
					});
				}
			},
			goOrderClick(id) {
				this.isReceiveId = id
				console.log(id)
			}
		},
		onLoad(options) {
			let that = this
			// 隐藏TabBar
			uni.hideTabBar({});
			uni.getSystemInfo({
				success: function(res) {
					that.winHeight = res.windowHeight
				},
			});
			this.getRiderDataList()
		},
		mounted() {

		},
	}
</script>

<style scoped lang="scss">
	.container {
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: space-between;
		overflow: hidden;
		position: relative;
	}

	.content-dom {
		width: 100%;
		flex: 1;
	}

	.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;
	}

	.order-nav {
		width: 100%;
		font-weight: 500;
		font-size: 35rpx;
		margin-top: -2rpx;
		color: #FFFFFF;
		position: relative;
		background-color: #FF6702;
		display: flex;
		align-items: center;
		justify-content: center;

		.back-button {
			position: absolute;
			left: 20rpx;
		}
	}

	.page-footer {
		// position: fixed;
		// bottom: 0;
		// z-index: 9;
		display: flex;
		align-items: center;
		justify-content: space-around;
		width: 100%;
		height: calc(100rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		height: calc(100rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
		box-sizing: border-box;
		border-top: solid 1rpx #F3F3F3;
		background-color: #fff;
		// box-shadow: 0px 0px 17rpx 1rpx rgba(206, 206, 206, 0.32);
		padding-bottom: constant(safe-area-inset-bottom); ///兼容 IOS<11.2/
		padding-bottom: env(safe-area-inset-bottom); ///兼容 IOS>11.2/

		.foot-item {
			display: flex;
			width: max-content;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			position: relative;
			padding: 0 20rpx;
			margin-top: 18rpx;

			&.active {
				color: $bg-color-primary
			}
		}

		.foot-item image {
			height: 50rpx;
			width: 50rpx;
			text-align: center;
			margin: 0 auto;
		}

		.foot-item .txt {
			font-size: 27rpx;
			margin-top: 8rpx;
		}
	}

	.item-me-bg {
		position: absolute;
		top: 0;
		width: 100%;
		height: 80rpx;
		background-color: $bg-color-primary;
		z-index: 1;
	}

	.item-me {
		position: relative;
		top: 0;
		z-index: 9999;
		padding: 0 19rpx;

		.item-row {
			width: 100%;
			height: 304rpx;
			text-align: center;
			background-color: #fff;
			border-radius: 23rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 20rpx;

			.row-je {
				font-weight: 500;
				font-size: 46rpx;
				color: #141414;
			}

			.row-jf {
				font-weight: 400;
				font-size: 27rpx;
				color: #999999;
			}
		}

		.item-column {
			width: 100%;
			background-color: #fff;
			border-radius: 23rpx;
			padding: 20rpx 0 96rpx 39rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.column-box {
				width: 100%;
				padding: 0 39rpx 27rpx 0;
				border-bottom: 2rpx solid #D6D7DC;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			.column-name {
				display: flex;
				align-items: center;
				font-weight: 500;
				font-size: 27rpx;
				color: #141414;

				image {
					width: 38.5rpx;
					height: 38.5rpx;
					margin-right: 20rpx;
				}
			}
		}
	}
</style>