ys-app/src/pages/business/polling/optionDetail.vue

<template>
<view class="con-body">
    <view class="con-bg">
        <!-- 头部 -->
        <customHeader ref="customHeaderRef" title="巡检详情" 
            :leftFlag="true" :rightFlag="true"
        >
            <template #right>
                <view class="head-right" @click="handleQuestion">
                    <view class="btn-yellow">
                        <img :src="'static/images/polling/icon-repair.png'" class="img-repair" />新建问题上报
                    </view>
                </view>
            </template>
        </customHeader>
        <!-- 高度来避免头部遮挡 -->
        <view class="top-height"></view>
        <!-- 下拉刷新 -->
        <mescroll-uni ref="mescrollRef" @init="mescrollInit"
            :down="downOption"  @down="downCallback"
            :fixed="false" class="scroll-h"
        >
            <!-- 1 单选 2多选 3判断  4 问答 5 读卡 6 扫码 7 拍照 8 视频 9 定位（暂时去掉了） -->
            <view class="white-bg">
                <view class="blue-title">{{optionObj.groupName}}</view>
                <view class="blue-sub-title" style="margin-bottom:20rpx;">
                    巡检日期：<text>{{parseTime(optionObj.lastCheckTime,'{y}-{m}-{d} 星期{a}')}}</text>
                </view>
                <block v-if="optionObj.pointList">
                    <block v-if="optionObj.pointList.length>0">
                        <view class="report-list" v-for="(item, index) in optionObj.pointList" :key="index">
                            <!-- 单选 -->
                            <block v-if="item.pointType==1">
                                <view class="r-left" style="width:100%">
                                    <view>{{String(index+1).padStart(2, '0')+'.'}}</view>
                                    <view>{{ item.pointName }}</view>
                                </view>
                                <multipleSelect :multiple="false" :value="item.chooseList" downInner
                                    :options="item.optionList"  @change="(...args) => changeCheck(...args, item)"
                                    :slabel="'optionContent'" :svalue="'optionTitle'"
                                >
                                </multipleSelect>
                            </block>
                            <!-- 多选 -->
                            <block v-else-if="item.pointType==2">
                                <view class="r-left" style="width:100%">
                                    <view>{{String(index+1).padStart(2, '0')+'.'}}</view>
                                    <view>{{ item.pointName }}</view>
                                </view>
                                <multipleSelect :multiple="true" :value="item.chooseList" downInner
                                    :options="item.optionList"  @change="(...args) => changeCheck(...args, item)"
                                    :slabel="'optionContent'" :svalue="'optionTitle'"
                                >
                                </multipleSelect>
                            </block>
                            <!-- 判断 -->
                            <block v-if="item.pointType==3">
                                <view class="r-list">
                                    <view class="r-left">
                                        <view>{{String(index+1).padStart(2, '0')+'.'}}</view>
                                        <view>{{ item.pointName }}</view>
                                    </view>
                                    <view class="r-right">
                                        <radio-group @change="radioChange($event,item)" style="transform:scale(0.9)">
                                            <radio :value="item2.optionTitle" color="#02C74C" 
                                                v-for="(item2,index) in item.optionList" :key="index"
                                                :style="{marginRight:index==0?'30rpx':'0'}"
                                                :checked="item2.optionTitle === item.resultContent"
                                            >
                                                {{item2.optionContent}}
                                            </radio>
                                        </radio-group>
                                    </view>
                                </view>
                            </block>
                            <!-- 问答 -->
                            <block v-else-if="item.pointType==4">
                                <view class="r-left" style="width:100%">
                                    <view>{{String(index+1).padStart(2, '0')+'.'}}</view>
                                    <view>{{ item.pointName }}</view>
                                </view>
                                <view class="r-input">
                                    <!-- <input class="uni-input" placeholder="请输入" placeholder-class="place-input" /> -->
                                    <textarea class="textarea" v-model="item.resultContent" auto-height  placeholder="请输入" placeholder-class="place-input"></textarea>
                                </view>
                            </block>
                            <!-- 读卡 -->
                            <block v-else-if="item.pointType==5">
                                <view class="r-list" >
                                    <view class="r-left">
                                        <view>{{String(index+1).padStart(2, '0')+'.'}}</view>
                                        <view>{{ item.pointName }}</view>
                                    </view>
                                    <!-- #ifdef APP-PLUS -->
                                    <view class="r-right"  @click.stop="initNFC">
                                        <img :src="'static/images/polling/icon-NFCcode.png'" class="img-nfc" /> 开始识别
                                    </view>
                                    <!-- #endif -->
                                </view>
                            </block>
                            <!-- 扫码 -->
                            <block v-else-if="item.pointType==6">
                                <view class="r-list">
                                    <view class="r-left">
                                        <view>{{String(index+1).padStart(2, '0')+'.'}}</view>
                                        <view>{{ item.pointName }}</view>
                                    </view>
                                    <!-- #ifdef APP-PLUS -->
                                    <view class="r-right r-active" v-if="item.resultContent" @click="handleScan(item)">
                                        <img :src="'static/images/polling/icon-QRcode-b.png'" class="img-nfc" />
                                        <view>扫码成功<view class="r-font">点击再次扫码</view></view>
                                    </view>
                                    <view class="r-right" v-else @click="handleScan(item)">
                                        <img :src="'static/images/polling/icon-QRcode.png'" class="img-nfc" /> 开始扫码
                                    </view>
                                    <!-- #endif -->
                                    <!-- #ifndef APP-PLUS -->
                                    <view class="r-right r-active">
                                        <img :src="'static/images/polling/icon-QRcode-b.png'" class="img-nfc" />
                                        <view>扫码成功</view>
                                    </view>
                                    <!-- #endif -->
                                </view>
                            </block>
                            <!-- 拍照 -->
                            <block v-else-if="item.pointType==7">
                                <view class="r-left" style="width:100%">
                                    <view>{{String(index+1).padStart(2, '0')+'.'}}</view>
                                    <view>{{ item.pointName }}</view>
                                </view>
                                <view class="img-flex">
                                    <view class="img-show" v-for="(item2,index) in imgArr2" :key="index"  @click="showMediaPreview(item2)">
                                        <img :src="item2.shortUrl" />
                                    </view>
                                    <view class="img-con" @click="chooseImage(item)">
                                        <img :src="'static/images/polling/icon-AddPic.png'" class="img-pic" />
                                        <view>添加照片</view>
                                    </view>
                                </view>
                            </block>
                            <!-- 视频 -->
                            <block v-else-if="item.pointType==8">
                                <view class="r-left" style="width:100%">
                                    <view>{{String(index+1).padStart(2, '0')+'.'}}</view>
                                    <view>{{ item.pointName }}</view>
                                </view>
                                <view class="img-flex">
                                    <view class="img-show" v-for="(item2,index) in videoArr2" :key="index"  @click="showMediaPreview(item2)">
                                        <video :src="item2.url" controls v-show="videoShow"></video>
                                    </view>
                                    <view class="img-con" @click="chooseVideo(item)">
                                        <img :src="'static/images/polling/icon-AddVideo.png'" class="img-pic" />
                                        <view>添加视频</view>
                                    </view>
                                </view>
                            </block>
                            <view class="report-border" :style="{borderColor:index<optionObj.pointList.length-1?'#E7E7E7':'#fff'}"></view>
                        </view>
                        <view class="btn-submit">
                            <button type="primary" @click="handleSubmit" :loading="submitLoading">提交</button>
                        </view>
                    </block>
                    <view v-else class="no-data">
                        <img :src="'static/images/polling/pic-NoResult.png'" class="no-pic" />
                    </view>
                </block>
                <view v-else class="no-data">
                    <img :src="'static/images/polling/pic-NoResult.png'" class="no-pic" />
                </view>
            </view>
        </mescroll-uni>
    </view>
    <!-- 弹窗提示 -->
    <pollingShowModal :visible="visible"
        :title="title"
        :content="content" 
        :subContent="subContent"
        :btnFlag2="btnFlag2"
        :btnTxt="btnTxt"
        :isGreen="isGreen"
        :subTime="subTime"
        @close="handleClose"
        @confirm="handleConfirm"
        ref="showModel"
    ></pollingShowModal>

    <!-- 普通弹窗提示 -->
    <customShowModal
        :title="''"
        :content="content3" 
        :visible="visible3"
        :btnFlag2="false"
        @confirm="handleClose3"
        ref="showModel3"
    ></customShowModal>
   
    <!-- 图片放大 -->
    <mediaPreview :visible="isVisible" :url="mediaUrl" @close="handlePreviewClose"></mediaPreview>
