Merge branch 'master' of http://120.76.84.145:10101/gitblit/r/H5/threeSide

13404089107

2025-02-25 3f34d376d35e0fefa3432b0203417a6f90ed3444

Merge branch 'master' of http://120.76.84.145:10101/gitblit/r/H5/threeSide

 H5/pages/add-progress/index.vue

@@ -1,103 +1,174 @@
<template>
    <view class="px-31 pt-38">
        <view class="br-19 bs-1 pt-21 pb-35 px-27 bgcolor2">
        <view v-if="Object.keys(info).length != 0" class="br-19 bs-1 pt-21 pb-35 px-27 bgcolor2">
            <view class="flex a-center j-between fs-23 lh-33 font-bold">
                <view>诉求号：7843523454</view>
                <view class="color1">正在办理</view>
                <view>诉求号：{{ info.serialNumber }}</view>
                <view class="color1">{{ ["正在办理", "延期办理", "超时办理", "已办结", "群众撤销", "上报待审核", "上级驳回"][info.status] }}</view>
            </view>
            <view class="mx-13 mt-33 pt-35 pb-33 px-27 br-19 flex a-center j-between bgcolor1">
                <view class="fs-27 lh-38 color2">江苏省常州市溧阳市牛顿大道172号</view>
                <view class="fs-27 lh-38 color2">{{ info.detailedAddress }}</view>
                <image src="@/static/detailImg/dwei.png" class="w-31 h-31 shrink0" />
            </view>
            <view class="flex a-center j-between mt-31 mx-13">
                <view class="flex-column a-center">
                    <view class="fs-27 lh-38 font-bold">问题类型</view>
                    <view class="mt-8 fs-23 lh-42 txt-center px-31 font-w400 color3 bgcolor3 border1">教育</view>
                    <view class="mt-8 fs-23 lh-42 txt-center px-31 font-w400 color3 bgcolor3 border1">
                        {{ info.problemType }}
                    </view>
                </view>
                <view class="flex-column a-center">
                    <view class="fs-27 lh-38 font-bold">群众</view>
                    <view class="fs-27 lh-38 mt-10">沙振</view>
                    <view class="fs-27 lh-38 mt-10">{{ info.name }}</view>
                </view>
                <view class="flex-column a-center">
                    <view class="fs-27 lh-38 font-bold">联系电话</view>
                    <view class="fs-27 lh-38 mt-10">14225874426</view>
                    <view class="fs-27 lh-38 mt-10">{{ info.contactNumber }}</view>
                </view>
            </view>
        </view>
        <view class="br-19 mt-38 bs-1 pt-35 pb-33 px-31">
            <view class="fs-27 lh-38 font-bold">办理进度描述</view>
            <textarea v-model="describe" class="pt-25 pl-31 mt-27 fs-27 br-8 bgcolor4" style="height: 365rpx;"
            <textarea v-model="describe" class="pt-25 pl-31 mt-27 fs-27 br-8 bgcolor4"
                :class="(rulsFlag && !describe) && 'bgcolor-border'" style="height: 365rpx;width: calc(100% - 31rpx);"
                placeholder="请输入办理进度描述" />
            <view v-if="rulsFlag && !describe" class="flex a-center mt-19">
                <image src="@/static/noNull.png" class="w-35 h-35 mr-13 shrink0" />
                <view class="fs-23 color99">办理进度描述不能为空</view>
            </view>
            <view class="fs-27 mt-38 lh-38 font-bold">图片</view>
            <view class="flex wrap mt-27">
                <view class="relative mr-15" v-for="item in localImageUrls" :key="item">
                <view class="relative mr-15" v-for="(item, index) in localImageUrls" :key="index">
                    <image v-if="item != 'loading'" :src="item" class="w-140 h-140 shrink0 br-8" />
                    <view v-if="item != 'loading'" class="absolute w-140 h-140 bgcolor5 top0 left0 br-8">
                        <view class="absolute" style="top: 50%;left: 50%;transform: translate(-50%,-50%);">
                            <image @tap="viewImage(item)" src="@/static/Appeal/amplify.png" class="w-19 h-19 mr-35"
                                mode="" />
                            <image src="@/static/Appeal/trash.png" class="w-19 h-19" />
                        <view class="absolute flex a-center j-between px-34"
                            style="top: 50%;left: 50%;transform: translate(-50%,-50%);width: calc(100% - 68rpx);">
                            <image @tap="viewImage(item)" src="@/static/Appeal/amplify.png" class="w-19 h-19" />
                            <image @tap="delImg(item)" src="@/static/Appeal/trash.png" class="w-19 h-19" />
                        </view>
                    </view>
                </view>
                <view v-if="imgUrls.includes('loading')" class="w-140 h-140 flex a-center j-center mr-15 border2 br-8">
                    <u-loading-icon></u-loading-icon>
                </view>
                <image @tap="uploadImg" src="/static/Appeal/add.png" class="w-140 h-140 shrink0" />
                <image @tap="uploadImg(1)" src="/static/Appeal/add.png" class="w-140 h-140 shrink0" />
            </view>
            <view class="fs-27 mt-37 lh-38 font-bold">视频</view>
            <view class="flex wrap mt-27">
                <view class="relative mr-15">
                    <!-- <image src="@/static/logo.png" class="w-140 h-140 shrink0 br-8" /> -->
                    <video src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4" />
                    <!-- <view class="absolute w-140 h-140 bgcolor5 top0 left0 br-8">
                        <view class="absolute" style="top: 50%;left: 50%;transform: translate(-50%,-50%);">
                            <image @tap="viewImage(item)" src="@/static/Appeal/amplify.png" class="w-19 h-19 mr-35"
                                mode="" />
                            <image src="@/static/Appeal/trash.png" class="w-19 h-19" />
                <view class="imgOrVedio" v-for="(ite, ind) in video" :key="ind">
                    <video v-if="ite != 'loading'" id="myVideo" class="videoImg shrink0" disabled :controls="false"
                        :show-center-play-btn="false" :src="ite">
                    </video>
                    <view v-if="ite != 'loading'" class="absolute w-140 h-140 bgcolor5 top0 left0 br-8 zIndex999">
                        <view class="absolute flex a-center j-between"
                            style="top: 50%;left: 50%;transform: translate(-50%,-50%);">
                            <image @tap="openVideo(ite)" src="@/static/detailImg/open.png" class="w-140 h-140" />
                        </view>
                    </view> -->
                        <image @tap="delVideo(ite)" src="@/static/Appeal/trash.png" class="absolute w-19 h-19 zIndex999"
                            style="top: 8rpx;right: 8rpx;" />
                    </view>
                </view>
                <image src="@/static/Appeal/add.png" class="w-140 h-140 shrink0" />
                <view v-if="video.includes('loading')" class="w-140 h-140 flex a-center j-center mr-15 border2 br-8">
                    <u-loading-icon></u-loading-icon>
                </view>
                <image @tap="uploadImg(2)" src="@/static/Appeal/add.png" class="w-140 h-140 shrink0" />
            </view>
        </view>
        <view class="mt-38 fs-35 lh-96 br-48 txt-center font-bold bgcolor6 color4">确认添加</view>
        <view @click.stop="submit" class="mt-38 fs-35 lh-96 br-48 txt-center font-bold bgcolor6 color4">确认添加</view>
        <view class="safe-box"></view>
    </view>
</template>

