crm-app-vue3/components/remote-search-select/index.vue

<template>
    <view class="remote-search-select">
        <view class="search-container">
            <u-search :placeholder="placeholder" :value="value" :disabled="disabled" :maxlength="maxlength"
            :show-action="showAction" :action-text="actionText" :shape="shape" :bg-color="bgColor"
            :border-radius="borderRadius" :clearabled="clearabled" :prefix-icon="prefixIcon" :suffix-icon="suffixIcon"
            @input="handleInput" @clear="handleClear" @focus="handleFocus" @blur="handleBlur"/>
            <u-icon name="camera" v-if="cameraEnabled" @click="handleCameraClick" size="30"></u-icon>
        </view>

        <scroll-view v-if="resultsShow && searchResults.length > 0" class="result-list" scroll-y
            @scrolltolower="handleScrollToLower">
            <u-cell-group>
                <u-cell v-for="(item, index) in searchResults" :key="index" :title="item.model"
                    @click="handleSelectItem(item)" />
            </u-cell-group>
        </scroll-view>
        <!-- 空 -->
        <u-empty v-if="searchResults.length === 0 && !value"></u-empty>
        <!-- 加载状态 -->
        <view v-if="loading" class="loading-state">
            <u-loading-icon mode="circle" size="20"></u-loading-icon>
            <text class="loading-text">搜索中...</text>
        </view>
        <!-- 图片识别结果 -->
        <u-popup title="图片识别结果" :show="show" @open="openImgPopup" mode="bottom" :round="10" :closeOnClickOverlay="false">
            <view class="img-preview-container" @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd">
                <view class="image-section" :class="{ 'expanded': isImageExpanded }">
                    <view class="image-container" v-if="currentImg" :style="imageContainerStyle">
                        <image v-show="!isImageExpanded" :src="currentImg" class="preview-image" @load="handleImageLoad" id="previewImage"></image>
                        <bt-cropper v-if="isImageExpanded" ref="cropper" :imageSrc="currentImg" :ratio="0" :fileType="fileType" :key="currentImg" :containerSize="{width: 670, height: 500}" @loadFail="handleCropLoadFail"></bt-cropper>
                    </view>
                    <view class="confirm-crop-btn-container" :class="{ 'show': isImageExpanded }">
                        <u-button class="confirm-crop-btn" type="primary" size="mini" @click="confirmCrop">确认裁剪</u-button>
                    </view>

                    <view class="img-result-container">
                        <imgsRowScroll :previewEnabled="false" :images="croppedImages" :highlightActive="true" :activeIndex="activeIndex" :imageWidth="150" :imageHeight="150" @clickImg="handleImgClick"></imgsRowScroll>
                        <view @click="closeImgPopup">
                            <u-icon name="close" size="30"></u-icon>
                        </view>
                    </view>
                </view>
                <scroll-view class="img-result-list" scroll-y @scrolltolower="handleScrollToLowerImg" :class="{ 'compressed': isImageExpanded }">
                    <view v-for="(item, index) in imgResults" :key="index" class="img-result-item" @click="handleSelectImg(item)">
                        <image :src="item.record.goodPicFileList[0] || ''" class="img-result-thumb"></image>
                        <view class="img-result-info">
                            <text class="img-result-title">{{ item.record.model || '-'}}</text>
                            <text class="img-result-desc">{{ item.record.dictLabel || '-'}}</text>
                            <text class="img-result-price">¥ {{ item.record.price || '-'}} 元</text>
                        </view>
                    </view>
                </scroll-view>
                <!-- 空 -->
                <u-empty v-if="imgResults.length === 0"></u-empty>
            </view>
		</u-popup>
    </view>
</template>

