qjd-shell-uniapp/pagesMain/orderDetail.vue

<template>
	<view class="container" :style="{paddingBottom: ((orderData.orderStatus >= 2 && orderData.orderStatus <= 4) || (orderData.orderStatus == 5 && orderData.evaluateReplyStatus == 1)) ? '' :'10px'}">
		<view class="order-type-info">
			<view class="order-type-title">{{orderType.title}}</view>
			<view class="order-type-text">{{orderType.text}}</view>
		</view>
		<view class="address-info-box">
			<view class="address-icon">
				<text class="iconfont icondizhi"></text>
			</view>
			<view class="address-content">
				<text class="address-info">
					<text class="address-name">{{orderData.recName}}</text>
					<text class="address-phone">{{orderData.recMobile}}</text>
				</text>
				<view class="address-detail">{{orderData.address}}</view>
			</view>
		</view>
		<view class="goods-info-box">
			<view class="shop-info">
				<text class="iconfont iconwode"></text>
				<text class="shop-name">{{orderData.nickname}}</text>
			</view>
			<view class="goods-list">
				<view class="goods-row" v-for="(item, index) in orderData.merchantInfoResVO.products" :key="index">
					<image class="goods-img" :src="item.imgUrl" mode="aspectFill"></image>
					<view class="goods-info">
						<view class="goods-name">{{item.productName}}</view>
						<view class="goods-type">
							类型：{{item.productType == 1 ? '普通商品' : (item.productType == 2 ? '拍卖商品' : (item.productType == 3 ? '自助采摘' : '共享种植'))}}
						</view>
						<view class="plant-area" v-if="item.productType == 4">面积：{{item.areaSize}}㎡</view>
						<view class="goods-price-number">
							<text class="goods-unit">￥</text>
							<text class="goods-price">{{item.bizPrice}}</text>
							<text class="goods-number">x{{item.buyNum}}</text>
							<text class="plant-text" v-if="item.productType == 4">有效期：{{item.term}}天</text>
						</view>
					</view>
				</view>
			</view>
			<view class="order-info">
				<u-cell-group :border="false">
					<u-cell-item title="商品金额" :value="'￥' + orderData.orderSum" :arrow="false" :border-bottom="false"></u-cell-item>
					<u-cell-item title="积分抵扣" :value="'-￥' + orderData.integralAmount" :arrow="false" :border-bottom="false" v-if="goodType == 1"></u-cell-item>
					<u-cell-item title="优惠券" :value="'-￥' + orderData.couponDiscountAmount" :arrow="false" :border-bottom="false" v-if="goodType == 1"></u-cell-item>
					<u-cell-item title="备注" :value="orderData.notes" :arrow="false" :border-bottom="false"></u-cell-item>
				</u-cell-group>
			</view>
			<view class="pay-info">
				<text class="pay-text">实付款</text>
				<text class="pay-price">￥{{orderData.paySum}}</text>
			</view>
		</view>
		<view class="order-info-box" @click="goToMessage()">
			<view class="info-title-box">
				<view class="info-title">留言板</view>
				<text class="iconfont iconfangxiang"></text>
			</view>
			<view class="info-content-box">
				<view class="message-row" v-for="(item, index1) in orderData.leas" :key="index1">
					<image class="message-head" :src="item.imgUrl" mode="aspectFill"></image>
					<view class="message-info-box">
						<view class="message-name">{{item.leaMsgType}}</view>
						<view class="message-date">{{item.leaMsgTime}}</view>
						<view class="message-text">{{item.leaMsgContent}}</view>
						<view class="message-img-box" v-for="(site, index2) in item.orderLeaImgResVOs" :key="index2">
							<image class="message-img" :src="site.imgUrl" mode="aspectFill"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="order-info-box">
			<view class="info-title-box">
				<view class="info-title">订单信息</view>
			</view>
			<view class="info-content-box">
				<view class="order-info-row">订单编号：{{orderData.orderCode}}</view>
				<view class="order-info-row">创建时间：{{orderData.addOrderTime}}</view>
				<view class="order-info-row" v-if="orderData.orderStatus > 1 && orderData.orderStatus != 6">支付时间：{{orderData.payTime}}</view>
				<view class="order-info-row" v-if="orderData.orderStatus > 2 && orderData.orderStatus != 6">发货时间：{{orderData.sendTime}}</view>
				<view class="order-info-row" v-if="orderData.orderStatus > 3 && orderData.orderStatus != 6">收货时间：{{orderData.confirmTime}}</view>
				<view class="order-info-row" v-if="orderData.orderStatus == 6">取消时间：{{orderData.cancelTime}}</view>
			</view>
		</view>
		<uni-goods-nav :fill="true" :options="[]" @click="" @buttonClick="orderHandle" class="order-handle" :buttonGroup="buttonGroup"
		 v-if="(orderData.orderStatus >= 2 && orderData.orderStatus <= 4) || (orderData.orderStatus == 5 && orderData.evaluateReplyStatus == 1)" />
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	const NET = require('@/utils/request')
	const API = require('@/config/api')
	export default {
		data() {
			return {
				orderType: {
					title: '',
					text: '',
				},
				orderData: {
					orderId: '',
					orderStatus: 1,
					addOrderTime: '',
					recName: '',
					recMobile: '',
					address: '',
					merchantInfoResVO: {
						supplierName: '',
						products: [],
					},
					orderSum: 0,
					integralAmount: 0,
					couponDiscountAmount: 0,
					notes: 'xxxxx',
					paySum: 0,
					leas: [],
					orderCode: '',
					payTime: '',
					sendTime: '',
					confirmTime: '',
					cancelTime: '',
					tenantCode: '',
					evaluateReplyStatus: 1,
				},
				goodType: 1,
				buttonGroup: [{
					text: '',
					backgroundColor: '#52A63A',
					color: '#fff'
				}],
			}
		},
		onLoad(options) {
			this.userData = uni.getStorageSync("userData")
			NET.request(API.getOrderDetail, {
				flag: 2,
				orderId: options.orderId,
				orderStatus: options.orderStatus,
			}, 'GET').then(res => {
				this.orderData = res.data
				if (this.orderData.merchantInfoResVO.products.length && this.orderData.merchantInfoResVO.products[0].productType !=
					2 && this.orderData.merchantInfoResVO.products[0].productType != 4) {
					this.goodType = 1
				} else {
					this.goodType = 2
				}
				if (this.orderData.orderStatus == 2) {
					this.buttonGroup[0].text = '发货'
				} else if (this.orderData.orderStatus == 3 || this.orderData.orderStatus == 4) {
					this.buttonGroup[0].text = '追踪物流'
				} else if (this.orderData.evaluateReplyStatus == 1) {
					this.buttonGroup[0].text = '回复'
				} else {
					this.buttonGroup = []
				}
				this.getOrderType()
			}).catch(error => {
				this.$refs.uTips.show({
					title: error.data.msg,
					type: 'warning',
				})
			})
		},
		onShow() {},
		methods: {
			//  获取订单类型
			getOrderType() {
				switch (this.orderData.orderStatus) {
					case 1:
						this.orderType = {
							title: '等待买家付款',
							text: '订单将于' + this.orderData.addOrderTime + '关闭',
						}
						break;
					case 2:
						this.orderType = {
							title: '等待卖家发货',
							text: '您的商品正在打包等待发货',
						}
						break;
					case 3:
						this.orderType = {
							title: '等待商品送达',
							text: '您的商品正在路上',
						}
						break;
					case 4:
						this.orderType = {
							title: '商品已送达',
							text: '',
						}
						break;
					case 5:
						this.orderType = {
							title: '交易已完成',
							text: '',
						}
						break;
					default:
						this.orderType = {
							title: '交易已取消',
							text: '',
						}
				}
			},
			//  操作
			orderHandle() {
				if (this.orderData.orderStatus == 2) {
					//  发货
					uni.navigateTo({
						url: '/pagesMain/bindOrder?orderId=' + this.orderData.orderId
					});
				} else if (this.orderData.orderStatus == 3 || this.orderData.orderStatus == 4) {
					//  追踪物流
					uni.navigateTo({
						url: '/pagesMain/logisticsDeatil?logisticCode=' + this.orderData.logisticCode
					});
				} else {
					//  回复
					uni.navigateTo({
						url: '/pagesMain/evaluateForm?orderId=' + this.orderData.orderId +'&mid='+this.orderData.mid
					});
				}
			},
			//  跳转留言列表
			goToMessage() {
				uni.navigateTo({
					url: '/pagesMain/messageList?orderId=' + this.orderData.orderId + '&tenantCode=' + this.orderData.tenantCode
				});
			}
		}
	}