</view>
</template>
<script setup>
import { ref,onMounted,onUnmounted,nextTick,computed,reactive } from 'vue'
import { onLoad,onHide} from '@dcloudio/uni-app';
import { MINIO_KEY } from '@/enums/cacheEnums';
import customHeader from '@/components/customHeader.vue';
import MescrollUni from 'mescroll-uni/mescroll-uni.vue';
import multipleSelect from "@/components/multipleSelect.vue";
import pollingShowModal from "@/components/pollingShowModal.vue";
import customShowModal from "@/components/customShowModal.vue"
import mediaPreview from "@/components/mediaPreview.vue"
import { parseTime } from '@/utils/datetime.js';
import { formatTaskStatus } from '@/utils/status.js';
import { taskGroupDetail,submitResult,minioUpload } from '@/api/polling.js'
import {compressImageUni} from '@/utils/common.js'
// import {uploadFileMinio} from '@/utils/minio.js'
// #ifdef APP-PLUS
let m1CardModule = uni.requireNativePlugin("LF-Sense-Card-M1")
// #endif

let taskId = ref(undefined);
let groupId = ref(undefined);
let minioObj = {};
onLoad(option => {
    // console.log(option)
    taskId.value = option.taskId;
    groupId.value = option.groupId;

    minioObj = JSON.parse(uni.getStorageSync(MINIO_KEY) || "\{\}")
    // console.log(minioObj)
})

