展开收起图标

hejianhao

2025-02-25 bba11a405d15e42ac13a9f85344baabf26d10a94

展开收起图标

 H5/pages/result-entry/index.vue

@@ -77,14 +77,15 @@
                    </view>
                </view>
            </view>
            <view @tap="unfold" class="bgcolor3 absolute w-100 txt-center"
                style="bottom:-58rpx;left: 50%;transform: translate(-50%,-50%);">
                <image src="/static/location/back.png" class="h-23 w-15" style="transform: rotate(-90deg);" />
            <view @tap="unfold" class="absolute" style="bottom:-90rpx;left: 50%;transform: translate(-50%,-50%);">
                <image v-if="!unfoldFlag" src="@/static/unfold.png" class="h-54 w-156" />
                <image v-if="unfoldFlag" src="@/static/packUp.png" class="h-54 w-156" />
            </view>
        </view>
        <view class="br-19 mt-76 bs-1 pt-35 pb-33">
            <view class="fs-27 lh-38 font-bold ml-31">处理状态</view>
            <view @tap="showList = true" class="br-15 py-15 pl-31 mx-31 pr-27 mt-27 flex j-between a-center border2" :class="(rulsFlag && !status) && 'bgcolor-border'">
            <view @tap="showList = true" class="br-15 py-15 pl-31 mx-31 pr-27 mt-27 flex j-between a-center border2"
                :class="(rulsFlag && !status) && 'bgcolor-border'">
                <view :class="!status && 'color6'">{{ status ? status : '请选择当前处理状态' }}</view>
                <image src="/static/location/back.png" class="h-23 w-15" style="transform: rotate(-90deg);" />
            </view>
@@ -174,126 +175,186 @@
</template>

