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.
370 lines
9.2 KiB
370 lines
9.2 KiB
<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>
|
|
|