📦 首页1

src/App.vue

@@ -63,9 +63,10 @@ RequestApiConfig.setConfig({
 
 //修改默认主题颜色
 configTheme(false, (theme, defaultDarkTheme) => {
-  theme.colorConfigs.default.primary = '#00b66a';
-  theme.colorConfigs.pressed.primary = '#00814b';
-  theme.colorConfigs.background.primary = '#dcfff0';
+  theme.colorConfigs.default.primary = '#e19579';
+  theme.colorConfigs.pressed.primary = '#fbce7a';
+  theme.colorConfigs.default.button = '#f6e9d9';
+  theme.colorConfigs.background.primary = '#fef2e8';
 
   theme.varOverrides['ImageDefaultImage'] = 'https://mncdn.wenlvti.net/app_static/xiangyuan/EmptyImage.png';
   return [theme, defaultDarkTheme];

src/common/components/parts/HomeTitle.vue

@@ -0,0 +1,64 @@
+<template>
+  <SubTitle 
+    :title="title" 
+    :showMore="showMore" 
+    :padding="[25, 0, 15, 0]"
+    @moreClicked="emit('moreClicked')"
+  >
+    <template #icon>
+      <FlexRow align="center">
+        <Image :src="icon" :width="66" :height="42" mode="widthFix" />
+        <Width :width="15" />
+      </FlexRow>
+    </template>
+    <template #title> 
+      <FlexRow align="center">
+        <Text :text="titleBegin2" fontConfig="h4" color="#55989a" />
+        <Text v-if="titleEnd" :text="titleEnd" fontConfig="h4" color="#5f3f2c" />
+      </FlexRow>
+    </template>
+  </SubTitle>
+</template>
+
+<script setup lang="ts">
+import Image from '@/components/basic/Image.vue';
+import Text from '@/components/basic/Text.vue';
+import SubTitle from '@/components/display/title/SubTitle.vue';
+import FlexRow from '@/components/layout/FlexRow.vue';
+import Width from '@/components/layout/space/Width.vue';
+import { computed } from 'vue';
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: '',
+  },
+  icon: {
+    type: String,
+    default: '/static/images/home/HomeTitleIcon.png',
+  },
+  showMore: {
+    type: Boolean,
+    default: false,
+  },
+  lightCount: {
+    type: Number,
+    default: 2,
+  },
+});
+const emit = defineEmits(['moreClicked'])
+
+const titleBegin2 = computed(() => {
+  if (props.title.length > props.lightCount) {
+    return props.title.slice(0, props.lightCount);
+  }
+  return props.title;
+});
+const titleEnd = computed(() => {
+  if (props.title.length > props.lightCount) {
+    return props.title.slice(props.lightCount);
+  }
+  return '';
+});
+
+</script>

src/components/display/NoticeBar.vue

@@ -6,6 +6,7 @@
     :flexShrink="0"
     :innerStyle="{
       ...themeStyles.view.value,
+      ...innerStyle,
       backgroundColor: themeContext.resolveThemeColor(backgroundColor),
     }"
     @click="emit('click')"
