zdxtLawEnforcementCodeView/src/views/enterprise/enterpriseEvaluate/evaluate.vue

<template>
    <div class="address_edit">
        <div class="warp_body">

            <div class="cardsty"><label>处置单位</label><span>{{data.dataObj.orgText}}</span></div>
            <div class="cardsty">
                <h4>您对我们的服务满意吗？</h4>
                <div class="eval-item">
                    <label>处置速度</label>
                    <span class="eval-star">
                        <van-icon class="active" name="star" v-for="n in data.dataObj.dealSpeedMetrics"/>
                        <van-icon @click="checkDealSpeedMetrics(n)" name="star" v-for="n in (5 - data.dataObj.dealSpeedMetrics)"/>
                    </span>
                    <span v-if="data.dataObj.dealSpeedMetrics == 1">非常不满意</span>
                    <span v-if="data.dataObj.dealSpeedMetrics == 2">不满意</span>
                    <span v-if="data.dataObj.dealSpeedMetrics == 3">基本满意</span>
                    <span v-if="data.dataObj.dealSpeedMetrics == 4">满意</span>
                    <span v-if="data.dataObj.dealSpeedMetrics == 5">非常满意</span>
                </div>
                <div class="eval-item">
                    <label>处置效果</label>
                    <span class="eval-star">
                        <van-icon class="active" name="star" v-for="n in data.dataObj.dealEffectMetrics"/>
                        <van-icon name="star" v-for="n in (5 - data.dataObj.dealEffectMetrics)"/>
                    </span>
                    <span v-if="data.dataObj.dealEffectMetrics == 1">非常不满意</span>
                    <span v-if="data.dataObj.dealEffectMetrics == 2">不满意</span>
                    <span v-if="data.dataObj.dealEffectMetrics == 3">基本满意</span>
                    <span v-if="data.dataObj.dealEffectMetrics == 4">满意</span>
                    <span v-if="data.dataObj.dealEffectMetrics == 5">非常满意</span>
                </div>
                <div class="eval-item">
                    <label>服务体验</label>
                    <span class="eval-star">
                        <van-icon class="active" name="star" v-for="n in data.dataObj.serviceMetrics"/>
                        <van-icon name="star" v-for="n in (5 - data.dataObj.serviceMetrics)"/>
                    </span>
                    <span v-if="data.dataObj.serviceMetrics == 1">非常不满意</span>
                    <span v-if="data.dataObj.serviceMetrics == 2">不满意</span>
                    <span v-if="data.dataObj.serviceMetrics == 3">基本满意</span>
                    <span v-if="data.dataObj.serviceMetrics == 4">满意</span>
                    <span v-if="data.dataObj.serviceMetrics == 5">非常满意</span>
                </div>
                <div class="eval-item">
                    <label>反馈质量</label>
                    <span class="eval-star">
                        <van-icon class="active" name="star" v-for="n in data.dataObj.feedbackQualityMetrics"/>
                        <van-icon name="star" v-for="n in (5 - data.dataObj.feedbackQualityMetrics)"/>
                    </span>
                    <span v-if="data.dataObj.feedbackQualityMetrics == 1">非常不满意</span>
                    <span v-if="data.dataObj.feedbackQualityMetrics == 2">不满意</span>
                    <span v-if="data.dataObj.feedbackQualityMetrics == 3">基本满意</span>
                    <span v-if="data.dataObj.feedbackQualityMetrics == 4">满意</span>
                    <span v-if="data.dataObj.feedbackQualityMetrics == 5">非常满意</span>
                </div>

                <div class="eval-all">
                    <span>整体评价：</span>
                    <i class="verygood bad" v-if="data.dataObj.approveCode == 1 || data.dataObj.approveCode == 2"></i>
                    <i class="verygood good" v-if="data.dataObj.approveCode == 3 || data.dataObj.approveCode == 4"></i>
                    <i class="verygood" v-if="data.dataObj.approveCode == 5"></i>
                    <span v-if="data.dataObj.approveCode == 1">非常不满意</span>
                    <span v-if="data.dataObj.approveCode == 2">不满意</span>
                    <span v-if="data.dataObj.approveCode == 3">基本满意</span>
                    <span v-if="data.dataObj.approveCode == 4">满意</span>
                    <span v-if="data.dataObj.approveCode == 5">非常满意</span>
                    <span v-if="data.dataObj.approveCode == 6">未评价</span>
                    <span v-if="data.dataObj.approveCode == 7">无效评价</span>
                </div>

            </div>
            <div class="cardsty">
                <label>反馈详情</label>
                <div class="eval-cont">
                    {{data.dataObj.writingEvaluation}}
                </div>
            </div>

            <div class="file-upload">
                <div class="file-upload-center">
                    <label>附件</label>
                </div>
                <van-uploader v-model="submitData.fileObjList" class="file" multiple :show-upload="false" :deletable="false" readonly accept="image/*, video/*">
                    <template #preview-cover="{ file }">
                        <!--                        <div class="preview-cover van-ellipsis">{{ file.name }}</div>-->
                    </template>
                </van-uploader>
            </div>
            <video controls id="myVideo" v-for="(item, index) in data.videos">
                <source :src="item" type="video/mp4" />
            </video>
        </div>
    </div>
