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

<template>
<view class="con-body">
    <view class="con-bg">
        <!-- 头部 -->
        <customHeader ref="customHeaderRef" title="问题上报" 
            :leftFlag="true" :rightFlag="false"
        ></customHeader>
        <!-- 高度来避免头部遮挡 -->
        <view class="top-height"></view>

        <view class="white-bg">
            <view class="red-title">问题：{{optionObj.optionName}}</view>
            <view class="report-list">
                <view class="report-pro">问题项</view>
                <view class="report-right">
                    <view class="r-list"  v-for="(item, index) in optionObj.list" :key="index">
                        <view class="r-left" :class="{'r-red':item.active}">
                            <view>{{String(index+1).padStart(2, '0')+'.'}}</view>
                            <view>{{ item.pointName }}</view>
                        </view>
                        <view class="r-right">
                            <view class="r-r-round" :class="{active:item.active}"></view>
                        </view>
                    </view>
                </view>
            </view>
            <view class="report-border"></view>
            <view class="report-list">
                <view class="report-pro">提交人</view>
                <view class="report-right">{{realname}}</view>
            </view>
            <view class="report-border"></view>
            <view class="report-list" style="display:block;">
                问题描述
                <textarea class="r-input textarea" v-model="desc" auto-height 
                    placeholder="请输入问题项描述" placeholder-class="place-input"
                ></textarea>
            </view>
            <view class="report-border"></view>
            <view class="report-list" style="display:block;">
                <view class="r-title">问题点位照片或视频 <text>*</text></view>
                <view class="img-flex">
                    <view class="img-show" v-for="(item,index) in imgArr" :key="index">
                        <img :src="item" />
                    </view>
                    <view class="img-show" v-for="(item,index) in videoArr" :key="index">
                        <video :src="item" controls></video>
                    </view>
                    <view class="img-con" @click="chooseMedia">
                        <img :src="'static/images/polling/icon-AddPorV.png'" class="img-pic" />
                    </view>
                </view>
            </view>
            <view class="btn-submit">
                <button type="primary" @click="handleSubmit">{{id?'修改问题跟踪表':'生成问题跟踪表'}}</button>
            </view>
        </view>
    </view>
</view>
</template>

<script setup>
import { ref,onMounted,onUnmounted,nextTick,computed,reactive } from 'vue'
import { onLoad,onHide} from '@dcloudio/uni-app';
import customHeader from '@/components/customHeader.vue';
import MescrollUni from 'mescroll-uni/mescroll-uni.vue';
import { getUserInfo } from '@/api/auth.js'

let id = ref('');
let realname = ref('');
let desc = ref('');//描述
onLoad(async option => {
    // console.log(option)
    id.value = option.id;
    let userinfo = await getUserInfo({});
    realname.value = userinfo.realname

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

// 获取数据列表
const getList = () => {
    // let res = await noticeList();
    // 1 单选 2多选 3判断  4问答 5 读卡 6 扫码 7 拍照 8 视频 9 定位
    let res = {
        "code": 200,
        "msg": "操作成功",
        "data": {
            optionName:'配电箱箱体和内部线路检查',
            planTime:new Date().getTime(),
            list:[
                { pointName:'技术中心机房总电源', optionId:202512297899, pointType:1},
                { pointName:'监控室消防设备阀门正常开启闭合', optionId:202512297899, pointType:2},
                { pointName:'监控室10组灭火器压力指针处于绿色区域', optionId:202512297899, pointType:3,active:true},
                { pointName:'库房灭火器压力指针处于绿色区', optionId:202512297899,pointType:4,active:true},
                { pointName:'技术中心机房总电源', optionId:202512297899,pointType:5},
                { pointName:'监控室消防设备阀门正常监控室消防设备阀门正常监控室消防设备阀门正常', optionId:202512297899,pointType:6},
                { pointName:'库房灭火器压力指针处于绿色区', optionId:202512297899,pointType:7},
                { pointName:'技术中心机房总电源', optionId:202512297899,pointType:8},
            ],
        }
    }
    optionObj.value = res.data||{};
}

// 图片或视频
let imgArr = ref([]);//视频
let videoArr = ref([]);//视频
const imgArr2=ref([]);
const chooseMedia = () => {
    imgArr.value=[];
    videoArr.value=[];
    uni.chooseMedia({
        count: 9,
        mediaType: ['image', 'video'], // 指定可选择图片和视频
        sourceType: ['album', 'camera'],
        maxDuration: 30, // 拍摄视频最长拍摄时间
        camera: 'back',
        success: (res) => {
            console.log(res)
            res.tempFiles.forEach(file => {
                console.log(`文件类型: ${file.type}, 文件路径: ${file.tempFilePath}`);
                if (file.type === 'image') {
                    // 显示本地图片
                    imgArr.value.push(file)
                } else if (file.type === 'video') {
                    // 处理视频
                    videoArr.value.push(file)
                }
            });
        }
    });
}

// 提交
const handleSubmit=()=>{
    // showModel('有未完成的巡检项');
    // showModel2('此巡检项已完成');
}
</script>

<style scoped>
.white-bg{
    width: 680rpx;
    padding: 15rpx 30rpx 40rpx 40rpx;
    margin-bottom: 0;
    border-radius: 8px 8px 0 0;
}

.white-bg .red-title{
    margin-bottom:30rpx;
    color:#FF2B44;
    font-size:38rpx;
}

.report-border{
    border-bottom:1px solid #E7E7E7;
    width:710rpx;
    height: 1px;
    margin:20rpx 0;
}

.report-list{
    display: flex;
    font-size:28rpx;
}
.report-list .r-title{
    position: relative;
}
.report-list text{
    color:#FF2B44;
    font-size:28rpx;
}
.report-list .report-pro{
    font-size:28rpx;
    width:16%;
    /* margin-right:30rpx; */
}
.report-list .report-right{
    width:84%;
    color:#919191;
    font-size:28rpx;
}
.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: 120rpx;
}
.report-list .r-list{
    padding: 10rpx 0;
}
.report-list .r-list:first-child{
    padding-top:0;
}
.report-list .r-left{
    display: flex;
    /* align-items: center; */
    width:70%;
    font-size:28rpx;
    color:#919191;
}
.report-list .r-left view:first-child{
    margin-right: 10rpx;
}
.report-list .r-left.r-red{
    color: #FF2B44;
    font-size: 28rpx;
}

.report-list .r-right{
    display: flex;
    font-size:30rpx;
    align-items: center;
    justify-content: center;
}
.report-list .r-r-round{
    width:35rpx;
    height:35rpx;
    border:1px solid #BDBDBD;
    border-radius: 50%;
}
.report-list .r-r-round.active{
    border:1px solid #FF2B44;
    background-color: #FF2B44;
    position: relative;
}
.report-list .r-r-round.active::after{
    content:"!";
    position: absolute;
    top:0;
    left:0;
    color:#fff;
    text-align: center;
    width:35rpx;
    height:35rpx;
    /* #ifndef APP-PLUS */
    line-height: 30rpx;
    /* #endif */
    /* #ifdef APP-PLUS */
    height:30rpx;
    padding-top:5rpx;
    /* #endif */
}
.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:76rpx;
    height: 76rpx;
    margin-top:30rpx;
}
.report-list .img-show,
.report-list .img-con{
    width: calc(100% / 3 - 10px); /* 减去一些间隙以避免溢出 */
    margin:20rpx 10rpx 0;
}

.report-list .img-show:first-child,
.report-list .img-con:first-child{
    margin-left:0;
}

.btn-submit{
    width:400rpx;
    margin:90rpx 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>