<script>
    import {
        saveProcess,
    } from './service'
    import config from '@/config/index.js'
    export default {
        data() {
            return {
                id: '',
                describe: '',
                localImageUrls: [],
                imgUrls: [],
                video: [],
                againCklicFlag: true,
            }
        },
        onLoad(params) {
            this.id = params.id
        },
        methods: {
            viewImage(item) {
                uni.previewImage({
                    urls: [item]
import {
    saveProcess,
    getComplaintDetail
} from './service'
import config from '@/config/index.js'
export default {
    data() {
        return {
            complaintId: '', //诉求id
            info: {}, //工单详情
            describe: '', //办理进度描述
            localImageUrls: [], //本地回显的图片
            imgUrls: [], //传给后端的url
            video: [],
            againCklicFlag: true,
            rulsFlag: false,
        }
    },
    onLoad(params) {
        this.complaintId = params.id
        getComplaintDetail({
            id: params.id
        }).then(res => {
            this.info = res.data
        })
    },
    methods: {
        submit() {
            if (!this.describe) {
                this.rulsFlag = true
                return uni.showToast({
                    icon: 'none',
                    title: '请输入办理进度描述'
                })
            },
            uploadImg() {
                if (!this.againCklicFlag) return
                this.againCklicFlag = false
            }
            if (this.imgUrls.length == 0) {
                return uni.showToast({
                    icon: 'none',
                    title: '请上传图片'
                })
            }
            if (this.video.length == 0) {
                return uni.showToast({
                    icon: 'none',
                    title: '请上传视频'
                })
            }
            let obj = {
                complaintId: this.complaintId,
                describe: this.describe,
                imgUrl: this.imgUrls.join(','),
                video: this.video.join(',')
            }
            saveProcess(obj).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
                    })
                }
            })
        },
        delImg(item) {
            this.localImageUrls = this.localImageUrls.filter(i => i != item)
            this.imgUrls = this.imgUrls.filter(i => i != item)
        },
        delVideo(item) {
            this.video = this.video.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,
                    sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
                    sourceType: ['camera'], //x相机拍照
                    success: (chooseImageRes) => {
                        this.imgUrls.push('loading')
                        this.againCklicFlag = true
@@ -113,11 +184,11 @@
                                },
                                success: (res) => {
                                    if (JSON.parse(res.data).code == 200) {
                                        let imgUrl = JSON.parse(res.data)
                                        this.imgUrls = this.imgUrls.filter(item => item !=
                                            'loading')
                                        this.$nextTick(() => {
                                            this.imgUrls.push(imgUrl)
                                            this.imgUrls.push(JSON.parse(res.data)
                                                .data)
                                            this.localImageUrls.push(imgPathList[0])
                                        })
                                    } else {
@@ -145,65 +216,173 @@
                        }
                    },
                })
            } else {
                uni.chooseVideo({
                    camera: 'back',
                    success: (res) => {
                        this.video.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.video = this.video.filter(item => item !=
                                        'loading')
                                    this.$nextTick(() => {
                                        this.video.push(JSON.parse(res.data).data)
                                    })
                                } else {
                                    this.againCklicFlag = true
                                    this.video = this.video.filter(
                                        item => item != 'loading')
                                    uni.showToast({
                                        title: '上传失败，请重新上传',
                                        icon: 'none',
                                        mask: true
                                    })
                                }
                            },
                            fail: (err) => {
                                this.againCklicFlag = true
                                this.video = this.video.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);
.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;
}

.color99 {
    color: #FB9A0E;
}

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

.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) 25%);
}

.bgcolor3 {
    background: #FFFBE6;
}

.bgcolor4 {
    background: #F8F8F8;
}

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

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

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

.border2 {
    border: 2rpx solid #F8F8F8;
}

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

.imgOrVedio {
    margin-right: 17rpx;
    position: relative;

    .img {
        width: 140rpx;
        height: 140rpx;
        border-radius: 8rpx;
        margin-top: 19rpx;
    }

    .color1 {
        color: #FF4948;
    }
    .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;

    .color2 {
        color: rgba(0, 0, 0, .8);
        .video {
            z-index: 999;
            width: 140rpx;
            height: 140rpx;
        }
    }
}

    .color3 {
        color: #FAAD14;
    }
.videoImg {
    width: 140.38rpx;
    height: 140.38rpx;
    border-radius: 7.69rpx;
    position: relative;
}

    .color4 {
        color: #FFFFFF;
    }
#myVideo {
    z-index: 1;
}

    .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) 25%);
    }

    .bgcolor3 {
        background: #FFFBE6;
    }

    .bgcolor4 {
        background: #F8F8F8;
    }

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

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

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

    .border2 {
        border: 2rpx solid #F8F8F8;
    }

    .safe-box {
        height: env(safe-area-inset-bottom);
    }
.zIndex999 {
    z-index: 999;
}
</style>

 H5/pages/add-progress/service.js

@@ -4,4 +4,9 @@
// 办理进度录入
export const saveProcess = (params) => {
    return request.post(`/api/huacheng-sangeshenbian/applet/complaint/save-process`, params, )
}

// 工单详情
export const getComplaintDetail = (params) => {
    return request.get('/api/huacheng-sangeshenbian/applet/complaint/detail', params)
}

 H5/pages/delay/delay.vue

@@ -1,66 +1,79 @@
<template>
    <view class="pt-38">
<template>

    <view class="pt-38">

        <view class="br-16 shadow1 pl-31 pt-31 pr-31 pb-21 ml-31 mr-31">

            <view class="fs-27 font-bold">

                说明内容

            </view>

            <view class="mt-27 bgColor1 pt-25 pl-31 pr-31 pb-29 lh-38 fs-27">

                <view class="">

                    1、处理措施：记录为解决该问题所采取的具体措施，包括政策宣传、处理沟通、现场处理等方式。

                {{ info.comment || '' }}

            </view>

            <view v-if="info.images && info.images.length > 0" class="">

                <view class="fs-27 font-bold mt-38">

                    图片

                </view>

                <view class="">

                    2、处理时间：记录处理该问题的时间节点，包括开始处理时间、处理完成时间等。

                </view>

                <view class="">

                    3、参与人员：记录参与处理该问题的人员名单，包括走访人员、相关部门工作人员等。

                </view>

                <view class="">

                    4、结果概述：简要描述问题的处理结果，是否得到有效解决，是否达到走访对象的期望等。

                </view>

                <view class="">

                    5、后续跟进：如需进一步跟进或处理，记录后续跟进的计划、时间节点及责任人员。

                <view class="flex a-center j-between mt-27 wrap">

                    <image v-for="(item,index) in info.images" :key="index" :src="item" mode="aspectFill"

                        class="w-140 h-140 mr-15 shrink0 mb-10"></image>

                </view>

            </view>

            <view class="fs-27 font-bold mt-38">

                图片

            </view>

            <view class="flex a-center j-between mt-27 wrap">

                <image src="../../static/logo.png" mode="aspectFill" class="w-140 h-140 mr-15 shrink0 mb-10" v-for="item in 4" :key="item"></image>

            </view>

            <view class="fs-27 font-bold mt-28">

                视频

            </view>

            <view class="flex a-center j-between mt-27 wrap">

                <view class="relative mr-15 shrink0 mb-10" v-for="item in 4" :key="item">

                    <image src="../../static/logo.png" mode="aspectFill" class="w-140 h-140" ></image>

                    <image src="../../static/detailImg/open.png" mode="aspectFill" class="w100 h100 absolute top0 left0"></image>

            <view v-if="info.videos && info.videos.length > 0" class="">

                <view class="fs-27 font-bold mt-28">

                    视频

                </view>

                <view class="flex a-center j-between mt-27 wrap">

                    <view class="relative mr-15 shrink0 mb-10" v-for="(item,index) in info.videos" :key="item"

                        @click="toPlay(item)">

                        <video :controls="false" :show-center-play-btn="false" :src="item" class="w-140 h-140"

                            mode=""></video>

                        <image src="../../static/detailImg/open.png" mode="aspectFill"

                            class="w100 h100 absolute top0 left0"></image>

                    </view>

                </view>

            </view>

        </view>

        <view class="h-10 safe-b">

			
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
				
            }
        },
        methods: {
			
        }
    }
</script>

