zhywpt-sp/pages/order/components/order-list-item-card-sign.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" 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">{{item.orderType}}</text>
				</view>
				<view class="order-text">
					<text class="type">车牌号：</text>
					<text class="value">{{item.vehiclePlate}}</text>
				</view>
			</view>
			<view class="money"><text class="cny">￥</text><text class="amount">{{item.amount / 100 ?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.待发货">
				<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.待支付">
				<view class="btn btn-normal" @click.stop="gotoCancelOrder(item)">取消订单</view>
				<view class="btn btn-primary" @click.stop="gotoCardSignPay(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-primary" @click.stop="gotoConfirmReceipt(item)">确认收货
				</view>
			</view>
		
			<!-- 待激活 -->
			<view class="btns" v-else-if="item.orderStep == OrderStatus.待激活">
				<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)">去评价</view>
			</view>
		</template>
	</view>
</template>

<script lang="ts" setup>
	import useOrderSkip from "@/composables/order/useOrderSkip";
	import {getOrderStatusName} from "@/utils/utils";
	import {OrderStatus} from "@/datas/enum";
	
	defineProps({
	  item: {
	    type: Object,
	    default: () => ({}),
	  },
	});
	
	//办理订单按钮跳转业务逻辑
	const {gotoCancelOrder,gotoConfirmReceipt,gotoCheckLogistics,gotoEvaluateOrder,
		gotoActiveOrder,gotoOrderDetails,gotoCardSignPay} = useOrderSkip();
</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: 26rpx;
		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>