baiyuApp/pages_mall/components/RecommendSection.vue

<template>
	<view class="recommend-section" v-if="hasContent">
		<!-- 平均分（占位，无数据时显示 —） -->
		<view class="score-row" v-if="showScore">
			<text class="score-label">平均分</text>
			<text class="score-value">{{ averageScore != null ? averageScore : '—' }}</text>
		</view>

		<view class="recommend-layout">
			<!-- 左侧：直播卡片轮播，自动滚动 + 可手动左右滑动，右上角 当前index/总数量 -->
			<view class="block-left-wrap" v-if="liveList.length > 0" @click="onLive">
				<swiper class="live-swiper" :current="liveCurrent" circular :indicator-dots="false" :autoplay="true"
					:interval="3000" :duration="1000" indicator-color="rgba(255, 255, 255, 0.6)"
					indicator-active-color="#ffffff" @change="onLiveSwiperChange">
					<!-- <swiper-item v-for="(item, idx) in liveList" :key="idx" @click="onLiveClick(item)">
						<view class="block-left">
							<view class="x-c" :class="['block-label', isLiving(item) ? 'live' : 'replay']">
								<image class="w24 h24"
									:src="isLiving(item) ? '/static/images/live.gif' : '/static/images/replay.png'"
									mode="aspectFill"></image>
								{{ isLiving(item) ? '直播中' : '回放' }}
							</view>
							<image class="block-img" :src="item.liveImgUrl" mode="aspectFill"></image>
							<view class="block-tit">
								<image class="item-avatar" src="/static/logo.jpg" mode="aspectFill"></image>
								<view class="item-title one-t">{{ item.liveName }}</view>
							</view>
						</view>
					</swiper-item> -->
					<swiper-item>
						<view class="block-left">
							<image class="block-img" src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/app/image/yuanxiangxing.png" mode="aspectFill"></image>
							<view class="block-title one-t">央广会客厅</view>
						</view>
					</swiper-item>
				</swiper>
				<!-- <view class="swiper-dots" v-if="liveList.length > 1">
					<text v-for="(dot, index) in liveList.length" :key="'live-dot-' + index"
						:class="liveCurrent === index ? 'dot-active' : 'dot'"></text>
				</view> -->
			</view>

			<!-- 右侧：上 绿色有机，下 上新推荐 -->
			<view class="block-right">
				<view class="block-small">
					<view class="block-small-head">
						<image class="w140" src="@/static/images/new.png" mode="widthFix"></image>
						<view class="more" @click.stop="goMore('hot')">
							<text class="green">更多</text>
							<u-icon name="play-right-fill" color="#FF5B25" size="24rpx"></u-icon>
						</view>
					</view>
					<view class="block-small-body">
						<view class="small-item" v-for="(item, i) in hot.slice(0, 2)" :key="i"
							@click.stop="onItemClick(item, 'hot')">
							<image class="small-thumb" :src="getFirstImage(item)" mode="aspectFill"></image>
							<view>
								<text class="unit">¥</text>
								<text class="small-price" v-if="item.price != null">{{ Number(item.price).toFixed(2)
									}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="block-small">
					<view class="block-small-head">
						<image class="w140" src="@/static/images/hot.png" mode="widthFix"></image>
						<view class="more" @click.stop="goMore('green')">
							<text class="hot">更多</text>
							<u-icon name="play-right-fill" color="#FF485D" size="24rpx"></u-icon>
						</view>
					</view>
					<view class="block-small-body">
						<view class="small-item" v-for="(item, e) in green.slice(0, 2)" :key="e"
							@click.stop="onItemClick(item, 'green')">
							<image class="small-thumb" :src="getFirstImage(item)" mode="aspectFill"></image>
							<view>
								<text class="unit">¥</text>
								<text class="small-price" v-if="item.price != null">{{ Number(item.price).toFixed(2)
									}}</text>
							</view>

						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'RecommendSection',
	props: {
		live: { type: Array, default: () => [] },
		green: { type: Array, default: () => [] },
		hot: { type: Array, default: () => [] },
		averageScore: { type: [String, Number], default: null },
		showScore: { type: Boolean, default: false }
	},
	computed: {
		hasContent() {
			return (this.live && this.live.length > 0) || (this.green && this.green.length > 0) || (this.hot && this.hot.length > 0)
		},
		liveList() {
			return this.live && this.live.length > 0 ? this.live : []
		},
		liveCurrentDisplay() {
			return this.liveList.length > 0 ? this.liveCurrent + 1 : 0
		}
	},
	data() {
		return {
			liveCurrent: 0
		}
	},
	methods: {
	onLive(){
		uni.showToast({
			title: '暂无课程',
			icon: 'none'
		})
	},
		onLiveSwiperChange(e) {
			this.liveCurrent = e.detail.current
		},
		isLiving(item) {
			if (!item) return false
			if (item.liveType === 1) return true
			if (item.liveType === 2 && item.liveFlag === 1) return true
			return false
		},
		onLiveClick(item) {
			//console.log(item)
			this.$emit('liveClick', item)
		},
		goMore(type) {
			this.$emit('more', { type })
		},
		onItemClick(item, type) {
			//this.$emit('itemClick', { item, section: { type } })
			this.$emit('itemClick', item,type)
		},
		// 取 sliderImage 逗号拼接的第一张图，没有则用 image
		getFirstImage(item) {
			if (!item) return ''
			const str = item.sliderImage || item.image || ''
			if (typeof str !== 'string') return item.image || ''
			const first = str.split(',')[0]
			return (first && first.trim()) || item.image || ''
		}
	}
}
</script>

