You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
522 lines
11 KiB
522 lines
11 KiB
<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">{{homestayOrderData.status}}</view>
|
|
<view class="tip">{{promptText(homestayOrderData.orderStatus)}}</view>
|
|
|
|
<view class="time" v-if="homestayOrderData.orderStatus == '0'">25:25</view>
|
|
</view>
|
|
<view class=" order-top-btn">
|
|
<view class="">
|
|
<view class="pay-btn" v-if="homestayOrderData.orderStatus == '0'">去支付</view>
|
|
<view class="pay-btn" v-else @click="toHomeStayBookingPage(homestayOrderData.hotelId)">再次预订</view>
|
|
</view>
|
|
<!-- <view class="col-12">
|
|
<view class="cancel-btn">取消订单</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 == '7' || homestayOrderData.orderStatus == '8' ">
|
|
|
|
<view class="dec col">退款进度:<text>退款成功</text></view>
|
|
<view class="btn">查看详情</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 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 container-fluid m-t-24">
|
|
<view class="v-order-info row">
|
|
<view class="info-image">
|
|
<!-- <image :src="homestayOrderData.hotelLogo" ></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">
|
|
<view class="btn col-12" @click="navigation">地图导航</view>
|
|
<view class="btn col" @click="cell(homestayOrderData.serviceNumber)">咨询电话</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="v-card 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">{{item.checkTime}}</text></view>
|
|
<text class="mid">{{item.day}}晚</text>
|
|
<view class="end"><text class="date">{{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>
|
|
</view>
|
|
|
|
<view class="v-card 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>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
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(opetion) {
|
|
this.getHomestayOrderDetail(opetion.id)
|
|
},
|
|
methods: {
|
|
// 查询订单详情
|
|
getHomestayOrderDetail(orderId){
|
|
let data ={
|
|
'id':orderId
|
|
}
|
|
this.$Request.get(this.$config.getHomestayOrderDetail, data, null, null, false, null).then((res) => {
|
|
console.log(res)
|
|
if(res.code == 0){
|
|
this.homestayOrderData = res.data
|
|
}else{
|
|
uni.showToast({
|
|
title: res.data,
|
|
icon: 'none',
|
|
duration: 2000
|
|
})
|
|
}
|
|
});
|
|
|
|
},
|
|
// 拨打咨询电话
|
|
cell(val){
|
|
uni.makePhoneCall({
|
|
phoneNumber: val //仅为示例
|
|
});
|
|
},
|
|
//导航
|
|
navigation(){
|
|
uni.openLocation({
|
|
latitude: Number(this.homestayOrderData.lat),
|
|
longitude: Number(this.homestayOrderData.lon),
|
|
name: this.homestayOrderData.hotelName,
|
|
address: this.homestayOrderData.addressInfo,
|
|
complete: function(result) {
|
|
console.log(result);
|
|
},
|
|
});
|
|
},
|
|
// 根据订单状态反馈提示文字
|
|
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
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</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 100rpx 0;
|
|
|
|
.order-top {
|
|
position: relative;
|
|
padding: 0 40rpx;
|
|
|
|
.state {
|
|
font-size: 44rpx;
|
|
color: #fff;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.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 {
|
|
margin: 0 20rpx;
|
|
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;
|
|
}
|
|
|
|
.info-content {
|
|
.title {
|
|
font-size: 30rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.address {
|
|
margin-top: 8rpx;
|
|
font-size: 24rpx;
|
|
color: #808080;
|
|
}
|
|
}
|
|
}
|
|
|
|
.v-order-detail {
|
|
position: relative;
|
|
}
|
|
|
|
|
|
|
|
.v-order-bg {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 1;
|
|
width: 100%;
|
|
height: 600rpx;
|
|
background: linear-gradient(to bottom, #0983FF, transparent);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
.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> |