1

src/api/traval/RouteApi.ts

@@ -2,7 +2,6 @@ import { UpdateServerRequestModule } from '@/api/RequestModules';
 import { DataModel } from '@imengyu/js-request-transform';
 
 export class RouteApi extends UpdateServerRequestModule<DataModel> {
-
   constructor() {
     super();
   }

src/api/traval/TravalContent.ts

@@ -36,6 +36,11 @@ export class TravalContentApi extends CommonContentApi {
     res.scenicSpotsList = (res.scenicSpotsList as any[]).map(p => transformDataModel<TravalListItem>(TravalListItem, p));
     return res;
   }
+  async getTravalRouteList() {
+    const res = await this.getContentDetail(8768, GetContentDetailItem, 17, { 'scenic_spots': '1' });
+    return res.associationMeList.concat([res as unknown as GetContentListItem]) as GetContentListItem[];
+  }
+
 }
 
 export default new TravalContentApi();

src/components/display/block/ImageBlock2.vue

@@ -12,7 +12,6 @@
       :height="imageHeight"
       :radius="imageRadius"
       width="100%"
-      round
       mode="aspectFill"
     />
     <slot name="desc">

src/components/display/block/ImageBlock3.vue

@@ -11,15 +11,17 @@
       :width="imageWidth"
       :height="imageHeight"
       :radius="imageRadius"
-      round
       mode="aspectFill"
     />
     <FlexView direction="column">
       <slot name="desc">
         <IconTextBlock
           :title="title"
+          :titleProps="titleProps"
           :desc="desc"
+          :descProps="descProps"
           :extra="extra"
+          :extraProps="extraProps"
           :extraMpSlotState="Boolean($slots.extra)"
         >
           <template v-if="$slots.extra" #extra>
@@ -49,6 +51,7 @@ import FlexView, { type FlexProps } from '../../layout/FlexView.vue';
 import Image from '../../basic/Image.vue';
 import Touchable from '@/components/feedback/Touchable.vue';
 import IconTextBlock from './IconTextBlock.vue';
+import type { TextProps } from '@/components/basic/Text.vue';
 
 export interface ImageBlock3Props extends Partial<FlexProps> {
   /**
@@ -79,6 +82,18 @@ export interface ImageBlock3Props extends Partial<FlexProps> {
    * 图片下方显示额外信息。
    */
   extra?: string | number;
+  /**
+   * 图片下方显示标题的文字属性。
+   */
+  titleProps?: TextProps;
+  /**
+   * 图片下方显示描述的文字属性。
+   */
+  descProps?: TextProps;
+  /**
+   * 图片下方显示额外信息的文字属性。
+   */
+  extraProps?: TextProps;
 }
 
 const theme = useTheme();

src/components/nav/NavBar.vue

@@ -23,6 +23,7 @@
         />
       </slot>
       <IconButton v-else icon="space" shape="square-full" />
+      <slot name="left-custom" />
     </view>
     <slot name="center">
       <HorizontalScrollText

src/pages.json

