QiuShou-kiosk/src/views/survey-detail.vue

<template>
  <div class="main">
    <div class="content">
      <sub-header />
      <div class="left">
        <hero-sub-title :type="4" />
        <div class="detail">
          <div class="back" @click="$router.go(-1)"></div>
          <div class="info">
            <!-- {{ details }} -->
            <div>
              <template v-for="detail in details">
                <n-space
                  vertical
                  align="start"
                  justify="center"
                  style="padding: 1.25rem"
                >
                  <h3>{{ detail.question }}</h3>

                  <n-radio-group
                    v-model:value="detail.value"
                    name="radiogroup"
                    v-if="
                      detail.answer &&
                      JSON.parse(detail.answer).answer &&
                      Number(detail.type) === 1
                    "
                  >
                    <n-space>
                      <n-radio
                        v-for="answer in JSON.parse(detail.answer).answer"
                        :key="answer.val"
                        :value="answer.val"
                      >
                        {{ answer.name }}
                      </n-radio>
                    </n-space>

                    <n-space
                      v-if="detail.hasDiy"
                      align="center"
                      style="margin-top: 15px; min-width: 450px"
                    >
                      <n-radio key="diy" value="diy"> 其他 </n-radio>
                      <n-input
                        style="min-width: 450px"
                        round
                        maxlength="100"
                        show-count
                        placeholder="请输入内容 最多100字"
                        v-model:value="detail[`custom-${detail['id']}`]"
                      />
                    </n-space>
                  </n-radio-group>

                  <n-checkbox-group
                    v-model:value="detail.value"
                    v-if="
                      detail.answer &&
                      JSON.parse(detail.answer).answer &&
                      Number(detail.type) === 2
                    "
                  >
                    <n-space item-style="display: flex;">
                      <n-checkbox
                        v-for="answer in JSON.parse(detail.answer).answer"
                        :value="answer.val"
                        :label="answer.name"
                      />
                    </n-space>
      
                    <n-space
                      v-if="detail.hasDiy"
                      align="center"
                      style="margin-top: 15px; min-width: 450px"
                    >
                      <n-checkbox key="diy" value="diy"> 其他 </n-checkbox>
                      <n-input
                        style="min-width: 450px"
                        round
                        maxlength="100"
                        show-count
                        placeholder="请输入内容 最多100字"
                        v-model:value="detail[`custom-${detail['id']}`]"
                      />
                    </n-space>
                  </n-checkbox-group>
                </n-space>
              </template>
            </div>

            <div class="btn">
              <n-button
                class="submit"
                size="large"
                type="primary"
                @click="submit"
              >
                提交
              </n-button>
            </div>
          </div>
        </div>
      </div>
      <side-menu />
    </div>
  </div>
</template>

<script setup>
import { watchEffect, ref, onMounted, computed } from "vue";
import { useMessage } from "naive-ui";
import subHeader from "../components/subHeader";
import sideMenu from "../components/sideMenu";
import heroSubTitle from "../components/heroSubTitle";
import { useSurveyStore } from "../store/survey";
const surveyStore = useSurveyStore();
const title = ref("问卷调查");
const message = useMessage();
const details = computed(() => surveyStore.details);

const props = defineProps({
  id: {
    type: [String, Number],
    default: () => null,
    required: true,
  },
});
watchEffect(() => {
  document.title = title.value;
  if (props.id) {
    surveyStore.getDetail(props.id);
  }
});

const submit = async () => {
  const lastAnswers = details.value.map((detail) => {
    const mapper = {};
    mapper["otherDesc"] = detail.value;
    mapper["questionId"] = detail.id;
    mapper["questionnaireId"] = detail.questionnaireId;
    mapper["type"] = detail.type;
    return mapper;
  });
  console.log("lastAnswers", lastAnswers);

  try {
    await surveyStore.sendAnswer(lastAnswers);
  } catch (error) {
    message.warning("提交服务器失败!");
  }
};
</script>

<style lang="scss" scoped>
.detail {
  --main-show-case-background: #ddd5d5;
  --main-detail-margin: 30px;
  --main-detail-padding: 30px;
  margin: var(--main-detail-margin);
  margin-bottom: 0;
  flex: 1;
  border-radius: 13px;
  padding: 32px 48px 64px 48px;
  overflow-y: scroll;
  background-image: var(--main-detail-background-img);
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  display: inline-flex;

  .back {
    background-image: url("/img/back_arrow.png");
    width: 120px;
    height: 30px;
    background-repeat: no-repeat;
    background-size: contain;
    margin-bottom: 12px;
  }
  .info {
    max-width: 1069px;
    margin: 0 auto;
    font-size: 1.25rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    :deep(.n-radio) {
      --n-font-size: 1.125rem !important;
    }
    .title {
      font-size: 30px;
      line-height: 60px;
      margin: 19.2px 0;
    }
    .text {
      font-weight: 400;
      color: #6e6e6e;
      line-height: 34px;
      font-size: 20px;
    }
    .btn {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      :deep(.n-button) {
        font-size: 1.25rem;
        padding: 1.5625rem 3.125rem;
        border-radius: 1.1875rem;
      }
    }
  }
  .show-case {
    max-width: 1069px;
    height: 547px;
    background: var(--main-show-case-background);
  }
}
</style>