// 下拉刷新
const mescrollRef = ref(null);
const mescrollInit = (mescroll) => {
    mescrollRef.value = mescroll;
};
const downOption = ref({
    auto: true,
    textInOffset: '下拉刷新',
    textOutOffset: '释放更新',
    textLoading: '刷新中...'
});
// 下拉刷新
const downCallback = async (mescroll) => {
    try {
        getList();
    } catch (error) {
        mescroll.endErr();
    } finally {
        mescroll.endSuccess();
    }
}

// 查询列表
let list = ref([]);
let optionObj = ref({})

// 获取数据列表
const getList = async() => {
    let param = {
        taskId:taskId.value,
        groupId:groupId.value
    }
    // 1 单选 2多选 3判断  4问答 5 读卡 6 扫码 7 拍照 8 视频 9 定位
    let res = await taskGroupDetail(param);
    let data = res||{};
    data.pointList.forEach(item=>{
        if(item.resultContent){
            if(item.pointType==2 ||item.pointType==1){
                item['chooseList'] = item.resultContent.split(",") //JSON.parse(item.resultContent)
            }else if(item.pointType==7){
                imgArr.value=[];
                imgArr2.value=[];
                let imgList = item.resultContent?.split(",")||[];
                imgList.forEach(imgUrl=>{
                    imgArr.value.push(imgUrl);
                    imgArr2.value.push({
                        shortUrl:minioObj.minioThumbUrl +"/"+imgUrl,
                        url:minioObj.minioUrl +"/"+imgUrl,
                    })
                })
            }else if(item.pointType==8){
                videoArr.value=[];
                videoArr2.value=[]
                let videoList = item.resultContent?.split(",")||[];
                videoList.forEach(videoUrl=>{
                    videoArr.value.push(videoUrl);
                    videoArr2.value.push({
                        shortUrl:minioObj.minioThumbUrl +"/"+videoUrl,
                        url:minioObj.minioUrl +"/"+videoUrl,
                    })
                })
            }
        }
        
    })
    // console.log(data.pointList)
    optionObj.value = data
}

