834 lines
30 KiB
Vue
834 lines
30 KiB
Vue
<template>
|
||
<view class="waper" v-if="detail">
|
||
<u-navbar :autoBack="true" :placeholder="true" bgColor="#03AE80" leftIconColor="#fff">
|
||
<view slot='center' style="color: #fff;">
|
||
订单详情
|
||
</view>
|
||
</u-navbar>
|
||
<view class="top_box">
|
||
<view class="title">
|
||
<view class="left">
|
||
<u-icon :name="detail.icon" color="#fff" size="56rpx" />
|
||
<view style="margin-left: 12rpx;">{{detail.status}}</view>
|
||
</view>
|
||
<view class="right" v-if="detail.paymentType == '0' && timeNum > 0">{{secondsToTime(timeNum)}}</view>
|
||
</view>
|
||
<view class="label">{{detail.text}}</view>
|
||
<view class="btn_box">
|
||
<view class="btn pay" v-if="payFlag" @click="goPay">去支付</view>
|
||
<view class="btn" v-if="cancelFlag" @click="cancel">取消订单</view>
|
||
<view class="btn" v-if="refundFlag" @click="apply">申请退款</view>
|
||
<view class="btn" v-if="delFlag" @click="del">删除订单</view>
|
||
<view class="btn" v-if="reserveFlag" @click="reserve">再次预定</view>
|
||
<view class="btn" v-if="contactFlag" @click="showPopupTel = true">联系酒店</view>
|
||
<view class="btn" v-if="againFlag" @click="apply">再次申请</view>
|
||
<view class="btn" v-if="progressFlag" @click="refund">退款进度</view>
|
||
</view>
|
||
</view>
|
||
<view class="row" v-if="cancelRuleFlag">
|
||
<view class="left">
|
||
<view class="label">取消规则</view>
|
||
<view class="rule">{{roomDetail.cancelRuleTypeDesc}}</view>
|
||
</view>
|
||
<view class="right" @click="showPopupRead = true">
|
||
<view class="text">取消规则</view>
|
||
<u-icon name="arrow-right" color="#03AE80" size="28rpx" />
|
||
</view>
|
||
</view>
|
||
<view class="row" v-if="onlinePaymentFlag">
|
||
<view class="left">
|
||
<view class="label">在线支付</view>
|
||
<view class="price"><text class="unit">￥</text>{{ detail.totalAmount }}</view>
|
||
</view>
|
||
<view class="right" @click="showPopupDetailed = true">
|
||
<view class="text">费用明细</view>
|
||
<u-icon name="arrow-right" color="#03AE80" size="28rpx" />
|
||
</view>
|
||
</view>
|
||
<view class="hotel">
|
||
<view class="con">
|
||
<image class="img" :src="$utils.setImgUrl(detail.zdyHotelHomestayVO.coverImage)" mode=""></image>
|
||
<view class="msg">
|
||
<view class="h4" @click="goHotelDetail">
|
||
<view class="name">{{ hotelDetail.name }}</view>
|
||
<u-icon name="arrow-right" color="#999" size="28rpx" />
|
||
</view>
|
||
<view class="address">{{ hotelDetail.address }}</view>
|
||
</view>
|
||
</view>
|
||
<view class="col">
|
||
<view class="btn" @click="openLocation">
|
||
<image src="../../static/home/location.png" mode=""></image>
|
||
<view class="label">地图/导航</view>
|
||
</view>
|
||
<view class="btn" @click="showPopupTel = true">
|
||
<image src="../../static/image/phone.png" mode=""></image>
|
||
<view class="label">联系酒店</view>
|
||
</view>
|
||
<view class="line"></view>
|
||
</view>
|
||
</view>
|
||
<view class="place">
|
||
<view class="time" v-if="detail.stayType !== 'HOURLY'">
|
||
<view class="time1">
|
||
{{startDatePage}}（{{startWeek}}）
|
||
——
|
||
{{stopDatePage}}（{{stopWeek}}）
|
||
</view>
|
||
<view class="time2">共{{nightsPage}}晚</view>
|
||
</view>
|
||
<view class="time" v-if="detail.stayType == 'HOURLY'">
|
||
<view class="time1">
|
||
{{hourDate}} {{hourTimeSlot}}
|
||
</view>
|
||
</view>
|
||
<view class="model">
|
||
<view>{{ roomDetail.level2Name }}</view>
|
||
<view @click="roomInfo">
|
||
<view>房型信息</view>
|
||
<u-icon name="arrow-right" color="#999" size="28rpx" />
|
||
</view>
|
||
</view>
|
||
<view class="tags_box">
|
||
<view class="tag" v-if="roomDetail.bedType">{{roomDetail.bedType}}</view>
|
||
<view class="tag" v-if="roomDetail.limitedLivePerson">{{roomDetail.limitedLivePerson}}人入住</view>
|
||
<view class="tag" v-if="roomDetail.window">{{roomDetail.window}}</view>
|
||
<view class="tag" v-if="roomDetail.breakfast">{{roomDetail.breakfast}}</view>
|
||
</view>
|
||
<view class="row1">
|
||
<view class="key">入住人</view>
|
||
<view class="value">{{ detail.contactNames }}</view>
|
||
</view>
|
||
<view class="row1">
|
||
<view class="key">联系电话</view>
|
||
<view class="value">{{ detail.contactMobile }}</view>
|
||
</view>
|
||
<view class="row1">
|
||
<view class="key">预计到店</view>
|
||
<view class="value">{{ reachDate }} {{reachTime}}前</view>
|
||
</view>
|
||
</view>
|
||
<view class="order">
|
||
<view class="label">订单信息</view>
|
||
<view class="row2">
|
||
<view class="key">订单编号</view>
|
||
<view class="value">
|
||
<view>{{ detail.orderCode }}</view>
|
||
<view></view>
|
||
<view @click="copyCode(detail.orderCode)">复制</view>
|
||
</view>
|
||
</view>
|
||
<view class="row2">
|
||
<view class="key">下单时间</view>
|
||
<view class="value">{{ detail.createTime }}</view>
|
||
</view>
|
||
<view class="row2" v-if="detail.paymentTime">
|
||
<view class="key">付款时间</view>
|
||
<view class="value">{{ detail.paymentTime }}</view>
|
||
</view>
|
||
<view class="row2" v-if="detail.paymentTime">
|
||
<view class="key">付款方式</view>
|
||
<view class="value">{{ detail.paymentMethod_dictText }}</view>
|
||
</view>
|
||
<view class="row2" v-if="detail.cancelTime">
|
||
<view class="key">取消时间</view>
|
||
<view class="value">{{ detail.cancelTime }}</view>
|
||
</view>
|
||
</view>
|
||
<u-popup :show="showPopupRead" :round="10" mode="bottom">
|
||
<view class="read_con">
|
||
<view class="head">
|
||
<view class="title">订房必读</view>
|
||
<view class="close" @click="showPopupRead = false">
|
||
<u-icon name="close" color="#000000" size="36rpx" />
|
||
</view>
|
||
</view>
|
||
<scroll-view scroll-y class="scroll">
|
||
<view class="row3">
|
||
<view>取消规则</view>
|
||
<view v-if="roomDetail.cancelRuleType == 3">
|
||
{{cancelRule}}
|
||
</view>
|
||
<view v-else>{{roomDetail.cancelRuleTypeDesc}}</view>
|
||
</view>
|
||
<view class="row3">
|
||
<view>入离时间</view>
|
||
<view>入住时间：{{hotelDetail.checkInTime}}以后 离店时间：{{hotelDetail.leaveTime}}以前</view>
|
||
</view>
|
||
<view class="row3">
|
||
<view>发票</view>
|
||
<view>
|
||
<text>{{hotelDetail.invoice == 'N' ? '不' : ''}}</text>
|
||
可开具增值税普通/专用发票
|
||
</view>
|
||
</view>
|
||
<view class="row3">
|
||
<view>宠物</view>
|
||
<view>
|
||
<text>{{hotelDetail.pet == 'N' ? '不' : ''}}</text>
|
||
允许携带宠物。
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</u-popup>
|
||
<u-popup :show="showPopupDetailed" :round="10" mode="bottom">
|
||
<view class="detailed_con">
|
||
<view class="head">
|
||
<view class="title">明细</view>
|
||
<view class="close" @click="showPopupDetailed = false">
|
||
<u-icon name="close" color="#000000" size="36rpx" />
|
||
</view>
|
||
</view>
|
||
<view class="add">
|
||
<view class="label">订单合计</view>
|
||
<view class="all">共<text>¥{{detail.totalAmount}}</text></view>
|
||
</view>
|
||
<view class="row4">
|
||
<view class="col">
|
||
<view class="key">房费 </view>
|
||
<view class="value">￥{{detail.totalAmount}}</view>
|
||
</view>
|
||
<view class="col" v-for="(item, index) in detail.roomChargeDetails" :key="index">
|
||
<view class="key">{{item.stayDate}}</view>
|
||
<view class="value">{{item.roomQuantity}}x ¥{{item.roomPrice}}</view>
|
||
</view>
|
||
<view class="col" v-if="detail.stayType !== 'HOURLY'">
|
||
<view class="key">{{detail.outDateTime.split(' ')[0]}}</view>
|
||
<view class="value"></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
<u-popup :show="showPopupTel" :round="10" mode="bottom">
|
||
<view class="tel_con">
|
||
<view class="head">
|
||
<view class="title">商家电话</view>
|
||
<view class="close" @click="showPopupTel = false">
|
||
<u-icon name="close" color="#000000" size="36rpx" />
|
||
</view>
|
||
</view>
|
||
<view class="tel" @click="contact(hotelDetail.phone)">{{ hotelDetail.phone }}</view>
|
||
</view>
|
||
</u-popup>
|
||
<u-popup :show="showPopupDelete" :round="10" mode="center">
|
||
<view class="delete_con">
|
||
<view class="title">确认{{popupLabel}}订单？</view>
|
||
<view class="tips">订单{{popupLabel}}后将无法恢复</view>
|
||
<view class="btn-box">
|
||
<view class="btn cancel" @click="showPopupDelete = false">取消</view>
|
||
<view class="btn confirm" @click="popupConfirm">确认</view>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
<u-popup :show="showPopupType" :round="10" mode="bottom">
|
||
<view class="type_con">
|
||
<view class="close" @click="showPopupType = false">
|
||
<u-icon name="close" color="#fff" size="36rpx" />
|
||
</view>
|
||
<scroll-view scroll-y class="scroll">
|
||
<view class="swiper">
|
||
<swiper :autoplay="true" :current="current" circular @change="changeSwiper">
|
||
<swiper-item v-for="(i, index) in roomDetail.image" :key="index">
|
||
<image :src="$utils.setImgUrl(i)" mode=""></image>
|
||
</swiper-item>
|
||
</swiper>
|
||
<view class="current">{{current + 1}}/{{roomDetail.imageLength}}</view>
|
||
</view>
|
||
<view class="specs">
|
||
<view class="title">{{roomDetail.level2Name}}</view>
|
||
<view class="list_box">
|
||
<view class="item" v-if="roomDetail.area">
|
||
<image src="../../static/image/hotel/area.png" mode=""></image>
|
||
<view>{{roomDetail.area}}㎡</view>
|
||
</view>
|
||
<view class="item" v-if="roomDetail.bedType">
|
||
<image src="../../static/image/hotel/bedType.png" mode=""></image>
|
||
<view>{{roomDetail.bedType}}</view>
|
||
</view>
|
||
<view class="item" v-if="roomDetail.window">
|
||
<image src="../../static/image/hotel/window.png" mode=""></image>
|
||
<view>{{roomDetail.window}}</view>
|
||
</view>
|
||
<view class="item" v-if="roomDetail.wifi">
|
||
<image src="../../static/image/hotel/wifi.png" mode=""></image>
|
||
<view>{{roomDetail.wifi}}</view>
|
||
</view>
|
||
<view class="item" v-if="roomDetail.floor">
|
||
<image src="../../static/image/hotel/floor.png" mode=""></image>
|
||
<view>{{roomDetail.floor}}层</view>
|
||
</view>
|
||
<view class="item" v-if="roomDetail.breakfast">
|
||
<image src="../../static/image/hotel/breakfast.png" mode=""></image>
|
||
<view>{{roomDetail.breakfast}}</view>
|
||
</view>
|
||
<view class="item" v-if="roomDetail.limitedLivePerson">
|
||
<image src="../../static/image/hotel/limitedLivePerson.png" mode=""></image>
|
||
<view>{{roomDetail.limitedLivePerson}}人</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="occupying"></view>
|
||
<view class="policy">
|
||
<view class="title">商家政策</view>
|
||
<view class="list">
|
||
<view class="item">
|
||
<view class="label">重要通知</view>
|
||
<u-parse :content="hotelDetail.importantNotice"></u-parse>
|
||
</view>
|
||
<view class="item">
|
||
<view class="label">入住方式</view>
|
||
<view class="text">{{hotelDetail.checkInWay}}</view>
|
||
</view>
|
||
<view class="item">
|
||
<view class="label">取消规则</view>
|
||
<view class="text" v-if="roomDetail.cancelRuleType == 3">
|
||
{{cancelRule}}
|
||
</view>
|
||
<view class="text" v-else>{{roomDetail.cancelRuleTypeDesc}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</u-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data () {
|
||
return {
|
||
id: '',
|
||
detail: null,
|
||
hotelId: '',
|
||
hotelDetail: {},
|
||
roomId: '',
|
||
roomDetail: {},
|
||
showPopupRead: false,
|
||
showPopupDetailed: false,
|
||
showPopupTel: false,
|
||
showPopupDelete: false,
|
||
showPopupType: false,
|
||
current: 0,
|
||
configData: null,
|
||
timeNum: 0,
|
||
timer: null,
|
||
payFlag: false,
|
||
cancelFlag: false,
|
||
reserveFlag: false,
|
||
contactFlag: false,
|
||
againFlag: false,
|
||
delFlag: false,
|
||
refundFlag: false,
|
||
progressFlag: false,
|
||
cancelRuleFlag: true,
|
||
onlinePaymentFlag: true,
|
||
popupLabel: '',
|
||
|
||
// 到店日期
|
||
reachDate: '',
|
||
// 到店时间
|
||
reachTime: '',
|
||
|
||
// 全日房
|
||
startDatePage: '',
|
||
stopDatePage: '',
|
||
nightsPage: null,
|
||
startWeek: '',
|
||
stopWeek: '',
|
||
weekList: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
|
||
|
||
// 钟点房
|
||
// 日期
|
||
hourDate: '',
|
||
// 入住时段
|
||
hourTimeSlot: '',
|
||
cancelRule: ''
|
||
}
|
||
},
|
||
onShow() {
|
||
this.getDetail();
|
||
},
|
||
onLoad (options) {
|
||
this.id = options.id;
|
||
this.getDetail();
|
||
},
|
||
onUnload () {
|
||
clearInterval(this.timer);
|
||
this.timer = null;
|
||
},
|
||
methods: {
|
||
async getDetail() {
|
||
let res=await this.$http.hotelOrderDetail(this.id);
|
||
this.detail=res.data;
|
||
this.hotelId = this.detail.hotelHomestayId;
|
||
this.roomId = this.detail.roomClassifyId;
|
||
|
||
if (this.detail.stayType == 'HOURLY') {
|
||
this.hourDate = this.$moment(this.detail.inDateTime).format("MM月DD日");
|
||
this.hourTimeSlot = this.detail.inDateTime.split(' ')[1].slice(0, 5) + '-' + this.detail.outDateTime.split(' ')[1].slice(0, 5);
|
||
} else {
|
||
this.startDatePage = this.$moment(this.detail.inDateTime).format("MM月DD日");
|
||
this.stopDatePage = this.$moment(this.detail.outDateTime).format("MM月DD日");
|
||
this.nightsPage = this.$moment(this.detail.outDateTime.split(' ')[0]).diff(this.$moment(this.detail.inDateTime.split(' ')[0]), 'days');
|
||
this.startWeek = this.weekList[this.$moment(this.detail.inDateTime).day()];
|
||
this.stopWeek = this.weekList[this.$moment(this.detail.outDateTime).day()];
|
||
}
|
||
|
||
if (this.detail.paymentType == '0') {
|
||
this.configData = uni.getStorageSync('configData');
|
||
let creaetdTime = parseInt(new Date(this.detail.createTime).getTime() / 1000);
|
||
let nowtime = parseInt(new Date().getTime() / 1000);
|
||
if ((creaetdTime + this.configData.expirationTime * 60) >= nowtime) {
|
||
this.timeNum = (creaetdTime + this.configData.expirationTime * 60) - nowtime;
|
||
this.setIntervalFn()
|
||
} else {
|
||
this.detail.paymentType = '2';
|
||
}
|
||
}
|
||
|
||
this.getOrderStatus();
|
||
this.getHotelDetail();
|
||
this.getRoomDeatil();
|
||
},
|
||
getOrderStatus() {
|
||
this.payFlag = false;
|
||
this.cancelFlag = false;
|
||
this.reserveFlag = false;
|
||
this.contactFlag = false;
|
||
this.againFlag = false;
|
||
this.delFlag = false;
|
||
this.refundFlag = false;
|
||
this.progressFlag = false;
|
||
this.cancelRuleFlag = true;
|
||
this.onlinePaymentFlag = true;
|
||
if (this.detail.stayType == 'HOURLY') {
|
||
this.reachDate = this.$moment(this.detail.inDateTime).format("MM月DD日");
|
||
this.reachTime = this.detail.inDateTime.split(' ')[1].slice(0, 5);
|
||
} else {
|
||
let currentDate = this.detail.estimatedArrivalDateTime.split(' ')[0];
|
||
this.reachDate = this.$moment(currentDate).format("MM月DD日");
|
||
this.reachTime = this.detail.estimatedArrivalDateTime.split(' ')[1].slice(0, 5);
|
||
}
|
||
if (this.detail.refundStatus == '1') {
|
||
this.detail.icon = 'checkmark-circle';
|
||
this.detail.status = '审核中';
|
||
this.detail.text = '您已成功取消了您的订单，系统正在审核';
|
||
this.contactFlag = true;
|
||
this.progressFlag = true;
|
||
this.cancelRuleFlag = false;
|
||
} else if (this.detail.refundStatus == '100') {
|
||
this.detail.icon = 'error-circle';
|
||
this.detail.status = '已驳回';
|
||
this.detail.text = '您申请的取消订单系统已被驳回，请重新申请或联系酒店前台';
|
||
this.contactFlag = true;
|
||
this.againFlag = true;
|
||
this.cancelRuleFlag = false;
|
||
} else if (this.detail.refundStatus == '2') {
|
||
this.detail.icon = 'checkmark-circle';
|
||
this.detail.status = '退款中';
|
||
this.detail.text = '系统正在退款中，请耐心等待';
|
||
this.contactFlag = true;
|
||
this.progressFlag = true;
|
||
this.cancelRuleFlag = false;
|
||
} else if (this.detail.refundStatus == '200') {
|
||
this.detail.icon = 'checkmark-circle';
|
||
this.detail.status = '已取消';
|
||
this.detail.text = '您已成功取消了您的订单';
|
||
this.reserveFlag = true;
|
||
this.progressFlag = true;
|
||
this.cancelRuleFlag = false;
|
||
} else if (this.detail.refundStatus == '4') {
|
||
this.detail.icon = 'error-circle';
|
||
this.detail.status = '退款失败';
|
||
this.detail.text = '对不起，您的订单退款失败，请再次申请或联系酒店前台';
|
||
this.contactFlag = true;
|
||
this.againFlag = true;
|
||
this.cancelRuleFlag = false;
|
||
} else if (this.detail.stayStatus == 'BOOKED') {
|
||
this.detail.icon = 'checkmark-circle';
|
||
this.detail.status = '预定成功，等待您的入住';
|
||
this.detail.text = '房间将为你保留至预计在' + this.reachDate + this.reachTime + '前';
|
||
this.refundFlag = true;
|
||
this.reserveFlag = true;
|
||
} else if (this.detail.stayStatus == 'CHECKED_IN') {
|
||
this.detail.icon = 'checkmark-circle';
|
||
this.detail.status = '已入住';
|
||
this.detail.text = '订单已入住，欢迎您再次预定';
|
||
this.reserveFlag = true;
|
||
this.cancelRuleFlag = false;
|
||
} else if (this.detail.stayStatus == 'CHECKED_OUT') {
|
||
this.detail.icon = 'checkmark-circle';
|
||
this.detail.status = '已完成';
|
||
this.detail.text = '订单已完成，欢迎您再次预定';
|
||
this.delFlag = true;
|
||
this.reserveFlag = true;
|
||
this.cancelRuleFlag = false;
|
||
this.onlinePaymentFlag = false;
|
||
} else if ((this.detail.stayStatus == 'CANCELED' || this.detail.paymentType == '1') && !this.detail.refundStatus) {
|
||
this.detail.icon = 'checkmark-circle';
|
||
this.detail.status = '已取消';
|
||
this.detail.text = '您已成功取消了您的订单';
|
||
this.reserveFlag = true;
|
||
this.cancelRuleFlag = false;
|
||
} else if (this.detail.paymentType == '2') {
|
||
this.detail.icon = 'error-circle';
|
||
this.detail.status = '支付超时';
|
||
this.detail.text = '订单已超时可支付时间，请重新下单';
|
||
this.reserveFlag = true;
|
||
this.cancelRuleFlag = false;
|
||
} else if (this.detail.paymentType == '0') {
|
||
this.detail.icon = 'clock';
|
||
this.detail.status = '待付款';
|
||
this.detail.text = '该订单需要尽快支付，超时后订单将自动取消';
|
||
this.payFlag = true;
|
||
this.cancelFlag = true;
|
||
this.reserveFlag = true;
|
||
}
|
||
},
|
||
setIntervalFn () {
|
||
clearInterval(this.timer);
|
||
this.timer = setInterval(() => {
|
||
if (this.timeNum <= 0) {
|
||
clearInterval(this.timer)
|
||
// this.getDetail();
|
||
this.detail.paymentType = '2';
|
||
this.getOrderStatus();
|
||
}
|
||
this.timeNum --;
|
||
}, 1000)
|
||
},
|
||
secondsToTime(seconds) {
|
||
const minutes = Math.floor((seconds % 3600) / 60);
|
||
const remainingSeconds = seconds % 60;
|
||
return (minutes >= 10 ? minutes : '0' + minutes) + ":" + (remainingSeconds >= 10 ? remainingSeconds : '0' + remainingSeconds);
|
||
},
|
||
// 酒店详情
|
||
async getHotelDetail() {
|
||
let res=await this.$http.homestayId(this.hotelId);
|
||
this.hotelDetail = res.data;
|
||
},
|
||
// 房型详情
|
||
async getRoomDeatil() {
|
||
let params = {
|
||
roomClassifyId: this.roomId,
|
||
startTime: this.detail.inDateTime.split(' ')[0],
|
||
endTime: this.detail.outDateTime.split(' ')[0]
|
||
}
|
||
let res=await this.$http.classifyDetail(params);
|
||
res.data.image = res.data.image.split(',');
|
||
this.roomDetail = res.data;
|
||
this.roomDetail.imageLength = this.roomDetail.image.length;
|
||
|
||
if (this.roomDetail.cancelRuleType == 3) {
|
||
let cancelRuleContent = JSON.parse(this.roomDetail.cancelRuleContent);
|
||
if (Number(cancelRuleContent[0].handlingFee)) {
|
||
this.cancelRule = `入住当天${cancelRuleContent[0].start}后取消，将收取额外费用`;
|
||
} else {
|
||
this.cancelRule = `入住当天${cancelRuleContent[0].end}前可免费取消，超期将收取额外费用`;
|
||
}
|
||
}
|
||
},
|
||
changeSwiper(e) {
|
||
this.current = e.detail.current;
|
||
},
|
||
goHotelDetail() {
|
||
uni.navigateTo({ url: `/pages/hotel/detail?id=${this.hotelId}` });
|
||
},
|
||
openLocation() {
|
||
if (this.hotelDetail.latitude && this.hotelDetail.longitude) {
|
||
let latitude = this.hotelDetail.latitude;
|
||
let longitude = this.hotelDetail.longitude;
|
||
uni.openLocation({
|
||
latitude: Number(latitude),
|
||
longitude: Number(longitude),
|
||
name: this.hotelDetail.name,
|
||
address: this.hotelDetail.address,
|
||
})
|
||
}
|
||
},
|
||
roomInfo() {
|
||
this.showPopupType = true;
|
||
},
|
||
copyCode (code) {
|
||
uni.setClipboardData({
|
||
data: code,
|
||
success: () => {
|
||
uni.showToast({ mask: true, title: '内容已复制到剪切板', icon: 'none' })
|
||
}
|
||
})
|
||
},
|
||
// 再次预定
|
||
reserve() {
|
||
uni.navigateTo({ url: `/pages/hotel/detail?id=${this.hotelId}` });
|
||
},
|
||
// 取消
|
||
cancel() {
|
||
this.showPopupDelete = true;
|
||
this.popupLabel = '取消';
|
||
},
|
||
// 删除
|
||
del() {
|
||
this.showPopupDelete = true;
|
||
this.popupLabel = '删除';
|
||
},
|
||
async popupConfirm() {
|
||
let info = null;
|
||
if (this.popupLabel === '删除') {
|
||
info = await this.$http.delHotelOrder(this.detail.id);
|
||
this.showPopupDelete = false;
|
||
uni.navigateBack();
|
||
} else {
|
||
let params = {
|
||
orderId: this.detail.id
|
||
}
|
||
info = await this.$http.hotelOrderCancel(params);
|
||
this.showPopupDelete = false;
|
||
this.getDetail();
|
||
}
|
||
},
|
||
contact(e) {
|
||
uni.makePhoneCall({ phoneNumber: e, fail: () => {} });
|
||
},
|
||
// 退款进度
|
||
refund() {
|
||
uni.navigateTo({ url: `/pages/hotelOrder/refundProgress?id=${this.id}` });
|
||
},
|
||
// 申请退款
|
||
async apply() {
|
||
let res = await this.$http.computePenaltyFee(this.detail.id);
|
||
if (res.errMsg) {
|
||
uni.$u.toast(res.errMsg);
|
||
} else {
|
||
uni.navigateTo({ url: `/pages/hotelOrder/cancelOrder?id=${this.detail.id}&amount=${res.data}&refund=${res.refund}` });
|
||
}
|
||
},
|
||
// 去支付
|
||
goPay() {
|
||
uni.navigateTo({ url: `/pages/hotel/submitOrder?id=${this.detail.id}&hotelId=${this.hotelId}&source=order` })
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.waper { min-height: 100vh; background-color: #F6F6F6; padding-bottom: 22rpx; box-sizing: border-box; }
|
||
.top_box {
|
||
background: #03AE80; border-radius: 0 0 50rpx 0; padding: 24rpx; box-sizing: border-box;
|
||
.title {
|
||
display: flex; align-items: center; justify-content: space-between;
|
||
.left {
|
||
display: flex; align-items: center;
|
||
view { font-weight: 500; font-size: 48rpx; color: #FFFFFF; }
|
||
}
|
||
.right { font-weight: 500; font-size: 36rpx; color: #FFFFFF; }
|
||
}
|
||
.label { margin-top: 12rpx; font-size: 26rpx; color: #FFFFFF; }
|
||
.btn_box {
|
||
margin-top: 24rpx; display: flex; align-items: center; justify-content: space-between;
|
||
.btn {
|
||
flex: 1; height: 80rpx; background: #FFFFFF; border-radius: 4rpx; line-height: 80rpx; text-align: center; font-size: 28rpx; color: #03AE80; margin-right: 20rpx;
|
||
&:last-child { margin-right: 0; }
|
||
}
|
||
.pay { color: #EE595A; }
|
||
}
|
||
}
|
||
.row {
|
||
margin: 22rpx 24rpx 0; height: 90rpx; background: #FFFFFF; border-radius: 10rpx; display: flex; align-items: center; justify-content: space-between; padding: 0 24rpx; box-sizing: border-box;
|
||
.left {
|
||
display: flex; align-items: center;
|
||
.label { font-size: 28rpx; color: rgba(0,0,0,0.45); margin-right: 24rpx; }
|
||
.rule { font-size: 28rpx; color: rgba(0,0,0,0.65); }
|
||
.price {
|
||
font-weight: bold; font-size: 32rpx; color: #EE595A;
|
||
.unit { font-weight: 400; font-size: 24rpx; }
|
||
}
|
||
}
|
||
.right {
|
||
display: flex; align-items: center;
|
||
.text { font-size: 28rpx; color: #03AE80; margin-right: 8rpx; }
|
||
}
|
||
}
|
||
.hotel {
|
||
margin: 22rpx 24rpx 0; background: #FFFFFF; border-radius: 10rpx; padding: 32rpx 24rpx; box-sizing: border-box;
|
||
.con {
|
||
display: flex; align-items: center;
|
||
.img { width: 110rpx; height: 110rpx; margin-right: 24rpx; border-radius: 8rpx; }
|
||
.msg {
|
||
flex: 1;
|
||
.h4 {
|
||
display: flex; align-items: center;
|
||
.name { font-weight: 500; font-size: 32rpx; color: rgba(0,0,0,0.85); margin-right: 12rpx; }
|
||
}
|
||
.address { margin-top: 10rpx; font-size: 24rpx; color: rgba(0,0,0,0.45); }
|
||
}
|
||
}
|
||
.col {
|
||
margin-top: 24rpx; position: relative; display: flex; height: 38rpx;
|
||
.btn {
|
||
width: 50%; display: inline-block; text-align: center; display: flex; align-items: center; justify-content: center; height: 100%;
|
||
image{ width: 38rpx; height: 38rpx; }
|
||
.label { font-size: 24rpx; color: #000000; margin-left: 20rpx; display: inline-block; }
|
||
}
|
||
.line { width: 1rpx; height: 24rpx; background-color: #ECEAEA; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
|
||
}
|
||
}
|
||
.place {
|
||
margin: 22rpx 24rpx 0; background: #FFFFFF; border-radius: 10rpx; padding: 32rpx 24rpx; box-sizing: border-box;
|
||
.time {
|
||
display: flex; align-items: center; justify-content: space-between;
|
||
.time1 { font-weight: 500; font-size: 28rpx; color: rgba(0,0,0,0.85); }
|
||
.time2 { font-size: 26rpx; color: rgba(0,0,0,0.65); }
|
||
}
|
||
.model {
|
||
display: flex; align-items: center; justify-content: space-between; margin-top: 20rpx;
|
||
view {
|
||
&:first-child { font-weight: 500; font-size: 32rpx; color: rgba(0,0,0,0.85); }
|
||
&:last-child {
|
||
display: flex; align-items: center;
|
||
view { font-size: 24rpx; color: rgba(0,0,0,0.45); margin-right: 4rpx; }
|
||
}
|
||
}
|
||
}
|
||
.tags_box {
|
||
display: flex; align-items: center; margin-top: 13rpx; padding-bottom: 24rpx; border-bottom: 1rpx solid #ECEAEA;
|
||
.tag {
|
||
padding: 0 16rpx; position: relative; font-size: 24rpx; color: rgba(0,0,0,0.45);
|
||
&::after{ content: ""; width: 1rpx; height: 23rpx; background: #ECEAEA; position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
|
||
&:first-child { padding-left: 0; }
|
||
&:last-child {
|
||
padding-right: 0;
|
||
&::after {display: none;}
|
||
}
|
||
}
|
||
}
|
||
.row1 {
|
||
margin-top: 24rpx; display: flex; align-items: center;
|
||
.key { width: 176rpx; font-size: 26rpx; color: rgba(0,0,0,0.65); }
|
||
.value { font-size: 26rpx; color: rgba(0,0,0,0.85); }
|
||
}
|
||
}
|
||
.order {
|
||
margin: 22rpx 24rpx 0; background: #FFFFFF; border-radius: 10rpx; padding: 32rpx 24rpx; box-sizing: border-box;
|
||
.label { font-weight: 500; font-size: 32rpx; color: rgba(0,0,0,0.85); }
|
||
.row2 {
|
||
margin-top: 24rpx; display: flex; align-items: center; justify-content: space-between;
|
||
.key {font-size: 28rpx; color: rgba(0,0,0,0.65);}
|
||
.value {
|
||
font-size: 28rpx; color: rgba(0,0,0,0.85); display: flex; align-items: center; justify-content: end;
|
||
view {
|
||
&:nth-child(1) { font-size: 28rpx; color: rgba(0,0,0,0.85); }
|
||
&:nth-child(2) { width: 2rpx; height: 19rpx; background-color: #ECEAEA; margin: 0 16rpx; }
|
||
&:nth-child(3) { font-size: 28rpx; color: #03AE80; }
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.read_con {
|
||
padding: 32rpx;
|
||
.head {
|
||
position: relative; text-align: center; margin-bottom: 30rpx;
|
||
.title { font-weight: 500; font-size: 34rpx; color: rgba(0,0,0,0.85); }
|
||
.close { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
|
||
}
|
||
.scroll { max-height: 60vh; }
|
||
.row3 {
|
||
margin-top: 24rpx;
|
||
view {
|
||
margin-top: 8rpx; font-size: 28rpx; color: rgba(0,0,0,0.65);
|
||
&:first-child { margin-top: 0; font-weight: 500; font-size: 30rpx; color: rgba(0,0,0,0.85); }
|
||
&:nth-child(2) { margin-top: 16rpx; }
|
||
}
|
||
}
|
||
}
|
||
.detailed_con {
|
||
padding: 32rpx 0; position: relative;
|
||
.head {
|
||
position: relative; text-align: center; margin: 0 32rpx 30rpx;
|
||
.title { font-weight: 500; font-size: 34rpx; color: rgba(0,0,0,0.85); }
|
||
.close { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
|
||
}
|
||
.add {
|
||
padding: 54rpx 0 24rpx; margin: 0 32rpx; display: flex; align-items: center; justify-content: space-between; border-bottom: 1rpx solid #ECEAEA;
|
||
.label { font-size: 32rpx; color: rgba(0,0,0,0.85); }
|
||
.all {
|
||
font-size: 28rpx; color: rgba(0,0,0,0.85);
|
||
text { font-weight: bold; font-size: 28rpx; color: #E54042; }
|
||
}
|
||
}
|
||
.row4 {
|
||
padding: 0 32rpx;
|
||
.col {
|
||
display: flex; align-items: center; justify-content: space-between; margin-bottom: 8rpx;
|
||
&:first-child {
|
||
margin: 24rpx 0 13rpx;
|
||
.key, .value { font-weight: 500; font-size: 28rpx; color: rgba(0,0,0,0.85); }
|
||
}
|
||
.key, .value { font-size: 28rpx; color: rgba(0,0,0,0.65); }
|
||
}
|
||
}
|
||
}
|
||
.tel_con {
|
||
padding: 32rpx 0; position: relative;
|
||
.head {
|
||
position: relative; text-align: center; margin: 0 32rpx 30rpx;
|
||
.title { font-weight: 500; font-size: 34rpx; color: rgba(0,0,0,0.85); }
|
||
.close { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
|
||
}
|
||
.tel { padding-top: 54rpx; font-size: 28rpx; color: rgba(0,0,0,0.85); text-align: center; }
|
||
}
|
||
.delete_con {
|
||
width: 596rpx; height: 398rpx; background: linear-gradient( 360deg, rgba(71,175,195,0) 0%, rgba(71,175,195,0.3) 100%); border-radius: 20rpx; padding: 64rpx 46rpx; box-sizing: border-box; text-align: center;
|
||
.title { font-weight: 500; font-size: 40rpx; color: rgba(0,0,0,0.85); }
|
||
.tips { font-size: 28rpx; color: rgba(0,0,0,0.65); margin-top: 24rpx; }
|
||
.btn-box {
|
||
margin-top: 64rpx; display: flex; align-items: center; justify-content: space-between;
|
||
.btn { width: 240rpx; height: 80rpx; line-height: 80rpx; text-align: center; border-radius: 66rpx; font-size: 30rpx; }
|
||
.cancel { border: 1rpx solid rgba(0,0,0,0.45); color: rgba(0,0,0,0.45); }
|
||
.confirm { color: #FFFFFF; background: #03AE80; }
|
||
}
|
||
}
|
||
/deep/.u-popup__content {overflow: hidden;}
|
||
.type_con {
|
||
position: relative;
|
||
.close {
|
||
position: absolute; top: 32rpx; right: 24rpx; z-index: 1; width: 56rpx; height: 56rpx; background: rgba(0,0,0,0.4); border-radius: 50%;
|
||
::v-deep .u-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
|
||
}
|
||
.scroll { max-height: 80vh; }
|
||
.swiper{
|
||
width: 100%; height: 500rpx; position: relative;
|
||
swiper{ width: 100%; height: 100%; }
|
||
.current{ padding: 0 20rpx; height: 40rpx; line-height: 40rpx; color: #fff; background: rgba(0, 0, 0, 0.5); font-size: 24rpx; border-radius: 50rpx; position: absolute; right: 24rpx; bottom: 24rpx; }
|
||
}
|
||
.specs {
|
||
background: #FFFFFF; padding: 24rpx 24rpx 32rpx; box-sizing: border-box;
|
||
.title { font-weight: 500; font-size: 36rpx; color: rgba(0,0,0,0.85); margin-bottom: 6rpx; }
|
||
.list_box {
|
||
display: flex; align-items: center; flex-wrap: wrap;
|
||
.item {
|
||
margin-top: 18rpx; width: 33.33%; display: flex; align-items: center;
|
||
image { width: 28rpx; height: 28rpx; }
|
||
view {
|
||
margin-left: 12rpx; font-size: 24rpx; color: rgba(0,0,0,0.85);
|
||
.text { color: #03AE80; }
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.occupying { width: 100%; height: 22rpx; background-color: #F6F6F6; }
|
||
.policy {
|
||
background: #FFFFFF; padding: 22rpx 24rpx 24rpx; box-sizing: border-box;
|
||
.title { font-weight: 500; font-size: 36rpx; color: rgba(0,0,0,0.85); padding-bottom: 7rpx; }
|
||
.list {
|
||
.item {
|
||
border-bottom: 2rpx solid #ECEAEA; padding: 24rpx 0;
|
||
&:last-child { border-bottom: none; }
|
||
.label { font-weight: 500; font-size: 28rpx; color: rgba(0,0,0,0.85); margin-bottom: 16rpx; }
|
||
.text { font-size: 24rpx; color: rgba(0,0,0,0.45); line-height: 28rpx; }
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |