509 lines
12 KiB
Vue
509 lines
12 KiB
Vue
<template>
|
|
<view class="order-detail">
|
|
<!-- 顶部导航栏 -->
|
|
<u-navbar title="订单详情" :border-bottom="false" :background="bgc" title-color='#fff'
|
|
title-size='36' height='36' id="navbar">
|
|
</u-navbar>
|
|
|
|
<!-- 订单信息卡片 -->
|
|
<view class="order-card">
|
|
<view class="shop-info">
|
|
<text class="shop-name">【{{orderInfo.storeName == null ? '--' : orderInfo.storeName}}】</text>
|
|
<text class="status" style="color: #fff;">
|
|
<text v-if="orderInfo.status == 'CANCELED'">已取消</text>
|
|
<text v-if="orderInfo.status == 'FINISHED'">已完成</text>
|
|
<text v-if="orderInfo.status == 'WAIT_PAY'">待支付</text>
|
|
<text v-if="orderInfo.status == 'REFUNDED'">已退款</text>
|
|
</text>
|
|
</view>
|
|
<view class="order-amount">
|
|
<view class="amount-item">
|
|
<text>使用次数</text>
|
|
<text>{{orderInfo.suitNum == null ? '--' : orderInfo.suitNum}}次</text>
|
|
</view>
|
|
<view class="amount-item">
|
|
<text>退还次数</text>
|
|
<text>{{orderInfo.refundNum == null ? '--' : orderInfo.refundNum}}次</text>
|
|
</view>
|
|
<view class="amount-item">
|
|
<text>金额</text>
|
|
<text>¥ {{orderInfo.suitAmount == null ? '--' : orderInfo.suitAmount}}</text>
|
|
</view>
|
|
<!-- <view class="amount-item">
|
|
<text>合计</text>
|
|
<text>¥ {{orderInfo.total}}</text>
|
|
</view> -->
|
|
<view class="amount-item">
|
|
<text>退款金额</text>
|
|
<text>¥ {{orderInfo.payRefunded == null ? '--' : orderInfo.payRefunded}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="total-amount">
|
|
<text>实付：</text>
|
|
<text class="price">¥ {{orderInfo.payedAmount == null ? '--' : orderInfo.payedAmount}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 订单明细 -->
|
|
<view class="order-info">
|
|
<view class="info-title">订单明细</view>
|
|
<view class="info-item">
|
|
<text>订单编号</text>
|
|
<text>{{orderInfo.orderNo == null ? '--' : orderInfo.orderNo}}</text>
|
|
</view>
|
|
<view class="info-item">
|
|
<text>订单类型</text>
|
|
<text>充值订单</text>
|
|
</view>
|
|
<view class="info-item">
|
|
<text>支付方式</text>
|
|
<text>微信支付</text>
|
|
</view>
|
|
<view class="info-item">
|
|
<text>下单时间</text>
|
|
<text>{{orderInfo.createTime == null ? '--' : orderInfo.createTime}}</text>
|
|
</view>
|
|
<view class="info-item">
|
|
<text>下单手机号</text>
|
|
<text>{{orderInfo.phoneNumber == null ? '--' : orderInfo.phoneNumber}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 使用记录 -->
|
|
<!-- <view class="usage-record">
|
|
<view class="record-title">使用记录</view>
|
|
<view class="record-list">
|
|
<view v-for="(record, index) in usageRecords" :key="index" class="record-item">
|
|
<view class="record-date">{{record.date}}</view>
|
|
<view class="record-content">
|
|
<text class="record-desc">{{record.description}}</text>
|
|
<text class="record-time">{{record.time}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view> -->
|
|
|
|
<!-- 底部退款按钮 -->
|
|
<view class="footer">
|
|
<view class="refund-btn" @click="showRefundPopup">
|
|
申请退款
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 退款弹窗 -->
|
|
<u-popup v-model="showRefund" mode="center" border-radius="8" width="600rpx">
|
|
<view class="refund-popup">
|
|
<view class="popup-title">退款申请</view>
|
|
<view class="popup-content">
|
|
<view class="amount-info">
|
|
<view class="total-amount">
|
|
<text>订单总金额</text>
|
|
<text class="amount">¥{{orderInfo.realAmount == null ? '0' : orderInfo.realAmount}}</text>
|
|
</view>
|
|
<view class="total-amount">
|
|
<text>订单总次数</text>
|
|
<text class="amount">{{orderInfo.suitNum == null ? '0' : Number(orderInfo.suitNum) - Number(orderInfo.refundNum) }}次</text>
|
|
</view>
|
|
<view class="refund-amount">
|
|
<text>退还次数</text>
|
|
<view class="amount-input">
|
|
<text class="currency" style="margin-bottom: 0;"></text>
|
|
<u-input
|
|
v-model="number"
|
|
type="number"
|
|
:border="false"
|
|
placeholder="请输入退还次数"
|
|
:maxlength="10"
|
|
></u-input>
|
|
</view>
|
|
</view>
|
|
<view class="refund-amount" style="margin-top: 20rpx;">
|
|
<text>退款金额</text>
|
|
<view class="amount-input">
|
|
<text class="currency" style="margin-bottom: 0;">¥</text>
|
|
<u-input
|
|
v-model="refundAmount"
|
|
type="number"
|
|
:border="false"
|
|
placeholder="请输入退款金额"
|
|
:maxlength="10"
|
|
></u-input>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="popup-footer">
|
|
<view class="cancel-btn" @click="closeRefundPopup">取消</view>
|
|
<view class="confirm-btn" @click="submitRefund">确认退款</view>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
bgc: {
|
|
backgroundColor: "#1a1a1a",
|
|
},
|
|
orderInfo: {},
|
|
usageRecords: [
|
|
{
|
|
date: '2025-03-12',
|
|
description: '用户在【C-1】停好3次',
|
|
time: '18:22:56'
|
|
}
|
|
],
|
|
// 退款相关数据
|
|
showRefund: false,
|
|
refundAmount: '', // 退款金额字段
|
|
orderid:'',
|
|
number:'',
|
|
flag:true
|
|
}
|
|
},
|
|
onLoad(option) {
|
|
this.orderid = option.orderid
|
|
this.getxq()
|
|
},
|
|
methods: {
|
|
// 请求订单详情
|
|
getxq(){
|
|
this.$u.get(`/bst/order/${this.orderid}`).then(res =>{
|
|
if(res.code == 200){
|
|
this.orderInfo = res.data
|
|
}
|
|
})
|
|
},
|
|
goBack() {
|
|
uni.navigateBack()
|
|
},
|
|
// 显示退款弹窗
|
|
showRefundPopup() {
|
|
this.showRefund = true
|
|
this.refundAmount = this.orderInfo.actualAmount // 默认显示实际支付金额
|
|
},
|
|
|
|
// 关闭退款弹窗
|
|
closeRefundPopup() {
|
|
this.showRefund = false
|
|
this.refundAmount = ''
|
|
},
|
|
|
|
// 提交退款申请
|
|
submitRefund() {
|
|
if (!this.refundAmount || isNaN(this.refundAmount) || Number(this.refundAmount) <= 0) {
|
|
uni.showToast({
|
|
title: '请输入有效的退款金额',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
if (Number(this.refundAmount) > Number(this.orderInfo.realAmount == null ? 0 : this.orderInfo.realAmount)) {
|
|
uni.showToast({
|
|
title: '退款金额不能大于实付金额',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
if(this.flag == true){
|
|
this.flag = false
|
|
uni.showLoading({
|
|
title: '提交中...'
|
|
})
|
|
let data = {
|
|
orderId:this.orderid,
|
|
amount:this.refundAmount,
|
|
Number:this.number
|
|
}
|
|
this.$u.put(`/bst/order/refund`,data).then(res =>{
|
|
if(res.code == 200){
|
|
setTimeout(() => {
|
|
uni.hideLoading()
|
|
uni.showToast({
|
|
title: '退款申请已提交',
|
|
icon: 'success'
|
|
})
|
|
this.flag = true
|
|
this.closeRefundPopup()
|
|
}, 2000)
|
|
}else{
|
|
uni.hideLoading()
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none',
|
|
duration:2000
|
|
})
|
|
setTimeout(()=>{
|
|
this.flag = true
|
|
},2000)
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
/deep/ .u-input__input{
|
|
color: #fff !important;
|
|
}
|
|
.order-detail {
|
|
padding-bottom: 200rpx;
|
|
box-sizing: border-box;
|
|
background-color: #1a1a1a;
|
|
height: 100vh;
|
|
.nav-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 44px 16px 10px;
|
|
background-color: #1a1a1a;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
|
|
.title {
|
|
font-size: 17px;
|
|
font-weight: 500;
|
|
color: #fff;
|
|
}
|
|
|
|
.back-icon, .right-icon {
|
|
width: 24px;
|
|
height: 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
.order-card {
|
|
margin: 12px;
|
|
padding: 16px;
|
|
background-color: #242424;
|
|
border-radius: 8px;
|
|
|
|
.shop-info {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 16px;
|
|
|
|
.shop-name {
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
color: #fff;
|
|
}
|
|
|
|
.status {
|
|
color: #666;
|
|
}
|
|
}
|
|
|
|
.order-amount {
|
|
.amount-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 8px;
|
|
color: #999;
|
|
|
|
text:last-child {
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
|
|
.total-amount {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
margin-top: 16px;
|
|
border-top: 1px dashed rgba(255, 255, 255, 0.1);
|
|
padding-top: 16px;
|
|
|
|
text {
|
|
color: #999;
|
|
}
|
|
|
|
.price {
|
|
color: #ff4d4f;
|
|
font-size: 18px;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
}
|
|
|
|
.order-info {
|
|
margin: 12px;
|
|
padding: 16px;
|
|
background-color: #242424;
|
|
border-radius: 8px;
|
|
|
|
.info-title {
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
color: #fff;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.info-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 12px;
|
|
|
|
text:first-child {
|
|
color: #999;
|
|
}
|
|
|
|
text:last-child {
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
|
|
.usage-record {
|
|
margin: 12px;
|
|
padding: 16px;
|
|
background-color: #242424;
|
|
border-radius: 8px;
|
|
.record-title {
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
color: #fff;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.record-list {
|
|
.record-item {
|
|
margin-bottom: 16px;
|
|
|
|
.record-date {
|
|
color: #666;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.record-content {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
background-color: #1a1a1a;
|
|
padding: 12px;
|
|
border-radius: 4px;
|
|
|
|
.record-desc {
|
|
color: #fff;
|
|
}
|
|
|
|
.record-time {
|
|
color: #666;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.footer {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
padding: 16px;
|
|
background-color: #1a1a1a;
|
|
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
|
|
|
.refund-btn {
|
|
height: 44px;
|
|
line-height: 44px;
|
|
text-align: center;
|
|
background-color: #ff4d4f;
|
|
color: #fff;
|
|
border-radius: 22px;
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
|
|
.refund-popup {
|
|
background-color: #242424;
|
|
padding: 20px;
|
|
|
|
.popup-title {
|
|
font-size: 18px;
|
|
font-weight: 500;
|
|
color: #fff;
|
|
text-align: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.popup-content {
|
|
.amount-info {
|
|
.total-amount {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
padding: 12px;
|
|
background-color: #1a1a1a;
|
|
border-radius: 4px;
|
|
|
|
text {
|
|
color: #999;
|
|
}
|
|
|
|
.amount {
|
|
color: #ff4d4f;
|
|
font-size: 18px;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
.refund-amount {
|
|
text {
|
|
display: block;
|
|
color: #999;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.amount-input {
|
|
display: flex;
|
|
align-items: center;
|
|
background-color: #1a1a1a;
|
|
padding: 8px 12px;
|
|
border-radius: 4px;
|
|
|
|
.currency {
|
|
color: #fff;
|
|
margin-right: 8px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.popup-footer {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 30px;
|
|
|
|
.cancel-btn, .confirm-btn {
|
|
width: 45%;
|
|
height: 40px;
|
|
line-height: 40px;
|
|
text-align: center;
|
|
border-radius: 20px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.cancel-btn {
|
|
background-color: #333;
|
|
color: #fff;
|
|
}
|
|
|
|
.confirm-btn {
|
|
background-color: #ff4d4f;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|