📦 村使馆页面

src/pages/inhert/village/details.vue

@@ -1,92 +1,93 @@
 <template>
   <SimplePageContentLoader :loader="contentLoader">
-    <view v-if="contentLoader.loadStatus.value == 'finished'" style="padding-bottom: 120rpx;">
-      <view class="top-banner">
-        <view class="banner">
-          <swiper class="swiper" circular :indicator-dots="false" :autoplay="true" :interval="2000" :duration="1000">
-            <swiper-item v-for="(item, k) in data.images" :key="k">
-              <view class="item" @click="onPreviewImage(k)">
-                <image :src="item" mode="aspectFill"></image>
-              </view>
-            </swiper-item>
-          </swiper>
-        </view>
-        <view class="mask">
-          <view class="title">
-            <text>{{ data.villageName }}</text>
-          </view>
-        </view>
-      </view>
-      <view class="main">
-        <view class="intro-block">
-          <view class="title">
-            <view class="line"></view>
-            <text>村史馆起源</text>
-          </view>
-          <view class="desc">
+    <view 
+      v-if="contentLoader.loadStatus.value == 'finished'"
+      class="d-flex flex-column bg-base"
+    >
+      <swiper 
+        circular
+        class="height-500"
+        :indicator-dots="false"
+        :autoplay="true"
+        :interval="2000"
+        :duration="1000"
+      >
+        <swiper-item v-for="(item, k) in data.images" :key="k">
+          <image 
+            class="w-100 height-500 radius-l-top" 
+            :src="item" 
+            mode="aspectFill"
+            @click="onPreviewImage(k)"
+          />
+        </swiper-item>
+      </swiper>
+
+      <view class="d-flex flex-col p-3 radius-l-top p-3 bg-light">
+
+        <view class="d-flex flex-col">
+          <HomeTitle :title="data.villageName" />
+          <view class="mt-3 color-text-content">
             <u-parse :content="data.overview" :tagStyle="commonParserStyle"></u-parse>
             <text v-if="!data.overview" >无内容，请添加内容! {{ data.overview }}</text>
           </view>
         </view>
-        <view class="entrance">
+
+        <view class="d-flex flex-row flex-wrap mt-3">
           <view 
             v-for="(tag, key) in tagsData"
             :key="key"
-            class="item"
+            class="w-20 d-flex flex-column align-center"
             @click="goList(tag)"
           >
-            <image :src="tag.image" mode="aspectFill"></image>
-            <view class="title">{{ tag.title }}</view>
+            <image :src="tag.image" class="width-100 mt-2" mode="widthFix"></image>
+            <view class="text-align-center color-text-content size-ss">{{ tag.title }}</view>
           </view>
         </view>
-        <view class="map-block">
-          <view class="map">
-            <map id="map"
-              style="width: 686rpx; height: 358rpx;"
-              :latitude="center[1]"
-              :longitude="center[0]"
-              :markers="markers"
-              :scale="15"
-            />
-          </view>
-          <view class="nav">
-            <text class="iconfont icon-navigation"></text>
-            <text class="address">{{ data.address }}</text>
-            <view class="go" @click="goAddress">
-              <text>去这里</text>
-              <view class="right">
-                <text class="iconfont icon-arrow-right"></text>
-              </view>
+
+        <view class="d-flex flex-col mt-3">
+         <HomeTitle title="位置" />
+          <map id="map"
+            class="w-100 height-350 mt-3"
+            :latitude="center[1]"
+            :longitude="center[0]"
+            :markers="markers"
+            :scale="15"
+          />
+          <view class="d-flex flex-row justify-between bg-light radius-base p-2 mt-2">
+            <view>
+              <text class="iconfont icon-navigation"></text>
+              <text class="address">{{ data.address }}</text>
             </view>