<script>
import { saveResult, getComplaintDetail } from './service'
import config from '@/config/index.js'
export default {
    data() {
        return {
            showList: false,
            columns: [['已办结', '群众撤销']],
            unfoldFlag: false, //是否展开
            id: '',//诉求id
            info: {},//工单详情
            completionDescription: '',//办结结果描述
            localImageUrls: [], //本地回显的图片
            completionImages: [],//办结结果图片
            completionOtherDescription: '',//其他说明
            completionVideos: [],//办结结果视频
            status: '',//处理状态
            againCklicFlag: true,
            rulsFlag: false,
        }
    },
    onLoad(params) {
        this.id = params.id
        getComplaintDetail({ id: params.id }).then(res => {
            this.info = res.data
        })
    },
    methods: {
        submit() {
            if (!this.status) {
                this.rulsFlag = true
                return uni.showToast({
                    title: '请选择当前处理状态',
                    icon: 'none',
                    mask: true
                })
    import {
        saveResult,
        getComplaintDetail
    } from './service'
    import config from '@/config/index.js'
    export default {
        data() {
            return {
                showList: false,
                columns: [
                    ['已办结', '群众撤销']
                ],
                unfoldFlag: false, //是否展开
                id: '', //诉求id
                info: {}, //工单详情
                completionDescription: '', //办结结果描述
                localImageUrls: [], //本地回显的图片
                completionImages: [], //办结结果图片
                completionOtherDescription: '', //其他说明
                completionVideos: [], //办结结果视频
                status: '', //处理状态
                againCklicFlag: true,
                rulsFlag: false,
            }
            if (!this.completionDescription) {
                this.rulsFlag = true
                return uni.showToast({
                    title: '请填写办结结果描述',
                    icon: 'none',
                    mask: true
                })
            }
            if (this.completionImages.length == 0) {
                return uni.showToast({
                    title: '请上传办结结果图片',
                    icon: 'none',
                    mask: true
                })
            }
            if (this.completionVideos.length == 0) {
                return uni.showToast({
                    title: '请上传办结结果视频',
                    icon: 'none',
                    mask: true
                })
            }
            saveResult({
                id: this.id,
                status: this.status == '已办结' ? 3 : 4,
                completionDescription: this.completionDescription,
                completionImages: this.completionImages.join(','),
                completionOtherDescription: this.completionOtherDescription,
                completionVideos: this.completionVideos.join(',')
        },
        onLoad(params) {
            this.id = params.id
            getComplaintDetail({
                id: params.id
            }).then(res => {
                if (res.code == 200) {
                    uni.showToast({
                        title: '提交成功',
                        icon: 'success',
                        mask: true
                    })
                    setTimeout(() => {
                        uni.navigateBack()
                    }, 1500)
                } else {
                    uni.showToast({
                        title: res.msg,
                this.info = res.data
            })
        },
        methods: {
            submit() {
                if (!this.status) {
                    this.rulsFlag = true
                    return uni.showToast({
                        title: '请选择当前处理状态',
                        icon: 'none',
                        mask: true
                    })
                }
            })
        },
        confirm({ value }) {
            this.status = value[0]
            this.showList = false
        },
        cancel() {
            this.showList = false
        },
        unfold() {
            this.unfoldFlag = !this.unfoldFlag
        },
        delImg(item) {
            this.localImageUrls = this.localImageUrls.filter(i => i != item)
            this.completionImages = this.completionImages.filter(i => i != item)
        },
        delVideo(item) {
            this.completionVideos = this.completionVideos.filter(i => i != item)
        },
        viewImage(item) {
            uni.previewImage({
                urls: [item]
            })
        },
        uploadImg(type) {
            if (!this.againCklicFlag) return
            this.againCklicFlag = false
            if (type == 1) {
                uni.chooseImage({
                    count: 1,
                    success: (chooseImageRes) => {
                        this.completionImages.push('loading')
                        this.againCklicFlag = true
                        let imgPathList = chooseImageRes.tempFilePaths;
                        if (imgPathList.length > 0) {
                if (!this.completionDescription) {
                    this.rulsFlag = true
                    return uni.showToast({
                        title: '请填写办结结果描述',
                        icon: 'none',
                        mask: true
                    })
                }
                if (this.completionImages.length == 0) {
                    return uni.showToast({
                        title: '请上传办结结果图片',
                        icon: 'none',
                        mask: true
                    })
                }
                if (this.completionVideos.length == 0) {
                    return uni.showToast({
                        title: '请上传办结结果视频',
                        icon: 'none',
                        mask: true
                    })
                }
                saveResult({
                    id: this.id,
                    status: this.status == '已办结' ? 3 : 4,
                    completionDescription: this.completionDescription,
                    completionImages: this.completionImages.join(','),
                    completionOtherDescription: this.completionOtherDescription,
                    completionVideos: this.completionVideos.join(',')
                }).then(res => {
                    if (res.code == 200) {
                        uni.showToast({
                            title: '提交成功',
                            icon: 'success',
                            mask: true
                        })
                        setTimeout(() => {
                            uni.navigateBack()
                        }, 1500)
                    } else {
                        uni.showToast({
                            title: res.msg,
                            icon: 'none',
                            mask: true
                        })
                    }
                })
            },
            confirm({
                value
            }) {
                this.status = value[0]
                this.showList = false
            },
            cancel() {
                this.showList = false
            },
            unfold() {
                this.unfoldFlag = !this.unfoldFlag
            },
            delImg(item) {
                this.localImageUrls = this.localImageUrls.filter(i => i != item)
                this.completionImages = this.completionImages.filter(i => i != item)
            },
            delVideo(item) {
                this.completionVideos = this.completionVideos.filter(i => i != item)
            },
            viewImage(item) {
                uni.previewImage({
                    urls: [item]
                })
            },
            uploadImg(type) {
                if (!this.againCklicFlag) return
                this.againCklicFlag = false
                if (type == 1) {
                    uni.chooseImage({
                        count: 1,
                        success: (chooseImageRes) => {
                            this.completionImages.push('loading')
                            this.againCklicFlag = true
                            let imgPathList = chooseImageRes.tempFilePaths;
                            if (imgPathList.length > 0) {
                                uni.uploadFile({
                                    url: config.imageUrl,
                                    filePath: imgPathList[0],
                                    timeout: 1000 * 45,
                                    name: 'file',
                                    header: {
                                        Authorization: config.uploadToken
                                    },
                                    success: (res) => {
                                        if (JSON.parse(res.data).code == 200) {
                                            this.completionImages = this.completionImages.filter(
                                                item => item !=
                                                'loading')
                                            this.$nextTick(() => {
                                                this.completionImages.push(JSON.parse(res
                                                        .data)
                                                    .data)
                                                this.localImageUrls.push(imgPathList[0])
                                            })
                                        } else {
                                            this.againCklicFlag = true
                                            this.completionImages = this.completionImages.filter(
                                                item => item != 'loading')
                                            uni.showToast({
                                                title: '上传失败，请重新上传',
                                                icon: 'none',
                                                mask: true
                                            })
                                        }
                                    },
                                    fail: (err) => {
                                        this.againCklicFlag = true
                                        this.completionImages = this.completionImages.filter(
                                            item => item != 'loading')
                                        uni.showToast({
                                            title: '上传失败，请重新上传',
                                            icon: 'none',
                                            mask: true
                                        })
                                    }
                                })
                            }
                        },
                    })
                } else {
                    uni.chooseVideo({
                        camera: 'back',
                        success: (res) => {
                            this.completionVideos.push('loading')
                            this.againCklicFlag = true
                            const tempFilePath = res.tempFilePath;
                            uni.uploadFile({
                                url: config.imageUrl,
                                filePath: imgPathList[0],
                                filePath: tempFilePath,
                                timeout: 1000 * 45,
                                name: 'file',
                                header: {
@@ -301,16 +362,16 @@
                                },
                                success: (res) => {
                                    if (JSON.parse(res.data).code == 200) {
                                        this.completionImages = this.completionImages.filter(item => item !=
                                        this.completionVideos = this.completionVideos.filter(
                                            item => item !=
                                            'loading')
                                        this.$nextTick(() => {
                                            this.completionImages.push(JSON.parse(res.data)
                                            this.completionVideos.push(JSON.parse(res.data)
                                                .data)
                                            this.localImageUrls.push(imgPathList[0])
                                        })
                                    } else {
                                        this.againCklicFlag = true
                                        this.completionImages = this.completionImages.filter(
                                        this.completionVideos = this.completionVideos.filter(
                                            item => item != 'loading')
                                        uni.showToast({
                                            title: '上传失败，请重新上传',
@@ -321,7 +382,7 @@
                                },
                                fail: (err) => {
                                    this.againCklicFlag = true
                                    this.completionImages = this.completionImages.filter(
                                    this.completionVideos = this.completionVideos.filter(
                                        item => item != 'loading')
                                    uni.showToast({
                                        title: '上传失败，请重新上传',
@@ -331,195 +392,117 @@
                                }
                            })
                        }
                    },
                    })
                }
            },
            // 去大屏播放视频
            openVideo(url) {
                uni.navigateTo({
                    url: `/pages/work-detail/maxVideo?url=${url}`
                })
            } else {
                uni.chooseVideo({
                    camera: 'back',
                    success: (res) => {
                        this.completionVideos.push('loading')
                        this.againCklicFlag = true
                        const tempFilePath = res.tempFilePath;
                        uni.uploadFile({
                            url: config.imageUrl,
                            filePath: tempFilePath,
                            timeout: 1000 * 45,
                            name: 'file',
                            header: {
                                Authorization: config.uploadToken
                            },
                            success: (res) => {
                                if (JSON.parse(res.data).code == 200) {
                                    this.completionVideos = this.completionVideos.filter(item => item !=
                                        'loading')
                                    this.$nextTick(() => {
                                        this.completionVideos.push(JSON.parse(res.data).data)
                                    })
                                } else {
                                    this.againCklicFlag = true
                                    this.completionVideos = this.completionVideos.filter(
                                        item => item != 'loading')
                                    uni.showToast({
                                        title: '上传失败，请重新上传',
                                        icon: 'none',
                                        mask: true
                                    })
                                }
                            },
                            fail: (err) => {
                                this.againCklicFlag = true
                                this.completionVideos = this.completionVideos.filter(
                                    item => item != 'loading')
                                uni.showToast({
                                    title: '上传失败，请重新上传',
                                    icon: 'none',
                                    mask: true
                                })
                            }
                        })
                    }
                })
            }
        },
        // 去大屏播放视频
        openVideo(url) {
            uni.navigateTo({
                url: `/pages/work-detail/maxVideo?url=${url}`
            })
        },
            },
        }
    }
}
</script>

<style scoped lang="scss">
.bs-1 {
    box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(0, 0, 0, 0.1);
}

.color1 {
    color: #FF4948;
}

.color2 {
    color: rgba(0, 0, 0, .8);
}

.color3 {
    color: #FAAD14;
}

.color4 {
    color: #FFFFFF;
}

.color5 {
    color: #FC8D55;
}

.color6 {
    color: rgba(0, 0, 0, 0.24);
}

.color99 {
    color: #FB9A0E;
}

.bgcolor-border {
    background: rgba(255, 253, 241, 1) !important;
    border: 2rpx solid #FFE58F !important;
}

.bgcolor1 {
    background: linear-gradient(270deg, rgba(255, 241, 0, 0.5) 0%, rgba(255, 249, 172, 0.25) 48%, rgba(255, 255, 255, 0.2) 100%, #FFFFFF 100%);
}

.bgcolor2 {
    background: linear-gradient(180deg, #FFDCDB 0%, rgba(255, 255, 255, 0) 91rpx);
}

.bgcolor3 {
    background: #FFFBE6;
}

.bgcolor4 {
    background: #F8F8F8;
}

.bgcolor5 {
    background: rgba(0, 0, 0, .23);
}

.bgcolor6 {
    background: linear-gradient(270deg, #FC8D55 0%, #FF4948 100%);
}

.bgcolor7 {
    background-color: rgba(252, 141, 85, 1);
}

.bgcolor8 {
    background: #FFFBE6;
}

.border1 {
    border: 2rpx solid #FFF1B8;
}

.border2 {
    border: 2rpx solid rgba(0, 0, 0, 0.15);
}

.safe-box {
    height: env(safe-area-inset-bottom);
}

.line-box {
    box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(0, 0, 0, 0.1);
    height: 2rpx;
    background: rgba(0, 10, 26, 0.07);
}

.transition-h {
    transition: max-height 0.5s ease-out;
}

.max-300 {
    max-height: 300rpx;
}

.max-9999 {
    max-height: 9999rpx;
}

.videoOpen {
    position: absolute;
    top: 10rpx;
    left: 0;
    z-index: 99;
    width: 140rpx;
    height: 140rpx;
    border-radius: 8rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 19rpx;

    .video {
        z-index: 999;
        width: 140rpx;
        height: 140rpx;
    .bs-1 {
        box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(0, 0, 0, 0.1);
    }
}

.imgOrVedio {
    margin-right: 17rpx;
    position: relative;
    .color1 {
        color: #FF4948;
    }

    .img {
        width: 140rpx;
        height: 140rpx;
        border-radius: 8rpx;
        margin-top: 19rpx;
    .color2 {
        color: rgba(0, 0, 0, .8);
    }

    .color3 {
        color: #FAAD14;
    }

    .color4 {
        color: #FFFFFF;
    }

    .color5 {
        color: #FC8D55;
    }

    .color6 {
        color: rgba(0, 0, 0, 0.24);
    }

    .color99 {
        color: #FB9A0E;
    }

    .bgcolor-border {
        background: rgba(255, 253, 241, 1) !important;
        border: 2rpx solid #FFE58F !important;
    }

    .bgcolor1 {
        background: linear-gradient(270deg, rgba(255, 241, 0, 0.5) 0%, rgba(255, 249, 172, 0.25) 48%, rgba(255, 255, 255, 0.2) 100%, #FFFFFF 100%);
    }

    .bgcolor2 {
        background: linear-gradient(180deg, #FFDCDB 0%, rgba(255, 255, 255, 0) 91rpx);
    }

    .bgcolor3 {
        background: #FFFBE6;
    }

    .bgcolor4 {
        background: #F8F8F8;
    }

    .bgcolor5 {
        background: rgba(0, 0, 0, .23);
    }

    .bgcolor6 {
        background: linear-gradient(270deg, #FC8D55 0%, #FF4948 100%);
    }

    .bgcolor7 {
        background-color: rgba(252, 141, 85, 1);
    }

    .bgcolor8 {
        background: #FFFBE6;
    }

    .border1 {
        border: 2rpx solid #FFF1B8;
    }

    .border2 {
        border: 2rpx solid rgba(0, 0, 0, 0.15);
    }

    .safe-box {
        height: env(safe-area-inset-bottom);
    }

    .line-box {
        box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(0, 0, 0, 0.1);
        height: 2rpx;
        background: rgba(0, 10, 26, 0.07);
    }

    .transition-h {
        transition: max-height 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    .max-300 {
        max-height: 300rpx;
    }

    .max-9999 {
        max-height: 9999rpx;
    }

    .videoOpen {
@@ -533,6 +516,7 @@
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 19rpx;

        .video {
            z-index: 999;
@@ -540,40 +524,70 @@
            height: 140rpx;
        }
    }
}

.videoImg {
    width: 140.38rpx;
    height: 140.38rpx;
    border-radius: 7.69rpx;
    position: relative;
}
    .imgOrVedio {
        margin-right: 17rpx;
        position: relative;

#myVideo {
    z-index: 1;
}
        .img {
            width: 140rpx;
            height: 140rpx;
            border-radius: 8rpx;
            margin-top: 19rpx;
        }

.zIndex999 {
    z-index: 999;
}
        .videoOpen {
            position: absolute;
            top: 10rpx;
            left: 0;
            z-index: 99;
            width: 140rpx;
            height: 140rpx;
            border-radius: 8rpx;
            display: flex;
            align-items: center;
            justify-content: center;

/deep/.u-popup__content {
    border-radius: 16rpx 16rpx 0rpx 0rpx;
}
            .video {
                z-index: 999;
                width: 140rpx;
                height: 140rpx;
            }
        }
    }

/deep/ .u-toolbar {
    border-bottom: 2rpx solid RGBA(243, 243, 243, 1);
}
    .videoImg {
        width: 140.38rpx;
        height: 140.38rpx;
        border-radius: 7.69rpx;
        position: relative;
    }

/deep/ .u-toolbar__wrapper__cancel {
    font-weight: 400;
    font-size: 30rpx;
    color: #FF4948 !important;
}
    #myVideo {
        z-index: 1;
    }

/deep/ .u-toolbar__wrapper__confirm {
    font-weight: 400;
    font-size: 30rpx;
    color: #FF4948 !important;
}
    .zIndex999 {
        z-index: 999;
    }

    /deep/.u-popup__content {
        border-radius: 16rpx 16rpx 0rpx 0rpx;
    }

    /deep/ .u-toolbar {
        border-bottom: 2rpx solid RGBA(243, 243, 243, 1);
    }

    /deep/ .u-toolbar__wrapper__cancel {
        font-weight: 400;
        font-size: 30rpx;
        color: #FF4948 !important;
    }

    /deep/ .u-toolbar__wrapper__confirm {
        font-weight: 400;
        font-size: 30rpx;
        color: #FF4948 !important;
    }
</style>

 H5/static/packUp.png

 H5/static/unfold.png