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">
				<view class="top-menu">
					<view :class="item == state.tabActive ? 'tab active' : 'tab'" v-for="item in state.flowPathTabList"
						:key="item" @click="flowPathTabHandle(item)">
						<view class="border"></view>{{ item }}
					</view>
				</view>
				<order-tabbar ref="tabbarRef" :tabs="data.tabsList" v-model:curIndex="data.tabIndex"
					v-if="data.tabsList.length > 0" @index="test"></order-tabbar>
			</view>

			<order-list-item v-if="state.tabActive=='小程序'" ref="mescrollItem" :index="data.tabIndex"
				:refresh="data.refresh">
			</order-list-item>
			<view v-else>
				<!-- 搜索框 -->
				<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="state.appOrdersList.length === 0" />
				<block v-for="(item,index) in state.appOrdersList" :key="index">
					<view :class="item.orderStatus == OrderStatus.已取消 ? 'item finished' : 'item'"
						@click.stop="gotoOrderDetails(item,2)">
						<view class="head">
							<view class="name">
								<image :src="`${$imgUrl}order/icon-star-green.png`" class="icon" mode="aspectFill">
								</image>
								<text class="title">{{item.productName ?item.productName: ''}}</text>
							</view>

							<view class="status text-orange" v-if="item.orderStatus == OrderStatus.已取消">已取消</view>
							<view class="status text-green" v-else
								:class="{'text-orange':item.orderStep == OrderStatus.已完成 || item.orderStep == OrderStatus.已结束 
							 || item.orderStep == OrderStatus['换货-设备已回收'] || item.orderStep == OrderStatus.退款成功 || item.orderStep == OrderStatus.退货成功}">
								{{getOrderStatusName(item.orderStep)}}
							</view>
						</view>
						<view class="detail">
							<view class="orders">
								<view class="order-text">
									<text class="type">新办单号：</text>
									<text class="value">{{item.orderId}}</text>
								</view>
								<view class="order-text odd">
									<text class="type">业务类型：</text>
									<text class="value">{{getOrderTypeName(item.orderType)}}</text>
								</view>
								<view class="order-text">
									<text class="type">订单车牌号：</text>
									<text class="value">{{item.vehiclePlate}}</text>
								</view>
								<view class="order-text odd">
									<text class="type">订单车牌颜色：</text>
									<text class="value">{{getVehiclePlateColor(item.vehiclePlateColor)}}</text>
								</view>
							</view>
							<view class="money"><text class="cny">￥</text>
								<text class="amount" v-if="item.amount">{{item.amount / 100}}</text>
								<text class="amount" v-else>0.00</text>
							</view>
						</view>

						<!-- 待激活 -->
						<view class="btns" v-if="item.orderStep == OrderStatus.待激活 && item.cardId && item.obuId">
							<view class="btn btn-primary" @click.stop="gotoActiveOrder(item)">去激活</view>
						</view>
						<!-- 已完成 -->
						<view class="btns" v-else-if="item.orderStep == OrderStatus.已完成">

							<view class="btn btn-normal" v-if="item.isStaff==1 && item.isProduct==1">
								已评价
							</view>
							<view class='evaluation' v-else>
								<view class="btn btn-primary" @click.stop="gotoEvaluateSalesman(item)">去评价</view>
							</view>
						</view>
					</view>
				</block>
				<uni-load-more :status="params.status" iconType="snow" :icon-size="16" :content-text="config.contentTxt"
					v-if="state.appOrdersList.length > 0" />
			</view>
		</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, onReachBottom, onShow, onPullDownRefresh } 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 { request } from "@/utils/network/request.js";
	import { appPage } from "@/utils/network/api";
	import { stringToJson } from "@/utils/network/encryption";
	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
		}
		request(appPage, options).then((res) => {
			uni.hideLoading()
			var data = stringToJson(res.bizContent);
			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: #eef7f7;
	}

	: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 {
		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;
		}
	}

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