CjyTravel/subPageC/orderShop/orderDetail.vue

<template>
	<view class="v-order-detail">
		<view class="v-order-bg"></view>
		<view class="v-order-detail-state">
			<view class="order-top">
				<view class="state row">
					<image mode="widthFix"
						:src="'https://eluyou.ailuquan.cn/upload/image/2024/mapIcon/daolan/'+stateImg(homestayOrderData.orderStatus)">
					</image>
					{{homestayOrderData.status}}
				</view>
				<view class="tip">
					<view v-if="homestayOrderData.orderStatus == '2'||homestayOrderData.orderStatus == '3'">
						{{homestayOrderData.cancelReason}}
					</view>
					<view v-else>{{promptText(homestayOrderData.orderStatus)}}</view>

				</view>
				<!-- <view class="time" v-if="homestayOrderData.orderStatus == '0'">25:25</view> -->
			</view>
			<view class="order-top-btn m-t-40 row" v-if="homestayOrderData.orderStatus == '0'">
				<view class=" col-12">
					<view class="pay-btn" @click="payOrder">去支付</view>
				</view>
				<view class="col-12">
					<view class="cancel-btn" @click="cacelOrder">取消订单</view>
				</view>
			</view><view class="order-top-btn m-t-40"
				v-else-if="homestayOrderData.orderStatus != '1'">
				<view class="col-24">
					<view class="pay-btn" @click="toHomeStayBookingPage(homestayOrderData.hotelId)">再次预订</view>
				</view>
			</view>

			<!-- <view v-if="homestayOrderData.orderStatus != '0' && homestayOrderData.orderStatus !='1'">
				<view class="pay-btn">再次预订</view>
			</view> -->
			<view class="row describe"
				v-if="homestayOrderData.orderStatus == '3' ||homestayOrderData.orderStatus == '7' || homestayOrderData.orderStatus == '8' ">
				<view class="dec col">退款进度：
					<text v-if="homestayOrderData.orderStatus == '7'">发起退款申请</text>
					<text v-else>退款成功</text>
				</view>
				<view class="btn" @click="toRefundPage(homestayOrderData.id)">查看详情</view>
			</view>
		</view>

		<!-- 		<view class="v-card container-fluid m-t--80">
			<view class="v-form-item row">
				<view class="label">取消规则</view>
				<view class="content">09月13日18:00前，可免费取消</view>
			</view>
		</view> -->

		<view class="v-card order container-fluid m-t-24">
			<view class="v-form">
				<view class="v-form-item row">
					<view class="col row">
						<view class="label">在线支付</view>
						<view class="content">
							<text class="price">￥{{homestayOrderData.orderAmount}}</text>
						</view>
					</view>
					<!-- <view class="detail-btn">详情</view> -->
				</view>
				<view class="v-form-line"></view>
				<view class="v-form-item row">
					<view class="label">发票报销</view>
					<view class="content">如需发票，请向酒店前台索取。 </view>
				</view>
			</view>
		</view>

		<view class="v-card order container-fluid m-t-24">
			<view class="v-order-info row">
				<view class="info-image">
					<image :src="rootPath+homestayOrderData.hotelLogo" mode="widthFix"></image>
				</view>
				<view class="info-content">
					<view class="title">{{homestayOrderData.hotelName}}</view>
					<view class="address">{{homestayOrderData.addressInfo}}</view>
				</view>
			</view>
			<view class="row v-order-info-btn flex-align-center">
				<view class="btn col-12 row flex-align-center flex-justify-center" @click="navigation">
					<image src="https://eluyou.ailuquan.cn/upload/image/2024/mapIcon/daolan/icon_map.png"></image>地图导航
				</view>
				<view class="btn col-12 row flex-align-center flex-justify-center"
					@click="callPhone(homestayOrderData.serviceNumber)">
					<image src="https://eluyou.ailuquan.cn/upload/image/2024/mapIcon/daolan/icon_phone.png"></image>咨询电话
				</view>
			</view>
		</view>

		<view class="v-card order container-fluid m-t-24">
			<view class="v-form-date row flex-align-center" v-for="item in homestayOrderData.dateList">
				<view class="start"><text class="date">{{getData(item.checkTime)}}</text></view>
				<text class="mid">{{item.day}}晚</text>
				<view class="end"><text class="date">{{getData(item.checkOutTime)}}</text></view>
			</view>
			<view class="v-form-name m-t-12">{{homestayOrderData.houseName}}</view>
			<view class="v-form-tip">
				<!-- <text>无早餐</text> -->
				<!-- 				<text>{{homestayOrderData.bedWide +'米宽'+homestayOrderData.hotelTypeName}}</text> -->
				<text>最多入住{{homestayOrderData.guest}}人</text>
				<text>{{homestayOrderData.houseArea}}㎡</text>
			</view>
			<view class="v-form bg m-t-24">
				<view class="v-form-item row">
					<view class="label">入住人</view>
					<view class="content">{{homestayOrderData.bookerusername}}</view>
				</view>
				<view class="v-form-item row">
					<view class="label">联系手机</view>
					<view class="content">{{homestayOrderData.bookerphone}}</view>
				</view>
				<view class="v-form-item row">
					<view class="label">身份证号</view>
					<view class="content">{{homestayOrderData.idcard}}</view>
				</view>
			</view>
		</view>

		<view class="v-card order container-fluid m-t-24 m-b-24">
			<view class="v-form-title">订单信息</view>
			<view class="v-form">
				<view class="v-form-item row">
					<view class="label">订单号</view>
					<view class="content">{{homestayOrderData.orderNumber}}</view>
				</view>
				<view class="v-form-item row">
					<view class="label">下单时间</view>
					<view class="content">{{homestayOrderData.orderTime}}</view>
				</view>
			</view>
		</view>
		<u-popup :show="isPayPopup" mode="bottom" @close="closePay" round="10">
			<f-pay :show-title="false" :show="isPayPopup" :order="homestayOrderData"
				:payMoney="homestayOrderData.orderAmount" :tradeNo="homestayOrderData.orderNumber"
				@payResult="payResult"></f-pay>
		</u-popup>
	</view>
