分包
This commit is contained in:
wangyuxin
@@ -0,0 +1,379 @@
|
||||
<template>
|
||||
<view class="contentStyle" style="">
|
||||
<view class="status-bar"></view>
|
||||
<uni-nav-bar title="问卷调查" backgroundColor="transparent" :border="false" left-icon="left" @clickLeft="goBack">
|
||||
</uni-nav-bar>
|
||||
|
||||
|
||||
<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>
|
||||
</view>
|
||||
<!-- 表单区域 -->
|
||||
<scroll-view class="page" scroll-y="true">
|
||||
<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>
|
||||
</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 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>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-status"
|
||||
:class="{joined: currentTab === 0 &&item.status === '已参与',unjoined: item.status === '未参与'||currentTab === 1, }">
|
||||
{{ item.status }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 占位 -->
|
||||
<view style="width: 100%;height:2rpx;"> </view>
|
||||
|
||||
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
onReady: function(e) {},
|
||||
components: {
|
||||
|
||||
},
|
||||
|
||||
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: () => {}
|
||||
});
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #f2f1f6;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.contentStyle {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
/* 关键：占满屏幕高度 */
|
||||
background: linear-gradient(to left bottom, #e2efff 0%, #f9f9f9 50%);
|
||||
}
|
||||
|
||||
.page {
|
||||
flex: 1;
|
||||
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;
|
||||
}
|
||||
|
||||
.list-item {
|
||||
padding: 30rpx;
|
||||
margin-bottom: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border:2rpx solid #E6E6E6;
|
||||
background-color: #fff;
|
||||
|
||||
&.disabled {
|
||||
opacity: 0.6;
|
||||
|
||||
.item-title,
|
||||
.item-info {}
|
||||
}
|
||||
|
||||
&.selected {
|
||||
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;
|
||||
line-height: 44rpx;
|
||||
margin-bottom:10rpx;
|
||||
/* 超长文本省略 */
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.item-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20rpx;
|
||||
|
||||
.info-time,
|
||||
.info-community {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
line-height: 32rpx;
|
||||
/* 超长文本省略 */
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.item-status {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
padding: 0px 0px;
|
||||
border-radius:8rpx;
|
||||
|
||||
&.joined {
|
||||
color: #2F77FD;
|
||||
}
|
||||
|
||||
&.unjoined {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
width: 100vw;
|
||||
height: 46px;
|
||||
}
|
||||
/* 空状态 */
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 100rpx 0;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 32rpx;
|
||||
color: #999;
|
||||
margin-top: 20rpx;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user