feat: 添加文章列表和问卷列表页面，更新相关路径
This commit is contained in:
parent
af3b59f8e2
commit
13afe782ee
12
pages.json
12
pages.json
@ -7,6 +7,18 @@
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/article/article-list",
|
||||
"style": {
|
||||
"navigationBarTitleText": "我的宣教"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/survey/survey-list",
|
||||
"style": {
|
||||
"navigationBarTitleText": "我的问卷"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/message/message",
|
||||
"style": {
|
||||
|
||||
@ -1,55 +1,209 @@
|
||||
<template>
|
||||
<full-page :customScroll="articles.length === 0" @reachBottom="loadMore()">
|
||||
<view v-if="articles.length === 0" class="flex items-center justify-center h-full">
|
||||
<empty-data />
|
||||
<view class="bg-gray-100 min-h-screen">
|
||||
<!-- Filter Tabs -->
|
||||
<scroll-view scroll-x class="bg-white whitespace-nowrap px-15 py-10 sticky top-0 z-10 w-full" :show-scrollbar="false">
|
||||
<view
|
||||
v-for="(tab, index) in tabs"
|
||||
:key="index"
|
||||
class="inline-block px-15 py-5 mr-10 text-sm rounded-full border transition-colors"
|
||||
:class="[
|
||||
activeTab === tab.value
|
||||
? 'bg-orange-100 text-orange-500 border-orange-500'
|
||||
: 'bg-white text-gray-600 border-gray-200'
|
||||
]"
|
||||
@click="activeTab = tab.value"
|
||||
>
|
||||
{{ tab.name }}
|
||||
</view>
|
||||
<view v-else class="p-15">
|
||||
<view v-for="article in articles" :key="article._id" class="flex px-15 mb-10 py-12 shadow-lg bg-white rounded">
|
||||
<image class="flex-shrink-0 mr-10 cover" :src="article.cover || '/static/book.svg'" />
|
||||
<view class="w-0 flex-grow">
|
||||
<view class="text-base leading-normal font-semibold truncate mb-5">
|
||||
{{ article.title }}
|
||||
</scroll-view>
|
||||
|
||||
<!-- Article List -->
|
||||
<view class="p-15">
|
||||
<view
|
||||
v-for="item in filteredArticles"
|
||||
:key="item._id"
|
||||
class="bg-white rounded-lg p-15 mb-15 shadow-sm"
|
||||
@click="goToDetail(item)"
|
||||
>
|
||||
<!-- Header -->
|
||||
<view class="flex items-start justify-between mb-10">
|
||||
<view class="flex items-start flex-1 mr-10 relative">
|
||||
<!-- Tag -->
|
||||
<view class="text-xs text-green-600 border border-green-600 px-5 rounded mr-5 flex-shrink-0 mt-1 tag-box">
|
||||
{{ item.type }}
|
||||
</view>
|
||||
<view v-if="article.summary" class="text-base text-gray line-clamp-2">
|
||||
{{ article.summary }}
|
||||
<!-- Title -->
|
||||
<view class="text-base font-bold text-gray-800 leading-normal line-clamp-2">
|
||||
{{ item.title }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Status -->
|
||||
<view class="flex items-center flex-shrink-0 ml-2">
|
||||
<text
|
||||
class="text-sm mr-2"
|
||||
:class="item.status === 'UNREAD' ? 'text-red-500' : 'text-gray-400'"
|
||||
>
|
||||
{{ item.status === 'UNREAD' ? '未阅读' : '查看' }}
|
||||
</text>
|
||||
<uni-icons type="right" size="14" :color="item.status === 'UNREAD' ? '#ef4444' : '#9ca3af'"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Content -->
|
||||
<!-- Person -->
|
||||
<view class="text-sm text-gray-600 mb-5 flex items-center">
|
||||
<text class="text-gray-400 mr-2">人员:</text>
|
||||
<text>{{ item.person }}</text>
|
||||
</view>
|
||||
<!-- Team -->
|
||||
<view class="text-sm text-gray-600 mb-10 pb-10 border-b border-gray-100 flex items-center">
|
||||
<text class="text-gray-400 mr-2">团队:</text>
|
||||
<text>{{ item.team }}</text>
|
||||
</view>
|
||||
|
||||
<!-- Footer -->
|
||||
<view class="text-sm text-gray-400">
|
||||
发送时间: {{ item.time }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</full-page>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
import api from '@/utils/api';
|
||||
import { ref, computed } from 'vue';
|
||||
|
||||
import FullPage from '@/components/full-page.vue';
|
||||
import EmptyData from '@/components/empty-data.vue';
|
||||
// Mock Data
|
||||
const tabs = [
|
||||
{ name: '全部', value: 'ALL' },
|
||||
{ name: '李珊珊 女 37岁', value: '1' },
|
||||
{ name: '罗小小 女 17岁', value: '2' },
|
||||
];
|
||||
|
||||
const corpId = ref('');
|
||||
const ids = ref('');
|
||||
const articles = ref([]);
|
||||
const activeTab = ref('ALL');
|
||||
|
||||
onLoad((options) => {
|
||||
corpId.value = options.corpId;
|
||||
ids.value = options.ids;
|
||||
if (ids.value) {
|
||||
getArticles()
|
||||
const articles = ref([
|
||||
{
|
||||
_id: 1,
|
||||
type: '宣教文章',
|
||||
title: '妊糖管理期注意事项！',
|
||||
status: 'UNREAD',
|
||||
person: '李珊珊 女 36岁',
|
||||
team: '妊糖管理服务团队',
|
||||
time: '2026-01-09 15:23',
|
||||
ownerId: '1'
|
||||
},
|
||||
{
|
||||
_id: 2,
|
||||
type: '宣教文章',
|
||||
title: '妊糖管理期注意事项！妊糖管理期注意事项！妊糖管理期注意事项......',
|
||||
status: 'READ',
|
||||
person: '李珊珊 女 36岁',
|
||||
team: '妊糖管理服务团队',
|
||||
time: '2026-01-09 15:23',
|
||||
ownerId: '1'
|
||||
},
|
||||
{
|
||||
_id: 3,
|
||||
type: '宣教文章',
|
||||
title: '妊糖管理期注意事项！',
|
||||
status: 'READ',
|
||||
person: '罗小小 女 16岁',
|
||||
team: '妊糖管理服务团队',
|
||||
time: '2026-01-09 15:23',
|
||||
ownerId: '2'
|
||||
}
|
||||
]);
|
||||
|
||||
const filteredArticles = computed(() => {
|
||||
if (activeTab.value === 'ALL') return articles.value;
|
||||
return articles.value.filter(item => item.ownerId === activeTab.value);
|
||||
});
|
||||
|
||||
async function getArticles() {
|
||||
const res = await api('getArticleByIds', { corpId: corpId.value, ids: ids.value });
|
||||
articles.value = res && Array.isArray(res.list) ? res.list : [];
|
||||
}
|
||||
|
||||
function loadMore() {
|
||||
console.log('addArchive')
|
||||
function goToDetail(item) {
|
||||
console.log('Navigate to detail', item);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.cover {
|
||||
width: 128rpx;
|
||||
height: 128rpx;
|
||||
/* Utility helpers similar to Windi/Tailwind */
|
||||
.min-h-screen { min-height: 100vh; }
|
||||
.bg-gray-100 { background-color: #f7f8fa; }
|
||||
.bg-white { background-color: #ffffff; }
|
||||
|
||||
.p-15 { padding: 30rpx; }
|
||||
.px-15 { padding-left: 30rpx; padding-right: 30rpx; }
|
||||
.py-10 { padding-top: 20rpx; padding-bottom: 20rpx; }
|
||||
.py-5 { padding-top: 10rpx; padding-bottom: 10rpx; }
|
||||
.px-5 { padding-left: 10rpx; padding-right: 10rpx; }
|
||||
|
||||
.mr-10 { margin-right: 20rpx; }
|
||||
.mr-5 { margin-right: 10rpx; }
|
||||
.ml-2 { margin-left: 10rpx; }
|
||||
.mr-2 { margin-right: 10rpx; }
|
||||
.mb-15 { margin-bottom: 30rpx; }
|
||||
.mb-10 { margin-bottom: 20rpx; }
|
||||
.mb-5 { margin-bottom: 10rpx; }
|
||||
.mt-1 { margin-top: 6rpx; }
|
||||
.pb-10 { padding-bottom: 20rpx; }
|
||||
|
||||
.flex { display: flex; }
|
||||
.items-start { align-items: flex-start; }
|
||||
.items-center { align-items: center; }
|
||||
.justify-between { justify-content: space-between; }
|
||||
.flex-1 { flex: 1; }
|
||||
.flex-shrink-0 { flex-shrink: 0; }
|
||||
.relative { position: relative; }
|
||||
|
||||
.border { border-width: 1px; border-style: solid; }
|
||||
.border-b { border-bottom-width: 1px; border-bottom-style: solid; }
|
||||
.rounded-full { border-radius: 9999px; }
|
||||
.rounded { border-radius: 8rpx; }
|
||||
.rounded-lg { border-radius: 12rpx; }
|
||||
|
||||
.shadow-sm { box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
|
||||
|
||||
.text-xs { font-size: 22rpx; }
|
||||
.text-sm { font-size: 28rpx; }
|
||||
.text-base { font-size: 32rpx; }
|
||||
.font-bold { font-weight: 600; }
|
||||
.leading-normal { line-height: 1.4; }
|
||||
|
||||
/* Colors - Adjusting to match image roughly */
|
||||
.text-orange-500 { color: #f29e38; }
|
||||
.bg-orange-100 { background-color: #fff8eb; }
|
||||
.border-orange-500 { border-color: #f29e38; }
|
||||
|
||||
.text-gray-600 { color: #333333; }
|
||||
.text-gray-500 { color: #999999; }
|
||||
.text-gray-400 { color: #999999; }
|
||||
.text-gray-800 { color: #1a1a1a; }
|
||||
.border-gray-200 { border-color: #e5e5e5; }
|
||||
.border-gray-100 { border-color: #f5f5f5; }
|
||||
|
||||
.text-green-600 { color: #4b8d5f; }
|
||||
.border-green-600 { border-color: #4b8d5f; }
|
||||
.text-red-500 { color: #e04a4a; }
|
||||
|
||||
.sticky { position: sticky; }
|
||||
.top-0 { top: 0; }
|
||||
.z-10 { z-index: 10; }
|
||||
.w-full { width: 100%; }
|
||||
.whitespace-nowrap { white-space: nowrap; }
|
||||
.inline-block { display: inline-block; }
|
||||
|
||||
.tag-box {
|
||||
border-radius: 4rpx;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.line-clamp-2 {
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
line-clamp: 2;
|
||||
word-break: break-all;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -74,7 +74,7 @@ const consultItems = ref([
|
||||
label: "我的问卷",
|
||||
icon: "/static/homepage/survey-icon.png",
|
||||
bgColor: "#58D68D",
|
||||
path: "/pages/health/list",
|
||||
path: "/pages/survey/survey-list",
|
||||
},
|
||||
{
|
||||
id: "rating",
|
||||
|
||||
210
pages/survey/survey-list.vue
Normal file
210
pages/survey/survey-list.vue
Normal file
@ -0,0 +1,210 @@
|
||||
<template>
|
||||
<view class="bg-gray-100 min-h-screen">
|
||||
<!-- Filter Tabs -->
|
||||
<scroll-view scroll-x class="bg-white whitespace-nowrap px-15 py-10 sticky top-0 z-10 w-full" :show-scrollbar="false">
|
||||
<view
|
||||
v-for="(tab, index) in tabs"
|
||||
:key="index"
|
||||
class="inline-block px-15 py-5 mr-10 text-sm rounded-full border transition-colors"
|
||||
:class="[
|
||||
activeTab === tab.value
|
||||
? 'bg-orange-100 text-orange-500 border-orange-500'
|
||||
: 'bg-white text-gray-600 border-gray-200'
|
||||
]"
|
||||
@click="activeTab = tab.value"
|
||||
>
|
||||
{{ tab.name }}
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- Survey List -->
|
||||
<view class="p-15">
|
||||
<view
|
||||
v-for="item in filteredSurveys"
|
||||
:key="item._id"
|
||||
class="bg-white rounded-lg p-15 mb-15 shadow-sm"
|
||||
@click="goToDetail(item)"
|
||||
>
|
||||
<!-- Header -->
|
||||
<view class="flex items-start justify-between mb-10">
|
||||
<view class="flex items-start flex-1 mr-10 relative">
|
||||
<!-- Tag -->
|
||||
<view class="text-xs text-green-600 border border-green-600 px-5 rounded mr-5 flex-shrink-0 mt-1 tag-box">
|
||||
{{ item.type }}
|
||||
</view>
|
||||
<!-- Title -->
|
||||
<view class="text-base font-bold text-gray-800 leading-normal line-clamp-2">
|
||||
{{ item.title }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Status -->
|
||||
<view class="flex items-center flex-shrink-0 ml-2">
|
||||
<text
|
||||
class="text-sm mr-2"
|
||||
:class="item.status === 'UNFILLED' ? 'text-red-500' : 'text-gray-400'"
|
||||
>
|
||||
{{ item.status === 'UNFILLED' ? '未填写' : '查看' }}
|
||||
</text>
|
||||
<uni-icons type="right" size="14" :color="item.status === 'UNFILLED' ? '#ef4444' : '#9ca3af'"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Content -->
|
||||
<!-- Person -->
|
||||
<view class="text-sm text-gray-600 mb-5 flex items-center">
|
||||
<text class="text-gray-400 mr-2">人员:</text>
|
||||
<text>{{ item.person }}</text>
|
||||
</view>
|
||||
<!-- Team -->
|
||||
<view class="text-sm text-gray-600 mb-10 pb-10 border-b border-gray-100 flex items-center">
|
||||
<text class="text-gray-400 mr-2">团队:</text>
|
||||
<text>{{ item.team }}</text>
|
||||
</view>
|
||||
|
||||
<!-- Footer -->
|
||||
<view class="text-sm text-gray-400">
|
||||
发送时间: {{ item.time }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue';
|
||||
|
||||
// Mock Data
|
||||
const tabs = [
|
||||
{ name: '全部', value: 'ALL' },
|
||||
{ name: '李珊珊 女 37岁', value: '1' },
|
||||
{ name: '罗小小 女 17岁', value: '2' },
|
||||
];
|
||||
|
||||
const activeTab = ref('ALL');
|
||||
|
||||
const surveys = ref([
|
||||
{
|
||||
_id: 1,
|
||||
type: '问卷调查',
|
||||
title: '门诊满意度调查问卷',
|
||||
status: 'UNFILLED',
|
||||
person: '李珊珊 女 36岁',
|
||||
team: '妊糖管理服务团队',
|
||||
time: '2026-01-09 15:23',
|
||||
ownerId: '1'
|
||||
},
|
||||
{
|
||||
_id: 2,
|
||||
type: '问卷调查',
|
||||
title: 'xxxx术后1周随访调查问卷',
|
||||
status: 'FILLED',
|
||||
person: '李珊珊 女 36岁',
|
||||
team: '妊糖管理服务团队',
|
||||
time: '2026-01-09 15:23',
|
||||
ownerId: '1'
|
||||
},
|
||||
{
|
||||
_id: 3,
|
||||
type: '问卷调查',
|
||||
title: 'xxxxx术后2周随访调查问卷',
|
||||
status: 'FILLED',
|
||||
person: '罗小小 女 16岁',
|
||||
team: '妊糖管理服务团队',
|
||||
time: '2026-01-09 15:23',
|
||||
ownerId: '2'
|
||||
}
|
||||
]);
|
||||
|
||||
const filteredSurveys = computed(() => {
|
||||
if (activeTab.value === 'ALL') return surveys.value;
|
||||
return surveys.value.filter(item => item.ownerId === activeTab.value);
|
||||
});
|
||||
|
||||
function goToDetail(item) {
|
||||
console.log('Navigate to detail', item);
|
||||
// Add actual navigation logic here later
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Utility helpers similar to Windi/Tailwind */
|
||||
.min-h-screen { min-height: 100vh; }
|
||||
.bg-gray-100 { background-color: #f7f8fa; }
|
||||
.bg-white { background-color: #ffffff; }
|
||||
|
||||
.p-15 { padding: 30rpx; }
|
||||
.px-15 { padding-left: 30rpx; padding-right: 30rpx; }
|
||||
.py-10 { padding-top: 20rpx; padding-bottom: 20rpx; }
|
||||
.py-5 { padding-top: 10rpx; padding-bottom: 10rpx; }
|
||||
.px-5 { padding-left: 10rpx; padding-right: 10rpx; }
|
||||
|
||||
.mr-10 { margin-right: 20rpx; }
|
||||
.mr-5 { margin-right: 10rpx; }
|
||||
.ml-2 { margin-left: 10rpx; }
|
||||
.mr-2 { margin-right: 10rpx; }
|
||||
.mb-15 { margin-bottom: 30rpx; }
|
||||
.mb-10 { margin-bottom: 20rpx; }
|
||||
.mb-5 { margin-bottom: 10rpx; }
|
||||
.mt-1 { margin-top: 6rpx; }
|
||||
.pb-10 { padding-bottom: 20rpx; }
|
||||
|
||||
.flex { display: flex; }
|
||||
.items-start { align-items: flex-start; }
|
||||
.items-center { align-items: center; }
|
||||
.justify-between { justify-content: space-between; }
|
||||
.flex-1 { flex: 1; }
|
||||
.flex-shrink-0 { flex-shrink: 0; }
|
||||
.relative { position: relative; }
|
||||
|
||||
.border { border-width: 1px; border-style: solid; }
|
||||
.border-b { border-bottom-width: 1px; border-bottom-style: solid; }
|
||||
.rounded-full { border-radius: 9999px; }
|
||||
.rounded { border-radius: 8rpx; }
|
||||
.rounded-lg { border-radius: 12rpx; }
|
||||
|
||||
.shadow-sm { box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
|
||||
|
||||
.text-xs { font-size: 22rpx; }
|
||||
.text-sm { font-size: 28rpx; }
|
||||
.text-base { font-size: 32rpx; }
|
||||
.font-bold { font-weight: 600; }
|
||||
.leading-normal { line-height: 1.4; }
|
||||
|
||||
/* Colors - Adjusting to match image roughly */
|
||||
.text-orange-500 { color: #f29e38; }
|
||||
.bg-orange-100 { background-color: #fff8eb; }
|
||||
.border-orange-500 { border-color: #f29e38; }
|
||||
|
||||
.text-gray-600 { color: #333333; }
|
||||
.text-gray-500 { color: #999999; }
|
||||
.text-gray-400 { color: #999999; }
|
||||
.text-gray-800 { color: #1a1a1a; }
|
||||
.border-gray-200 { border-color: #e5e5e5; }
|
||||
.border-gray-100 { border-color: #f5f5f5; }
|
||||
|
||||
.text-green-600 { color: #4b8d5f; }
|
||||
.border-green-600 { border-color: #4b8d5f; }
|
||||
.text-red-500 { color: #e04a4a; }
|
||||
|
||||
.sticky { position: sticky; }
|
||||
.top-0 { top: 0; }
|
||||
.z-10 { z-index: 10; }
|
||||
.w-full { width: 100%; }
|
||||
.whitespace-nowrap { white-space: nowrap; }
|
||||
.inline-block { display: inline-block; }
|
||||
|
||||
.tag-box {
|
||||
border-radius: 4rpx;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.line-clamp-2 {
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
line-clamp: 2;
|
||||
word-break: break-all;
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user