Преглед изворни кода

🎨 按要求优化未点亮默认提示为弹窗可看默认页

快乐的梦鱼 пре 5 дана
родитељ
комит
c5a30f0210

+ 17 - 18
src/pages/home/components/VillageMyFollow.vue

@@ -4,27 +4,26 @@
     <RequireLogin unLoginMessage="登录后查看我的关注村社" @loginSuccess="villageStore.loadMyFollowVillages()">
       <FlexCol gap="gap.md">
         <Empty v-if="villageList.length === 0" description="还没有关注村社哦" />
-        <FlexRow 
+        <ImageBlock3
           v-for="(item, i) in villageList"
           :key="i"
-          justify="space-between" align="center" gap="gap.md"
+          backgroundColor="transparent"
+          :src="item.image"
+          defaultImage="https://xy.wenlvti.net/app_static/images/village/PlaceholderVillage.jpg"
+          :title="item.name"
+          :desc="item.address"
+          :imageRadius="15"
+          :imageWidth="170"
+          :imageHeight="120"
+          @click="emit('goDetails', item as VillageListItem)"
         >
-          <ImageBlock3
-            backgroundColor="transparent"
-            :src="item.image"
-            defaultImage="https://xy.wenlvti.net/app_static/images/village/PlaceholderVillage.jpg"
-            :title="item.name"
-            :desc="item.address"
-            :imageRadius="15"
-            :imageWidth="200"
-            :imageHeight="140"
-            @click="emit('goDetails', item as VillageListItem)"
-          />
-          <FlexRow justify="flex-end" align="center" gap="gap.md" width="200rpx">
-            <Tag v-if="item.isFollow" text="已关注" size="small" />
-            <Tag v-if="item.isJoined" text="已加入" size="small" type="primary" />
-          </FlexRow>
-        </FlexRow>
+          <template #right>
+            <FlexRow justify="flex-end" align="center" gap="gap.md" width="200rpx">
+              <Tag v-if="item.isFollow" text="已关注" size="small" />
+              <Tag v-if="item.isJoined" text="已加入" size="small" type="primary" />
+            </FlexRow>
+          </template>
+        </ImageBlock3>
       </FlexCol>
     </RequireLogin>
   </FlexCol>

+ 3 - 2
src/pages/home/components/VillageUserRankList.vue

