dianpin-h5-4000-0827/pages/my/orderdetails.vue

<template>
	<view class="home-content">

		<view class="gray-line"/>

		<view class="from">
			
			<view class="from-line">
				<span class="label-class">订单编号:</span>
				<view><input v-model="order.orderCode"/></view>
			</view>
			<view class="from-line">
				<span class="label-class">创建时间:</span>
				<view><input v-model="order.createTime"/></view>
			</view>
			<view class="from-line">
				<span class="label-class">姓名:</span>
				<view><input v-model="order.userName"/></view>
			</view>
			<view class="from-line">
				<span class="label-class">联系方式:</span>
				<view><input v-model="order.mobilePhone"/></view>
			</view>
			<view class="from-line">
				<span class="label-class">学校:</span>
				<view><input v-model="order.schoolName"/></view>
			</view>
			<view class="from-line">
				<span class="label-class">年级:</span>
				<view><input v-model="order.gradeName"/></view>
			</view>
			<view class="from-line">
				<span class="label-class">班级:</span>
				<view><input v-model="order.className"/></view>
			</view>
			<view class="from-line">
				<span class="label-class">价格:</span>
				<view><input v-model="order.totalPrice"/></view>
			</view>
			
	
		</view>
	
		<view class="gray-line"/>
		
		<view class="from">
			<view class="from-line">
				<span class="label-class">订阅内容</span>
			</view>
			<view class="form-context" v-for="(item,index) in order.list" >
				¥ {{item.unitPrice}} {{item.bookitems}}
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				order:{}
			}
		},
		methods: {
			getById(id){
				this.$api('getOrderById', {'id':id}).then(res => {
					if(res.code == 200){
						this.order =res.result;
					}
				})
			}
			
		},
		onLoad(optons) {
			console.log("optons.id"+optons.id)
			this.getById(optons.id)
		}
	}
</script>

<style lang="scss" scoped>
	.home-content {
		
		.gray-line {
			width: 100vw;
			height: 10rpx;
			background-color: #F0F0F0;
		}
		
		.from {
			margin-top: 20rpx;
			background-color: #FFFFFF;
			padding: 25rpx;
		}
		
		.from-line {
			
			height: 78rpx;
			display: flex;
			background-color: #FFFFFF;
			
			.label-class{
				line-height: 68rpx;
				width: 148rpx;
				color: #333;
			}
			
			input{
				padding-left: 10rpx;
				height: 68rpx;
				color: #aaa;
			}	
			
		}
		
		.form-context{
			padding: 36rpx;
			color: #888;
			font-size: 30rpx;
		}
	}
</style>