-          </view>
-        </view>
-        <view class="category">
-          <view class="name">特色插画</view>
-          <view class="more">更多》</view>
-        </view>
-        <view class="banner painting">
-          <swiper class="swiper" circular :indicator-dots="false" :autoplay="true" :interval="2000" :duration="1000">
-            <swiper-item v-for="item in paintingList" :key="item.id">
-              <view class="item">
-                <image :src="item.image" mode="aspectFill"></image>
-              </view>
-            </swiper-item>
-          </swiper>
-        </view>
-        <view class="category">
-          <view class="name">乡村记忆</view>
-          <view class="more">更多》</view>
-        </view>
-        <view class="memories">
-          <view class="item" v-for="(item, i) in memories" :key="i">
-            <image mode="aspectFill" :src="item.image"></image>
-            <view class="info">
-              <view class="title">{{ item.name}}</view>
-              <view class="desc ellipsis-4">{{ item.desc }}</view>
+            <view class="d-flex flex-row align-center" @click="goAddress">
+              <text class="color-orange">去这里</text>
+              <text class="iconfont icon-arrow-right"></text>
             </view>
           </view>
         </view>
+
+        <template 
+          v-for="(tag, index) in tagsDataRecommend"
+          :key="index"
+        >
+          <HomeTitle :title="tag.title" showMore @clickMore="tag.goList()" />
+          <SimplePageContentLoader :loader="tag.loader" >
+            <view class="d-flex flex-col">
+              <Box2LineLargeImageUserShadow 
+                v-for="(item, i) in tag.loader.content.value"
+                :key="i"
+                :title="item.title"
+                :desc="item.desc"
+                :image="item.image"
+                :likes="item.likes"
+                :comment="item.comments"
+                @click="tag.goDetail(item.id)"
+              />
+            </view>
+          </SimplePageContentLoader>
+        </template>
+
       </view>
+
     </view>
   </SimplePageContentLoader>
 </template>
@@ -95,58 +96,37 @@
 import VillageApi from '@/api/inhert/VillageApi';
 import commonParserStyle from '@/common/style/commonParserStyle';
 import EmptyImage from '@/static/EmptyImage.png';
-import { ref } from 'vue';
+import uParse from '@/uni_modules/uview-plus/components/u-parse/u-parse.vue';
+import SimplePageContentLoader from '@/common/components/SimplePageContentLoader.vue';
+import HomeTitle from '@/pages/parts/HomeTitle.vue';
+import Box2LineLargeImageUserShadow from '@/pages/parts/Box2LineLargeImageUserShadow.vue';
+import { ref, toRefs, type Ref } from 'vue';
 import { useLoadQuerys } from '@/common/composeabe/LoadQuerys';
 import { useSwiperImagePreview } from '@/common/composeabe/SwiperImagePreview';
 import { navTo } from '@/common/utils/PageAction';
-import uParse from '@/uni_modules/uview-plus/components/u-parse/u-parse.vue';
 import { useSimpleDataLoader } from '@/common/composeabe/SimpleDataLoader';
-import SimplePageContentLoader from '@/common/components/SimplePageContentLoader.vue';
+import { useHomePageMiniCommonListGoMoreAndGoDetail, type IHomePageMiniCommonListGoMoreAndGoDetail } from '@/pages/article/common/CommonContent';
+
+interface TagDataItem {
+  image: string, 
+  title: string,
+  modelId?: number,
+  mainBodyColumnId?: number,
+}
+interface TagDataRecommendItem extends TagDataItem, IHomePageMiniCommonListGoMoreAndGoDetail {
+}
 
 const center = ref([118.15723, 24.48147]);
 const markers = ref<any>([]);
