qjd-user-uniapp/pagesMain/orderDetail.vue

<template>
	<view class="container">
		<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 icondianpu"></text>
				<text class="shop-name">{{orderData.merchantInfoResVO.supplierName}}</text>
				<text class="iconfont iconfangxiang"></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"></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"></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"></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 ? orderData.payTime : orderData.addOrderTime}}</view>
				<view class="order-info-row" v-if="orderData.orderStatus > 2 && orderData.orderStatus != 6 && orderData.orderStatus != 4">发货时间：{{orderData.sendTime}}</view>
				<view class="order-info-row" v-if="orderData.orderStatus > 3 && orderData.orderStatus != 6 && orderData.orderStatus != 4">收货时间：{{orderData.confirmTime}}</view>
				<view class="order-info-row" v-if="orderData.orderStatus == 6">取消时间：{{orderData.cancelTime}}</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="assess-row">
					<image class="assess-head" :src="orderData.merchantInfoResVO.headImg"></image>
					<view class="assess-info">
						<view class="assess-name">{{orderData.nickname}}</view>
						<view class="assess-date">{{orderData.evaluateResVO.evaluateTime ? orderData.evaluateResVO.evaluateTime : ''}}</view>
						<view class="assess-sore-box">
							<u-rate v-model="orderData.evaluateResVO.score" active-color="#FFAE21" disabled></u-rate>
						</view>
						<view class="assess-text">{{orderData.evaluateResVO.evaluateContent ? orderData.evaluateResVO.evaluateContent : '暂无评价'}}</view>
						<view class="assess-img-box">
							<image class="img-col" :src="item.imgUrl" v-for="(item,i) in orderData.evaluateResVO.evaluateImgs" :key="i"></image>
						</view>
					</view>
					<view class="shop-reply-box" v-if="orderData.evaluateResVO.replyContent">
						<view class="shop-head">
							<view class="iconfont icondianpu"></view>
							<view class="shop-name">店家回复</view>
						</view>
						<view class="shop-reply">{{orderData.evaluateResVO.replyContent}}</view>
					</view>
				</view>
			</view>
		</view>
	<!-- </view> -->
	<uni-goods-nav :fill="true" :options="[]" @click="" @buttonClick="orderHandle" class="order-handle" :buttonGroup="buttonGroup" />
	<u-modal v-model="modalShow" :content="modalContent" @confirm="submitHandle" :async-close="true" :show-cancel-button="true"></u-modal>
	<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: '',
					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: [],
				modalShow: false,
				handleType: '',
				modalContent: '',
			}
		},
		onLoad(options) {
			this.userData = uni.getStorageSync("userData")
			NET.request(API.getOrderDetail, {
				flag: 1,
				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
				}
				switch (JSON.stringify(this.orderData.orderStatus)) {
					case '1':
						this.buttonGroup = [{
							text: '取消订单',
							backgroundColor: '#75BD60',
							color: '#fff'
						}, {
							text: '立即支付',
							backgroundColor: '#52A63A',
							color: '#fff'
						}]
						break;
					case '2':
						var someVaule = this.orderData.merchantInfoResVO.products.some(v => {
							Number(v.productType)
							return v.productType == 1
						})
						if (!someVaule) {
							this.buttonGroup = [{
								text: '申请售后',
								backgroundColor: '#75BD60',
								color: '#fff'
							}, {
								text: '自助采摘',
								backgroundColor: '#52A63A',
								color: '#fff'
							}]
						} else {
							this.buttonGroup = [{
								text: '申请售后',
								backgroundColor: '#75BD60',
								color: '#fff'
							}]
						}
						break;
					case '3':
						this.buttonGroup = [{
							text: '申请售后',
							backgroundColor: '#52A63A',
							color: '#fff'
						}, {
							text: '确认收货',
							backgroundColor: '#52A63A',
							color: '#fff'
						}, {
							text: '追踪物流',
							backgroundColor: '#52A63A',
							color: '#fff'
						}]
						break;
					case '4':
						this.buttonGroup = [{
							text: '申请售后',
							backgroundColor: '#75BD60',
							color: '#fff'
						}]
						break;
					default:
						this.buttonGroup = [{
							text: '申请售后',
							backgroundColor: '#52A63A',
							color: '#fff'
						}]
				}
				if (this.orderData.orderStatus == 4 && this.orderData.evaluateReplyStatus == 1) {
					this.buttonGroup.push({
						text: '评价',
						backgroundColor: '#52A63A',
						color: '#fff'
					})
				}
				this.getOrderType()
			}).catch(error => {
				this.$refs.uTips.show({
					title: error.data.msg,
					type: 'warning',
				})
			})
			// this.getOrderType()
		},
		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(e) {
				if (this.orderData.orderStatus == 1) {
					if (e.index == 0) {
						//  取消订单
						this.modalContent = '请确定是否取消订单'
						this.handleType = 1
						this.modalShow = true
					} else if (e.index == 1) {
						//  立即支付
						this.modalContent = '请确定是否立即支付'
						this.handleType = 2
						this.modalShow = true
					}
				} else {
					if (e.index == 0) {
						//  申请售后
						NET.request(API.applyService, {
							tenantCode: this.orderData.tenantCode
						}, 'GET').then(res => {
							uni.makePhoneCall({
								phoneNumber: res.data.contactTel
							});
						}).catch(error => {
							this.$refs.uTips.show({
								title: error.data.msg,
								type: 'warning',
							})
						})
					} else {
						if (this.orderData.orderStatus == 2) {
							//  自助采摘
							uni.navigateTo({
								url: '/pagesGood/pickVideo?orderId=' + this.orderData.orderId
							});
						} else if (this.orderData.orderStatus == 3) {
							if (e.index == 1) {
								//  确认收货
								this.modalContent = '请确定是否确认收货'
								this.handleType = 3
								this.modalShow = true
							} else {
								//  追踪物流
								uni.navigateTo({
									url: '/pagesMain/logisticsDeatil?orderId=' + this.orderData.orderId
								});
							}
						} else {
							//  评价
							uni.navigateTo({
								url: '/pagesMain/evaluateForm?orderId=' + this.orderData.orderId + '&tenantCode=' + this.orderData.tenantCode +
									'&productIds=' + this.orderData.merchantInfoResVO.products.map(site => {
										return site.productId
									}).join(',')
							});
						}
					}
				}
			},
			//  状态流转
			submitHandle() {
				if (this.handleType == 1) {
					//  取消订单
					NET.request(API.cancelOrder, {
						orderId: this.orderData.orderId
					}, 'GET').then(res => {
						this.modalShow = false
						this.$refs.uTips.show({
							title: '取消订单成功',
							type: 'success',
						})
						setTimeout(() => {
							uni.reLaunch({
								url: '/pagesMain/orderList?type=' + 1
							});
						}, 1000)
					}).catch(error => {
						this.modalShow = false
						this.$refs.uTips.show({
							title: error.data.msg,
							type: 'warning',
						})
					})
				} else if (this.handleType == 2) {
					//  立即支付
					this.modalShow = false
					setTimeout(() => {
						uni.reLaunch({
							url: '/pagesMain/orderList?type=' + 3
						});
					}, 1000)
				} else if (this.handleType == 3) {
					//  确认收货
					NET.request(API.confirmOrder, {
						orderId: this.orderData.orderId
					}, 'GET').then(res => {
						this.modalShow = false
						this.$refs.uTips.show({
							title: '确认收货成功',
							type: 'success',
						})
						setTimeout(() => {
							uni.reLaunch({
								url: '/pagesMain/orderList?type=' + 5
							});
						}, 1000)
					}).catch(error => {
						this.modalShow = false
						this.$refs.uTips.show({
							title: error.data.msg,
							type: 'warning',
						})
					})
				}
			},
			//  跳转留言列表
			goToMessage() {
				uni.navigateTo({
					url: '/pagesMain/messageList?orderId=' + this.orderData.orderId + '&tenantCode=' + this.orderData.tenantCode
				});
			}
		}
	}
