H5评价页面

董国庆

2025-03-13 4a36208f376fe840d881b65c70c0ad876d4d9013

H5评价页面

 H5/pages.json

@@ -98,6 +98,13 @@
                "navigationBarTitleText": "办理进度录入",
                "navigationStyle": "custom"
            }
        },
        {
            "path": "pages/evaluate/evaluate",
            "style": {
                "navigationBarTitleText": "诉求评价",
                "navigationStyle": "custom"
            }
        }
    ],
    "globalStyle": {

 H5/pages/evaluate/evaluate.vue

New file
@@ -0,0 +1,459 @@
<template>
    <view class="content">
        <view class="topColor">
        </view>
        <view class="allContent">
            <view class="fs-27 lh-38 font-bold">评价打分</view>
            <view class="mt-25 flex j-between">
                <view class="evaluateItem" v-for="(item,index) in list" :key="index" @click="activeType=item.value"
                    :class="activeType==item.value && 'activeBg'">
                    <image :src="item.img" class="statusImg" />
                    <view class="title">{{item.tit}}</view>
                </view>

            </view>
            <view class="mt-38">
                <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"
                    :class="(rulsFlag && !describe) && 'bgcolor-border'"
                    style="height: 365rpx;width: calc(100% - 31rpx);" placeholder="请输入不超过200字评价" />
                <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, 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>
                    <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(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="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>
                            <image @tap="delVideo(ite)" src="@/static/Appeal/trash.png"
                                class="absolute w-19 h-19 zIndex999" style="top: 8rpx;right: 8rpx;" />
                        </view>
                    </view>
                    <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 @click.stop="submit" class="mt-38 fs-35 lh-96 br-48 txt-center font-bold bgcolor6 color4 fixed"
                style="width: calc(100% - 62rpx);bottom: calc(env(safe-area-inset-bottom) + 10rpx);">保存</view>
            <view class="btn-box"></view>
            <view class="safe-box"></view>
        </view>
    </view>
</template>

<script>
    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,
                activeType: 1,
                list: [{
                    img: '../../static/detailImg/img1.png',
                    tit: '不满意',
                    value: 1
                }, {
                    img: '../../static/detailImg/img2.png',
                    tit: '一般',
                    value: 2
                }, {
                    img: '../../static/detailImg/img3.png',
                    tit: '满意',
                    value: 3
                }, {
                    img: '../../static/detailImg/img4.png',
                    tit: '非常满意',
                    value: 4
                }],
            }
        },
        onLoad(params) {
            // this.complaintId = params.id
            // getComplaintDetail({
            //     id: params.id
            // }).then(res => {
            //     this.info = res.data
            // })
        },
        methods: {
            back() {
                uni.navigateBack({
                    delta: 2
                })
            },
            submit() {
                if (!this.describe) {
                    this.rulsFlag = true
                    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,
                        success: (chooseImageRes) => {
                            this.imgUrls.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: uni.getStorageSync('token')
                                    },
                                    success: (res) => {
                                        if (JSON.parse(res.data).code == 200) {
                                            this.imgUrls = this.imgUrls.filter(item => item !=
                                                'loading')
                                            this.$nextTick(() => {
                                                this.imgUrls.push(JSON.parse(res.data)
                                                    .data)
                                                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
                                        })
                                    }
                                })
                            }
                        },
                        fail: () => {
                            this.againCklicFlag = true
                        }
                    })
                } 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: cuni.getStorageSync('token')
                                },
                                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
                                    })
                                }
                            })
                        },
                        fail: () => {
                            this.againCklicFlag = true
                        }
                    })
                }
            },
            // 去大屏播放视频
            openVideo(url) {
                uni.navigateTo({
                    url: `/pages/work-detail/maxVideo?url=${url}`
                })
            },
        }
    }
</script>
<style>
    page {
        background: linear-gradient(180deg, #FFFFFF 0%, #F9F9F9 6%, #F8F8F8 100%);
    }
</style>
<style lang="scss" scoped>
    .content {
        width: 100%;
        height: 100%;
    }

    .topColor {
        height: 346rpx;
        background: linear-gradient(180deg, #FFDCDB 0%, rgba(255, 255, 255, 0) 100%);
        // padding: 176rpx 27rpx 17rpx 27rpx;
    }

    .allContent {
        margin-top: -203rpx;
        padding: 38rpx 31rpx 0 31rpx;
        background: #FFFFFF;
        box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(0, 0, 0, 0.1);
        border-radius: 36rpx 36rpx 0 0;
        height: 100%;

        .evaluateItem {
            flex: 1;
            // height: 175rpx;
            background: rgba(0, 0, 0, 0.03);
            border-radius: 19rpx;
            padding: 25rpx 0 19rpx 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin-right: 17rpx;

            .statusImg {
                width: 75rpx;
                height: 75rpx;
            }

            .title {
                font-size: 23rpx;
                color: rgba(0, 0, 0, 0.6);
                line-height: 33rpx;
                margin-top: 23rpx;

            }
        }

        .activeBg {
            background: url('../../static/detailImg/bg.png') no-repeat 100% 100%;
            background-size: 100% 100%;
        }

        .evaluateItem:last-child {
            margin-right: 0;
        }
    }

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

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

            .video {
                z-index: 999;
                width: 140rpx;
                height: 140rpx;
            }
        }
    }

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

    #myVideo {
        z-index: 1;
    }

    .zIndex999 {
        z-index: 999;
    }

    .btn-box {
        height: 120rpx;
    }
</style>

 H5/pages/evaluate/service.js

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


// 办理进度录入
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/work-detail/work-detail.vue

@@ -324,6 +324,10 @@
            <view class="btnAdd partyDown" @click="resultEntery">办理结果录入</view>
        </view>
        <!-- 党员显示 -->
        <!-- v-if="[3].includes(orderInfo.status)" -->
        <view class="btnButtom" v-if="[3].includes(orderInfo.status)">
            <view class="btnAdd  evaluate" @click.stop="toEvaluate">评价</view>
        </view>



@@ -550,6 +554,12 @@
            toDown() {
                uni.navigateTo({
                    url: `/pages/dispatchWorkOrder/dispatchWorkOrder?id=${this.id}`
                })
            },
            // 去评价
            toEvaluate() {
                uni.navigateTo({
                    url: `/pages/evaluate/evaluate?id=${this.id}`
                })
            },
            addProgress() {
@@ -1199,6 +1209,10 @@
            padding: 19rpx 25rpx 19rpx 25rpx !important;
        }

        .evaluate {
            padding: 19rpx 310rpx;
        }


    }


 H5/static/detailImg/bg.png

 H5/static/detailImg/img1.png

 H5/static/detailImg/img2.png

 H5/static/detailImg/img3.png

 H5/static/detailImg/img4.png