syyxuniapp/pages/goods_details/components/discountsList/index.vue

<template>
	<!-- 搭配购 -->
	<view class="discounts">
		<view class="title">
			<text>搭配购</text>
			<span class="iconfont icon-xiangyou"></span>
		</view>
		<view class="discounts-list">
			<view class="discounts-box" v-for="item in discountsData" :key="item.id">
				<image class="discounts-img" :src="item.image" mode="aspectFill"></image>
				<view class="discounts-msg">
					<text class="discounts-title line1">{{item.title}}</text>
					<!-- #ifdef H5 || APP-PLUS -->
					<slot name="center" :item="item"></slot>
					<!-- #endif -->
					<!-- #ifdef MP -->
					<slot name="center{{item.id}}"></slot>
					<!-- #endif -->
					<view class="discounts-attr line2">
						<text class="" v-for="(attr,index) in item.products" :key="index">
							<text v-if="index > 0">+</text>
							<text>
								{{attr.title.substring(0,5)}}
							</text>
						</text>
					</view>
					<text class="discounts-kc">库存：{{item.is_limit ? item.limit_num : '充足'}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		props: {
			discountsData: {
				type: Array,
				default:()=>[]
			}
		}
	}
</script>

<style lang="scss" scoped>
	.discounts {
		background-color: #fff;
		margin: 0 20rpx;
		border-radius: 12rpx;

		.title {
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid #EEEEEE;
			padding: 24rpx 20rpx;
			margin-top: 20rpx;
			color: #333;

			.iconfont {
				font-size: 14px;
				color: #7a7a7a;
			}
		}

		.discounts-list {
			display: flex;
			align-items: center;
			width: 100%;
			overflow-x: scroll;

			.discounts-box {
				display: flex;
				align-items: center;
				padding: 24rpx;

				.discounts-img {
					width: 180rpx;
					height: 180rpx;
					border-radius: 8rpx;
					margin-right: 24rpx;
				}

				.discounts-msg {
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					color: #333333;
					height: 164rpx;

					.discounts-title {
						font-size: 28rpx;
						font-weight: bold;
						width: 450rpx;
						span{
							width: 100%;
						}
					}

					.discounts-attr {
						// display: flex;
						flex-wrap: wrap;
						width: 450rpx;
						max-height: 398rpx;
						font-size: 20rpx;
						// overflow: hidden;
					}

					.discounts-kc {
						color: var(--view-theme);
						font-size: 20rpx;
					}
				}
			}
		}
	}
</style>