소스 검색

🎨 修改村社首页细节

快乐的梦鱼 12 시간 전
부모
커밋
3077d74137

+ 1 - 1
src/api/light/LightVillageApi.ts

@@ -4,7 +4,7 @@ import { transformSomeToArray } from '../Utils';
 
 export class VillageListItem extends DataModel<VillageListItem> {
   constructor() {
-    super(VillageListItem, "活动列表");
+    super(VillageListItem, "村社详情");
     this.setNameMapperCase('Camel', 'Snake');
     this._convertTable = {
       id: { clientSide: 'number', clientSideRequired: true },

+ 50 - 40
src/components/display/TextEllipsis.vue

@@ -1,8 +1,50 @@
+<template>
+  <FlexView position="relative" v-bind="outerProps">
+    <FlexCol 
+      :height="customContent && !open ? collapsedHeight : undefined"
+      overflow="hidden"
+    >
+      <slot>
+        <Text 
+          v-bind="props"
+          :ellipsis="true" 
+          :lines="currentLines"
+          :text="text"
+          wrap
+        />
+      </slot>
+      <BackgroundBox 
+        v-if="!open && (showMask || customContent)"
+        :height="collapsedHeight"
+        color1="transparent"
+        :color2="maskColor"
+        :innerStyle="{ 
+          position: 'absolute',
+          bottom: '36rpx',
+          left: 0,
+          right: 0,
+        }"
+      />
+    </FlexCol>
+    <slot v-if="expandable" name="button" :onClick="handleClick">
+      <Text 
+        v-bind="props"
+        innerClass="nana-text-ellipsis-expand"
+        touchable
+        :text="open ? closeText : openText"
+        color="primary" 
+        @click="handleClick"
+      />
+    </slot>
+  </FlexView>
+</template>
+
 <script setup lang="ts">
 import { computed, ref } from 'vue';
 import type { TextProps } from '../basic/Text.vue';
 import Text from '../basic/Text.vue';
 import FlexCol from '../layout/FlexCol.vue';
+import FlexView, { type FlexProps } from '../layout/FlexView.vue';
 import BackgroundBox from './block/BackgroundBox.vue';
 
 export interface TextEllipsisProps extends TextProps {
@@ -12,6 +54,10 @@ export interface TextEllipsisProps extends TextProps {
    */
   lines?: number;
   /**
+   * 外层样式
+   */
+  outerProps?: FlexProps;
+  /**
    * 是否可展开
    * @default true
    */
@@ -54,7 +100,6 @@ export interface TextEllipsisProps extends TextProps {
   customContent?: boolean;
 }
 
-
 const emit = defineEmits(['expand', 'collapse']);
 const props = withDefaults(defineProps<TextEllipsisProps>(), {
   lines: 1,
@@ -63,6 +108,9 @@ const props = withDefaults(defineProps<TextEllipsisProps>(), {
   customContent: false,
   showMask: false,
   maskColor: 'white',
+  outerProps: () => ({
+    direction: 'column'
+  }),
   collapsedHeight: 140,
   openText: '展开',
   closeText: '收起',
@@ -88,50 +136,12 @@ defineOptions({
 })
 </script>
 
-<template>
-  <FlexCol position="relative">
-    <FlexCol 
-      :height="customContent && !open ? collapsedHeight : undefined"
-      overflow="hidden"
-    >
-      <slot>
-        <Text 
-          v-bind="props"
-          :ellipsis="true" 
-          :lines="currentLines"
-          :text="text"
-        />
-      </slot>
-      <BackgroundBox 
-        v-if="!open && (showMask || customContent)"
-        :height="collapsedHeight"
-        color1="transparent"
-        :color2="maskColor"
-        :innerStyle="{ 
-          position: 'absolute',
-          bottom: '36rpx',
-          left: 0,
-          right: 0,
-        }"
-      />
-    </FlexCol>
-    <slot v-if="expandable" name="button" :onClick="handleClick">
-      <Text 
-        innerClass="nana-text-ellipsis-expand"
-        touchable
-        :text="open ? closeText : openText"
-        color="primary" 
-        @click="handleClick"
-      />
-    </slot>
-  </FlexCol>
-</template>
-
 <style>
 .nana-text-ellipsis-expand {
   /* #ifndef APP-NVUE */
   display: inline-block;
   /* #endif */
   text-align: right;
+  flex-shrink: 0;
 }
 </style>

+ 9 - 5
src/pages/home/components/VillageMyFollow.vue

@@ -47,10 +47,14 @@ const emit = defineEmits<{
 const villageStore = useVillageStore();
 
 const villageList = computed(() => {
-  const followMap = new Map<number, typeof villageStore.myFollowVillages[0]>();
+  const result = [
+    ...villageStore.myFollowVillages,
+  ] as VillageListItem[];
+  const followMap = new Map<number, typeof result[0]>();
   
   villageStore.myFollowVillages.forEach(item => {
-    followMap.set(item.id, { ...item, isFollow: true, isJoined: false });
+    item.isFollow = true;
+    followMap.set(item.id, item as VillageListItem);
   });
   
   villageStore.myJoinedVillages.forEach(item => {
@@ -58,11 +62,11 @@ const villageList = computed(() => {
     if (existing) {
       existing.isJoined = true;
     } else {
-      followMap.set(item.id, { ...item, isFollow: false, isJoined: true });
+      item.isJoined = true;
+      result.push(item as VillageListItem);
     }
   });
-  
-  return Array.from(followMap.values());
+  return result;
 });
 
 

+ 1 - 1
src/pages/home/dig.vue

@@ -154,7 +154,7 @@ const { value: currentCity } = useStorageVar('currentCityName', '');
 
 const bannerLoader = useSimpleDataLoader(async () => {
   return (await BannerApi.getBannerList({
-    keywords: '亮乡源大众版挖掘',
+    keywords: '亮乡源大众版挖掘首页',
   })).map(p => ({
     image: p.image,
     url: p.url,

+ 1 - 1
src/pages/home/index.vue

@@ -14,7 +14,7 @@
           <Button 
             @click="showCityPopup = true"
             icon="https://xy.wenlvti.net/app_static/images/home/IconSwitch.png"
-            size="small"
+            size="medium"
             :text="currentCity"
           />
           <Image

+ 3 - 1
src/pages/home/village/composeabe/Follow.ts

@@ -3,6 +3,7 @@ import { useRequireLogin } from "@/common/composeabe/RequireLogin";
 import { useVillageStore } from "@/store/village";
 import { computed } from "vue";
 import { toast, confirm } from "@/components/dialog/CommonRoot";
+import LightVillageApi from "@/api/light/LightVillageApi";
 
 export function useFollow() {
 
@@ -18,7 +19,8 @@ export function useFollow() {
     requireLogin(async () => {
       try {
         await FollowVillageApi.followVillage(villageStore.currentVillage!.id);
-        villageStore.myFollowVillages.push(villageStore.currentVillage!);
+        const info = await LightVillageApi.getVillageDetails(villageStore.currentVillage!.id);
+        villageStore.myFollowVillages.push(info);
         toast('关注成功');
       } catch {
         toast('关注失败');

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

@@ -16,14 +16,14 @@
             icon="https://xy.wenlvti.net/app_static/images/home/IconSwitch.png"
             :text="villageStore.currentVillage?.name || '未选择村社'"
             :textColor="topTab === 'village' ? 'text.titleLight' : 'text.content'"
-            size="small"
+            size="medium"
             @click="showMyFollowPopup = true"
           />
         </BubbleTip>
         <Button
           :textColor="topTab === 'around' ? 'text.titleLight' : 'text.content'"
           text="周边村社" 
-          size="small"
+          size="medium"
           @click="topTab = 'around'" 
         />
       </FlexRow>

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

@@ -16,8 +16,14 @@
       <!-- 标题 -->
       <FlexRow justify="space-between" align="flex-end" width="100%">
         <FlexRow gap="gap.md">
-          <Text :text="villageInfoLoader.content.value?.title" fontConfig="primaryTitle" />
-          <IconButton icon="edit-filling" :size="40" @click="handleGoEdit()" />
+          <Text 
+            :text="villageInfoLoader.content.value?.title" 
+            :lines="1" 
+            :fontSize="40"
+            :maxWidth="240"
+            wordBreak="break-all"
+            fontConfig="primaryTitle"
+          />
         </FlexRow>
         <FlexRow center gap="gap.lg">
           <BubbleTip
@@ -62,13 +68,18 @@
         </FlexRow>
       </FlexRow>
 
-      <!-- 简介 -->
-      <TextEllipsis 
-        fontConfig="secondText"
-        :lines="2" 
-        :expandable="(villageInfoLoader.content.value?.desc as string || '').length > 80"
-        :text="(villageInfoLoader.content.value?.desc as string) || '暂无简介,欢迎您来编写完善!'"
-      />
+      <FlexRow gap="gap.md" align="flex-start">
+        <!-- 简介 -->
+        <TextEllipsis 
+          fontConfig="secondText"
+          :outerProps="{ direction: 'row', width: '480rpx' }"
+          :lines="1" 
+          :expandable="(villageInfoLoader.content.value?.desc as string || '').length > 20"
+          :text="(villageInfoLoader.content.value?.desc as string) || '暂无简介,欢迎您来编写完善!'"
+          wordBreak="break-all"
+        />
+        <Button size="mini" icon="edit-filling" text="编辑简介" @click="handleGoEdit" />
+      </FlexRow>
 
       <!-- 状态与申请 -->
       <FlexRow 
@@ -390,7 +401,8 @@ const villageInfoLoader = useSimpleDataLoader(async () => {
   try {
     if (village) 
       isJoined.value = await getIsJoinedVillage(village.id);
-  } catch {
+  } catch (e) {
+    console.error(e);
     isJoined.value = false;
   }
   handleShowFollowTip();
@@ -536,8 +548,8 @@ async function handleGoOfficalManage() {
   });
 }
 async function handleGoEdit() {
-  /* assertNotNull(villageStore.currentVillage?.id)
-  const isAdmin = (authStore.isAdmin || await OfficialApi.checkTopicRule(villageStore.currentVillage.id));
+  assertNotNull(villageStore.currentVillage?.id)
+  /* const isAdmin = (authStore.isAdmin || await OfficialApi.checkTopicRule(villageStore.currentVillage.id));
   if (!isAdmin) {
     const goUpgrade = await confirm({
       title: '提示',

+ 3 - 1
src/pages/home/village/task/index.vue

@@ -19,7 +19,8 @@
               align="center"
             >
               <FlexRow gap="gap.md" align="center">
-                <Icon :icon="item.image" :size="60" />
+                <Icon :icon="item.image" :size="100" />
+                <Width :size="5" />
                 <FlexCol gap="gap.md">
                   <Text fontConfig="lightImportantTitle" fontFamily="SongtiSCBlack">{{ item.name }}</Text>
                   <Text :fontSize="23" :text="item.desc" />
@@ -76,6 +77,7 @@ import FrameButton from '@/common/components/FrameButton.vue';
 import Button from '@/components/basic/Button.vue';
 import { backAndCallOnPageBack } from '@/components/utils/PageAction';
 import Icon from '@/components/basic/Icon.vue';
+import Width from '@/components/layout/space/Width.vue';
 
 const { querys } = useLoadQuerys({
   villageId: 0,

+ 2 - 2
src/store/village.ts

@@ -42,8 +42,8 @@ export const useVillageStore = defineStore('village', () => {
     myFollowVillages.value = villages.list;
   }
   async function loadMyJoinedVillages() {
-    const villages = await FollowVillageApi.getClaimedVallageList();
-    myJoinedVillages.value = villages;
+    const res = await FollowVillageApi.getClaimedVallageList();
+    myJoinedVillages.value = res;
   }
   function setShareFromVillageUserId(userId: number) {
     shareFromVillageUserId.value = userId;