hotelHomestayWx/pagesHouse/Mine/ordersList/details/details.vue

<template>
	<view class="page" :style="{'min-height':h+'px','padding-top':(mt)+'px'}">
		<c-nav-bar1 title="订单详情"></c-nav-bar1>
		<view class="bg"></view>
		<view class="content">
			<view class="head">
				<text v-if="merchantType==10">{{FishJialeOcfg[infoMation.status]}}</text>
				<text v-esle>{{FishJialeOcfg2[infoMation.orderStatus]}}</text>
				<view class="time">
					有效期：{{infoMation.activityStartTime&&infoMation.activityStartTime.substring(0,10)}}至{{infoMation.activityEndTime&&infoMation.activityEndTime.substring(0,10)}}
				</view>
			</view>
			<view class="ticketInfo">
				<!-- <view class="hander-titles">
					<view class="names">
						{{list.fishermanName}}
					</view>
					<view class="rights">
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view> -->
				<view v-if="merchantType==10" class="dateAndType">
					<u-icon name="calendar" size="32" color="#272636"></u-icon>
					<text>{{infoMation.payTime}}出发/{{infoMation.orderType==3?'拼船':'包船'}}</text>
				</view>
				<view class="ticketInfo-hander">
					<view class="image">
						<image :src="infoMation.productImg|delArr" mode="aspectFill"></image>
					</view>
					<view class="right">
						<view class="name">
							{{infoMation.productName}}
						</view>
						<view class="tip">
							周一至周日 · 无需预约
						</view>
						<view class="price">
							<text>￥</text><text>{{infoMation.realityPay}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="foods">
				<view class="tit">
					套餐明细
				</view>
				<view class="li" v-for="(item,inex) in infoMation.productsDetail" :key="index">
					<text>{{item.name}}</text>
					<text>{{item.number}}</text>
					<text>￥{{item.price}}</text>
				</view>
			</view>
			<!-- 游客信息 -->
			<view class="orderInfo " style="padding-bottom: 30rpx;">
				<view class="tit">游客信息</view>
				<u-cell :border="false" v-for="(i,index) in infoMation.aa">
					<text slot="icon" class="txt">订单编号</text>
					>
					<text slot="title" class="val">{{infoMation.orderCode}}</text>
					<text slot="right-icon">复制</text>
				</u-cell>
			</view>
			<!-- 订单信息 -->
			<view class="orderInfo " style="padding-bottom: 30rpx;">
				<view class="tit">订单信息</view>
				<u-cell :border="false">
					<text slot="icon" class="txt">订单编号</text>
					>
					<text slot="title" class="val">{{infoMation.orderCode}}</text>
					<text slot="right-icon" class="icon"
						style="border: 1rpx solid #007A69; border-radius: 50rpx; box-sizing: border-box; color: #007A69;padding: 2rpx 10rpx; font-size: 22rpx; font-weight: Regular;"
						@tap="copyOrderNo()">复制</text>
				</u-cell>
				<template v-if="merchantType==4">
					<u-cell :border="false">
						<text slot="icon" class="txt">付款时间</text>
						>
						<text slot="title" class="val">{{infoMation.orderTime}}</text>
					</u-cell>
					<u-cell :border="false">
						<text slot="icon" class="txt">订单总价</text>
						>
						<text slot="title" class="val">{{infoMation.realityPay}}</text>
					</u-cell>
					<u-cell :border="false">
						<text slot="icon" class="txt">实际付款</text>
						>
						<text slot="title" class="val">{{infoMation.realityPay}}</text>
					</u-cell>
					<u-cell :border="false">
						<text slot="icon" class="txt">联系方式</text>
						>
						<text slot="title" class="val">{{infoMation.phone}}</text>
					</u-cell>
				</template>
				<template v-if="merchantType==10">
					<u-cell :border="false">
						<text slot="icon" class="txt">下单时间</text>
						>
						<text slot="title" class="val">{{infoMation.orderTime}}</text>
					</u-cell>
					<u-cell :border="false">
						<text slot="icon" class="txt">下单时间</text>
						>
						<text slot="title" class="val">{{infoMation.realityPay}}</text>
					</u-cell>
					<u-cell :border="false">
						<text slot="icon" class="txt">联系方式</text>
						>
						<text slot="title" class="val">{{infoMation.realityPay}}</text>
					</u-cell>
					<u-cell :border="false">
						<text slot="icon" class="txt">支付方式</text>
						>
						<text slot="title" class="val">{{infoMation.phone}}</text>
					</u-cell>
					<u-cell :border="false">
						<text slot="icon" class="txt">总计</text>
						>
						<text slot="title" class="val" style="color: #111">{{infoMation.totalPrice}}</text>
					</u-cell>
				</template>
			</view>
		</view>
		<!-- 餐饮 -->
		<view class="btns" v-if="merchantType==4&&infoMation.orderStatus==4">
			<view class="detail del" @tap="hexiao()" v-if="infoMation.orderStatus==4">
				核销订单
			</view>
			<!-- <template v-else>
				<view class="detail" @tap="Detail(list)">
					删除订单
				</view>
			</template> -->

		</view>
		<view class="btns" v-if="merchantType==10&&infoMation.status==1">
			<view class="detail del" @tap="hexiao()" v-if="infoMation.status==1">
				核销订单
			</view>
			<!-- <template v-else>
				<view class="detail" @tap="Detail(list)">
					删除订单
				</view>
			</template> -->

		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				merchantType: uni.getStorageSync('merchantType'),
				merchantId: uni.getStorageSync('merchantId'),
				//渔家乐
				FishJialeOcfg: {
					0: '待支付',
					1: '待使用',
					2: '拼船中',
					3: '已使用',
					4: '退款中',
					5: '已退款',
					6: '已取消',
					7: '已完成',
					8: '拼团失败'
				},
				//餐饮
				FishJialeOcfg2: {
					0: '待支付',
					4: '待使用',
					3: '已完成',
					'-1': '已取消',
					'-2': '退款中',
					'-3': '已退款',
				},
				list: {},
				infoMation: {},
				orderCode: '',
			}
		},
		onLoad(opt) {
			this.orderCode = opt.orderCode;
			if (this.merchantType == 10) {
				this.info()
			} else {
				this.info2()
			}
		},
		filters: {
			delArr(val) {
				if (val) {
					return val.split(',')[0]
				}

			}
		},
		methods: {
			//渔家乐
			info() {
				this.$api.get('/api/fishering/personCenterOrderDetail/' + this.orderCode).then(res => {
					console.log(res)
					if (res.data.code == 0) {
						this.infoMation = res.data.data;
					}
				})
			},
			//餐饮
			info2() {
				this.$api.get('/api/merchant/food/queryOrderDetail', {
					orderCode: this.orderCode
				}).then(res => {
					if (res.data.code == 0) {
						this.infoMation = res.data.data;
						this.infoMation.productsDetail = JSON.parse(res.data.data.productsDetail);
					}
				})
			},
			copyOrderNo() {
				let that = this;
				// #ifdef H5
				this.$copyText(this.infoMation.orderCode).then(res => {
					this.$showToast('复制成功');
				})
				// #endif
				// #ifdef MP-WEIXIN
				uni.setClipboardData({
					data: this.infoMation.orderCode,
					success(res) {
						that.$showToast('复制成功');
					},
					fail(err) {
						that.$showToast('复制失败');
					}
				})
				// #endif
			},
			// 核销
			hexiao(item) {
				let that = this;
				if (this.merchantType == 10) {} else {}
				uni.showModal({
					title: '提示',
					content: '确定核销订单？',
					success: function(res) {
						if (res.confirm) {
							that.$api.post('/api/merchant/food/scenic/merchant/order/verifyOrderQrCode', {
								merchantId: that.merchantId,
								orderCode: that.infoMation.orderCode,
								type: 4
							}).then(res => {
								if (res.data.code === 0) {
									that.$showToast('订单已核销');
									that.init();
								} else that.$showToast(res.data.msg)
							})
						}
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

	.bg {
		height: 100%;
		position: fixed;
		z-index: 1;
		width: 100%;
		background-image: linear-gradient(to bottom, #007A69, #F5F8FA, #F5F8FA);
	}

	.content {
		position: relative;
		z-index: 99;
	}

	.page {
		box-sizing: border-box;
		// height: 100%;
		background-color: #007A69;
		padding-bottom: 170rpx;
	}

	.foods {
		padding: 0 20rpx 10rpx;
		background: #fff;
		border-radius: 16rpx;
		margin: 0 20rpx 20rpx;

		.tit {
			padding-top: 54rpx;
			font-family: PingFang-SC, PingFang-SC;
			font-weight: bold;
			font-size: 36rpx;
			color: #111111;
			line-height: 40rpx;
			text-align: left;
			font-style: normal;
			margin-bottom: 36rpx;
		}

		.li {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 24rpx;

			text {
				font-size: 26rpx;
				color: #111;

				&:first-child {
					width: 80rpx;
				}

				&:nth-child(2) {
					color: #999;
					text-align: right;
					display: inline-block;
					flex: 1;
					margin-right: 30rpx;
				}
			}
		}
	}

	.ticketInfo-demo {
		// border-bottom: 2rpx solid #EFEFEF;
		margin-top: 40rpx;

		.demo-layout {
			display: flex;
			align-items: center;
			text-align: center;
			margin: 0 80rpx;
		}
	}







	.orderInfo {
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 16rpx;
		width: 96%;
		margin: 0 auto 20rpx;

		.tit {
			font-size: 32rpx;
			color: #333;
			padding-left: 30rpx;
			padding-top: 40rpx;
			font-weight: 600;
			margin-bottom: 20rpx;
		}

		.txt {
			font-size: 28rpx;
			color: #808080;
			width: 115rpx;
			font-weight: Regular;
		}

		.icon {
			font-size: 28rpx;
			color: #333;
			font-weight: Regular;
		}

		.val {
			font-size: 28rpx;
			color: #333;
			font-weight: Regular;
			margin: 0 20rpx 0 30rpx;
		}

	}

	.ticketInfo {
		box-sizing: border-box;
		width: 96%;
		margin: 0 auto 20rpx;
		padding: 33rpx 24rpx;
		border-radius: 20rpx;
		position: relative;
		background-color: #fff;
		z-index: 2;

		.dateAndType {
			height: 36rpx;
			font-family: PingFang-SC, PingFang-SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #333333;
			line-height: 36rpx;
			margin-bottom: 48rpx;
		}

		.hander-titles {
			display: flex;
			height: 32rpx;
			line-height: 32rpx;
			margin: 20rpx 0 30rpx 0;

			.image {
				width: 32rpx;
				height: 32rpx;
				border-radius: 16rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.names {
				font-size: 32rpx;
				color: #333333;
				font-weight: Bold;
				margin: 0rpx 16rpx 0rpx 10rpx;
			}

		}

		.ticketInfo-hander {
			display: flex;

			.image {
				width: 136rpx;
				min-width: 136rpx;
				height: 136rpx;
				border-radius: 12rpx;
				margin-right: 20rpx;

				image {
					border-radius: 12rpx;
					width: 100%;
					height: 100%;
				}
			}

		}

		.name {
			font-size: 30rpx;
			line-height: 30rpx;
			color: #333;
			font-weight: bold;
			width: 100%;
		}

		.tip {
			margin: 16rpx 0 20rpx;
			color: #777;
		}

		.price {
			text {
				font-size: 30rpx;

				&:first-child {
					font-size: 24rpx;
				}
			}
		}

		.date {
			// padding: 20rpx 0 32rpx;
			padding-top: 20rpx;

			text {
				font-size: 26rpx;

				&:nth-child(1) {
					color: #808080;
				}

				&:nth-child(2) {
					color: #FF7D01;
					margin-left: 30rpx;
				}
			}
		}



		.code {
			margin-top: 40rpx;
			text-align: center;
			position: relative;

			.cover,
			.sx {
				position: absolute;
				background-color: rgba(255, 255, 255, 0.5);
				width: 340rpx;
				height: 340rpx;
				top: 66rpx;
				left: 50%;
				transform: translate(-50%, 0);
			}

			.sx {
				width: 120rpx;
				height: 120rpx;
				top: 150rpx;
				background: transparent;
			}

			.txt {
				font-size: 28rpx;
			}

			image {
				width: 340rpx;
				height: 340rpx;
				margin: 30rpx 0;
			}
		}
	}

	.head {
		box-sizing: border-box;
		padding: 37rpx 40rpx 30rpx;
		color: #fff;

		text {

			font-size: 44rpx;
			font-weight: Bold;


		}

		.time {
			margin-top: 18rpx;
			font-size: 28rpx;
		}
	}




	.btns {
		box-sizing: border-box;
		width: 100%;
		position: fixed;
		bottom: 0;
		z-index: 999;
		left: 0;
		display: flex;
		padding: 32rpx 32rpx 50rpx;
		background-color: #fff;
		gap: 0 20rpx;
		box-shadow: 0 -8rpx 16rpx rgba(0, 0, 0, 0.06);


		&>view {
			// width: calc(50% - 15rpx);
			width: 100%;
			height: 80rpx;
			border-radius: 46rpx;
			// border: 1rpx solid #999999;
			line-height: 80rpx;
			text-align: center;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: Bold;
			color: #FFFFFF;
			// background-color: #F6F6F6;
			background-color: #007A69;
		}
	}
</style>