count-pass-app/substaticpages/cargoOperator/queue/queueList.vue

<template>
	<view class="customer-list">
		<view class="list-wrap">
			<u-sticky bgColor="#fff" class="main-sticky">
				<view class="search-wrap">
					<view class="input-wrap">
						<view @click="showPopup('popupTenant')" class="input">
							<u--input prefixIcon="account-fill" readonly placeholder="$t('queue.pleaseSelectTenant')"
								:prefixIconStyle="{fontSize:'46rpx',color:'#c8d8ef'}" border="none"
								v-model="form.tenantName" placeholderStyle="color:'#c8d8ef'" color="#666"
								:showAction='false'></u--input>
						</view>
					</view>
				</view>
			</u-sticky>
			<template v-if="queueList.length">
				<view class="business-card" v-for="(item, index) in queueList" :key="index">
					<view class="business-card-info">
						<view class="info-line">
							<text class="info"> {{item.vehicle}}</text>
						</view>
						<view class="businessStatus-info">
							<u--image width="100rpx" height="88rpx"
								:src="'/substaticpages/static/czzn-img/report-queueA.png'">
							</u--image>
						</view>
						<span class="status" v-show="item.queueStatus == '0'">{{$t('queue.queuing')}}</span>
						<span class="status" v-show="item.queueStatus == '1'">{{$t('queue.entrucking')}}</span>
					</view>
					<view class="business-card-roadinfo">
						<span><span class="roadinfo-label">{{ $t('queue.currentQueuePosition') }} : </span>{{item.number}}</span>
						<!-- <span><span class="roadinfo-label">{{ $t('queue.status') }} : </span>{{item.queueStatusName}}</span> -->
						<span><span class="roadinfo-label">{{ $t('queue.road') }} : </span>{{item.roadName}}</span>
					</view>
					<!-- 渲染固定项 -->
				</view>
				<view class="fixed-item">
					<view class="business-card">
						<view class="business-card-info">
							<view class="info-line">
								<text class="info"> {{current.vehicle}}</text>
							</view>
							<view class="businessStatus-info">
								<u--image width="100rpx" height="88rpx"
									:src="'/substaticpages/static/czzn-img/report-queueA.png'">
								</u--image>
							</view>
						</view>
						<view class="business-card-roadinfo">
							<span><span class="roadinfo-label">{{ $t('queue.currentQueuePosition') }} : </span> {{current.number}}</span>
							<span><span class="roadinfo-label">{{ $t('queue.status') }} : </span>{{current.queueStatusName}}</span>
							<span><span class="roadinfo-label">{{ $t('queue.road') }} : </span>{{current.roadName}}</span>
						</view>
					</view>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
	import {
		getTenantCacheList
	} from '../../../utils/util.js'
	import {
		getQueueListByVehicle
	} from '../../../api/driver'
	export default {
		data() {
			return {
				options: [{
					text: this.$t("base.button.delete"),
					name: "delete",
					style: {
						backgroundColor: '#f56c6c'
					}
				}, ],
				keyword: '',
				active: 0,
				value: '',
				queueList: [],
				topheight: 0,
				interval: null, // 定时器
				current: {},
				form: {
					tenantId: "",
					tenantName: ""
				}
			}
		},
		components: {},
		onLoad() {
			this.bindTenant()
			this.refreshPage()
		},
		onShow() {
			// 当页面显示时设置定时器
			this.interval = setInterval(() => {
				console.log('刷新数据');
				// 执行页面刷新的逻辑
				this.refreshPage();
			}, 30000); // 30秒
		},
		onUnload() {
			// 清除定时器，当页面卸载时
			if (this.interval) {
				clearInterval(this.interval);
				this.interval = null;
			}
		},
		onHide() {
			// 当页面隐藏时清除定时器
			if (this.interval) {
				clearInterval(this.interval);
				this.interval = null;
			}
		},
		methods: {
			//显示选择
			showPopup(refs) {
				this.$refs[refs].showPicker = true
			},

			//选择企业
			onTenantConfirm(value) {
				this.form.tenantId = ''
				this.form.tenantName = ''
				if (value.value) {
					this.form.tenantId = value.value
					this.form.tenantName = value.text
				}
				uni.setStorageSync("currentTenantId", value);
				this.bindOrderList()
			},
			onBindVehicle(item) {
				bindVehicle(item).then(res => {
					if (res.statusCode == 200) {
						this.onGetVheicleList();
					}
				})
			},
			refreshPage() {
				// 这里编写页面刷新的具体逻辑
				let data = uni.getStorageSync("currentVehicleInfo")
				let tenantOption = getTenantCacheList();
				data.tenantId = tenantOption[0].value
				getQueueListByVehicle(data).then(res => {
					if (res.statusCode == 200) {
						console.log('获取到的排队信息：', res.data.data);
						if (res.data.code == "0") {
							let data = res.data.data.data
							this.queueList = data.queueList
							this.current = data.current
							console.log('获取到的排队信息：', data);
						}
					}else{
						this.queueList = []
						this.current = []
					}
				})
			},
			//获取企业选项
			bindTenant() {
				let tenantOption = getTenantCacheList();
				this.form.tenantId = tenantOption[0].value
				this.form.tenantName = tenantOption[0].text
			},
			//适配状态栏高度
			getTopHeight() {
				console.log('123');
				let that = this;
				uni.getSystemInfo({
					success: function(e) {
						//48为自定义导航栏高度，一般为44
						let topPx = e.statusBarHeight + 44 // 顶部状态栏+沉浸式自定义顶部导航
						that.topheight = topPx // px转rpx，这里必须转化为rpx，不然适配失败

					},
				});
			},
			onGetVheicleList() {
				let data = {
					keyword: this.keyword || '',
				}
				getVehicleListByCondition(data).then(res => {
					if (res.statusCode == 200) {
						this.vehicleList = res.data.data
						if (this.vehicleList) {
							if (this.vehicleList.length == 1) {
								uni.setStorageSync("currentVehicleInfo", this.vehicleList[0]);
							} else {
								var vehicleInfo = this.vehicleList.filter(p => {
									return p.runFlag == 1
								});
								if (vehicleInfo) { 
									uni.setStorageSync("currentVehicleInfo", vehicleInfo[0]);
								}
							}
						}
					}
				})
			},
			changeTab(item) {
				this.active = item.index
			},
		}
	}
