384 lines
8.4 KiB
Vue
384 lines
8.4 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">
|
|
1小时
|
|
</view>
|
|
</view><view class="bd">
|
|
<view class="one">
|
|
退款备注
|
|
</view>
|
|
<view class="two">
|
|
--
|
|
</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="anniu">
|
|
<view class=""></view>
|
|
<view class="but" @click="btntk">退款</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="50" :disabled="true" /> 元
|
|
</view>
|
|
<view class="one">
|
|
退还金额 <input type="text" placeholder="20" /> 元
|
|
</view>
|
|
<view class="one">
|
|
退还备注 <input type="text" placeholder="如有备注,请在此填写" />
|
|
</view>
|
|
<view class="bot">
|
|
<view class="myxiang" @click="maskflag = false">
|
|
我在想想
|
|
</view>
|
|
<view class="tuihuan">
|
|
确定退还
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
bgc: {
|
|
backgroundColor: "#fff",
|
|
},
|
|
maskflag:false,
|
|
orderNo:'',
|
|
orderobj:{}
|
|
}
|
|
},
|
|
onLoad(option) {
|
|
this.orderNo = option.orderNo
|
|
this.getxq()
|
|
},
|
|
methods: {
|
|
// 查询订单详情
|
|
getxq(){
|
|
this.$u.get(`/appVerify/orderInfo?orderNo=${this.orderNo}`).then(res =>{
|
|
if(res.code == 200){
|
|
this.orderobj = res.data
|
|
}
|
|
})
|
|
},
|
|
// 点击退款
|
|
btntk(){
|
|
this.maskflag = true
|
|
}
|
|
}
|
|
}
|
|
</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;
|
|
height: 682rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
|
margin: auto;
|
|
margin-top: 22rpx;
|
|
padding: 30rpx 48rpx;
|
|
box-sizing: border-box;
|
|
.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;
|
|
}
|
|
|
|
|
|
</style> |