qjd-shell-uniapp/pagesMain/orderItem.vue

<template>
	<view class="order-row" @click="goToOrderDetail()">
		<view class="shop-info" v-if="orderData">
			<text class="iconfont iconwode"></text>
			<text class="shop-name">{{orderData.nickname}}</text>
			<text class="order-type">{{getOrderType(orderData.orderStatus)}}</text>
		</view>
		<view class="goods-list" v-if="orderData">
			<view class="goods-row" v-for="(site, index) in orderData.products" :key="index">
				<cover-image class="goods-img" :src="site.imgUrl"></cover-image>
				<view class="goods-info">
					<view class="goods-name">{{site.productName}}</view>
					<view class="goods-type">
						类型：{{site.productType == 1 ? '普通商品' : (site.productType == 2 ? '拍卖' : (site.productType == 3 ? '自助采摘' : '共享种植'))}}
					</view>
					<view class="goods-price-number">
						<text class="goods-unit">￥</text>
						<text class="goods-price">{{site.bizPrice}}</text>
						<text class="goods-number">x{{site.buyNum}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="pay-info">总价￥{{getAllPrice()}}，实付￥{{orderData.paySum}}</view>
		<view class="handle-box" v-if="(tabIndex > 1 && tabIndex < 5) || (tabIndex == 5 && orderData.evaluateStatus == 2 && orderData.evaluateReplyStatus == 1)">
			<u-button size="medium" :plain="true" type="success" shape="circle" :ripple="true" :hair-line="false" class="handle-button"
			 v-if="tabIndex == 2" @click.stop="handleOrder(1)">发货</u-button>
			<u-button size="medium" :plain="true" type="success" shape="circle" :ripple="true" :hair-line="false" class="handle-button"
			 v-if="tabIndex == 3 || tabIndex == 4" @click.stop="handleOrder(2)">追踪物流</u-button>
			<u-button size="medium" :plain="true" type="success" shape="circle" :ripple="true" :hair-line="false" class="handle-button"
			 v-if="tabIndex == 5 && orderData.evaluateStatus == 2 && orderData.evaluateReplyStatus == 1" @click.stop="handleOrder(3)">回复</u-button>
		</view>
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	const NET = require('@/utils/request')
	const API = require('@/config/api')
	export default {
		props: {
			tabIndex: {
				default: 1
			},
			orderData: {
				default: {
					auctionStatus: 0,
					orderId: 0,
					orderStatus: 0,
					evaluateReplyStatus: 0,
					nickname: '',
					logisticsNum: '',
					payStatus: 0,
					paySum: 0,
					products: [{
						bizPrice: 0,
						buyNum: 0,
						imgUrl: '',
						originalPrice: 0,
						productId: 0,
						productName: '',
						productType: 0,
						shoppingcartId: 0,
						tenantCode: ''
					}],
					supplierName: ''
				}
			},
		},
		data() {
			return {}
		},
		onLoad() {},
		methods: {
			//  获取订单总价
			getAllPrice() {
				let price = this.orderData.products.reduce((total, site) => {
					return total + site.bizPrice * site.buyNum
				}, 0)
				return price.toFixed(2)
			},
			//  获取订单类型
			getOrderType(type) {
				switch (type) {
					case 1:
						return '待付款'
						break;
					case 2:
						return '待发货'
						break;
					case 3:
						return '已发货'
						break;
					case 4:
						return '已收货'
						break;
					case 5:
						return '已完成'
						break;
					default:
						return '已取消'
				}
			},
			//  操作区分
			handleOrder(type) {
				if (type == 1) {
					//  发货
					uni.navigateTo({
						url: '/pagesMain/bindOrder?orderId=' + this.orderData.orderId
					});
				} else if (type == 2) {
					//  追踪物流
					uni.navigateTo({
						url: '/pagesMain/logisticsDeatil?logisticCode=' + this.orderData.logisticsNum
					});
				} else if (type == 3) {
					//  回复
					uni.navigateTo({
						url: '/pagesMain/evaluateForm?orderId=' + this.orderData.orderId + '&mid='+this.orderData.mid
					});
				}
			},
			//  跳转订单详情
			goToOrderDetail() {
				uni.navigateTo({
					url: '/pagesMain/orderDetail?orderId=' + this.orderData.orderId + '&orderStatus=' + this.orderData.orderStatus
				});
			},
		}
	}
</script>

<style lang="less" scoped>
	.order-row {
		width: 100%;
		float: left;
		margin: 0 0 15px 0;
		background: #FFFFFF;
		border-radius: 10px;

		.shop-info {
			width: 100%;
			height: 48px;
			float: left;
			box-sizing: border-box;
			padding: 13px 15px 12px 15px;
			border-bottom: 1px solid #EEEEEE;
			line-height: 22px;

			.iconwode {
				font-size: 22px;
				color: #333333;
			}

			.shop-name {
				font-size: 15px;
				font-family: PingFang SC;
				color: #333333;
				margin: 0 8px 0 10px;
			}

			.iconshangjia {
				font-size: 12px;
				color: #999999;
			}

			.order-type {
				float: right;
				font-size: 15px;
				font-family: PingFang SC;
				color: #52A63A;
			}
		}

		.goods-list {
			width: 100%;
			float: left;
			box-sizing: border-box;
			padding: 10px 15px 0 15px;

			.goods-row {
				width: 100%;
				height: 90px;
				float: left;
				display: flex;
				margin-bottom: 10px;

				.goods-img {
					width: 90px;
					height: 90px;
					border-radius: 5px;
					object-fit: cover;
				}

				.goods-info {
					width: calc(100% - 106px);
					height: 90px;
					margin-left: 16px;

					.goods-name {
						width: 100%;
						height: 36px;
						float: left;
						font-size: 14px;
						font-family: PingFang SC;
						color: #333333;
						line-height: 18px;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						word-wrap: break-word;
					}

					.goods-type {
						height: 20px;
						float: left;
						background: #F0F0F0;
						border-radius: 4px;
						padding: 0 8px;
						margin: 6px 0;
						font-size: 10px;
						font-family: PingFang SC;
						color: #666666;
						line-height: 20px;
					}

					.goods-price-number {
						width: 100%;
						height: 20px;
						float: left;
						line-height: 20px;
						font-family: PingFang SC;
						color: #333333;

						.goods-unit {
							font-size: 12px;
						}

						.goods-price {
							font-size: 15px;
							margin-right: 6px;
						}

						.goods-number {
							font-size: 12px;
						}
					}
				}
			}
		}

		.pay-info {
			width: 100%;
			float: left;
			box-sizing: border-box;
			padding: 20px 15px 16px 15px;
			font-size: 12px;
			font-family: PingFang SC;
			color: #333333;
			line-height: 16px;
			text-align: right;
		}

		.handle-box {
			width: calc(100% - 30px);
			height: 51px;
			float: left;
			margin: 0 15px;
			box-sizing: border-box;
			padding: 10px 0;
			border-top: 1px solid #EEEEEE;
			text-align: right;

			.handle-button {
				color: #333333 !important;
				border-color: #BFBFBF !important;
				background-color: #FFFFFF !important;
				padding: 0;
				margin-left: 8px;
				height: 30px;
				line-height: 30px;
			}
		}
	}
</style>