School_bus_h5/pages/record/record.vue

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

		<!-- 列表区域 -->
		<view class="list" v-for="(item, index) in listData" :key="index" @click="handleLookDetail(item)">
			<view class="list-title" :class="item.route === '南昌-靖安' ? 'type' : 'type2'">
				<view class="title-number">{{ item.route }} &nbsp; 车牌：{{ item.car_number != 0 ? item.car_number : '无' }}</view>
				<view class="title-icon">
					<img v-if="item.route === '南昌-靖安'" src="../../static/right.png" />
					<img v-if="item.route === '靖安-南昌'" src="../../static/right2.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 != 0 ? item.ci_time : '' }}</span>
			</view>
			<view class="list-item">
				扫码时间：
				<span>{{ item.sm_start + '-' + item.sm_end }}</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 { filterIdentity } from '@/util/filterIdentity.js'

import Search2 from '@/components/search2'

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

onPullDownRefresh(() => {
	getData()
	setTimeout(function () {
		uni.stopPullDownRefresh()
	}, 500)
})

// 预约状态数组
const typeList = ref([
	{
		text: '全部',
		value: 0
	},
	{
		text: '预约进行中',
		value: 1
	},
	{
		text: '已截止',
		value: 2
	},
	{
		text: '已分配',
		value: 3
	},
	{
		text: '候补中',
		value: 4
	}
])
// 时间状态数组
const timeList = ref([
	{
		text: '全部',
		value: 0
	},
	{
		text: '今天',
		value: 1
	},
	{
		text: '明天',
		value: 2
	}
])

// 时间状态  全部：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)) * 100)
		})
	}
	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%;
				}
			}
		}

		.type {
			color: #000;
			background-color: #ffdb6e;
		}

		.type2 {
			color: #fff;
			background-color: #3c50e8;
		}

		.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: #3d51e8;
			}

			.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: #000;

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