pika_shangjia/pages/orderDetail/orderDetail.vue

<template>
	<view style="padding-bottom: 50rpx;">
		<view class="money-box ddflex">
			<view class="state">
				<view>已归还</view>
				<view class="act-color">已支付</view>
			</view>
			<view class="money act-color ddflex">
				<text class="symbol">￥</text>
				<text>20</text>
			</view>
		</view>
		
		<view class="info-box">
			<view class="info-item ddflex">
				<view class="info-item-label">使用时长</view>
				<view class="info-item-data fflex tover">一次</view>
			</view>
			<view class="info-item ddflex">
				<view class="info-item-label">计费方式</view>
				<view class="info-item-data fflex tover">按次计费</view>
			</view>
			<view class="info-item ddflex">
				<view class="info-item-label">使用费用</view>
				<view class="info-item-data fflex tover">￥15</view>
			</view>
			<view class="info-item ddflex">
				<view class="info-item-label">超时</view>
				<view class="info-item-data fflex tover">2小时</view>
			</view>
			<view class="info-item ddflex">
				<view class="info-item-label">超时费用</view>
				<view class="info-item-data fflex tover">￥5</view>
			</view>	
			<view class="info-item ddflex">
				<view class="info-item-label">订单总额</view>
				<view class="info-item-data fflex tover act-color">￥20</view>
			</view>
			<view class="info-item ddflex">
				<view class="info-item-label">支付方式</view>
				<view class="info-item-data fflex tover">钱包支付</view>
			</view>
			<view class="info-item dflex">
				<view class="info-item-label">收费标准</view>
				<view class="info-item-data fflex">4元/小时，免费试用5分钟，不足60分钟按60分钟计费</view>
			</view>
		</view>
		
		<view class="info-box">
			<view class="info-box-title">租借信息</view>
			<view class="info-item ddflex">
				<view class="info-item-label">租赁合同</view>
				<view class="ddflex">
					<view class="info-item-data fflex tover">2346324325171424</view>
					<view style="color: #2A82E4;margin-left: 10rpx;text-decoration: underline;">查看</view>
				</view>
			</view>
			<view class="info-item ddflex">
				<view class="info-item-label">租借方式</view>
				<view class="info-item-data fflex tover">微信支付分租借</view>
			</view>
			<view class="info-item ddflex">
				<view class="info-item-label">租借时间</view>
				<view class="info-item-data fflex tover">2022-11-25 00:55</view>
			</view>
			<view class="info-item ddflex mag-b50">
				<view class="info-item-label">归还时间</view>
				<view class="info-item-data fflex tover">2022-11-25 00:58</view>
			</view>
			<view class="info-item ddflex">
				<view class="info-item-label">电池ID</view>
				<view class="info-item-data fflex tover">XCZX000100707</view>
			</view>	
			<view class="info-item ddflex">
				<view class="info-item-label">电池型号</view>
				<view class="info-item-data fflex tover act-color">60V 30Ah</view>
			</view>
			<view class="info-item ddflex">
				<view class="info-item-label">租借机柜</view>
				<view class="info-item-data fflex tover">ZXCCD12210250093</view>
			</view>
			<view class="info-item ddflex">
				<view class="info-item-label">租借门店</view>
				<view class="info-item-data fflex tover">白云科技</view>
			</view>
			<view class="info-item dflex mag-b50">
				<view class="info-item-label">租借地点</view>
				<view class="info-item-data fflex">广东省惠州市惠城区下埔路23号广东省惠州市惠城区下埔路23号</view>
			</view>
			<view class="info-item ddflex">
				<view class="info-item-label">归还门店</view>
				<view class="info-item-data fflex tover">白云科技</view>
			</view>
			<view class="info-item dflex">
				<view class="info-item-label">归还地点</view>
				<view class="info-item-data fflex">广东省惠州市惠城区下埔路23号广东省惠州市惠城区下埔路23号</view>
			</view>
			<view class="info-item ddflex mag-b50">
				<view class="info-item-label">归还机柜</view>
				<view class="info-item-data fflex tover">ZXCCD12210250093</view>
			</view>
			<view class="info-item ddflex">
				<view class="info-item-label">用户手机号</view>
				<view class="info-item-data fflex tover">15200809658</view>
			</view>
			<view class="info-item ddflex">
				<view class="info-item-label">订单编号</view>
				<view class="info-item-data fflex tover">159582346324325171424</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	const app = getApp();
	const req = require("../../utils/request.js");

	export default {
		components: {},
		props: {},
		data() {
			return {
				systems: {},
				isTop:0,
			}
		},
		onLoad(options) {

		},
		onShow() {
			
		},
		methods: {
			
		},
		mounted() {
			const systemInfo = uni.getSystemInfoSync();
			// px转换到rpx的比例
			let pxToRpxScale = 750 / systemInfo.windowWidth;
			let systems = {
				ktxStatusHeight: systemInfo.statusBarHeight * pxToRpxScale, // 状态栏的高度
				navigationHeight: 44 * pxToRpxScale // 导航栏的高度
			};
			systems.barHeight = systems.ktxStatusHeight + systems.navigationHeight;
			this.systems = systems;
		},
		onPageScroll: function(e) {
			if (e.scrollTop > this.systems.barHeight) {
				this.isTop = 1;
			} else {
				this.isTop = 0;
			}
		}
	}
</script>

<style>
	@import "./orderDetail.css";
</style>