@@ -55,6 +55,14 @@
       }
     },
     {
+      "path": "pages/travel/route/list",
+      "style": {
+        "navigationBarTitleText": "非遗精品路线",
+        "enablePullDownRefresh": true,
+        "navigationStyle": "custom"
+      }
+    },
+    {
       "path": "pages/travel/route/travel-route",
       "style": {
         "navigationBarTitleText": "路线地图",

src/pages/travel/route/list.vue

@@ -0,0 +1,145 @@
+<template>
+  <FlexCol innerClass="nana-travel-route-list">
+    <StatusBarSpace backgroundColor="transparent" />
+    <NavBar
+      title=""
+      leftButton="back"
+      backgroundColor="transparent"
+    >
+      <template #center>
+        <Image
+          src="https://mncdn.wenlvti.net/app_static/minnan/images/travel/RouteTitle.png"
+          mode="heightFix"
+          :height="45"
+        />
+      </template>
+    </NavBar>
+    <SimplePageContentLoader :loader="listLoader">
+      <FlexCol backgroundColor="#fdfefe" :gap="30" :radius="35" :padding="40" :margin="[300,0,0,0]">
+        <FlexRow>
+          <SimpleDropDownPicker v-model="selectedRegion" :columns="regionData.content.value" />
+          <SimpleDropDownPicker v-model="selectedType" :columns="typeData.content.value" />
+          <SearchBar v-model="searchValue" placeholder="搜索路线" @search="doSearch" @cancel="doSearch" />
+        </FlexRow>
+        <FlexCol 
+          v-for="(item,index) in listLoader.content.value"
+          backgroundColor="white"
+          :key="item.id"
+          :radius="20"
+          :padding="[25,30]"
+          :gap="10"
+          shadow="default"
+        >
+          <FlexRow :gap="20">
+            <FlexCol position="relative">
+              <Tag 
+                :text="`路线${(index + 1)}`"
+                :innerStyle="{ position: 'absolute', top: 0, left: 0, zIndex: 2 }"
+                type="primary" 
+                size="small"
+              />
+              <Image
+                :src="item.image"
+                :width="200"
+                :height="145"
+                :radius="10"
+              />
+            </FlexCol>
+            <FlexCol :gap="10">
+              <Text fontConfig="subTitle" :text="item.title" />
+              <Text fontConfig="subSecondText" :text="item.desc || item.title" />
+            </FlexCol>
+          </FlexRow>
+          <Divider color="border.light" />
+          <FlexRow justify="space-between">
+            <Text fontConfig="subSecondText" :text="`热度：${item.views}`" />
+            <Button size="small" type="primary" shape="round" :radius="40" text="Let's Go" @click="handleGo(item)" />
+          </FlexRow>
+        </FlexCol>
+
+        <Empty
+          v-if="listLoader.content.value?.length == 0"
+          :description="listLoader.content.value?.length == 0 ? '暂无数据' : ''"
+        />
+      </FlexCol>
+    </SimplePageContentLoader>
+  </FlexCol>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref, watch } from 'vue';
+import { navTo } from '@/components/utils/PageAction';
+import { useSimplePageContentLoader } from '@/common/composeabe/SimplePageContentLoader';
+import type { GetContentListItem } from '@/api/CommonContent';
+import SimplePageContentLoader from '@/common/components/SimplePageContentLoader.vue';
+import FlexCol from '@/components/layout/FlexCol.vue';
+import TravalContent from '@/api/traval/TravalContent';
+import NavBar from '@/components/nav/NavBar.vue';
+import StatusBarSpace from '@/components/layout/space/StatusBarSpace.vue';
+import Image from '@/components/basic/Image.vue';
+import Divider from '@/components/display/Divider.vue';
+import FlexRow from '@/components/layout/FlexRow.vue';
+import Text from '@/components/basic/Text.vue';
+import Button from '@/components/basic/Button.vue';
+import Tag from '@/components/display/Tag.vue';
+import SearchBar from '@/components/form/SearchBar.vue';
+import SimpleDropDownPicker from '@/common/components/SimpleDropDownPicker.vue';
+import { useSimpleDataLoader } from '@/common/composeabe/SimpleDataLoader';
+import CommonContent from '@/api/CommonContent';
+import Empty from '@/components/feedback/Empty.vue';
+
+const listLoader = useSimplePageContentLoader(async () => {
+  const res = await TravalContent.getTravalRouteList();
+  return res.filter(p => (
+    !selectedRegion.value || p.region == selectedRegion.value) 
+    && (!selectedType.value || p.type == selectedType.value) 
+    && (!searchValue.value || p.title.includes(searchValue.value))
+  );
+});
+
+const selectedRegion = ref(0);
+const selectedType = ref(0);
+const searchValue = ref('');
+
+const regionData = useSimpleDataLoader(async () => {
+  const res = await CommonContent.getCategoryList(1);
+  return res.filter(p => p.pid == 5).map(p => ({
+    id: p.id,
+    name: p.title,
+  }));
+});
+const typeData = useSimpleDataLoader(async () => {
+  const res = await CommonContent.getCategoryList(1);
+  return res.map(p => ({
+    id: p.id,
+    name: p.title,
+  }));
+});
+
+watch(selectedRegion, () => {
+  listLoader.loadData(undefined, true);
+});
+watch(selectedType, () => {
+  listLoader.loadData(undefined, true);
+});
+
+const doSearch = () => {
+  listLoader.loadData(undefined, true);
+};
+const handleGo = (item: GetContentListItem) => {
+  navTo('./travel-route', { id: item.id });
+};
+
+onMounted(() => {
+  listLoader.loadData(undefined, true);
+});
+</script>
+
+<style lang="scss">
+.nana-travel-route-list {
+  background-image: url('https://mncdn.wenlvti.net/app_static/minnan/images/travel/RouteHeader.jpg');
+  background-size: 100% auto;
+  background-position: 0 60rpx;
+  background-repeat: no-repeat;
+}
+</style>

src/pages/user/debug/DebugButton.vue

@@ -46,7 +46,7 @@ function showBuildInfo() {
   }).then((res) => {
     if (res == 'testRoutePage') {
       uni.navigateTo({
-        url: '/pages/travel/route/travel-route?id=8768',
+        url: '/pages/travel/route/travel-route?id=8925',
       });
     }
     if (res == 'testBug') {