Browse Source

💊 优化采集页列表样式与显示

快乐的梦鱼 1 month ago
parent
commit
a43663232c

+ 5 - 0
src/components/feedback/Touchable.ts

@@ -17,6 +17,11 @@ export interface TouchableFlexProps extends FlexProps {
    */
   activeOpacity?: number,
   /**
+   * 禁用时的透明度
+   * @default 0.65
+   */
+  disabledOpacity?: number,
+  /**
    * 是否设置鼠标指针为指针
    * @default true
    */

+ 3 - 0
src/components/feedback/Touchable.vue

@@ -31,6 +31,7 @@ import { TouchableClickEventInceptorKey, type TouchableFlexProps } from './Touch
 
 const props = withDefaults(defineProps<TouchableFlexProps>(), {
   activeOpacity: 0.7,
+  disabledOpacity: 0.65,
   touchable: true,
   setCursor: true,
 });
@@ -45,6 +46,8 @@ const finalStyle = computed(() => {
       obj.backgroundColor = themeContext.resolveThemeColor(props.pressedColor);
   } else if (props.activeOpacity != undefined) 
     obj.opacity = isPressed.value ? props.activeOpacity : 1;
+  if (props.disabledOpacity != undefined && !props.touchable)
+    obj.opacity = props.disabledOpacity;
   const o : Record<string, any> = {
     ...commonStyle.value,
     ...obj,

+ 8 - 4
src/pages.json

@@ -239,7 +239,8 @@
           "path": "details",
           "style": {
             "navigationBarTitleText": "村社文化资源挖掘平台-详情",
-            "enablePullDownRefresh": false
+            "enablePullDownRefresh": false,
+            "navigationStyle": "custom"
           }
         },
         {
@@ -274,21 +275,24 @@
           "path": "forms/task",
           "style": {
             "navigationBarTitleText": "村社文化资源挖掘平台",
-            "enablePullDownRefresh": false
+            "enablePullDownRefresh": false,
+            "navigationStyle": "custom"
           }
         },
         {
           "path": "forms/common",
           "style": {
             "navigationBarTitleText": "村社文化资源挖掘平台-提交信息",
-            "enablePullDownRefresh": false
+            "enablePullDownRefresh": false,
+            "navigationStyle": "custom"
           }
         },
         {
           "path": "forms/list",
           "style": {
             "navigationBarTitleText": "信息列表",
-            "enablePullDownRefresh": true
+            "enablePullDownRefresh": true,
+            "navigationStyle": "custom"
           }
         },
         {

+ 1 - 2
src/pages/dig/components/CollectModuleList.vue

@@ -38,12 +38,11 @@ import { waitTimeOut } from '@imengyu/imengyu-utils';
 
 const { goForm, goPreviewForm } = useTaskEntryForm();
 const authStore = useAuthStore();
-const { canCollect, canCollectCatalog } = useCollectStore();
+const { canCollectCatalog } = useCollectStore();
 
 const props = withDefaults(defineProps<{
   villageId: number,
   villageVolunteerId: number,
-  taskName: string,
   taskTitle: string,
   taskPid: number,
   isView?: boolean,

+ 82 - 72
src/pages/dig/details.vue

@@ -1,79 +1,87 @@
 <template>
-  <FlexCol v-if="isJoined" :padding="30" :gap="20">
-    <Image
-      src="https://mn.wenlvti.net/app_static/xiangan/banner_dig_1.jpg" 
-      mode="widthFix"
-      radius="radius.md"
-      :width="690" 
-    />
-    <FlexRow align="center" :gap="10" backgroundColor="white" :padding="20" radius="radius.md">
-      <FlexRow flexBasis="50%">
-        <Text :fontSize="30" text="已点亮:" />
-        <Width :width="20" />
-        <Text :fontSize="30" color="primary" :text="decodeURIComponent(querys.name)" />
-      </FlexRow>
-      <FlexRow flexBasis="50%" align="center">
-        <Text :fontSize="30" color="text.content" :text="`文化积分: `" />
-        <Text :fontSize="40" fontFamily="Rockwell" color="primary" :text="querys.points" />
-        <Width :width="20" />
-        <Text :fontSize="40" fontFamily="Rockwell" color="primary" :text="`Lv.${querys.level}`" />
-      </FlexRow>
-    </FlexRow>
-    <Touchable 
-      direction="column" 
-      touchable 
-      radius="radius.md"
-      :padding="30"
-      align="center"
-      backgroundColor="background.primary"
-      @click="goCollect"
-    >
-      <Icon icon="edit-filling" color="primary" :size="100" />
-      <Height :height="20" />
-      <Text :fontSize="34">写随手记</Text>
-      <Text :fontSize="22" color="gray">写随手记,记录下村社文化发现和思考,自动分类</Text>
-      <Text :fontSize="22" color="gray">也可点击下方进入指定的分类采集信息</Text>
-    </Touchable>
-    <FlexCol :gap="20">
-      <Alert
-        v-if="!authStore.isAdmin && isEmpty"
-        type="warning"
-        message="您当前没有可完成的任务"
-        description="请联系管理员认领可采编栏目"
-      />
-      <CollectModuleList
-        :villageId="querys.villageId"
-        :villageVolunteerId="querys.villageVolunteerId"
-        :taskName="''"
-        :taskTitle="''"
-        :taskPid="0"
+  <CommonTopBanner title="共编村史">
+    <FlexCol v-if="isJoined" :padding="30" :gap="20">
+      <Image
+        src="https://mn.wenlvti.net/app_static/xiangan/banner_dig_1.jpg" 
+        mode="widthFix"
+        radius="radius.md"
+        :width="690" 
       />
-    </FlexCol>
-    <XBarSpace />
-  </FlexCol>
-  <FlexCol v-else padding="padding.md">
-    <FlexCol 
-      center 
-      gap="gap.lg" 
-      border="primary" 
-      backgroundColor="background.tertiary"
-      radius="radius.md" 
-      padding="padding.md"
-    > 
-      <Image 
-        src="https://xy.wenlvti.net/app_static/images/village/PlaceholderVolunteer.png" 
-        mode="widthFix" 
-        :width="200" 
-        :height="200" 
-      />
-      <Text>您还不是当前村社的志愿者</Text>
-      <Text>欢迎注册,加入志愿者队伍,点亮村落</Text>
-      <FlexRow gap="gap.md">
-        <Button type="primary" @click="goJoin">去点亮村落</Button>
-        <Button @click="back()">返回</Button>
+      <FlexRow align="center" :gap="10" backgroundColor="white" :padding="20" radius="radius.md">
+        <FlexRow flexBasis="50%">
+          <Text :fontSize="30" text="已点亮:" />
+          <Width :width="20" />
+          <Text :fontSize="30" color="primary" :text="decodeURIComponent(querys.name)" />
+        </FlexRow>
+        <FlexRow flexBasis="50%" align="center">
+          <Text :fontSize="30" color="text.content" :text="`文化积分: `" />
+          <Text :fontSize="40" fontFamily="SongtiSCBlack" color="primary" :text="querys.points" />
+          <Width :width="20" />
+          <Text :fontSize="40" fontFamily="SongtiSCBlack" color="primary" :text="`Lv.${querys.level}`" />
+        </FlexRow>
       </FlexRow>
+      <BackgroundBox
+        backgroundImage="https://xy.wenlvti.net/app_static/images/village/BoxMid.png"
+        :backgroundCutBorder="32"
+        :backgroundCutBorderSize="36"
+        :padding="24"
+      >
+        <Touchable 
+          direction="column" 
+          touchable 
+          flex="1"
+          padding="padding.md"
+          align="center"
+          @click="goCollect"
+        >
+          <Icon icon="edit-filling" color="primary" :size="100" />
+          <Height :height="20" />
+          <Text :fontSize="34">写随手记</Text>
+          <Text :fontSize="22" color="gray">写随手记,记录下村社文化发现和思考,自动分类</Text>
+          <Text :fontSize="22" color="gray">也可点击下方进入指定的分类采集信息</Text>
+        </Touchable>
+      </BackgroundBox>
+      <FlexCol :gap="20">
+        <Alert
+          v-if="!authStore.isAdmin && isEmpty"
+          type="warning"
+          message="您当前没有可完成的任务"
+          description="请联系管理员认领可采编栏目"
+        />
+        <CollectModuleList
+          :villageId="querys.villageId"
+          :villageVolunteerId="querys.villageVolunteerId"
+          :taskName="''"
+          :taskTitle="''"
+          :taskPid="0"
+        />
+      </FlexCol>
+      <XBarSpace />
+    </FlexCol>
+    <FlexCol v-else padding="padding.md">
+      <FlexCol 
+        center 
+        gap="gap.lg" 
+        border="primary" 
+        backgroundColor="background.tertiary"
+        radius="radius.md" 
+        padding="padding.md"
+      > 
+        <Image 
+          src="https://xy.wenlvti.net/app_static/images/village/PlaceholderVolunteer.png" 
+          mode="widthFix" 
+          :width="200" 
+          :height="200" 
+        />
+        <Text>您还不是当前村社的志愿者</Text>
+        <Text>欢迎注册,加入志愿者队伍,点亮村落</Text>
+        <FlexRow gap="gap.md">
+          <Button type="primary" @click="goJoin">去点亮村落</Button>
+          <Button @click="back()">返回</Button>
+        </FlexRow>
+      </FlexCol>
     </FlexCol>
-  </FlexCol>
+  </CommonTopBanner>
 </template>
 
 <script setup lang="ts">
@@ -98,6 +106,8 @@ import Alert from '@/components/feedback/Alert.vue';
 import Result from '@/components/feedback/Result.vue';
 import Button from '@/components/basic/Button.vue';
 import { CollectableModulesIdMap } from './forms/forms';
+import BackgroundBox from '@/components/display/block/BackgroundBox.vue';
+import CommonTopBanner from '@/common/components/CommonTopBanner.vue';
 
 const { querys } = useLoadQuerys({ 
   name: '',

+ 42 - 17
src/pages/dig/forms/common.vue

@@ -1,6 +1,6 @@
 <template>
-  <FlexCol :padding="30">
-    <CommonRoot>
+  <CommonTopBanner :title="subTitle">
+    <FlexCol padding="space.md">
       <LoadingPage v-if="loading" /> 
       <FlexCol>
         <Alert
@@ -9,22 +9,44 @@
           message="您的修改已经暂存,可以放心离开,下次接着编辑"
         />
         <Height :height="20" />
-        <DynamicForm
-          ref="formRef"
-          :options="formDefine"
-          :model="formModel"
-          :globalParams="querys"
-        />
+        <BackgroundBox
+          backgroundImage="https://xy.wenlvti.net/app_static/images/village/BoxMid.png"
+          :backgroundCutBorder="32"
+          :backgroundCutBorderSize="36"
+          :padding="24"
+        >
+          <ProvideVar :vars="{
+            FieldBackgroundColor: 'transparent',
+          }">
+            <DynamicForm
+              ref="formRef"
+              :options="formDefine"
+              :model="formModel"
+              :globalParams="querys"
+            />
+          </ProvideVar>
+        </BackgroundBox>
         <Height :height="20" />
         <Button v-if="querys.isView" type="primary" :loading="loading" @click="backPrev(false)">返回</Button>
-        <FlexCol v-else :gap="10">
-          <Button type="primary" :loading="loading" @click="debounceSubmit.executeWithDelay()">提交</Button>
-          <Button type="danger" :loading="loading" @click="deleteInfo">删除</Button>
+        <FlexCol v-else :gap="10" center>
+          <Height :height="20" />
+          <BackgroundImageButton 
+            backgroundImage="https://xy.wenlvti.net/app_static/images/village/ButtonPrimary.png"
+            :backgroundCutBorder="20"
+            :backgroundCutBorderSize="20"
+            :padding="24"
+            width="560rpx"
+            center
+            type="primary" :loading="loading" @click="debounceSubmit.executeWithDelay()"
+          >
+            提交
+          </BackgroundImageButton>
+          <Button v-if="querys.id" type="text" textColor="danger" :loading="loading" @click="deleteInfo">删除</Button>
         </FlexCol>
       </FlexCol>
       <XBarSpace />
-    </CommonRoot>
-  </FlexCol>
+    </FlexCol>
+  </CommonTopBanner>
 </template>
 
 <script setup lang="ts">
@@ -35,7 +57,7 @@ import { showError } from '@/common/composeabe/ErrorDisplay';
 import { backAndCallOnPageBack } from '@/components/utils/PageAction';
 import { toast } from '@/components/utils/DialogAction';
 import { alert, confirm } from '@/components/dialog/CommonRoot';
-import { Debounce, ObjectUtils, RequestApiError, waitTimeOut } from '@imengyu/imengyu-utils';
+import { Debounce, RequestApiError, waitTimeOut } from '@imengyu/imengyu-utils';
 import VillageInfoApi, { CommonInfoModel } from '@/api/inhert/VillageInfoApi';
 import DynamicForm from '@/components/dynamic/DynamicForm.vue';
 import LoadingPage from '@/components/display/loading/LoadingPage.vue';
@@ -44,10 +66,13 @@ import CommonRoot from '@/components/dialog/CommonRoot.vue';
 import FlexCol from '@/components/layout/FlexCol.vue';
 import Height from '@/components/layout/space/Height.vue';
 import XBarSpace from '@/components/layout/space/XBarSpace.vue';
-import type { IDynamicFormOptions, IDynamicFormRef } from '@/components/dynamic';
 import Alert from '@/components/feedback/Alert.vue';
-import type { UploaderInstance } from '@/components/form/Uploader.vue';
+import type { IDynamicFormOptions, IDynamicFormRef } from '@/components/dynamic';
 import type { UploaderFieldInstance } from '@/components/form/UploaderField.vue';
+import CommonTopBanner from '@/common/components/CommonTopBanner.vue';
+import ProvideVar from '@/components/theme/ProvideVar.vue';
+import BackgroundBox from '@/components/display/block/BackgroundBox.vue';
+import BackgroundImageButton from '@/components/basic/BackgroundImageButton.vue';
 
 const loading = ref(false);
 const subTitle = ref('');
@@ -81,7 +106,7 @@ const { querys } = useLoadQuerys({
   loading.value = true;
   if (querys.subTitle) {
     subTitle.value = querys.subTitle;
-    uni.setNavigationBarTitle({  title: subTitle.value + '详情', })
+    uni.setNavigationBarTitle({  title: subTitle.value, })
   }
   if (!formRef.value)
     return;

+ 8 - 4
src/pages/dig/forms/list-ordinary.vue

@@ -180,7 +180,7 @@ const listLoader = useSimplePageListLoader<{
       params.subKey ? params.subId : undefined,
       params.subKey,
       params.villageId,
-      authStore.isAdmin && params.villageVolunteerId ? undefined : params.villageVolunteerId,
+      undefined,
       currentCatalog.value?.id || 0,
       page,
       pageSize,
@@ -226,6 +226,8 @@ function newData() {
     catalogId: currentCatalog.value?.id || 0,
     collectModuleId: currentLoadData.value.collectModuleId,  
     subId: currentLoadData.value.subId,  
+    subTitle: currentLoadData.value.subTitle,
+    subKey: currentLoadData.value.subKey,
   });
 }
 function goDetail(item: { id: number, villageVolunteerId: number }) {
@@ -307,8 +309,7 @@ function handleCatalogChange(e: any) {
 function loadListCatalog(catalog: VillageCatalogListItem) {
   if (currentCatalog.value?.id === catalog.id) 
     return;
-  currentCatalog.value = catalog;
-  
+  currentCatalog.value = catalog;  
   try {
     const formDefine = getVillageInfoForm(querys.value.collectModuleId, -1);
     const goForm = [ 
@@ -329,12 +330,15 @@ function loadListCatalog(catalog: VillageCatalogListItem) {
       villageId: querys.value.villageId,
       villageVolunteerId: volunteerInfo.value?.id || 0,
     }
+
+    console.log('currentLoadData', currentLoadData.value);
+    
   } catch (e) {
     console.error(e);
     error.value = '任务不存在';
     return;
   }
-  listLoader.load(false, currentLoadData.value)
+  listLoader.load(true, currentLoadData.value)
 }
 
 const { querys } = useLoadQuerys({ 

+ 88 - 97
src/pages/dig/forms/list.vue

@@ -1,59 +1,75 @@
 <template>
-  <FlexCol padding="space.md" gap="space.md">
-    <Result v-if="error" 
-      :title="error"
-    />
-    <template v-else>
-      <FlexRow justify="space-between">
-        <SearchBar
-          v-model="searchText"
-          placeholder="搜一搜" 
-          :innerStyle="{ width: querys.isView ? '600rpx' : '460rpx' }"
-          @search="search"
-        />
-        <Button v-if="!querys.isView" type="primary" @click="newData">+ 编写</Button>
-      </FlexRow>
-      <Height :height="20" />
-      <SimplePageListLoader :loader="listLoader" :noEmpty="true">
-        <FlexCol :gap="20">
-          <Touchable 
-            v-for="item in listLoader.list.value"
-            :key="item.id" 
-            :gap="20"
-            :padding="[15,20]"
-            radius="radius.md"
-            align="center"
-            backgroundColor="white"
-            direction="row"
-            touchable
-            @click="goDetail(item)"
+  <CommonTopBanner :title="subTitle">
+    <FlexCol padding="space.md" gap="space.md">
+      <Result v-if="error" 
+        :title="error"
+      />
+      <template v-else>
+        <FlexRow justify="space-between" align="center" gap="space.sm">
+          <SearchBar
+            v-model="searchText"
+            placeholder="搜一搜" 
+            :innerStyle="{ width: querys.isView ? '600rpx' : '460rpx' }"
+            @search="search"
+          />
+          <BackgroundImageButton 
+            v-if="!querys.isView"
+            backgroundImage="https://xy.wenlvti.net/app_static/images/village/ButtonPrimary.png"
+            :backgroundCutBorder="20"
+            :backgroundCutBorderSize="20"
+            :padding="[16, 40]"
+            @click="newData"
           >
-            <Image 
-              :src="item.image"
-              :showFailed="false"
-              :width="100"
-              :height="100"
-              radius="radius.sm"
-              mode="aspectFill"
-              round
-            />
-            <FlexCol>
-              <H4 :size="36">{{ item.title }}</H4>
-              <Text :size="23">{{ item.desc }}</Text>
-            </FlexCol>
-          </Touchable>
-        </FlexCol>
-        <template #empty>
-          <Empty v-if="querys.isView" image="search" description="暂无数据,等待志愿者编写中..." />
-          <Empty v-else image="search" description="这里还没有数据,快来编写完善吧!">
-            <Height :height="40" />
-            <Button type="primary" :text="`+ 新增${subTitle}数据`" @click="newData" />
-          </Empty>
-        </template>
-      </SimplePageListLoader>
-    </template>
-    <XBarSpace />
-  </FlexCol>
+            <Text text="+ 编写" />
+          </BackgroundImageButton>
+        </FlexRow>
+        <Height :height="5" />
+        <SimplePageListLoader :loader="listLoader" :noEmpty="true">
+          <FlexCol :gap="20">
+            <BackgroundBox 
+              v-for="item in listLoader.list.value"
+              :key="item.id" 
+              direction="row"
+              backgroundImage="https://xy.wenlvti.net/app_static/images/village/BoxMid.png"
+              :backgroundCutBorder="30"
+              :backgroundCutBorderSize="30"
+              :padding="[16, 30]"
+              align="center"
+            >
+              <Touchable 
+                :gap="20"
+                :padding="[15,20]"
+                touchable
+                flex="1"
+                @click="goDetail(item)"
+              >
+                <Image 
+                  :src="item.image"
+                  :showFailed="false"
+                  :width="100"
+                  :height="100"
+                  radius="radius.sm"
+                  mode="aspectFill"
+                />
+                <FlexCol>
+                  <H4 :size="36">{{ item.title }}</H4>
+                  <Text :size="23">{{ item.desc }}</Text>
+                </FlexCol>
+              </Touchable>
+            </BackgroundBox>
+          </FlexCol>
+          <template #empty>
+            <Empty v-if="querys.isView" image="search" description="暂无数据,等待志愿者编写中..." />
+            <Empty v-else image="search" description="这里还没有数据,快来编写完善吧!">
+              <Height :height="40" />
+              <Button type="primary" :text="`+ 新增${subTitle}数据`" @click="newData" />
+            </Empty>
+          </template>
+        </SimplePageListLoader>
+      </template>
+      <XBarSpace />
+    </FlexCol>
+  </CommonTopBanner>
 </template>
 
 <script setup lang="ts">
@@ -83,6 +99,9 @@ import XBarSpace from '@/components/layout/space/XBarSpace.vue';
 import Result from '@/components/feedback/Result.vue';
 import { CollectableModulesIdMap, getVillageInfoForm } from './forms';
 import VillageApi from '@/api/inhert/VillageApi';
+import CommonTopBanner from '@/common/components/CommonTopBanner.vue';
+import BackgroundBox from '@/components/display/block/BackgroundBox.vue';
+import BackgroundImageButton from '@/components/basic/BackgroundImageButton.vue';
 
 const subTitle = ref('');
 const searchText = ref('');
@@ -115,7 +134,7 @@ const listLoader = useSimplePageListLoader<{
     params.subKey ? params.subId : undefined,
     params.subKey,
     params.villageId,
-    querys.value.isView && authStore.isAdmin && params.villageVolunteerId ? undefined : params.villageVolunteerId,
+    undefined,
     querys.value.catalogId,
     page,
     pageSize,
@@ -166,27 +185,19 @@ function newData() {
   });
 }
 function goDetail(item: { id: number, villageVolunteerId: number }) {
-  if (!authStore.isAdmin 
-    && (!isJoined.value || item.villageVolunteerId !== volunteerInfo.value?.id)
-  ) {
+  navTo('common', { 
+    id: item.id,
+    villageId: querys.value.villageId,
+    villageVolunteerId: querys.value.villageVolunteerId,
+    catalogId: querys.value.catalogId,
+    collectModuleId: querys.value.collectModuleId,
+    subKey: querys.value.subKey,
+    subId: querys.value.subId,
+    subTitle: querys.value.subTitle,
     //非当前村社志愿者或者不是自己提交的文章,只能查看详情
-    navTo('/pages/home/discover/details', {
-      villageId: querys.value.villageId,
-      id: item.id,
-    });
-  } else {
-    navTo('common', { 
-      id: item.id,
-      villageId: querys.value.villageId,
-      villageVolunteerId: querys.value.villageVolunteerId,
-      catalogId: querys.value.catalogId,
-      collectModuleId: querys.value.collectModuleId,
-      subKey: querys.value.subKey,
-      subId: querys.value.subId,
-      subTitle: querys.value.subTitle,
-      isView: querys.value.isView,
-    });
-  }
+    isView: querys.value.isView ? true : (!authStore.isAdmin 
+      && (!isJoined.value || item.villageVolunteerId !== volunteerInfo.value?.id) ? true : false),
+  });
 }
 function search() {
   listLoader.reload();
@@ -213,30 +224,10 @@ const { querys } = useLoadQuerys({
     //普通用户进入预览模式
     await getIsVolunteer();
 
-    const catalogList = (await VillageApi.getCatalogList(
-      querys.villageId, 
-      authStore.isAdmin ? undefined : querys.villageVolunteerId,
-    ));
-    console.log('catalogList', catalogList, 'find', querys.collectModuleId);
-    const catalog = catalogList.find((p) => p.collectModuleId === querys.collectModuleId || p.childlist.find((c) => c.collectModuleId === querys.collectModuleId));
-    if (!catalog) {
-      error.value = '未找到采集目录';
-      return;
-    }
     try {
       const formDefine = getVillageInfoForm(querys.collectModuleId, -1);
-      const goForm = [ 
-        querys.collectModuleId, 
-        catalog.typeId ?? -1, 
-        formDefine?.[2].typeName, 
-        querys.collectModuleId === CollectableModulesIdMap['overview'] ? 'common' : undefined,
-        catalog.title,
-        catalog.id
-      ] as TaskMenuDefGoForm;
-      querys.subId = goForm[1];
-      querys.subKey = goForm[2] || 'type';
-      querys.subTitle = goForm[4] || querys.subTitle;
-      querys.catalogId = goForm[5] || 0;
+      querys.subId = -1;
+      querys.subKey = formDefine?.[2].typeName || 'type';
       querys.villageVolunteerId = volunteerInfo.value?.id || 0;
       listLoader.load(false, {
         villageId: querys.villageId,

+ 12 - 11
src/pages/dig/forms/task.vue

@@ -1,25 +1,26 @@
 <template>
-  <FlexCol :padding="30" :gap="20">
-    <CollectModuleList
-      :villageId="querys.villageId"
-      :villageVolunteerId="querys.villageVolunteerId"
-      :taskName="querys.taskName"
-      :taskTitle="querys.taskTitle"
-      :taskPid="querys.taskPid"
-      :isView="querys.isView"
-    />
-  </FlexCol>
+  <CommonTopBanner :title="querys.taskTitle">
+    <FlexCol :padding="30" :gap="20">
+      <CollectModuleList
+        :villageId="querys.villageId"
+        :villageVolunteerId="querys.villageVolunteerId"
+        :taskTitle="querys.taskTitle"
+        :taskPid="querys.taskPid"
+        :isView="querys.isView"
+      />
+    </FlexCol>
+  </CommonTopBanner>
 </template>
 
 <script setup lang="ts">
 import { useLoadQuerys } from '@/components/composeabe/LoadQuerys';
 import CollectModuleList from '../components/CollectModuleList.vue';
 import FlexCol from '@/components/layout/FlexCol.vue';
+import CommonTopBanner from '@/common/components/CommonTopBanner.vue';
 
 const { querys } = useLoadQuerys({ 
   villageId: 0,
   villageVolunteerId: 0,
-  taskName: '',
   taskTitle: '',
   taskPid: 0,
   isView: false,

+ 5 - 0
src/pages/home/discover/details.vue

@@ -25,6 +25,11 @@
               </view>
             </swiper-item>
           </swiper>
+          <video 
+            v-else-if="loader.content.value.video"
+            :src="loader.content.value.video"
+            :style="{ width: '100%', height: '500rpx' }"
+          />
           <Image
             v-else-if="loader.content.value.image"
             :src="loader.content.value.image"