zhywpt-sp/pages/order/order.vue

<!-- 订单列表2 -->
<template>
	<filter>
		<empty-view v-if="!data.login" mode="permission" content="请先登录再查看订单" btnTxt="立即登录"
			@btnClick="$util.navTo('/login/login')">
		</empty-view>

		<view class="list-wrapper" v-else>
			<view class="top-content">
				<order-tabbar ref="tabbarRef" :tabs="data.tabsList" v-model:curIndex="data.tabIndex"
					v-if="data.tabsList.length > 0"></order-tabbar>
			</view>

			<order-list-item  ref="mescrollItem" :index="data.tabIndex"
				:refresh="data.refresh">
			</order-list-item>
		</view>
	</filter>
</template>

<script setup lang="ts">
	import orderTabbar from "./components/order-tabbar.vue";
	import orderListItem from "./components/order-list-item";
	import useOrderList from "@/composables/order/useOrderList";
	import filter from '@/components/filter/filter.vue';
	// import { onLoad} from "@dcloudio/uni-app";
	import useOrderListItem from "@/composables/order/useOrderListItem";
	// import useOrderSkip from "@/composables/order/useOrderSkip";
	// import {
	// 	getOrderStatusName,
	// 	msg,
	// 	getOrderTypeName,
	// 	hasLogin, timesDiff
	// } from "@/utils/utils";
	import {
		vehiclePlateColor
	} from "@/datas/vehiclePlateColor";
	// import { getItem, StorageKeys, setItem } from "@/utils/storage";
	import { PageData } from "@/datas/enum";
	// import {
	// 	OrderStatus
	// } from "@/datas/enum";
	import {
		reactive, watch, ref
	} from "vue";
	// import { requestNew } from "@/utils/network/request.js";
	// import { appPage } from "@/utils/network/api";
	// import { log } from "console";
	const tools = require("../../static/etcUtil/tools.js");
	const state = reactive({
		tabActive: "小程序",
		// flowPathTabList: ["小程序", "线下网点"],
		appOrdersList: [],
		index: 0
	})
	const {
		data,
		tabbarRef
	} = useOrderList();
	//办理订单按钮跳转业务逻辑
	// const {
	// 	gotoActiveOrder,
	// 	gotoOrderDetails,
	// 	gotoEvaluateSalesman
	// } = useOrderSkip();
	//请求参数
	const params = reactive({
		pageNum: PageData.NUM,
		pageSize: PageData.SIZE,
		total: 0,
		status: 'more',
		reload: false,
	})
	// function test(index) {
	// 	console.log("test", index, data.tabIndex)
	// 	state.index = index
	// 	if (state.tabActive == '小程序') {
	// 		changeTab(state.tabActive)
	// 	} else {
	// 		console.log("apppppppp",)
	// 		getList()
	// 	}
	// }

	const props = defineProps({
		index: {
			type: Number,
			default() {
				return 0
			}
		},
		refresh: { //是否刷新列表
			type: Boolean,
			default: true
		}
	})

	const { changeTab, config, refreshList } = useOrderListItem(props);

	// onLoad((option) => {
	// 	// 一进来就调一遍
	// 	changeTab(state.tabActive)
	// })
	// let searchKeyWords = '';
	//获取车牌颜色文字
	// const getVehiclePlateColor = (id : number) => {

	// 	const colors = vehiclePlateColor.filter(item => item.id == id);
	// 	return colors[0].color
	// }
	// const flowPathTabHandle = (tab) => {
	// 	console.log("tab", tab)
	// 	state.tabActive = tab;
	// 	if (state.tabActive == '小程序') {
	// 		changeTab(state.tabActive)
	// 	} else {
	// 		console.log("apppppppp",)
	// 		getList()
	// 	}

	// };
	//搜索
	// const doSearch = () => {
	// 	// #ifdef MP-WEIXIN
	// 	if (!searchKeyWords) {
	// 		msg('请输入需要搜索的车牌号！');
	// 		return;
	// 	}
	// 	getList();
	// 	// #endif
	// 	// #ifdef MP-ALIPAY
	// 	tools.showLoadingAlert("加载中");
	// 	getList();
	// 	tools.hideLoadingAlert();
	// 	// #endif

	// }
	//订单车牌号输入
	// const onKeyInput = (event) => {
	// 	searchKeyWords = event.target.value;
	// 	if (searchKeyWords == '') {
	// 		getList();
	// 	}
	// }


	// const getList = async () => {
	// 	if (!hasLogin()) {
	// 		uni.stopPullDownRefresh();
	// 		return;
	// 	}
	// 	const options = {
	// 		type: 2,
	// 		data: {
	// 			"opId": getItem(StorageKeys.OpenId),
	// 			"vehiclePlate": searchKeyWords,
	// 			"tabIndex": state.index + '',
	// 			"pageNo": params.pageNum,
	// 			"pageSize": params.pageSize,
	// 		},
	// 		method: 'POST',
	// 		showLoading: true
	// 	}
	// 	requestNew(appPage, options).then((res) => {
	// 		uni.hideLoading()
	// 		var data = res;
	// 		console.log("state.appOrdersList", data)

	// 		params.total = data.totalCount;

	// 		if (params.pageNum === 1) {
	// 			state.appOrdersList = [];
	// 		}
	// 		if (params.total > 0) {
	// 			const curList = data.data || [];
	// 			state.appOrdersList = params.reload ? curList : state.appOrdersList.concat(curList);
	// 			params.reload = false;
	// 		}

	// 		if (params.total === state.appOrdersList.length) {
	// 			params.reload = false;
	// 			params.status = 'noMore';
	// 		}

	// 		if (params.pageNum === 1) {
	// 			uni.stopPullDownRefresh();
	// 		}
	// 		// 订单发货后未激活  30天 以后 结束订单功能  insertTime   >30  算出来距离今天是负数  updateTime<30(结束订单)
	// 		for (var k = 0; k < state.appOrdersList.length; k++) {
	// 			if (state.appOrdersList[k]['insertTime']) {
	// 				if (timesDiff(state.appOrdersList[k]['insertTime'].replace("T", " ")).days > 30) {
	// 					state.appOrdersList[k]['finishOrder'] = true  //可以结束
	// 				} else {
	// 					state.appOrdersList[k]['finishOrder'] = false  //不可以结束
	// 				}
	// 			}
	// 			if (state.appOrdersList[k]['updateTime']) {
	// 				if (timesDiff(state.appOrdersList[k]['updateTime'].replace("T", " ")).days <= 30) {
	// 					state.appOrdersList[k]['isUseAgain'] = true  //可以再次使用
	// 				} else {
	// 					state.appOrdersList[k]['isUseAgain'] = false  //不可以再次使用
	// 				}
	// 			}
	// 		}
	// 		uni.$emit("refreshOrder");
	// 		console.log("data.refresh===============", props.refresh, state.appOrdersList)
	// 	})
	// 		.catch((err) => {
	// 			console.log(err);
	// 		});
	// }
	// onReachBottom(() => {
	// 	loadMore();
	// });
	/* 加载更多 */
	// const loadMore = () => {
	// 	if (params.total > state.appOrdersList.length) {
	// 		params.status = 'loading';
	// 		params.pageNum++;
	// 		getList();
	// 	} else {
	// 		params.status = 'noMore';
	// 	}
	// }
	// onPullDownRefresh(() => {
	// 	if (hasLogin()) {
	// 		getList();
	// 	}
	// });
