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 class="content">
			<view class="picture">
				<view>
					<view style="padding-bottom: 10rpx;">
						<text>车牌颜色：</text>
						<text>{{getVehiclePlateColor(item.vehiclePlateColor)}}</text>
					</view>
					<view>
						<text>产品名称：</text>
						<text>{{item.productName ?item.productName: ''}}</text>
					</view>
				</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.orderNo}}</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>
		<view v-if="item.orderStatus == 'NORMAL'">
			<view class="btns">
				<view v-if="item.orderStep=='ORDER_INIT'||item.orderStep=='CUSTOMER_UPLOAD'" class="btn btn-primary" @click.stop="gotoActiveOrder(item)">继续申请</view>
				<view v-if="item.orderStep=='VEHICLE_UPLOAD'" class="btn btn-primary" @click.stop="gotoActiveOrder(item)">支付</view>
				<view v-if="item.orderStep=='WAITING_ACTIVE'" class="btn btn-primary" @click.stop="gotoActiveOrder(item)">去激活</view>
				<view v-if="item.orderStep=='WAITING_ACTIVE'&&item.shippingStatus=='WAIT_RECEIVING'" class="btn btn-primary" @click.stop="gotoActiveOrder(item)">确认收货</view>
				<view v-if="item.orderStep=='ORDER_PAID'" class="btn btn-primary" @click.stop="gotoActiveOrder(item)">签约</view>
				<view v-if="item.orderStep=='ORDER_PAID'" 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>