ykt-team-wxapp/pages/survey/fill.vue

<template>
  <full-page :customScroll="true">
    <template v-if="survey && survey.status === 'enable' && !readonly">
      <survey-cover v-if="step === 'cover'" :customerName="customerName" :survey="survey" @answer="step = 'question'" />
      <survey-question v-else-if="step === 'question'" :survey="survey" :list="showList" @submit="submit" />
    </template>
    <survey-record v-else-if="survey && survey.status === 'enable' && readonly" :customerName="customerName"
      :survey="survey" :list="showList" />
    <view v-else class="empty">
      <image class="empty__icon" src="/static/empty.svg"></image>
      <text class="empty__txt">{{ emptyTxt }}</text>
    </view>
  </full-page>
</template>

<script setup>
import { computed, ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import api from "@/utils/api.js";
import { loading, toast, hideLoading } from "@/utils/widget";

import FullPage from '@/components/full-page.vue';
import surveyCover from "./components/survey-cover.vue";
import surveyQuestion from "./components/survey-question.vue";
import surveyRecord from "./components/survey-record.vue";

const corpId = ref('');
const surveryId = ref('');
const answerId = ref('');
const memberId = ref('');
const survey = ref(null);
const emptyTxt = ref('')
const customerName = ref('');
const step = ref('cover');

const readonly = computed(() => survey.value && survey.value.submitTime);
const list = computed(() => survey.value && Array.isArray(survey.value.list) ? survey.value.list : []);
const showList = computed(() => {
  return list.value.filter(item => {
    const showCase = Array.isArray(item.showCase) ? item.showCase : [];
    if (showCase.length) {
      const res = showCase.every(({
        type,
        id,
        value
      }) => {
        const question = this.list.find(i => i.id === id);
        const val = question ? question.value : '';
        return type === 'in' ? value.includes(val) : val === value.join()
      })
      return res
    }
    return true
  })
})

async function init() {
  loading('加载中...');
  try {
    const record = await getAnswerRecord();
    if (record && record.submitTime) {
      record.status = 'enable';
      survey.value = record;
      hideLoading()
      return;
    }
    survey.value = await getSurvey();
    if (survey.value.status == 'stop') {
      emptyTxt.value = '问卷已经停用'
    } else if (survey.value.status == 'init') {
      emptyTxt.value = '问卷暂未启用'
    }
  } catch (e) {
    hideLoading();
    toast('获取问卷失败');
    uni.navigateBack();
  }
}

async function getAnswerRecord() {
  const res = await api('getAnswer', { corpId: corpId.value, surveryId: surveryId.value, answerId: answerId.value, memberId: memberId.value });
  if (res && res.success) {
    return res.record
  }
  return Promise.reject();
}

async function getSurvey() {
  const res = await api('getSurveryDetail', { corpId: corpId.value, id: surveryId.value })
  if (res && res.success && res.data) {
    return res.data
  }
  return Promise.reject();
}

async function submit({ list, score }) {
  const res = await api('answerSurvery', {
    corpId: corpId.value,
    name: survey.value.name,
    memberId: memberId.value,
    list: list,
    score: score,
    answerId: answerId.value,
  })
  if (res && res.success) {
    await toast('提交成功');
    uni.navigateBack();
  }
}

onLoad(opts => {
  corpId.value = opts.corpId;
  surveryId.value = opts.surveryId;
  answerId.value = opts.answerId;
  memberId.value = opts.memberId;
  customerName.value = opts.name;
  init();
})



</script>

<style scoped lang="scss">
.survey {
  position: relative;
  height: 100%;
  width: 100%;
  height: 100vh;
  width: 100vw;
  color: ragb(0, 0, 0, .9);
  background: #fff;

  @at-root &__wrapper {
    padding: 30rpx 40rpx;
  }

  @at-root &__scroll {
    height: 100%;
  }

  @at-root &__customer {
    text-align: right;
    font-size: 28rpx;
    padding-bottom: 16rpx;
    margin-bottom: 24rpx;
    color: #333;
    border-bottom: 1px solid #eee;
  }

  @at-root &__title {
    text-align: center;
    font-size: 32rpx;
    font-weight: 600;
    margin-bottom: 24rpx;
  }

  @at-root &__desc {
    text-align: left;
    color: #666;
    font-size: 28rpx;
    margin-bottom: 24rpx;
  }

  @at-root &__item {
    padding: 0 10rpx;
    margin-bottom: 24rpx;
  }

  @at-root &__question {
    position: relative;
    font-size: 32rpx;
    margin-bottom: 24rpx;

    @at-root &--require::before {
      position: absolute;
      left: -20rpx;
      top: 0;
      content: '*';
      color: #f56c6c;
    }
  }

  @at-root &__input {
    padding: 10rpx 24rpx;
    font-size: 28rpx;
    border: 1px solid #eee;
    border-radius: 8rpx;
  }

  @at-root &__radio {
    display: flex;
    align-items: center;
    padding-bottom: 24rpx;
    cursor: pointer;
  }

  @at-root &__btn {
    margin-top: 30rpx;
    padding: 24rpx 30rpx;
    border-radius: 8rpx;
    font-size: 28rpx;
    color: #fff;
    background: #006eff;
    text-align: center;
  }
}

.radio {
  @at-root &__icon {
    flex-shrink: 0;
    margin-top: 4rpx;
    margin-right: 10rpx;
    width: 40rpx;
    height: 40rpx;
  }

  @at-root &__label {
    flex-grow: 1;
    font-size: 32rpx;
  }
}

.empty {
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  text-align: center;

  @at-root &__icon {
    display: block;
    margin-bottom: 16rpx;
    width: 240rpx;
    height: 240rpx;
  }

  @at-root &__txt {
    font-size: 32rpx;
    color: #666;
  }
}
</style>