Feat：千县图文攻略

api/qianxian.js

@@ -60,6 +60,11 @@ export function getCountyFamousCityGuideContent(param) {
     return request.get('/countyFamous/guide/content', param, { login: true })
 }
 
+// 获取千县名品县城图文攻略详情
+export function getCountyFamousGraphicGuideContent(param) {
+    return request.get('/countyFamous/guide/graphic/content', param, { login: true })
+}
+
 // 获取千县名品县城重点产业列表
 export function getCountyFamousIndustry(param) {
     return request.get('/countyFamous/industry', param, { login: true })

pages.json

@@ -532,6 +532,13 @@
             "navigationStyle": "custom"
           }
         },
+        {
+          "path": "views/famousQianxianGraphicGuide",
+          "style": {
+            "navigationBarTitleText": "攻略详情",
+            "navigationStyle": "custom"
+          }
+        },
         {
           "path": "views/famousQianxianVillageShop",
           "style": {

pkg_product/views/famousQianxianGraphicGuide.vue

@@ -0,0 +1,361 @@
+<template>
+  <view class="graphic-guide-page">
+    <hx-navbar
+      :fixed="true"
+      :background-color="[0,[0,0,0,0],[0,0,0,0]]"
+      statusBarFontColor="#ffffff"
+      barPlaceholder="hidden"
+      transparent="auto"
+      color="#ffffff"
+    />
+    <view v-if="isLoad">
+      <swiper
+        v-if="bannerImages.length"
+        class="banner-swiper"
+        circular
+        autoplay
+        :interval="5000"
+      >
+        <swiper-item
+          v-for="(item, index) in bannerImages"
+          :key="index"
+        >
+          <image
+            :src="item"
+            class="banner-image"
+            mode="aspectFill"
+          />
+        </swiper-item>
+      </swiper>
+      <image
+        v-else-if="detail.image"
+        :src="detail.image"
+        class="banner-fallback"
+        mode="aspectFill"
+      />
+      <view class="article-card">
+        <view class="article-title">{{ detail.title || '' }}</view>
+        <view v-if="detail.intro" class="article-intro">
+          {{ detail.intro }}
+        </view>
+      </view>
+      <view
+        v-for="(item, index) in detailList"
+        :key="index"
+        class="detail-card"
+      >
+        <view v-if="item.placeName" class="section-title">
+          {{ item.placeName }}
+        </view>
+        <view v-if="item.content" class="rich-content">
+          <u-parse :content="item.content" />
+        </view>
+        <view
+          v-if="item.hotelId"
+          class="shop-card"
+          @click="goShop(item)"
+        >
+          <image
+            :src="item.hotelLogo || detail.image"
+            class="shop-logo"
+            mode="aspectFill"
+          />
+          <view class="shop-main">
+            <view class="shop-name">{{ item.hotelName || '关联店铺' }}</view>
+            <view v-if="getServiceTime(item)" class="shop-time-pill">
+              经营时间：{{ getServiceTime(item) }}
+            </view>
+            <view v-if="item.hotelAddress" class="shop-address">
+              {{ item.hotelAddress }}
+            </view>
+          </view>
+          <view class="shop-btn">点击进入</view>
+        </view>
+        <view v-if="item.address" class="section-address">
+          <text>定位：{{ item.address }}</text>
+        </view>
+        <view v-if="item.images && item.images.length" class="image-list">
+          <image
+            v-for="(img, imgIndex) in item.images"
+            :key="imgIndex"
+            :src="img"
+            class="detail-image"
+            mode="widthFix"
+            @click="previewImage(item.images, imgIndex)"
+          />
+        </view>
+      </view>
+      <view v-if="!detailList.length" class="empty-text">暂无图文内容</view>
+    </view>
+    <goo-skeleton v-else />
+  </view>
+</template>
+
+<script>
+import { getCountyFamousGraphicGuideContent } from '@/api/qianxian'
+
+export default {
+  name: 'FamousQianxianGraphicGuide',
+  data() {
+    return {
+      webUrl: this.$VUE_APP_RESOURCES_URL,
+      isLoad: false,
+      detail: {}
+    }
+  },
+  computed: {
+    bannerImages() {
+      return this.detail.bannerImages || []
+    },
+    detailList() {
+      return this.detail.graphicDetails || []
+    }
+  },
+  onLoad(options) {
+    const id = options.id
+    if (!id) {
+      uni.showToast({
+        title: '缺少攻略ID',
+        icon: 'none'
+      })
+      return
+    }
+    this.getDetailReq(id)
+  },
+  methods: {
+    getDetailReq(id) {
+      getCountyFamousGraphicGuideContent({
+        guideId: id
+      }).then(res => {
+        const { success, data } = res
+        if (success) {
+          this.detail = data || {}
+          uni.setNavigationBarTitle({
+            title: this.detail.title || '攻略详情'
+          })
+        }
+      }).finally(() => {
+        this.isLoad = true
+      })
+    },
+    formatDate(time) {
+      if (!time) return ''
+      return time.replace(/-/g, '.').slice(0, 10)
+    },
+    previewImage(images = [], index = 0) {
+      if (!images.length) return
+      uni.previewImage({
+        urls: images,
+        current: index
+      })
+    },
+    getServiceTime(item) {
+      const start = item.serviceTime || ''
+      const end = item.serviceEndTime || ''
+      if (start && end) return `${start}-${end}`
+      return start || end || ''
+    },
+    goShop(item) {
+      if (!item || !item.hotelId) return
+      this.$yrouter.push({
+        path: '/pagesInn/inn/innHome',
+        query: {
+          id: item.hotelId
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.graphic-guide-page {
+  min-height: 100vh;
+  background: #f6f6f6;
+}
+
+.banner-swiper,
+.banner-fallback {
+  width: 100%;
+  height: 500rpx;
+}
+
+.banner-image {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.article-card {
+  padding: 28rpx 24rpx 32rpx;
+  position: relative;
+  z-index: 2;
+  border-radius: 24rpx;
+  background: #fff;
+}
+
+.article-title {
+  font-size: 40rpx;
+  line-height: 56rpx;
+  color: #333;
+  font-weight: bold;
+}
+
+.article-meta {
+  margin-top: 12rpx;
+  font-size: 24rpx;
+  color: #333;
+}
+
+.article-intro {
+  margin-top: 20rpx;
+  padding: 20rpx 0rpx;
+  border-radius: 16rpx;
+  font-size: 28rpx;
+  line-height: 44rpx;
+  color: #333;
+}
+
+.detail-card {
+  padding: 28rpx 24rpx;
+  border-radius: 24rpx;
+  background: #fff;
+}
+
+.section-title {
+  font-size: 36rpx;
+  line-height: 50rpx;
+  color: #333;
+  font-weight: bold;
+}
+
+.section-address {
+  display: flex;
+  align-items: center;
+  margin-top: 16rpx;
+  font-size: 26rpx;
+  line-height: 40rpx;
+  color: #333;
+}
+
+.address-icon {
+  width: 28rpx;
+  height: 28rpx;
+  margin-right: 8rpx;
+  flex-shrink: 0;
+}
+
+.image-list {
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: 24rpx;
+}
+
+.detail-image {
+  width: calc(50% - 8rpx);
+  height: 220rpx;
+  margin-right: 16rpx;
+  margin-bottom: 16rpx;
+  border-radius: 16rpx;
+  display: block;
+}
+
+.detail-image:nth-child(2n) {
+  margin-right: 0;
+}
+
+.rich-content {
+  margin-top: 12rpx;
+  font-size: 28rpx;
+  line-height: 46rpx;
+  color: #333;
+  word-break: break-word;
+}
+
+.shop-card {
+  display: flex;
+  align-items: center;
+  margin-top: 12rpx;
+  padding: 16rpx;
+  border-radius: 16rpx;
+  background: #f4f4f4;
+}
+
+.shop-logo {
+  width: 140rpx;
+  height: 140rpx;
+  border-radius: 12rpx;
+  flex-shrink: 0;
+}
+
+.shop-main {
+  flex: 1;
+  min-width: 0;
+  margin-left: 20rpx;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.shop-head {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.shop-name {
+  font-size: 32rpx;
+  color: #333;
+  font-weight: bold;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.shop-time-pill {
+  display: inline-flex;
+  align-items: center;
+  margin-top: 10rpx;
+  padding: 4rpx 16rpx;
+  border: 2rpx solid #c52733;
+  border-radius: 100rpx;
+  color: #c52733;
+  font-size: 22rpx;
+  width: fit-content;
+  background: transparent;
+}
+
+.shop-time-label {
+  margin-right: 8rpx;
+  font-weight: bold;
+}
+
+.shop-address {
+  margin-top: 12rpx;
+  font-size: 24rpx;
+  line-height: 34rpx;
+  color: #666;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+}
+
+.shop-btn {
+  margin-left: 20rpx;
+  padding: 12rpx 24rpx;
+  border-radius: 100rpx;
+  background: #c52733;
+  color: #fff;
+  font-size: 26rpx;
+  font-weight: 500;
+  flex-shrink: 0;
+}
+
+.empty-text {
+  padding: 120rpx 0;
+  text-align: center;
+  font-size: 28rpx;
+  color: #999;
+}
+</style>

pkg_product/views/famousQianxianShop.vue

@@ -1820,7 +1820,13 @@ export default {
       this.hotelItemClick({ id: linkHotelId })
     },
     guideItemClickHandle(item) {
-      // 如果没有开启专题页，则不进入
+      if (!item || !item.id) return
+      const guideType = item.guideType || 'topic'
+      if (guideType === 'graphic') {
+        uni.navigateTo({ url: `/pkg_product/views/famousQianxianGraphicGuide?id=${item.id}` })
+        return
+      }
+      // topic 类型保持原逻辑
       if (!item.isContentPage) return
       uni.navigateTo({ url: `/pkg_product/views/famousQianxianTheme?id=${item.id}` })
     },