driverSchool/pages/index/allOrders.vue

<template>
	<view class="content">
		<view class="container">
			<!-- #ifdef MP-WEIXIN -->
			<headers :titles="titles"><uni-icons @click="goback()" type="arrow-left" color="#000000"
					size="22px"></uni-icons></headers>
				<!-- #endif -->

		</view>

		<view class="order-header">
			<view @click="changeCurrentHeader(index)" :class="{active: index === currentHeader, 'header-list': true}"
				v-for="(item, index) in headerList"> {{item}} </view>
		</view>

		<view class="orders">
			<u-empty mode="list" v-if="payListAll&&payListAll.length <1 "></u-empty>
			<view v-for="item in payListAll" class="order-list">
				<view class="list-top">
					<view class="orders-left">订单编号：{{item.orderNumber}}</view>
					<view v-if="item.state === 0" class="orders-right">已报名</view>
					<view v-if="item.state === 1" class="orders-right">已付款</view>
					<view v-if="item.state === 2" class="orders-right">已面签</view>
				</view>

				<view class="d-box">
					<view class="img-left">
						<image src="../../static/imgs/ban1.png" mode=""></image>
					</view>
					<view class="">
						<view class="title_" v-if="item.driveSchoolCourse.name == 1">成人班</view>
						<view class="title_" v-if="item.driveSchoolCourse.name == 2">学生班</view>
						<view class="wrap-box">
							<view class="icon-w">{{item.driveSchoolCourse.automatic}}</view>
							<view class="icon-w">{{item.driveSchoolCourse.license}}</view>
						</view>
						<view class="price-">￥{{item.driveSchoolCourse.price}} <text
								class="hui-">￥{{item.driveSchoolCourse.price}}</text> </view>
					</view>
				</view>

				<view class="order-text">
					<view class="text-title">{{item.driveSchoolInfo.schoolName}}</view>
					<view class="text-bottom">
						<view style="width: 75%;" class="text-bootom-left">{{item.driveSchoolInfo.address}}</view>
						<image @click="goNavigationClick(item.driveSchoolInfo.lat, item.driveSchoolInfo.lgt)"
							class="text-bottom-right" src="../../static/imgs/dw.png" mode=""></image>
					</view>
				</view>

			</view>
		</view>

	</view>
</template>

<script>
	import headers from '../../components/header/headers.vue'
	import tabbar from '../../components/tabbar/tabbar.vue'
	import request from '@/utils/request.js'
	export default {
		data() {
			return {
				titles: "全部订单",
				msg: "1",
				List: [],
				show: false,
				status: 'loading',
				headerList: ["全部订单", "已报名", "已付款", "已面签"],
				currentHeader: 0,
				payListAll: []
			}
		},
		onShow() {
			// this.actList = ["1", "1", "1", "1", "1", ]
			// this.status = "nomore" 底部刷新结束
			this.findOrdersListAll()
		},
		onPullDownRefresh() {
			console.log("刷新");
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			// this.show = true
			setTimeout(() => {
				console.log("加载执行");
			}, 2000)
		},
		// 发送好友
		onShareAppMessage(res) {
			return {
				title: this.titles,
				path: '/pages/index/index',
			}
		},
		// 分享朋友圈
		onShareTimeline(res) {
			return {
				title: this.titles,
				path: '/pages/index/index',
			}
		},
		components: {
			headers,
			tabbar
		},
		methods: {
			goback() {
				uni.navigateBack()
			},
			changeCurrentHeader(index) {
				this.currentHeader = index
				this.findOrdersListAll()
			},
			async findOrdersListAll() {
				let res = await request({
					url: `/driving/findPayListAll?state=${this.currentHeader}`,
				})
				this.payListAll = res
			},
			goNavigationClick(lat, lgt) {
				// 进行导航
				uni.openLocation({
					latitude: lat,
					longitude: lgt,
					success: function() {
						console.log('success');
					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.orders {
		padding: 20rpx;

		.order-list {
			padding: 20rpx;
			background-color: #fff;
			margin-top: 20rpx;
			border-radius: 20rpx;

			.order-text {
				padding: 20rpx;

				.text-bottom {
					display: flex;
					justify-content: space-between;
					margin-top: 20rpx;

					.text-bottom-right {
						height: 50rpx;
						width: 50rpx;
					}
				}

				.text-title {
					font-size: 32rpx;
					font-weight: 600;
				}
			}

			.list-top {
				display: flex;
				justify-content: space-between;
				font-size: 24rpx;

				.orders-right {
					padding: 10rpx;
					border: 4prx solid #d4b475;
					color: #d4b475;
				}
			}
		}
	}

	.order-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
		height: 100rpx;

		.active {
			color: #589e80;
		}

		.header-list {
			flex: 1;
			text-align: center;
		}
	}

	.d-box {
		display: flex;
		align-items: center;
		width: 95%;
		margin: 0px auto;
	}

	.img-left {
		width: 106px;
		height: 66px;
		border-radius: 4px;
		overflow: hidden;
		margin-right: 10px;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.title_ {
		font-size: 16px;
		color: #333333;
		font-weight: bold;
	}

	.price- {
		font-weight: bold;
		font-size: 14px;
		color: #FB423B;
	}

	.hui- {
		font-weight: 400;
		font-size: 10px;
		color: #AAAAAA;
		text-decoration: line-through;
		margin-left: 10px;
	}

	.wrap-box {
		flex-wrap: wrap;
		display: flex;
		align-items: center;
		margin: 5px auto;
	}

	.icon-w {
		background: #E6F5F0;
		border-radius: 2px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #4AA76F;
		margin-right: 5px;
		font-size: 10px;
		box-sizing: border-box;
		padding: 4px 5px;
	}

	.icon-x {
		background: #FFEDD4;
		border-radius: 2px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #EDA23A;
		margin-right: 5px;
		font-size: 10px;
		box-sizing: border-box;
		padding: 4px 5px;
	}

	.content {
		background: #f4f5f6;
		height: 100vh;
	}

	.container {
		width: 100%;
		background: #f4f5f6;
		box-sizing: border-box;
		padding-top: 88px;
	}
</style>