massage-front/pages_order/order/orderDetail.vue

<template>
  <view class="page">
		<navbar title="订单详情" leftClick @leftClick="$utils.navigateBack" color="#fff" />

		<view class="page-content">
			<view class="page-label">订单详情</view>
      <!-- 商品详情 -->
      <productCard :data="orderDetail.massageItem" size="medium" :readonly="true"></productCard>
		
			<view class="info">
				<view class="info-header">订单信息</view>
				<view class="info-content">
					<view class="flex info-row">
						<text>实付款</text>
						<text class="price"><text class="price-unit">¥</text>{{ orderDetail.amount }}</text>
					</view>
					<view class="flex info-row">
						<text>订单号</text>
						<text>{{ orderDetail.id }}</text>
					</view>
					<view class="flex info-row">
						<text>付款时间</text>
						<text>{{ orderDetail.payTime }}</text>
					</view>
					<view class="flex info-row">
						<text>核销时间</text>
						<text>{{ orderDetail.validTime }}</text>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import productCard from '@/components/product/productCard.vue'
	import {
		mapState
	} from 'vuex'

	export default {
		components: {
			productCard
		},
		computed: {},
		data() {
			return {
				id: null,
        orderDetail: {},
			}
		},
		onLoad(args) {
			this.id = args.id
			this.fetchOrderDetail()
		},
		onPullDownRefresh() {
			this.fetchOrderDetail()
		},
		methods: {
			async fetchOrderDetail() {
				try {
					
					this.orderDetail = await this.$fetch('queryOrderById', { id: this.id })

				} catch (err) {

				}

				uni.stopPullDownRefresh()
			},
		}
	}
</script>

<style scoped lang="scss">

	.page {
		height: 100vh;
		background-color: #FFFFFF;

		/deep/ .nav-bar__view {
			background-image: linear-gradient(#84A73F, #D8FF8F);
		}

		/deep/ .product-card__view {
			padding: 19rpx 7rpx 28rpx 7rpx !important;
		}

		&-content {
			padding: 35rpx 46rpx;
		}

		&-label {
			color: #000000;
			font-size: 28rpx;
			padding-left: 11rpx;
			position: relative;
			margin-left: 7rpx;

			&:before {
				content: ' ';
				width: 5rpx;
				height: 40rpx;
				background-image: linear-gradient(#84A73F, #D8FF8F);
				border-radius: 3rpx;

				position: absolute;
				left: 0;
			}
		}
	}

	.info {
		padding: 30rpx 7rpx;
		border-top: 1px dashed #707070;
		color: #999999;
		font-size: 22rpx;

		&-header {
			color: #000000;
			font-size: 28rpx;
		}
		
		&-row {
			justify-content: space-between;
			margin-top: 23rpx;
		}

		.price {
			color: #000000;

			&-unit {
				font-size: 14rpx;
			}
		}
	}

</style>