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.
747 lines
17 KiB
747 lines
17 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 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>
|
|
|