<style scoped>
    .shadow1 { 
        box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(0,0,0,0.1);



        </view>

    </view>

</template>



<script>

    import {

        getDelayDetail

    } from './service.js'

    export default {

        data() {

            return {

                info: {}

            }

        },

        onLoad(e) {

            getDelayDetail(e.id).then(res => {

                if (res.data.images) {

                    res.data.images = res.data.images.split(',')

                }

                if (res.data.videos) {

                    res.data.videos = res.data.videos.split(',')

                }

                this.info = res.data

            })

        },

        methods: {

            toPlay(url) {

                uni.navigateTo({

                    url: '/pages/work-detail/maxVideo?url=' + url

                })

            }

        }

    }

</script>



<style scoped>

    .shadow1 {

        box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(0, 0, 0, 0.1);

    }



    .bgColor1 {

        background-color: #FBFBFB;

    }
</style>
    }

</style>

 H5/pages/delay/service.js

New file
@@ -0,0 +1,5 @@
import request from '@/utils/request.js'

export const getDelayDetail =(complaintId)=>{
    return request.get(`/api/huacheng-sangeshenbian/applet/complaint/delay-detail/${complaintId}`)
}

 H5/pages/index/index.vue

@@ -100,7 +100,8 @@
    import popupCertificate from '../components/certificate/certificate.vue'
    import {
        getBanner,
        getMessagelist
        getMessagelist,
        getappletcinfo
    } from './service.js'
    export default {
        components: {
@@ -116,11 +117,14 @@
                bannerlist: [],
                msgList: [],
                msgListTotal: [],
                member:1,
                userInfo:{},
            }
        },
        onLoad() {
            this.getBanner()
            this.getMessagelist()
            this.getappletcinfo()
        },
        methods: {
            getBanner() {
@@ -129,6 +133,15 @@
                    this.bannerlist = resp.data
                })
            },
            getappletcinfo(){
                getappletcinfo().then(resp=>{
                    console.log(resp,'-----判断角色');
                    this.userInfo =resp.data
                    this.member =resp.data?2:1
                    uni.setStorageSync('userInfo',resp.data)
                    uni.setStorageSync('member',this.member)
                })
            },
            getMessagelist() {
                const data = {
                    pageNum: this.pageNum,

 H5/pages/index/service.js

@@ -6,3 +6,6 @@
export const getMessagelist =(params)=>{
    return request.post(`/api/huacheng-sangeshenbian/applet/home/message`,params)
} 
export const getappletcinfo =(params)=>{
    return request.get(`/api/huacheng-sangeshenbian/applet/home/current-user-info`,params)
} 

 H5/pages/list/list.vue

@@ -2,35 +2,54 @@
    <view class="content">

        <view class="bgColor2 h-96 flex a-center fs-27  j-between txt-center shadow1 font-w400 color1"

            style="position: sticky;top: 0;">

            <view class="flex1 relative" :class="true && 'color2 font-bold'">

            <view @click="changeType('')" class="flex1 relative" :class="searchParams.type == '' && 'color2 font-bold'">

                <view class="relative zIndex1000">

                    全部

                </view>

                <view class="bgColor1">



                <view v-if="searchParams.type == ''" class="bgColor1"></view>

            </view>

            <view @click="changeType('0')" class="flex1 relative" :class="searchParams.type == '0' && 'color2 font-bold'">

                <view class="relative zIndex1000">

                    上报待审核

                </view>

                <view v-if="searchParams.type == '0'" class="bgColor1"></view>

            </view>

            <view class="flex1">

                上报待审核

            <view @click="changeType('1')" class="flex1 relative" :class="searchParams.type == '1' && 'color2 font-bold'">

                <view class="relative zIndex1000">

                    正在办理

                </view>

                <view v-if="searchParams.type == '1'" class="bgColor1"></view>

            </view>

            <view class="flex1">

                正在办理

            </view>

            <view class="flex1">

                办结

            <view @click="changeType('2')" class="flex1 relative" :class="searchParams.type == '2' && 'color2 font-bold'">

                <view class="relative zIndex1000">

                    办结

                </view>

                <view v-if="searchParams.type == '2'" class="bgColor1"></view>

            </view>

        </view>

        <view class="pl-31 pr-31">

        <view v-if="list.length == 0 && status == 'noMore'" class="mt-200">

            <image src="../../static/空空如也@2x.png" mode="widthFix" class="w100"></image>

            <view class="txt-center mt-94 fs-27 color9">

                暂无数据

            </view>

        </view>

        <view v-else class="pl-31 pr-31">

            <view class="mt-31 br-19 bgColor3 shadow2 oh pb-31" v-for="(item,index) in list" :key="item.id">

                <view class="pt-21 pl-27 pr-27 flex a-center j-between fs-27 font-bold">

                    <view class="">

                        诉求号：{{ item.serialNumber || '' }}

                    </view>

                    <view class="color3">

                    <view class="color3 flex a-center">

                        <view v-if="status == '2'" class="fs-23 font-w500 flex a-center pl-10 pr-12 mr-17 bgColor7 h-50 br-8 color8">

                            <view class="w-27 h-27 color3 bgColor2 txt-center br-18 fs-20 flex a-center j-center mr-17">

                                i

                            </view>

                            已超时{{ item.overTimeDays }}天

                        </view>

                        {{ statusObj[item.status] }}

                    </view>

                </view>

                <view class="mt-40 fs-23 pl-40 pr-40">

                <view v-if="['5','6'].includes(item.status)" class="mt-40 fs-23 pl-40 pr-40">

                    <view class="flex j-between a-center">

                        <view class="color4">

                            上报人：<text class="color5">{{ item.reporter || '' }}</text>

@@ -47,7 +66,7 @@
                </view>

                <view class="mt-27 ml-40 mr-40 br-19 bgColor4 pt-34 pb-34 fs-27 pl-27 pr-27 flex a-center j-between">

                    <text>{{ item.location || '' }}</text>

                    <image src="../../static/location.png" mode="aspectFill" class="w-31 h-31 ml-10 shrink0"></image>

                    <image src="../../static/position@2x.png" mode="aspectFill" class="w-31 h-31 ml-10 shrink0"></image>

                </view>

                <view class="ml-40 mr-40 mt-31 flex j-between a-center fs-27 txt-center">

                    <view class="">

@@ -75,7 +94,7 @@
                        </view>

                    </view>

                </view>

                <view class="fs-27 mt-31 ml-40 mr-40">

                <view v-if="item.status != '3'" class="fs-27 mt-31 ml-40 mr-40">

                    <view class="">

                        问题描述

                    </view>

@@ -83,12 +102,12 @@
                        {{ item.descriptionContent || '' }}

                    </view>

                </view>

                <view class="fs-27 mt-31 ml-40">

                <view v-if="item.status != '3' && item.images" class="fs-27 mt-31 ml-40">

                    <view class="">

                        描述图片

                    </view>

                    <view class="mt-19 flex wrap a-center">

                        <image v-for="(item1,index) in item.images" :key="index" :src="item1"

                        <image v-for="(item1,index) in item.images" :key="index" :src="item1" @click="previewImage(item.images,index)"

                            class="br-19 w-142 h-154 mr-13 mb-10 shrink0" mode="aspectFill"></image>

                    </view>

                </view>

@@ -98,18 +117,18 @@
                    <view class="txt-center fs-23 mt-27 color6">

                        创建时间：{{ item.createTime | formatTime }}

                    </view>

                    <view class="flex a-center j-center fs-23 mt-29 txt-center">

                        <view class="h-58 lh-58 bgColor5 w-192 br-29 color7">

                    <view v-if="!['3','5'].includes(item.status)" class="flex a-center j-center fs-23 mt-29 txt-center">

                        <view @click="addProgress(item.id)" class="h-58 lh-58 bgColor5 w-192 br-29 color7">

                            添加办理进度

                        </view>

                        <view class="ml-38 h-58 lh-58 bgColor6 w-192 br-29 color8">

                        <view @click="addResult(item.id)" class="ml-38 h-58 lh-58 bgColor6 w-192 br-29 color8">

                            办理结果录入

                        </view>

                    </view>

                </view>



            </view>

        </view>

		
        <view class="safe-b pt-20"></view>

    </view>

</template>

@@ -126,7 +145,7 @@
                searchParams: {

                    pageNum: 1,

                    pageSize: 10,

                    type: 0

                    type: '',//全部：不传，上报待审核：0，正在办理：1， 办结：2

                },

                list:[],

                status: 'loadMore',

@@ -143,14 +162,26 @@
            }

        },

        onReachBottom() {



            if (this.status == 'loadMore') {

                this.searchParams.pageNum += 1

                this.fetchList(this.searchParams,(e)=>{

                    this.list = [...this.list,...e.records]

                    if (this.list.length == e.total) {

                        this.status = 'noMore'

                    } else {

                        this.status = 'loadMore'

                    }

                })

            }

        },

        filters: {

            formatTime(val) {

                if (!val) return ''

                return dayjs(val).format('YYYY-MM-DD HH:mm:ss')

            }

        },

        onShow() {

            this.searchParams.pageNum = 1

            this.fetchList(this.searchParams,(e)=>{

                this.list = e.records || []

                if (this.list.length == e.total) {

@@ -167,19 +198,56 @@
                getList(params).then(res=>{

                    if (res.code == 200) {

                        res.data.records.map(item=>{

                            item.images = item.images.split(',')

                            if (item.images) {

                                item.images = item.images.split(',')

                            }

                        })

                        callback(res.data)

                    }

                })

            }

            },

            // 添加办理进度

            addProgress(id) {

                uni.navigateTo({

                    url:`/pages/progress/progress?id=${id}`

                })

            },

            // 办理结果录入

            addResult(id) {

                uni.navigateTo({

                    url:`/pages/result-entry/index?id=${id}`

                })

            },

            // 切换状态筛选

            changeType(type) {

                this.searchParams = {
                    pageNum: 1,
                    pageSize: 10,
                    type,//全部：不传，上报待审核：0，正在办理：1， 办结：2
                }

                this.fetchList(this.searchParams,(e)=>{

                    this.list = e.records || []

                    if (this.list.length == e.total) {

                        this.status = 'noMore'

                    } else {

                        this.status = 'loadMore'

                    }

                })

            },

            // 预览图片

            previewImage(list,index) {

                uni.previewImage({

                    urls: list,

                    current: index,

                });

            },

        }

    }