@@ -60,6 +61,10 @@ export interface NoticeBarProps {
    */
   iconProps?: IconProps;
   /**
+   * 自定义样式
+   */
+  innerStyle?: ViewStyle;
+  /**
    * 内容
    */
   content?: string;

src/components/display/title/SubTitle.vue

@@ -50,7 +50,9 @@ const finalBadgeStyle = theme.useThemeStyle({
         }"></view>
       </slot>
       <slot name="titlePrefix" />
-      <Text fontConfig="h4" :text="title" v-bind="titleProps" />
+      <slot name="title">
+        <Text fontConfig="h4" :text="title" v-bind="titleProps" />
+      </slot>
       <slot name="titleSuffix" />
     </FlexRow>
     <FlexRow align="center">

src/pages/home/components/VillageMiniMap.vue

@@ -0,0 +1,139 @@
+<template>
+  <div 
+    class="mini-village-map" 
+    :style="{
+      borderColor: themeContext.resolveThemeColor('primary'),
+    }"
+  >
+    <map 
+      id="prevMap"
+      map-id="prevMap"
+      class="mini-village-map-map"
+      :enable-poi="false"
+      :scale="12"
+      :longitude="AppCofig.defaultLonLat[0]"
+      :latitude="AppCofig.defaultLonLat[1]"
+    />
+    <NoticeBar 
+      v-if="currentNoticeContent"
+      :content="currentNoticeContent"
+      :innerStyle="{
+        position: 'absolute',
+        top: '20rpx',
+        left: '20rpx',
+        right: '20rpx',
+        zIndex: 100,
+        borderRadius: '30rpx',
+      }"
+      :textStyle="{
+        fontSize: '26rpx',
+      }"
+      icon="/static/images/home/IconLightActive.png"
+      :iconProps="{
+        size: 34,
+      }"
+      textColor="#C9211F"
+      backgroundColor="#D9492E10"
+    />
+    <Button 
+      :innerStyle="{
+        position: 'absolute',
+        bottom: '20rpx',
+        right: '20rpx',
+        zIndex: 100,
+        backgroundColor: '#ffffff',
+      }" 
+      icon="navigation" 
+      @click="getCurrentLonlat" 
+    >定位</Button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { getCurrentInstance, onMounted, ref } from 'vue';
+import { waitTimeOut } from '@imengyu/imengyu-utils';
+import { useTheme } from '@/components/theme/ThemeDefine';
+import LightVillageApi from '@/api/light/LightVillageApi';
+import MapApi from '@/api/map/MapApi';
+import AppCofig from '@/common/config/AppCofig';
+import Button from '@/components/basic/Button.vue';
+import NoticeBar from '@/components/display/NoticeBar.vue';
+
+const instance = getCurrentInstance();
+const mapCtx = uni.createMapContext('prevMap', instance);
+const currentAddress = ref<string>('');
+const currentLonlat = ref<{ longitude: number, latitude: number }>({ 
+  longitude: AppCofig.defaultLonLat[0], 
+  latitude: AppCofig.defaultLonLat[1],
+});
+const emit = defineEmits(['getedCurrentLonlat']);
+
+const props = defineProps<{
+  startLonlat?: { longitude: number, latitude: number } | undefined;
+}>();
+
+const currentNoticeContent = ref('目前厦门市已被点亮一个社区，刚刚小亮贡献了10个光源，让湖里区点亮了一个社区');
+
+const themeContext = useTheme();
+
+function getCurrentLonlat() {
+  uni.getLocation({
+    type: 'wgs84',
+    success: async (res) => {
+      currentLonlat.value = {
+        longitude: res.longitude,
+        latitude: res.latitude,
+      };
+      const address = await MapApi.regeo(res.latitude, res.longitude);
+      currentAddress.value = address.district;
+      emit('getedCurrentLonlat', currentLonlat.value);
+      mapCtx.moveToLocation({
+        latitude: currentLonlat.value.latitude,
+        longitude: currentLonlat.value.longitude,
+      });
+    },
+  });
+}
+
+onMounted(async () => {
+  if (props.startLonlat) {
+    currentLonlat.value = props.startLonlat;
+    mapCtx.moveToLocation({
+      latitude: currentLonlat.value.latitude,
+      longitude: currentLonlat.value.longitude,
+    });
+  }
+  if (!props.startLonlat) {
+    const res = await LightVillageApi.getIpAddress();
+    currentLonlat.value = {
+      longitude: Number(res.point.x),
+      latitude: Number(res.point.y),
+    };
+    await waitTimeOut(100);
+    currentAddress.value = res.address_detail.district;
+    emit('getedCurrentLonlat', currentLonlat.value);
+    mapCtx.moveToLocation({
+      latitude: currentLonlat.value.latitude,
+      longitude: currentLonlat.value.longitude,
+    });
+  }
+});
+
+</script>
+
+<style lang="scss">
+.mini-village-map {
+  position: relative;
+  width: 100%;
+  height: 300rpx;
+  border-radius: 20rpx;
+  overflow: hidden;
+  border-style: solid;
+  border-width: 1px;
+
+  .mini-village-map-map {
+    width: 100%;
+    height: 340rpx;
+  }
+}
+</style>

