219 lines
8.0 KiB
Vue
219 lines
8.0 KiB
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 = !showOptions"
|
||
placeholder="请输入点位名称搜索" readonly />
|
||
|
||
<!-- 下拉选项 -->
|
||
<view class="options-container" v-if="showOptions">
|
||
<!-- 为空时显示提示 -->
|
||
<view v-if="pointsList.length === 0" class="no-options">
|
||
暂无数据
|
||
</view>
|
||
<!-- 有选项时显示选项列表 -->
|
||
<view v-else>
|
||
<view v-for="option in pointsList" :key="option.id" class="option-item"
|
||
@click="option.exec_status != 3 && selectPointHandler(option)"
|
||
:class="{ 'disabled': option.exec_status == 3 }">
|
||
<view>
|
||
{{ option.point_info.point_name }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 拍照功能和图片预览 -->
|
||
<view class="camera-section">
|
||
<!-- 拍照按钮，当图片数量达到12张时隐藏 -->
|
||
<view class="camera-container" v-if="images.length < 12">
|
||
<image class="camera-icon" src="https://static.hshuishang.com/zhaoxiangji.png"
|
||
mode="aspectFit" @click="takePhoto"></image>
|
||
<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>
|
||
import {
|
||
request,
|
||
picUrl,
|
||
uniqueByField,
|
||
menuButtonInfo,
|
||
NavgateTo,
|
||
upload
|
||
} from "../../../utils";
|
||
|
||
import { apiArr } from "../../../api/routingInspection";
|
||
export default {
|
||
data() {
|
||
return {
|
||
searchKeyword: '',
|
||
showOptions: false,
|
||
selectedPoint: '',
|
||
selectedPointInfo: null, // 存储完整的点位信息
|
||
pointsList: [],
|
||
images: [], // 存储多张图片路径
|
||
taskId: '',
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
if (options.item) {
|
||
const item = JSON.parse(options.item)
|
||
this.taskId = item.id
|
||
this.getInfo(this.taskId)
|
||
}
|
||
},
|
||
methods: {
|
||
async getInfo(id) {
|
||
const res = await request(apiArr.routingInspectionInfo, "POST", {
|
||
task_id: id,
|
||
});
|
||
this.pointsList = res.task_point_info
|
||
},
|
||
selectPointHandler(option) {
|
||
// 安全检查，确保必要的属性存在
|
||
if (option && option.point_info && option.point_info.point_name) {
|
||
// 根据实际数据结构选择正确的id属性
|
||
this.selectedPoint = option.location_info && option.id
|
||
? option.id
|
||
: option.id || option.point_info.point_name
|
||
this.selectedPointInfo = option // 保存完整的点位信息
|
||
this.searchKeyword = option.point_info.point_name
|
||
this.showOptions = false
|
||
// 切换点位时清空图片数据
|
||
this.images = []
|
||
} else {
|
||
console.warn('选择的点位信息不完整', option)
|
||
}
|
||
},
|
||
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)
|
||
},
|
||
async submitForm() {
|
||
// 验证是否选择了点位
|
||
if (!this.selectedPoint) {
|
||
uni.showToast({
|
||
title: '请选择点位',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
|
||
// 验证是否上传了图片
|
||
if (this.images.length === 0) {
|
||
uni.showToast({
|
||
title: '请至少上传一张照片',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
|
||
try {
|
||
// 上传所有图片到服务器
|
||
uni.showLoading({
|
||
title: '正在上传图片...',
|
||
mask: true
|
||
})
|
||
|
||
// 使用Promise.all并行上传所有图片
|
||
const uploadPromises = this.images.map(imagePath => {
|
||
return new Promise((resolve, reject) => {
|
||
upload(imagePath, (res) => {
|
||
if (res.code === 1 && res.data && res.data.path) {
|
||
resolve(res.data.path); // 上传成功，返回服务器返回的图片URL
|
||
} else {
|
||
reject(new Error('图片上传失败'));
|
||
}
|
||
});
|
||
});
|
||
});
|
||
|
||
// 等待所有图片上传完成
|
||
const uploadedImageUrls = await Promise.all(uploadPromises);
|
||
|
||
uni.hideLoading();
|
||
|
||
// 准备提交数据，使用服务器返回的图片URL
|
||
const params = {
|
||
task_id: parseInt(this.taskId), // 巡检任务ID
|
||
task_point_id: parseInt(this.selectedPoint), // 巡检点ID
|
||
image: uploadedImageUrls // 巡检图片，使用服务器返回的URL数组
|
||
}
|
||
|
||
console.log('上传成功的图片URL：', uploadedImageUrls)
|
||
|
||
// 调用正确的接口
|
||
const res = await request(apiArr.routingInspectionSubmit, "POST", params);
|
||
|
||
// 输出提交的数据
|
||
console.log('提交数据：', params)
|
||
|
||
// 显示提交成功提示
|
||
uni.showToast({
|
||
title: '提交成功',
|
||
icon: 'success'
|
||
})
|
||
// 提交成功后，延迟1秒再重置表单
|
||
setTimeout(() => {
|
||
this.getInfo(this.taskId);
|
||
}, 1000);
|
||
} catch (error) {
|
||
uni.hideLoading();
|
||
console.error('提交失败', error)
|
||
uni.showToast({
|
||
title: '提交失败',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
@import url("./index.css");
|
||
</style> |