high-mini/subPages/Phone-recharge-details/Phone-recharge-details.vue

<template>
	<view>
		<image src="../static/phone.png" class="width20w mart20" mode="widthFix"></image>
		<view class="font14 fotct fcor333">话费充值</view>
		<view class="fotct font48 fcor333 mart10">{{phoneorderdes.orderPrice}}<text class="font14">元</text></view>
		<view class="linec6 width90 mart10"></view>
		<view class="width90 mart20 fcor666 font18">
			交易状态 : <text class="paysuc"> 支付成功</text>
		</view>
		<view class="width90 mart15 height22">
			<view class="flleft fcor333 width50 font15">订单流水号</view>
			<view class="flright fcor666 width50 fotrt font13">{{phoneorderdes.orderNo}}</view>
		</view>
		<view class="width90 mart15 height22">
			<view class="flleft fcor333 width50 font15">创建消费订单</view>
			<view class="flright fcor666 width50 fotrt font13">{{phoneorderdes.orderPrice}}元</view>
		</view>
		<view class="width90 fcor666 font13">
			{{phoneorderdes.createTimed | timeFormat('yyyy-mm-dd')}} {{phoneorderdes.createTimed | timeFormat('hh:mm')}}
		</view>
		<view class="width90 mart15 height22">
			<view class="flleft fcor333 width50 font15">支付成功</view>
			<view class="flright fcor666 width50 fotrt font13">{{phoneorderdes.payRealPrice}}元</view>
		</view>
		<view class="width90 fcor666 font13">
			{{phoneorderdes.payTime | timeFormat('yyyy-mm-dd')}} {{phoneorderdes.payTime | timeFormat('hh:mm')}}
		</view>
		<view class="linec6 width90 mart10"></view>

		<view class="width90 mart10 fcor333 font15">
			话费充值 : {{phoneorderdes.rechargeContent}}｜{{phoneorderdes.operatorName}}
		</view>
		<view class="width90 mart15 height22">
			<view class="flleft fcor333 width50 font15">订单总额</view>
			<view class="flright fcor666 width50 fotrt font13">{{phoneorderdes.orderPrice == null ? '0': phoneorderdes.orderPrice}}元</view>
		</view>
		<view class="width90 mart15 height22">
			<view class="flleft fcor333 width50 font15">优惠券抵扣</view>
			<view class="flright fcor666 width50 fotrt font13">{{phoneorderdes.discountDeductionPrice == null ? '0': phoneorderdes.discountDeductionPrice}}元</view>
		</view>
		<view class="width90 mart15 height22">
			<view class="flleft fcor333 width50 font15">积分抵扣</view>
			<view class="flright fcor666 width50 fotrt font13">{{phoneorderdes.integralDeductionPrice == null ? '0': phoneorderdes.integralDeductionPrice}}元</view>
		</view>
		<view class="width90 mart15 height22">
			<view class="flleft fcor333 width50 font15">实际支付金额</view>
			<view class="flright fcor666 width50 fotrt font13">{{phoneorderdes.payRealPrice == null ? '0': phoneorderdes.payRealPrice}}元</view>
		</view>
		<view class="width100 height90"></view>
		<button class="coupne-btn width100" @click="toUser">个人中心</button>
	</view>
</template>

<script>
	import {
		getPhoneOrderById
	} from '../../Utils/Api.js';
	let app = getApp();
	export default {
		data() {
			return {
				orderid: '',
				phoneorderdes:''
			}
		},
		onLoad(options) {
			this.orderid = options.id;
			this.getPhoneOrderById();
		},
		methods: {
			//跳转到我的页面
			toUser() {
				uni.switchTab({
					url: '../../pages/tabBar/user/user'
				});
			},
			getPhoneOrderById() {
				let params = {
					orderId: this.orderid
				}
				getPhoneOrderById(params).then(res => {
					if (res.return_code == '000000') {
						this.phoneorderdes = res.return_data;
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
	}

	.paysuc {
		color: #81bd3f;
	}

	.coupne-btn {
		position: fixed;
		bottom: 0px;
		background-color: #089bf5;
		color: #FFFFFF;
		border-radius: 0px;
	}
</style>