src/pages/home/components/VillageRankList.vue

@@ -0,0 +1,70 @@
+<template>
+  <FlexRow :gap="20">
+    <FlexCol 
+      v-for="(item) in list" 
+      :key="item.title" 
+      :width="item.rank == 1 ? '40%' : '28.5%'" 
+      position="relative" 
+      justify="space-between"
+      :radius="20"
+      overflow="hidden"
+    >
+      <Image :src="item.image" width="100%" :height="280" mode="aspectFill" :radius="20" />
+      <FlexRow
+        position="absolute"
+        :left="0"
+        :bottom="0" 
+        :right="0"
+        :padding="10"
+        center
+        backgroundColor="rgba(0, 0, 0, 0.5)"
+      >
+        <Text :text="item.title" fontConfig="h4" color="white" />
+      </FlexRow>
+      <FlexCol 
+        position="absolute"
+        :left="15"
+        :top="15" 
+        center
+        :width="60"
+        :height="80"
+        :innerStyle="{
+          backgroundSize: '100% auto',
+          backgroundRepeat: 'no-repeat',
+          backgroundPosition: 'center',
+          backgroundImage: item.rank == 1 ?
+            `url('/static/images/home/RankBadge1.png')` :
+            `url('/static/images/home/RankBadgeN.png')`,
+        }"
+      >
+        <Text v-if="item.rank > 1" fontConfig="h4" :text="item.rank" color="white" />
+      </FlexCol>
+    </FlexCol>
+  </FlexRow>
+</template>
+
+<script setup lang="ts">
+import Image from '@/components/basic/Image.vue';
+import Text from '@/components/basic/Text.vue';
+import FlexCol from '@/components/layout/FlexCol.vue';
+import FlexRow from '@/components/layout/FlexRow.vue';
+
+
+const list = [
+  {
+    image: 'https://mncdn.wenlvti.net/app_static/minnan/images/test/ImageTest1.png',
+    title: '乡村1',
+    rank: 1,
+  },
+  {
+    image: 'https://mncdn.wenlvti.net/app_static/minnan/images/test/ImageTest2.png',
+    title: '乡村2',
+    rank: 2,
+  },
+  {
+    image: 'https://mncdn.wenlvti.net/app_static/minnan/images/test/ImageTest3.png',
+    title: '乡村3',
+    rank: 3,
+  },
+]
+</script>

src/pages/home/index.vue

@@ -1,150 +1,53 @@
 <template>
   <FlexCol :gap="20" :padding="30" :innerStyle="{
-    marginTop: '-100px',
-    backgroundImage: 'url(https://mn.wenlvti.net/app_static/xiangyuan/images/home/HomeBackground.jpg)',
+    marginTop: '-130px',
+    backgroundImage: 'url(/static/images/home/BannerHome.png)',
     backgroundSize: '100% auto',
     backgroundRepeat: 'no-repeat',
     backgroundPosition: 'top center',
-    backgroundColor: '#7bda82',
+    backgroundColor: themeContext.resolveThemeColor('background.primary'),
   }">
-    <Height height="100px" />
-    <FlexCol :gap="4" align="center">
-      <Image src="https://mncdn.wenlvti.net/app_static/xiangyuan/images/home/ButtonTitle.png" width="430rpx" mode="widthFix" />
-      <Image src="https://mn.wenlvti.net/app_static/xiangyuan/images/home/ButtonSubTitle.png" width="290rpx" mode="widthFix" />
-    </FlexCol>
-    <Box icon="https://mncdn.wenlvti.net/app_static/xiangyuan/images/home/icon-pin-distance.png" :padding="false">
-      <LightMap
-        @getedCurrentLonlat="getedCurrentLonlat"
+    <Height height="200px" />
+    <FlexCol :gap="20" align="center">
+      <SearchBar v-model="searchKeywords" placeholder="搜索" :innerStyle="{
+        backgroundColor: 'white',
+        borderRadius: '20rpx',
+        borderWidth: '1px',
+        borderStyle: 'solid',
+        borderColor: themeContext.resolveThemeColor('primary'),
+        width: '650rpx',
+      }" />
+      <Image 
+        src="/static/images/home/BannerIndex.png" 
+        width="700rpx" 
+        mode="widthFix" 
+        :innerStyle="{
+          borderRadius: '20rpx',
+          clipPath: 'ellipse(100% 90% at 50% 0%)'
+        }"
       />