</script>
<style lang="less" scoped>
	page {
		width: 100%;
		height: 100%;
	}

	.container {
		width: 100%;
		height: 100%;
		float: left;
		background-color: #f7f7f7;
		// box-sizing: border-box;
		// padding-bottom: 50px;
		overflow-y: auto;

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

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

			.assess-row {
				width: calc(100% - 30px);
				margin: 0 15px;
				float: left;
				// border-top: 1px solid #F6F6F6;
				padding: 12px 0;

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

				.assess-info {
					width: calc(100% - 62px);
					margin-left: 12px;
                    float: left;
					.assess-name {
						height: 18px;
						float: left;
						line-height: 18px;
						font-size: 15px;
						font-family: PingFang SC;
						font-weight: bold;
						color: #343434;
					}

					.assess-date {
						height: 18px;
						float: right;
						line-height: 18px;
						font-size: 12px;
						font-family: PingFang SC;
						font-weight: bold;
						color: #666666;
					}

					.assess-sore-box {
						width: 100%;
						height: 16px;
						float: left;
						margin: 6px 0;
					}

					.assess-text {
						width: 100%;
						float: left;
						font-size: 12px;
						font-family: PingFang SC;
						font-weight: bold;
						color: #666666;
						line-height: 16px;
						margin: 8px 0 10px 0;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						word-wrap: break-word;
					}

					.assess-img-box {
						width: 100%;
						float: left;
						display: flex;

						.img-col {
							height: 60px;
							width: 60px;
							object-fit: cover;
							margin: 0 10px 10px 0;
						}
					}
				}
				.shop-reply-box {
					width: 100%;
					float: left;
					background: #F5F5F5;
					border-radius: 5px;
					margin-top: 10px;
				
					.shop-head {
						width: 100%;
						height: 36px;
						float: left;
						box-sizing: border-box;
						padding: 10px 12px;
				
						.icondianpu {
							width: 16px;
							height: 16px;
							float: left;
							color: #52A63A;
							font-size: 20px;
							margin-right: 8px;
						}
				
						.shop-name {
							height: 16px;
							float: left;
							font-size: 15px;
							font-family: PingFang SC;
							color: #52A63A;
							line-height: 16px;
						}
					}
				
					.shop-reply {
						width: 100%;
						float: left;
						box-sizing: border-box;
						padding: 0 12px 12px 12px;
						font-size: 12px;
						font-family: PingFang SC;
						color: #666666;
						line-height: 16px;
					}
				}
			}
		}

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