定制商品

peng

2025-10-14 93d859ef23c015d96c7c16024f7c99fe2c054c4f

定制商品

 pages/product/m-buy/goods.vue

@@ -114,7 +114,7 @@
                                    :key="img.id"
                                    class="image-item"
                                    :class="{ selected: selectedImageObjects.some(selectedImg => selectedImg.id === img.id) }"
                                    @click="selectImage(img)"
                                    @click="handleImageClick(img, index)"
                                >
                                    <image 
                                        :src="getFilePreviewUrlSync(img.imgUrl)" 
@@ -125,6 +125,11 @@
                                        <uni-icons type="checkmarkempty" size="30" color="#fff"></uni-icons>
                                    </view>
                                </view>
                            </view>
							
                            <!-- 查看选中图片按钮 -->
                            <view class="view-selected-image" v-if="selectedImageObjects.length > 0" @click="viewSelectedImage">
                                查看选中模板图片
                            </view>
                        </view>
                        
@@ -359,6 +364,8 @@
                        this.preloadTemplateImages();
                        // 初始化模板表单数据
                        this.initTemplateFormData();
                        // 设置默认选中第一张模板图片
                        this.setDefaultSelectedImage();
                    }, 100);
                }
            },
@@ -969,6 +976,58 @@
                this.selectedImageObjects = [];
                this.selectedImages = [];
            }
        },
		
        // 预览模板图片
        previewImage(imgObject, index) {
            // 只预览当前选中的图片
            const urls = [this.getFilePreviewUrlSync(imgObject.imgUrl)];
			
            // 调用uniapp原生API预览图片
            uni.previewImage({
                current: 0, // 当前显示图片的索引（只有一张图片，所以是0）
                urls: urls, // 需要预览的图片链接列表
                indicator: 'default', // 显示索引指示器
                loop: false // 只有一张图片，不需要循环预览
            });
        },
		
        // 处理模板图片点击事件（既可以预览又可以选中）
        handleImageClick(imgObject, index) {
            // 检查当前图片是否已选中
            const isSelected = this.selectedImageObjects.some(selectedImg => selectedImg.id === imgObject.id);
			
            if (isSelected) {
                // 如果已选中，则预览图片
                this.previewImage(imgObject, index);
            } else {
                // 如果未选中，则选中图片
                this.selectImage(imgObject);
            }
        },
		
        // 查看选中的图片
        viewSelectedImage() {
            // 检查是否有选中的图片
            if (this.selectedImageObjects.length > 0) {
                // 获取第一个选中的图片（因为是单选模式）
                const selectedImage = this.selectedImageObjects[0];
                // 预览选中的图片
                this.previewImage(selectedImage, 0);
            }
        },
		
        // 设置默认选中第一张模板图片
        setDefaultSelectedImage() {
            // 检查是否有模板图片且当前没有选中任何图片
            if (this.consumizetemplateInfo && 
                this.consumizetemplateInfo.templateImgs && 
                this.consumizetemplateInfo.templateImgs.length > 0 && 
                this.selectedImageObjects.length === 0) {
                // 选中第一张图片
                const firstImage = this.consumizetemplateInfo.templateImgs[0];
                this.selectImage(firstImage);
            }
        }
    },

@@ -983,6 +1042,9 @@

            // 初始化模板表单数据
            this.initTemplateFormData();
			
            // 默认选中第一张模板图片
            this.setDefaultSelectedImage();

            console.log("goodsDetail",this.goodsDetail)
        }, 100);
@@ -1154,7 +1216,17 @@
.title-text {
    font-size: 36rpx;
    font-weight: bold;
}

// 查看选中图片按钮样式
.view-selected-image {
    margin-top: 20rpx;
    padding: 30rpx;
    text-align: center;
    background-color: #f0f0f0;
    border-radius: 10rpx;
    color: #333;
    font-size: 28rpx;
}

// 图片选择区域