MiniScm/subpkg/orderDetail/orderDetail.vue

<template>
	<view>
		<view class="top">
			<!-- #ifdef MP-WEIXIN -->
			<NavigateBar title="订单详情" control="back" bgcolor="#a09cc4"></NavigateBar>
			<!-- #endif -->
			<!-- #ifdef MP-ALIPAY -->
			<NavigateBar title="订单详情" bgcolor="#a09cc4"></NavigateBar>
			<!-- #endif -->
		</view>

		<view class="info-item">
			<u-text text="订单id:"></u-text>
			<u-text :text="orderInfo.orderId" align="right"></u-text>
		</view>
		<view class="info-item">
			<u-text text="姓名:"></u-text>
			<u-text :text="orderInfo.name" align="right"></u-text>
		</view>
		<view class="info-item">
			<u-text text="手机号:"></u-text>
			<u-text :text="orderInfo.phone" align="right"></u-text>
		</view>
		<view class="info-item">
			<u-text text="酒店:"></u-text>
			<u-text :text="currentHotel.name" align="right"></u-text>
		</view>
		<view class="info-item">
			<u-text text="房间类型:"></u-text>
			<u-text :text="roomTypeName" align="right"></u-text>
		</view>
		<view class="info-item">
			<u-text text="楼栋:"></u-text>
			<u-text :text="orderInfo.building" align="right"></u-text>
		</view>
		<view class="info-item">
			<u-text text="楼层:"></u-text>
			<u-text :text="orderInfo.floor" align="right"></u-text>
		</view>
		<view class="info-item">
			<u-text text="房间号:"></u-text>
			<u-text :text="orderInfo.room+'('+orderInfo.breakfastNum+')'" align="right"></u-text>
		</view>
		<view class="info-item">
			<u-text text="开始日期:"></u-text>
			<u-text :text="orderInfo.startTime" align="right"></u-text>
		</view>
		<view class="info-item">
			<u-text text="结束日期:"></u-text>
			<u-text :text="orderInfo.endTime" align="right"></u-text>
		</view>
		<view class="info-item">
			<u-text text="创建时间:"></u-text>
			<u-text :text="orderInfo.createTime" align="right"></u-text>
		</view>
		<view class="info-item">
			<u-text text="价格:"></u-text>
			<u-text :text="orderInfo.price" align="right"></u-text>
		</view>
		<view class="info-item">
			<u-text text="支付时间:"></u-text>
			<u-text :text="orderInfo.paymentTime" align="right"></u-text>
		</view>
		<view class="info-item">
			<u-text text="支付方式:"></u-text>
			<u-text :text="orderInfo.paymentMethod" align="right"></u-text>
		</view>
		<view class="info-item">
			<u-text text="订单状态:"></u-text>
			<u-text :text="orderInfo.status" align="right"></u-text>
		</view>
		<view class="info-item">
			<u-text text="支付状态:"></u-text>
			<u-text :text="orderInfo.paymentStatus" align="right"></u-text>
		</view>
		<view class="btn-container">
			<u-button text="删除" type="error" @click="deleteOrder" color="#9e97c3"></u-button>
		</view>
	</view>
</template>

<script>
	import moment from "moment"
	import NavigateBar from "../../components/navigateBar/navigate-bar.vue";
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		components: {
			NavigateBar
		},
		data() {
			return {
				orderId: '',
				orderInfo: {},
				roomTypeName: '',
				paymentStatus: {
					UNPAID: '待支付',
					PAID: '已支付'
				},
				status: {
					CANCELED: "已取消",
					ORDER_PLACED: "已下单",
					ROOM_SELECTED: "已选房",
					CHECK_IN: "已入住",
					FINISHED: "已完成"
				},
				paymentMethod: {
					WECHAT: '微信',
					ALIPAY: '支付宝'
				}
			};
		},
		computed: {
			...mapState('m_business', ['currentHotel']),
		},
		methods: {
			async queryOrder() {
				let res = await uni.$http.get(`/order/orderId/${this.orderId}`, )
				console.log(res)
				this.orderInfo = JSON.parse(JSON.stringify(res.data.data))
				this.orderInfo.orderId = this.orderInfo.orderId.toUpperCase()
				this.orderInfo.startTime = moment(this.orderInfo.startTime).format('YYYY-MM-DD')
				this.orderInfo.endTime = moment(this.orderInfo.endTime).format('YYYY-MM-DD')
				this.orderInfo.createTime = moment(this.orderInfo.createTime).format('YYYY-MM-DD HH:mm:ss')
				this.orderInfo.paymentTime = this.orderInfo.paymentTime === null ? '' : moment(this.orderInfo
					.paymentTime).format('YYYY-MM-DD HH:mm:ss')
				this.orderInfo.status = this.status[this.orderInfo.status]
				this.orderInfo.paymentStatus = this.paymentStatus[this.orderInfo.paymentStatus]
				if (this.orderInfo.breakfastNum === null) {
					this.orderInfo.breakfastNum = '不含早'
				} else {
					this.orderInfo.breakfastNum = `含${this.orderInfo.breakfastNum}早`
				}
				this.orderInfo.paymentMethod = this.paymentMethod[this.orderInfo.platform]
			},
			async deleteOrder() {
				let res = await uni.$http.delete('/hotelOrder/' + this.orderInfo.id)
				console.log(res)
				if (res.data.code === 200 && res.data.msg === 'SUCCESS') {
					uni.$showMsg('删除成功！')
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/order/order'
						})
					}, 1000)
				} else {
					uni.$showMsg('删除失败！')
				}
			}
		},
		async onLoad(options) {
			console.log(options.orderId)
			this.orderId = options.orderId
			this.roomTypeName = options.roomTypeName
			await this.queryOrder()
		},
		// #ifdef MP-WEIXIN
		onShareAppMessage(info) {
			return {
				title: '源享住',
				path: 'pages/login/login',
				imageUrl: "/static/logo.png"
			}
		}
		// #endif
	}
</script>

<style lang="scss">
	.info-item {
		margin: 20rpx;
		display: flex;
	}

	.btn-container {
		margin: 40rpx;
	}
</style>