uniapp-ZHSQ/packages/workOrderDashboard/addRoutingInspection/index.vue

<template>
    <view class="container">
        <!-- 点位选择下拉菜单 -->
        <view class="select-container">
            <label class="select-label">选择点位</label>
            <input type="text" class="search-input" v-model="searchKeyword" @focus="showOptions = true"
                placeholder="请选择点位" readonly />

            <!-- 下拉选项 -->
            <view class="options-container" v-if="showOptions">
                <view v-for="option in filteredOptions" :key="option.id || option.name" class="option-item"
                    :class="{ 'selected': selectedPoint === (option.id || option.name) }"
                    @click="selectPointHandler(option)">
                    {{ option.name }}
                </view>
            </view>
        </view>

        <!-- 拍照功能和图片预览 -->
        <view class="camera-section">
            <!-- 拍照按钮，当图片数量达到12张时隐藏 -->
            <view class="camera-container" v-if="images.length < 12">
                <view class="camera-icon-container">
                    <image class="camera-icon" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/zhaoxiangji.png" mode="aspectFit" @click="takePhoto">
                    </image>
                </view>
                <view class="camera-text">点击拍照上传</view>
            </view>

            <!-- 照片列表 -->
            <view class="photos-container">
                <view v-for="(image, index) in images" :key="index" class="photo-item">
                    <image class="photo-preview" :src="image" mode="aspectFit"></image>
                    <!-- 删除图标 -->
                    <view class="delete-icon" @click="deleteImage(index)">×</view>
                </view>
            </view>
        </view>

        <!-- 底部提交按钮 -->
        <view class="footer">
            <button class="submit-button" @click="submitForm">确认提交</button>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            searchKeyword: '',
            showOptions: false,
            selectedPoint: '',
            selectedPointInfo: null, // 存储完整的点位信息
            pointsList: [],
            images: [] // 存储多张图片路径
        }
    },
    computed: {
        filteredOptions() {
            if (!this.searchKeyword) {
                return this.pointsList
            }
            return this.pointsList.filter(option =>
                option.name.toLowerCase().includes(this.searchKeyword.toLowerCase())
            )
        }
    },
    onLoad(options) {
        if (options.item) {
            try {
                const item = JSON.parse(options.item)
                // 根据实际数据结构调整
                if (item.points && Array.isArray(item.points)) {
                    this.pointsList = item.points
                } else if (Array.isArray(item)) {
                    this.pointsList = item
                }
            } catch (e) {
                console.error('解析数据失败', e)
            }
        }
    },
    methods: {
        selectPointHandler(option) {
            this.selectedPoint = option.id || option.name
            this.selectedPointInfo = option // 保存完整的点位信息
            this.searchKeyword = option.name
            this.showOptions = false
        },
        takePhoto() {
            // 调起手机拍照功能，不允许从相册选择
            const that = this
            // 计算还可以拍摄的图片数量
            const remainingCount = 12 - that.images.length

            uni.chooseImage({
                count: remainingCount > 0 ? remainingCount : 1, // 最多选择的图片数量
                sizeType: ['original', 'compressed'],
                sourceType: ['camera'], // 只允许拍照
                success: function (res) {
                    const tempFilePaths = res.tempFilePaths
                    // 将新拍摄的图片添加到列表中
                    that.images = [...that.images, ...tempFilePaths]
                    console.log('拍照成功，当前图片数量：', that.images.length)
                },
                fail: function (err) {
                    console.error('拍照失败', err)
                    uni.showToast({
                        title: '拍照失败',
                        icon: 'none'
                    })
                }
            })
        },
        deleteImage(index) {
            // 删除指定索引的图片
            this.images.splice(index, 1)
        },
        submitForm() {
            // 验证是否选择了点位
            if (!this.selectedPoint) {
                uni.showToast({
                    title: '请选择点位',
                    icon: 'none'
                })
                return
            }

            // 验证是否上传了图片
            if (this.images.length === 0) {
                uni.showToast({
                    title: '请至少上传一张照片',
                    icon: 'none'
                })
                return
            }

            // 准备提交数据
            const submitData = {
                point: this.selectedPointInfo, // 完整的点位信息
                photos: this.images.map(imagePath => ({
                    url: imagePath, // 图片路径
                    // 如果需要，可以添加额外的信息，如base64编码等
                    // base64: this.getBase64FromPath(imagePath) // 示例：获取base64编码
                }))
            }

            // 输出提交的数据
            console.log('提交数据：', submitData)

            // 这里可以添加实际的提交逻辑，调用后端接口
            uni.showToast({
                title: '提交成功',
                icon: 'success'
            })
        }
    }
}
</script>

<style>
@import url("./index.css");
</style>