-      <FlexRow justify="space-between" :padding="[10, 16]">
-        <ImageButton src="https://mn.wenlvti.net/app_static/xiangyuan/images/home/ButtonMainAction.png" :width="215" mode="widthFix" @click="goCommonContentList({ modelId: 18, mainBodyColumnId: 361, autoJumpFirst: true })" />
-        <ImageButton src="https://mn.wenlvti.net/app_static/xiangyuan/images/home/ButtonMainLight.png" :width="215" mode="widthFix" @click="navTo('/pages/home/light/submit-map', { latitude: currentLonlat.latitude, longitude: currentLonlat.longitude })" />
-        <ImageButton src="https://mn.wenlvti.net/app_static/xiangyuan/images/home/ButtonMainSupport.png" :width="215" mode="widthFix" @click="goCommonContentList({ modelId: 18, mainBodyColumnId: 362, autoJumpFirst: true })" />
-      </FlexRow>
-    </Box>
+    </FlexCol>
+
+    <VillageMiniMap 
+      @getedCurrentLonlat="getedCurrentLonlat" 
+    />
+    <FlexRow justify="space-between" :padding="[10, 16]">
+      <Button icon="/static/images/home/IconSwitch.png" :radius="40" :padding="[10, 30]" :iconProps="{ innerStyle: { marginRight: '10rpx' }}">切换城市</Button>
+      <Button icon="/static/images/home/IconSwitch.png" :radius="40" :padding="[10, 30]" :iconProps="{ innerStyle: { marginRight: '10rpx' }}">我的关注</Button>
+      <Button icon="/static/images/home/IconLight.png" :radius="40" :padding="[10, 30]" :iconProps="{ innerStyle: { marginRight: '10rpx' }}">点亮村社</Button>
+    </FlexRow>
+
+    <HomeTitle title="乡村排名" showMore />
+    <VillageRankList />
+
+    <HomeTitle title="志愿者排名" showMore :lightCount="3" />
+    
+
+
+    <HomeTitle title="精选记忆" showMore />
+
 
-    <Box title="资讯动态" icon="https://mncdn.wenlvti.net/app_static/xiangyuan/images/home/icon-compass.png" showMore @moreClicked="goCommonContentList({
-      title: '资讯动态',
-      modelId: 18,
-      mainBodyColumnId: 363,
-    })">  
-      <SimplePageContentLoader :loader="newsLoader">
-        <FlexCol :gap="25">
-          <Touchable 
-            v-for="(item, i) in newsLoader.content.value"
-            :key="i"
-            justify="space-between"
-            align="center"
-            direction="row"
-            @click="goCommonContentDetail(item.id)"
-          > 
-            <FlexCol flex="1" :gap="20">
-              <Text :text="item.title" fontConfig="h5" />
-              <Text :text="item.desc" fontConfig="subText" />
-            </FlexCol>
-            <Width :width="25" />
-            <Image 
-              :src="item.image" 
-              :failedImage="AppCofig.defaultImage"
-              :width="170" 
-              :height="120" 
-              :radius="15" 
-              mode="aspectFill"
-            />
-          </Touchable>
-        </FlexCol>
-      </SimplePageContentLoader>
-    </Box>
 