<script>
import imgsRowScroll from '@/components/imgs-row-scroll/index.vue'
export default {
    name: 'RemoteSearchSelect',
    components: {
        imgsRowScroll
    },
    data() {
        return {
            searchValue: '',
            show: false,
            // 滚动相关
            startY: 0,
            currentY: 0,
            isImageExpanded: false,
            // 图片裁剪相关
            croppedImages: [],
            imageWidth: 0,
            imageHeight: 0,
            // 选中的索引
            activeIndex: 0,
            localCurrentImg: ''
        }
    },
    props: {
        // 搜索框属性
        placeholder: {
            type: String,
            default: '请输入关键词搜索'
        },
        value: {
            type: String,
            default: ''
        },
        disabled: {
            type: Boolean,
            default: false
        },
        maxlength: {
            type: [String, Number],
            default: 100
        },
        showAction: {
            type: Boolean,
            default: false
        },
        actionText: {
            type: String,
            default: '搜索'
        },
        shape: {
            type: String,
            default: 'square'
        },
        bgColor: {
            type: String,
            default: '#f5f5f5'
        },
        borderRadius: {
            type: [String, Number],
            default: 4
        },
        clearabled: {
            type: Boolean,
            default: true
        },
        prefixIcon: {
            type: String,
            default: 'search'
        },
        suffixIcon: {
            type: String,
            default: ''
        },
        // 搜索结果
        searchResults: {
            type: Array,
            default: () => []
        },
        resultsShow: {
            type: Boolean,
            default: false
        },
        // 加载状态
        loading: {
            type: Boolean,
            default: false
        },
        cameraEnabled: {
            type: Boolean,
            default: false
        },
        currentUrl: {
            type: String,
            default: ''
        },
        imgResults: {
            type: Array,
            default: () => []
        },
        fileType: {
            type: String,
            default: 'png',
            validator: (value) => ['png', 'jpg'].includes(value)
        }
    },
    watch: {
        currentUrl: {
            handler(val) {
                this.localCurrentImg = val
            },
            immediate: true
        }
    },
    computed: {
        imageContainerStyle() {
            return {
                height: this.isImageExpanded ? '500rpx' : '300rpx', // 给一个基础高度以使过渡平滑
                width: '670rpx',
                transition: 'all 0.4s cubic-bezier(0.25, 1, 0.5, 1)',
                overflow: 'hidden'
            };
        },
        currentImg:{
            get(){
                return this.localCurrentImg || ''
            },
            set(val){
                this.localCurrentImg = val
            }
        }
    },
    emits: ['clear', 'confirm', 'select', 'search', 'load-more', 'focus', 'blur', 'upload', 'load-more-img','select-img','select-crop-img'],
    methods: {
        handleCameraClick() {
            uni.chooseImage({
                count: 1,
                sizeType: ['compressed'],
                sourceType: ['album', 'camera'],
                success: (res) => {
                    this.$emit('upload',res)
                }
            })
        },
        handleInput(val) {
            this.searchValue = val
            this.$emit('search', { keyword: val })
        },
        handleClear() {
            this.searchValue = ''
            this.$emit('clear')
        },

        // 选择结果项
        handleSelectItem(item) {
            this.searchValue = item.model
            this.$emit('select', item)
        },

        // 处理滚动到底部事件
        handleScrollToLower() {
            this.$emit('load-more')
        },
        // 处理滚动到底部事件 图片列表
        handleScrollToLowerImg() {
            this.$emit('load-more-img')
        },
        // 处理获取焦点事件
        handleFocus() {
            this.$emit('focus')
        },
        // 处理失去焦点事件
        handleBlur() {
            this.$emit('blur')
        },
        // 打开图片识别结果弹窗
        openImgPopup() {
            this.show = true
            this.$nextTick(()=>{
                // 只有当列表为空时（说明是第一次打开或重新打开），才初始化列表
                if (this.croppedImages.length == 0) {
                    this.croppedImages = [this.currentUrl]
                    this.activeIndex = 0
                }
            })
        },
        // 关闭图片识别结果弹窗
        closeImgPopup() {
            this.show = false
            this.croppedImages = []
        },
        handleSelectImg(item) {
            this.$emit('select-img', item)
            this.closeImgPopup()
        },
        // 触摸开始事件
        handleTouchStart(e) {
            this.startY = e.touches[0].clientY
        },
        // 触摸移动事件
        handleTouchMove(e) {
            this.currentY = e.touches[0].clientY
            const diffY = this.currentY - this.startY
            
            // 向下滑动超过100px时展开图片
            if (diffY > 100 && !this.isImageExpanded) {
                this.isImageExpanded = true
            }
            // 向上滑动超过50px时收起图片
            else if (diffY < -50 && this.isImageExpanded) {
                this.isImageExpanded = false
            }
        },
        // 触摸结束事件
        handleTouchEnd() {
            this.startY = 0
            this.currentY = 0
        },
        // 图片加载完成事件
        handleImageLoad(e) {
            this.imageWidth = e.detail.width
            this.imageHeight = e.detail.height
        },
        handleCropLoadFail(err) {
            console.error('bt-cropper loadFail:', err)
            uni.showToast({
                title: '裁剪器加载图片失败',
                icon: 'none'
            })
        },
        // 确认裁剪
        async confirmCrop() {
            try {
                const res = await this.$refs.cropper.crop()
                if (res) {
                    this.croppedImages.push(res)
                    this.activeIndex = this.croppedImages.length - 1
                    this.currentImg = res
                    
                    // 将 blob URL 转为 File 对象
                    // const response = await fetch(res)
                    // const blob = await response.blob()
                    // const fileName = `crop_${Date.now()}.${this.fileType || 'png'}`
                    // const file = new File([blob], fileName, { type: blob.type })
                    // console.log(response,blob,fileName,file)
                    // console.log(res)
                    this.$emit('select-crop-img', res)
                } else {
                    uni.showToast({
                        title: '裁剪失败',
                        icon: 'none'
                    })
                }
            } catch (err) {
                console.error('裁剪失败:', err)
                uni.showToast({
                    title: '裁剪失败',
                    icon: 'none'
                })
            }
        },
        handleImgClick({ item, index }) {
            this.activeIndex = index
            this.currentImg = item
            this.$emit('select-crop-img', item)
        }
    }
}
</script>

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