@@ -78,8 +78,9 @@ const emit = defineEmits<{
 const first3 = computed(() => {
   const list = props.list.concat();
   if (list.length < 3) {
+    const addCount = 3 - list.length;
     let rank = list.length;
-    for (let i = 0; i < 3 - list.length; i++) {
+    for (let i = 0; i < addCount; i++) {
       list.push({
         id: -i,
         image: 'https://xy.wenlvti.net/app_static/images/mine/DefaultAvatar.png',
@@ -93,7 +94,7 @@ const first3 = computed(() => {
   const first = list[0];
   ArrayUtils.removeAt(list, 0);
   ArrayUtils.insert(list, 1, first);
-  return list.slice(0, 3);
+  return list;
 })
 
 function handleGoDetails(item: UserRankItem) {

+ 26 - 47
src/pages/home/village/index.vue

@@ -1,6 +1,6 @@
 <template>
   <CommonRoot>
-    <FlexCol v-if="showSwitch" position="absolute" :left="0" :top="0" :right="0">
+    <FlexCol v-if="showSwitch" position="fixed" :left="0" :top="0" :right="0" :zIndex="200">
       <StatusBarSpace />
       <FlexRow gap="gap.lg" :padding="30">
         <BubbleTip
@@ -30,41 +30,29 @@
     </FlexCol>
     <Height :height="40" />
     <FlexCol v-if="topTab === 'village' && villageStore.currentVillage" gap="gap.md">
-      <FlexCol v-if="!isLight" center :padding="[60,0]" gap="gap.md">
-        <Image src="https://xy.wenlvti.net/app_static/images/home/BadgeNew.png" :width="320" mode="widthFix" />
-        <Text text="本村暂未点亮" fontConfig="primaryTitle" />
-        <Text text="等你的加入,快来为家乡建设做贡献吧" fontConfig="contentText" />
-        <Height :height="20" />
-        <FlexRow gap="gap.lg">
-          <FrameButton :text="isFollowed ? '已关注' : '先关注村社'" @click="isFollowed ? onUnFollow() : handleFollow()" />
-          <FrameButton text="去申请点亮" @click="handleLight" primary />
-        </FlexRow>
-      </FlexCol>
-      <template v-else>
-        <FlexRow center :padding="[0,30]">
-          <HomeLargeTitle title="村社名片" :active="tab === 'card'" @click="tab = 'card'" />
-          <Width :width="30" />
-          <HomeLargeTitle title="乡源树" titleColorAnim :active="tab === 'tree'" @click="tab = 'tree'">
-            <template #icon>
-              <Image src="https://xy.wenlvti.net/app_static/images/village/TreeIconAmin2.gif" :width="34" :height="50" mode="heightFix" />
-            </template>
-          </HomeLargeTitle>
-        </FlexRow>
-        <Card 
-          v-if="tab === 'card'" 
-          ref="cardRef"
-          @goTree="tab = 'tree'" 
-          @goJoin="joinDialog?.show()"
-        />
-        <Tree 
-          v-if="tab === 'tree'" 
-          ref="treeRef"
-        />
-      </template>
+      <FlexRow center :padding="[0,30]">
+        <HomeLargeTitle title="村社名片" :active="tab === 'card'" @click="tab = 'card'" />
+        <Width :width="30" />
+        <HomeLargeTitle title="乡源树" titleColorAnim :active="tab === 'tree'" @click="tab = 'tree'">
+          <template #icon>
+            <Image src="https://xy.wenlvti.net/app_static/images/village/TreeIconAmin2.gif" :width="34" :height="50" mode="heightFix" />
+          </template>
+        </HomeLargeTitle>
+      </FlexRow>
+      <Card 
+        v-if="tab === 'card'" 
+        ref="cardRef"
+        @goTree="tab = 'tree'" 
+        @goJoin="joinDialog?.show()"
+      />
+      <Tree 
+        v-if="tab === 'tree'" 
+        ref="treeRef"
+      />
       <Height :height="150" />
     </FlexCol>
     <FlexCol v-else-if="topTab === 'village'" gap="gap.md">
-      <FlexCol v-if="!isLight" center :padding="[60,0]" gap="gap.md">
+      <FlexCol center :padding="[60,0]" gap="gap.md">
         <Image src="https://xy.wenlvti.net/app_static/images/home/BadgeNew.png" :width="320" mode="widthFix" />
         <Text text="还未选择一个村社" fontConfig="primaryTitle" />
         <Text text="欢迎关注或者认领村社,认领自己家乡参与建设,或四处看看" fontConfig="contentText" />
@@ -87,19 +75,20 @@
       round
       size="80vh"
     >
-      <VillageMyFollow @goDetails="onSelectVillage" />
+      <scroll-view scroll-y style="height: 100%">
+        <VillageMyFollow @goDetails="onSelectVillage" />
+      </scroll-view>
     </Popup>
     <JoinDialog
       ref="joinDialog" 
       v-if="villageStore.currentVillage"
       :villageId="villageStore.currentVillage.id" 
     />
-
   </CommonRoot>
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, ref, watch } from 'vue';
+import { onMounted, ref, watch } from 'vue';
 import { useVillageStore } from '@/store/village';
 import { useFollow } from './composeabe/Follow';
 import { isDevEnv } from '@/common/config/AppCofig';
@@ -143,17 +132,10 @@ const props = withDefaults(defineProps<{
 });
 const emit = defineEmits(['goHome']);
 
-const isLight = computed(() => {
-  return villageStore.currentVillage?.isLight ?? false;
-});
-
 const showFollowTipTimeout = new MemoryTimeOut('FollowTip', 1000 * 3600 * 30);//30h
 const showFollowTip = ref(false);
 
-function handleFollow() {
-  onFollow();
-  handleShowFollowTip();
-}
+
 function handleShowFollowTip() {
   if (showFollowTipTimeout.isTimeout()) {
     showFollowTip.value = true;
@@ -165,9 +147,6 @@ function handleCloseFollowTip(open: boolean) {
     showMyFollowPopup.value = true;
 }
 
-function handleLight() {
-  joinDialog.value?.show();
-}
 function handleGoSuscribe() {
   emit('goHome');
 }

+ 39 - 1
src/pages/home/village/introd/card.vue

@@ -263,6 +263,36 @@
     v-if="villageStore.currentVillage"
     :villageId="villageStore.currentVillage.id"
   />
+  <Popup 
+    :show="showUnLight"
+    :zIndex="100"
+    size="40%"
+    position="bottom"
+    backgroundColor="transparent"
+  >
+    <FlexCol center>
+      <BackgroundBox 
+        backgroundImage="https://xy.wenlvti.net/app_static/images/village/BoxDialog.png"
+        :backgroundCutBorder="48"
+        :backgroundCutBorderSize="48"
+        :padding="40"
+        direction="column"
+        center
+        width="600rpx"
+        gap="gap.md"
+      >
+        <Image src="https://xy.wenlvti.net/app_static/images/home/BadgeNew.png" :width="320" mode="widthFix" />
+        <Text :text="`${villageStore.currentVillage?.name}暂未点亮`" fontConfig="primaryTitle" />
+        <Text text="等你的加入,快来为家乡建设做贡献吧" fontConfig="contentText" />
+        <Height :height="20" />
+        <FlexRow gap="gap.lg">
+          <FrameButton :text="isFollowed ? '已关注' : '先关注村社'" @click="isFollowed ? onUnFollow() : onFollow()" />
+          <FrameButton text="去申请点亮" @click="handleGoJoin" primary />
+        </FlexRow>
+      </BackgroundBox>
+      <Height :size="300" />
+    </FlexCol>
+  </Popup>
 </template>
 
 <script setup lang="ts">
@@ -306,6 +336,8 @@ 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';
+import Popup from '@/components/dialog/Popup.vue';
+import Image from '@/components/basic/Image.vue';
 
 const authStore = useAuthStore();
 const { getIsVolunteer } = useUserTools();
@@ -317,8 +349,11 @@ const { onPublishSuccess } = useOfficialAccount(() => {
     tag: recommendTagName.value,
   };
 });
-const { isFollowed, onFollow, onUnFollow } = useFollow();
 const villageStore = useVillageStore();
+const { isFollowed, onFollow, onUnFollow } = useFollow();
+const isLight = computed(() => {
+  return villageStore.currentVillage?.isLight ?? false;
+});
 const { getIsJoinedVillage } = useUserTools();
 const isOfficialEmpty = ref(false);
 const isJoined = ref(false);
@@ -332,6 +367,7 @@ const villageInfoLoader = useSimpleDataLoader(async () => {
   }
   handleShowFollowTip();
   isOfficialEmpty.value = false;
+  showUnLight.value = !villageStore.currentVillage?.isLight;
   setTimeout(() => {
     handleManageFollowTip();
   }, 3000);
@@ -357,6 +393,7 @@ const emit = defineEmits<{
   (e: 'goJoin'): void;
 }>();
 
+
 const rankActiveTag = ref('文化积分');
 const listActiveTag = ref('广场');
 
@@ -387,6 +424,7 @@ function handleCloseFollowTip() {
   showFollowTipTimeout.recordTime();
 }
 
+const showUnLight = ref(false);
 const showManageTipTimeout = new MemoryTimeOut('VillageManageTip', 1000 * 3600 * 20);//30h
 const showManageTip = ref(false);
 

+ 2 - 0
src/pages/index.vue

@@ -15,6 +15,7 @@
         backgroundColor="transparent"
         textColor="whweixinite"
         align="left"
+        :zIndex="200"
       />
       <HomeIndex v-show="tabIndex === 0" @goVillage="tabIndex = 1" @goDig="tabIndex = 2" />
       <VillageIndex v-if="tabIndex === 1" showSwitch ref="villageIndex" @goHome="tabIndex=0" />
@@ -26,6 +27,7 @@
         fixed
         xbarSpace
         :innerStyle="{
+          zIndex: 201,
           backgroundColor: '#ffead8',
         }"
       >