详情页面

董国庆

2025-02-23 bbb2c2f54bb401056966b4dc27039ed75b2cbac0

详情页面

 H5/.hbuilderx/launch.json

New file
@@ -0,0 +1,16 @@
{ // launch.json 配置了启动调试时相关设置，configurations下节点名称可为 app-plus/h5/mp-weixin/mp-baidu/mp-alipay/mp-qq/mp-toutiao/mp-360/
  // launchtype项可配置值为local或remote, local代表前端连本地云函数，remote代表前端连云端云函数
    "version": "0.0",
    "configurations": [{
         "default" : 
         {
             "launchtype" : "local"
         },
         "mp-weixin" : 
         {
             "launchtype" : "local"
         },
         "type" : "uniCloud"
     }
    ]
}

 H5/pages.json

@@ -12,12 +12,12 @@
                "navigationBarTitleText": "添加办理进度",
                "navigationBarBackgroundColor": "#ffffff"
            }
        },{
        }, {
            "path": "pages/work-detail/work-detail",
            "style": {
                "navigationBarTitleText": "诉求详情",
                "navigationBarBackgroundColor": "#ffffff",
                "navigationStyle": "custom"}
                "navigationStyle": "custom"
            }
        },
        {
            "path": "pages/problemReporting/problemReporting",

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

@@ -1,16 +1,40 @@
<template>
    <view class="content">
        <u-navbar title="诉求详情" bgColor="transparent" autoBack>
        <u-navbar title="诉求详情" :bgColor="scoreTopHeight>300?'#ffffff':'transparent'" autoBack>
        </u-navbar>
        <view class="topColor">
        </view>
        <view class="allContent">
            <view class="topStatus">
                <view class="status">上报待上级审核</view>
                <view class="tit">当前状态</view>
                <view class="flex a-center j-between mb-17">
                    <view class="tit">当前状态</view>
                    <!-- 延期状态 -->
                    <view v-if="false" class="flex a-center">
                        <image src="../../static/detailImg/explain.png" class="plainIcon shrink0"></image>
                        <view class="explain">延期情况说明</view>
                    </view>
                    <!-- 超时状态 -->
                    <view v-if="true" 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="overTime">天</view>
                    </view>

                </view>
            </view>
            <!-- 上报待上级审核 -->
            <view class="card1">
            <!-- 已完结诉求信息 -->
            <view class="mt-19 flex a-center j-between topMore">
                <view class="name">诉求信息</view>
                <view class="flex a-center">
                    <view class="more">办理进度</view>
                    <image src="../../static/detailImg/right1.png" class="moreIcon shrink0"></image>
                </view>
            </view>

            <!-- 上报待上级审核--待审核状态显示 -->
            <view class="card1" v-if="status==3">
                <image src="../../static/detailImg/Ovaled.png" class="topIcon shrink0"></image>
                <view class="infoCard">
                    <view class="flex j-between">
@@ -35,8 +59,16 @@
                    </view>
                </view>
            </view>

            <!--  -->
            <view class="cardInfo">
                <view class="title">诉求号：7843523454</view>
                <view class="flex j-between a-center">
                    <view class="title">诉求号：7843523454</view>
                    <view class="flex a-center" v-if="status==1" @click.stop="applyOverTime">
                        <view class="apply">延期申请</view>
                        <image src="../../static/detailImg/right.png" class="rightIcon shrink0"></image>
                    </view>
                </view>
                <view class="addressCard">
                    <view class="address">江苏省常州市溧阳市牛顿大道172号</view>
                    <image src="../../static/detailImg/dwei.png" class="addressIcon shrink0" mode="aspectFill"></image>
@@ -73,6 +105,8 @@
                </view>
                <!--  上级端需要的字段-->
            </view>

            <!-- 问题描述 -->
            <view class="problem">
                <view class="title">问题描述</view>
                <view class="desc">
@@ -97,14 +131,162 @@
                        </image>
                    </view>
                </view>
            </view>

            <!-- 办结情况 -->
            <view class=" flex a-center j-between topMore topMore1 ">
                <view class="name">办结情况</view>
                <view class="flex a-center">
                </view>
            </view>
            <!-- 办结结果描述 -->
            <view class="resultDesc">
                <view class="topInfo">
                    <view class="flex a-center j-between mb-15">
                        <view class="flex a-center">
                            <view class="name">办结人员：</view>
                            <view class="value">13987654321</view>
                        </view>
                        <view class="flex a-center">
                            <view class="name">联系电话：</view>
                            <view class="value">13987654321</view>
                        </view>
                    </view>
                    <view class="flex a-center">
                        <view class="name">办结时间：</view>
                        <view class="value">13987654321</view>
                    </view>
                </view>
                <view class="title">办结结果描述</view>
                <view class="context">
                    1、处理措施：记录为解决该问题所采取的具体措施，包括政策宣传、处理沟通、现场处理等方式。
                    2、处理时间：记录处理该问题的时间节点，包括开始处理时间、处理完成时间等。
                    3、参与人员：记录参与处理该问题的人员名单，包括走访人员、相关部门工作人员等。
                    4、结果概述：简要描述问题的处理结果，是否得到有效解决，是否达到走访对象的期望等。
                    5、后续跟进：如需进一步跟进或处理，记录后续跟进的计划、时间节点及责任人员。
                </view>
                <view class="title">描述图片</view>
                <view class="descPic">
                    <view class="picItem" v-for="(item,index) in 3">
                        <image src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
                            class="img shrink0" mode="aspectFill">
                        </image>
                    </view>
                </view>
                <view class="title">描述视频</view>
                <view class="descPic" v-if="false">
                    <view class="picItem" v-for="(item,index) in 3">
                        <image src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
                            class="img shrink0" mode="aspectFill">
                        </image>
                    </view>
                </view>
                <view v-else class="noData">暂无数据</view>
            </view>

            <!-- 详情/办理进度 --正在办理显示-->
            <view class="progress">
                <view class="title">当前办理进度</view>
                <view class="proCard">
                    <view class="proItem" v-for="(item,index) in 3">
                        <view class="mr-31 flex flex-column a-center">
                            <image src="../../static/detailImg/right.png" class="proIcon shrink0" mode="aspectFill">
                            </image>
                            <view class="proLine">
                            </view>
                        </view>
                        <view>
                            <view class="flex a-center j-between mb-10">
                                <view class="name">李雷</view>
                                <view class="time">2024年9月29日11:09:09</view>
                            </view>
                            <view class="context">处理进度说明处理进度说明处理进度说明处理进
                                度说明处理进度说明处理进度说明处理进度说明处理进度说明</view>
                            <view class="proImg">
                                <view class="imgOrVedio" v-for="(item,index) in 4">
                                    <image
                                        src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
                                        class="img shrink0" mode="aspectFill">
                                    </image>
                                    <view class="openVideo" v-if="item==4">
                                        <image src="../../static/detailImg/open.png" class="video shrink0"
                                            mode="aspectFill">
                                        </image>
                                    </view>

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

            <!-- 详情/诉求流转 --正在办理显示-->
            <view class="careRequire">
                <view class="title">诉求流转</view>
                <view class="proCard">
                    <view class="proItem" v-for="(item,index) in 3">
                        <view class="mr-34 flex flex-column a-center">
                            <image v-if="item==3" src="../../static/detailImg/Ovaled.png" class="proIcon shrink0"
                                mode="aspectFill">
                            </image>
                            <image v-else src="../../static/detailImg/Ovaled.png" class="proIcon shrink0"
                                mode="aspectFill">
                            </image>

                            <view v-if="item!=3" class="proLine">
                            </view>
                        </view>
                        <view class="requireItem">
                            <view class="flex a-center j-between mb-23">
                                <view class="name" :class="item==3?'opt1':''">市级下派</view>
                                <view class="time" :class="item==3?'opt1':''">2024年9月29日11:09:09</view>
                            </view>
                            <view class="name fs-23" :class="item==3?'opt1':''">上报</view>

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

            </view>
        </view>
        <view class="btnButtom">
            <view class="cancel">驳回</view>
            <view class="sure">审核通过</view>

        <!-- 上级显示 -->
        <view class="btnButtom" v-if="false">
            <view class="btnDown">问题上报</view>
            <view class="btnDown">诉求下派</view>
            <view class="btnAdd">添加办理进度</view>
            <view class="btnAdd">办理结果录入</view>
        </view>
        <view class="btnButtom" v-if="false">
            <view class="cancel" @click.stop="showPop=true">驳回</view>
            <view class="sure">审核通过</view>
        </view>
        <!-- 上级显示 -->

        <!-- 党员显示 -->
        <view class="btnButtom" v-if="true">
            <view class="btnDown partyUp">问题上报</view>
            <view class="btnAdd partyDown">添加办理进度</view>
            <view class="btnAdd partyDown">办理结果录入</view>
        </view>
        <!-- 党员显示 -->




        <u-popup round="19rpx" :show="showPop" mode="center" @close="close" @open="open">
            <view class="popup-content">
                <view class="title-pop">操作驳回</view>
                <view class="pop-textArea">
                    <u--textarea v-model="rejectText" placeholder="请输入驳回原因"></u--textarea>
                </view>
                <view class="botton-btn">
                    <view class="cancle" @click.stop="showPop=false">取消</view>
                    <view class="sure" @click.stop="submitReject">确定</view>
                </view>
            </view>
        </u-popup>


    </view>
@@ -114,8 +296,28 @@
    export default {
        data() {
            return {
                showPop: false, //弹窗驳回
                rejectText: "", //驳回原因

                status: '2', //1 正在办理2已完结

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

            };
        },
        onPageScroll(e) {
            this.scoreTopHeight = e.scrollTop

        },
        methods: {
            open() {},
            close() {},
            // 确认驳回
            submitReject() {
                this.showPop = false
            },
            //延期申请
            applyOverTime() {},
        }
    }
</script>
@@ -134,7 +336,7 @@

    .allContent {
        margin-top: -243rpx;
        padding: 0 31rpx 98rpx 31rpx;
        padding: 0 31rpx 178rpx 31rpx;


        .topStatus {
@@ -150,8 +352,76 @@
                font-size: 27rpx;
                color: rgba(0, 0, 0, 0.8);
                line-height: 38rpx;
                margin-bottom: 17rpx;
                // margin-bottom: 17rpx;
            }

            .plainIcon {
                width: 36rpx;
                height: 36rpx;
            }

            .explain {
                font-weight: 600;
                font-size: 23rpx;
                color: rgba(0, 0, 0, 0.6);
                line-height: 33rpx;
                margin-left: 8rpx;
            }

            .overTimeIcon {
                width: 30.77rpx;
                height: 30.77rpx;
                margin-right: 15rpx;
            }

            .overTime {
                font-weight: 400;
                font-size: 23rpx;
                color: #FF4948;
                line-height: 33rpx;
            }

            .day {
                margin: -11rpx 12rpx 0 9rpx;
                background: #FFEAEA;
                border-radius: 19rpx;
                border: 2rpx solid #FF4948;
                padding: 4rpx 24rpx;
                font-weight: 600;
                font-size: 42rpx;
                color: #FF4948;
                line-height: 42rpx;
            }
        }

        .topMore {
            padding: 8rpx 31rpx;
            margin: 19rpx -31rpx 0 -31rpx;
            background: linear-gradient(270deg, rgba(102, 102, 102, 0) 0%, rgba(102, 102, 102, 0.14) 100%);

            .name {
                font-weight: 600;
                font-size: 23rpx;
                color: rgba(0, 0, 0, 0.8);
                line-height: 33rpx;
            }

            .more {
                font-weight: 600;
                font-size: 23rpx;
                color: rgba(0, 0, 0, 0.6);
                line-height: 33rpx;
            }

            .moreIcon {
                width: 19.23rpx;
                height: 19.23rpx;
                margin-left: 15rpx;
            }
        }

        .topMore1 {
            margin-top: 38rpx !important;
        }

        .card1 {
@@ -208,11 +478,23 @@
                text-shadow: 0px 0px 27px rgba(0, 0, 0, 0.1);
            }

            .apply {
                font-weight: 600;
                font-size: 23rpx;
                color: #FF4948;
                line-height: 33rpx;
                margin-right: 15rpx;
            }

            .rightIcon {
                width: 19.23rpx;
                height: 19.23rpx;
            }

            .addressCard {
                margin: 33rpx 10rpx;
                padding: 33rpx 27rpx;
                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%);
                box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(0, 0, 0, 0.1);
                border-radius: 19rpx;
                display: flex;
                justify-content: space-between;
@@ -254,7 +536,6 @@
            background: #FFFFFF;
            box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(0, 0, 0, 0.1);
            padding: 0 31rpx 34rpx 31rpx;
            margin-bottom: 60rpx;

            .title {
                padding-top: 34rpx;
@@ -309,6 +590,243 @@
            }
        }

        .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 {
                    display: flex;
                    padding-bottom: 46rpx;

                    .proIcon {
                        width: 19.23rpx;
                        height: 19.23rpx;
                        margin: 10rpx 0;
                    }

                    .proLine {
                        flex: 1;
                        width: 4rpx;
                        min-height: 50rpx;
                        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;
                    }
                }
            }
        }

        .careRequire {
            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: 38rpx;
            }

            .proCard {
                .proItem {
                    display: flex;


                    .proIcon {
                        width: 19.23rpx;
                        height: 19.23rpx;
                        margin: 23rpx 0 19rpx 0;
                    }

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

                    .requireItem {
                        flex: 1;
                        background: #F9F9F9;
                        box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(0, 0, 0, 0.1);
                        border-radius: 8rpx;
                        padding: 31rpx;
                        margin-bottom: 46rpx;

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

                        .opt1 {
                            color: rgba(0, 0, 0, 0.10) !important;
                        }
                    }



                }

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

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

            .topInfo {
                background: rgba(252, 141, 85, 0.1);
                border-radius: 8rpx;
                padding: 19rpx 27rpx;

                .name {
                    font-size: 23rpx;
                    color: #000000;
                    line-height: 33rpx;
                    margin-right: 8rpx;
                }

                .value {
                    font-size: 23rpx;
                    color: #000000;
                    line-height: 33rpx;
                }
            }

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

            .context {
                padding: 25rpx 30rpx 29rpx 31rpx;

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

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

                .picItem {
                    margin-right: 15rpx;

                    .img {
                        width: 140.38rpx;
                        height: 140.38rpx;
                        border-radius: 7.69rpx;
                    }
                }
            }
        }
    }

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

    .btnButtom {
@@ -318,6 +836,7 @@
        box-sizing: border-box;
        padding: 33rpx 31rpx;
        display: flex;
        background-color: #ffffff;
        justify-content: space-between;

        .cancel {
@@ -340,5 +859,125 @@
            line-height: 38rpx;
            padding: 19rpx 119rpx 19rpx 119rpx;
        }

        .btnDown {
            background: #FFFFFF;
            border: 2rpx solid;
            box-shadow: 0 0 0 5px linear-gradient(270deg, rgba(252, 141, 85, 1), rgba(255, 73, 72, 1));
            border-image-slice: 1;
            border-radius: 38rpx;
            font-size: 27rpx;
            color: #FF4948;
            line-height: 38rpx;
            padding: 19rpx 13rpx;
        }

        .btnAdd {
            background: linear-gradient(270deg, #FC8D55 0%, #FF4948 100%);
            border-radius: 38rpx;
            font-size: 27rpx;
            color: #FFFFFF;
            line-height: 38rpx;
            padding: 19rpx 15rpx 19rpx 15rpx;
        }

        .partyUp {
            padding: 19rpx 52rpx !important;
        }

        .partyDown {
            padding: 19rpx 25rpx 19rpx 25rpx !important;
        }


    }

    .popup-content {
        background: url('/static/pop@2x.png') no-repeat center center;
        width: 576.92rpx;
        // height: 425rpx;
        border-radius: 19rpx;

        .title-pop {
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            font-size: 35rpx;
            color: rgba(0, 0, 0, 0.8);
            line-height: 35rpx;
            text-align: center;
            margin-top: 46.15rpx;
        }

        .pop-textArea {
            padding: 34rpx 44rpx 0 44rpx;

            ::v-deep .u-textarea {}

        }

        .pop-label {
            font-family: PingFang-SC, PingFang-SC;
            font-weight: 500;
            font-size: 31rpx;
            color: rgba(0, 0, 0, 0.6);
            margin-top: 46.15rpx;
            margin-left: 64.54rpx;
        }

        .pop-select {
            height: 77rpx;
            background: #FFFFFF;
            border-radius: 15rpx;
            border: 2rpx solid rgba(0, 0, 0, 0.15);
            margin-left: 61.54rpx;
            margin-top: 19.23rpx;
            margin-right: 61.54rpx;
            display: flex;
            align-items: center;
            padding-left: 30.77rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 31rpx;
            color: rgba(0, 0, 0, 0.24);
            cursor: pointer;
        }

        .botton-btn {
            display: flex;
            margin-top: 44.23rpx;
            justify-content: center;
            padding-bottom: 55rpx;
        }

        .cancle {
            width: 212rpx;
            height: 77rpx;
            border-radius: 48rpx;
            border: 2rpx solid rgba(0, 0, 0, 0.8);
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: 27rpx;
            color: rgba(0, 0, 0, 0.8);
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 32.69rpx;
            cursor: pointer;
        }

        .sure {
            width: 212rpx;
            height: 77rpx;
            background: linear-gradient(270deg, #FC8D55 0%, #FF4948 100%);
            border-radius: 48rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            font-size: 27rpx;
            color: #FFFFFF;
            cursor: pointer;
        }
    }
</style>

 H5/static/detailImg/explain.png

 H5/static/detailImg/notice.png

 H5/static/detailImg/right1.png