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" mode="aspectFill"></image>
			<input class="search" placeholder="请输入车牌号" @input="onKeyInput" v-model="searchKeyWords" />
		</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" />
		</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 { OrderTypes } from "@/datas/enum";
	import useOrderListItem from "@/composables/order/useOrderListItem";
	import { reactive, watch } 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
		}
	})
	console.log("props.index", props)
	const { config, params, ordersList, doSearch, onKeyInput, refreshList, searchKeyWords } = useOrderListItem(props);
	//自定义下拉刷新被触发
	const onRefresh = () => {
		console.log("22222")
		refreshList(true)
		if (state._freshing) return;
		state._freshing = true;
		setTimeout(() => {
			state.triggered = false;
			state._freshing = false;
		}, 1000)
	}
	const onPulling = (e) => {
		console.log("11111")
		if (e.detail.deltaY < 0) {
			return
		}
		state.triggered = true
	}
</script>

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

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

		.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>