192 lines
8.8 KiB
Vue
192 lines
8.8 KiB
Vue
<template>
|
||
<view class="long-text-detail-page flex flex-col">
|
||
<TopNavBar title="初游攻略" background="#E5EFE9" />
|
||
|
||
<scroll-view class="long-text-detail-scroll" scroll-y>
|
||
<view class="long-text-detail-content">
|
||
<view class="long-text-detail-card">
|
||
<view class="long-text-detail-header">
|
||
<view class="long-text-detail-title">第一次来小七孔，照着这条线走就对了</view>
|
||
<view class="long-text-detail-badge is-amber">初游攻略</view>
|
||
</view>
|
||
|
||
<view class="long-text-detail-body">
|
||
<view class="detail-paragraph">
|
||
第一次来小七孔，别犹豫，直接锁死
|
||
<text class="detail-highlight">东门进、西门出</text>
|
||
这条线。
|
||
</view>
|
||
|
||
<view class="detail-paragraph">
|
||
这是景区最完整的打法，全程顺着响水河往下游走，不用爬坡回头，把最精华的水景一次看个够。从古朴的石桥热身，一路走到碧蓝的卧龙潭收尾，节奏刚刚好。
|
||
</view>
|
||
|
||
<image class="overview-image-card" :src="overviewImage" mode="widthFix" @click="previewPhoto(overviewImage)" />
|
||
|
||
<view class="detail-section-title">这几个地方不能错过</view>
|
||
<view class="detail-paragraph">
|
||
这条线上景点很密，但下面这几个是真正的“灵魂”，到了千万别急着赶路。
|
||
</view>
|
||
|
||
<template v-for="spot in scenicSpots" :key="spot.name">
|
||
<view class="detail-paragraph">
|
||
<text class="detail-highlight">{{ spot.index }} {{ spot.name }}</text>
|
||
{{ spot.desc }}
|
||
</view>
|
||
<image class="overview-image-card" :src="spot.image" mode="aspectFill" @click="previewPhoto(spot.image)" />
|
||
</template>
|
||
|
||
<view class="detail-section-title">一天大概这样分</view>
|
||
<view class="detail-tip-block">
|
||
上午（约 3 小时）：东门进，先走古桥、看跌水与拉雅瀑布<br />
|
||
中午（约 1 小时）：在驿站歇脚吃饭，避开正午晒<br />
|
||
下午（约 3 小时）：水上森林、鸳鸯湖划船、卧龙潭收尾<br />
|
||
机动（约 1 小时）：留点空给拍照、发呆、临时想多待的地方<br />
|
||
全程顺水而下约一天，体力一般也扛得住
|
||
</view>
|
||
|
||
<view class="detail-section-title">只有半天怎么办</view>
|
||
<view class="detail-tip-block">
|
||
时间紧就走精华：古桥 + 水上森林 + 卧龙潭，约 3-4 小时<br />
|
||
舍掉的部分别可惜，留个念想，下次再来
|
||
</view>
|
||
|
||
<view class="detail-section-title">小七的话</view>
|
||
<view class="detail-paragraph">
|
||
第一次来，不用追着打卡。挑两三个最想看的地方多待一会儿，比每个点都匆匆走过要值得多。具体某个点怎么玩，点开对应的攻略，我再细细跟你说。
|
||
</view>
|
||
</view>
|
||
|
||
<view class="detail-action-zone">
|
||
<view class="detail-action-label">必看景点 · 按游玩顺序</view>
|
||
<view class="overview-spots-wrap">
|
||
<template v-for="(spot, index) in routeStops" :key="spot.name">
|
||
<view class="overview-spot-card" @click="showToast(`点进景点详情：${spot.name}`)">
|
||
<view class="overview-spot-index">{{ index + 1 }}</view>
|
||
<view class="overview-spot-main">
|
||
<view class="overview-spot-name">{{ spot.name }}</view>
|
||
<view class="overview-spot-tag">{{ spot.tag }}</view>
|
||
</view>
|
||
<uni-icons type="right" size="14" color="#9FD9BF" />
|
||
</view>
|
||
<view v-if="index < routeStops.length - 1" class="overview-spot-arrow">↓</view>
|
||
</template>
|
||
</view>
|
||
|
||
<view class="detail-action-label">套票推荐</view>
|
||
<view class="overview-combo-card">
|
||
<view class="overview-combo-body">
|
||
<image class="overview-combo-cover" :src="goodsImage" mode="aspectFill" />
|
||
<view class="overview-combo-info">
|
||
<view class="overview-combo-name">小七孔畅玩套票</view>
|
||
<view class="overview-combo-desc">门票 + 观光车 + 2 项体验，第一次来最省心</view>
|
||
<view class="overview-combo-price">
|
||
<text class="overview-combo-currency">¥</text>130
|
||
<text class="overview-combo-original">¥170</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<button class="overview-combo-button" @click="goodsDetail({ commodityId: '2061335177990320129' })">
|
||
查看套票详情
|
||
</button>
|
||
</view>
|
||
|
||
<view class="detail-action-label">继续追问</view>
|
||
<view class="detail-faq-wrap">
|
||
<view
|
||
v-for="question in faq"
|
||
:key="question"
|
||
class="detail-faq-chip"
|
||
@click="sendReply(question)"
|
||
>
|
||
{{ question }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import TopNavBar from "@/components/TopNavBar/index.vue";
|
||
import { SEND_MESSAGE_CONTENT_TEXT } from "@/constant/constant";
|
||
|
||
const overviewImage = "https://one-feel-config-images-bucket.oss-cn-chengdu.aliyuncs.com/preview/fulldoc1.png";
|
||
const goodsImage = "https://one-feel-config-images-bucket.oss-cn-chengdu.aliyuncs.com/preview/fulldoc7.jpg";
|
||
|
||
const scenicSpots = [
|
||
{
|
||
index: "①",
|
||
name: "小七孔古桥",
|
||
image: "https://one-feel-config-images-bucket.oss-cn-chengdu.aliyuncs.com/preview/fulldoc2.png",
|
||
desc: "这是整个景区名字的由来，也是你的第一站。这座建于清道光年间的石桥横跨在涵碧潭上，七孔拱桥倒映在碧绿的水里，怎么拍都像画。记得低头看看桥下的水，平时碧蓝翠绿，汛期还能看到“半河清水半河浊水”的奇观。",
|
||
},
|
||
{
|
||
index: "②",
|
||
name: "68 级跌水瀑布 & 拉雅瀑布",
|
||
image: "https://one-feel-config-images-bucket.oss-cn-chengdu.aliyuncs.com/preview/fulldoc3.png",
|
||
desc: "过了古桥没多久，你会听到水声越来越大。这一段沿着河谷走，68 级瀑布层层叠叠、一级一级往下淌；拉雅瀑布更直接，几乎是从路边喷涌而出，水雾扑面而来。夏天走这段就像开了天然空调，体感一下凉好几度。",
|
||
},
|
||
{
|
||
index: "③",
|
||
name: "水上森林",
|
||
image: "https://one-feel-config-images-bucket.oss-cn-chengdu.aliyuncs.com/preview/fulldoc4.png",
|
||
desc: "这一段特别有意思，路是修在水里的，树也是长在水里的。你可以踩着石墩在水面上走，脚边是清凉的溪水流过，两旁是茂密的喀斯特森林，像一脚闯进了绿野仙踪的世界。",
|
||
},
|
||
{
|
||
index: "④",
|
||
name: "鸳鸯湖",
|
||
image: "https://one-feel-config-images-bucket.oss-cn-chengdu.aliyuncs.com/preview/fulldoc5.png",
|
||
desc: "这里是全程玩水的重头戏。湖面被树木的根系分割成无数条迷宫般的小水道，一定要去划船（推荐透明船），钻进那些只有船能过的狭窄水道，阳光透过树叶洒在水面上，光影美得不真实。",
|
||
},
|
||
{
|
||
index: "⑤",
|
||
name: "卧龙潭",
|
||
image: "https://one-feel-config-images-bucket.oss-cn-chengdu.aliyuncs.com/preview/fulldoc6.png",
|
||
desc: "路线的终点，也是颜值天花板。潭水蓝得像一块巨大的蓝宝石，平静得没有一丝波纹。如果时间赶得上，一定要体验这里的漂流，从高处滑下、穿过树林，刺激又凉快，是整趟行程的高潮。",
|
||
},
|
||
];
|
||
|
||
const routeStops = [
|
||
{ name: "小七孔古桥", tag: "三百年石桥，景区名字的由来" },
|
||
{ name: "68 级跌水瀑布 & 拉雅瀑布", tag: "层层叠叠的水，夏天的天然空调" },
|
||
{ name: "水上森林", tag: "踩着石墩在水上走的喀斯特奇景" },
|
||
{ name: "鸳鸯湖", tag: "划透明船钻水道，玩水重头戏" },
|
||
{ name: "卧龙潭", tag: "蓝宝石般的潭水，可玩漂流收尾" },
|
||
];
|
||
|
||
const faq = ["一天玩得完吗", "带老人孩子怎么安排", "几月来最好看"];
|
||
|
||
const showToast = (title) => {
|
||
uni.showToast({
|
||
title,
|
||
icon: "none",
|
||
});
|
||
};
|
||
|
||
const previewPhoto = (url) => {
|
||
uni.previewImage({
|
||
current: url,
|
||
urls: [url],
|
||
});
|
||
};
|
||
|
||
const goodsDetail = (item) => {
|
||
uni.navigateTo({
|
||
url: `/pages/goods/index?commodityId=${item.commodityId}`,
|
||
});
|
||
};
|
||
|
||
const sendReply = (item) => {
|
||
uni.navigateBack();
|
||
uni.$emit(SEND_MESSAGE_CONTENT_TEXT, item);
|
||
};
|
||
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
@import "./styles/detail.scss";
|
||
</style>
|