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

<!-- 新办订单item 
	新办订单状态：待支付、审核中、审核不通过、待发货、待收货、待激活、已完成、已取消、已结束、退货、换货-->
<template>
	<view :class="item.orderStatus == OrderStatus.已取消 ? 'item finished' : 'item'"
		@click.stop="gotoOrderDetails(item,1)">
		<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>
		<!-- item.orderSource==1  app -->
		<view v-if="item.orderStatus != OrderStatus.已取消 && !item.orderSource">
			<!-- 微信小程序正常 -->
			<view>
				<!-- 信息填写未完成 -->
				<view class="btns"
					v-if="item.orderStep == OrderStatus['完成个人/单位信息上传'] || item.orderStep == OrderStatus.完成填写基本信息 || item.orderStep == OrderStatus.完成车辆信息上传 || item.orderStep == OrderStatus.待支付3">
					<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="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="gotoOrderDetailsPay(item)">支付</view>
				</view>
				<view class="btns" v-if="item.orderStep == OrderStatus.待支付2">
					<view class="btn btn-normal" @click.stop="gotoCancelOrder(item)">取消订单</view>
					<view class="btn btn-primary" @click.stop="gotoOrderDetailsPay(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="gotoOrderSign(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>

				<!-- 待发货 -->
				<view class="btns" v-else-if="item.orderStep == OrderStatus.待发货">
					<view class="btn btn-normal" @click.stop="gotoCancelOrder(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-primary" @click.stop="gotoConfirmReceipt(item)">确认收货</view>
					<view class="btn btn-primary" @click.stop="closeOrder(item)" v-if="item.finishOrder">结束订单</view>
				</view>

				<!-- 待激活 -->
				
				<view class="btns" v-else-if="item.orderStep == OrderStatus.待激活">
					<view class="btn btn-normal" @click.stop="gotoReturnOrder(item)" v-if="item.applyReturn">申请退货</view>
					<view class="btn btn-normal" @click.stop="gotoExchangeOrder(item)">申请换货</view>
					<view class="btn btn-primary" @click.stop="gotoReplenishmentOrder(item)" v-if="item.deviceType == deviceType">申请补货</view>
					<view class="btn btn-primary" @click.stop="gotoActiveOrder(item)">去激活</view>
					<view class="btn btn-primary" @click.stop="closeOrder(item)" v-if="item.finishOrder">结束订单</view>
				</view>
				<!-- ORDER_STEP_31(31, "异地-售前退货"),
				ORDER_STEP_32(32, "异地-售前退货后确认收货"),
				ORDER_STEP_33(33, "异地-售前换货"),  33包含换货和补货 如果item.orderType=='REPLENISHMENT'是补货  就不展示换货
				ORDER_STEP_34(34, "异地-售前换货后确认收货"), -->
                <view class="btns" v-else-if="item.orderStep == 31">
					<view class="btn btn-primary" @click.stop="gotoReturnOrder(item)" >退货</view>
				</view>
				<view class="btns" v-else-if="item.orderStep==33">
					<view class="btn btn-primary" @click.stop="gotoExchangeOrder(item)" v-if="item.orderType!='REPLENISHMENT'">换货</view>
				</view>
				
				<!-- 已完成  售后订单不允许评价产品，储值卡转记账卡除外-->
				<!-- 发行产品 isProduct=0;  业务员 isStaff=0; 权益 isEquity=0  业务服务  isService=0; -->
				<view class="btns"
					v-else-if="item.orderStep == OrderStatus.已完成 && (item.orderType =='ISSUE' || item.orderType =='VALUE_TO_ACCOUNT') ">

					<view class="btn btn-normal" v-if="( item.isProduct==1 && item.isService==1) ">
						已评价
					</view>
					<view class='evaluation' v-else>
						<view class="btn btn-primary" v-if="item.isProduct==0 || item.isService==0"
							@click.stop="gotoEvaluateProduct(item)">去评价产品</view>
					</view>
				</view>

				<!-- 已结束 -->
				<view class="btns" v-else-if="item.orderStep == OrderStatus.已结束 && item.isUseAgain">
					<view class="btn btn-primary" @click.stop="gotoAgainUseOrder(item)">再次使用订单</view>
				</view>
				<!-- 异地-邮寄地址填写 -->
				<view class="btns" v-else-if="item.orderStep == OrderStatus.邮寄地址填写 && item.deviceType==deviceType">
					<view class="btn btn-primary" @click.stop="gotoAddressOrder(item)">邮寄地址填写</view>
				</view>
			</view>



			<!-- 换货中 -->
			<!-- '完成签约' = 5,
			'已申请-退货' = 13,
			'退款中' = 15,
			'退款成功' = 16,
			'退货成功' = 17,
			'换货-设备已回收' = 18, -->
		</view>
		<view v-else>
			<!-- 待激活 -->
			<view class="btns" v-if="item.orderStep == OrderStatus.待激活">
				<view class="btn btn-primary" @click.stop="gotoActiveOrder(item)">去激活</view>
			</view>
		</view>
	</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 { deviceType } from "@/utils/network/difference";
	import {
		getOrderStatusName,
		msg,
		getOrderTypeName
	} from "@/utils/utils";
	import {
		ref
	} from "vue";
	import {
		OrderStatus
	} from "@/datas/enum";
	import {
		vehiclePlateColor
	} from "@/datas/vehiclePlateColor";
	import { source } from "@/utils/network/difference";
	defineProps({
		item: {
			type: Object,
			default: () => ({}),
		},
	});

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

	//办理订单按钮跳转业务逻辑
	const {
		gotoEditAddress,
		gotoCancelOrder,
		gotoEditUserOrUnitInfo,
		gotoConfirmReceipt,
		gotoCheckLogistics,
		gotoEvaluateOrder,
		gotoEvaluateProduct,
		gotoEvaluateSalesman,
		gotoActiveOrder,
		gotoReturnOrder,
		gotoExchangeOrder,
		gotoOrderDetailsPay,
		gotoOrderDetails,
		gotoAgainUseOrder,
		gotoOrderSign,
		closeOrder,
		gotoReplenishmentOrder,
		gotoAddressOrder
	} = 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: 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;
	}
</style>