zhywpt-sp/pages/order/components/order-list-item.vue

<!-- 订单列表 -->
<template>
	<scroll-view class="setHight" scroll-y="true" refresher-enabled="true" :refresher-enabled='state.freshing'
		:refresher-triggered='state.triggered' @refresherrefresh="onRefresh" @refresherpulling="onPulling"
		refresher-default-style="black">
		<!-- 搜索框 -->
		<view class="as-layout-horizontal as-gravity-center-start search-layout">
			<view class="search-box">
				<image :src="`${$imgUrl}service/icon-search.png`" class="icon" mode="aspectFill"></image>
				<input class="search" placeholder="请输入车牌号" @input="onKeyInput" />
			</view>
			<view class="search-btn" @click="doSearch">搜索</view>
		</view>

		<!-- 数据为空 -->
		<empty-view :mode="config.emptyHint.mode" :content="config.emptyHint.hint" v-if="ordersList.length === 0" />

		<template v-else>
			<!-- 列表 -->
			<block v-for="(item,index) in ordersList" :key="index">
				<!-- 新办订单 -->
				<!-- v-if="item.orderType == 'ISSUE'" -->
				<order-list-item-new :item="item" />
				<!-- 卡签同时更换/更换卡/更换签订单 -->
				<!-- <order-list-item-card-sign :item="item" 
			v-else-if="item.orderType == OrderTypes.同时换卡换签 || item.orderType == 'REPLACEMENT_CARD' 
			|| item.orderType == 'REPLACEMENT_SIGNATURE'" /> -->
				<!-- 增补OBU订单 -->
				<!-- <order-list-item-obu :item="item" v-else-if="item.orderType == 'SUPPLEMENT_OBU'" /> -->
				<!-- 公务车增补OBU订单 -->
				<!-- <order-list-item-obu :item="item" v-else-if="item.orderType == 'OFFICAL_SUPPLEMENT_OBU'" /> -->
				<!-- ETC注销业务类型订单 -->
				<!-- <order-list-item-logoff-etc :item="item" v-else-if="item.orderType == OrderTypes.ETC注销" /> -->
				<!-- 车辆信息变更 -->
				<!-- <order-list-item-edit-car :item="item" v-else-if="item.orderType == OrderTypes.车辆信息变更" /> -->
				<!-- 解除车牌占用 -->
				<!-- <order-list-item-cancel-numberplate :item="item" v-else-if="item.orderType == OrderTypes.解除车牌占用" /> -->
				<!-- 单位账户充值开户订单 -->
				<!-- <order-list-item-recharge :item="item" v-else-if="item.orderType == 'EXCHANGE_CARD_TYPE'" /> -->
			</block>
			<uni-load-more :status="params.status" iconType="snow" :icon-size="16" :content-text="config.contentTxt"
				v-if="ordersList.length > 0" />
		</template>
	</scroll-view>
</template>

<script setup lang="ts">
	import orderListItemNew from "./order-list-item-new.vue";
	import orderListItemCardSign from "./order-list-item-card-sign.vue";
	import orderListItemObu from "./order-list-item-obu.vue";
	import orderListItemLogoffEtc from "./order-list-item-logoff-etc.vue";
	import orderListItemEditCar from "./order-list-item-edit-car.vue";
	import orderListItemCancelNumberplate from './order-list-item-cancel-numberplate.vue';
	import orderListItemRecharge from "./order-list-item-cancel-recharge.vue";
	import { OrderTypes } from "@/datas/enum";
	import useOrderListItem from "@/composables/order/useOrderListItem";
	import { reactive } from "vue";
	import { onLoad } from "@dcloudio/uni-app";
	const state = reactive({
		triggered: false, //设置当前下拉刷新的状态
		freshing: true,
		_freshing: false
	})
	const props = defineProps({
		index: {
			type: Number,
			default() {
				return 0
			}
		},
		refresh: { //是否刷新列表
			type: Boolean,
			default: true
		}
	})

	const { config, params, ordersList, doSearch, onKeyInput, refreshList } = useOrderListItem(props);
	//自定义下拉刷新被触发
	const onRefresh = () => {
		refreshList(true)
		if (state._freshing) return;
		state._freshing = true;
		setTimeout(() => {
			state.triggered = false;
			state._freshing = false;
		}, 2000)
	}
	const onPulling = (e) => {
		if (e.detail.deltaY < 0) {
			return
		}
		state.triggered = true
	}
</script>

<style lang="scss" scoped>
	.setHight {
		min-height: calc(100vh - 200rpx);
	}

	.search-layout {
		padding-top: 80rpx;

		.search-box {
			margin: 30rpx 30rpx 0rpx 30rpx;
			height: 80rpx;
			background: #FFFFFF;
			border: 1px solid #DCDCDC;
			border-radius: 40rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			box-sizing: border-box;
			flex: 1;
		}

		.search-box .icon {
			width: 48rpx;
			height: 48rpx;
			margin: 0 20rpx;
		}

		.search-box .search {
			flex: 1;
			margin-right: 20rpx;
			height: 100%;
			padding: 0 10rpx;
			font-size: 28rpx;
			color: #00b38b;
		}

		.search-btn {
			color: white;
			background-color: #00B38B;
			width: 140rpx;
			height: 75rpx;
			line-height: 75rpx;
			font-size: 32rpx;
			border-radius: 40rpx;
			text-align: center;
			margin-right: 30rpx;
			margin-top: 30rpx;
		}
	}
</style>