ylst-h5/src/views/Home/components/LastSurvey/Index.vue

<template>
  <!-- 问卷 -->
  <div class="last-survey">
    <div class="survey_header">
      <div class="flex space-between align-center">
        <div class="flex align-center">
          <p class="fw-bold">最新问卷</p>
          <p class="survey_header_tag">NEW</p>
        </div>
        <p class="survey-all" @click="$router.push('/survey')">
          全部问卷 <van-icon name="arrow"></van-icon>
        </p>
      </div>
    </div>
    <div class="survey_con">
      <div class="flex align-center space-between mb10">
        <div>
          <div
            class="survey_con_title flex align-center"
            @click="$router.push({ path: '/preview', query: { sn: survey.sn } })"
          >
            <p class="mr-10 fw-bold">{{ survey.project_name }}</p>
            <p class="survey_con_num">{{ survey.answer_num }}份</p>
          </div>
          <div class="survey_con_label flex">
            <div class="flex align-center">
              <img src="../../../../assets/img/publish/baoming.png" alt="" />
              {{ survey.scene_name }} |
            </div>
            <div class="flex align-center">
              <img
                v-if="survey.source === 1"
                src="../../../../assets/img/publish/phone.png"
                alt=""
              />
              <img v-else src="../../../../assets/img/publish/pc.png" alt="" />
              {{ survey.source === 1 ? '移动端' : 'PC端' }} |
            </div>
            <div class="flex align-center">
              <img src="../../../../assets/img/publish/time.png" alt="" />
              {{ survey.created_at }}
            </div>
          </div>
        </div>
        <div class="survey_item_status">
          <img v-if="survey.status === 0" :src="editPng" alt="" />
          <img v-else-if="survey.status === 1" :src="publishPng" alt="" />
          <img v-else-if="survey.status === 2" :src="endPng" alt="" />
          <!--              <span class="survey_item_info_status_text">-{{ item.status_txt }}-</span>-->
        </div>
      </div>
      <div v-if="survey.introduction" class="survey_remark" v-html="survey.introduction"></div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { getSurveysPage } from '@/api/home/index.js';
import editPng from '@/assets/img/publish/edit.png';
import publishPng from '@/assets/img/publish/publish.png';
import endPng from '@/assets/img/publish/end.png';

const survey = ref({
  project_name: ''
});
const fetchSurveys = async () => {
  const params = {
    page: 1,
    per_page: 10,
    group_id: 0
  };
  const res = await getSurveysPage(params);
  if (res.data.code === 0) {
    survey.value = res.data.data[0];

    const sceneName = JSON.parse(JSON.stringify(survey.value.scene_name));
    const nameList = sceneName.split('-');
    if (nameList.length > 0) {
      survey.value.scene_name = nameList[1] ? nameList[1] : nameList[0];
    }

    const timeList = survey.value.created_at.split(' ');
    if (nameList.length) {
      survey.value.created_at = timeList[0];
    }
    console.log(survey.value);
  } else {
    // Toast()
  }
};
fetchSurveys();
</script>

<style scoped lang="scss">
.last-survey {
  margin-top: 10px;
  padding: 9px 3px 3px;
  border-radius: 16px;
  background-color: #27d6ac;
  color: #fff;

  .survey_header {
    padding: 0 15px;
    font-size: 15px;

    & .survey-all {
      font-size: 13px;
    }

    .survey_header_tag {
      width: 32px;
      height: 15px;
      margin-left: 7px;
      border-radius: 5px;
      background-color: #fff;
      color: #27d6ac;
      font-weight: 600;
      font-size: 11px;
      line-height: 15px;
      text-align: center;
    }
  }

  .survey_con {
    position: relative;
    margin-top: 5px;
    padding-bottom: 5px;
    border-radius: 10px;
    background: #fff;
    color: #000;

    .survey_item_status {
      position: absolute;
      top: 0;
      right: -15px;
      overflow: hidden;
      width: 85px;
      height: 80px;

      & img {
        width: 100%;
        height: 100%;
      }
    }

    img {
      height: 12px;
      margin-right: 3px;
    }

    .survey_con_title {
      //border: 1px solid red;
      padding: 10px;
      font-size: 15px;

      .survey_con_num {
        width: 30px;
        height: 15px;
        margin-left: 3px;
        border: 1px solid #d0d0d0;
        border-radius: 5px;
        color: #d0d0d0;
        font-size: 10px;
        line-height: 15px;
        text-align: center;
      }
    }

    .survey_con_label {
      margin-left: 10px;
      color: #666;

      & div {
        margin-right: 5px;
        font-size: 11px;
      }
    }

    .survey_remark {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      box-sizing: border-box;
      margin: 0 10px 1px;
      //padding: 8px;
      border-radius: 8px;
      //background: #f6f7f8;
      color: #828282;
      font-weight: 400;
      font-style: normal;
      font-size: 12px;
    }
  }
}

.mb10 {
  margin-bottom: 10px;
}
</style>