375 lines
7.4 KiB
Vue
375 lines
7.4 KiB
Vue
<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>
|
||
<scroll-view
|
||
v-if="item.images && item.images.length"
|
||
class="image-scroll"
|
||
scroll-x
|
||
show-scrollbar="false"
|
||
>
|
||
<view class="image-list">
|
||
<image
|
||
v-for="(img, imgIndex) in item.images"
|
||
:key="imgIndex"
|
||
:src="img"
|
||
class="detail-image"
|
||
mode="aspectFill"
|
||
@click="previewImage(item.images, imgIndex)"
|
||
/>
|
||
</view>
|
||
</scroll-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: 750rpx;
|
||
}
|
||
|
||
.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: 36rpx;
|
||
line-height: 44rpx;
|
||
color: #333;
|
||
// font-weight: bold;
|
||
}
|
||
|
||
.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: 36rpx;
|
||
line-height: 40rpx;
|
||
color: #333;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.address-icon {
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
margin-right: 8rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.image-list {
|
||
display: inline-flex;
|
||
flex-wrap: nowrap;
|
||
}
|
||
|
||
.image-scroll {
|
||
width: 100%;
|
||
margin-top: 24rpx;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.detail-image {
|
||
width: 280rpx;
|
||
height: 280rpx;
|
||
margin-right: 16rpx;
|
||
border-radius: 16rpx;
|
||
display: block;
|
||
}
|
||
|
||
.detail-image:last-child {
|
||
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>
|