-const tagsData = ref<{ image: string, title: string }[]>([]);
-
-const paintingList = ref([
-  {
-    id: 1,
-    image: 'https://lucheng.app4lh.cn/static/tmp/static/tmp/banner_history.png',
-  },
-  {
-    id: 2,
-    image: 'https://lucheng.app4lh.cn/static/tmp/static/tmp/banner_history.png',
-  }
-]);
-const memories = ref([
-  {
-    id: 1,
-    image: 'https://lucheng.app4lh.cn/static/tmp/static/tmp/history_item.png',
-    name: '蒋氏家庙',
-    desc: '位于澳头西侧海边，修建于元至正十四(1354年)，抗战时期，前落回廊被炸毁，1986年重修。坐东朝西，前后两落大厝',
-  },
-  {
-    id: 2,
-    image: 'https://lucheng.app4lh.cn/static/tmp/static/tmp/history_item.png',
-    name: '向东厝',
-    desc: '位于澳头东下海仔8号，建于清光绪年间，坐西朝东、是澳头唯一面向东的古大厝，故名“向东厝”。此建筑为土木砖石结构的“两落双边护”闽南红砖民居。',
-  },
-  {
-    id: 3,
-    image: 'https://lucheng.app4lh.cn/static/tmp/static/tmp/history_item.png',
-    name: '苏氏家庙',
-    desc: '位于澳头西海边，距“蒋氏家庙”后墙0.4米，始建于清代道光年间，1950年重修。厅堂悬挂宋代丞相魏国公苏颂“学研天人”巨匾及额匾“兵部侍郎”，落款“清嘉靖十九年”。 ',
-  }
-]);
+const tagsData = ref<TagDataItem[]>([]);
+const tagsDataRecommend = ref<TagDataRecommendItem[]>([]) as unknown as Ref<TagDataRecommendItem[]>;
 
 const { querys } = useLoadQuerys({ 
   id: 0,
 }, () => contentLoader.loadData());
 
 const data = ref({
-  images: [
-    'https://lucheng.app4lh.cn/static/tmp/static/tmp/banner_history.png',
-    'https://lucheng.app4lh.cn/static/tmp/static/tmp/banner_history.png',
-  ],
+  images: [],
   overview: '',
   longitude: 0,
   latitude: 0,
@@ -154,15 +134,16 @@ const data = ref({
   villageName: '',
 })
 function goAddress() {
-  navTo('/pages/article/nav/navto', {
+  navTo('/pages/travel/nav/navto', {
     latitude: data.value.latitude,
     longitude: data.value.longitude,
   })
 }
 const { onPreviewImage } = useSwiperImagePreview(() => data.value.images || [])
 
-function goList(tag: any) {
-  navTo('/pages/article/list', {
+function goList(tag: TagDataItem) {
+  navTo('/pages/article/common/list', {
+    title: tag.title,
     modelId: tag.modelId,
     mainBodyColumnId: tag.mainBodyColumnId,
   });
@@ -186,8 +167,7 @@ const contentLoader = useSimpleDataLoader(async () => {
       latitude: center.value[1],
       longitude: center.value[0],
       width: 40,
-      height: 40,
-      iconPath: '/static/images/icon_marker.png',
+      height: 60,
     }
   ];
 
@@ -197,158 +177,27 @@ const contentLoader = useSimpleDataLoader(async () => {
     return {
       title: item.name,
       image: item.logo || EmptyImage,
-      modelId: item.modelId,
-      mainBodyColumnId: item.mainBodyColumnId,
+      modelId: item.modelId as number,
+      mainBodyColumnId: item.mainBodyColumnId as number,
     };
   });
 
-  console.log(data.value);
-}, false);
-
-</script>
-
-<style lang="scss" scoped>
-page {
-  background: #FFF3E1;
-}
-.banner {
-  .swiper {
-    height: 360rpx;
-  }
-}
-.entrance{
-  flex-wrap: wrap;
-  background:transparent;
-  justify-content: flex-start;
-  margin-top:52rpx;
-  margin-bottom: 44rpx;
-  margin-left:-15rpx;
-  margin-right:-15rpx;
-  padding: 0 20rpx;
-  .item{
-    width: 22%; // 从25%调整为23%
-    margin-bottom: 40rpx;
-    margin-left: 15rpx;
-    text-align: center;
-    image{
-      width: 95rpx;
-      height:95rpx;
-      display: block;
-      margin: 0 auto;
-    }
-    .title{
-      font-weight: 400;
-    }
-    &:nth-child(4n+1) { // 每行第一个
-      margin-left: 0;
-    }
-    &:nth-child(4n) { // 每行最后一个
-      margin-right: 0;
-    }
-  }
-}
-.memories{
-  .item{
-    background: #FFFFFF;
-    border-radius: 18rpx;
-    display: flex;
-    margin-bottom: 40rpx;
-    height:282rpx;
-    overflow: hidden;
-    image{
-      width: 262rpx;
-      height: 282rpx;
-      border-radius: 20rpx;
-      display: block;
-      flex-shrink: 0;
-    }
-    .info{
-      padding:32rpx 26rpx;
-      .title{
-        font-weight: 600;
-        font-size: 30rpx;
-        color: #312520;
-      }
-      .desc{
-        font-size: 28rpx;
-        color: #666666;
-        line-height: 48rpx;
-        text-align: justify;
-      }
-    }
-  }
-}
-.top-banner{
-  height: 780rpx;
-  .banner{
-    .swiper{
-      height: 780rpx!important;
-      image{
-        height: 100%;
-      }
-    }
-  }
-  .mask {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 750rpx;
-    height: 780rpx;
-    z-index: 99;
-    background: url('https://mn.wenlvti.net/uploads/20250313/684f313efcde825ecb5a4e5aecbf6ce4.png') center no-repeat;
-    background-size: cover;
-    .title{
-      position: absolute;
-      top: 23rpx;
-      left: 33rpx;
-      font-weight: 600;
-      font-size: 30rpx;
-      color: #FFFFFF;
-      background: #FF8719;
-      padding:10rpx 24rpx;
-      display: inline-block;
-      border-radius: 24rpx 24rpx 24rpx 0rpx;
+  tagsDataRecommend.value = tagsData.value.slice(0, 2).map((t) => {
+    return {
+      ...t,
+      ...(toRefs(useHomePageMiniCommonListGoMoreAndGoDetail({
+        title: t.title,
+        mainBodyColumnId: t.mainBodyColumnId,
+        modelId: t.modelId,
+        itemType: 'article-common',
+        detailsPage: '/pages/article/details',
+      })))
     }
-  }
+  }) as any;
 
+  tagsDataRecommend.value.forEach(e => {
+    e.loader.loadData();
+  });
+}, false);
 
-}
-.map-block{
-  background: #FFFFFF;
-  .nav{
-    background: #FFFFFF;
-    font-size: 24rpx;
-    color: #111111;
-    display: flex;
-    align-items: center;
-    padding:14rpx 20rpx;
-    text.icon-navigation{
-      display: inline-block;
-      margin-right: 12rpx;
-
-    }
-    .address{
-      flex:1;
-    }
-    .go{
-      color: #FF8719;
-      display: flex;
-      align-items: center;
-      .right{
-        width: 24rpx;
-        height: 24rpx;
-        border-radius: 50%;
-        background: #FF8719;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        margin-left: 8rpx;
-        text.iconfont{
-          font-size: 18rpx;
-          color:#fff;
-        }
-      }
-    }
-  }
-}
-</style>
+</script>

src/pages/inhert/village/list.vue

@@ -22,7 +22,7 @@
           titleColor="title-text"
           :image="item.image"
           :title="item.name"
-          @click="goDetails(item.id)"
+          @click="goDetails(item)"
         />
       </view>
     </view>
@@ -47,8 +47,7 @@ const listLoader = useSimplePageListLoader<{
   const res = await VillageApi.getVallageList();
   return res.map((item) => {
     return {
-      id: item.id,
-      image: item.image,
+      ...item,
       name: item.villageName,
     }
   })
@@ -56,8 +55,9 @@ const listLoader = useSimplePageListLoader<{
 function doSearch() {
   listLoader.loadData(undefined, true);
 }
-function goDetails(id: number) {
-  navTo('details', { id })
+function goDetails(item: any) {
+  uni.setStorageSync('VillageTemp', JSON.stringify(item));
+  navTo('details', { id: item.id })
 }
 
 onMounted(() => {