</script>
<style>
	page {
		background-color: #f7f7f7;
	}
</style>
<style lang="less" scoped>
	page {
		width: 100%;
		height: 100%;
	}

	.container {
		width: 100%;
		height: 100%;
		float: left;
		background-color: #f7f7f7;
		box-sizing: border-box;
		overflow-y: auto;
		position: absolute;

		.order-type-info {
			width: 100%;
			height: 115px;
			float: left;
			box-sizing: border-box;
			padding: 22px 100px 0 15px;
			background: #52A63A;
			border-radius: 0px 0px 20px 20px;
			background-size: 62px;
			background-position: calc(100% - 48px) 12px;
			background-repeat: no-repeat;
			background-image: url(@/static/images/orderDetail.png);

			.order-type-title {
				width: 100%;
				float: left;
				height: 20px;
				line-height: 20px;
				font-size: 15px;
				font-family: PingFang SC;
				color: #FFFFFF;
				margin-bottom: 4px;
			}

			.order-type-text {
				width: 100%;
				float: left;
				height: 20px;
				line-height: 20px;
				font-size: 12px;
				font-family: PingFang SC;
				color: #FFFFFF;
			}
		}

		.address-info-box {
			width: calc(100% - 30px);
			float: left;
			box-sizing: border-box;
			padding: 16px 18px 16px 16px;
			margin: -34px 15px 10px 15px;
			background: #FFFFFF;
			border-radius: 10px;

			.address-icon {
				width: 36px;
				height: 40px;
				float: left;
				align-items: center;
				display: flex;

				.iconfont {
					color: #52A63A;
					font-size: 36px;
				}
			}

			.address-content {
				width: calc(100% - 56px);
				height: 40px;
				float: left;
				margin: 0 8px 0 12px;

				.address-info {
					height: 20px;
					font-family: PingFang SC;
					line-height: 20px;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;

					.address-name {
						font-size: 16px;
						color: #333333;
						margin-right: 14px;
					}

					.address-phone {
						font-size: 12px;
						color: #666666;
					}
				}

				.address-detail {
					height: 20px;
					font-size: 16px;
					font-family: PingFang SC;
					color: #333333;
					line-height: 20px;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
		}

		.goods-info-box {
			width: calc(100% - 30px);
			float: left;
			margin: 0 15px 10px 15px;
			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;
				}
			}

			.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;
						}

						.plant-area {
							height: 20px;
							float: right;
							margin: 6px 0;
							font-size: 12px;
							font-family: PingFang SC;
							color: #333333;
						}

						.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;
							}
						}

						.plant-text {
							float: right;
							font-size: 12px;
							font-family: PingFang SC;
							color: #333333;
						}
					}
				}
			}

			.order-info {
				width: 100%;
				float: left;

				/deep/.u-cell {
					padding: 6px 16px;
				}
			}

			.pay-info {
				width: 100%;
				height: 46px;
				float: left;
				box-sizing: border-box;
				border-top: 1px solid #EEEEEE;
				padding-right: 15px;
				line-height: 44px;
				font-family: PingFang SC;
				font-size: 14px;
				text-align: right;
				white-space: nowrap;

				.pay-text {
					float: left;
					color: #333333;
					margin-left: 15px;
				}

				.pay-price {
					color: #52A63A;
				}
			}
		}

		.order-info-box {
			width: calc(100% - 30px);
			float: left;
			margin: 0 15px 10px 15px;
			background: #FFFFFF;
			border-radius: 10px;

			.info-title-box {
				width: 100%;
				height: 48px;
				float: left;
				box-sizing: border-box;
				padding: 15px 15px 14px 15px;
				border-bottom: 1px solid #EEEEEE;
				line-height: 18px;
				white-space: nowrap;

				.info-title {
					height: 18px;
					float: left;
					font-size: 15px;
					font-family: PingFang SC;
					color: #333333;
					margin-right: 8px;
					padding-left: 10px;
					border-left: 2px solid #74BD60;
				}

				.iconfangxiang {
					float: right;
					font-size: 12px;
					color: #999999;
				}
			}

			.info-content-box {
				width: 100%;
				float: left;
				padding: 15px 0;

				.message-row {
					width: 100%;
					float: left;
					box-sizing: border-box;
					padding: 0 15px;
					margin-bottom: 15px;

					.message-head {
						width: 50px;
						height: 50px;
						object-fit: cover;
						float: left;
						border-radius: 50%;
						overflow: hidden;
					}

					.message-info-box {
						width: calc(100% - 75px);
						float: right;

						.message-name {
							width: 50%;
							height: 30px;
							float: left;
							font-size: 15px;
							font-family: PingFang SC;
							color: #333333;
							line-height: 30px;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						.message-date {
							width: 50%;
							height: 30px;
							float: left;
							font-size: 12px;
							font-family: PingFang SC;
							color: #666666;
							text-align: right;
							line-height: 30px;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						.message-text {
							width: 100%;
							height: 20px;
							float: left;
							font-size: 12px;
							font-family: PingFang SC;
							color: #666666;
							line-height: 20px;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						.message-img-box {
							width: 100%;
							float: left;

							.message-img {
								width: 76px;
								height: 76px;
								object-fit: cover;
								float: left;
								margin: 0 10px 10px 0;
							}
						}
					}
				}

				.message-row:last-child {
					margin-bottom: 0;
				}

				.order-info-row {
					width: 100%;
					float: left;
					box-sizing: border-box;
					padding: 0 15px;
					font-size: 12px;
					font-family: PingFang SC;
					color: #333333;
					line-height: 26px;
					word-break:break-all; 
				}
			}
		}

		.order-handle {
			width: 100%;
			height: 50px;
			float: left;
			border-top: 1px solid #cccccc;
		}
	}
</style>