uniapp结合uview制作美食页面

开发一个完整的旅游App页面，包含首页、目的地、行程、我的等主要功能模块。

功能说明

这个旅游信息展示页面包含以下主要功能：

1. 城市选择功能：点击顶部城市选择器可以弹出城市选择面板，选择任意城市后会更新当前城市显示

2. 旅游内容展示：

   • 顶部轮播图展示热门旅游目的地

   • 中部分类导航（景点门票、酒店住宿、旅游攻略等）

   • 热门推荐横向滚动区域

   • 精选攻略列表展示

3. UI设计特点：

   • 使用渐变色和圆角设计，视觉吸引力强

   • 合理的留白和间距，提高可读性

   • 响应式布局，适应不同屏幕尺寸

4. 交互体验：

   • 城市选择平滑过渡

   • 内容区域滚动流畅

   • 视觉反馈明确

这个页面完全使用vue实现，集成了uView UI和uni-ui组件库，可以直接在浏览器中运行，也可以轻松集成到uni-app项目中。

<template>
    <view style="background-color: #F7F7F6; ">
        <!-- 搜索部分 -->
        <view class="container">
            <!-- 小程序头部兼容 -->
            <!-- <uni-search-bar radius="20" placeholder="搜索服务" clearButton="always" cancelButton='none' @confirm="search" /> -->
            <!-- <headers :colors="colors" :locations="locations" :swiperList="swiperList" ></headers> -->
            <view>
                <!-- 搜索框容器 -->
                <view class="search-container">
                    <!-- 搜索框内部盒子 -->
                    <view class="search-box">
                        <!-- 使用uni-ui 提供的图标组件 -->
                        <uni-icons type="search" size="17"></uni-icons>
                        <text class="search-content" @click="gotoSearch">搜索</text>
                    </view>
                </view>

            </view>
            
            <!-- 城市选择器 -->
            <u-picker
              v-model="showCityPicker"
              :columns="cityColumns"
              @confirm="confirmCity"
              title="选择旅游城市"
              :confirm-color="'#ff7d00'"
            ></u-picker>
            <view class="area" @click="showCityPicker = true">
                请选择
                <uni-icons type="bottom" size="15"></uni-icons>
            </view>
        </view>
        <!-- banner图 -->
        <!-- <view class="banner">

        </view> -->
        <!-- 轮播图 -->
        <swiper class="screen-swiper square-dot" :indicator-dots="false" :circular="true" :autoplay="true"
            interval="5000" duration="500">
            <swiper-item v-for="(item,index) in swiperList" :key="index">
                <!-- <image :src="item.img" mode="aspectFill" class="bannerImg"></image> -->
                <view :style="{backgroundImage: `url(${item.img})` }" class="bannerImg"></view>
            </swiper-item>
        </swiper>
    

          <!-- 分类导航 -->
            <view class="classify">
              <view class="classify-box" v-for="(item, index) in classify" :key="index" @click="gotoClassify(item.title)">
                <view class="classify-img" :style="{ backgroundColor: item.color }">
                  <u-icon :name="item.icon" color="#333" size="24"></u-icon>
                </view>
                <view class="classify-text">{ { item.title }}</view>
              </view>
            </view>

        <!-- 超值优惠 -->
        <view class="preferential">
            <!-- 优惠标题 -->
            <u-section title="特惠旅游套餐" sub-title="查看更多" :show-line="false" class="section" font-size="32"></u-section>

            <!-- 优惠内容 -->
            <view class="pre_content">
                <scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll">
                    <view id="demo" class="scroll-view-item_H uni-bg-red" v-for="item in preferentialData"
                        :key="item.id">
                        <view class="pre_img">
                        </view>
                        <view class="title">
                            <span class="tuan">团</span>
                            <span class="text">仅售{ {item.price}}元！{ {item.title}}</span>
                        </view>
                        <view class="price">
                            <span class="now_price"><span class="icon">￥</span>{ {item.price.toFixed(2)}}</span>
                            <span class="old_price"
                                style="text-decoration-line: line-through;">市场价：{ {item.storePrice}}元</span>
                        </view>
                    </view>
                </scroll-view>
            </view>
        </view>
        <!-- 为你推荐 -->
        <view class="recom">
            <!--<view class="title">
                <text class="big">为你推荐</text>
                <text class="small" @click="targetOther('recommend')">查看更多</text>
            </view> -->
            <!-- 优惠标题 -->
            <u-section title="为你推荐" sub-title="查看更多" :show-line="false" class="section title_recommend" font-size="32"
                @click="targetOther('recommend')"></u-section>
            <!-- 分类列表 -->
            <view class="recommend">
                <view class="tj-box" v-for="item in recommend">
                    <view class="tj-img" :style="{backgroundImage:`url(${item.imageUrl})`}">
                    </view>
                    <view class="tj-txt">
                        <view class="title">
                            { {item.title}}
                        </view>
                        <view class="tj-wz">
                            <view style="color: #A0A0A0;">
                                <uni-icons color='#F6637C' type="location-filled" size="20"></uni-icons>
                                沙坪坝步行街
                            </view>
                            <view class="" style="color: #FE2121;">
                                250m
                            </view>
                        </view>
                        <view class="tj-zl">
                            <view class="">
                                烧烤烤肉
                            </view>
                            <view class="tj-wm">
                                支持外卖
                            </view>
                        </view>
                        <view class="quan">