</template>

<script setup name="register">


    import {uploadFile} from '../../../util/fileUpload'
    import {reactive, ref} from "vue";
    import * as w6s from 'szient-js-sdk';
    import {getObjByKey, mssqDownFile, mssqDownFiles} from "../../../api/enterprise";

    const {useCommon, useMy} = $globalStore

    const router = useRouter();
    const route = useRoute();

    const data = reactive({
        dataObj: {
            dealSpeedMetrics: 0,
            dealEffectMetrics: 0,
            serviceMetrics: 0,
            feedbackQualityMetrics: 0,
            writingEvaluation: "",
        },
    });
    //保存参数
    const submitData = reactive({
        fileObjList: [],
    });

    onMounted(() => {
        submitData.id = route?.query?.id;
    });

    const checkDealSpeedMetrics = (n) => {
        console.log("选择处置速度: ",n)
        data.dataObj.dealSpeedMetrics = n;
    }


</script>

<style lang="less" scoped>
    .address_edit {
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow: hidden;
        background-color: #ebf3fb;
    }

    .warp_body {
        margin: 2% 3%;
        padding-bottom: 3rem;
        width: 94%;
        height: 100%;
        //border-radius: 0.25rem;
        //background-image: linear-gradient(to bottom, #ebf3fb, #fff);
        background: transparent;
        overflow-y: auto;
    }

    .file-upload {
        position: relative;
        min-height: 3.0rem;
        /*max-height: 6.5rem;*/
        padding: 1rem 0.27rem 0.27rem 0.43rem;
        box-sizing: border-box;
        background: #fff;
        border-radius: 0.2rem;
    }

    .file-upload-center {
        position: absolute;
        top: 0.27rem;
        left: 0.43rem;
        width: 90%;
        height: 0.65rem;
        font-size: 0.38rem;
        font-weight: 600;

        span {
            font-size: 0.32rem;
            color: rgb(221, 229, 227);
        }
    }

    .file {
        position: relative;
        width: 100%;
        height: calc(100% - 1.5rem);
    }

    /deep/ .van-uploader__upload, /deep/ .van-uploader__preview-image {
        width: 1.95rem !important;
    }

    .preview-cover {
        position: absolute;
        bottom: 0;
        box-sizing: border-box;
        width: 100%;
        padding: 4px;
        color: #fff;
        font-size: 0.32rem;
        text-align: center;
        background: rgba(0, 0, 0, 0.3);
    }

    .zoom {
        /*margin-top: 0.65rem;
        padding-top: 0.27rem;
        padding-left: 0.27rem;*/

        img {
            width: 1.95rem;
            height: 2rem;
            margin: 0 0.21rem 0.21rem 0;
            font-size: 0.35rem;
        }
    }

    .cardsty {
        margin: 3% 0;
        width: 100%;
        padding: 5%;
        background: #fff;
        border-radius: 0.2rem;
        font-size: 0.38rem;
        box-sizing: border-box;
    }

    .cardsty h4 {
        margin: 0.2rem 0 0.5rem;
        font-size: 0.42rem;
    }

    .cardsty label {
        margin-right: 0.3rem;
        font-weight: 600;
    }

    .eval-item {
        display: flex;
        align-items: center;
        margin: 0.27rem 0;
    }

    .eval-star {
        margin: 0 0.3rem 0 0.2rem;
    }

    .eval-star i {
        margin: 0 0.1rem;
        color: #ddd;
        font-size: 0.5rem;
    }

    .eval-star i.active {
        color: #fbb516;
    }

    .eval-all {
        display: flex;
        align-items: center;
        margin: 8% 2% 3%;
        padding: 8% 0 0 0;
        width: 96%;
        border-top: 0.02667rem solid #eee;
    }

    .eval-all i {
        display: inline-block;
        margin: 0 0.3rem 0 0.5rem;
        width: 0.75rem;
        height: 0.75rem;
        background: url("../../assets/images/eval-verygood.png") no-repeat;
        background-size: 100% 100%;
    }

    .eval-all i.good {
        background: url("../../assets/images/eval-good.png") no-repeat;
        background-size: 100% 100%;
    }

    .eval-all i.bad {
        background: url("../../assets/images/eval-bad.png") no-repeat;
        background-size: 100% 100%;
    }

    .eval-cont {
        margin: 3% 0;
        padding: 0.27rem;
        width: 100%;
        min-height: 3rem;
        border-radius: 0.2rem;
        border: 0.02667rem solid #eee;
        box-sizing: border-box;
        line-height: 1.5;
    }

</style>