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-car.png`" class="icon" mode="aspectFit"></image>
				<text class="title">{{item.vehiclePlate ?item.vehiclePlate: ''}}</text>
			</view>
			<view v-if="item.promotionModes==1" class="xiao">小程序</view>
			<view v-else class="xianxia">线下网点</view>	
		</view>
		<view>
		
		</view>
		<view class="content">
			<view class="picture">
				<view>
					<text>车牌颜色：</text>
					<text>{{getVehiclePlateColor(item.vehiclePlateColor)}}</text>
				</view>
				<view>
					<view v-if="item.orderStatus == OrderStatus.已取消">
						<image class="tupian"  :src="`${$imgUrl}order/yiquxiao.png`"  mode="aspectFill"></image>
					</view>
					<!--异地 orderStatus=-1，你判断这个remoteStatus 是字符串7，就显示审核未通过 -->
					<view  v-else-if="item.orderStatus == OrderStatus.已取消 && item.remoteStatus=='7' && item.deviceType == deviceType">
						<image class="tupian"  :src="`${$imgUrl}order/nopass.png`"  mode="aspectFill"></image>
					</view>
					<view v-else
				:class="{'text-orange':item.orderStep == OrderStatus.已完成 || item.orderStep == OrderStatus.已结束 
			 || item.orderStep == OrderStatus['换货-设备已回收'] || item.orderStep == OrderStatus.退款成功 || item.orderStep == OrderStatus.退货成功}">
						<image class="tupian" v-if="item.orderStep==12 && item.reshipment==1"  :src="`${$imgUrl}order/buhuozhong.png`" mode="aspectFill"></image>
						<image class="tupian" v-else :src="`${$imgUrl}order/${getOrderStatusNameNew(item.orderStep)}.png`"  mode="aspectFill"></image>
					</view>
				</view>
			</view>
			<view>
				<text class="type">新办订单号：</text>
				<text class="value">{{item.orderId}}</text>
			</view>
			<view class="all">合计：<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="gotoReplenishmentOrder(item)" v-if="item.deviceType == deviceType">申请补货</view>
					<view class="btn btn-normal" @click.stop="gotoReturnOrder(item)" v-else>申请退货</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 || item.deviceType == deviceType">申请退货</view>
					<view class="btn btn-normal" @click.stop="gotoExchangeOrder(item)">申请换货</view>
					<view class="btn btn-normal" @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, "异地-售前换货后确认收货"), 
				ORDER_STEP_35(35, "异地-下单-->
                <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>
				<view class="btns" v-else-if="item.orderStep == 35">
					<view class="btn btn-primary" @click.stop="placeAnOrder(item)" >下单</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,
		getOrderStatusNameNew,
		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 {
		gotoCancelOrder,
		gotoEditUserOrUnitInfo,
		gotoConfirmReceipt,
		gotoCheckLogistics,
		gotoEvaluateProduct,
		gotoActiveOrder,
		gotoReturnOrder,
		gotoExchangeOrder,
		gotoOrderDetailsPay,
		gotoOrderDetails,
		gotoAgainUseOrder,
		gotoOrderSign,
		closeOrder,
		gotoReplenishmentOrder,
		gotoAddressOrder,
		placeAnOrder
	} = useOrderSkip();

	//激活订单
	const toActiveOrder = (item) => {
		gotoActiveOrder(item);
		showActiveOrder.value = false;
	}
	//获取车牌颜色文字	
	const getVehiclePlateColor = (id : number) => {
        console.log("id",id)
		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 0;
		border-bottom: 1px solid #dcdcdc;
		width:95%;
	    margin: 0 auto;
	}

	.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: 37rpx;
		height: 31rpx;
	}

	.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 !important;
		color: #333 !important;
		margin-left: 10rpx;
		font-weight: bold !important;
	}

	.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 {
		color:white;
		background-color: #133850 ;
	}

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

	}

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

	.evaluation {
		display: flex;
	}
	.content{
		font-size: 26rpx;
		padding: 6rpx 20rpx;
	}
	.all{
		display: flex;
		justify-content: flex-end;
		align-items: center;
		margin-top: 10rpx;
	}
	.picture{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 10rpx 0;
	}
	.picture>view:first-child{
		width: 65%;
	}
	.xiao{
		background: #42D175;
		border-radius: 5rpx 5rpx 5rpx 5rpx;
		color: white;
		font-size: 20rpx;
		padding: 4rpx 6rpx;
	}
	.xianxia{
		background: #CCB375;
		border-radius: 5rpx 5rpx 5rpx 5rpx;
		color: white;
		font-size: 20rpx;
		padding: 4rpx 6rpx;
	}
	.tupian{
		width: 90rpx;
	    height: 80rpx;
	}
</style>