crm-app-vue3/components/imgs-row-scroll/index.vue

<template>
	<view class="imgs-row-scroll" :style="{ maxWidth: containerWidth + 'rpx' }">
		<u-scroll-list :indicator="true" :indicator-width="indicatorWidth" :indicator-bar-width="indicatorBarWidth" class="scroll-list">
			<view class="img-list">
				<view 
					class="img-item" 
					:class="{ 'is-active': highlightActive && index === localActiveIndex }"
					v-for="(item, index) in imageUrls" 
					:key="index"
					@click.stop="handleImageClick(item, index)"
					:style="{ 
						marginRight: itemMargin + 'rpx',
						width: imageWidth + 'rpx',
						height: imageHeight + 'rpx'
					}"
				>
					<image 
						:src="item" 
						:mode="imgMode"
						:lazy-load="true"
						class="img-content"
						@error="handleImageError"
					/>
					<view 
						v-if="isShowDeleteIcon" 
						class="delete-icon"
						@click.stop="handleDelete(index, item)"
					>
						<u-icon name="close" color="#fff" size="16"></u-icon>
					</view>
				</view>
			</view>
		</u-scroll-list>
	</view>
</template>

<script>
export default {
	name: 'ImgsRowScroll',
	props: {
		images: {
			type: Array,
			default: () => []
		},
		// 从数组对象中读取图片地址的属性名
		keyName: {
			type: String,
			default: ''
		},
		// 是否启用预览功能
		previewEnabled: {
			type: Boolean,
			default: true
		},
		// 图片裁剪模式
		imgMode: {
			type: String,
			default: 'aspectFill'
            // - aspectFit ：完整显示（保持比例，不裁剪）
            // - aspectFill ：填充显示（裁剪图片填充容器）
            // - scaleToFill ：拉伸显示（可能变形）
		},
		// 图片间距
		itemMargin: {
			type: Number,
			default: 16
		},
		// 图片宽度
		imageWidth: {
			type: Number,
			default: 200
		},
		// 图片高度
		imageHeight: {
			type: Number,
			default: 200
		},
		// 容器总宽度
		totalWidth: {
			type: Number,
			default: 0,
			// 说明：不传或传0时，默认100%宽度；传入正数时使用指定的rpx宽度
			// 例如：传600表示容器宽度为600rpx
		},
		// 是否显示指示器
		showIndicator: {
			type: Boolean,
			default: true
		},
		// 指示器宽度
		indicatorWidth: {
			type: Number,
			default: 50
		},
		// 指示器滑块宽度
		indicatorBarWidth: {
			type: Number,
			default: 30
		},
		// 是否显示删除图标
		isShowDeleteIcon: {
			type: Boolean,
			default: false
		},
		// 是否开启高亮当前选中项
		highlightActive: {
			type: Boolean,
			default: false
		},
		// 当前选中的索引 (外部控制)
		activeIndex: {
			type: Number,
			default: -1
		}
	},
	data() {
		return {
			localActiveIndex: -1
		}
	},
	watch: {
		activeIndex: {
			handler(val) {
				this.localActiveIndex = val;
			},
			immediate: true
		}
	},
	computed: {
		// 处理图片地址数组
		imageUrls() {
			if (!this.images || this.images.length === 0) {
				return [];
			}
			
			// 如果没有指定keyName，直接返回数组内容
			if (!this.keyName) {
				return this.images;
			}
			
			// 如果指定了keyName，从对象中提取指定属性
			return this.images.map(item => {
				if (typeof item === 'object' && item !== null) {
					return item[this.keyName] || '';
				}
				return item;
			}).filter(url => url); // 过滤掉空值
		},
		
		// 容器宽度
		containerWidth() {
			if (this.totalWidth > 0) {
				return this.totalWidth + 'rpx';
			}
			return '100%';
		}
	},
	methods: {
		handleImageClick(item, index) {
			if (this.highlightActive) {
				this.localActiveIndex = index;
			}
			this.$emit('clickImg', { item, index });
			if (!this.previewEnabled) {
				return;
			}
			
			this.previewImage(item, index);
		},
		
		// 预览图片
		previewImage(current, currentIndex) {
			// 过滤掉无效的图片地址
			const validUrls = this.imageUrls.filter(url => url && url.trim());
			
			if (validUrls.length === 0) {
				uni.showToast({
					title: '没有可预览的图片',
					icon: 'none'
				});
				return;
			}
			
			uni.previewImage({
				current: current, // 当前显示图片的http链接
				urls: validUrls, // 需要预览的图片http链接列表
				success: () => {
					console.log('图片预览成功');
				},
				fail: (err) => {
					console.error('图片预览失败:', err);
					uni.showToast({
						title: '预览失败',
						icon: 'none'
					});
				}
			});
		},
		
		// 处理图片加载错误
		handleImageError(e) {
			console.error('图片加载失败:', e.detail.errMsg);
		},
		
		// 处理删除图片
		handleDelete(index, item) {
			const newImages = this.images.slice();
			newImages.splice(index, 1);
			this.$emit('deleteImgInfo', {
				delIndex: index,
				delUrl: item,
				newImages
			});
		}
	}
};
</script>

<style lang="scss" scoped>
    @import './index.scss'
</style>