jp-charge/pages/user/rechargeDeatilsByPhone.vue

<template>
	<view>
		<ujp-navbar title="充值详情">
		</ujp-navbar>
		<view class="chargeDetails">
			<view class="chargeDetails-item">
				<span>充值金额</span>
				<p class="price">{{detail.orderInfo.totalFee}}元</p>
			</view>
			<view class="chargeDetails-item">
				<span>充值类型</span>
				<p>帮人充值</p>
			</view>
			<view class="chargeDetails-item">
				<span>充值账号</span>
				<p>{{detail.otherRecharge.phone}}</p>
			</view>
			<view class="chargeDetails-item">
				<span>创建时间</span>
				<p>{{detail.orderInfo.createTime}}</p>
			</view>
			<view class="chargeDetails-item">
				<span>订单号</span>
				<p>{{detail.orderInfo.outOrderNo}}</p>
			</view>
			<view class="chargeDetails-item">
				<span>交易号</span>
				<p>{{detail.orderInfo.transactionId}}</p>
			</view>
		</view>
	</view>
</template>

<script>
	import * as API from '@/apis/otherRecharge.js'
	
	export default {
		data() {
			return {
				id:'',
				detail:{
					otherRecharge:{},
					accountRecord:{},
					orderInfo:{},
				}
			}
		},
		onLoad(op){
			this.id=op.id;
			this.getInfo()
		},
		methods: {
			getInfo(){
				uni.showLoading({
					title:"加载中",mask:true,
				})
				API.rechargeDetails({
					id:this.id
				}).then((res) => {
					this.detail=res.data	 
					
					uni.hideLoading()
					 
				}).catch(error => {
						uni.showToast({
							
							title:error
						})
				})
			}
		}
	}
</script>
<style>
	page{
		background-color: #f7f7f7;
	}
</style>
<style lang="scss" scoped>
	.chargeDetails{
		background-color: #FFFFFF;
		.chargeDetails-item{
			margin:0 10px;
			border-bottom: 1px solid #F7F7F7;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 15px;
			span{
				color:#999;
			}
		}
		.price{
			font-size: 20px;
			color:#FF3D00;
			font-weight: bold;
		}
	}
</style>