|
|
@@ -0,0 +1,222 @@
|
|
|
+<template>
|
|
|
+ <view class="page" :style="{'height':(h-th)+'px','padding-top':mt+'px'}">
|
|
|
+ <c-nav-bar title="订单详情" :showIcon="false" :titleStyle="titleStyle"></c-nav-bar>
|
|
|
+ <view class="body">
|
|
|
+ <!-- 个人信息 -->
|
|
|
+ <view class="uname">
|
|
|
+ <text style="margin-right: 20rpx;">{{orderInfo.guestName}}</text>
|
|
|
+ <text>{{orderInfo.guestPhone}}</text>
|
|
|
+ </view>
|
|
|
+ <!-- 房间信息 -->
|
|
|
+ <view class="room">
|
|
|
+ <!-- 房间/预定信息 -->
|
|
|
+ <view class="reservations">
|
|
|
+ <text style="font-size: 30rpx; color: #333333; font-weight: 700;">{{orderInfo.houseBaseName}}-{{orderInfo.roomNumber}}</text>
|
|
|
+ <text style="font-size: 24rpx; color: #39CE77;" v-if="isOrderPanding">{{getStatusText()}}</text>
|
|
|
+ </view>
|
|
|
+ <!-- 时间/价格 -->
|
|
|
+ <view class="time-price">
|
|
|
+ <text style="font-size: 30rpx; color: #777;">{{orderInfo.arriveDate}}入住 {{orderInfo.num}}晚</text>
|
|
|
+ <text style="font-size: 30rpx; color: #245BED;">￥{{orderInfo.orderAmount}}</text>
|
|
|
+ </view>
|
|
|
+ <!-- 入住人数 -->
|
|
|
+ <view class="house-person">
|
|
|
+ <text style="font-size: 30rpx; color: #777;">入住人</text>
|
|
|
+ <view class="right" >
|
|
|
+ <text style="font-size: 30rpx; color: #777; ">{{orderInfo.checkInNums}}人 </text>
|
|
|
+ <u-icon name="arrow-right" @click.native="goStayCheck"></u-icon>
|
|
|
+ <!-- <u-icon name="arrow-right" ></u-icon> -->
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 订单信息 -->
|
|
|
+
|
|
|
+ <u-cell-group :border="false"
|
|
|
+ customStyle="background-color: #fff;border-radius: 16rpx;width: 690rpx;margin:0 auto;">
|
|
|
+ <u-cell>
|
|
|
+ <text slot="icon" style="font-size: 30rpx; margin-right: 50rpx;">订单号</text>
|
|
|
+ <view slot="title" class="title">
|
|
|
+ <text>{{orderInfo.orderCode}}</text>
|
|
|
+ </view>
|
|
|
+ </u-cell>
|
|
|
+ <u-cell>
|
|
|
+ <text slot="icon" style="font-size: 30rpx; margin-right: 20rpx;">创建时间</text>
|
|
|
+ <view slot="title" class="title">
|
|
|
+ <text>{{orderInfo.orderTime}}</text>
|
|
|
+ </view>
|
|
|
+ </u-cell>
|
|
|
+ <u-cell>
|
|
|
+ <text slot="icon" style="font-size: 30rpx; margin-right: 20rpx;">办理员工</text>
|
|
|
+ <view slot="title" class="title">
|
|
|
+ <text>何伟婷</text>
|
|
|
+ </view>
|
|
|
+ </u-cell>
|
|
|
+ <u-cell>
|
|
|
+ <text slot="icon" style="font-size: 30rpx; margin-right: 20rpx;">取消原因</text>
|
|
|
+ <view slot="title" class="title">
|
|
|
+ <text>-</text>
|
|
|
+ </view>
|
|
|
+ </u-cell>
|
|
|
+ <u-cell>
|
|
|
+ <text slot="icon" style="font-size: 30rpx; margin-right: 80rpx;">备注</text>
|
|
|
+ <view slot="title" class="title">
|
|
|
+ <text>-</text>
|
|
|
+ </view>
|
|
|
+ </u-cell>
|
|
|
+
|
|
|
+
|
|
|
+ </u-cell-group>
|
|
|
+ <!-- 按钮 -->
|
|
|
+ <view class="button">
|
|
|
+ <button class="edit">编辑订单</button>
|
|
|
+ <button class="goRoom">办理入住</button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default{
|
|
|
+ data(){
|
|
|
+ return {
|
|
|
+ orderId:'1744697594837209090',
|
|
|
+ orderInfo:[]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(){
|
|
|
+ this.getOrderInfo()
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ // 获取数据
|
|
|
+ getOrderInfo(){
|
|
|
+ this.$api.get(`/merchant/hotel/order/getMerchantOrderInfo/${this.orderId}`,{
|
|
|
+ orderId:'1744697594837209090',
|
|
|
+ }).then((res)=>{
|
|
|
+ // console.log(res)
|
|
|
+ if(res.data.code==0){
|
|
|
+ this.orderInfo = res.data.data
|
|
|
+ console.log(this.orderInfo)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 客房状态
|
|
|
+ getStatusText(){
|
|
|
+ if(this.orderInfo.orderStatus === -1){
|
|
|
+ return '待确定'
|
|
|
+ }else if(this.orderInfo.orderStatus ===1){
|
|
|
+ return '已预订'
|
|
|
+ }else if(this.orderInfo.orderStatus ===2){
|
|
|
+ return '已入住'
|
|
|
+ }else if(this.orderInfo.orderStatus ===3){
|
|
|
+ return '已退房'
|
|
|
+ }else if(this.orderInfo.orderStatus ===4){
|
|
|
+ return '已取消'
|
|
|
+ }else{
|
|
|
+ return '状态异常'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ goStayCheck(){
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/house/stayCheck'
|
|
|
+ })
|
|
|
+ // console.log(1111)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed:{
|
|
|
+ isOrderPanding(){
|
|
|
+ return this.orderInfo.orderStatus === 1
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ .page {
|
|
|
+ background: #F3F4F4;
|
|
|
+ padding-bottom: 260rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ overflow-y: auto;
|
|
|
+ overflow-x: auto;
|
|
|
+ }
|
|
|
+ .body{
|
|
|
+ padding-top: 20rpx;
|
|
|
+ padding-left: 30rpx;
|
|
|
+ padding-right: 30rpx;
|
|
|
+ }
|
|
|
+ .uname{
|
|
|
+ width: 665rpx;
|
|
|
+ height: 100rpx;
|
|
|
+ line-height: 100rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ padding-left: 30rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+ .room{
|
|
|
+ margin-top: 20rpx;
|
|
|
+ width: 92%;
|
|
|
+ height: 246rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ padding: 30rpx;
|
|
|
+ }
|
|
|
+ .orderTip{
|
|
|
+ padding: 30rpx;
|
|
|
+ padding-top: 0;
|
|
|
+ width: 690rpx;
|
|
|
+ height: 514rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 10rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+ .button{
|
|
|
+ position: fixed;
|
|
|
+ bottom: 120rpx;
|
|
|
+ height: 96rpx;
|
|
|
+ width: 690rpx;
|
|
|
+ // background-color: teal;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ }
|
|
|
+ .goRoom{
|
|
|
+ // border-radius: ;
|
|
|
+ width: 330rpx;
|
|
|
+ height: 96rpx;
|
|
|
+ border-radius: 48rpx;
|
|
|
+ font-size: 34rpx;
|
|
|
+ background-color: #1372FF;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ .edit{
|
|
|
+ width: 330rpx;
|
|
|
+ height: 96rpx;
|
|
|
+ border-radius: 48rpx;
|
|
|
+ font-size: 34rpx;
|
|
|
+ background-color: #E2EDFC;
|
|
|
+ color: #1372FF;
|
|
|
+ }
|
|
|
+ .reservations{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ .time-price{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-top: 30rpx;
|
|
|
+ }
|
|
|
+ .house-person{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-top: 30rpx;
|
|
|
+ }
|
|
|
+ .right{
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+</style>
|
lifanzai