-    <Box title="周边文化遗产" icon="https://mncdn.wenlvti.net/app_static/xiangyuan/images/home/icon-compass.png" @moreClicked="goCommonContentList({ 
-      modelId: 1, 
-      latitude: currentLonlat.latitude,
-      longitude: currentLonlat.longitude,
-      isNearby: true,
-    })">  
-      <SimplePageContentLoader :loader="recommendedNearbySitesLoader">
-        <FlexRow wrap :gap="25">
-          <Touchable 
-            v-for="(item, i) in recommendedNearbySitesLoader.content.value"
-            :key="i"
-            direction="column"
-            backgroundColor="white"
-            :innerStyle="{
-              flexBasis: '43%',
-            }"
-            :padding="13"
-            :radius="15"
-          > 
-          <!-- @click="goCommonContentDetail(item.id)" -->
-            <Text :text="item.title" fontConfig="h5" />
-            <Text :text="`距离您约 ${item.distance}`" fontConfig="subText" />
-            <!-- <FlexCol flex="1" :gap="20">
-            </FlexCol>
-            <Width :width="25" />
-            <Image 
-              :src="item.image" 
-              :failedImage="AppCofig.defaultImage"
-              :width="170" 
-              :height="120" 
-              :radius="15" 
-              mode="aspectFill"
-            /> -->
-          </Touchable>
-        </FlexRow>
-      </SimplePageContentLoader>
-    </Box>
-    <!-- <Box title="线上史馆展示" icon="https://mncdn.wenlvti.net/app_static/xiangyuan/images/home/icon-ancient-gate.png">
-      <SimplePageContentLoader :loader="recommendLoader">
-        <FlexRow justify="space-between" align="center" wrap :gap="25">
-          <Touchable 
-            v-for="(item, i) in recommendLoader.content.value"
-            :key="i"
-            :gap="20"
-            flex="0 0 48%"
-            align="center"
-            direction="column"
-            @click="goVillageDetails(item)"
-          > 
-            <Image 
-              :src="item.thumbnail || item.image" 
-              width="100%" 
-              height="200rpx" 
-              :radius="15" 
-              mode="aspectFill" 
-            />
-            <Text :text="item.title" />
-          </Touchable>
-        </FlexRow>
-      </SimplePageContentLoader>
-    </Box> -->
-    <Box title="精彩推荐" icon="https://mncdn.wenlvti.net/app_static/xiangyuan/images/home/icon-compass.png" showMore @moreClicked="$emit('goDiscover')">  
-      <SimplePageContentLoader :loader="discoverLoader">
-        <FlexCol :gap="25">
-          <Touchable 
-            v-for="(item, i) in discoverLoader.content.value"
-            :key="i"
-            justify="space-between"
-            align="center"
-            direction="row"
-            @click="goDiscoverDetails(item)"
-          > 
-            <FlexCol flex="1" :gap="20">
-              <Text :text="item.title" fontConfig="h5" />
-              <Text :text="item.desc" fontConfig="subText" />
-            </FlexCol>
-            <Width :width="25" />
-            <Image 
-              :src="item.image" 
-              :failedImage="AppCofig.defaultImage"
-              :width="170" 
-              :height="120" 
-              :radius="15" 
-              mode="aspectFill"
-            />
-          </Touchable>
-        </FlexCol>
-      </SimplePageContentLoader>
-    </Box>
     <Loadmore status="nomore" />
     <Height :height="150" />
   </FlexCol>
@@ -152,6 +55,8 @@
 
 <script setup lang="ts">
 import { navTo } from '@/components/utils/PageAction';
+import { goCommonContentDetail, goCommonContentList } from '../article/common/CommonContent';
+import { useTheme } from '@/components/theme/ThemeDefine';
 import { useSimpleDataLoader } from '@/common/composeabe/SimpleDataLoader';
 import { ref } from 'vue';
 import VillageApi from '@/api/inhert/VillageApi';
@@ -167,18 +72,18 @@ import FlexCol from '@/components/layout/FlexCol.vue';
 import FlexRow from '@/components/layout/FlexRow.vue';
 import Height from '@/components/layout/space/Height.vue';
 import Width from '@/components/layout/space/Width.vue';
-import ProvideVar from '@/components/theme/ProvideVar.vue';
-import Grid from '@/components/layout/grid/Grid.vue';
-import GridItem from '@/components/layout/grid/GridItem.vue';
-import LightMap from '../components/LightMap.vue';
-import ImageButton from '@/components/basic/ImageButton.vue';
 import CommonContent, { GetContentListParams } from '@/api/CommonContent';
 import UnmoveableContent from '@/api/inheritor/UnmoveableContent';
