https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html，用下这个工具，提交下代码片段吧

给这个https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html

天书一样的东西谁愿意多看两眼

<template>
	<view class="goodsDetail-box" :class="isMore ? 'max-height' : ''">
		<view class="title-line"> <text class="title">商品明细</text> <text @tap="isMoreChange" v-if="isMore" class="icon iconleft-arrow-copy"></text> <text v-else @tap="isMoreChange" class="icon iconbottom-arrow"></text> </view>
		<view class="goodsList" v-for="(item,index) in goodsList" :key="index">
			<view class="goods-top">
				<view class="goods-image">
					
				</view>
				<view class="goods-type">
					<view class="font-color">{{item.danhao}}</view>
					<view class=""> <text>{{item.type}}</text><text style="padding: 0 20rpx;">{{item.color}}</text> </view>
					<view class="flex">
						<text class=""> 吊牌价：￥{{item.amout}} </text>
						<text class=""> 发货类型：{{item.goodsWillType}} </text>
					</view>
				</view>
			</view>
			<view class="name-code">
				<view class="name">
					<view class="bg-w">尺码</view>
					<view :class="indext % 2 ? 'bg-w' : ''" v-for="(itemt,indext) in item.data" :key="indext"> {{itemt.size}} </view>
				</view>
				<view class="code-type">
					<scroll-view scroll-x="true" class="tabs_container">
						<view :key="indexd" class="tabs_item" v-for="(itemd,indexd) in item.SUMMARY">
							<view class="bg-w"> {{itemd.typeName}} </view>
							<view class="menus" :key="indexz" :class="indexz % 2 ? 'bg-w' : ''" v-for="(itemz,indexz) in item.data">
								<text :key="indexg" v-for="(itemg,indexg) in itemz.list"><text v-if="indexg == indexd">{{itemg.nums}}</text></text>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				isMore: false
			}
		},
		props: {
			goodsList: {
				type: Array,
				default: [] 
			},
		},
		methods: {
			isMoreChange() {
				this.isMore = !this.isMore
			}
		},
	}
</script>


<style>
.flex {
	display: flex;
	justify-content: space-between;
	align-items: center;
}


.font-color {
	color: #444;
}


.icon {
	font-size: 26rpx;
	padding-left: 30rpx;
}


.goodsDetail-box {
	margin: 20rpx;
	border-radius: 10rpx;
	background-color: #fff;
	max-height: 80rpx;
	transition: max-height 800ms;
	overflow: hidden;
}




.goodsDetail-box .title-line{
	display: flex;
	line-height: 80rpx;
	align-items: center;
	justify-content: space-between;
	padding: 0 20rpx;
}


.max-height {
	max-height: 4000rpx;
}


.goodsDetail-box .title {
	font-weight: bold;
}


.goodsList .goods-top{
	display: flex;
	padding: 0 20rpx;
}


.goodsList .goods-top .goods-image {
	width: 144rpx;
	height: 144rpx;
	border-radius: 4rpx;
}


.goodsList .goods-top .goods-type {
	padding-left: 20rpx;
	color: #999;
	flex: 1;
}


.goodsList .goods-top .goods-type view {
	line-height: 48rpx;
}


.name-code {
	display: flex;
	font-size: 26prx;
	margin: 20rpx;
	border-bottom: 1rpx solid #F3F3F3;
}


.name-code .name view {
	width: 120rpx;
	height: 80rpx;
	text-align: center;
	line-height: 80rpx;
	font-size: 26rpx;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}


.name-code .code-type {
	/* flex: 1; */
	width: calc(100% - 120rpx);
}


.tabs_container {
	width: 100%;
	white-space: nowrap;
	height: 100%;
}


.tabs_item {
	min-width: 150rpx;
	height: 80rpx;
	line-height: 80rpx;
	display: inline-block;
	text-align: center;
	font-size: 26rpx;
}


.tabs_item view {
	padding: 0 20rpx;
}


.text-r {
	color: #FF004F;
}


.pageNoS {
	position: fixed;
	width: 100%;
}


.menus {
	padding: 0 20rpx;
}


.bg-w {
	background-color: #F8F8F8!important;
}
	
</style>