548 lines
13 KiB
Vue
548 lines
13 KiB
Vue
<template>
|
|
<view class="page">
|
|
<u-navbar title="订单详情" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37'
|
|
title-size='36' height='50' id="navbar">
|
|
</u-navbar>
|
|
<view class="topnav">
|
|
<view class="name" v-if="orderobj.status == 0">待支付</view>
|
|
<view class="name" v-if="orderobj.status == 1">支付中</view>
|
|
<view class="name" v-if="orderobj.status == 2">待使用</view>
|
|
<view class="name" v-if="orderobj.status == 3">使用中</view>
|
|
<view class="name" v-if="orderobj.status == 4">已完成</view>
|
|
<view class="name" v-if="orderobj.status == 5">超时自动取消</view>
|
|
<view class="name" v-if="orderobj.status == 6">用户取消订单</view>
|
|
<view class="name" v-if="orderobj.status == 7">退款中</view>
|
|
<view class="name" v-if="orderobj.status == 8">已退款</view>
|
|
<view class="name" v-if="orderobj.status == 9">用户结束订单</view>
|
|
</view>
|
|
<view class="storedxx">
|
|
<view class="name">
|
|
【{{orderobj.storeName == null ? '--' : orderobj.storeName}}】
|
|
</view>
|
|
<view class="xx">
|
|
<view class="one">
|
|
房间名称
|
|
</view>
|
|
<view class="two">
|
|
{{orderobj.roomName == null ? '--' : orderobj.roomName}}
|
|
</view>
|
|
</view>
|
|
<view class="xx">
|
|
<view class="one">
|
|
消费套餐
|
|
</view>
|
|
<view class="two">
|
|
{{orderobj.explain == null ? '--' : orderobj.explain}}
|
|
</view>
|
|
</view>
|
|
<view class="xx">
|
|
<view class="one">
|
|
押金
|
|
</view>
|
|
<view class="two">
|
|
￥{{orderobj.deposit == null ? '--' : orderobj.deposit}}
|
|
</view>
|
|
</view>
|
|
<view class="bot">
|
|
<view class=""></view>
|
|
<view class="price">
|
|
合计：<text>￥{{orderobj.totalFee == null ? '--' : orderobj.totalFee}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="orderxx">
|
|
<view class="bd">
|
|
<view class="one">
|
|
订单编号
|
|
</view>
|
|
<view class="two">
|
|
{{orderobj.orderNo == null ? '--' : orderobj.orderNo}}
|
|
</view>
|
|
</view>
|
|
<view class="bd">
|
|
<view class="one">
|
|
支付方式
|
|
</view>
|
|
<view class="two">
|
|
微信支付
|
|
</view>
|
|
</view><view class="bd">
|
|
<view class="one">
|
|
下单时间
|
|
</view>
|
|
<view class="two">
|
|
{{orderobj.createTime == null ? '--' : orderobj.createTime}}
|
|
</view>
|
|
</view><view class="bd">
|
|
<view class="one">
|
|
支付时间
|
|
</view>
|
|
<view class="two">
|
|
{{orderobj.payTime == null ? '--' : orderobj.payTime}}
|
|
</view>
|
|
</view>
|
|
<view class="bd">
|
|
<view class="one">
|
|
开始使用时间
|
|
</view>
|
|
<view class="two">
|
|
{{orderobj.reserveStartTime == null ? '--' : orderobj.reserveStartTime}}
|
|
</view>
|
|
</view><view class="bd">
|
|
<view class="one">
|
|
结束使用时间
|
|
</view>
|
|
<view class="two">
|
|
{{orderobj.reserveEndTime == null ? '--' : orderobj.reserveEndTime}}
|
|
</view>
|
|
</view><view class="bd">
|
|
<view class="one">
|
|
实际消费时长
|
|
</view>
|
|
<view class="two">
|
|
{{timesc}}
|
|
</view>
|
|
</view><view class="bd">
|
|
<view class="one" style="width: 320rpx;">
|
|
押金退款备注
|
|
</view>
|
|
<view class="two">
|
|
{{orderobj.depositRefundDesc == null ? '--' : orderobj.depositRefundDesc}}
|
|
</view>
|
|
</view><view class="bd">
|
|
<view class="one">
|
|
押金状态
|
|
</view>
|
|
<view class="two" v-if="orderobj.is_refund == 0">
|
|
未退还
|
|
</view>
|
|
<view class="two" v-if="orderobj.is_refund == 1">
|
|
已退还
|
|
</view>
|
|
</view>
|
|
<view class="bd">
|
|
<view class="one">
|
|
押金退款金额
|
|
</view>
|
|
<view class="two" style="color: #FF1818;">
|
|
￥{{orderobj.deposit_refund == null ? '--' : orderobj.deposit_refund}}
|
|
</view>
|
|
</view>
|
|
<view class="bd">
|
|
<view class="one">
|
|
下单手机号
|
|
</view>
|
|
<view class="two">
|
|
{{orderobj.phone == null ? '--' : orderobj.phone}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 退款列表 -->
|
|
<view class="orderxx" v-for="(item,index) in orderobj.refunds" :key="index">
|
|
<view class="name">
|
|
退款{{index + 1}}
|
|
</view>
|
|
<view class="bd">
|
|
<view class="one">
|
|
退款订单编号
|
|
</view>
|
|
<view class="two">
|
|
{{item.orderNo == null ? '--' : item.orderNo}}
|
|
</view>
|
|
</view>
|
|
<view class="bd">
|
|
<view class="one">
|
|
退款金额
|
|
</view>
|
|
<view class="two">
|
|
{{item.amount == null ? '--' : item.amount}}
|
|
</view>
|
|
</view>
|
|
<view class="bd">
|
|
<view class="one">
|
|
退款备注
|
|
</view>
|
|
<view class="two">
|
|
{{item.reason == null ? '--' : item.reason}}
|
|
</view>
|
|
</view>
|
|
<view class="bd">
|
|
<view class="one">
|
|
退款时间
|
|
</view>
|
|
<view class="two">
|
|
{{item.operTime == null ? '--' : item.operTime}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="anniu">
|
|
<view class=""></view>
|
|
<view class="but" v-if="orderobj.status == 4 || orderobj.status == 9" @click="btntk">退款</view>
|
|
<view class="but" v-if="orderobj.status == 3" @click="btnjies">结束订单</view>
|
|
<view class="but" v-if="orderobj.status == 2 || orderobj.status == 0 || orderobj.status == 1" @click="btnqx">取消订单</view>
|
|
</view>
|
|
|
|
<view class="mask" v-if="maskflag"></view>
|
|
<view class="tuikuan" v-if="maskflag">
|
|
<view class="top">
|
|
退款
|
|
</view>
|
|
<view class="one">
|
|
金额总数 <input type="text" :placeholder="orderobj.totalFee" :disabled="true" /> 元
|
|
</view>
|
|
<view class="one">
|
|
退款金额 <input type="text" v-model="pricetk" placeholder="输入退款金额" /> 元
|
|
</view>
|
|
<view class="one">
|
|
退款备注 <input type="text" v-model="reason" placeholder="如有备注,请在此填写" />
|
|
</view>
|
|
<view class="bot">
|
|
<view class="myxiang" @click="maskflag = false">
|
|
我在想想
|
|
</view>
|
|
<view class="tuihuan" @click="btntuik">
|
|
确定退还
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
bgc: {
|
|
backgroundColor: "#fff",
|
|
},
|
|
maskflag:false,
|
|
orderNo:'',
|
|
orderobj:{},
|
|
timesc:'',
|
|
reason:'',
|
|
pricetk:''
|
|
}
|
|
},
|
|
onLoad(option) {
|
|
this.orderNo = option.orderNo
|
|
this.getxq()
|
|
},
|
|
methods: {
|
|
// 点击确认退款
|
|
btntuik(){
|
|
let data = {
|
|
amount:this.pricetk,
|
|
payId: this.orderobj.payId,
|
|
reason:this.reason
|
|
}
|
|
this.$u.post(`/app/refund`,data).then(res =>{
|
|
if(res.code == 200){
|
|
uni.showToast({
|
|
title: '退款成功',
|
|
icon: 'success',
|
|
duration:2000
|
|
})
|
|
setTimeout(()=>{
|
|
uni.navigateBack()
|
|
},1000)
|
|
}else{
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none',
|
|
duration:2000
|
|
})
|
|
}
|
|
})
|
|
},
|
|
// 查询订单详情
|
|
getxq(){
|
|
this.$u.get(`/appVerify/orderInfo?orderNo=${this.orderNo}`).then(res =>{
|
|
if(res.code == 200){
|
|
this.orderobj = res.data
|
|
let dateOne = new Date(res.data.reserveEndTime)
|
|
let dateTwo = new Date(res.data.reserveStartTime)
|
|
let timeDifference = dateOne - dateTwo
|
|
let millisecondsInSecond = 1000
|
|
let millisecondsInMinute = millisecondsInSecond * 60
|
|
let millisecondsInHour = millisecondsInMinute * 60
|
|
let millisecondsInDay = millisecondsInHour * 24
|
|
let days = Math.floor(timeDifference / millisecondsInDay)
|
|
timeDifference %= millisecondsInDay
|
|
let hours = Math.floor(timeDifference / millisecondsInHour)
|
|
timeDifference %= millisecondsInHour
|
|
let minutes = Math.floor(timeDifference / millisecondsInMinute)
|
|
timeDifference %= millisecondsInMinute
|
|
this.timesc = `${days == 0 ? '' : days + 天}${hours}时${minutes}分`
|
|
}
|
|
})
|
|
},
|
|
// 点击退款
|
|
btntk(){
|
|
this.maskflag = true
|
|
},
|
|
// 点击取消订单
|
|
btnqx(){
|
|
let orderNos = this.orderobj.orderNo
|
|
let that = this
|
|
uni.showModal({
|
|
title: '温馨提示',
|
|
content: '您确定要取消该订单吗?',
|
|
success: function (res) {
|
|
if (res.confirm) {
|
|
let data = {
|
|
orderNo:orderNos,
|
|
type:1
|
|
}
|
|
that.$u.post(`/app/order/orderCancel?orderNo=${orderNos}`,data).then(res => {
|
|
if (res.code == 200) {
|
|
uni.showToast({
|
|
title: '取消成功',
|
|
icon: 'success',
|
|
duration:2000
|
|
})
|
|
setTimeout(()=>{
|
|
uni.navigateBack()
|
|
},1000)
|
|
}else{
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'success',
|
|
duration:2000
|
|
})
|
|
}
|
|
})
|
|
} else if (res.cancel) {
|
|
|
|
}
|
|
}
|
|
})
|
|
},
|
|
// 点击结束订单
|
|
btnjies(){
|
|
let orderNos = this.orderobj.orderNo
|
|
let that = this
|
|
uni.showModal({
|
|
title: '温馨提示',
|
|
content: '您确定要结束该订单吗?',
|
|
success: function (res) {
|
|
if (res.confirm) {
|
|
let data = {
|
|
orderNo:orderNos,
|
|
type:2
|
|
}
|
|
that.$u.post(`/app/order/orderEnd?orderNo=${orderNos}`,data).then(res => {
|
|
if (res.code == 200) {
|
|
uni.showToast({
|
|
title: '结束成功',
|
|
icon: 'success',
|
|
duration:2000
|
|
})
|
|
setTimeout(()=>{
|
|
uni.navigateBack()
|
|
},1000)
|
|
}else{
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'success',
|
|
duration:2000
|
|
})
|
|
}
|
|
})
|
|
} else if (res.cancel) {
|
|
|
|
}
|
|
}
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
/deep/ .u-iconfont,
|
|
/deep/ .u-title{
|
|
padding-bottom: 20rpx;
|
|
}
|
|
.tuikuan{
|
|
position: fixed;
|
|
top: 560rpx;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 640rpx;
|
|
max-height: 560rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
|
padding: 0 50rpx;
|
|
box-sizing: border-box;
|
|
.bot{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.myxiang{
|
|
width: 50%;
|
|
height: 102rpx;
|
|
line-height: 102rpx;
|
|
text-align: center;
|
|
border-right: 1px solid #D8D8D8;
|
|
font-size: 40rpx;
|
|
color: #3D3D3D;
|
|
}
|
|
.tuihuan{
|
|
text-align: center;
|
|
width: 50%;
|
|
font-size: 40rpx;
|
|
height: 102rpx;
|
|
line-height: 102rpx;
|
|
color: #48893B;
|
|
}
|
|
}
|
|
.one{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
border-bottom: 1px solid #D8D8D8;
|
|
padding-bottom: 24rpx;
|
|
box-sizing: border-box;
|
|
margin-top: 24rpx;
|
|
}
|
|
.top{
|
|
margin-top: 30rpx;
|
|
width: 100%;
|
|
text-align: center;
|
|
font-weight: 600;
|
|
font-size: 36rpx;
|
|
color: #3D3D3D;
|
|
}
|
|
}
|
|
.mask{
|
|
width: 100%;
|
|
height: 100vh;
|
|
background-color: #000;
|
|
opacity: .3;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
.anniu{
|
|
width: 750rpx;
|
|
height: 134rpx;
|
|
background: #FFFFFF;
|
|
box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0,0,0,0.3);
|
|
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
|
position: fixed;
|
|
left: 0;
|
|
bottom: 0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 0 32rpx;
|
|
padding-top: 34rpx;
|
|
box-sizing: border-box;
|
|
.but{
|
|
width: 234rpx;
|
|
height: 74rpx;
|
|
border: 2rpx solid #48893B;
|
|
text-align: center;
|
|
line-height: 74rpx;
|
|
font-size: 36rpx;
|
|
color: #48893B;
|
|
border-radius: 50rpx;
|
|
}
|
|
}
|
|
.orderxx{
|
|
width: 680rpx;
|
|
max-height: 982rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
|
margin: auto;
|
|
margin-top: 22rpx;
|
|
padding: 30rpx 48rpx;
|
|
box-sizing: border-box;
|
|
.name{
|
|
margin-bottom: 20rpx;
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
}
|
|
.bd{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 20rpx;
|
|
.one{
|
|
font-size: 28rpx;
|
|
color: #7C7C7C;
|
|
}
|
|
.two{
|
|
font-size: 28rpx;
|
|
color: #3D3D3D;
|
|
}
|
|
}
|
|
}
|
|
.storedxx{
|
|
width: 680rpx;
|
|
height: 402rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
|
margin: auto;
|
|
margin-top: 22rpx;
|
|
padding: 30rpx 32rpx;
|
|
box-sizing: border-box;
|
|
.name{
|
|
font-weight: 600;
|
|
font-size: 36rpx;
|
|
color: #3D3D3D;
|
|
padding-bottom: 22rpx;
|
|
box-sizing: border-box;
|
|
border-bottom: 1px solid #D8D8D8;
|
|
}
|
|
.bot{
|
|
border-top: 1px solid #D8D8D8;
|
|
margin-top: 22rpx;
|
|
padding-top: 20rpx;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
.price{
|
|
font-size: 28rpx;
|
|
color: #7C7C7C;
|
|
text{
|
|
color: #3D3D3D;
|
|
font-weight: 6000;
|
|
font-size: 40rpx;
|
|
}
|
|
}
|
|
}
|
|
.xx{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 22rpx;
|
|
.one{
|
|
font-size: 28rpx;
|
|
color: #7C7C7C;
|
|
}
|
|
.two{
|
|
font-size: 28rpx;
|
|
color: #3D3D3D;
|
|
}
|
|
}
|
|
}
|
|
.topnav{
|
|
margin: auto;
|
|
width: 680rpx;
|
|
height: 110rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
|
padding: 30rpx 0 48rpx 48rpx;
|
|
box-sizing: border-box;
|
|
margin-top: 22rpx;
|
|
.name{
|
|
font-weight: 600;
|
|
font-size: 36rpx;
|
|
color: #3D3D3D;
|
|
}
|
|
}
|
|
page {
|
|
background: #F6F6F6;
|
|
padding-bottom: 150rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
|
|
</style> |