zdxtLawEnforcementCodeView/src/views/enterprise/complaintEvaluate.vue

<template>
  <div class="address_edit">
    <!-- 导航栏 -->
    <!--<div class="header_body">
      <header-nav :slefBack="true" @goBack="goBack" :titelText="`评价详情`"></header-nav>
    </div>
    -->
    <!-- 中间 -->
    <div class="warp_body">

      <div class="cardsty"><label>处置单位</label><span>深圳市卫生健康委员会</span></div>
      <div class="cardsty">
        <h4>您对我们的服务满意吗？</h4>
        <div class="eval-item"><label>处置速度</label><span class="eval-star"><van-icon class="active" name="star" /><van-icon class="active" name="star" /><van-icon class="active" name="star" /><van-icon class="active" name="star" /><van-icon class="active" name="star" /></span><span>非常满意</span></div>
        <div class="eval-item"><label>处置效果</label><span class="eval-star"><van-icon name="star" /><van-icon name="star" /><van-icon name="star" /><van-icon name="star" /><van-icon name="star" /></span><span>非常满意</span></div>
        <div class="eval-item"><label>服务体验</label><span class="eval-star"><van-icon name="star" /><van-icon name="star" /><van-icon name="star" /><van-icon name="star" /><van-icon name="star" /></span><span>非常满意</span></div>
        <div class="eval-item"><label>反馈质量</label><span class="eval-star"><van-icon name="star" /><van-icon name="star" /><van-icon name="star" /><van-icon name="star" /><van-icon name="star" /></span><span>非常满意</span></div>

        <div class="eval-all"><span>整体评价：</span><i class="verygood"></i><span>非常满意</span></div>

        </div>
      <div class="cardsty">
        <label>反馈详情</label>
        <div class="eval-cont">

        </div>
      </div>

      <div class="file-upload">
        <div class="file-upload-center">
          <label>附件</label>
        </div>
        <!--          <van-uploader v-model="submitData.fileListObj"  class="file" :after-read="uploadFiles" multiple :max-size="500 * 1024" @oversize="onOversize" :before-delete="deleteFile">-->
        <!--            <template #preview-cover="{ file }">-->
        <!--              <div class="preview-cover van-ellipsis">{{ file.name }}</div>-->
        <!--            </template>-->
        <!--          </van-uploader>-->
        <!-- <van-uploader v-model="submitData.fileListObj" max-count="9" class="file" multiple
                      :after-read="uploadFiles" :before-delete="deleteFile">
            <template #preview-cover="{ file }">
                <div class="preview-cover van-ellipsis">{{ file.name }}</div>
            </template>
        </van-uploader> -->
        <van-uploader v-model="submitData.fileListObj" class="file" multiple max-count="9"
                      :after-read="uploadFiles" :before-delete="deleteFile">
          <template #preview-cover="{ file }">
            <div class="preview-cover van-ellipsis">{{ file.name }}</div>
          </template>
        </van-uploader>

      </div>

    </div>
  </div>
</template>

<script setup name="register">


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

  const {useCommon, useMy} = $globalStore

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

  const data = reactive({
  });
  //保存参数
  const submitData = reactive({
      id:"",
  });

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


</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>