</script>



<style scoped lang="scss">

    .content {

        min-height: 100vh;

        height: 100%;

        background-color: #f7f7f7;

    }



@@ -235,6 +303,10 @@
    .color8 {

        color: #fff;

    }

	
    .color9 {

        color: #999999;

    }



    .bgColor1 {

        background: linear-gradient(270deg, #FFB318 0%, #FF330D 100%);

@@ -267,6 +339,10 @@
    .bgColor6 {

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

    }

	
    .bgColor7 {

        background: #FF4948;

    }



    .border1 {

        border-top: 2rpx solid #EDEEEF;


 H5/pages/progress/progress.vue

@@ -1,33 +1,35 @@
<template>
    <view class="px-31 pt-38">
        <view class="br-19 bs-1 pt-21 pb-35 px-27 bgcolor2">
    <view v-if="Object.keys(info) != 0" class="px-31 pt-38">
        <view v-if="type" class="br-19 bs-1 pt-21 pb-35 px-27 bgcolor2">
            <view class="flex a-center j-between fs-23 lh-33 font-bold">
                <view>诉求号：7843523454</view>
                <view class="color1">正在办理</view>
                <view>诉求号：{{ info.serialNumber }}</view>
                <view class="color1">{{ ["正在办理", "延期办理", "超时办理", "已办结", "群众撤销", "上报待审核", "上级驳回"][info.status] }}</view>
            </view>
            <view class="mx-13 mt-33 pt-35 pb-33 px-27 br-19 flex a-center j-between bgcolor1">
                <view class="fs-27 lh-38 color2">江苏省常州市溧阳市牛顿大道172号</view>
                <view class="fs-27 lh-38 color2">{{ info.detailedAddress }}</view>
                <image src="@/static/detailImg/dwei.png" class="w-31 h-31 shrink0" />
            </view>
            <view class="flex a-center j-between mt-31 mx-13">
                <view class="flex-column a-center">
                    <view class="fs-27 lh-38 font-bold">问题类型</view>
                    <view class="mt-8 fs-23 lh-42 txt-center px-31 font-w400 color3 bgcolor3 border1">教育</view>
                    <view class="mt-8 fs-23 lh-42 txt-center px-31 font-w400 color3 bgcolor3 border1">
                        {{ info.problemType }}
                    </view>
                </view>
                <view class="flex-column a-center">
                    <view class="fs-27 lh-38 font-bold">群众</view>
                    <view class="fs-27 lh-38 mt-10">沙振</view>
                    <view class="fs-27 lh-38 mt-10">{{ info.name }}</view>
                </view>
                <view class="flex-column a-center">
                    <view class="fs-27 lh-38 font-bold">联系电话</view>
                    <view class="fs-27 lh-38 mt-10">14225874426</view>
                    <view class="fs-27 lh-38 mt-10">{{ info.contactNumber }}</view>
                </view>
            </view>
        </view>

        <view class="progress">
        <view v-if="info.complaintProgresses.length != 0" class="progress">
            <view class="proCard">
                <view class="proItem" v-for="(item,index) in 3" :key="index">
                <view class="proItem" v-for="(item, index) in info.complaintProgresses" :key="item.id">
                    <view class="mr-31 flex flex-column a-center">
                        <view class="dot">
                            <view class="box"></view>
@@ -35,231 +37,266 @@
                        <view class="proLine">
                        </view>
                    </view>
                    <view>
                    <view class="flex1">
                        <view class="flex a-center j-between mb-10">
                            <view class="name">李雷</view>
                            <view class="time">2024年9月29日11:09:09</view>
                            <view class="name">{{ item.createByName }}</view>
                            <view class="time">{{ item.createTime }}</view>
                        </view>
                        <view class="context">处理进度说明处理进度说明处理进度说明处理进
                            度说明处理进度说明处理进度说明处理进度说明处理进度说明</view>
                        <view class="context">{{ item.describe }}</view>
                        <view class="proImg">
                            <view class="imgOrVedio" v-for="(item,index) in 4" :key="index">
                                <image
                                    src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
                                    class="img shrink0" mode="aspectFill">
                                </image>
                                <view class="openVideo" v-if="item==4">
                            <view class="imgOrVedio" v-for="(item, index) in item.imgUrl.split(',')" :key="index">
                                <image :src="item" class="img shrink0" mode="aspectFill" />
                                <view
                                    class="absolute mt-19 w-140 h-140 bgcolor5 top0 left0 br-8 flex a-center j-center">
                                    <image @tap="viewImage(item)" src="@/static/Appeal/amplify.png" class="w-19 h-19" />
                                </view>
                            </view>
                            <view class="imgOrVedio" v-for="(item, index) in item.video.split(',')" :key="index">
                                <video id="myVideo" class="w-140 h-140 mt-19 shrink0" disabled :controls="false"
                                    :show-center-play-btn="false" :src="item" />
                                <view class="videoOpen" @click.stop="openVideo(item)">
                                    <image src="../../static/detailImg/open.png" class="video shrink0"
                                        mode="aspectFill">
                                    </image>
                                </view>

                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view @tap="toAdd" class="mt-38 fs-35 lh-96 br-48 txt-center font-bold bgcolor6 color4">添加办理进度</view>
        <view v-if="type" @tap="toAdd" class="mt-38 fs-35 lh-96 br-48 txt-center font-bold bgcolor6 color4">添加办理进度
        </view>
        <view class="safe-box"></view>
    </view>
</template>

<script>
    import {
        getList,
        getComplaintDetail
    } from './service'
    export default {
        data() {
            return {
                id: ''
            }
        },
        onLoad(params) {
            this.id = params.id
            getList({
                "pageNum": 1,
                "pageSize": 10
            }).then(res => {

import {
    getComplaintDetail
} from './service'
export default {
    data() {
        return {
            id: '',
            info: {},
            type: true,
        }
    },
    onLoad(params) {
        this.id = params.id
        if (params.type) {
            this.type = false
            uni.setNavigationBarTitle({
                title: '办理进度'
            })
        }
        getComplaintDetail({
            id: params.id
        }).then(res => {
            this.info = res.data
        })
    },
    methods: {
        toAdd() {
            uni.navigateTo({
                url: `/pages/add-progress/index?id=${this.id}`
            })
        },
        methods: {
            toAdd() {
                uni.navigateTo({
                    url: `/pages/add-progress/index`
                })
            }
        }
        viewImage(item) {
            uni.previewImage({
                urls: [item]
            })
        },
        // 去大屏播放视频
        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);
.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;
}

.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) 25%);
}

.bgcolor3 {
    background: #FFFBE6;
}

.bgcolor4 {
    background: #F8F8F8;
}

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

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

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

.border2 {
    border: 2rpx solid #F8F8F8;
}

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

.progress {
    border-radius: 27rpx;
    margin-top: 38.46rpx;
    background: #FFFFFF;
    box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(0, 0, 0, 0.1);
    padding: 34rpx 31rpx;

    .title {
        font-weight: 600;
        font-size: 27rpx;
        color: rgba(0, 0, 0, 0.88);
        line-height: 38rpx;
        text-shadow: 0px 0px 27px rgba(0, 0, 0, 0.1);
        margin-bottom: 48rpx;
    }

    .color1 {
        color: #FF4948;
    }
    .proCard {
        .proItem {
            display: flex;
            padding-bottom: 38rpx;

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

    .color3 {
        color: #FAAD14;
    }

    .color4 {
        color: #FFFFFF;
    }

    .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) 25%);
    }

    .bgcolor3 {
        background: #FFFBE6;
    }

    .bgcolor4 {
        background: #F8F8F8;
    }

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

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

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

    .border2 {
        border: 2rpx solid #F8F8F8;
    }

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

    .progress {
        border-radius: 27rpx;
        margin-top: 38.46rpx;
        background: #FFFFFF;
        box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(0, 0, 0, 0.1);
        padding: 34rpx 31rpx;

        .title {
            font-weight: 600;
            font-size: 27rpx;
            color: rgba(0, 0, 0, 0.88);
            line-height: 38rpx;
            text-shadow: 0px 0px 27px rgba(0, 0, 0, 0.1);
            margin-bottom: 48rpx;
        }

        .proCard {
            .proItem {
            .dot {
                width: 19rpx;
                height: 19rpx;
                background: linear-gradient(180deg, #FD8D3C 0%, #FA541C 100%);
                box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(252, 141, 85, 0.4);
                border-radius: 50%;
                margin: 10rpx 0;
                display: flex;
                padding-bottom: 38rpx;
                align-items: center;
                justify-content: center;

                .dot {
                    width: 19rpx;
                    height: 19rpx;
                    background: linear-gradient(180deg, #FD8D3C 0%, #FA541C 100%);
                    box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(252, 141, 85, 0.4);
                .box {
                    width: 7rpx;
                    height: 7rpx;
                    background-color: #fff;
                    border-radius: 50%;
                    margin: 10rpx 0;
                }
            }

            .proLine {
                flex: 1;
                width: 4rpx;
                background: rgba(0, 0, 0, 0.06);
                border-radius: 3rpx;
            }


            .name {
                font-weight: 400;
                font-size: 27rpx;
                color: rgba(0, 0, 0, 0.8);
                line-height: 38rpx;
            }

            .time {
                font-weight: 400;
                font-size: 23rpx;
                color: rgba(0, 0, 0, 0.4);
                line-height: 33rpx;
            }

            .context {
                font-size: 27rpx;
                color: rgba(0, 0, 0, 0.8);
                line-height: 38rpx;
            }

            .proImg {
                display: flex;
                flex-wrap: wrap;

                .imgOrVedio {
                    margin-right: 17rpx;
                    position: relative;

                    .img {
                        width: 140rpx;
                        height: 140rpx;
                        border-radius: 8rpx;
                        margin-top: 19rpx;
                    }
                }

                .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;

                    .box {
                        width: 7rpx;
                        height: 7rpx;
                        background-color: #fff;
                        border-radius: 50%;
                    .video {
                        z-index: 999;
                        width: 140rpx;
                        height: 140rpx;
                    }
                }

                .proLine {
                    flex: 1;
                    width: 4rpx;
                    background: rgba(0, 0, 0, 0.06);
                    border-radius: 3rpx;
                }


                .name {
                    font-weight: 400;
                    font-size: 27rpx;
                    color: rgba(0, 0, 0, 0.8);
                    line-height: 38rpx;
                }

                .time {
                    font-weight: 400;
                    font-size: 23rpx;
                    color: rgba(0, 0, 0, 0.4);
                    line-height: 33rpx;
                }

                .context {
                    font-size: 27rpx;
                    color: rgba(0, 0, 0, 0.8);
                    line-height: 38rpx;
                }

                .proImg {
                    display: flex;
                    flex-wrap: wrap;

                    .imgOrVedio {
                        margin-right: 17rpx;
                        position: relative;

                        .img {
                            width: 140rpx;
                            height: 140rpx;
                            border-radius: 8rpx;
                            margin-top: 19rpx;
                        }

                        .openVideo {
                            position: absolute;
                            top: 19rpx;
                            left: 0;
                            width: 140rpx;
                            height: 140rpx;
                            border-radius: 8rpx;
                            display: flex;
                            align-items: center;
                            justify-content: center;

                            .video {
                                width: 140rpx;
                                height: 140rpx;
                            }
                        }
                    }
                }
            }

            .proItem:last-child {
                .proLine {
                    display: none;
                }
            }
        }

        .proItem:last-child {
            .proLine {
                display: none;
            }
        }
    }
}

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

#myVideo {
    z-index: 1;
}
</style>

 H5/pages/progress/service.js

@@ -1,9 +1,6 @@
import request from '@/utils/request.js'

export const getList = (params) => {
    return request.post('/api/huacheng-sangeshenbian/applet/home/todo-list', params)
}

// 工单详情
export const getComplaintDetail = (params) => {
    return request.get('/api/huacheng-sangeshenbian/applet/complaint/detail', params)
}

 H5/pages/result-entry/index.vue

@@ -1,28 +1,30 @@
<template>
    <view class="px-31 pt-38">
        <view class="br-19 bs-1 pt-21 pb-35 px-27 bgcolor2 relative transition-h"
        <view v-if="Object.keys(info).length != 0" class="br-19 bs-1 pt-21 pb-35 px-27 bgcolor2 relative transition-h"
            :class="unfoldFlag ? 'max-9999' : 'max-300'">
            <view>
                <view class="flex a-center j-between fs-23 lh-33 font-bold">
                    <view>诉求号：7843523454</view>
                    <view class="color1">正在办理</view>
                    <view>诉求号：{{ info.serialNumber }}</view>
                    <view class="color1">{{ ["正在办理", "延期办理", "超时办理", "已办结", "群众撤销", "上报待审核", "上级驳回"][info.status] }}
                    </view>
                </view>
                <view class="mx-13 mt-33 pt-35 pb-33 px-27 br-19 flex a-center j-between bgcolor1">
                    <view class="fs-27 lh-38 color2">江苏省常州市溧阳市牛顿大道172号</view>
                    <view class="fs-27 lh-38 color2">{{ info.detailedAddress }}</view>
                    <image src="@/static/detailImg/dwei.png" class="w-31 h-31 shrink0" />
                </view>
                <view v-if="!unfoldFlag" class="flex a-center j-between mt-31 mx-13">
                    <view class="flex-column a-center">
                        <view class="fs-27 lh-38 font-bold">问题类型</view>
                        <view class="mt-8 fs-23 lh-42 txt-center px-31 font-w400 color3 bgcolor3 border1">教育</view>
                        <view class="mt-8 fs-23 lh-42 txt-center px-31 font-w400 color3 bgcolor3 border1">{{
                            info.problemType }}</view>
                    </view>
                    <view class="flex-column a-center">
                        <view class="fs-27 lh-38 font-bold">群众</view>
                        <view class="fs-27 lh-38 mt-10">沙振</view>
                        <view class="fs-27 lh-38 mt-10">{{ info.name }}</view>
                    </view>
                    <view class="flex-column a-center">
                        <view class="fs-27 lh-38 font-bold">联系电话</view>
                        <view class="fs-27 lh-38 mt-10">14225874426</view>
                        <view class="fs-27 lh-38 mt-10">{{ info.contactNumber }}</view>
                    </view>
                </view>
                <view v-else class="mt-33">
@@ -35,32 +37,42 @@
                            <view>详细地址</view>
                        </view>
                        <view class="font-bold txt-aligin-r" style="max-width: 404rpx;">
                            <view>2025-09-09 11:09:0</view>
                            <view>教育</view>
                            <view>张三</view>
                            <view>15708179461</view>
                            <view class="lh-35">上报说明上报说明上报说明上报说明上报说明上报说明上报说明上报说</view>
                            <view>{{ info.createTime }}</view>
                            <view>{{ info.problemType }}</view>
                            <view>{{ info.name }}</view>
                            <view>{{ info.contactNumber }}</view>
                            <view class="lh-35">{{ info.detailedAddress }}</view>
                        </view>
                    </view>
                    <view class="line-box my-35"></view>
                    <view class="fs-27 lh-38 font-bold mx-31">问题描述</view>
                    <view class="br-8 bgcolor4 py-29 mt-27 fs-27">
                        <view class="ml-31">问题标题问题标题问题标题问题标题</view>
                        <view class="ml-31">{{ info.descriptionTitle }}</view>
                        <view class="line-box my-27"></view>
                        <view class="mx-31 color2">
                            问题描述内容问题描述内容问题描述内容问题描述内容问题描述内容问题描述内容问题描述内容问题描述内容问题描述内容问题描述内容问题描述内容
                            {{ info.descriptionContent }}
                        </view>
                    </view>
                    <view class="fs-27 mt-35 lh-38 font-bold">描述图片</view>
                    <view class="flex wrap mt-27">
                        <view @tap="viewImage(item)" class="relative mr-15" v-for="item in 4" :key="item">
                            <image src="/static/logo.png" class="w-140 h-140 shrink0 br-8" />
                        <view @tap="viewImage(item)" class="relative mr-15" v-for="item in info.images.split(',')"
                            :key="item">
                            <image :src="item" class="w-140 h-140 shrink0 br-8" />
                            <view class="absolute w-140 h-140 bgcolor5 top0 left0 br-8 flex a-center j-center">
                                <image @tap="viewImage(item)" src="@/static/Appeal/amplify.png" class="w-19 h-19" />
                            </view>
                        </view>
                    </view>
                    <view class="fs-27 mt-37 lh-38 font-bold">描述视频</view>
                    <view class="flex wrap mt-27">
                        <view @tap="viewImage(item)" class="relative mr-15" v-for="item in 4" :key="item">
                            <image src="@/static/logo.png" class="w-140 h-140 shrink0 br-8" />
                        <view @tap="openVideo(item)" class="relative mr-15" v-for="item in info.videos.split(',')"
                            :key="item">
                            <video id="myVideo" class="w-140 h-140 mt-19 shrink0" disabled :controls="false"
                                :show-center-play-btn="false" :src="item" />
                            <view class="videoOpen" @click.stop="openVideo(item)">
                                <image src="../../static/detailImg/open.png" class="video shrink0" mode="aspectFill">
                                </image>
                            </view>
                        </view>
                    </view>
                </view>
@@ -72,9 +84,13 @@
        </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 class="br-15 py-15 pl-31 mx-31 pr-27 mt-27 flex j-between a-center border2">
                <view class="color6">请选择当前处理状态</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 :class="!status && 'color6'">{{ status ? status : '请选择当前处理状态' }}</view>
                <image src="/static/location/back.png" class="h-23 w-15" style="transform: rotate(-90deg);" />
            </view>
            <view v-if="rulsFlag && !status" class="flex a-center mt-19 ml-31">
                <image src="@/static/noNull.png" class="w-35 h-35 mr-13 shrink0" />
                <view class="fs-23 color99">处理状态不能为空</view>
            </view>
            <view class="fs-27 lh-38 font-bold ml-31 mt-38">办结结果描述</view>
            <view class="mt-23 br-38 pt-31 pb-16 pl-31 pr-29 fs-23 color5 bgcolor8">
@@ -100,154 +116,464 @@
                </view>
            </view>
            <view class="mx-31">
                <textarea class="pt-25 pl-31 mt-27 fs-27 br-8 bgcolor4" style="height: 365rpx;"
                    placeholder="请按上述标准描述处理结果" />
                <textarea v-model="completionDescription" class="pt-25 pl-31 mt-27 fs-27 br-8 bgcolor4"
                    :class="(rulsFlag && !completionDescription) && 'bgcolor-border'"
                    style="height: 365rpx;width: calc(100% - 31rpx);" placeholder="请按上述标准描述处理结果" />
                <view v-if="rulsFlag && !completionDescription" class="flex a-center mt-19">
                    <image src="@/static/noNull.png" class="w-35 h-35 mr-13 shrink0" />
                    <view class="fs-23 color99">办结结果描述不能为空</view>
                </view>
                <view class="fs-27 mt-38 lh-38 font-bold">图片</view>
                <view class="flex wrap mt-27">
                    <view class="relative mr-15" v-for="item in 4" :key="item">
                        <image src="/static/logo.png" class="w-140 h-140 shrink0 br-8" />
                        <view class="absolute w-140 h-140 bgcolor5 top0 left0 br-8">
                            <view class="absolute" style="top: 50%;left: 50%;transform: translate(-50%,-50%);">
                                <image @tap="viewImage(item)" src="@/static/Appeal/amplify.png" class="w-19 h-19 mr-35"
                                    mode="" />
                                <image src="@/static/Appeal/trash.png" class="w-19 h-19" />
                    <view class="relative mr-15" v-for="(item, index) in localImageUrls" :key="index">
                        <image v-if="item != 'loading'" :src="item" class="w-140 h-140 shrink0 br-8" />
                        <view v-if="item != 'loading'" class="absolute w-140 h-140 bgcolor5 top0 left0 br-8">
                            <view class="absolute flex a-center j-between px-34"
                                style="top: 50%;left: 50%;transform: translate(-50%,-50%);width: calc(100% - 68rpx);">
                                <image @tap="viewImage(item)" src="@/static/Appeal/amplify.png" class="w-19 h-19" />
                                <image @tap="delImg(item)" src="@/static/Appeal/trash.png" class="w-19 h-19" />
                            </view>
                        </view>
                    </view>
                    <image src="/static/Appeal/add.png" class="w-140 h-140 shrink0" />
                    <view v-if="completionImages.includes('loading')"
                        class="w-140 h-140 flex a-center j-center mr-15 border2 br-8">
                        <u-loading-icon></u-loading-icon>
                    </view>
                    <image @tap="uploadImg(1)" src="/static/Appeal/add.png" class="w-140 h-140 shrink0" />
                </view>
                <view class="fs-27 mt-37 lh-38 font-bold">视频</view>
                <view class="flex wrap mt-27">
                    <view class="relative mr-15" v-for="item in 4" :key="item">
                        <image src="@/static/logo.png" class="w-140 h-140 shrink0 br-8" />
                        <view class="absolute w-140 h-140 bgcolor5 top0 left0 br-8">
                            <view class="absolute" style="top: 50%;left: 50%;transform: translate(-50%,-50%);">
                                <image @tap="viewImage(item)" src="@/static/Appeal/amplify.png" class="w-19 h-19 mr-35"
                                    mode="" />
                                <image src="@/static/Appeal/trash.png" class="w-19 h-19" />
                    <view class="imgOrVedio" v-for="(ite, ind) in completionVideos" :key="ind">
                        <video v-if="ite != 'loading'" id="myVideo" class="videoImg shrink0" disabled :controls="false"
                            :show-center-play-btn="false" :src="ite">
                        </video>
                        <view v-if="ite != 'loading'" class="absolute w-140 h-140 bgcolor5 top0 left0 br-8 zIndex999">
                            <view class="absolute flex a-center j-between"
                                style="top: 50%;left: 50%;transform: translate(-50%,-50%);">
                                <image @tap="openVideo(ite)" src="@/static/detailImg/open.png" class="w-140 h-140" />
                            </view>
                            <image @tap="delVideo(ite)" src="@/static/Appeal/trash.png"
                                class="absolute w-19 h-19 zIndex999" style="top: 8rpx;right: 8rpx;" />
                        </view>
                    </view>
                    <image src="@/static/Appeal/add.png" class="w-140 h-140 shrink0" />
                    <view v-if="completionVideos.includes('loading')"
                        class="w-140 h-140 flex a-center j-center mr-15 border2 br-8">
                        <u-loading-icon></u-loading-icon>
                    </view>
                    <image @tap="uploadImg(2)" src="@/static/Appeal/add.png" class="w-140 h-140 shrink0" />
                </view>
                <view class="fs-27 lh-38 mt-40 font-bold">其他说明</view>
                <textarea class="pt-25 pl-31 mt-27 fs-27 br-8 bgcolor4" style="height: 365rpx;"
                    placeholder="请输入补充说明内容" />
                <textarea v-model="completionOtherDescription" class="pt-25 pl-31 mt-27 fs-27 br-8 bgcolor4"
                    style="height: 365rpx;width: calc(100% - 31rpx);" placeholder="请输入补充说明内容" />
            </view>
        </view>
        <view class="mt-38 fs-35 lh-96 br-48 txt-center font-bold bgcolor6 color4">提交办结结果</view>
        <view @click.stop="submit" class="mt-38 fs-35 lh-96 br-48 txt-center font-bold bgcolor6 color4">提交办结结果</view>
        <view class="safe-box"></view>
        <u-picker :show="showList" :columns="columns" @confirm="confirm" @cancel="cancel"></u-picker>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                unfoldFlag: false, //是否展开
            }
        },
        methods: {
            unfold() {
                this.unfoldFlag = !this.unfoldFlag
            },
            viewImage(item) {
                uni.previewImage({
                    urls: [require('@/static/logo.png')]
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
                })
            }
        }
            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: 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);
.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;
    }
}

.imgOrVedio {
    margin-right: 17rpx;
    position: relative;

    .img {
        width: 140rpx;
        height: 140rpx;
        border-radius: 8rpx;
        margin-top: 19rpx;
    }

    .color1 {
        color: #FF4948;
    }
    .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;

    .color2 {
        color: rgba(0, 0, 0, .8);
        .video {
            z-index: 999;
            width: 140rpx;
            height: 140rpx;
        }
    }
}

    .color3 {
        color: #FAAD14;
    }
.videoImg {
    width: 140.38rpx;
    height: 140.38rpx;
    border-radius: 7.69rpx;
    position: relative;
}

    .color4 {
        color: #FFFFFF;
    }
#myVideo {
    z-index: 1;
}

    .color5 {
        color: #FC8D55;
    }
