ylst-h5/src/views/Design/components/ActionCompoents/QuestionAction.vue

<template>
  <div class="container question-action-container flex">
    <van-icon name="delete" @click="deleteQuestion"></van-icon>
    <van-icon name="more" @click="openQuestionActionModel"></van-icon>
  </div>

  <!--  操作项弹窗-->
  <van-action-sheet v-model:show="show">
    <template #description>
      <div class="flex flex-start">操作选项</div>
    </template>
    <van-cell-group :border="false" class="ml10">
      <van-cell title="此题必答" :border="false" label-align="left">
        <template #right-icon>
          <van-switch
            v-model="activeQuestion.config.is_required"
            class="option-action-sheet-switch"
            size="0.5rem"
            :active-value="1"
            :inactive-value="0"
          ></van-switch>
        </template>
      </van-cell>
      <van-cell title="选项随机" :border="false">
        <template #right-icon>
          <van-switch
            v-model="activeQuestion.config.select_random"
            class="option-action-sheet-switch"
            size="0.5rem"
            :active-value="1"
            :inactive-value="0"
          ></van-switch>
        </template>
      </van-cell>
      <van-divider></van-divider>
      <van-cell title="题前隐藏" :border="false">
        <template #right-icon>
          <span> {{ getSkipTypeText() }} <van-icon name="arrow"></van-icon></span>
        </template>
      </van-cell>
      <van-cell title="题后跳转" :border="false">
        <template #right-icon>
          <span> 设置 <van-icon name="arrow"></van-icon></span>
        </template>
      </van-cell>
      <van-divider></van-divider>
      <van-cell title="下移选项" :border="false" @click="questionMove('down')"></van-cell>
      <van-cell title="上移选项" :border="false" @click="questionMove('up')"></van-cell>
    </van-cell-group>
  </van-action-sheet>
</template>
<script setup>
import { showConfirmDialog } from 'vant';
import { ref } from 'vue';
import { useCounterStore } from '@/stores/counter';
import { storeToRefs } from 'pinia';

const store = useCounterStore();
const { questionsInfo } = storeToRefs(store);
const logics = questionsInfo.value.logics;

const props = defineProps({
  index: {
    type: Number,
    default: 0
  },
  data: {
    type: Object,
    default: () => {
      // 传递
    }
  },
  questions: {
    type: Array,
    default: () => []
  },
  questionIndex: {
    type: Number,
    default: 0
  }
});
const questions = ref(props.questions);
// 当前题目
const activeQuestion = ref(props.data);

const show = ref(false);
const deleteQuestion = () => {
  showConfirmDialog({
    title: '提示',
    message: '是否删除问题？'
  })
    .then(() => {
      // on confirm
      questions.value.splice(props.questionIndex, 1);
    })
    .catch(() => {
      // on cancel
    });
};

// 打开题目弹窗
const openQuestionActionModel = () => {
  show.value = true;
};
// 题目上下移动
const questionMove = (action) => {
  if (action === 'down') {
    if (props.questionIndex === questions.value.length - 1) {
      return;
    }
    const temp = questions.value[props.questionIndex];
    questions.value.splice(props.questionIndex, 1);
    questions.value.splice(props.questionIndex + 1, 0, temp);
  } else {
    if (props.questionIndex === 0) {
      return;
    }
    const temp = questions.value[props.questionIndex];
    questions.value.splice(props.questionIndex, 1);
    questions.value.splice(props.questionIndex - 1, 0, temp);
  }
};

// 获取题前隐藏  和题后 跳转 文字
const getSkipTypeText = () => {
  setTimeout(() => {
    logics[0].id = 123;
  }, 2000);
  return logics[0].id;
};
</script>
<style scoped lang="scss">
.ml10 {
  margin-left: 10px;
}

.question-action-container {
  font-size: 20px;

  & .van-icon + .van-icon {
    margin-left: 5px;
  }
}
</style>