对接问卷调查、投诉建议接口
This commit is contained in:
zhouyanli
@@ -1,239 +1,221 @@
|
||||
<template>
|
||||
<view class="contentStyle" style="">
|
||||
<view class="contentStyle">
|
||||
<view class="status-bar"></view>
|
||||
<uni-nav-bar title="问卷调查" backgroundColor="transparent" :border="false" left-icon="left" @clickLeft="goBack">
|
||||
</uni-nav-bar>
|
||||
|
||||
|
||||
<!-- 表单区域 -->
|
||||
<scroll-view class="page" scroll-y="true">
|
||||
<!-- 问卷标题 -->
|
||||
<view class="survey-title">关于用户体验反馈的调查</view>
|
||||
<view class="survey-title">{{ detailItem.title || '' }}</view>
|
||||
<view class="survey-desc">{{ detailItem.description || '' }}</view>
|
||||
|
||||
<!-- 问卷说明 -->
|
||||
<view class="survey-desc">
|
||||
为了给您提供更好的服务，希望您能抽出几分钟时间，将进的感受和建议告诉我们，我们非常重视每位用户的宝贵意见，期待您的参与！
|
||||
<view v-if="questionList.length === 0" class="empty-tip">
|
||||
<text>暂无问卷内容</text>
|
||||
</view>
|
||||
|
||||
<!-- 问题1：社区大门数量 -->
|
||||
<view class="question-item">
|
||||
<view v-for="(q, idx) in questionList" :key="q.cid" class="question-item">
|
||||
<view class="question-title">
|
||||
<text class="required">*</text>1.您社区的大门数量
|
||||
<text v-if="q.required" class="required">*</text>
|
||||
<text>{{ idx + 1 }}.{{ q.title || '未命名问题' }}</text>
|
||||
</view>
|
||||
<view class="answer-text">1</view>
|
||||
</view>
|
||||
|
||||
<!-- 问题2：消防演练符合项 -->
|
||||
<view class="question-item">
|
||||
<view class="question-title">
|
||||
<text class="required">*</text>2.您所在的社区，关于消防演练，下列符合几项
|
||||
</view>
|
||||
<view class="answer-text">一周2~3次</view>
|
||||
</view>
|
||||
|
||||
<!-- 问题3：健康医疗服务 -->
|
||||
<view class="question-item">
|
||||
<view class="question-title">
|
||||
<text class="required">*</text>3.您所在的社区是否有健康医疗服务
|
||||
</view>
|
||||
<view class="answer-text">是</view>
|
||||
</view>
|
||||
|
||||
<!-- 问题4：综合评分（星级） -->
|
||||
<view class="question-item">
|
||||
<view class="question-title">
|
||||
<text class="required">*</text>4.您对所在社区的综合评分
|
||||
</view>
|
||||
<view class="star-container">
|
||||
<view v-for="(item, index) in 5" :key="index" class="star-item" :class="{ active: index < score }">
|
||||
<text class="star-icon">★</text>
|
||||
<!-- radio / checkbox: 展示选项及选中状态 -->
|
||||
<view v-if="q.type === 'radio' || q.type === 'checkbox'" class="option-list">
|
||||
<view
|
||||
v-for="(opt, oIdx) in q.options"
|
||||
:key="oIdx"
|
||||
class="option-item"
|
||||
:class="{ active: isOptionSelected(q, opt.label) }"
|
||||
>
|
||||
<text class="option-icon">{{ q.type === 'radio' ? '●' : '■' }}</text>
|
||||
<text class="option-label">{{ opt.label }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 问题5：建议 -->
|
||||
<view class="question-item">
|
||||
<view class="question-title">
|
||||
<text class="required">*</text>5.您还有哪些建议
|
||||
<!-- input / textarea: 展示文本答案 -->
|
||||
<view v-if="q.type === 'input' || q.type === 'textarea'" class="answer-text">
|
||||
{{ getAnswerText(q.cid) || '未填写' }}
|
||||
</view>
|
||||
<view class="answer-text">没有其他建议</view>
|
||||
<!-- 如需可编辑输入框，替换为下方textarea -->
|
||||
<!-- <textarea class="suggest-input" placeholder="请输入您的建议" v-model="suggestion" /> -->
|
||||
</view>
|
||||
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
onReady: function(e) {},
|
||||
components: {
|
||||
|
||||
},
|
||||
|
||||
computed: {
|
||||
|
||||
|
||||
|
||||
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
onShow() {
|
||||
|
||||
},
|
||||
|
||||
mounted() {},
|
||||
|
||||
onReady() {
|
||||
this.$nextTick(() => {
|
||||
|
||||
})
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
/* 设定状态栏默认高度 */
|
||||
statusBarHeight: 20,
|
||||
score: 3, // 默认3星，对应原图
|
||||
suggestion: ''
|
||||
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
methods: {
|
||||
|
||||
goBack() {
|
||||
uni.redirectTo({
|
||||
url: '/pageSubPack/service-list/questionnaireSurveyIndex',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
},
|
||||
|
||||
},
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import { getQuestionnaireDetail } from '../api/apiSub.js'
|
||||
|
||||
const currentId = ref('')
|
||||
const detailItem = ref({})
|
||||
|
||||
const questionList = computed(() => {
|
||||
const content = detailItem.value?.content
|
||||
if (!content) return []
|
||||
try {
|
||||
const list = JSON.parse(content)
|
||||
return Array.isArray(list) ? list : []
|
||||
} catch (e) {
|
||||
return []
|
||||
}
|
||||
})
|
||||
|
||||
const answerMap = computed(() => {
|
||||
const answerContent = detailItem.value?.answerContent
|
||||
if (!answerContent) return {}
|
||||
try {
|
||||
const list = JSON.parse(answerContent)
|
||||
if (!Array.isArray(list)) return {}
|
||||
const map = {}
|
||||
for (const item of list) {
|
||||
map[item.cid] = item.value
|
||||
}
|
||||
return map
|
||||
} catch (e) {
|
||||
return {}
|
||||
}
|
||||
})
|
||||
|
||||
const getDetailData = async () => {
|
||||
try {
|
||||
const params = { questionnairedId: currentId.value }
|
||||
const res = await getQuestionnaireDetail(params)
|
||||
if (res.code === 200) {
|
||||
const data = Array.isArray(res.data) ? res.data[0] : res.data
|
||||
detailItem.value = data || {}
|
||||
} else {
|
||||
detailItem.value = {}
|
||||
uni.showToast({ title: res.msg || '获取失败', icon: 'none' })
|
||||
}
|
||||
} catch (err) {
|
||||
uni.showToast({ title: err.msg || '网络异常', icon: 'none' })
|
||||
}
|
||||
}
|
||||
|
||||
onLoad((option) => {
|
||||
if (option.id) {
|
||||
currentId.value = option.id
|
||||
getDetailData()
|
||||
}
|
||||
})
|
||||
|
||||
function isOptionSelected(question, label) {
|
||||
const val = answerMap.value[question.cid]
|
||||
if (val === undefined || val === null) return false
|
||||
if (Array.isArray(val)) {
|
||||
return val.includes(label)
|
||||
}
|
||||
return val === label
|
||||
}
|
||||
|
||||
function getAnswerText(cid) {
|
||||
return answerMap.value[cid]
|
||||
}
|
||||
|
||||
function goBack() {
|
||||
uni.navigateBack()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #fff;
|
||||
}
|
||||
page {
|
||||
background: #fff;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.contentStyle {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
/* 关键：占满屏幕高度 */
|
||||
/* background: linear-gradient(to left bottom, #e2efff 0%, #f9f9f9 50%); */
|
||||
}
|
||||
.contentStyle {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.page {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0px 40rpx;
|
||||
box-sizing: border-box;
|
||||
/* background-color: #fff; */
|
||||
}
|
||||
.page {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0px 40rpx;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 48rpx;
|
||||
}
|
||||
|
||||
/* 滚动内容区 */
|
||||
.content-scroll {
|
||||
flex: 1;
|
||||
padding: 0 30rpx;
|
||||
}
|
||||
.survey-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
margin: 0px 0 20rpx 0;
|
||||
}
|
||||
|
||||
/* 标题与描述 */
|
||||
.survey-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
margin: 0px 0 20rpx 0;
|
||||
;
|
||||
}
|
||||
.survey-desc {
|
||||
font-size: 24rpx;
|
||||
color: #4A4A4A;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 20rpx;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.survey-desc {
|
||||
font-size: 24rpx;
|
||||
color: #4A4A4A;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 20rpx;
|
||||
text-align: justify;
|
||||
}
|
||||
.empty-tip {
|
||||
text-align: center;
|
||||
padding: 100rpx 0;
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.question-item {
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
.question-item {
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.question-title {
|
||||
font-size: 32rpx;
|
||||
color: #000;
|
||||
margin-bottom: 10rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
.question-title {
|
||||
font-size: 32rpx;
|
||||
color: #000;
|
||||
margin-bottom: 10rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.required {
|
||||
color: #ff0000;
|
||||
font-size: 34rpx;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
.required {
|
||||
color: #ff0000;
|
||||
font-size: 34rpx;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
.answer-text {
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
line-height: 1.5;
|
||||
padding-left: 30rpx;
|
||||
}
|
||||
.answer-text {
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
line-height: 1.5;
|
||||
padding-left: 30rpx;
|
||||
}
|
||||
|
||||
/* 星级评分样式 */
|
||||
.star-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20rpx;
|
||||
padding-left: 30rpx;
|
||||
}
|
||||
.option-list {
|
||||
padding-left: 30rpx;
|
||||
}
|
||||
|
||||
.star-item {
|
||||
font-size: 48rpx;
|
||||
color: #dcdcdc;
|
||||
cursor: pointer;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
.option-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
padding: 16rpx 0;
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.star-item.active {
|
||||
color: #409eff;
|
||||
/* 蓝色，和原图一致 */
|
||||
}
|
||||
.option-item.active {
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.star-icon {
|
||||
font-family: monospace;
|
||||
}
|
||||
.option-icon {
|
||||
font-size: 24rpx;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
/* 建议输入框样式（如需可编辑） */
|
||||
.suggest-input {
|
||||
width: 100%;
|
||||
min-height: 200rpx;
|
||||
padding: 20rpx;
|
||||
border: 1rpx solid #e5e5e5;
|
||||
border-radius: 8rpx;
|
||||
background: #fff;
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.option-item.active .option-icon {
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
width: 100vw;
|
||||
height: 46px;
|
||||
}
|
||||
</style>
|
||||
.option-label {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
width: 100vw;
|
||||
height: 46px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user