</template>

<script>
	import fPay from "../components/f-pay/f-pay";
	import uPopup from "../components/uview-ui/components/u-popup/u-popup.vue";

	export default {
		components: {
			fPay,
			uPopup
		},
		data() {
			return {
				//是否支付弹窗
				isPayPopup: false,
        rootPath: this.$config.ROOTPATH,
				title: '订单详情',
				homestayOrderData: {
					'id': 1734877929,
					'orderNumber': '',
					'hotelId': 0,
					'hotelName': '',
					'addressInfo': '',
					'orderAmount': 0,
					'orderTime': '',
					'payTime': null,
					'price': null,
					'status': '',
					'orderStatus': '0',
					'belongingPayOrderId': '',
					'bedNum': 0,
					'hotelLogo': '',
					'houseName': '',
					'serviceNumber': '',
					'bedWide': 0,
					'houseArea': 0,
					'guest': 0,
					'bedNumTwo': 0,
					'hotelTypeName': '',
					'bookerusername': '',
					'bookerphone': '',
					'cancelReason': null,
					'dateList': [{
						'checkTime': '',
						'checkOutTime': '',
						'day': 0
					}],
					'no': null
				}
			}
		},

		onLoad(options) {
			this.getHomestayOrderDetail(options.id)
		},
		methods: {
			// 查询订单详情
			getHomestayOrderDetail(orderId) {
				let data = {
					'id': orderId
				}
				this.$Request.get(this.$config.getHomestayOrderDetail, data, null, null, false, true).then((res) => {
					if (res.code == 0) {
						this.homestayOrderData = res.data
						let checkTime = this.homestayOrderData.checkTime
						let checkOutTime = this.homestayOrderData.checkOutTime

					} else {
						uni.showToast({
							title: res.data,
							icon: 'none',
							duration: 2000
						})
					}
				});
			},
			getData(data) {
				let newdata = data.split("-")
				return newdata[0] + '月' + newdata[1] + '日'
			},
			// 拨打咨询电话
			callPhone(val) {
				uni.makePhoneCall({
					phoneNumber: val //仅为示例
				});
			},
			//导航
			navigation() {
				console.log("this.homestayOrderData", this.homestayOrderData)
				uni.openLocation({
					latitude: Number(this.homestayOrderData.lat),
					longitude: Number(this.homestayOrderData.lng),
					name: this.homestayOrderData.hotelName,
					address: this.homestayOrderData.addressInfo,
					complete: function(result) {
						console.log(result);
					},
				});
				// #ifdef H5
				if (this.$wechat.isWechat()) {
					var mapParam = {
						latitude: this.homestayOrderData.lat,
						longitude: this.homestayOrderData.lng,
						scale: 18,
						name: this.homestayOrderData.hotelName,
						address: this.homestayOrderData.addressInfo,
					};
					this.$util.openLocation(mapParam);
					return;
				}
				window.location.href =
					"https://uri.amap.com/navigation?from=" +
					this.$param.clng +
					"," +
					this.$param.clat +
					",我的位置&to=" +
					this.homestayOrderData.lng +
					"," +
					this.homestayOrderData.lat +
					"," +
					this.homestayOrderData.addressInfo +
					"&mode=walk&src=sjz_uniapp&callnative=1";
				// #endif
			},

			// 根据订单状态反馈提示文字
			promptText: function(val) {
				//订单状态 0未支付 1待确认 2已取消 3 预定失败 4预定成功 5 已入住 6已离店 7 退款中 8已退款
				switch (val) {
					case "0":
						return "酒店房间有限，请尽快支付，超时后订单将自动取消"
						break;
					case "1":
						return "等待商家确认中，请及时关注订单状态"
						break;
					case "2":
						return "订单超时未支付，请重新下单"
						break;
					case "3":
						return "商家因满房原因暂时无法接单，建议您稍后重试或选择其他房型"
						break;
					case "4":
						return "请按预订时间办理入住"
						break;
					case "5":
						return ""
						break;
					case "6":
						return ""
						break;
					case "7":
						return ""
						break;
					case "8":
						return ""
						break;
				}
			},
			//跳转预订页面
			toHomeStayBookingPage(hotelId) {
				uni.navigateTo({
					url: "/subPageB/Homestay/homestaydetail/homestaydetail?guid=" + hotelId
				});
			},
			//跳转退款页面
			toRefundPage(orderId) {
				uni.navigateTo({
					url: "/subPageC/orderHomestay/cancelStep?orderId=" + orderId
				});
			},

			payOrder(val) {
				console.log("订单==========", val)

				this.isPayPopup = true
			},

			//支付结果
			payResult(data) {
				if (data.payStatus == 1) {
					uni.showToast({
						title: '支付成功',
						icon: 'none'
					});
					this.isPayPopup = false
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						});
					}, 1000)
				} else {
					uni.showToast({
						title: '支付失败',
						icon: 'none'
					});
					this.isPayPopup=false
				}
				//uni.showToast({title: data.detail.errMsg,icon:'none'});
			},

			closePay() {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定取消支付？',
					cancelText: '再想想',
					showCancel: true,
					success: function(res) {
						if (res.confirm) {
							that.isPayPopup = false
						} else if (res.cancel) {
							console.log('用户点击取消');
							this.isPayPopup=false
						}
					}
				})
			},

			stateImg: function(val) {
				//订单状态 0未支付 1待确认 2已取消 3 预定失败 4预定成功 5 已入住 6已离店 7 退款中 8已退款
				switch (val) {
					case "0":
						return "icon_pending-payment.png"
						break;
					case "1":
						return "icon_wait-confirmed.png"
						break;
					case "2":
						return "icon_cancelled.png"
						break;
					case "3":
						return "icon_booking-failed.png"
						break;
					case "4":
						return "icon_booking-successful.png"
						break;
					case "5":
						return "icon_check-in.png"
						break;
					case "6":
						return "icon_check-out.png"
						break;
					case "7":
						return "icon_refund.png"
						break;
					case "8":
						return "icon_refund-successful.png"
						break;
				}
			},
			//取消订单
			cacelOrder() {
				uni.navigateTo({
					url: "/subPageC/orderHomestay/orderCancel?id=" + this.homestayOrderData.id
				});
			},
			stateMessage: function(val) {
				//订单状态 0未支付 1待确认 2已取消 3 预定失败 4预定成功 5 已入住 6已离店 7 退款中 8已退款
				switch (val) {
					case "0":
						return "待支付"
						break;
					case "1":
						return "待确认"
						break;
					case "2":
						return "已取消"
						break;
					case "3":
						return "预订失败"
						break;
					case "4":
						return "预订成功"
						break;
					case "5":
						return "已入住"
						break;
					case "6":
						return "已离店"
						break;
					case "7":
						return "退款中"
						break;
					case "8":
						return "已退款"
						break;
				}
			},

		}
	}
