fanghuayuexuan/pages/home/components/home-discount.vue

<!--
 * @Author: jmy
 * @Date: 2026-01-06 12:02:41
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2026-01-06 15:02:20
 * @Description: 自定义轮播图组件
-->
<template>
	<view class="w-all relative zi-2 mt-4">
		<swiper class="w-all" :style="{ height: height * 2 + 'rpx' }" :circular="circular"
			:indicator-dots="indicatorDots" indicator-active-color="#02B176" indicator-color="#EEEEEE"
			:autoplay="autoplay" :interval="interval" :duration="duration" :current="current"
			:display-multiple-items="displayMultipleItems" :next-margin="nextMargin" @change="change"
			@transition="transition" @animationfinish="animationfinish">
			<swiper-item class="flex flex-wrap h-all" v-for="(item, index) in list" :key="index">
				<view class="w-74 h-82 bg-white flex items-center justify-center">
					<view class="w-64 h-82 flex flex-column items-center justify-center">
						<image :src="item.image || 'https://cdn.his.cdwjyyh.com/images/img.png'" class="w-35 h-44" />
						<view class="h-15 text-ellipsis fw-400 fs-11 my-3">{{ item.productName || '商品名称' }}</view>
						<view class="w-54 h-16 rounded-16 bg-FA341E text-white text-center fs-9 relative">
							¥<text class="fs-13">{{ splitPrice(item.price).integer || '00' }}</text>
							<text class="fs-9">{{ splitPrice(item.price).decimal || '00' }}</text>
							<image src="https://cdn.his.cdwjyyh.com/images/sdyhzq_arrow_icon.png"
								class="w-16 h-16 absolute top-0 left--6 zi-10" />
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<view class="flex items-center justify-center w-all gap-6 mt-11" v-if="isCustomDot">
			<view v-for="(item, index) in list" :key="index" class="w-10 h-2 rounded-1"
				:class="index == current ? 'bg-02B176' : 'bg-EEEEEE'"></view>
		</view>
	</view>
</template>
<script>
export default {
	props: {
		swiperList: {
			type: Array,
			default: () => []
		},
		height: {
			type: Number,
			default: 85
		},
		indicatorDots: {
			type: Boolean,
			default: false
		},
		circular: {
			type: Boolean,
			default: true
		},
		autoplay: {
			type: Boolean,
			default: false
		},
		interval: {
			type: Number,
			default: 3000
		},
		duration: {
			type: Number,
			default: 1000
		},
		displayMultipleItems: {
			type: Number,
			default: 2
		},
		nextMargin: {
			type: String,
			default: '0'
		},
		current: {
			type: Number,
			default: 0
		},
		isCustomDot: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			list: [],
			currentDot: 0
		}
	},
	mounted() {
		console.log("首单优惠专区", this.swiperList);
		// 添加存在性检查
		this.list = this.swiperList && this.swiperList[0] && this.swiperList[0].productList ? this.swiperList[0].productList : [];
		console.log("数据", this.swiperList);
	},
	methods: {
		splitPrice(price) {
			const priceStr = parseFloat(price).toFixed(2).toString();
			return {
				integer: priceStr.split('.')[0],
				decimal: priceStr.split('.')[1]
			};
		},
		change(e) {
			this.$emit('change', e.detail.current);
		},
		transition(e) {
			this.$emit('transition', e.detail.current);
		},
		animationfinish(e) {
			this.$emit('animationfinish', e.detail.current);
		},
		handleNavTo(value) {
			console.log('导航到:', value);
		}
	}
};
</script>
<style lang="scss" scoped>
</style>