uniapp - 商品详情展示-table风格1_uniapp中list展示图片-优快云博客

本文介绍了一个使用Vue.js实现的订单详情页面，展示了商品信息如编号、名称、规格等，并通过代码展示了如何动态排序和切换显示内容。数据列表采用了flex布局，且支持两种不同的样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.效果图

2.代码如下

<template>
	<view class="DetailContainer">
		<view class="headerTitle" >
			<view class="headerItem" v-for="(item,index) in tabHeaderList" 
			:key="index">
				{{item.title}}
			</view>
		</view>
		<view  v-for="(item,index1) in dataList" :key="index1" 
		:class=" (item.pxxh %2 ==0)  ? itemContent1:itemContent">
			<view class="datItem">
				{{item.pxxh+1}}
			</view>
			<view class="datItem" >
				{{item.aname}}
			</view>
			
			<view class="datItem">
				{{item.amodel}}
			</view>
			
			<view class="datItem">
				{{item.qty}}
			</view>
			
			<view class="datItem">
				{{item.price}}
			</view>
			<view class="datItem">
				{{item.sy}}
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			selectParams: {
				aguid:null
			},
			dataList:[],
			tabHeaderList:[
				{id:1,title:'排序'},
				{id:2,title:'名称'},
				{id:3,title:'规格'},
				{id:4,title:'数量'},
				{id:5,title:'单价'},
				{id:6,title:'金额'}
			],
			itemContent:"dataList ",
			itemContent1:"dataList2",
		};
	},
	async onLoad(option) {
		this.selectParams.aguid = option.aguid
		this.getOrderList();
	},
	

	methods: {

		async getOrderList() {
			if(this.selectParams.aguid == null)
			{
				return
			}
			const res = await this.$u.api.xsbillddDetailList(this.selectParams);
			this.dataList = res
			for(let i = 0,length = this.dataList.length;i<length;i++)
			{
				this.dataList[i].pxxh = i;
				this.dataList[i].sy = parseFloat(this.dataList[i].sy).toFixed(2)
				this.dataList[i].qty = parseFloat(this.dataList[i].qty).toFixed(2)
				this.dataList[i].price = parseFloat(this.dataList[i].price).toFixed(2)
			
			}
		}
	}
};
</script>

<style>
/* #ifndef H5 */
page {
	height: 100%;
	background-color: #FFFFFF;
}
/* #endif */
</style>

<style scoped lang="scss">
	.DetailContainer{
		flex:1;
		.headerTitle{
			display: flex;
			height: 65rpx;
			width: 750rpx;
			font-size: 30rpx;
			color:#1f2025;
			background-color: #d5d5d5;
			text-align: center;
			justify-content: space-between;
			padding-top: 12rpx;
			padding-left: 38rpx;
			padding-right: 38rpx;
			.headerItem{
				padding-left: 5rpx;
			}
		}
		
		.dataList{
			display: flex;
			width: 750rpx;
			font-size: 13rpx;
			color:#1f2025;
			background-color: #d5d5d5;
			justify-content: space-between;
			padding-top: 12rpx;
			padding-left: 10rpx;
			padding-right: 2rpx;
			margin-top: 2rpx;
			.datItem{
				flex:1;
				text-align: center;
				height: auto;
				font-family: Gibson;
				font-size: 13rpx;
				word-break: break-all;
				text-overflow: ellipsis;
				word-wrap: break-word;
				white-space: pre-wrap;
				padding: 5rpx 5rpx;
			}
		}
		.dataList2{
			display: flex;
			width: 750rpx;
			font-size: 13rpx;
			color:#1f2025;
			background-color: #FFFFFF;
			justify-content: space-between;
			padding-top: 12rpx;
			padding-left: 10rpx;
			padding-right: 2rpx;
			margin-top: 2rpx;
			.datItem{
				flex:1;
				text-align: center;
				height: auto;
				font-family: Gibson;
				font-size: 13rpx;
				word-break: break-all;
				text-overflow: ellipsis;
				word-wrap: break-word;
				white-space: pre-wrap;
				padding: 5rpx 5rpx;
			}
		}
	}
</style>