</script>
<style>
	/* #ifndef H5 */
	page {
		/* height: 100%; */
		background-color: #f2f2f2;
	}

	/* #endif */
	.container {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	.list-container {
		flex: 1;
		/* 使列表占据剩余空间 */
		overflow-y: auto;
		/* 如果列表很长，需要滚动 */
	}

	.fixed-item {
		/* 固定在底部的样式 */
		width: 100%;
		position: fixed;
		bottom: 0;
		z-index: 10;
		background-color: #fff;
		/* 根据需要添加其他样式，比如背景色、边框等 */
	}
</style>
<style lang="scss" scoped>
	@import "../../../common/css/public.scss";

	.business-card {
		margin: 24rpx;
		.status{
      position: absolute;
      top: 0;
      right: 0;
      background: #3275F5;
      width: 200rpx;
      text-align: center;
      line-height: 42rpx;
      height: 42rpx;
      color: #FEFEFE;
      transform: rotate(45deg) translate3d(62rpx, -20rpx, 0);
      font-size: 24rpx;
      font-weight: normal;
    }
	}

	.list-wrap {
		padding-bottom: 228rpx;
	}

	.fixed-item .business-card {
		background-color: #e9f1ff;
	}

	.business-card-info {
		position: relative;
		border-bottom: 2rpx solid #e9f1ff;
		padding: 16rpx 16rpx 16rpx 32rpx !important;
	}

	.business-card-roadinfo {
		display: flex;
		justify-content: space-between;
		font-size: 24rpx;
		color: #222;
		padding: 24rpx 24rpx 24rpx 32rpx;

		.roadinfo-label {
			color: #aaaaaa;
			margin-right: 8rpx;
		}
	}

	.fixed-item .business-card-roadinfo {
		padding: 0 24rpx 24rpx 32rpx;
	}
</style>