<style lang="scss" scoped>
.recommend-section {
	margin: 30rpx 24rpx 40rpx;
}

.score-row {
	display: flex;
	align-items: center;
	margin-bottom: 16rpx;
	font-size: 26rpx;
}

.score-label {
	color: #666;
	margin-right: 12rpx;
}

.score-value {
	color: #333;
	font-weight: 600;
}

.recommend-layout {
	display: flex;
	gap: 20rpx;
}

.block-left-wrap {
	flex: 1;
	// width: 340rpx;
	flex-shrink: 0;
	// height: 420rpx;
	border-radius: 24rpx;
	overflow: hidden;
	position: relative;
}

.live-swiper {
	width: 100%;
	height: 100%;
}

.block-left {
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: #f5f5f5;
	position: relative;
}

.live-index-badge {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
	font-size: 22rpx;
	padding: 8rpx 16rpx;
	border-radius: 0 0 0 12rpx;
}

.block-label {
	position: absolute;
	top: 20rpx;
	left: 0;
	z-index: 2;
	color: #fff;
	font-size: 24rpx;
	padding: 8rpx 20rpx;
	background: linear-gradient(135deg, #FF5267 0%, #FF233C 100%);
	border-radius: 0rpx 8rpx 8rpx 0rpx;

	image {
		margin-right: 4rpx;
	}
}

// .block-label.live {
// 	background: #E5212B;
// }
// .block-label.replay {
// 	background: #666;
// }
.block-img {
	width: 100%;
	height: 100%;
	display: block;
}

.block-title {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0, 0, 0, 0.45);
	color: #fff;
	font-size: 26rpx;
	padding: 16rpx;
}
.block-tit {
	display: flex;
	align-items: center;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0, 0, 0, 0.45);
	color: #fff;
	font-size: 26rpx;
	padding: 16rpx 16rpx 50rpx;

	.item-avatar {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		margin-right: 10rpx;
	}

	.item-title {
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 44rpx;
	}
}
.swiper-dots {
	display: flex;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 12rpx;
	z-index: 3;
	gap: 6rpx;
}

.dot {
	width: 8rpx;
	height: 8rpx;
	background: #FFFFFF;
	opacity: 0.7;
	border-radius: 4rpx;
}

.dot-active {
	width: 16rpx;
	height: 8rpx;
	background: #FFFFFF;
	border-radius: 4rpx;
}

.block-right {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 20rpx;
	min-width: 0;
}

.block-small {
	flex: 1;
	background: linear-gradient(180deg, #FFC7A7 0%, #FFF8F3 36.36%, #FFFFFF 100%);
	border-radius: 24rpx;
	overflow: hidden;
	padding: 16rpx;

	&:last-child {
		background: linear-gradient(180deg, #FFC5C5 0%, #FFF5F5 36.36%, #FFFFFF 100%);
	}
}

.block-small-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 18rpx;
}

.block-small-title {
	font-size: 28rpx;
	font-weight: 600;
}

.green {
	color: #FF5B25;
}

.hot {
	color: #FF485D;
}

.more {
	display: flex;
	align-items: center;
	font-size: 28rpx;

	text {
		margin-right: 5rpx;
	}

	// color: #999;
}

.arrow {
	margin-left: 4rpx;
	font-size: 28rpx;
}

.block-small-body {
	display: flex;
	// gap: 16rpx;
}

.small-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.small-thumb {
	width: 110rpx;
	height: 110rpx;
	border-radius: 10rpx;
}

.unit {
	font-weight: 600;
	font-size: 20rpx;
	color: #FF233C;
	margin-top: 8rpx;
	margin-right: 4rpx;
}

.small-price {
	font-size: 32rpx;
	font-weight: 600;
	color: #FF233C;
	margin-top: 8rpx;
}
</style>