158 lines
5.1 KiB
Vue
158 lines
5.1 KiB
Vue
<template>
|
|
<view class="order-detail-container">
|
|
<!-- 订单状态区域 -->
|
|
<view class="order-status-section">
|
|
<view class="status-left">
|
|
<text class="status-title">订单已支付</text>
|
|
<text class="park-name">{{ orderDetail.parking.parking_name }}</text>
|
|
</view>
|
|
<view class="status-right">
|
|
<image class="success-icon" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/park/park_orderOk.png"
|
|
mode="aspectFit"></image>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 金额信息区域 -->
|
|
<view class="amount-section">
|
|
<view class="amount-item" @tap="toggleAmountExpand">
|
|
<text class="amount-label">实付金额</text>
|
|
<view class="amount-value">
|
|
<text>¥{{ orderDetail.pay_method }}</text>
|
|
<u-icon :name="amountExpanded ? 'arrow-up' : 'arrow-down'" size="28"></u-icon>
|
|
|
|
</view>
|
|
</view>
|
|
<view class="amount-item" v-show="amountExpanded">
|
|
<text class="amount-label2">订单金额</text>
|
|
<text>¥{{ orderDetail.pay_method }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 电商服务区域 -->
|
|
<view class="service-section">
|
|
<text class="section-title">订单信息</text>
|
|
|
|
<view class="info-item">
|
|
<text class="info-label">车牌号码</text>
|
|
<text>{{ orderDetail.parking_record.car_number }}</text>
|
|
</view>
|
|
|
|
<view class="info-item">
|
|
<text class="info-label">交易时间</text>
|
|
<text>{{ orderDetail.pay_time }}</text>
|
|
</view>
|
|
|
|
<view class="info-item">
|
|
<text class="info-label">停车时长</text>
|
|
<text>{{ calculateParkingDuration() }}</text>
|
|
</view>
|
|
|
|
<view class="info-item">
|
|
<text class="info-label">订单类型</text>
|
|
<text>停车</text>
|
|
</view>
|
|
|
|
<view class="info-item">
|
|
<text class="info-label">支付方式</text>
|
|
<text>{{ orderDetail.pay_method == 1 ? '微信' : orderDetail.pay_method == 2 ? '支付宝' : '其他' }}</text>
|
|
</view>
|
|
|
|
<view class="info-item">
|
|
<text class="info-label">订单号</text>
|
|
<view class="order-number-container">
|
|
<text>{{ orderDetail.order_no }}</text>
|
|
<image class="copy-icon" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/myOrder/copy.png"
|
|
mode="aspectFit" @tap="copyOrderNumber"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
isPhone,
|
|
picUrl,
|
|
request,
|
|
upload,
|
|
NavgateTo
|
|
} from '../../../utils';
|
|
import { apiArr } from '@/api/park.js'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
// 控制金额是否展开
|
|
amountExpanded: false,
|
|
// 订单详情数据
|
|
orderDetail: {}
|
|
}
|
|
},
|
|
methods: {
|
|
// 切换金额展开状态
|
|
toggleAmountExpand() {
|
|
this.amountExpanded = !this.amountExpanded;
|
|
},
|
|
|
|
// 复制订单号
|
|
copyOrderNumber() {
|
|
// 使用uni.setClipboardData API复制订单号
|
|
uni.setClipboardData({
|
|
data: this.orderDetail.order_no,
|
|
success: () => {
|
|
uni.showToast({
|
|
title: '复制成功',
|
|
icon: 'success',
|
|
duration: 2000
|
|
});
|
|
},
|
|
fail: () => {
|
|
uni.showToast({
|
|
title: '复制失败',
|
|
icon: 'none',
|
|
duration: 2000
|
|
});
|
|
}
|
|
});
|
|
},
|
|
|
|
// 计算停车时长
|
|
calculateParkingDuration() {
|
|
if (!this.orderDetail || !this.orderDetail.parking_record) {
|
|
return '0分钟';
|
|
}
|
|
|
|
const inTime = new Date(this.orderDetail.parking_record.in_time);
|
|
const outTime = new Date(this.orderDetail.parking_record.out_time);
|
|
|
|
// 计算时间差（毫秒）
|
|
const diffMs = outTime - inTime;
|
|
|
|
// 转换为分钟
|
|
const diffMinutes = Math.floor(diffMs / (1000 * 60));
|
|
|
|
if (diffMinutes < 60) {
|
|
return `${diffMinutes}分钟`;
|
|
} else {
|
|
const hours = Math.floor(diffMinutes / 60);
|
|
const minutes = diffMinutes % 60;
|
|
if (minutes === 0) {
|
|
return `${hours}小时`;
|
|
} else {
|
|
return `${hours}小时${minutes}分钟`;
|
|
}
|
|
}
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
const order = options.order;
|
|
if (order) {
|
|
this.orderDetail = JSON.parse(order);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
@import url('./index.css');
|
|
</style> |