|
|
@@ -0,0 +1,282 @@
|
|
|
+<template>
|
|
|
+ <view class="sv-wrap">
|
|
|
+ <view class="sv-header">
|
|
|
+ <text class="sv-title">专项调研</text>
|
|
|
+ <text class="sv-sub">回答以下问题,我们为你推荐最适合的方案</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="sv-loading" v-if="loading">加载中...</view>
|
|
|
+ <view class="sv-empty" v-else-if="!questions || questions.length === 0">暂无问卷题目</view>
|
|
|
+
|
|
|
+ <view class="sv-form" v-else>
|
|
|
+ <view class="sv-q" v-for="(q, qi) in questions" :key="'q' + qi">
|
|
|
+ <text class="sv-q-label">{{ qi + 1 }}. {{ q.text }}</text>
|
|
|
+ <view class="sv-options">
|
|
|
+ <view
|
|
|
+ class="sv-opt"
|
|
|
+ v-for="(o, oi) in q.options"
|
|
|
+ :key="'o' + qi + '_' + oi"
|
|
|
+ :class="{ 'sv-opt-active': isSelected(qi, oi) }"
|
|
|
+ @click="toggleOpt(qi, oi, q)">
|
|
|
+ <text class="sv-opt-text">{{ o.text }}</text>
|
|
|
+ <text class="sv-opt-check" v-if="isSelected(qi, oi)">✓</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="sv-btn" @click="submitSurvey">
|
|
|
+ <text class="sv-btn-text">提交调研</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { submitProblemSurvey } from '../../utils/api.js'
|
|
|
+
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ code: '',
|
|
|
+ templateId: '',
|
|
|
+ questions: [],
|
|
|
+ answers: [],
|
|
|
+ loading: false,
|
|
|
+ submitting: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(options) {
|
|
|
+ this.code = (options && options.code) || ''
|
|
|
+ this.templateId = (options && options.templateId) || ''
|
|
|
+ this.loadQuestions()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ isSelected(qi, oi) {
|
|
|
+ var ans = this.answers[qi]
|
|
|
+ return ans && ans.indexOf(oi) !== -1
|
|
|
+ },
|
|
|
+ toggleOpt(qi, oi, q) {
|
|
|
+ var isMulti = q.multi !== false
|
|
|
+ if (!this.answers[qi]) {
|
|
|
+ this.answers[qi] = []
|
|
|
+ }
|
|
|
+ var arr = this.answers[qi]
|
|
|
+ var idx = arr.indexOf(oi)
|
|
|
+ if (idx !== -1) {
|
|
|
+ arr.splice(idx, 1)
|
|
|
+ } else {
|
|
|
+ if (isMulti) {
|
|
|
+ arr.push(oi)
|
|
|
+ } else {
|
|
|
+ this.answers[qi] = [oi]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.$forceUpdate()
|
|
|
+ },
|
|
|
+ loadQuestions() {
|
|
|
+ var self = this
|
|
|
+ self.loading = true
|
|
|
+ uni.showLoading({ title: '加载中...', mask: true })
|
|
|
+ // 从模板ID加载问卷,或通过问题域获取模板
|
|
|
+ var api = require('../../utils/api.js')
|
|
|
+ // 尝试加载模板列表找到匹配的
|
|
|
+ var getSurveyTemplates = api.getSurveyTemplateList || api.getActiveTemplates
|
|
|
+ if (getSurveyTemplates && self.templateId) {
|
|
|
+ getSurveyTemplates().then(function(res) {
|
|
|
+ uni.hideLoading()
|
|
|
+ self.loading = false
|
|
|
+ var list = res && res.data
|
|
|
+ if (Array.isArray(list)) {
|
|
|
+ var found = null
|
|
|
+ for (var i = 0; i < list.length; i++) {
|
|
|
+ var item = list[i]
|
|
|
+ if (item.id == self.templateId || item.id === self.templateId) {
|
|
|
+ found = item
|
|
|
+ break
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (found && found.questionsJson) {
|
|
|
+ var parsed = typeof found.questionsJson === 'string' ? JSON.parse(found.questionsJson) : found.questionsJson
|
|
|
+ self.questions = Array.isArray(parsed) ? parsed : []
|
|
|
+ } else {
|
|
|
+ self.questions = self.getFallbackQuestions()
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ self.questions = self.getFallbackQuestions()
|
|
|
+ }
|
|
|
+ }).catch(function() {
|
|
|
+ uni.hideLoading()
|
|
|
+ self.loading = false
|
|
|
+ self.questions = self.getFallbackQuestions()
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ uni.hideLoading()
|
|
|
+ self.loading = false
|
|
|
+ self.questions = self.getFallbackQuestions()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getFallbackQuestions() {
|
|
|
+ return [
|
|
|
+ { text: '请简单描述你的情况', options: [{ text: '了解中' }, { text: '已有初步了解' }], multi: false },
|
|
|
+ { text: '你希望获得什么帮助?', options: [{ text: '了解方案' }, { text: '购买产品' }, { text: '咨询专家' }], multi: true }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ submitSurvey() {
|
|
|
+ var self = this
|
|
|
+ // 检查是否至少答了一题
|
|
|
+ var hasAnswer = false
|
|
|
+ for (var i = 0; i < this.answers.length; i++) {
|
|
|
+ if (this.answers[i] && this.answers[i].length > 0) {
|
|
|
+ hasAnswer = true
|
|
|
+ break
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (!hasAnswer) {
|
|
|
+ uni.showToast({ title: '请至少回答一题', icon: 'none' })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (self.submitting) return
|
|
|
+ self.submitting = true
|
|
|
+ uni.showLoading({ title: '提交中...', mask: true })
|
|
|
+
|
|
|
+ var answerList = []
|
|
|
+ for (var qi = 0; qi < this.questions.length; qi++) {
|
|
|
+ var q = this.questions[qi]
|
|
|
+ var selected = this.answers[qi] || []
|
|
|
+ if (selected.length > 0) {
|
|
|
+ var texts = []
|
|
|
+ for (var si = 0; si < selected.length; si++) {
|
|
|
+ var opt = q.options[selected[si]]
|
|
|
+ if (opt) {
|
|
|
+ texts.push(opt.text)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ answerList.push({
|
|
|
+ questionText: q.text,
|
|
|
+ optionTexts: texts
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ submitProblemSurvey({
|
|
|
+ problemDomainCode: self.code,
|
|
|
+ templateId: self.templateId || undefined,
|
|
|
+ answers: answerList
|
|
|
+ }).then(function(res) {
|
|
|
+ uni.hideLoading()
|
|
|
+ self.submitting = false
|
|
|
+ uni.showToast({ title: '提交成功', icon: 'success' })
|
|
|
+ setTimeout(function() {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/problem/package-match?code=' + self.code
|
|
|
+ })
|
|
|
+ }, 500)
|
|
|
+ }).catch(function() {
|
|
|
+ uni.hideLoading()
|
|
|
+ self.submitting = false
|
|
|
+ uni.showToast({ title: '提交失败,请重试', icon: 'none' })
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.sv-wrap {
|
|
|
+ min-height: 100vh;
|
|
|
+ background: #FFF7ED;
|
|
|
+ padding: 40rpx 32rpx 120rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+
|
|
|
+.sv-header {
|
|
|
+ margin-bottom: 32rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.sv-title {
|
|
|
+ display: block;
|
|
|
+ font-size: 38rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.sv-sub {
|
|
|
+ display: block;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #999;
|
|
|
+ text-align: center;
|
|
|
+ margin-top: 10rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.sv-loading, .sv-empty {
|
|
|
+ text-align: center;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #999;
|
|
|
+ padding: 80rpx 0;
|
|
|
+}
|
|
|
+
|
|
|
+.sv-q {
|
|
|
+ margin-bottom: 36rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.sv-q-label {
|
|
|
+ display: block;
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #333;
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.sv-options {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 16rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.sv-opt {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ background: #fff;
|
|
|
+ border: 2rpx solid #E5E7EB;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ padding: 18rpx 24rpx;
|
|
|
+ margin-right: 16rpx;
|
|
|
+ margin-bottom: 12rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.sv-opt-active {
|
|
|
+ border-color: #F97316;
|
|
|
+ background: #FFF7ED;
|
|
|
+}
|
|
|
+
|
|
|
+.sv-opt-text {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #333;
|
|
|
+}
|
|
|
+
|
|
|
+.sv-opt-check {
|
|
|
+ color: #F97316;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-left: 8rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.sv-btn {
|
|
|
+ background: linear-gradient(135deg, #F97316, #FB923C);
|
|
|
+ border-radius: 48rpx;
|
|
|
+ padding: 26rpx 0;
|
|
|
+ text-align: center;
|
|
|
+ margin-top: 32rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.sv-btn:active {
|
|
|
+ opacity: 0.9;
|
|
|
+}
|
|
|
+
|
|
|
+.sv-btn-text {
|
|
|
+ color: #fff;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: 600;
|
|
|
+}
|
|
|
+</style>
|