web-app-v1/pages/my-order/order-detail.vue

<template>
	<view class="">
		<scroll-view class="titleTop" scroll-x="true" @scroll="scroll" scroll-left="100%">
			<view class="">
				<view class="titleTop-name" v-for="(item,index) in titleList" :key="index">
					{{item}}
				</view>
			</view>
			<view class="list">
				<view class="" v-for="(item,index) in list" :key="index">
					<view class="list-item" v-for="(str,index) in item" :key="index">
						<text>{{str}}</text>
					</view>
				</view>
			</view>
		</scroll-view>

	</view>
</template>

<script>
	import {
		_API_GetOrderDetail
	} from '@/apis/order.js'
	export default {
		data() {
			return {
				id: '',
				// titleList: ['款式尺码','订单1','订单2','订单3','订单4','合并'],
				// list:[['精-男-L','精-男-XL'],[1,2], [3,0],[1,2],[3,4],[8,12]],
				titleList: [],
				list: []
			}
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			this.id = option.id
		},
		onShow() {
			this.getList()
		},
		computed: {},
		methods: {
			getList() {
				_API_GetOrderDetail({
					id: this.id
				}).then(res => {
					if (res.code === 200) {
						this.list = res.data
						let list = this.list
						let titleList = ['款式尺码']
						for (var i = 0; i < list.length; i++) {
							titleList[i + 1] = '订单' + (i + 1)
						}
						titleList.push('合并')
						titleList.splice(list.length - 1, 2)
						this.titleList = titleList
					} else {
						uni.showModal({
							content: res.message,
							showCancel: false,
							success() {
								uni.navigateBack()
							}
						})
					}

				}).catch(() => {})
			},
			scroll() {}
		},
	}
</script>

<style lang="scss" scoped>
	.titleTop {
		// width: 60rpx;
		white-space: nowrap;

		&-name {
			background-color: #eee;
			line-height: 104rpx;
			display: flex;
			color: #333;
			font-size: 32rpx;
			font-weight: bold;
			display: inline-block;
			text-align: center;
			width: 200rpx;
		}
	}

	.list {
		display: flex;

		&-item {
			width: 200rpx;
			font-weight: bold;
			line-height: 104rpx;
			text-align: center;
			border-right: 1rpx solid #eee;
			border-bottom: 1rpx solid #eee;
		}
	}
</style>