</script>

<style lang="scss">
	page {
		background:  #E9EDF0;
	}

	:deep(.u-mode-center-box) {
		border-radius: 20rpx;
	}
</style>
<style lang="scss" scoped>
	.top-content {
		position: fixed;
		left: 0;
		z-index: 99999;
		background-color: white;
	}

	.top-menu {
		display: flex;
		justify-content: space-around;
	}

	.top-menu .tab {
		font-size: 28rpx;
		padding: 30rpx 30rpx;
		color: #666666;
		position: relative;
	}

	.top-menu .active .border {
		position: absolute;
		width: 70%;
		height: 16rpx;
		background: #00b38b;
		opacity: 0.3;
		bottom: 28rpx;
		z-index: -99;
		left: 15%;
		border-radius: 6rpx;
	}

	.top-menu .active {
		font-weight: bold;
		font-size: 32rpx;
		color: #0d0f26;
	}

	.top-menu .active::before {
		width: 100%;
		height: 16rpx;
		background: #00b38b;
		opacity: 0.3;
	}

	.search-layout {

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

	.item .head {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 28rpx;
		border-bottom: 1px solid #dcdcdc;
	}

	.item .head {
		.head-row {
			display: flex;
			width: 100%;
			justify-content: space-between;
			align-items: center;
		}

		.name {}

		.name>text {
			font-size: 26rpx;
			font-family: Noto Sans S Chinese;
			font-weight: 400;
			color: #999999;
			line-height: 36rpx;
		}
	}

	.item .head .icon {
		width: 48rpx;
		height: 48rpx;
	}

	.item .head .name {
		display: flex;
		align-items: center;
	}

	.text-green {
		font-size: 26rpx;
		color: #00b38b;
	}

	.text-orange {
		font-size: 26rpx;
		color: #ff8000;
	}

	.text-black {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
	}

	.title {
		font-size: 30rpx;
		color: #333;
	}

	.tag-green {
		font-size: 22rpx;
		height: 40rpx;
		line-height: 40rpx;
		padding: 0 12rpx;
		border-radius: 6rpx;
		background: #d9f4ee;
		color: #00b38b;
	}

	.tag-grey {
		font-size: 22rpx;
		height: 40rpx;
		line-height: 40rpx;
		padding: 0 12rpx;
		border-radius: 6rpx;
		background: #e8e8e8;
		color: #666;
	}

	.detail {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 32rpx;
	}

	.detail .type {
		font-size: 26rpx;
		color: #999;
	}

	.detail .value {
		font-size: 26rpx;
		color: #333;
	}

	.finished .detail .value {
		color: #999;
	}

	.detail .odd {
		margin: 20rpx 0;
	}

	.cny {
		font-size: 26rpx;
		color: #333;
	}

	.finished .cny {
		color: #999;
	}

	.amount {
		font-size: 40rpx;
		font-weight: bold;
	}

	.bottom .amount {
		color: #ff8000;
	}

	.finished .amount {
		color: #999;
	}

	.btns {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		border-top: 1px solid #dcdcdc;
		margin: 0 30rpx;
		padding: 20rpx 0;
	}

	.bottom {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-top: 1px solid #dcdcdc;
		margin: 0 30rpx;
		padding: 20rpx 0;
	}

	.btn {
		height: 60rpx;
		line-height: 58rpx;
		border-radius: 30rpx;
		padding: 0 24rpx;
		font-size: 23rpx;
		box-sizing: border-box;
		margin-right: 12rpx;
	}



	.btns .btn:last-child {
		margin: 0;
	}

	.btns .state {
		position: absolute;
		left: 0;
		font-size: 26rpx;
		font-family: Noto Sans S Chinese;
		font-weight: 400;
		color: #999999;
		line-height: 58rpx;

		text {
			font-size: 26rpx;
			font-family: Noto Sans S Chinese;
			font-weight: 400;
			color: #00B38B;
			line-height: 58rpx;
		}
	}

	.btn-primary {
		border: 1px solid #00b38b;
		color: #00b38b;
	}

	.btn-disable {
		border: 1px solid #999;
		color: #999;

	}

	.btn-normal {
		border: 1px solid #dcdcdc;
		color: #333;
	}

	.evaluation {
		display: flex;
	}

	.finished .detail .value {
		color: #999;
	}

	.detail .odd {
		margin: 20rpx 0;
	}

	.cny {
		font-size: 26rpx;
		color: #333;
	}

	.finished .cny {
		color: #999;
	}

	.item {
		background: #ffffff;
		box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(223, 223, 223, 0.8);
		border-radius: 20rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		margin: 30rpx 30rpx 0rpx;
	}

	.bg-white .item {
		box-shadow: 0rpx 4rpx 13rpx 3rpx rgba(223, 223, 223, 0.8);
	}

	.item .head {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 28rpx;
		border-bottom: 1px solid #dcdcdc;
	}

	.item .head {
		.head-row {
			display: flex;
			width: 100%;
			justify-content: space-between;
			align-items: center;
		}

		.name {}

		.name>text {
			font-size: 26rpx;
			font-family: Noto Sans S Chinese;
			font-weight: 400;
			color: #999999;
			line-height: 36rpx;
		}
	}

	.item .head .icon {
		width: 48rpx;
		height: 48rpx;
	}

	.item .head .name {
		display: flex;
		align-items: center;
	}
</style>