更新记录

1.0.0（2025-01-14） 下载此版本

模版初始化

平台兼容性

cc-headSearch

uniapp专属精品组件页面模板（由前端组件开发出品）精品组件页面模板

●组件模板规划：

由前端组件开发出品的精品组件页面模板，将陆续发布，预计高达约几百种供您使用，是快速快发项目、创业的必备精品。

合集地址： uni-app模板合集地址：(https://ext.dcloud.net.cn/publisher?id=274945) 如查看全部页面模板，请前往上述uniapp插件市场合集地址；

●组件模板效果图：

可下载项目后预览，效果图见右侧图片；

●组件模板费用：

学习：免费下载，进行学习，无费用；

使用/商用：本页面地址赞赏10元后，可终身商用；

●组件模板使用版权/商用：

本组件模板免费下载可供学习，如需使用及商用，请在本组件页面模板进行赞赏10元

（仅需10元获取精品页面模板代码-物有所值，1个组件页面市场价100元 ）

赞赏10元后（当前项目产生赞赏订单可追溯）即可终身商用当前本地址下载的页面模版代码，不同下载地址需进行不同的赞赏。（不赞赏就进行商用使用者，面临侵权！保留追究知识产权法律责任！后果自负！）

我的技术公众号(私信可加前端技术交流群)

群内气氛挺不错的，应该或许可能大概，算是为数不多的，专搞技术的前端群，偶尔聊天摸鱼

自定义顶部搜索框 用于搜索跳转使用方法

<template>
    <view class="content">

        <view style="display: flex; padding: 5px 0px 8px 0px; width: 100vw; background-color: white;">

            <view class="locText" @click="selectCity">{{ currentCity }}</view>
            <!-- 自定义顶部搜索框 用于搜索跳转 skipUrl:跳转url为绝对路径 /pages开头 -->
            <cc-headSearch @click.native="goSearchClick"></cc-headSearch>

        </view>

    </view>
</template>

<script>    
    export default {

        data() {
            return {
                currentCity: '定位中',
                // 经纬度
                locationStr:'',
                // 地区
                regionStr:'',

                startLoc: {
                    name: ''
                },
                endLoc: {
                    name: ""
                }

            }
        },
        onShareAppMessage() {
            return {
                title: '站点线路规划',
                path: '/pages/index/index'
            }
        },
        onShareTimeline() {
            return {
                title: '全国地铁查询',
                query: '', // 你可以传递一些参数，例如 `id` 等
                imageUrl: '/static/logo.png' // 自定义分享图片路径
            };
        },
        onLoad() {

            let that = this;
            this.$nextTick(() => {

                // 获取当前位置
                that.getCurrentCity();

            });

        },

        methods: {

            goSearchClick(){

                uni.navigateTo({
                    url:'/pagesB/search/search?location=' + this.locationStr + '&region=' + this.regionStr
                })
            },
            getCurrentCity() {

                let keyArr = ["VOEBZ-APTCZ-FGBXG-TPJM4-XWGRV-JKBQX", "SFABZ-WANWW-FISRY-3IGTF-HV7RE-YSFTI"]
                const randomKey = keyArr[Math.floor(Math.random() * keyArr.length)];

                uni.getLocation({
                    type: 'gcj02',
                    success: (res) => {
                        const latitude = res.latitude;
                        const longitude = res.longitude;
                        this.locationStr = `${latitude},${longitude}`;

                        uni.request({
                            url: `https://apis.map.qq.com/ws/geocoder/v1/`,
                            method: 'GET',
                            data: {
                                key: randomKey, // 替换为你的腾讯地图密钥
                                location: `${latitude},${longitude}`
                            },
                            success: (res) => {
                                if (res.data.status === 0) {
                                    this.currentCity = res.data.result.address_component.city;
                                    this.regionStr = this.currentCity;
                                    // 存储当前位置
                                    uni.setStorageSync('curLoc', this.currentCity);

                                } else {
                                    this.currentCity = '定位失败';
                                }
                            },
                            fail: () => {
                                this.currentCity = '定位失败';
                            }
                        });
                    },
                    fail: () => {
                        this.currentCity = '定位失败';
                    }
                });
            },
            selectCity() {
                uni.navigateTo({
                    url: './cityList',
                    events: {
                        selectCity: (data) => {
                            this.currentCity = data.city;
                            // 存储当前位置
                            uni.setStorageSync('curLoc', this.currentCity);
                        }
                    }
                });
            },

        }

    }
</script>

<style>
    page {
        background: #f8f8f8;
    }

    .content {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .uni-btn-v {
        width: 100%;
        height: auto;
    }

    .botBtn {
        width: 90%;
        margin-top: 28px;
        background-color: #e54d42;
        height: 44px;
        line-height: 44px;
        border-radius: 22px;
        color: white;

    }

    .botGratBtn {
        width: 90%;
        margin-top: 26px;
        background-color: darkgray;
        height: 44px;
        line-height: 44px;
        border-radius: 22px;
        color: white;

    }

    .upView {
        margin-top: 28px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin-left: 12px;
        width: calc(100vw - 24px);
        padding: 8px 0px;
        background-color: white;
        border-radius: 8px;

    }

    .tipText {
        width: 100%;
        margin-left: 0px;
        text-align: center;
        color: #666666;
        margin-top: 26px;
        margin-bottom: 26px;
        font-size: 28rpx;
    }

    .useIntroV {
        margin-left: calc(50vw - 35px);
        width: 66px;
        font-weight: 400;
        margin-top: 16px;
        text-align: center;
        color: #e54d42;
        font-size: 13px;
        height: 28px;
        line-height: 28px;
        border-bottom: 1px #eee solid;

    }

    .locText {
        font-size: 13px;
        margin: 6px 8px;
        width: 52px !important;
        line-height: 44px;
        height: 44px;
        color: #333;
        text-align: center;
    }
</style>

<template>
  <view class="container">
    <view class="grid">
      <view v-for="city in cities" :key="city" class="grid-item" @click="selectCity(city)">
        {{ city }}
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      cities: ['北京市', '上海市', '广州市', '深圳市', '杭州市', '南京市', '成都市', '重庆市', '武汉市', '西安市', '天津市', '沈阳市', '大连市', '青岛市', '宁波市', '郑州市', '长沙市', '苏州市', '佛山市', '东莞市','福州市','长春市','合肥市','昆明市','南昌市'] // 有地铁的城市
    };
  },
  methods: {
    selectCity(city) {
      const eventChannel = this.getOpenerEventChannel();
      eventChannel.emit('selectCity', { city });
      uni.navigateBack();
    }
  }
};
</script>

<style>
.container {
  padding: 12px;
}
.grid {
  display: flex;
  flex-wrap: wrap;
}
.grid-item {
  width: 24%;
  padding: 10px;
  margin:  5px 6px;
  text-align: center;
  background-color: #f0f0f0;
  border-radius: 4px;
  cursor: pointer;
}
</style>