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