chenfeng
10 months ago
parent
20460279a9
commit
3ce0271116
@ -1,151 +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> |
||||
<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) |
||||
}, |
||||
|
||||
} |
||||
} |
||||
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.getMerchantRefundLog, 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; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
/*每个页面公共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> |
||||
@ -1,139 +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> |
||||
<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(() => { |
||||
|
||||
}); |
||||
} |
||||
} |
||||
} |
||||
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.getMerchantDictDataList, 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 = { |
||||
orderId: this.orderId, |
||||
openid: userInfo.openid, |
||||
cancelType: this.current, |
||||
} |
||||
|
||||
this.$Request.get(this.$config.getMerchantOrderCancelOrder, parame, null, null, false, true).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); |
||||
} |
||||
} |
||||
.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> |
||||
File diff suppressed because it is too large
Load Diff
@ -1,370 +1,365 @@ |
||||
<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 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.merchantName}}</view> |
||||
<view class="row" @click="toHomeStayDetailPage(item.id)"> |
||||
<view class="item_image"> |
||||
<image class="img" :src="item.picUrls" mode="widthFix"></image> |
||||
</view> |
||||
<view class="item_content col"> |
||||
<!-- <view class="content-title">{{item.merchantName}}</view>--> |
||||
<view class="content-date">{{item.goodsName}}¥{{item.goodsPrice}} |
||||
* |
||||
<!-- <image src="https://eluyou.ailuquan.cn/upload/image/2024/mapIcon/daolan/icon-data-line.png" |
||||
mode="widthFix"> |
||||
</image> --> |
||||
{{item.goodsNum}} |
||||
</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> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import fPay from "../components/f-pay/f-pay"; |
||||
import uPopup from "../components/uview-ui/components/u-popup/u-popup.vue"; |
||||
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 |
||||
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; |
||||
} |
||||
}, |
||||
/*上拉加载的回调: 其中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.param.openid = "oohzD5b7g4hNA1qJyAwlSA5H4NCY" |
||||
// this.param.appid = 23 |
||||
this.$Request.get(this.$config.getMerchantOrderList, 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) |
||||
}) |
||||
|
||||
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 |
||||
}); |
||||
} |
||||
} |
||||
} |
||||
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/orderShop/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'; |
||||
/*每个页面公共css */ |
||||
@import '@/static/css/common.scss'; |
||||
|
||||
.v-order-list { |
||||
padding: 0; |
||||
.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; |
||||
.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_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; |
||||
.item_image { |
||||
width: 180rpx; |
||||
height: 150rpx; |
||||
margin-right: 20rpx; |
||||
overflow: hidden; |
||||
|
||||
.img { |
||||
width: 200rpx; |
||||
} |
||||
} |
||||
.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; |
||||
} |
||||
.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); |
||||
.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); |
||||
} |
||||
&.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); |
||||
} |
||||
&.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); |
||||
} |
||||
&.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); |
||||
} |
||||
} |
||||
&.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); |
||||
} |
||||
.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 { |
||||
.item_content { |
||||
|
||||
.content-title, |
||||
.content-date, |
||||
.content-price { |
||||
margin: 8rpx; |
||||
color: #666666; |
||||
font-size: 28rpx; |
||||
} |
||||
.content-title, |
||||
.content-date, |
||||
.content-price { |
||||
margin: 8rpx; |
||||
color: #666666; |
||||
font-size: 28rpx; |
||||
} |
||||
|
||||
.content-date { |
||||
image { |
||||
width: 24rpx; |
||||
height: 22rpx; |
||||
margin: 0 10rpx; |
||||
} |
||||
} |
||||
.content-date { |
||||
image { |
||||
width: 24rpx; |
||||
height: 22rpx; |
||||
margin: 0 10rpx; |
||||
} |
||||
} |
||||
|
||||
.content-bottom { |
||||
text-align: right; |
||||
.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; |
||||
} |
||||
} |
||||
} |
||||
.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> |
||||
|
||||
Loading…
Reference in new issue