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="productDetail" 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.price }}</text>
					</view>
					<view class="flex info-row">
						<text>订单号</text>
						<text>{{ orderDetail.orderNo }}</text>
					</view>
					<view class="flex info-row">
						<text>付款时间</text>
						<text>{{ orderDetail.payTime }}</text>
					</view>
					<view class="flex info-row">
						<text>核销时间</text>
						<text>{{ orderDetail.verifyTime }}</text>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

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

  const TEMP_BANNER_IMG_URL = 'http://gips3.baidu.com/it/u=70459541,3412285454&fm=3028&app=3028&f=JPEG&fmt=auto?w=960&h=1280'

	export default {
		components: {
			productCard
		},
		computed: {},
		data() {
			return {
        // todo: fetch
        productDetail: {
          id: '001',
					imgUrl: TEMP_BANNER_IMG_URL,
					price: 99,
					num: 1,
					sales: 235,
					title: '60分钟肩颈推拿按摩',
					desc: '疏通经络 放松肌肉',
					tags: ['专业技师', '舒适环境', '深度放松'],
					details: '<p>这里是商品详情..............<br/>这里是商品详情..............</p>'
				},
        orderDetail: {
          id: '001',
          orderNo: 'da123567',
					price: 99,
					payTime: '2024-12-24 18:45:23',
					verifyTime: '2024-12-24 18:45:23',
        },
				id: 0,
			}
		},
		onLoad(args) {
			this.id = args.id
		},
		onShow() {
			this.getOrderDetail()
		},
		onPullDownRefresh() {
			this.getOrderDetail()
		},
		methods: {
			getOrderDetail() {
				// todo: delete test code
				return
				this.$api('getOrderDetail', {
					id: this.id
				}, res => {
					uni.stopPullDownRefresh()
					if (res.code == 200) {
						this.order = res.result
					}
				})
			},

			//复制内容
			copy(content) {
				uni.setClipboardData({
					data: content,
					success: () => {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						})
					}
				})
			},
		}
	}
</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>