</script>

<style lang="scss">
	/*每个页面公共css */
	@import '@/static/css/common.scss';

	.v-order-detail {
		padding-bottom: 24rpx;
	}

	.v-order-detail-state {
		position: relative;
		z-index: 9;
		padding: 40rpx 0 10rpx 0;


		.order-top {
			position: relative;
			padding: 0 40rpx;

			.state {
				font-size: 44rpx;
				color: #fff;
				font-weight: bold;

				image {
					width: 60rpx;
					margin-right: 10rpx;
				}
			}

			.tip {
				margin-top: 10rpx;
				font-size: 26rpx;
				color: #fff;
			}

			.time {
				position: absolute;
				top: 0;
				right: 0;
				font-size: 32rpx;
				padding: 8rpx 40rpx 8rpx 30rpx;
				border-radius: 30rpx 0 0 30rpx;
				color: #fff;
				background: linear-gradient(to right, rgba(255, 255, 255, .2), transparent);

				&:before {
					content: "";
					position: absolute;
					top: -40rpx;
					left: -50rpx;
					width: 140rpx;
					height: 140rpx;
					border-radius: 140rpx;
					background: linear-gradient(to right, rgba(255, 255, 255, .2), transparent);
				}

				&::after {
					content: "";
					position: absolute;
					top: -25rpx;
					left: -30rpx;
					width: 110rpx;
					height: 110rpx;
					border-radius: 120rpx;
					background: linear-gradient(to right, rgba(255, 255, 255, .2), transparent);
				}
			}
		}

		.order-top-btn {
			margin: 12rpx 10rpx;

			.pay-btn {

				background-color: #fff;
				text-align: center;
				height: 64rpx;
				line-height: 64rpx;
				border-radius: 64rpx;
				color: #0983FF;
			}

			.cancel-btn {
				margin: 0 20rpx;
				border: 1rpx solid #fff;
				color: #fff;
				text-align: center;
				height: 64rpx;
				line-height: 64rpx;
				border-radius: 64rpx;
				background: linear-gradient(to right, transparent, #0983FF);
			}
		}

		.describe {
			padding: 10rpx 40rpx;

			background: linear-gradient(to right, rgba(255, 255, 255, .2), transparent);

			.dec {
				color: #fff;
				font-size: 26rpx;
			}

			.btn {
				border-radius: 40rpx;
				padding: 0 20rpx;
				height: 40rpx;
				line-height: 40rpx;
				border: 1rpx solid #fff;
				color: #fff;
				font-size: 26rpx;
			}
		}
	}

	.v-form-date {}

	.v-form-date {
		.start .date {
			font-size: 34rpx;
			font-weight: bold;
		}

		.start .text {
			font-size: 24rpx;
			color: #666666;
		}

		.end .date {
			font-size: 34rpx;
			font-weight: bold;
		}

		.end .text {
			font-size: 24rpx;
			color: #666666;
		}

		.mid {
			position: relative;
			border: 1rpx solid #0983FF;
			padding: 0 8rpx;
			height: 30rpx;
			line-height: 30rpx;
			border-radius: 30rpx;
			margin: 0 30rpx;
			font-size: 20rpx;
			color: #0983FF;

			&::before,
			&::after {
				content: "";
				position: absolute;

				top: 50%;
				transform: translate(0, -50%);
				width: 20rpx;
				height: 1rpx;
				background-color: #0983FF;
			}

			&::before {
				left: -20rpx;
			}

			&::after {
				right: -20rpx;
			}
		}
	}

	.v-form-title {
		margin-bottom: 24rpx;
		font-weight: bold;
	}

	.v-form-name {
		margin-top: 8rpx;
		font-size: 30rpx;
		color: #1B1B1B;
		font-weight: bold;
	}

	.v-form-line {
		height: 1rpx;
		background-color: #EEEEEE;
		margin: 12rpx 0;
	}

	.v-form-tip {
		text {
			font-size: 24rpx;
			margin-right: 16rpx;
			color: #808080;
		}
	}

	.v-order-info {
		.info-image {
			margin-left: 10rpx;
			margin-right: 20rpx;
			width: 180rpx;
			height: 120rpx;
			overflow: hidden;

			image {
				width: 180rpx;
				height: 120rpx;
			}
		}

		.info-content {
			.title {
				font-size: 30rpx;
				font-weight: bold;
			}

			.address {
				margin-top: 8rpx;
				font-size: 24rpx;
				color: #808080;
				padding-left: 30rpx;
				background: url('https://eluyou.ailuquan.cn/upload/image/2024/mapIcon/daolan/icon-address.png');
				background-repeat: no-repeat;
				background-position: left 4rpx;
				background-size: 24rpx;
			}
		}
	}

	.v-order-detail {
		position: relative;
	}



	.v-order-bg {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1;
		width: 100%;
		height: 600rpx;
		background: url('https://eluyou.ailuquan.cn/upload/image/2024/mapIcon/daolan/order_bg.png');
		background-repeat: no-repeat;
		background-position: top left;
		background-size: cover;
	}

	.v-order-info-btn {
		margin-top: 20rpx;
		margin-left: -10rpx;

		.btn {
			margin-left: 10rpx;
			height: 60rpx;
			line-height: 60rpx;
			border-radius: 60rpx;
			background-color: #F6F7FB;
			text-align: center;
			font-size: 24rpx;
			color: #1B1B1B;

			image {
				width: 30rpx;
				height: 30rpx;
				margin-right: 8rpx;
			}
		}
	}

	.v-order-detail-state {}

	.v-form {

		&.bg {
			padding: 20rpx;
			border-radius: 10rpx;
			background: linear-gradient(to bottom, #F7F9FF, #fff);
		}
	}

	.v-form-item {

		&:not(:last-child) {
			margin-bottom: 10rpx;
		}

		.detail-btn {
			font-size: 24rpx;
			color: #0983FF;
		}

		.label {
			width: 160rpx;
			font-size: 28rpx;
			color: #808080;
		}

		.content {
			font-size: 28rpx;
			color: #1B1B1B;
		}

		.price {
			font-size: 32rpx;
			color: #E02222;
			font-weight: bold;
		}
	}
</style>