-import { goCommonContentDetail, goCommonContentList } from '../article/common/CommonContent';
-import { toast } from '@/components/utils/DialogAction';
+import SearchBar from '@/components/form/SearchBar.vue';
+import VillageMiniMap from './components/VillageMiniMap.vue';
+import Button from '@/components/basic/Button.vue';
+import HomeTitle from '@/common/components/parts/HomeTitle.vue';
+import VillageRankList from './components/VillageRankList.vue';
+
+const themeContext = useTheme();
 
 const currentLonlat = ref<{ longitude: number, latitude: number }>({ longitude: 0, latitude: 0 });
-const isLightMode = ref(false);
+const searchKeywords = ref('');
 
 function getedCurrentLonlat(lonlat: { longitude: number, latitude: number }) {
   currentLonlat.value = lonlat;

src/pages/index.vue

@@ -6,7 +6,7 @@
         :title="title"
         :titleScroll="false"
         backgroundColor="transparent"
-        textColor="white"
+        textColor="whweixinite"
         align="left"
       />
       <HomeIndex v-if="tabIndex === 0" @goDiscover="tabIndex = 1" />
@@ -18,12 +18,15 @@
         v-model:selectedTabIndex="tabIndex"
         fixed
         xbarSpace
+        :innerStyle="{
+          backgroundColor: '#ffead8',
+        }"
       >
-        <TabBarItem icon="https://mncdn.wenlvti.net/app_static/xiangyuan/images/tabs/home.png" activeIcon="https://mncdn.wenlvti.net/app_static/xiangyuan/images/tabs/home-active.png" text="首页" />
-        <TabBarItem icon="https://mncdn.wenlvti.net/app_static/xiangyuan/images/tabs/discover.png" activeIcon="https://mncdn.wenlvti.net/app_static/xiangyuan/images/tabs/discover-active.png" text="发现" />
-        <TabBarItem icon="https://mncdn.wenlvti.net/app_static/xiangyuan/images/tabs/dig.png" hump :humpHeight="[ 10, 10 ]" :humpSpace="[20,20]" :iconSize="140" />
-        <TabBarItem icon="https://mncdn.wenlvti.net/app_static/xiangyuan/images/tabs/store.png" activeIcon="https://mncdn.wenlvti.net/app_static/xiangyuan/images/tabs/store-active.png" text="知识库" />
-        <TabBarItem icon="https://mncdn.wenlvti.net/app_static/xiangyuan/images/tabs/user.png" activeIcon="https://mncdn.wenlvti.net/app_static/xiangyuan/images/tabs/user-active.png" text="我的" />
+        <TabBarItem icon="/static/images/tabs/TabIconHome.png" activeIcon="/static/images/tabs/TabIconHomeActive.png" text="首页" :iconSize="70" />
+        <TabBarItem icon="/static/images/tabs/TabIconVillage.png" activeIcon="/static/images/tabs/TabIconVillageActive.png" text="乡源" :iconSize="70" />
+        <TabBarItem icon="/static/images/tabs/TabIconDig.png" activeIcon="/static/images/tabs/TabIconDigActive.png" text="挖掘" :iconSize="70" />
+        <TabBarItem icon="/static/images/tabs/TabIconDiscover.png" activeIcon="/static/images/tabs/TabIconDiscoverActive.png" text="发现" :iconSize="70" />
+        <TabBarItem icon="/static/images/tabs/TabIconMine.png" activeIcon="/static/images/tabs/TabIconMineActive.png" text="我的" :iconSize="70" />
       </TabBar>
     </CommonRoot>
 	</view>
@@ -74,14 +77,4 @@ onShareTimeline(() => {
     imageUrl: 'https://mn.wenlvti.net/app_static/xiangyuan/images/index-post.jpg',
   }
 })
-</script>
-
-<style scoped>
-.index {
-  background-position: top left;
-  background-size: 100% auto;
-  background-repeat: no-repeat;
-  background-image: url('https://mncdn.wenlvti.net/app_static/xiangyuan/images/BackgroundMask.jpg');
-  overflow-x: hidden;
-}
-</style>
+</script>