lu_quan_dev
parent
2e270c97c4
commit
10587e0550
|
After Width: | Height: | Size: 658 KiB |
|
After Width: | Height: | Size: 9.8 KiB |
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 217 KiB |
|
After Width: | Height: | Size: 3.3 KiB |
|
After Width: | Height: | Size: 3.2 KiB |
|
After Width: | Height: | Size: 6.9 KiB |
|
After Width: | Height: | Size: 3.5 KiB |
|
After Width: | Height: | Size: 3.1 KiB |
|
After Width: | Height: | Size: 7.8 KiB |
|
After Width: | Height: | Size: 24 KiB |
|
After Width: | Height: | Size: 30 KiB |
|
After Width: | Height: | Size: 19 KiB |
|
After Width: | Height: | Size: 24 KiB |
|
After Width: | Height: | Size: 24 KiB |
@ -0,0 +1,151 @@ |
||||
<template> |
||||
<view class="v-order-cancel"> |
||||
<view class="v-card container-fluid"> |
||||
<view class="row v-timeline-title"> |
||||
<view>退款金额:</view> |
||||
<view class="price"> |
||||
<text class="num_pr">￥</text><text class="num_jd">{{homestayOrderRefund.sumRefundPrice}}</text> |
||||
</view> |
||||
</view> |
||||
<view class="row v-timeline-title m-t-24">退款进度</view> |
||||
<view class="v-timeline m-t-24"> |
||||
<view class="v-timeline-item" v-for="item in homestayOrderRefund.list"> |
||||
<view class="v-timeline-item__content">{{item.refundName}}</view> |
||||
<view class="v-timeline-item__timestamp">{{parseTime(item.refundTime,'{y}-{m}-{d} {h}:{i}:{s}')}} |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import { |
||||
parseTime |
||||
} from "@/common/util"; |
||||
export default { |
||||
data() { |
||||
return { |
||||
homestayOrderRefund: {} |
||||
} |
||||
}, |
||||
onLoad(option) { |
||||
console.log(option.orderId) |
||||
this.getInitPage(option.orderId) |
||||
}, |
||||
methods: { |
||||
getInitPage(orderId) { |
||||
let data = { |
||||
'orderId': orderId |
||||
} |
||||
this.$Request.get(this.$config.getHomestayOrderRefund, data, null, null, false, true).then((res) => { |
||||
console.log(res) |
||||
if (res.code == 0) { |
||||
this.homestayOrderRefund = res.data |
||||
} else { |
||||
uni.showToast({ |
||||
title: res.data, |
||||
icon: 'none', |
||||
duration: 2000 |
||||
}) |
||||
} |
||||
}); |
||||
}, |
||||
parseTime(val, par) { |
||||
return parseTime(val, par) |
||||
}, |
||||
|
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss"> |
||||
/*每个页面公共css */ |
||||
@import '@/static/css/common.scss'; |
||||
|
||||
.v-timeline-title { |
||||
font-size: 30rpx; |
||||
color: #1B1B1B; |
||||
|
||||
.price { |
||||
.num_pr { |
||||
font-size: 24rpx; |
||||
color: #e02222; |
||||
} |
||||
|
||||
.num_jd { |
||||
margin: 0 4rpx; |
||||
font-size: 40rpx; |
||||
color: #e02222; |
||||
font-weight: bold; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.v-timeline { |
||||
padding: 20rpx; |
||||
background-color: rgba(250, 251, 255, 1); |
||||
|
||||
.v-timeline-item { |
||||
position: relative; |
||||
padding: 0 30rpx 20rpx 30rpx; |
||||
margin-bottom: 20rpx; |
||||
|
||||
&:before { |
||||
content: ""; |
||||
position: absolute; |
||||
left: -10rpx; |
||||
top: 10rpx; |
||||
z-index: 1; |
||||
height: 20rpx; |
||||
width: 20rpx; |
||||
border-radius: 20rpx; |
||||
background-color: #0983FF; |
||||
} |
||||
|
||||
&:after { |
||||
content: ""; |
||||
position: absolute; |
||||
left: 0; |
||||
top: 15rpx; |
||||
height: 100%; |
||||
width: 1rpx; |
||||
background-color: #eeeeee; |
||||
} |
||||
|
||||
.v-timeline-item__content { |
||||
font-size: 28rpx; |
||||
color: #1B1B1B; |
||||
} |
||||
|
||||
.v-timeline-item__tip { |
||||
margin: 8rpx 0; |
||||
font-size: 26rpx; |
||||
color: #1B1B1B; |
||||
} |
||||
|
||||
.v-timeline-item__timestamp { |
||||
font-size: 24rpx; |
||||
color: #808080; |
||||
} |
||||
|
||||
&.active { |
||||
.v-timeline-item__content { |
||||
color: #0983FF; |
||||
} |
||||
|
||||
&:after { |
||||
display: none; |
||||
} |
||||
|
||||
&:before { |
||||
width: 30rpx; |
||||
height: 30rpx; |
||||
border-radius: 30rpx; |
||||
top: 0; |
||||
left: -15rpx; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,139 @@ |
||||
<template> |
||||
<view class="v-order-cancel"> |
||||
<view class="v-card container-fluid"> |
||||
<view class="v-order-title">取消原因<text class="text">*</text></view> |
||||
<view class="v-order-tip">请告知取消原因，我们将努力改善服务</view> |
||||
<view class="v-order-cancel-list"> |
||||
|
||||
<radio-group @change="radioChange"> |
||||
<label class="list_item row" v-for="(item, index) in cancelList" :key="item.value"> |
||||
<view class="label col">{{item.label}}</view> |
||||
<view> |
||||
<radio color="#0983ff" :value="item.value" :checked="item.value === current" /> |
||||
</view> |
||||
</label> |
||||
</radio-group> |
||||
</view> |
||||
</view> |
||||
<view class="v-cancel-bottom"> |
||||
<view class="btn" @click="submit">确认取消订单</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
data() { |
||||
return { |
||||
cancelList: [], |
||||
current: "1", |
||||
orderId: undefined |
||||
} |
||||
}, |
||||
onLoad(options) { |
||||
this.orderId = options.id |
||||
this.getInitPage() |
||||
}, |
||||
|
||||
methods: { |
||||
getInitPage(id) { |
||||
this.$Request.get(this.$config.getDictDataList, null, null, null, false, true).then((res) => { |
||||
this.cancelList = res.data |
||||
}).catch(() => { |
||||
|
||||
}); |
||||
}, |
||||
radioChange: function(evt) { |
||||
for (let i = 0; i < this.cancelList.length; i++) { |
||||
if (this.cancelList[i].value === evt.detail.value) { |
||||
this.current = evt.detail.value; |
||||
break; |
||||
} |
||||
} |
||||
}, |
||||
submit() { |
||||
const userInfo = uni.getStorageSync("userInfo"); |
||||
let parame = { |
||||
id: this.orderId, |
||||
openid: userInfo.openid, |
||||
cancelType: this.current, |
||||
} |
||||
|
||||
this.$Request.get(this.$config.userCancelUpdateOrder, parame, null, null, false, null).then((res) => { |
||||
if (res.code == "0") { |
||||
uni.showToast({ |
||||
title: '订单取消成功', |
||||
icon: 'none' |
||||
}); |
||||
setTimeout(() => { |
||||
uni.navigateBack({ |
||||
delta: 2 |
||||
}); |
||||
}, 1000) |
||||
} else { |
||||
uni.showToast({ |
||||
title: '订单取消失败，请稍后重试', |
||||
icon: 'none' |
||||
}); |
||||
} |
||||
|
||||
}).catch(() => { |
||||
|
||||
}); |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss"> |
||||
.v-order-title { |
||||
font-size: 32rpx; |
||||
|
||||
.text { |
||||
color: #E02222; |
||||
margin-left: 8rpx; |
||||
} |
||||
|
||||
margin-bottom: 24rpx; |
||||
font-weight: bold; |
||||
} |
||||
|
||||
.v-order-tip { |
||||
font-size: 24rpx; |
||||
color: #999999; |
||||
} |
||||
|
||||
.v-order-cancel-list { |
||||
padding: 2rpx 30rpx; |
||||
margin-top: 20rpx; |
||||
border-radius: 10rpx; |
||||
background: linear-gradient(to bottom, rgba(9, 131, 255, .05), transparent); |
||||
|
||||
.list_item { |
||||
margin: 30rpx 0; |
||||
|
||||
.label { |
||||
font-size: 28rpx; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.v-cancel-bottom { |
||||
position: fixed; |
||||
bottom: 30rpx; |
||||
left: 0; |
||||
width: 100%; |
||||
padding: 24rpx 32rpx; |
||||
box-sizing: border-box; |
||||
|
||||
.btn { |
||||
font-size: 30rpx; |
||||
height: 88rpx; |
||||
line-height: 88rpx; |
||||
border-radius: 88rpx; |
||||
color: #fff; |
||||
text-align: center; |
||||
background: linear-gradient(to right, #0983FF, #57ABFF); |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,747 @@ |
||||
<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> |
||||
@ -0,0 +1,370 @@ |
||||
<template> |
||||
<view class="v-order-list"> |
||||
<mescroll-uni :up="upOption" @down="downCallback" @up="upCallback" :fixed="false"> |
||||
<view class="list_item container-fluid m-b-24" v-for="(item,index) in orderList" |
||||
> |
||||
<view class="item_title">{{item.hotelName}}</view> |
||||
<view class="row" @click="toHomeStayDetailPage(item.id)"> |
||||
<view class="item_image"> |
||||
<image class="img" :src="item.hotelLogo" mode="widthFix"></image> |
||||
</view> |
||||
<view class="item_content col"> |
||||
<view class="content-title">{{item.houseName}}</view> |
||||
<view class="content-date">{{item.checkTime}} |
||||
<image src="https://eluyou.ailuquan.cn/upload/image/2024/mapIcon/daolan/icon-data-line.png" |
||||
mode="widthFix"> |
||||
</image> |
||||
{{item.checkOutTime}} |
||||
</view> |
||||
<view class="content-price">总价：¥{{item.orderAmount}}</view> |
||||
</view> |
||||
</view> |
||||
<view class="item_content"> |
||||
<view class="content-bottom"> |
||||
<view class="btn" v-if="item.orderStatus=='0'" @click="payOrder(item)">去支付</view> |
||||
<view class="btn" v-if="item.orderStatus !='0' && item.orderStatus !='1'" |
||||
@click="toHomeStayBookingPage(item.hotelId)">再次预定</view> |
||||
<view class="btn" v-if="item.refundDisplay =='1'" @click="toRefundPage(item.id)">退款进度</view> |
||||
</view> |
||||
</view> |
||||
<view class="tip-bage"></view> |
||||
<view class="tip-state m-t-12" v-if="item.orderStatus=='1'">等待商家确认中，请及时关注订单状态</view> |
||||
<view class="state" :class="'type'+item.orderStatus">{{stateMessage(item.orderStatus)}}</view> |
||||
</view> |
||||
</mescroll-uni> |
||||
<u-popup :show="isPayPopup" mode="bottom" @close="closePay" round="10"> |
||||
<f-pay :show-title="false" :show="isPayPopup" :order="orderInfo" :payMoney="orderInfo.orderAmount" |
||||
:tradeNo="orderInfo.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"; |
||||
|
||||
import MescrollUni from '@/components/mescroll-diy/mescroll-xinlang.vue'; |
||||
export default { |
||||
components: { |
||||
MescrollUni, |
||||
fPay, |
||||
uPopup |
||||
}, |
||||
data() { |
||||
return { |
||||
rootPath: this.$config.ROOTPATH, |
||||
//是否支付弹窗 |
||||
isPayPopup: false, |
||||
//滚动 |
||||
downOption: { |
||||
auto: false //是否在初始化完毕之后自动执行下拉回调callback; 默认true |
||||
}, |
||||
upOption: { |
||||
auto: true //是否在初始化完毕之后自动执行下拉回调callback; 默认true |
||||
}, |
||||
mescroll: '', |
||||
param: { |
||||
pageSize: 10, |
||||
pageNo: 1, |
||||
noData: false, |
||||
loading: false, |
||||
finished: false, |
||||
openid: undefined, |
||||
appid: undefined, |
||||
}, |
||||
orderList: [], |
||||
list: [], //商品数据 |
||||
orderInfo: undefined, |
||||
} |
||||
}, |
||||
onLoad() { |
||||
//TODO: |
||||
this.judgeLogin() |
||||
}, |
||||
onShow() { |
||||
this.param.pageNo = 1 |
||||
this.loadData() |
||||
}, |
||||
methods: { |
||||
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; |
||||
} |
||||
}, |
||||
/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */ |
||||
/*下拉刷新的回调 */ |
||||
downCallback(mescroll) { |
||||
this.mescroll = mescroll |
||||
this.param.pageNo = 1 |
||||
this.loadData(); |
||||
// #ifdef H5 |
||||
this.top = uni.upx2px(100 + 88) + 'px'; // H5的高度需加上 88的标题栏 |
||||
// #endif |
||||
// #ifndef H5 |
||||
this.top = uni.upx2px(100) + 'px'; // 非H5不必加 |
||||
// #endif |
||||
setTimeout(() => { |
||||
this.mescroll.endSuccess(); |
||||
this.top = 0; |
||||
}, 2500); |
||||
}, |
||||
upCallback(mescroll) { |
||||
this.mescroll = mescroll |
||||
this.param.pageNo = this.mescroll.num |
||||
this.loadData(); |
||||
}, |
||||
//支付结果 |
||||
payResult(data) { |
||||
if (data.payStatus == 1) { |
||||
uni.showToast({ |
||||
title: '支付成功', |
||||
icon: 'none' |
||||
}); |
||||
setTimeout(() => { |
||||
this.isPayPopup = false |
||||
this.param.pageNo = 1 |
||||
this.loadData() |
||||
}, 1000) |
||||
} else { |
||||
uni.showToast({ |
||||
title: '支付失败', |
||||
icon: 'none' |
||||
}); |
||||
this.isPayPopup = false |
||||
} |
||||
//uni.showToast({title: data.detail.errMsg,icon:'none'}); |
||||
}, |
||||
// 下拉刷新 |
||||
loadData() { |
||||
// TODO: 需从缓存获取appId openId |
||||
const userInfo = uni.getStorageSync("userInfo"); |
||||
const extConfig = uni.getExtConfigSync ? uni.getExtConfigSync() : {}; |
||||
let appId = extConfig.app_id |
||||
|
||||
this.param.openid = userInfo.openid |
||||
this.param.appid = appId |
||||
|
||||
this.$Request.get(this.$config.getHomestayOrderList, this.param, null, null, false, true).then((res) => { |
||||
const curPageData = res.data.list || [] // 当前页数据 |
||||
if (this.mescroll.num == 1) this.orderList = []; // 第一页需手动制空列表 |
||||
curPageData.forEach((item, index) => { |
||||
this.orderList.push(item) |
||||
}) |
||||
|
||||
setTimeout(() => { |
||||
this.mescroll.endSuccess(curPageData.length); // 请求成功, 结束加载 |
||||
}, 1000); |
||||
}).catch(() => { |
||||
this.mescroll.endErr(); // 请求失败, 结束加载 |
||||
}); |
||||
}, |
||||
// 支付 |
||||
payOrder(val) { |
||||
this.orderInfo = val |
||||
console.log("订单==========", this.orderInfo) |
||||
this.isPayPopup = true |
||||
}, |
||||
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 |
||||
} |
||||
} |
||||
}) |
||||
}, |
||||
// 跳转民宿订单详情页 |
||||
toHomeStayDetailPage(id) { |
||||
uni.navigateTo({ |
||||
url: "/subPageC/orderHomestay/orderDetail?id=" + id |
||||
}); |
||||
}, |
||||
//跳转预订页面 |
||||
toHomeStayBookingPage(hotelId) { |
||||
uni.navigateTo({ |
||||
url: "/subPageB/Homestay/homestaydetail/homestaydetail?guid=" + hotelId |
||||
}); |
||||
}, |
||||
//跳转退款页面 |
||||
toRefundPage(orderId) { |
||||
uni.navigateTo({ |
||||
url: "/subPageC/orderHomestay/cancelStep?orderId=" + orderId |
||||
}); |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss"> |
||||
/*每个页面公共css */ |
||||
@import '@/static/css/common.scss'; |
||||
|
||||
.v-order-list { |
||||
padding: 0; |
||||
|
||||
.list_item { |
||||
position: relative; |
||||
z-index: 9; |
||||
overflow: hidden; |
||||
box-sizing: border-box; |
||||
padding: 30rpx 24rpx 20rpx 24rpx; |
||||
background-color: #fff; |
||||
border-radius: 10rpx; |
||||
|
||||
.item_title { |
||||
margin-top: -5rpx; |
||||
margin-bottom: 10rpx; |
||||
padding-left: 30rpx; |
||||
font-size: 32rpx; |
||||
color: #1B1B1B; |
||||
font-weight: bold; |
||||
} |
||||
|
||||
.item_image { |
||||
width: 180rpx; |
||||
height: 150rpx; |
||||
margin-right: 20rpx; |
||||
overflow: hidden; |
||||
|
||||
.img { |
||||
width: 200rpx; |
||||
} |
||||
} |
||||
|
||||
.tip-bage { |
||||
position: absolute; |
||||
left: 0; |
||||
top: 20rpx; |
||||
width: 40rpx; |
||||
height: 36rpx; |
||||
background: url('https://eluyou.ailuquan.cn/upload/image/2024/mapIcon/daolan/icon-homestay.png'); |
||||
background-repeat: no-repeat; |
||||
background-position: left 4rpx; |
||||
background-size: 40rpx; |
||||
} |
||||
|
||||
.state { |
||||
position: absolute; |
||||
right: 0; |
||||
top: 30rpx; |
||||
font-size: 26rpx; |
||||
color: #0983FF; |
||||
padding: 8rpx 30rpx 8rpx 20rpx; |
||||
border-radius: 30rpx 0 0 30rpx; |
||||
background: linear-gradient(to right, rgba(9, 131, 255, .2), transparent); |
||||
|
||||
|
||||
&.type0 { |
||||
color: #FF850A; |
||||
padding: 8rpx 30rpx 8rpx 20rpx; |
||||
border-radius: 30rpx 0 0 30rpx; |
||||
background: linear-gradient(to right, rgba(255, 133, 10, .2), transparent); |
||||
} |
||||
|
||||
&.type1 { |
||||
color: #0983FF; |
||||
padding: 8rpx 30rpx 8rpx 20rpx; |
||||
border-radius: 30rpx 0 0 30rpx; |
||||
background: linear-gradient(to right, rgba(9, 131, 255, .2), transparent); |
||||
} |
||||
|
||||
&.type2 { |
||||
color: #666666; |
||||
padding: 8rpx 30rpx 8rpx 20rpx; |
||||
border-radius: 30rpx 0 0 30rpx; |
||||
background: linear-gradient(to right, rgba(102, 102, 102, .2), transparent); |
||||
} |
||||
|
||||
&.type3 { |
||||
color: #666666; |
||||
padding: 8rpx 30rpx 8rpx 20rpx; |
||||
border-radius: 30rpx 0 0 30rpx; |
||||
background: linear-gradient(to right, rgba(102, 102, 102, .2), transparent); |
||||
} |
||||
} |
||||
|
||||
.tip-state { |
||||
margin-left: -24rpx; |
||||
margin-bottom: -24rpx; |
||||
color: #0983FF; |
||||
padding: 10rpx 30rpx; |
||||
font-size: 24rpx; |
||||
background: linear-gradient(to right, rgba(9, 131, 255, .15), transparent); |
||||
} |
||||
|
||||
.item_content { |
||||
|
||||
.content-title, |
||||
.content-date, |
||||
.content-price { |
||||
margin: 8rpx; |
||||
color: #666666; |
||||
font-size: 28rpx; |
||||
} |
||||
|
||||
.content-date { |
||||
image { |
||||
width: 24rpx; |
||||
height: 22rpx; |
||||
margin: 0 10rpx; |
||||
} |
||||
} |
||||
|
||||
.content-bottom { |
||||
text-align: right; |
||||
|
||||
.btn { |
||||
display: inline-block; |
||||
margin: 0 10rpx; |
||||
padding: 0 20rpx; |
||||
border: 1rpx solid #CCCCCC; |
||||
color: #1B1B1B; |
||||
font-size: 28rpx; |
||||
text-align: center; |
||||
height: 60rpx; |
||||
line-height: 60rpx; |
||||
border-radius: 60rpx; |
||||
} |
||||
} |
||||
} |
||||
|
||||
|
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,14 @@ |
||||
<template> |
||||
<view class="v-pay-result"> |
||||
<view class="image"></view> |
||||
<view class="">支付成功</view> |
||||
<view class="price">1520.00</view> |
||||
<view class="btn">1520.00</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
</script> |
||||
|
||||
<style> |
||||
</style> |
||||
Loading…
Reference in new issue