ebike-ui/ebike-user/pages/user/views/PaymentFeedback.vue

<template>
	<view class="fee-appeal-page">
		<view class="bike-fee-card">
			<view class="fee-row flex justify-between">
				<view class="fee-label">
					订单编号
				</view>
				<view class="fee-amount">
					{{orderId}}
				</view>
			</view>
			<view class="fee-row flex justify-between">
				<view class="fee-label">
					骑行费用
				</view>
				<view class="fee-amount">
					{{data.totalAmount}}元
				</view>
			</view>
		</view>
		<view class="bike-fee2-card">
			<view class="header flex">
				<image src="/static/icon_12.png"></image>
				<span>HI~遇到了什么问题?</span>
			</view>
			<view class="content">
				<view class="issue-title">
					骑行费问题
				</view>
				<view class="button-group flex justify-between">
					<view class="button-with-border" @click="gotoRefundRequest">
						申请退款
					</view>
					<!-- <view class="button-with-border">
						已关锁仍计费
					</view> -->
				</view>
			</view>

		</view>
	</view>

</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import * as api from '@/utils/api.js';
	import {
		onLoad
	} from "@dcloudio/uni-app";
	
	const orderId = ref(''); 
	
	onLoad((options) => {
		orderId.value = options.orderId;
	})
	const data=ref({})
	onMounted(() => {
		getInfoOrderData();
	})
	const getInfoOrderData = () => {
		api.callOrdereApi("userOrders/orderDetailsInfo?orderId=" + orderId.value, {}, "get").then(res => {
			if (res.code == 200) {
				data.value = res.data;
			}
	
		})
	}
	const gotoRefundRequest=()=>{
		uni.navigateTo({
			url: "/pages/user/views/RefundRequest?orderId="+orderId.value
		})
	}
</script>

<style scoped>
	.fee-appeal-page {
		padding: 20px;
	}

	.bike-fee-card {
		background-color: #fff;
		padding: 16px 16px 0px 16px;
		border-radius: 8px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	}

	.fee-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 12px;
		padding-bottom: 12px;
		border-bottom: 1px solid #f0f0f0;
		/* Add a light separator line */
	}

	.fee-label {

		font-size: 14px;
		font-weight: 500;
		color: #000;
	}

	.fee-amount {
		font-size: 14px;
		/* Slightly smaller text */
		color: #000;
	}

	.bike-fee2-card {
		background: linear-gradient(129deg, rgb(195, 236, 233), rgb(226, 246, 244));
		padding: 5px;
		height: 160px;
		border-radius: 8px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	}

	/* 标题部分 */
	.header {
		font-size: 18px;
		text-align: center;
		font-weight: bold;
		color: #333333;
		height: 60px;
		line-height: 60px;  
    letter-spacing: 2px;
	}

	.header image {
		width: 80px;
		height: 60px;
	}

	/* 内容部分 */
	.content {
		display: flex;
		flex-direction: column;
		gap: 12px;
		background: #fff;
		border-radius: 10px;
		padding: 15px;
	}

	/* 问题标题样式 */
	.issue-title {
		font-size: 14px;
		/* 字体大小 */
		font-weight: bold;
		/* 加粗 */
		color: #444444;
		/* 字体颜色 */
	}

	/* 按钮组样式 */
	.button-group {
		display: flex;
		justify-content: space-between;
		gap: 8px;
		/* 按钮之间的间距 */
	}

	/* 按钮样式 */
	.button-with-border {
		border: 1px solid #d0d0d0;
		/* 按钮边框颜色 */
		border-radius: 4px;
		padding: 5px 30px;
		font-size: 12px;
		text-align: center;
		cursor: pointer;
		font-weight: 500;
	}
</style>