zhywpt-sp/pages/order/components/app-order-list.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" />
		</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 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, watch } from "vue";
	import { onLoad } from "@dcloudio/uni-app";
	import { getItem, StorageKeys, setItem } from "@/utils/storage";
	import { hasLogin, msg, timesDiff } from "@/utils/utils";
	import { request } from "@/utils/network/request.js";
	import { orderList, appPage } from "@/utils/network/api";
	const tools = require("../../static/etcUtil/tools.js");
	import { stringToJson } from "@/utils/network/encryption";
	const state = reactive({
		triggered: false, //设置当前下拉刷新的状态
		freshing: true,
		_freshing: false,
		ordersList: []
	})
	const searchKeyWords = ref('');
	const props = defineProps({
		index: {
			type: Number,
			default() {
				return 0
			}
		},
		refresh: { //是否刷新列表
			type: Boolean,
			default: true
		}
	})

	const { config, params, onKeyInput, refreshList } = 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
	}
	onLoad(() => {
		getList()
	})
	//搜索
	const doSearch = () => {
		// #ifdef MP-WEIXIN
		if (!searchKeyWords.value) {
			msg('请输入需要搜索的车牌号！');
			return;
		}
		refreshList(true);
		// #endif
		// #ifdef MP-ALIPAY
		tools.showLoadingAlert("加载中");
		refreshList(true);
		tools.hideLoadingAlert();
		// #endif

	}
</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>