// 跳转问题上报页面
const handleQuestion=()=>{
    uni.navigateTo({
        url: '/pages/business/polling/problemReport?taskId='+taskId.value+"&groupId="+groupId.value
    });
}

// radio 判断选择
const radioChange=(e,item)=>{
    // console.log("radioChange=>",e,item)
    let radioValue = e.detail.value;
    item['resultContent']=radioValue;
    console.log("222判断radioChange=>",item)
}

// 单选多选处理
const changeCheck = (param,param2,item) => {
    // console.log("111多选changeCheck=>",param,param2)
    item['resultContent'] = param2.join(",");//JSON.stringify(param);
    console.log("222多选changeCheck=>",item)
}

// 照片及拍照处理
const imgArr = ref([]);
const imgArr2=ref([]);
const chooseImage = (item) => {
    console.log("item=>",item)
    try {
        uni.chooseImage({
            // count: 1, // 默认是9，这里设置为1次只选1张
            // sizeType: ['compressed'], // 可以指定是原图还是压缩图，可选 'original' 或 'compressed'
            sourceType: ['album', 'camera'], // 指定来源是相册还是相机，默认二者都有
            // quality:80,
            // width:'1920px',
            // height:'1920px',
            success: async (res) => {
                // 选择成功，返回本地文件路径列表
                let files = res.tempFilePaths;
                // console.log('111图片临时路径:', files, res.tempFiles);
                files.forEach(async file=>{
                    let compressImg = file;
                    //  #ifdef APP-PLUS
                    // 压缩图片
                    compressImg = await compressImageUni(file);
                    // console.log("333压缩图片返回=>",compressImg)
                    // #endif

                    // 执行上传
                    let param = {
                        filePath: compressImg,
                        name: 'file',
                        formData: {
                            directory:'polling'
                        },
                    }                
                    minioUpload(param).then(res=>{
                        let data = res.data;
                        // console.log("444图片上传成功=>",data)
                        imgArr2.value.push(data.fileUrl)
                        imgArr.value.push(data.fileName)//传给后台的路径
                        item.resultContent = imgArr.value.join(",")
                    })

                })
            },
            fail: (err) => {
                console.log('选择图片失败', err);
            }
        });
    } catch (error) {
        console.log(error)
    }
};

// 视频处理
const videoSrc = ref('');
const videoArr = ref([]);
const videoArr2 = ref([]);
const chooseVideo = (item) => {
    uni.chooseVideo({
        sourceType: ['album', 'camera'], // 来源：相册和相机
        maxDuration: 60, // 最大时长（秒）
        camera: 'back', // 使用后置摄像头
        compressed: true, // 压缩视频
        success: (res) => {
            console.log("res=>",res)
            // videoSrc.value=res.tempFilePath;
            // videoArr.value.push(res.tempFilePath)
            console.log('视频路径:', res.tempFilePath);
            // console.log('视频时长:', res.duration);
            // console.log('视频大小:', res.size);
            // 执行上传
            let param = {
                filePath:  res.tempFilePath,
                name: 'file',
                formData: {
                    directory:'polling'
                },
            }                
            minioUpload(param).then(uploadRes=>{
                let data = uploadRes.data;
                videoArr.value.push(data.fileName)//传给后台的路径
                videoArr2.value.push(data.fileUrl)
                item.resultContent = videoArr.value.join(",")
            }).finally(()=>{

            })

        },
        fail: (err) => {
            console.error('选择视频失败:', err);
        }
    });
};