.zIndex999 {
    z-index: 999;
}

    .color6 {
        color: rgba(0, 0, 0, 0.24);
    }
/deep/.u-popup__content {
    border-radius: 16rpx 16rpx 0rpx 0rpx;
}

    .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%);
    }
/deep/ .u-toolbar {
    border-bottom: 2rpx solid RGBA(243, 243, 243, 1);
}

    .bgcolor2 {
        background: linear-gradient(180deg, #FFDCDB 0%, rgba(255, 255, 255, 0) 91rpx);
    }
/deep/ .u-toolbar__wrapper__cancel {
    font-weight: 400;
    font-size: 30rpx;
    color: #FF4948 !important;
}

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

 H5/pages/result-entry/service.js

New file
@@ -0,0 +1,12 @@
import request from '@/utils/request.js'


// 办理进度录入
export const saveResult = (params) => {
    return request.post(`/api/huacheng-sangeshenbian/applet/complaint/save-result`, params, )
}

// 工单详情
export const getComplaintDetail = (params) => {
    return request.get('/api/huacheng-sangeshenbian/applet/complaint/detail', params)
}

 H5/pages/work-detail/service.js

@@ -8,7 +8,14 @@
export const workOrderDetail = (params) => {
    return request.get(`/api/huacheng-sangeshenbian/applet/complaint/detail`, params)
}

//获取三个身边当前用户信息 用于判断用户是否是上级
export const getUserInfo = (params) => {
    return request.get(`/api/huacheng-sangeshenbian/applet/home/current-user-info`, params)
}
//获取三个身边当前用户信息 用于判断用户是否是上级
export const reportAudit = (params) => {
    return request.post(`/api/huacheng-sangeshenbian/applet/complaint/reportAudit`, params, 'JSON')
}
// 上级端

// 上级端-秒杀商品列表

 H5/pages/work-detail/work-detail.vue

@@ -19,7 +19,7 @@
                    <view v-if="orderInfo.status==2" class="flex a-center">
                        <image src="../../static/detailImg/notice.png" class="overTimeIcon shrink0"></image>
                        <view class="overTime">已超时</view>
                        <view class="day">12</view>
                        <view class="day">{{orderInfo.createByName||0}}</view>
                        <view class="overTime">天</view>
                    </view>

@@ -296,20 +296,20 @@
        </view>

        <!-- 上级显示 -->
        <view class="btnButtom" v-if="[0,1,2].includes(orderInfo.status)">
            <view class="btnDown" @click.stop="toUp">问题上报</view>
        <view class="btnButtom" v-if="[0,1,2].includes(orderInfo.status) && !isParty">
            <view class="btnDown" @click.stop="toUp" v-if="userInfo.accountLevel>1">问题上报</view>
            <view class="btnDown" @click.stop="toDown">诉求下派</view>
            <view class="btnAdd" @click="addProgress">添加办理进度</view>
            <view class="btnAdd" @click="resultEntery">办理结果录入</view>
        </view>
        <view class="btnButtom" v-if="orderInfo.status==5">
        <view class="btnButtom" v-if="orderInfo.status==5 && !isParty">
            <view class="cancel" @click.stop="showPop=true">驳回</view>
            <view class="sure">审核通过</view>
            <view class="sure" @click.stop="submitReSolve">审核通过</view>
        </view>
        <!-- 上级显示 -->

        <!-- 党员显示 -->
        <view class="btnButtom" v-if="[0,1,2].includes(orderInfo.status)">
        <view class="btnButtom" v-if="[0,1,2].includes(orderInfo.status) && isParty">
            <view class="btnDown partyUp" @click.stop="toUp">问题上报</view>
            <view class="btnAdd partyDown" @click="addProgress">添加办理进度</view>
            <view class="btnAdd partyDown" @click="resultEntery">办理结果录入</view>
@@ -337,7 +337,9 @@
<script>
    import {
        workOrderDetail,
        list
        list,
        getUserInfo,
        reportAudit
    } from './service.js'
    export default {
        data() {
@@ -355,6 +357,9 @@
                rejectText: "", //驳回原因

                scoreTopHeight: 0, //距离顶部多高

                userInfo: {}, //个人信息
                isParty: false, //这是党员
            };
        },
        onPageScroll(e) {
@@ -370,13 +375,24 @@
            })
            this.getDetailInfo()
        },
        onLoad() {
            getUserInfo().then(res => {
                if (res.data == null) {
                    this.isParty = true
                    console.log('111111')
                }
                this.userInfo = {
                    ...res.data
                }
            })
        },
        methods: {
            open() {},
            close() {},
            // 去大屏播放视频
            openVideo(url) {
                uni.navigateTo({
                    url: `/pages/work-detail/maxVideo?url=${'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4'}`
                    url: `/pages/work-detail/maxVideo?url=${url}`
                })
            },
            // 获取订单详情信息
@@ -419,7 +435,31 @@
            },
            // 确认驳回
            submitReject() {
                this.showPop = false
                if (!this.this.rejectText) {
                    return uni.showToast({
                        duration: 1500,
                        title: '请输入驳回原因',
                        mask: true,
                        icon: 'none'
                    })
                }
                reportAudit({
                    id: this.id,
                    auditResult: 2,
                    rejectReason: this.rejectText
                }).then(res => {
                    this.showPop = false
                    this.getDetailInfo()
                })
            },
            // 确认通过审批
            submitReSolve() {
                reportAudit({
                    id: this.id,
                    auditResult: 1,
                }).then(res => {
                    this.getDetailInfo()
                })
            },
            //延期申请
            applyOverTime() {
@@ -792,6 +832,14 @@
                            margin-right: 17rpx;
                            position: relative;

                            .videoImg {
                                width: 140.38rpx;
                                height: 140.38rpx;
                                border-radius: 7.69rpx;
                                margin-top: 19rpx;
                                position: relative;
                            }

                            .img {
                                width: 140rpx;
                                height: 140rpx;

 H5/static/noNull.png

 H5/static/空空如也@2x.png

 H5/utils/request.js

@@ -19,8 +19,7 @@

    return new Promise(function(resolve, reject) {

        let token = uni.getStorageSync('token') ||
            'eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOjE4OTI0ODk0OTc5Nzk5NDA4NjUsInR5cGUiOjEsImV4cCI6MTc0MTY3NjA3MCwiY3JlYXRlZCI6MTc0MDM4MDA3MDQzM30.VbtID-0OdvLSLraK3Sr9cPbOLnvrrfobX-dHg3rScv7EUyu-qqPK_pXzd03wa5CgSQ7R6-m9R3NZqmPQEuQjEg'
        let token = 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOjE4OTI0ODk0OTc5Nzk5NDA4NjUsInR5cGUiOjEsImV4cCI6MTc0MDQ2NjQ3MCwiY3JlYXRlZCI6MTc0MDM4MDA3MDQzN30.oOlB8GBE50WmV4Kw-Uuy33rQpQ-homoJQ61QXs34rkQIr-jFlAn9dUOgebitI9bz5PUaFImSldhY6vokRjmYlg'
        let header = {
            'content-type': type ? 'application/x-www-form-urlencoded;charset=UTF-8' : 'application/json',
            'Authorization': 'Bearer ' + token,

 management/src/components/RightContent/AvatarDropdown.tsx

@@ -1,13 +1,9 @@
import { outLogin } from '@/services/ant-design-pro/api';
import { LogoutOutlined, SettingOutlined, UserOutlined } from '@ant-design/icons';
import { useEmotionCss } from '@ant-design/use-emotion-css';
import { history, useModel } from '@umijs/max';
import { Spin } from 'antd';
import { stringify } from 'querystring';
import type { MenuInfo } from 'rc-menu/lib/interface';
import React, { useCallback } from 'react';
import { outLogin } from './service';
import { LogoutOutlined } from '@ant-design/icons';
import { useModel } from '@umijs/max';
import React from 'react';
import { flushSync } from 'react-dom';
import HeaderDropdown from '../HeaderDropdown';
import './style.less';

export type GlobalHeaderRightProps = {
  menu?: boolean;
@@ -17,120 +13,30 @@
export const AvatarName = () => {
  const { initialState } = useModel('@@initialState');
  // 
  

  const { currentUser } = initialState || {};
  return <span className="anticon">{currentUser?.userName || '超级管理员'}</span>;
};

export const AvatarDropdown: React.FC<GlobalHeaderRightProps> = ({ menu, children }) => {
  /**
   * 退出登录，并且将当前的 url 保存
   */
  const loginOut = async () => {
    // await outLogin();
    const { search, pathname } = window.location;
    const urlParams = new URL(window.location.href).searchParams;
    /** 此方法会跳转到 redirect 参数所在的位置 */
    const redirect = urlParams.get('redirect');
    // Note: There may be security issues, please note
    if (window.location.pathname !== '/login' && !redirect) {
      // history.replace({
      //   pathname: '/login',
      //   search: stringify({
      //     redirect: pathname + search,
      //   }),
      // });
    }
  };
  const actionClassName = useEmotionCss(({ token }) => {
    return {
      display: 'flex',
      height: '48px',
      marginLeft: 'auto',
      overflow: 'hidden',
      alignItems: 'center',
      padding: '0 8px',
      cursor: 'pointer',
      borderRadius: token.borderRadius,
      '&:hover': {
        backgroundColor: token.colorBgTextHover,
      },
    };
  });

  const { initialState, setInitialState } = useModel('@@initialState');

  const onMenuClick = useCallback(
    (event: MenuInfo) => {
      const { key } = event;
      if (key === 'logout') {
        localStorage.clear();
        flushSync(() => {
          setInitialState((s) => ({ ...s, currentUser: undefined }));
        });
        loginOut();
        return;
      }
      history.push(`/account/${key}`);
    },
    [setInitialState],
  );

  const loading = (
    <span className={actionClassName}>
      <Spin
        size="small"
        style={{
          marginLeft: 8,
          marginRight: 8,
        }}
      />
    </span>
  );
  const onMenuClick = async () => {
    await outLogin();
    localStorage.clear();
    flushSync(() => {
      setInitialState((s) => ({ ...s, currentUser: undefined }));
    });

  if (!initialState) {
    return loading;
  }

  const { currentUser } = initialState;

  if (!currentUser || !currentUser.userName) {
    return loading;
  }

  const menuItems = [
    ...(menu
      ? [
        {
          key: 'center',
          icon: <UserOutlined />,
          label: '个人中心',
        },
        {
          key: 'settings',
          icon: <SettingOutlined />,
          label: '个人设置',
        },
        {
          type: 'divider' as const,
        },
      ]
      : []),
    {
      key: 'logout',
      icon: <LogoutOutlined />,
      label: '退出登录',
    },
  ];

  return (
    <HeaderDropdown
      menu={{
        selectedKeys: [],
        onClick: onMenuClick,
        items: menuItems,
      }}
    >
      {children}
    </HeaderDropdown>
  );
  return <div style={{ display: 'flex', alignItems: 'center', color: '#000' }}>
    <div className='unread' >
      <div>未读提醒</div>
      <div style={{ border: '1px solid red', borderRadius: '50%', width: '18px', lineHeight: '18px', marginLeft: '5px', textAlign: 'center', color: 'red' }}>1</div>
    </div>
    <div className="logoOut" onClick={onMenuClick}>退出登录<LogoutOutlined style={{ marginLeft: '5px' }} /></div>
  </div>
};

 management/src/components/RightContent/service.js

New file
@@ -0,0 +1,8 @@
import { request } from '@umijs/max';

export async function outLogin(data) {
  return request('/api/huacheng-sangeshenbian/systemUser/logout', {
    method: 'POST',
    data,
  });
}

 management/src/components/RightContent/style.less

New file
@@ -0,0 +1,17 @@
.unread {
    display: flex;
    align-items: center;
    margin-right: 20px;
}

.unread:hover {
    background-color: rgba(241, 237, 237, 0.45);
    cursor: pointer;
    border-radius: 8px;
}

.logoOut:hover {
    background-color: rgba(241, 237, 237, 0.45);
    cursor: pointer;
    border-radius: 8px;
}

 management/src/global.less

@@ -54,4 +54,7 @@
      }
    }
  }
}
.ant-pro-global-header-header-actions-avatar>div:hover {
  background: #fff;
}