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

<!-- 订单列表 -->
<template>
	<!-- 搜索框 -->
	<view class="as-layout-horizontal as-gravity-center-start search-layout">
		<view class="search-box">
			<image :src="`${$imgUrl}service/icon-search.png`" class="icon"></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">
			<!-- 新办订单 -->
			<order-list-item-new :item="item" v-if="item.orderType == 'ISSUE'" />
			<!-- 卡签同时更换/更换卡/更换签订单 -->
			<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>
</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";
	
	const props = defineProps({
		index: {
			type: Number,
			default () {
				return 0
			}
		},
		refresh:{ //是否刷新列表
			type:Boolean,
			default:true
		}
	})
	
	const {config,params,ordersList,doSearch,onKeyInput} = useOrderListItem(props);
</script>

<style lang="scss" scoped>
	.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>