// 放大视频或图片
let isVisible= ref(false);//放大处理
let mediaUrl= ref('');//放大地址
let videoShow = ref(true);
const showMediaPreview=(item)=>{
    console.log("showMediaPreview===")
    isVisible.value = true;
    videoShow.value = false;
    mediaUrl.value = item.url
}
const handlePreviewClose=()=>{
    isVisible.value = false;
    videoShow.value = true;
}

// nfc 处理
let cardUID = ref('');
let cardValue = ref('');
const initNFC = async(item) => {
    m1CardModule.openNativeSenseCard({
        'keyA': 'TestKey',
        'sector': 0,
        'block': 0
    },ret => {
        cardUID.value = ret.uid
        cardValue.value = ret.code
    })
}

// 扫二维码
const scanStr = ref(undefined);
const handleScan = (item) => {
   // 调用扫码API
    uni.scanCode({
        success: (res) => {
            scanStr.value = res.result;
            console.log('扫码结果:', res.result); // 二维码内容
            console.log('码类型:', res.scanType); // 码类型，如 QR_CODE
            item.resultContent = res.result
        },
        fail: (err) => {
            console.error('扫码失败:', err);
        }
    });
}

// 提交
let submitParam = {}
let submitLoading = ref(false)
const handleSubmit=()=>{
    submitLoading.value = true;
    let list = optionObj.value.pointList;
    let flag = false;
    for (let i = 0; i < list.length; i++) {
        const item = list[i];
        if(!item.resultContent){
            flag = true;
            break;
        }
    }
    // 如果有未完成的项提示
    if(flag){
        showModel('有未完成的巡检项');
    }

    // 循环处理给后台传值
    let arr = [];
    list.forEach(item => {
        arr.push({
            pointId:item.pointId,
            resultContent:item.resultContent||'',
            resultId: item.resultId || undefined
        })
    });
    submitParam = {
        taskId:taskId.value,
        groupId:groupId.value,
        resultList:arr
    }
    console.log(flag)

    // 都答好了直接提交
    if(!flag){
        handleConfirm();
    }
}

// 自定义弹窗
let title = ref('');
let content = ref('');
let visible = ref(false);
let subContent= ref('');
let subTime= ref(undefined);
let btnFlag2=ref(true)
let btnTxt=ref('')
let isGreen =ref(false);
const showModel=(str)=>{
    visible.value = true;
    content.value = str;
    subContent.value='是否确认提交?';
    btnTxt.value='提交'
    btnFlag2.value=true;
    isGreen.value = false;
    subTime.value=undefined;
}
const showModel2=(str)=>{
    content.value = str;
    subContent.value='提交时间';
    btnTxt.value='确定';
    btnFlag2.value=false;
    isGreen.value = true;
    visible.value = true;
}
//关闭
const handleClose=()=>{
    visible.value = false;
    submitLoading.value = false;
}

// 执行提交
const handleConfirm=()=>{
    try {
        if(isGreen.value){
            visible.value = false;
            isGreen.value=false;
        }else{
            // 执行提交
            submitResult(submitParam).then(res=>{
                subTime.value = res;
                visible.value = false;
                // console.log("submitResult=>",visible.value)
                showModel2('此巡检项已完成');
                uni.navigateBack();
            }).finally(() => {
                submitLoading.value = false;
            })
        }
        
    } catch (error) {
        console.log("==========",error)
        visible.value = false;
    }
   
}

// 基础弹窗
const visible3 = ref(false);
const content3 = ref('');
const showModel3=(str)=>{
    visible3.value = true;
    content3.value = str;
}
const handleClose3=()=>{
    visible3.value = false;
    submitLoading.value = false;
}


onUnmounted(() => {
 
})
</script>
<style scoped>
.scroll-h{
   /* #ifdef APP-PLUS */
    height:calc(100vh - 78px) !important;
    /* #endif */
    /* #ifndef APP-PLUS */
    height: calc(100vh - 60px) !important;
    /* #endif */
}
.head-right{}
.head-right .btn-yellow{
    background-color: #FCC123;
    color: #4C2D11;
    font-size: 28rpx;
    font-weight: bold;
    border-radius: 10rpx;
    padding:10rpx 25rpx;
    display: flex;
    align-items: center;
}
.head-right .btn-yellow .img-repair{
    width: 30rpx;
    height: 30rpx;
}
.week{
    padding:0 40rpx;
    color: #fff;
    font-size:32rpx;
    margin-bottom:20rpx;
}

