补充弹窗

董国庆

2025-02-23 b3c700de7a057b42a1bef4c5a391cf254c3864fd

补充弹窗

 H5/pages.json

@@ -49,11 +49,17 @@
        },
        {
            "path" : "pages/result-entry/index",
            "style" : 
            {
            "style": {
                "navigationBarTitleText": "办结结果录入",
                "navigationBarBackgroundColor": "#ffffff"
            }
        },
        {
            "path": "pages/work-detail/postpone-apply",
            "style": {
                "navigationBarTitleText": "延期申请",
                "navigationBarBackgroundColor": "#ffffff"
            }
        }
    ],
    "globalStyle": {

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

New file
@@ -0,0 +1,220 @@
<template>
    <view class="px-31 pt-38">
        <view 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>
            <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>
                <image src="@/static/public/gps.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>
                <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>
                <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>
            </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 class="pt-25 pl-31 mt-27 fs-27 br-8 bgcolor4" style="height: 365rpx;" placeholder="请输入办理进度描述" />
            <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>
                    </view>
                </view>
                <image 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>
                    </view>
                </view>
                <image 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 class="safe-box"></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">
                    是否确认提交延期申请？
                </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>
</template>

<script>
    export default {
        data() {
            return {
                showPop: true,
            }
        },
        methods: {
            close() {

            },
            open() {

            },
            viewImage(item) {
                uni.previewImage({
                    urls: [require('@/static/logo.png')]
                })
            }
        }
    }
</script>

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

    .color1 {
        color: #FF4948;
    }

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

    .color3 {
        color: #FAAD14;
    }

    .color4 {
        color: #FFFFFF;
    }

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

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

    .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 {
            margin-top: 50rpx;
            font-size: 31rpx;
            color: rgba(0, 0, 0, 0.6);
            line-height: 42rpx;
            text-align: center;

        }





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

        .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/pages/work-detail/work-detail.vue

@@ -64,7 +64,7 @@
            <view class="cardInfo">
                <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="flex a-center" v-if="true" @click.stop="applyOverTime">
                        <view class="apply">延期申请</view>
                        <image src="../../static/detailImg/right.png" class="rightIcon shrink0"></image>
                    </view>
@@ -317,7 +317,11 @@
                this.showPop = false
            },
            //延期申请
            applyOverTime() {},
            applyOverTime() {
                uni.navigateTo({
                    url: `/pages/work-detail/postpone-apply`
                })
            },
        }
    }
</script>