School_bus_h5/pages/record/record.vue

<template>
	<view class="container">
		<!-- 筛选区域 -->
		<Search :typeList="typeList" :timeList="timeList" @handLeConveyData="getConveyData" />

		<!-- 列表区域 -->
		<view class="list" v-for="(item,index) in listData" :key="index" @click="handleLookDetail(item)">
			<view class="list-title">
				<view class="title-number">
					车牌：{{item.car_number!=0?item.car_number:'无'}}
				</view>
				<view class="title-icon">
					<img src="../../static/right.png">
				</view>
			</view>
			<view class="list-item">
				状态：
				<span :class="item.state_str=='预约进行中'||item.state_str=='候补中'?'list-item-type':''">{{item.state_str}}
				</span>
			</view>
			<view class="list-item">
				发车日期：<span>{{item.yy_date}}</span>
			</view>
			<view class="list-item" v-if="item.state_str=='预约进行中'||item.state_str=='已截止'">
				发车时间：<span>{{item.ci_time}}</span>
			</view>
			<view class="list-item">
				线路：<span>{{item.route}}</span>
			</view>
			<view class="list-item">
				终点：<span>{{item.route_end}}</span>
			</view>
			<view class="list-item">
				人数：
				<view class="list-item-progress" v-if="item.state_str=='预约进行中'||item.state_str=='已截止'">
					<progress activeColor="#3C50E8" stroke-width="9" :percent="item.percent?item.percent:0" />
				</view>
				<span v-if="item.state_str=='预约进行中'||item.state_str=='已截止'">{{item.user_num+'/'+item.contain}}</span>
				<span v-else>{{item.contain}}</span>
			</view>
		</view>

		<!-- 无数据时展示的区域 -->
		<view class="list-nodata" v-if="listData.length ==0">
			<img src="../../static/no-bus.png">
			<view>
				暂无数据
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		ref
	} from "vue"

	import {
		onLoad,
		onPullDownRefresh
	} from "@dcloudio/uni-app"

	import {
		myRequest
	} from "../../util/api.js"

	import {
		isWeixin
	} from "../../util/isWeixin.js"

	import Search from '../../components/search'

	onLoad(() => {
		if (isWeixin()) {
			getData()
		} else {
			uni.redirectTo({
				url: "/pages/404/404?message=请在微信客户端打开链接"
			})
		}
	})

	onPullDownRefresh(() => {
		getData()
		setTimeout(function() {
			uni.stopPullDownRefresh()
		}, 500)
	})
	// 预约状态数组
	const typeList = ref(['全部', '预约进行中', '已截止', '已分配', '候补中'])
	// 时间状态数组
	const timeList = ref(['全部', '今天', '明天'])
	// 时间状态  全部：1  今天：2  明天：3
	const date_state = ref(1)
	// 预约状态  全部：0  预约进行中：1  已截止：2  已分配：3   候补中：4
	const result_state = ref(0)

	// 预约记录数据
	const listData = ref([])

	// 获取预约记录数据
	const getData = async () => {
		const res = await myRequest({
			url: '/appcarCaptainManage.action',
			data: {
				date_state: date_state.value,
				result_state: result_state.value,
			}
		})
		// console.log(res.data);
		if (res.data.length) {
			res.data.forEach((item) => {
				item.percent = Math.ceil(parseInt(item.user_num) / parseInt(item.contain))
			})
		}
		listData.value = res.data
	}

	// 点击每一条记录回调
	const handleLookDetail = (item) => {
		const info = JSON.stringify(item)
		uni.navigateTo({
			url: `/pages/detail/detail?info=${info}`
		})
	}
	// 条件筛选框选择回调
	const getConveyData = (Obj) => {
		date_state.value = Obj.timeIndex - 0 + 1
		result_state.value = Obj.typeIndex
		getData()
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #F2F2F2;

		.list {
			margin-bottom: 20rpx;
			padding-bottom: 24rpx;
			background-color: #fff;

			.list-title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 30rpx;
				margin-bottom: 20rpx;
				height: 94rpx;
				font-size: 32rpx;
				font-weight: bold;
				border-bottom: 1rpx solid #E6E6E6;

				.title-icon {
					margin-top: -20rpx;
					width: 15rpx;
					height: 25rpx;

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

			.list-item {
				display: flex;
				align-items: center;
				padding: 0 30rpx;
				margin-bottom: 14rpx;

				color: #999999;
				font-size: 28rpx;

				span {
					color: #333333;
				}

				.list-item-type {
					color: #00BAAD;
				}

				.list-item-progress {
					margin-right: 36rpx;
					width: 437rpx;
					height: 22rpx;

					:deep(.uni-progress-bar),
					:deep(.uni-progress-inner-bar) {
						border-radius: 85rpx;
					}
				}
			}
		}

		.list-nodata {
			margin-top: -20rpx;
			padding-top: 100rpx;
			background-color: #fff;
			text-align: center;
			color: #999999;

			img {
				width: 600rpx;
			}
		}
	}
</style>