363 lines
6.8 KiB
Vue
363 lines
6.8 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">
|
||
已完成
|
||
</view>
|
||
</view>
|
||
<view class="storedxx">
|
||
<view class="name">
|
||
【福鼎-西湖店】
|
||
</view>
|
||
<view class="xx">
|
||
<view class="one">
|
||
房间名称
|
||
</view>
|
||
<view class="two">
|
||
竹韵包厢
|
||
</view>
|
||
</view>
|
||
<view class="xx">
|
||
<view class="one">
|
||
消费内容
|
||
</view>
|
||
<view class="two">
|
||
3小时套餐（￥50）
|
||
</view>
|
||
</view>
|
||
<view class="xx">
|
||
<view class="one">
|
||
押金
|
||
</view>
|
||
<view class="two">
|
||
￥100
|
||
</view>
|
||
</view>
|
||
<view class="bot">
|
||
<view class=""></view>
|
||
<view class="price">
|
||
合计：<text>￥20.00</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="orderxx">
|
||
<view class="bd">
|
||
<view class="one">
|
||
订单编号
|
||
</view>
|
||
<view class="two">
|
||
2134685513554
|
||
</view>
|
||
</view>
|
||
<view class="bd">
|
||
<view class="one">
|
||
支付方式
|
||
</view>
|
||
<view class="two">
|
||
微信支付
|
||
</view>
|
||
</view><view class="bd">
|
||
<view class="one">
|
||
下单时间
|
||
</view>
|
||
<view class="two">
|
||
2024-12-05 15:56:23
|
||
</view>
|
||
</view>
|
||
<view class="bd">
|
||
<view class="one">
|
||
开始使用时间
|
||
</view>
|
||
<view class="two">
|
||
2024-12-05 15:56:23
|
||
</view>
|
||
</view><view class="bd">
|
||
<view class="one">
|
||
结束使用时间
|
||
</view>
|
||
<view class="two">
|
||
2024-12-05 15:56:23
|
||
</view>
|
||
</view><view class="bd">
|
||
<view class="one">
|
||
订单结束方式
|
||
</view>
|
||
<view class="two">
|
||
订单计时结束
|
||
</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">
|
||
已退还
|
||
</view>
|
||
</view>
|
||
<view class="bd">
|
||
<view class="one">
|
||
押金退还金额
|
||
</view>
|
||
<view class="two" style="color: #FF1818;">
|
||
￥10
|
||
</view>
|
||
</view>
|
||
<view class="bd">
|
||
<view class="one">
|
||
下单手机号
|
||
</view>
|
||
<view class="two">
|
||
12345678912
|
||
</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
|
||
}
|
||
},
|
||
onLoad() {
|
||
|
||
},
|
||
methods: {
|
||
// 点击退款
|
||
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> |