|
@@ -0,0 +1,117 @@
|
|
|
|
+"use strict";
|
|
|
|
+const common_vendor = require("../../common/vendor.js");
|
|
|
|
+const _sfc_main = {
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ questions: [
|
|
|
|
+ { id: 1, question: "问题1", options: [{ value: "A", label: "选项A" }, { value: "B", label: "选项B" }, { value: "c", label: "选项c" }, { value: "D", label: "选项D" }] },
|
|
|
|
+ { id: 2, question: "问题2", options: [{ value: "A", label: "选项A" }, { value: "B", label: "选项B" }, { value: "c", label: "选项c" }, { value: "D", label: "选项D" }] },
|
|
|
|
+ { id: 3, question: "问题3", options: [{ value: "A", label: "选项A" }, { value: "B", label: "选项B" }, { value: "c", label: "选项c" }, { value: "D", label: "选项D" }] },
|
|
|
|
+ { id: 4, question: "问题4", options: [{ value: "A", label: "选项A" }, { value: "B", label: "选项B" }, { value: "c", label: "选项c" }, { value: "D", label: "选项D" }] },
|
|
|
|
+ { id: 5, question: "问题5", options: [{ value: "A", label: "选项A" }, { value: "B", label: "选项B" }, { value: "c", label: "选项c" }, { value: "D", label: "选项D" }] },
|
|
|
|
+ { id: 6, question: "问题6", options: [{ value: "A", label: "选项A" }, { value: "B", label: "选项B" }, { value: "c", label: "选项c" }, { value: "D", label: "选项D" }] },
|
|
|
|
+ { id: 7, question: "问题7", options: [{ value: "A", label: "选项A" }, { value: "B", label: "选项B" }, { value: "c", label: "选项c" }, { value: "D", label: "选项D" }] },
|
|
|
|
+ { id: 8, question: "问题8", options: [{ value: "A", label: "选项A" }, { value: "B", label: "选项B" }, { value: "c", label: "选项c" }, { value: "D", label: "选项D" }] },
|
|
|
|
+ { id: 9, question: "问题9", options: [{ value: "A", label: "选项A" }, { value: "B", label: "选项B" }, { value: "c", label: "选项c" }, { value: "D", label: "选项D" }] },
|
|
|
|
+ { id: 10, question: "问题10", options: [{ value: "A", label: "选项A" }, { value: "B", label: "选项B" }, { value: "c", label: "选项c" }, { value: "D", label: "选项D" }] },
|
|
|
|
+ { id: 11, question: "问题11", options: [{ value: "A", label: "选项A" }, { value: "B", label: "选项B" }, { value: "c", label: "选项c" }, { value: "D", label: "选项D" }] },
|
|
|
|
+ { id: 12, question: "问题12", options: [{ value: "A", label: "选项A" }, { value: "B", label: "选项B" }, { value: "c", label: "选项c" }, { value: "D", label: "选项D" }] },
|
|
|
|
+ { id: 13, question: "问题13", options: [{ value: "A", label: "选项A" }, { value: "B", label: "选项B" }, { value: "c", label: "选项c" }, { value: "D", label: "选项D" }] },
|
|
|
|
+ { id: 14, question: "问题14", options: [{ value: "A", label: "选项A" }, { value: "B", label: "选项B" }, { value: "c", label: "选项c" }, { value: "D", label: "选项D" }] }
|
|
|
|
+ // 更多问题...
|
|
|
|
+ ],
|
|
|
|
+ selectedAnswers: [],
|
|
|
|
+ scrollTop: 0,
|
|
|
|
+ currentQuestionIndex: 0,
|
|
|
|
+ scrollHeight: 0,
|
|
|
|
+ scrollDelay: 500,
|
|
|
|
+ questionPositions: []
|
|
|
|
+ // 用于存储每个问题的位置
|
|
|
|
+ };
|
|
|
|
+ },
|
|
|
|
+ onLoad() {
|
|
|
|
+ const res = common_vendor.index.getSystemInfoSync();
|
|
|
|
+ this.scrollHeight = res.windowHeight;
|
|
|
|
+ setTimeout(() => {
|
|
|
|
+ this.calculateQuestionPositions();
|
|
|
|
+ }, 300);
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ selectAnswer(index, value) {
|
|
|
|
+ this.$set(this.selectedAnswers, index, value);
|
|
|
|
+ if (index < this.questions.length - 1) {
|
|
|
|
+ setTimeout(() => {
|
|
|
|
+ this.currentQuestionIndex = index + 1;
|
|
|
|
+ this.scrollToQuestion(this.currentQuestionIndex);
|
|
|
|
+ }, this.scrollDelay);
|
|
|
|
+ } else {
|
|
|
|
+ setTimeout(() => {
|
|
|
|
+ this.scrollToBottom();
|
|
|
|
+ }, this.scrollDelay);
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ goToNext(index) {
|
|
|
|
+ if (index < this.questions.length - 1) {
|
|
|
|
+ this.currentQuestionIndex = index + 1;
|
|
|
|
+ this.scrollToQuestion(this.currentQuestionIndex);
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ calculateQuestionPositions() {
|
|
|
|
+ common_vendor.index.createSelectorQuery().selectAll(".question-item").boundingClientRect((rects) => {
|
|
|
|
+ if (rects) {
|
|
|
|
+ let accumulatedHeight = 0;
|
|
|
|
+ this.questionPositions = rects.map((rect) => {
|
|
|
|
+ accumulatedHeight += rect.height;
|
|
|
|
+ return accumulatedHeight - rect.height;
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+ }).exec();
|
|
|
|
+ },
|
|
|
|
+ scrollToQuestion(index) {
|
|
|
|
+ if (this.questionPositions[index] !== void 0) {
|
|
|
|
+ this.scrollTop = this.questionPositions[index];
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ scrollToBottom() {
|
|
|
|
+ const lastIndex = this.questions.length - 1;
|
|
|
|
+ if (this.questionPositions[lastIndex] !== void 0) {
|
|
|
|
+ this.scrollTop = this.questionPositions[lastIndex] + 200;
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ submit() {
|
|
|
|
+ common_vendor.index.showToast({
|
|
|
|
+ title: "提交成功",
|
|
|
|
+ icon: "success"
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+};
|
|
|
|
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
|
+ return {
|
|
|
|
+ a: common_vendor.t($data.currentQuestionIndex + 1),
|
|
|
|
+ b: common_vendor.t($data.questions.length),
|
|
|
|
+ c: common_vendor.f($data.questions, (item, index, i0) => {
|
|
|
|
+ return common_vendor.e({
|
|
|
|
+ a: common_vendor.t(item.question),
|
|
|
|
+ b: common_vendor.f(item.options, (option, k1, i1) => {
|
|
|
|
+ return {
|
|
|
|
+ a: common_vendor.t(option.label),
|
|
|
|
+ b: option.value,
|
|
|
|
+ c: common_vendor.o(($event) => $options.selectAnswer(index, option.value), option.value),
|
|
|
|
+ d: $data.selectedAnswers[index] === option.value ? 1 : ""
|
|
|
|
+ };
|
|
|
|
+ }),
|
|
|
|
+ c: index === $data.questions.length - 1 && $data.selectedAnswers[index]
|
|
|
|
+ }, index === $data.questions.length - 1 && $data.selectedAnswers[index] ? {
|
|
|
|
+ d: common_vendor.o((...args) => $options.submit && $options.submit(...args), item.id)
|
|
|
|
+ } : {}, {
|
|
|
|
+ e: item.id,
|
|
|
|
+ f: "question-" + index
|
|
|
|
+ });
|
|
|
|
+ }),
|
|
|
|
+ d: $data.scrollTop,
|
|
|
|
+ e: $data.scrollHeight + "px"
|
|
|
|
+ };
|
|
|
|
+}
|
|
|
|
+const MiniProgramPage = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render]]);
|
|
|
|
+wx.createPage(MiniProgramPage);
|