Browse Source

🎨 按要求优化村落管理按钮突出样式

快乐的梦鱼 1 week ago
parent
commit
99a3aa7d6b

BIN
server/images/FrameButtonPrimarySmall.png


BIN
server/images/FrameButtonSmall.png


+ 42 - 11
src/common/components/FrameButton.vue

@@ -1,9 +1,8 @@
 <template>
   <BackgroundImageButton 
-    :backgroundImage="primary ? 'https://xy.wenlvti.net/app_static/images/FrameButtonPrimary.png' : 
-      'https://xy.wenlvti.net/app_static/images/FrameButton.png'"
-    :backgroundCutBorder="32"
-    :backgroundCutBorderSize="36"
+    :backgroundImage="image"
+    :backgroundCutBorder="backgroundCutBorderSize"
+    :backgroundCutBorderSize="backgroundCutBorderSize"
     :padding="padding"
     :width="width"
     :touchable="!loading && touchable"
@@ -11,9 +10,9 @@
     gap="gap.md"
     @click="emit('click')"
   >
-    <ActivityIndicator v-if="loading" :size="size === 'large' ? 36 : 28" :color="primary ? 'white' : 'text.content'" />
-    <Icon v-if="icon" :icon="icon" :size="size === 'large' ? 32 : 26" :color="primary ? 'white' : 'text.content'" />
-    <Text :text="text" :wrap="false" fontConfig="lightTitle" :fontSize="size === 'large' ? 36 : 28" :color="primary ? 'white' : 'text.content'" />
+    <ActivityIndicator v-if="loading" :size="iconSize" :color="primary ? 'white' : 'text.content'" />
+    <Icon v-if="icon" :icon="icon" :size="iconSize" :color="primary ? 'white' : 'text.content'" />
+    <Text :text="text" :wrap="false" fontConfig="lightTitle" :fontSize="fontSize" :color="primary ? 'white' : 'text.content'" />
   </BackgroundImageButton>
 </template>
 
