feat(页面): 新增轮播图详情和景区导览页面

hejianhao

2025-12-30 afa6486140b8464ae96a28bfef0e91fe3d6e2efa

feat(页面): 新增轮播图详情和景区导览页面

- 添加轮播图详情页面及服务接口
- 添加景区导览页面及图片预览功能
- 在首页添加景区导览跳转逻辑
- 更新页面配置文件添加新子包

 miniprogram/pages.json

@@ -54,6 +54,24 @@
            }
        }
    ],
    "subPackages": [{
        "root": "pagesA",
        "pages": [{
                "path": "bannerDetail/bannerDetail",
                "style": {
                    "navigationBarTitleText": "轮播图详情",
                    "navigationBarBackgroundColor": "#fff"
                }
            },
            {
                "path": "mapAndGuide/mapAndGuide",
                "style": {
                    "navigationBarTitleText": "景区导览",
                    "navigationBarBackgroundColor": "#fff"
                }
            }
        ]
    }],
    "tabBar": {
        "color": "#A5A3AF",
        "selectedColor": "#06C584",

 miniprogram/pages/home/home.vue

@@ -23,7 +23,7 @@
                <view class="mt-17 fs-25 lh-35 color2 ml-29">快速预订门票</view>
                <image src="/static/image/home/bg1.png" class="w-115 h-92 absolute" style="right: 21rpx;top: 33rpx;" />
            </view>
            <view class="relative br-19 bgcolor4 pt-27 pb-29">
            <view @tap.stop="toMap" class="relative br-19 bgcolor4 pt-27 pb-29">
                <view class="flex a-center br-154 py-12 px-12 ml-27 bgcolor5 w-fit">
                    <view class="fs-27 lh-23 font-bold mr-4 color3">景区导览</view>
                    <image class="w-19 h-19 ml-4 shrink0" src="/static/image/home/Group@2x (4).png" />
@@ -60,7 +60,8 @@
            </view>
            <view class="listBox">
                <view v-for="item in 10" :key="item" class="relative">
                    <image class="br-19" style="height: 396rpx;width: 346rpx;" src="https://huishou-1323682843.cos.ap-nanjing.myqcloud.com/images/832d1c03-9536-4019-8a1f-3d1388ac836e.png" />
                    <image class="br-19" style="height: 396rpx;width: 346rpx;"
                        src="https://huishou-1323682843.cos.ap-nanjing.myqcloud.com/images/832d1c03-9536-4019-8a1f-3d1388ac836e.png" />
                    <view class="absolute flex a-center br-138 h-35 pl-15 pr-12 bgcolor10"
                        style="top: 12rpx;right: 12rpx;">
                        <image src="/static/image/home/Shape@2x.png" class="w-19 h-19 shrink0 mr-8" />
@@ -102,6 +103,12 @@

    })

    const toMap = () => {
        uni.navigateTo({
            url: '/pagesA/mapAndGuide/mapAndGuide'
        })
    }

    const toMini = () => {
        uni.navigateToMiniProgram({
            appId: 'wxe6843e111c37fa99'

 miniprogram/pagesA/bannerDetail/bannerDetail.vue

New file
@@ -0,0 +1,53 @@
<template>
    <view class="pt-38 px-27">
        <view class="fs-46 lh-63 font-bold">{{info.bannerName}}</view>
        <view class="mt-27 flex a-center j-between fs-23 color1 font-bold">
            <view class="flex a-center">
                <image src="/static/image/public/time.png" class="w-19 h-19 shrink0 mr-10" />
                <view>{{info.createTime}}</view>
            </view>
            <view class="flex a-center">
                <image src="/static/image/public/read.png" class="w-25 h-19 shrink0 mr-12" />
                <view>4983</view>
            </view>
        </view>
        <rich-text :nodes="content" class="mt-35"></rich-text>
    </view>
</template>

<script setup lang="ts">
    import { onLoad } from "@dcloudio/uni-app";
    import { ref } from "vue";
    import { getBannerDetail } from "./service.js";

    const content = ref<string>("");
    const info = ref({

        bannerName: '', createTime: ''
    })

    onLoad((params) => {
        getBannerDetail(params.id).then((res) => {
            if (res.code == 200) {
                info.value = res.data
                if (res.data.bannerDetail) {
                    res.data.bannerDetail = res.data.bannerDetail.replace(/<img/gi,
                        '<img style="max-width:100%;height:auto;margin:0 auto;display:block"')
                }
                content.value = res.data.bannerDetail || "";
            }

        });
    });
</script>

<style>
    page {
        background-color: #fff;
    }
</style>
<style lang="scss" scoped>
    .color1 {
        color: rgba(0, 0, 0, 0.45);
    }
</style>

 miniprogram/pagesA/bannerDetail/service.js

New file
@@ -0,0 +1,6 @@
import request from '@/utils/request.js'

//获取用户协议和隐私协议
export const getBannerDetail = (id) => {
    return request.get(`/index/getBannerDetail/${id}`)
}

 miniprogram/pagesA/mapAndGuide/mapAndGuide.vue

New file
@@ -0,0 +1,19 @@
<template>
    <view>
        <image @tap.stop="viewImg" src="/static/image/mine/bg.png" style="width: 100vw;" />
    </view>
</template>

<script setup lang="ts">
    import { ref, reactive } from 'vue'

    const viewImg = () => {
        uni.previewImage({
            urls: ['https://huishou-1323682843.cos.ap-nanjing.myqcloud.com/images/832d1c03-9536-4019-8a1f-3d1388ac836e.png']
        })
    }
</script>

<style>

</style>