129 lines
4.3 KiB
Vue
129 lines
4.3 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">上海公馆停车场</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.actualAmount }}</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.orderAmount }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 电商服务区域 -->
|
|
<view class="service-section">
|
|
<text class="section-title">电商服务</text>
|
|
|
|
<view class="info-item">
|
|
<text class="info-label">车牌号码</text>
|
|
<text>{{ orderDetail.carNumber }}</text>
|
|
</view>
|
|
|
|
<view class="info-item">
|
|
<text class="info-label">交易时间</text>
|
|
<text>{{ orderDetail.transactionTime }}</text>
|
|
</view>
|
|
|
|
<view class="info-item">
|
|
<text class="info-label">停车时长</text>
|
|
<text>{{ orderDetail.parkingDuration }}</text>
|
|
</view>
|
|
|
|
<view class="info-item">
|
|
<text class="info-label">订单类型</text>
|
|
<text>{{ orderDetail.orderType }}</text>
|
|
</view>
|
|
|
|
<view class="info-item">
|
|
<text class="info-label">支付方式</text>
|
|
<text>{{ orderDetail.paymentMethod }}</text>
|
|
</view>
|
|
|
|
<view class="info-item">
|
|
<text class="info-label">订单号</text>
|
|
<view class="order-number-container">
|
|
<text>{{ orderDetail.orderNumber }}</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>
|
|
export default {
|
|
data() {
|
|
return {
|
|
// 控制金额是否展开
|
|
amountExpanded: false,
|
|
// 订单详情数据
|
|
orderDetail: {
|
|
actualAmount: '8.00',
|
|
orderAmount: '8.00',
|
|
carNumber: '冀TQ2F09',
|
|
transactionTime: '2025-08-04 18:41:06',
|
|
parkingDuration: '4时16分53秒',
|
|
orderType: '停车',
|
|
paymentMethod: '微信',
|
|
orderNumber: 'BK250804184038818'
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
// 切换金额展开状态
|
|
toggleAmountExpand() {
|
|
this.amountExpanded = !this.amountExpanded;
|
|
},
|
|
|
|
// 复制订单号
|
|
copyOrderNumber() {
|
|
// 使用uni.setClipboardData API复制订单号
|
|
uni.setClipboardData({
|
|
data: this.orderDetail.orderNumber,
|
|
success: () => {
|
|
uni.showToast({
|
|
title: '复制成功',
|
|
icon: 'success',
|
|
duration: 2000
|
|
});
|
|
},
|
|
fail: () => {
|
|
uni.showToast({
|
|
title: '复制失败',
|
|
icon: 'none',
|
|
duration: 2000
|
|
});
|
|
}
|
|
});
|
|
}
|
|
},
|
|
onLoad() {
|
|
// 页面加载时可以从路由参数或API获取订单详情
|
|
// 这里使用默认数据
|
|
console.log('订单详情页面加载');
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
@import url('./index.css');
|
|
</style> |