97 lines
3.5 KiB
Vue
97 lines
3.5 KiB
Vue
<template>
|
|
<view class="order-detail-container">
|
|
<!-- 支付金额头部 -->
|
|
<view class="payment-header">
|
|
<view class="amount-info">
|
|
<text class="amount-symbol">¥</text>
|
|
<text class="amount-value">4704.00</text>
|
|
<text class="payment-status">待付款</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 订单详情内容 -->
|
|
<view class="order-content">
|
|
<!-- 停车场信息 -->
|
|
<view class="detail-item">
|
|
<text class="detail-label">停车场</text>
|
|
<view class="detail-value">
|
|
<text class="park-type">地下</text>
|
|
<text class="park-name">衡水市民服务中心地下停车场</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 车牌号 -->
|
|
<view class="detail-item">
|
|
<text class="detail-label">车牌号</text>
|
|
<text class="detail-value">冀T11855</text>
|
|
</view>
|
|
|
|
<!-- 开始时间 -->
|
|
<view class="detail-item">
|
|
<text class="detail-label">开始时间</text>
|
|
<text class="detail-value">2025-03-08 00:00:00</text>
|
|
</view>
|
|
|
|
<!-- 结束时间 -->
|
|
<view class="detail-item">
|
|
<text class="detail-label">结束时间</text>
|
|
<text class="detail-value">2025-03-08 23:59:59</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 支付方式选择 -->
|
|
<view class="payment-method">
|
|
<view class="method-item">
|
|
<view class="method-info">
|
|
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_wechat.png"
|
|
mode="aspectFit" class="method-info-img"></image>
|
|
<text class="method-text">微信支付</text>
|
|
</view>
|
|
<!-- <view class="payment-select" v-if="selectedPayment === 'wechat'">
|
|
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check2.png"
|
|
mode="aspectFit" style="width: 40rpx; height: 40rpx;"></image>
|
|
</view>
|
|
<view class="payment-select" v-else>
|
|
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check1.png"
|
|
mode="aspectFit" style="width: 40rpx; height: 40rpx;"></image>
|
|
</view> -->
|
|
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check2.png"
|
|
mode="aspectFit" style="width: 30rpx; height: 30rpx;"></image>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 底部支付栏 -->
|
|
<view class="bottom-payment">
|
|
<view class="total-amount">
|
|
<text class="total-label">合计¥</text>
|
|
<text class="total-value">4900.00</text>
|
|
</view>
|
|
<view class="pay-button" @tap="submitPayment">
|
|
<text class="pay-text">立即支付</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
// 页面数据
|
|
}
|
|
},
|
|
methods: {
|
|
// 提交支付
|
|
submitPayment() {
|
|
console.log('提交支付');
|
|
}
|
|
},
|
|
onLoad() {
|
|
console.log('订单详情页面加载');
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
@import url('./index.css');
|
|
</style> |