🎨 按要求修改首页

src/pages/article/common/CommonContent.ts

@@ -8,6 +8,12 @@ export interface IHomePageMiniCommonListGoMoreAndGoDetail {
   goList: () => void; 
 }
 
+export function goCommonContentDetail(id: number) {
+  navTo('/pages/article/details', {
+    id,
+  })
+}
+
 export function goCommonContentList(p: {
   title?: string,
   mainBodyId?: number,

src/pages/article/details.vue

@@ -43,6 +43,14 @@
               v-if="loader.content.value.content"
               :content="loader.content.value.content"
             />
+            <Parse
+              v-if="loader.content.value.intro"
+              :content="(loader.content.value.intro as string)"
+            />
+            <Parse
+              v-if="loader.content.value.value"
+              :content="(loader.content.value.value as string)"
+            />
             <Text v-if="emptyContent" fontConfig="subText">暂无简介</Text>
           </FlexCol>
           
@@ -63,7 +71,7 @@
           </FlexCol>
 
           <!-- 广告 -->
-          <ad />
+          <!-- <ad /> -->
         </FlexCol>
       </template>
     </SimplePageContentLoader>
@@ -106,7 +114,10 @@ const loader = useSimplePageContentLoader<
 
 const { onPreviewImage } = useSwiperImagePreview(() => loader.content.value?.images || [])
 
-const emptyContent = computed(() => (loader.content.value?.content || '').trim() === '')
+const emptyContent = computed(() => (loader.content.value?.content 
+  || loader.content.value?.intro as string 
+  || loader.content.value?.value as string 
+  || '').trim() === '')
 
 const recommendListLoader = useSimpleDataLoader(async () => {
   if (!querys.value.modelId)

src/pages/home/index.vue

@@ -16,10 +16,10 @@
       <LightMap
         @getedCurrentLonlat="getedCurrentLonlat"
       />
-      <FlexRow justify="space-between" :padding="10">
-        <ImageButton src="https://mn.wenlvti.net/app_static/xiangyuan/images/home/ButtonMainAction.png" :width="230" :height="155" @click="goCommonContentList({ modelId: 18, mainBodyColumnId: 361 })" />
-        <ImageButton src="https://mn.wenlvti.net/app_static/xiangyuan/images/home/ButtonMainLight.png" :innerStyle="{ marginLeft: '-10rpx' }" :width="230" :height="155" @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" :innerStyle="{ marginLeft: '-10rpx' }" :width="230" :height="155" @click="goCommonContentList({ modelId: 18, mainBodyColumnId: 362 })" />
+      <FlexRow justify="space-between" :padding="[10, 16]">
+        <ImageButton src="https://mn.wenlvti.net/app_static/xiangyuan/images/home/ButtonMainAction.png" :width="215" :height="155" @click="goCommonContentList({ modelId: 18, mainBodyColumnId: 361 })" />
+        <ImageButton src="https://mn.wenlvti.net/app_static/xiangyuan/images/home/ButtonMainLight.png" :width="215" :height="155" @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" :height="155" @click="goCommonContentList({ modelId: 18, mainBodyColumnId: 362 })" />
       </FlexRow>
     </Box>
 
@@ -37,11 +37,11 @@
             justify="space-between"
             align="center"
             direction="row"
-            @click="goDiscoverDetails(item)"
+            @click="goCommonContentDetail(item.id)"
           > 
             <FlexCol flex="1" :gap="20">
               <Text :text="item.title" fontConfig="h5" />
-              <Text :text="item.desc" fontConfig="subText" />
+              <Text :text="`距离您约 ${item.distance}`" fontConfig="subText" />
             </FlexCol>
             <Width :width="25" />
             <Image 
@@ -137,7 +137,7 @@ 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 { goCommonContentList } from '../article/common/CommonContent';
+import { goCommonContentDetail, goCommonContentList } from '../article/common/CommonContent';
 import { toast } from '@/components/utils/DialogAction';
 
 const currentLonlat = ref<{ longitude: number, latitude: number }>({ longitude: 0, latitude: 0 });
@@ -156,13 +156,39 @@ function goVillageDetails(e: any) {
   }, 200);
 }
 
+/** 根据两点经纬度计算直线距离（米），Haversine 公式 */
+function getDistanceMeters(
+  lon1: number, lat1: number,
+  lon2: number, lat2: number
+): number {
+  const R = 6371000; // 地球半径 米
+  const dLat = (lat2 - lat1) * Math.PI / 180;
+  const dLon = (lon2 - lon1) * Math.PI / 180;
+  const a =
+    Math.sin(dLat / 2) * Math.sin(dLat / 2) +
+    Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *
+    Math.sin(dLon / 2) * Math.sin(dLon / 2);
+  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+  return R * c;
+}
+function getDistance(longitude: number, latitude: number): string {
+  const meters = getDistanceMeters(longitude, latitude, currentLonlat.value.longitude, currentLonlat.value.latitude);
+  if (meters < 100) return '一百米内';
+  if (meters < 1000) return `${Math.round(meters / 100) * 100}米`;
+  return `${Math.round(meters / 1000)}km`;
+}
+
 const recommendedNearbySitesLoader = useSimpleDataLoader(async () => {
-  return (await CommonContent.getContentList(new GetContentListParams()
+  const res = (await CommonContent.getContentList(new GetContentListParams()
     .setModelId(UnmoveableContent.modelId)
     .setSelfValues({
       longitude: currentLonlat.value.longitude,
       latitude: currentLonlat.value.latitude,
     }), 1, 8, undefined, true)).list;
+
+  for (const item of res) 
+    item.distance = getDistance(item.longitude, item.latitude);
+  return res;
 });
 
 const villageLoader = useSimpleDataLoader(async () => {