ebike-ui/ebike-maintenance/components/bike-pay/bike-pay.vue

<template>
	<div style="padding: 15px;background-color: white;">
		<div class="divPay">
			<div class="divTitle">
				<label>
					<image class="divImg" :src='imgPath+"static/userui/home/money.png"' />
				</label>
				<label>待支付：</label>
				<label>{{data.hj}}元</label>
			</div>
			<div class="divFont">
				{{data.sj}}
			</div>
			<div class="divTitle2">
				费用明细
			</div>
			<div class="divRow divFont">
				<label>起步价</label>
				<label>{{data.qbj}}元</label>
			</div>
			<div class="divRow divFont">
				<label>时长费</label>
				<label>{{data.scf}}元</label>
			</div>
			<div class="divHJ">
				<label>合计：</label>
				<label>{{data.hj}}元</label>
			</div>
		</div>
		<div>
			<div class="divBtn">
				<label>
					<uni-icons custom-prefix="iconfont" type="icon-ebikeweixin" color="white" size="25" />
				</label>
				支付
			</div>
		</div>
	</div>

</template>

<script setup>
	import {
		ref,onMounted
	} from 'vue';
	import config from '@/utils/config';
	import {
		showModelMessage
	} from "@/utils/tools.js";
	const imgPath = config.imgPath;
	const props = defineProps(["orderid"]);
	const data = ref({
		hj: "2.5",
		sj: "2025-04-03 14:15:13",
		qbj: "2.0",
		scf: "0.5"
	})
	
	onMounted(()=>{
		showModelMessage("该功能暂未实现！")
	})
</script>

<style scoped>
	.divPay {
		width: 260px;
	}

	.divTitle {
		line-height: 30px;
		font-size: 14px;
		color: #000;
		font-weight: bold;
	}

	.divTitle2 {
		font-size: 16px;
		line-height: 35px;
	}

	.divImg {
		width: 15px;
		height: 12px;
		margin-right: 5px;
	}

	.divFont {
		color: #000;
		font-size: 12px;
		opacity: 0.7;
	}

	.divRow {
		line-height: 20px;
		display: flex;
		justify-content: space-between;
	}

	.divHJ {
		text-align: right;
		font-size: 14px;
		color: red;
		font-weight: bold;
	}

	.divBtn {
		text-align: center;
		background: #61D145;
		color: white;
		line-height: 40px;
		border-radius: 5px;
		margin-top: 20px;
	}
</style>