.white-bg{
    width: 680rpx;
    padding: 15rpx 30rpx 40rpx 40rpx;
    margin-bottom: 0;
    border-radius: 8px 8px 0 0;
}
.white-bg2{
   /* padding:0 40rpx; */
   margin-top:-30rpx;
}
.report-list{
    position: relative;
}
.report-border{
    border-bottom:1px solid #E7E7E7;
    width:710rpx;
    height: 1px;
    margin:20rpx 0;
}
.report-list .r-list{
    padding: 5rpx 0;
}
.report-list .r-left{
    display: flex;
    align-items: center;
    width:70%;
    font-size:28rpx;
}
.report-list .r-left view:first-child{
    margin-right: 10rpx;
}
.report-list .r-right{
    display: flex;
    font-size:30rpx;
    align-items: center;
    justify-content: center;
}
.report-list .r-right.r-active{
    color:#05A3F4
}
.report-list .r-active .r-font{
    color:#919191;
    font-size:18rpx;
    text-align: center;
}
.report-list .r-input{
    border:1px solid #E7E7E7;
    border-radius: 10rpx;
    width:620rpx;
    padding:15rpx 25rpx;
    margin:20rpx 0 30rpx;
}
.report-list .place-input{
    color:#BFBFBF;
    font-size:28rpx;
}
.report-list .textarea{
    min-height: 50rpx;
}
.r-right :deep(.uni-radio-input){
    width:36rpx;
    height: 36rpx;
}
.r-right .uni-input{
    width:100%;
}
.report-list :deep(.uni-select-dc){
    margin:20rpx 0 30rpx;
}
.report-list :deep(.uni-select-dc .uni-select-dc-select){
    color:#BFBFBF;
    font-size:28rpx;
}
.img-nfc{
    width:50rpx;
    height: 40rpx;
    margin-right:10rpx;
}
.report-list .img-flex{
    display: flex;
    flex-flow:row wrap;
    margin-bottom:30rpx;
}
.report-list .img-show img,
.report-list .img-show video{
    width:210rpx;
    height: 140rpx;
}
.report-list .img-show :deep(.uni-video-cover-play-button){
    width:64rpx;
    height: 64rpx;
    line-height: 64rpx;
    font-size:60rpx;
}

.report-list .img-con{
    background-color: #EEEEEE;
    width:210rpx;
    height: 140rpx;
    text-align: center;
    color:#919191;
    font-size: 24rpx;
}
.report-list .img-con .img-pic{
    width:70rpx;
    height: 50rpx;
    margin-top:30rpx;
}
.report-list .img-show,
.report-list .img-con{
    width: calc(100% / 3 - 10px); /* 减去一些间隙以避免溢出 */
    margin:20rpx 20rpx 0 0;
}

.bg-border{
    width:750rpx;
    height:20rpx;
    background-color: #F5F5F5;
    margin-left:-40rpx;
    margin-top:40rpx;
}

.report-list .r-list .r-name{
    width:525rpx
}
.r-left .r-l-left{
    width:280rpx;
}
.r-left .r-l-right{
   
}
.no-data{
    padding:200rpx 0 200rpx;
}
.no-data .no-pic{
    display: block;
    width:440rpx;
    height:210rpx;
    margin:40rpx auto;
}
:deep(.mescroll-upwarp){
    display: none !important;
}
.btn-submit{
    width:400rpx;
    margin:0 auto;
}
.btn-submit uni-button[type='primary']{
    background-color: #05A3F4;
    border-radius: 40rpx;
    line-height: 2.2;   
}
.btn-submit uni-button:after{
    border-color:#05A3F4;
}
</style>