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

<!-- 新办订单item 
	新办订单状态：待支付、审核中、审核不通过、待发货、待收货、待激活、已完成、已取消、已结束、退货、换货-->
<template>
	<view :class="item.orderStatus == OrderStatus.已取消 ? 'item finished' : 'item'" @click.stop="gotoOrderDetails(item)">
		<view class="head">
			<view class="name">
				<image :src="`${$imgUrl}order/icon-star-green.png`" class="icon"></image>
				<text class="title">{{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">{{item.amount / 100 ?? '0.00'}}</text>
			</view>
		</view>

		<template v-if="item.orderStatus != OrderStatus.已取消">
			<!-- 信息填写未完成 -->
			<view class="btns"
				v-if="item.orderStep == OrderStatus['完成个人/单位信息上传'] || item.orderStep == OrderStatus.完成填写基本信息 || item.orderStep == OrderStatus.完成车辆信息上传">
				<view class="btn btn-normal" @click.stop="gotoCancelOrder(item)">取消订单</view>
				<view class="btn btn-primary" @click.stop="gotoEditUserOrUnitInfo(item)">继续申请</view>
			</view>

			<!-- 待支付 -->
			<view class="btns" v-if="item.orderStep == OrderStatus.待支付">
				<view class="btn btn-normal" @click.stop="gotoCancelOrder(item)">取消订单</view>
				<view class="btn btn-primary" @click.stop="gotoOrderDetails(item)">支付</view>
			</view>

			<!-- 审核中/审核不通过 -->
			<view class="btns" v-if="item.orderStep == OrderStatus.待审核 || item.orderStep == OrderStatus.审核不通过">
				<view class="btn btn-normal" v-if="item.orderStep == OrderStatus.审核不通过"
					@click.stop="gotoEditUserOrUnitInfo(item)">修改资料</view>
				<view class="btn btn-normal" @click.stop="gotoCancelOrder(item)">取消订单</view>
				<view class="btn btn-primary" @click.stop="gotoOrderDetails(item)">修改地址</view>
			</view>

			<!-- 待发货 -->
			<view class="btns" v-else-if="item.orderStep == OrderStatus.待发货">
				<view class="btn btn-normal" @click.stop="gotoCancelOrder(item)">取消订单</view>
				<view class="btn btn-primary" @click.stop="gotoOrderDetails(item)">修改地址</view>
			</view>

			<!-- 待收货 -->
			<view class="btns" v-else-if="item.orderStep == OrderStatus.待收货">
				<view class="btn btn-normal" @click.stop="gotoCheckLogistics(item)">查看物流
				</view>
				<view class="btn btn-normal" @click.stop="gotoReturnOrder(item)">申请退货
				</view>
				<view class="btn btn-normal" @click.stop="gotoExchangeOrder(item)">申请换货</view>
				<view class="btn btn-primary" @click.stop="gotoConfirmReceipt(item)">确认收货
				</view>
			</view>

			<!-- 待激活 -->
			<view class="btns" v-else-if="item.orderStep == OrderStatus.待激活">
				<view class="btn btn-normal" @click.stop="gotoReturnOrder(item)">申请退货</view>
				<view class="btn btn-normal" @click.stop="gotoExchangeOrder(item)">申请换货</view>
				<view class="btn btn-primary" @click.stop="gotoActiveOrder(item)">去激活
				</view>
			</view>

			<!-- 已完成 -->
			<view class="btns" v-else-if="item.orderStep == OrderStatus.已完成">
				<view class="btn btn-primary" @click.stop="gotoEvaluateOrder(item)" v-if="!item.appraise">去评价</view>
				<view class="btn btn-normal" v-else>已评价</view>
			</view>

			<!-- 已结束 -->
			<view class="btns" v-else-if="item.orderStep == OrderStatus.已结束">
				<view class="btn btn-primary" @click.stop="showActiveOrder = true">重新激活订单</view>
			</view>

			<!-- 换货中 -->
			<view class="btns" v-else-if="item.orderStep == OrderStatus['已申请-换货']">
				<!-- 查看物流: 原型没有UI有 -->
				<view class="btn btn-normal" @click.stop="gotoCheckLogistics(item)">查看物流</view>
				<view class="btn btn-primary" @click.stop="gotoConfirmReceipt(item)">确认收货</view>
			</view>
		</template>
	</view>

	<!-- 弹窗 -->
	<u-popup v-model="showActiveOrder" mode="center">
		<popup-active-order content="确认是否重新激活订单" @cancel="showActiveOrder = false" @confirm="toActiveOrder">
		</popup-active-order>
	</u-popup>
</template>

<script lang="ts" setup>
	import popupActiveOrder from "./popup-active-order.vue";
	import useOrderSkip from "@/composables/order/useOrderSkip";
	import {
		getOrderStatusName,
		msg,
		getOrderTypeName
	} from "@/utils/utils";
	import {
		ref
	} from "vue";
	import {
		OrderStatus
	} from "@/datas/enum";
	import {
		vehiclePlateColor
	} from "@/datas/vehiclePlateColor";

	defineProps({
		item: {
			type: Object,
			default: () => ({}),
		},
	});

	//是否确认激活订单弹窗
	const showActiveOrder = ref(false);

	//办理订单按钮跳转业务逻辑
	const {
		gotoEditAddress,
		gotoCancelOrder,
		gotoEditUserOrUnitInfo,
		gotoConfirmReceipt,
		gotoCheckLogistics,
		gotoEvaluateOrder,
		gotoActiveOrder,
		gotoReturnOrder,
		gotoExchangeOrder,
		gotoPay,
		gotoOrderDetails
	} = useOrderSkip();

	//激活订单
	const toActiveOrder = (item) => {
		gotoActiveOrder(item);
		showActiveOrder.value = false;
	}
	//获取车牌颜色文字	
	const getVehiclePlateColor = (id: number) => {

		const colors = vehiclePlateColor.filter(item => item.id == id);
		return colors[0].color
	}
</script>

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

	.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: 20rpx;
		box-sizing: border-box;
		margin-right: 20rpx;
	}



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