zhouyanli/property-resident-side
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

对接问卷调查、投诉建议接口

Browse Source
This commit is contained in:
zhouyanli
2026-05-11 17:29:57 +08:00
parent 10505e8000
commit 78c69cdb10
20 changed files with 1143 additions and 1531 deletions
Download Patch File Download Diff File Expand all files Collapse all files

371
property-uniapp-project/pageSubPack/service-list/questionnaireSurveyIndex.vue
View File

@@ -1,240 +1,152 @@
<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>
<uni-nav-bar title="问卷调查" backgroundColor="transparent" :border="false" left-icon="left" @click-left="goBack" />
<view style="width: 40vw;">
<uni-segmented-control :current="currentTab" :values="tabs" @clickItem="switchTab" style-type="text"
active-color="#007AFF" inactive-color="#999" class="seg-control"></uni-segmented-control>
<uni-segmented-control :current="currentTab" :values="tabs" @click-item="switchTab" style-type="text"
active-color="#007AFF" inactive-color="#999" class="seg-control" />
</view>
<!-- 表单区域 -->
<scroll-view class="page" scroll-y="true">
<scroll-view class="page" scroll-y>
<view class="list-container">
<view v-if="currentList.length === 0" class="empty-state">
<uni-icons type="info" size="60" color="#ccc"></uni-icons>
<text class="empty-text">
{{ '暂无数据'}}
</text>
<text class="empty-text">暂无数据</text>
</view>
<view v-for="(item, index) in currentList" :key="index" class="list-item" :class="{
disabled: currentTab === 1,
selected: currentTab === 0 && item.status === '已参与'
}" @click="handleItemClick(item)">
<!-- 列表项：点击高亮 -->
<view
v-for="(item, index) in currentList"
:key="index"
class="list-item"
:class="{
disabled: currentTab === 1,
selected: selectedIndex === index // 点击才高亮
}"
@click="handleItemClick(item, index)"
>
<view class="item-content">
<view class="item-title">{{ item.title }}</view>
<view class="item-info">
<text class="info-time">{{ item.time }}</text>
<text class="info-community">{{ item.community }}</text>
<text class="info-time">{{ item.createTime }}</text>
<text class="info-community">{{ item.villageName }}</text>
</view>
</view>
<view class="item-status"
:class="{joined: currentTab === 0 &&item.status === '已参与',unjoined: item.status === '未参与'||currentTab === 1, }">
{{ item.status }}
<view
class="item-status"
:class="{
joined: item.answerStatus === '1',
unjoined: item.answerStatus === '0'
}"
>
{{ item.statusName}}
</view>
</view>
</view>
<!-- 占位 -->
<view style="width: 100%;height:2rpx;"> </view>
<view style="width: 100%;height:2rpx;"></view>
</scroll-view>
</view>
</template>
<script>
export default {
onReady: function(e) {},
components: {
<script setup>
import { ref, computed, onMounted } from 'vue'
import {getQuestionnaireList} from '../api/apiSub.js'
},
// 状态栏高度
const statusBarHeight = ref(20)
// 当前选中tab
const currentTab = ref(0)
// tab标题
const tabs = ["收集中", "已结束"]
computed: {
// 计算当前显示的列表
currentList() {
return this.currentTab === 0 ? this.collectingList : this.endedList;
},
},
created() {
},
onShow() {
},
mounted() {
this.getDataList()
},
onReady() {
this.$nextTick(() => {
})
},
data() {
return {
/* 设定状态栏默认高度 */
statusBarHeight: 20,
currentTab: 0, // 0=收集中，1=已结束
tabs: ["收集中", "已结束"],
// 收集中列表数据
collectingList: [{
title: '问卷调查名称问卷调查名称问卷调查...',
time: '2026-09-01 11:00:56',
community: '阳光海岸社区',
status: '已参与',
},
{
title: '问卷调查名称问卷调查名称问卷调查...',
time: '2026-09-01 11:00:56',
community: '阳光海岸社区',
status: '未参与',
},
{
title: '问卷调查名称问卷调查名称问卷调查...',
time: '2026-09-01 11:00:56',
community: '阳光海岸社区',
status: '未参与',
},
{
title: '问卷调查名称问卷调查名称问卷调查...',
time: '2026-09-01 11:00:56',
community: '阳光海岸社区',
status: '未参与',
}, {
title: '问卷调查名称问卷调查名称问卷调查...',
time: '2026-09-01 11:00:56',
community: '阳光海岸社区',
status: '未参与',
},
{
title: '问卷调查名称问卷调查名称问卷调查...',
time: '2026-09-01 11:00:56',
community: '阳光海岸社区',
status: '未参与',
},
{
title: '问卷调查名称问卷调查名称问卷调查...',
time: '2026-09-01 11:00:56',
community: '阳光海岸社区',
status: '未参与',
}, {
title: '问卷调查名称问卷调查名称问卷调查...',
time: '2026-09-01 11:00:56',
community: '阳光海岸社区',
status: '未参与',
},
{
title: '问卷调查名称问卷调查名称问卷调查...',
time: '2026-09-01 11:00:56',
community: '阳光海岸社区',
status: '未参与',
},
{
title: '问卷调查名称问卷调查名称问卷调查...',
time: '2026-09-01 11:00:56',
community: '阳光海岸社区',
status: '未参与',
},
],
// 已结束列表数据
endedList: [{
title: '问卷调查名称问卷调查名称问卷调查...',
time: '2023-09-01 11:00:56',
community: '阳光海岸社区',
status: '已参与',
},
{
title: '问卷调查名称问卷调查名称调查...',
time: '2023-09-01 11:00:56',
community: '阳光海岸社区',
status: '未参与',
},
{
title: '问卷调查名称问卷调查名称调查...',
time: '2023-09-01 11:00:56',
community: '阳光海岸社区',
status: '未参与',
},
],
}
},
methods: {
// Tab切换
switchTab(e) {
this.currentTab = e.currentIndex;
this.getDataList()
},
// 列表项点击
handleItemClick(item) {
if (item.status == '已参与') {
this.turnToDetail(item)
} else {
if (this.currentTab === 0) {
this.turnToFillout(item)
} else if (this.currentTab === 1) {
// 未参与的已结束问卷
}
}
},
turnToFillout(item) {
// 跳转到问卷填写
uni.redirectTo({
url: `/pageSubPack/service-list/questionnaireFillout`,
success: res => {},
fail: () => {},
complete: () => {}
});
},
turnToDetail(item) {
// 跳转到问卷详情
uni.redirectTo({
url: `/pageSubPack/service-list/questionnaireDetail`,
success: res => {},
fail: () => {},
complete: () => {}
});
},
getDataList() {
if (this.currentTab == 0) {
this.dataList = this.collectingList
} else if (this.currentTab == 1) {
this.dataList = this.endedList
}
},
onTabClick(e) {
this.currentTab = e.currentIndex;
this.getDataList()
},
goBack() {
uni.switchTab({
url: '/pages/serviceIndex/serviceIndex',
success: res => {},
fail: () => {},
complete: () => {}
});
},
},
// 收集中列表
const collectingList = ref([])
// 已结束列表
const endedList = ref([])
// 点击选中的索引（控制高亮）
const selectedIndex = ref(-1)
// 计算属性：当前显示列表
const currentList = computed(() => {
return currentTab.value === 0 ? collectingList.value : endedList.value
})
// Tab切换
const switchTab = (e) => {
currentTab.value = e.currentIndex
selectedIndex.value = -1 // 切换tab清空选中
getDataList()
}
// 获取列表数据
const getDataList = async () => {
try{
let params ={
status: currentTab.value === 0 ? 1 : 2
}
const res = await getQuestionnaireList(params)
if(res.code === 200){
const list = (res.data || []).map(item => {
return {
...item,
statusName: item.answerStatus == "0" ? '未参与' : '已参与'
}
})
if(currentTab.value === 0){
collectingList.value = list
}else{
endedList.value = list
}
}else{
uni.showToast({ title: res.msg || '获取失败', icon: 'none' })
}
}catch(err){
uni.showToast({ title: err.msg ||'网络异常', icon: 'none' })
}
}
// 列表项点击（index 控制高亮）
const handleItemClick = (item, index) => {
selectedIndex.value = index //点击哪个，哪个高亮
if (item.answerStatus === '1') {
turnToDetail(item)
} else {
// if (currentTab.value === 0) {
turnToFillout(item)
// }
}
}
// 跳转到填写问卷
const turnToFillout = (item) => {
uni.navigateTo({
url: `/pageSubPack/service-list/questionnaireFillout?id=${item.id}`
})
}
// 跳转到详情
const turnToDetail = (item) => {
uni.navigateTo({
url: `/pageSubPack/service-list/questionnaireDetail?id=${item.id}`
})
}
// 返回
const goBack = () => {
uni.switchTab({
url: '/pages/serviceIndex/serviceIndex'
})
}
// 生命周期：页面挂载完成
onMounted(() => {
getDataList()
})
</script>
<style lang="scss">
page {
background: #f2f1f6;
@@ -246,7 +158,6 @@
display: flex;
flex-direction: column;
height: 100vh;
/* 关键：占满屏幕高度 */
background: linear-gradient(to left bottom, #e2efff 0%, #f9f9f9 50%);
}
@@ -255,30 +166,12 @@
overflow-y: auto;
padding: 0px 40rpx;
box-sizing: border-box;
/* background-color: #fff; */
}
.page-container {
padding: 40rpx;
}
/* --- 分段控制器样式 --- */
.seg-control {
margin-bottom: 20rpx;
}
.cardScroll {
padding: 0rpx 0rpx 0px 0rpx;
overflow-y: scroll;
}
/* 列表区域 */
.list-scroll {
flex: 1;
}
.list-container {
padding-top: 20rpx;
}
@@ -289,35 +182,29 @@
display: flex;
align-items: center;
justify-content: space-between;
border:2rpx solid #E6E6E6;
border: 2rpx solid #E6E6E6;
background-color: #fff;
&.disabled {
opacity: 0.6;
.item-title,
.item-info {}
}
&.selected {
border:2rpx solid #2F77FD;
border: 2rpx solid #2F77FD;
background-color: #F5FAFF;
}
}
.item-content {
// flex: 1;
width: calc(100% - 100rpx);
// margin-right: 20rpx;
}
.item-title {
font-size: 32rpx;
font-weight: 600;
color: #222222;
color: #222;
line-height: 44rpx;
margin-bottom:10rpx;
/* 超长文本省略 */
margin-bottom: 10rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@@ -334,7 +221,6 @@
font-size: 28rpx;
color: #666;
line-height: 32rpx;
/* 超长文本省略 */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@@ -344,8 +230,7 @@
.item-status {
font-size: 28rpx;
font-weight: 500;
padding: 0px 0px;
border-radius:8rpx;
border-radius: 8rpx;
&.joined {
color: #2F77FD;
@@ -360,7 +245,7 @@
width: 100vw;
height: 46px;
}
/* 空状态 */
.empty-state {
display: flex;
flex-direction: column;
@@ -369,7 +254,7 @@
padding: 100rpx 0;
color: #ccc;
}
.empty-text {
font-size: 32rpx;
color: #999;