办理进度录入详情

hejianhao

2025-02-24 9994926f7e5ef4dd666341b690e3fe366a22c1e4

办理进度录入详情

 H5/pages.json

@@ -60,6 +60,13 @@
                "navigationBarTitleText": "延期申请",
                "navigationBarBackgroundColor": "#ffffff"
            }
        },
        {
            "path": "pages/progress/progress",
            "style": {
                "navigationBarTitleText": "办理进度录入",
                "navigationBarBackgroundColor": "#ffffff"
            }
        }
    ],
    "globalStyle": {

 H5/pages/add-progress/index.vue

@@ -26,12 +26,13 @@
        </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="请输入办理进度描述" />
            <textarea v-model="describe" 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="relative mr-15" v-for="item in localImageUrls" :key="item">
                    <image v-if="item != 'loading'" src="/static/logo.png" 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="" />
@@ -39,19 +40,23 @@
                        </view>
                    </view>
                </view>
                <image src="/static/Appeal/add.png" class="w-140 h-140 shrink0" />
                <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" />
            </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="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>
                    </view>
                    </view> -->
                </view>
                <image src="@/static/Appeal/add.png" class="w-140 h-140 shrink0" />
            </view>
@@ -62,16 +67,82 @@
</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:[require('@/static/logo.png')]
                    urls: [require('@/static/logo.png')]
                })
            },
            uploadImg() {
                if (!this.againCklicFlag) return
                this.againCklicFlag = false
                uni.chooseImage({
                    count: 1,
                    sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
                    sourceType: ['camera'], //x相机拍照
                    success: (chooseImageRes) => {
                        this.againCklicFlag = true
                        let imgPathList = chooseImageRes.tempFilePaths;
                        if (imgPathList.length > 0) {
                            uni.uploadFile({
                                url: config.BASE_URL + '/master/oss/pic',
                                filePath: imgPathList[0],
                                timeout: 1000 * 45,
                                name: 'file',
                                header: {
                                    Authorization: uni.getStorageSync('token')
                                },
                                success: (res) => {
                                    if (JSON.parse(res.data).code == 200) {
                                        let imgUrl = JSON.parse(res.data)
                                        this.imageUrls = this.imageUrls.filter(item => item !=
                                            'loading')
                                        this.$nextTick(() => {
                                            this.imageUrls.push(imgUrl)
                                            this.localImageUrls.push(imgPathList[0])
                                        })
                                    } else {
                                        this.againCklicFlag = true
                                        this.imgUrls = this.imgUrls.filter(
                                            item => item != 'loading')
                                        uni.showToast({
                                            title: '上传失败，请重新上传',
                                            icon: 'none',
                                            mask: true
                                        })
                                    }
                                },
                                fail: (err) => {
                                    this.againCklicFlag = true
                                    this.imgUrls = this.imgUrls.filter(
                                        item => item != 'loading')
                                    uni.showToast({
                                        title: '上传失败，请重新上传',
                                        icon: 'none',
                                        mask: true
                                    })
                                }
                            })
                        }
                    },
                })
            }
        }
@@ -127,6 +198,10 @@
        border: 2rpx solid #FFF1B8;
    }

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

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

 H5/pages/add-progress/service.js

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


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

 H5/pages/progress/progress.vue

New file
@@ -0,0 +1,255 @@
<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="progress">
            <view class="proCard">
                <view class="proItem" v-for="(item,index) in 3" :key="index">
                    <view class="mr-31 flex flex-column a-center">
                        <view class="dot">
                            <view class="box"></view>
                        </view>
                        <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" :key="index">
                                <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 @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>
    export default {
        data() {
            return {
                id: ''
            }
        },
        onLoad(params) {
            this.id = params.id
        },
        methods: {
            toAdd() {
                uni.navigateTo({
                    url: `/pages/add-progress/index`
                })
            }
        }
    }
</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;
    }

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

                .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;
                    align-items: center;
                    justify-content: center;

                    .box {
                        width: 7rpx;
                        height: 7rpx;
                        background-color: #fff;
                        border-radius: 50%;
                    }
                }

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

 H5/utils/request.js

@@ -19,10 +19,11 @@

    return new Promise(function(resolve, reject) {

        let token = uni.getStorageSync('token')
        let token = uni.getStorageSync('token') ||
            'eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOjE4OTI0ODk0OTc5Nzk5NDA4NjUsInR5cGUiOjEsImV4cCI6MTc0MTY3MTI5OSwiY3JlYXRlZCI6MTc0MDM3NTI5OTQwNn0.39bIG5k-yClEWnUXvA63rjS631pj6fykU-J6vrC5u3HczL8NSwT_3pdVkj3hr4qikCrE7i9hmNkU_aLch1sw8A'
        let header = {
            'content-type': type ? 'application/x-www-form-urlencoded;charset=UTF-8' : 'application/json',
            'Authorization': token,
            'Authorization': 'Bearer ' + token,
            'lang': uni.getStorageSync('locale') === 'zh-Hans' ? 'zh_CN' : 'zh-tw',
        }
        const requestTask = uni.request({
@@ -136,15 +137,15 @@
            showCancel: false,
            success: function(res) {
                if (res.confirm) {
                    if (routeStr == 'pages/login/index') {
                        uni.reLaunch({
                            url: '/pages/login/index'
                        })
                        return
                    }
                    uni.reLaunch({
                        url: '/pages/login/index'
                    })
                    // if (routeStr == 'pages/login/index') {
                    //     uni.reLaunch({
                    //         url: '/pages/login/index'
                    //     })
                    //     return
                    // }
                    // uni.reLaunch({
                    //     url: '/pages/login/index'
                    // })
                }
            }
        });