Feat：千县图文攻略
This commit is contained in:
linxi
@@ -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 })
|
||||
|
||||
@@ -532,6 +532,13 @@
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "views/famousQianxianGraphicGuide",
|
||||
"style": {
|
||||
"navigationBarTitleText": "攻略详情",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "views/famousQianxianVillageShop",
|
||||
"style": {
|
||||
|
||||
@@ -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>
|
||||
@@ -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}` })
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user