@@ -27,7 +26,7 @@ import { computed } from 'vue';
 const props = withDefaults(defineProps<{
   text: string;
   primary?: boolean;
-  size?: 'large' | 'small';
+  size?: 'large' | 'midium' | 'small';
   width?: string|number;
   innerStyle?: object;
   loading?: boolean;
@@ -41,10 +40,42 @@ const props = withDefaults(defineProps<{
 }); 
 
 const padding = computed(() => {
-  if (props.size === 'large') {
-    return [22, 36];
+  switch (props.size) {
+    case 'large': return [20, 36];
+    case 'midium': return [18, 20];
+    case 'small': return [15, 18];
+  }
+});
+const backgroundCutBorderSize = computed(() => {
+  switch (props.size) {
+    case 'large': return 32;
+    case 'midium': return 28;
+    case 'small': return 18;
+  }
+});
+const fontSize = computed(() => {
+  switch (props.size) {
+    case 'large': return 36;
+    case 'midium': return 28;
+    case 'small': return 26;
+  }
+});
+const iconSize = computed(() => {
+  switch (props.size) {
+    case 'large': return 32;
+    case 'midium': return 26;
+    case 'small': return 26;
+  }
+});
+const image =  computed(() => {
+  if (props.size === 'large' || props.size === 'midium') {
+    return props.primary ? 
+      'https://xy.wenlvti.net/app_static/images/FrameButtonPrimary.png' : 
+      'https://xy.wenlvti.net/app_static/images/FrameButton.png';
   } else {
-    return [18, 20];
+    return props.primary ? 
+      'https://xy.wenlvti.net/app_static/images/FrameButtonPrimarySmall.png' : 
+      'https://xy.wenlvti.net/app_static/images/FrameButtonSmall.png';
   }
 });
 

+ 27 - 40
src/pages/dig/forms/list-ordinary.vue

@@ -67,12 +67,12 @@
               </Touchable>
               <FlexCol>
                 <FlexRow>
-                  <FrameButton text="待审核" size="small" @click="navTo('/pages/dig/about/goving')" />
-                  <FrameButton v-if="isManagement" text="管理" size="small" @click="goEdit(item)" />
+                  <FrameButton :text="item.statusText" size="midium" @click="navTo('/pages/dig/about/goving')" />
+                  <FrameButton v-if="isManagement" text="管理" size="midium" @click="goEdit(item)" />
                 </FlexRow>
-                <FlexRow>
-                  <IconButton icon="icon-appreciate-light" size="30" :text="item.likes" color="primary" />
-                  <IconButton icon="like-filling" size="small" color="primary" />
+                <FlexRow gap="gap.md">
+                  <IconButton icon="appreciate-light-fill" size="30" :text="item.likes" color="primary" />
+                  <IconButton icon="appreciate-light" size="30" :rotate="180" :text="item.disLikes" color="primary" />
                 </FlexRow>
               </FlexCol>
             </BackgroundBox>
@@ -112,7 +112,7 @@ import H4 from '@/components/typography/H4.vue';
 import Touchable from '@/components/feedback/Touchable.vue';
 import XBarSpace from '@/components/layout/space/XBarSpace.vue';
 import Result from '@/components/feedback/Result.vue';
-import VillageApi, { type VillageCatalogListItem } from '@/api/inhert/VillageApi';
+import VillageApi, { VillageCatalogListItem } from '@/api/inhert/VillageApi';
 import Icon from '@/components/basic/Icon.vue';
 import CommonTopBanner from '@/common/components/CommonTopBanner.vue';
 import BackgroundBox from '@/components/display/block/BackgroundBox.vue';
@@ -160,6 +160,7 @@ const listLoader = useSimplePageListLoader(8, async (page, pageSize, params) =>
       ),
       disLikes: item.dislikeNum.toString(),
       likes: item.likeNum.toString(),
+      statusText: item.statusText,
     }
   })
   return {
@@ -234,7 +235,7 @@ const currentLoadData = ref({
   subId: 0,
   subKey: '',
   subTitle: '',
-  catalogId: 0,
+  catalogId: 0 as number|undefined,
   villageId: 0,
   villageVolunteerId: 0,
 });
@@ -249,6 +250,19 @@ function loadListCatalog(catalog: VillageCatalogListItem) {
     return;
   currentCatalog.value = catalog;  
   try {
+    if (catalog.id === 0) {
+      currentLoadData.value =  {
+        collectModuleId: querys.value.collectModuleId,
+        subId: -1,
+        subKey: 'type',
+        subTitle: querys.value.title,
+        catalogId: undefined,
+        villageId: querys.value.villageId,
+        villageVolunteerId: volunteerInfo.value?.id || 0,
+      } 
+      listLoader.load(true, currentLoadData.value)
+      return;
+    }
     const formDefine = getVillageInfoForm(querys.value.collectModuleId, -1);
     const goForm = [ 
       querys.value.collectModuleId, 
@@ -275,34 +289,6 @@ function loadListCatalog(catalog: VillageCatalogListItem) {
   }
   listLoader.load(true, currentLoadData.value)
 }
-function loadListNoCatalog() {
-  try {
-    const formDefine = getVillageInfoForm(querys.value.collectModuleId, -1);
-    const goForm = [ 
-      querys.value.collectModuleId, 
-      -1, 
-      formDefine?.[2].typeName, 
-      querys.value.collectModuleId === CollectableModulesIdMap['overview'] ? 'common' : undefined,
-      querys.value.title,
-      undefined,
-    ] as TaskMenuDefGoForm;
-
-    currentLoadData.value = {
-      collectModuleId: querys.value.collectModuleId,
-      subId: goForm[1],
-      subKey: goForm[2] || 'type',
-      subTitle: goForm[4] || querys.value.title,
-      catalogId: goForm[5] || 0,
-      villageId: querys.value.villageId,
-      villageVolunteerId: volunteerInfo.value?.id || 0,
-    }
-  } catch (e) {
-    console.error(e);
-    error.value = '任务不存在';
-    return;
-  }
-  listLoader.load(true, currentLoadData.value)
-}
 
 const { querys } = useLoadQuerys({ 
   collectModuleId: 0,
@@ -333,11 +319,12 @@ const { querys } = useLoadQuerys({
     pushCatalogWithCurrentCatalog(catalog);
   });
 
-  if (catalogs.value.length === 0) {
-    loadListNoCatalog();
-  } else {
-    loadListCatalog(catalogs.value[0] as VillageCatalogListItem);
-  }
+  catalogs.value.unshift(new VillageCatalogListItem().setSelfValues({
+    id: 0,
+    title: '全部',
+  }));
+
+  loadListCatalog(catalogs.value[0] as VillageCatalogListItem);
   currentTitle.value = querys.title || '共编村史';
 });
 

+ 2 - 2
src/pages/home/light/submit-map.vue

@@ -114,8 +114,8 @@ defineExpose({
           <Text text="请选择您要点亮的村社" fontConfig="primaryTitle" />
         </FlexCol>
         <FlexRow gap="gap.md">
-          <FrameButton size="small" icon="search" text="点击搜索" @click="lightMap?.showSearch()" />
-          <FrameButton size="small" icon="home-filling" text="没有我的家乡?点这里建村" @click="navTo('/pages/home/light/create-village')" />
+          <FrameButton size="midium" icon="search" text="点击搜索" @click="lightMap?.showSearch()" />
+          <FrameButton size="midium" icon="home-filling" text="没有我的家乡?点这里建村" @click="navTo('/pages/home/light/create-village')" />
         </FlexRow>
       </BoxMid>
     </FlexRow>

+ 2 - 2
src/pages/home/village/goods/index.vue

@@ -3,8 +3,8 @@
     <FlexCol gap="gap.md" padding="padding.md">
       <FlexRow justify="space-between" align="center" gap="gap.sm">
         <SearchBar v-model:value="searchValue" placeholder="搜索乡源好物" :innerStyle="{ width: '270rpx' }" />
-        <FrameButton text="我要发布" @click="handlePublish" size="small" />
-        <FrameButton text="开通微信小店" @click="handleOpen" size="small" />
+        <FrameButton text="我要发布" @click="handlePublish" size="midium" />
+        <FrameButton text="开通微信小店" @click="handleOpen" size="midium" />
       </FlexRow>
       <SimplePageListLoader :loader="goodsLoader">
         <FlexRow wrap justify="space-around" gap="gap.sm">

+ 24 - 45
src/pages/home/village/introd/card.vue

@@ -171,34 +171,19 @@
     <HomeTitle title="魅力乡源" showMore @moreClicked="handleGoCollect()">
       <template #right>
         <FlexRow align="center" gap="gap.md">
-          <Touchable
-            :padding="[15, 20]"
-            direction="row"
-            center
-            gap="gap.md"
+          <FrameButton
+            text="管理" 
+            size="small" 
+            primary
             @click="handleGoDigManage()"
-          >
-            <Icon name="https://xy.wenlvti.net/app_static/images/village/IconLargeFolkloreVibe.png" :size="30" />
-            <Text text="管理" fontConfig="contentText" />
-          </Touchable>
-          <Touchable 
-            :padding="[15, 20]"
-            :innerStyle="{ 
-              marginRight: '20rpx'
-            }"
-            borderStyle="solid"
-            borderColor="border.secondary"
-            borderWidth="1px"
-            backgroundColor="background.quaternary"
-            radius="radius.md"
-            direction="row"
-            center
-            gap="gap.sm"
+          />
+          <FrameButton
+            text="共编村史" 
+            icon="https://xy.wenlvti.net/app_static/images/village/IconHistory.png"
+            size="small"
             @click="handleGoCollect()"
-          >
-            <Icon name="https://xy.wenlvti.net/app_static/images/village/IconHistory.png" :size="30" />
-            <Text text="共编村史" fontConfig="contentText" />
-          </Touchable>
+          />
+          <Width :size="15" />
         </FlexRow>
       </template>
     </HomeTitle>
@@ -250,27 +235,19 @@
             @contentClick="handleCloseManageTip(true)"
             @close="handleCloseManageTip(false)"
           >
-            <Touchable
-              :padding="[15, 20]"
-              direction="row"
-              center
-              gap="gap.md"
+            <FrameButton
+              text="管理" 
+              size="small" 
+              primary
               @click="handleGoOfficalManage()"
-            >
-              <Icon name="https://xy.wenlvti.net/app_static/images/village/IconLargeFolkloreVibe.png" :size="30" />
-              <Text text="管理" fontConfig="contentText" />
-            </Touchable>
+            />
           </BubbleTip>
-          <Touchable
-            :padding="[15, 20]"
-            direction="row"
-            center
-            gap="gap.md"
-            @click="handleGoPublish()"
-          >
-            <Icon name="https://xy.wenlvti.net/app_static/images/village/IconLargeHistory.png" :size="30" />
-            <Text text="乡源AI帮你写" fontConfig="contentText" />
-          </Touchable>
+          <FrameButton 
+            text="乡源AI帮你写" 
+            size="small" 
+            icon="https://xy.wenlvti.net/app_static/images/village/IconLargeHistory.png"
+            @click="handleGoPublish()" 
+          />
         </FlexRow>
       </template>
     </HomeTitle>
@@ -327,6 +304,8 @@ import TextEllipsis from '@/components/display/TextEllipsis.vue';
 import { confirm, toast } from '@/components/dialog/CommonRoot';
 import { useGetNotice } from '../composeabe/GetNotice';
 import OfficialApi from '@/api/light/OfficialApi';
+import FrameButton from '@/common/components/FrameButton.vue';
+import Width from '@/components/layout/space/Width.vue';
 
 const authStore = useAuthStore();
 const { getIsVolunteer } = useUserTools();

+ 2 - 2
src/pages/home/village/task/index.vue

@@ -35,7 +35,7 @@
                     primary
                     text="去完成"
                     width="100rpx"
-                    size="small"
+                    size="midium"
                     @click="handleDoTask(item)"
                   />
                   <FrameButton
@@ -44,7 +44,7 @@
                     text="已完成"
                     :touchable="false"
                     width="100rpx"
-                    size="small"
+                    size="midium"
                   />
                   <Text v-if="item.limitType === 'day' && item.limitNum > 0" fontConfig="subText">今日可完成{{ item.limitNum }}次</Text>
                   <Text v-else-if="item.limitType === 'total' && item.limitNum > 0" fontConfig="subText">还可完成{{ item.limitNum }}次</Text>