jzmall_uni/pages/map/citySelect/citySelect.vue

<template>
    <view>
        <!-- pages/jsCase/citySel/index.wxml -->
        <view :class="'head ' + (search && 'r_head')">
            <!-- 搜索框 -->
            <view class="flex-row search-box">
                <view class="head_input">
                    <image src="https://mall.zhaijieshi.cc/file/wx-dy/icon-search.png" class="search_icon"></image>
                    <input type="text" placeholder="搜索" placeholder-class="place_holder" @input="getValue" :value="search" />
                </view>
                <view class="sha_icon" @tap.stop.prevent="clear_input">取消</view>
            </view>
            <view class="flex-row head_curr" v-if="!search">
                <image src="https://mall.zhaijieshi.cc/file/wx-dy/address-map.png" class="h_c_icon" />
                <view>当前定位城市: {{ current_city }}</view>
            </view>
        </view>
        <scroll-view v-if="!search" :scroll-y="true" class="sy_container" :scroll-into-view="scrollViewId">
            <view class="hot_city">
                <view class="title">热门城市</view>
                <view class="flex-row flex-wrap box">
                    <block v-for="(item, index) in hot_city" :key="index">
                        <view class="name" hover-class="sel_city" hover-stay-time="150">{{ item.name }}</view>
                    </block>
                </view>
            </view>
            <view class="all_city">
                <view v-if="item.data.length > 0" v-for="(item, index) in city_list" :key="index">
                    <view class="letter_name" :id="item.letter">{{ item.letter }}</view>

                    <view class="city">
                        <block v-for="(item0, index0) in item.data" :key="index0">
                            <view class="name flex-row" hover-class="city_hover" hover-stay-time="150">{{ item0.cityName }}</view>
                        </block>
                    </view>
                </view>
            </view>
        </scroll-view>
        <!-- 侧边选择索引 -->
        <view v-if="!search">
            <view
                class="fixed_bar"
                :style="'height: ' + barHeight + 'px;'"
                @touchstart.stop.prevent="touchStart"
                @touchmove.stop.prevent="touchMove"
                @touchend.stop.prevent="touchEnd"
                @touchcancel.stop.prevent="touchCancel"
            >
                <view :style="'height: ' + barHeight / 22 + 'px;'" v-for="(item, index) in city_list" :key="index">
                    <view
                        :class="'bar_item flex-column j_c ' + (curr == index && 'bar_item_active')"
                        :style="'width: ' + (barHeight / 22) * 0.75 + 'px;height: ' + (barHeight / 22) * 0.75 + 'px;'"
                    >
                        {{ item.letter }}
                    </view>
                </view>
            </view>
            <view v-if="showLetter && city_list[curr].letter" class="fixed_letter">{{ city_list[curr].letter }}</view>
        </view>
        <view v-if="search" class="result_list">
            <view v-if="result.length > 0">
                <block v-for="(item, index) in result" :key="index">
                    <view class="r_item" hover-stay-time="150" hover-class="r_item_hover">{{ item.name }}</view>
                </block>
            </view>
            <view v-else class="flex-column no_data">
                <image src="https://i.postimg.cc/7P00ckMG/image.png" />
                <view>请输入正确的城市名称呢</view>
            </view>
        </view>
    </view>
</template>

<script>
// pages/jsCase/citySel/index.js
const { cityData } = require('./city.js');
var map = require('../../../utils/map.js');
var app = getApp();
export default {
    data() {
        return {
            current_city: '',
            search: '',

            hot_city: [
                {
                    name: '北京'
                },
                {
                    name: '上海'
                },
                {
                    name: '广州'
                },
                {
                    name: '深圳'
                },
                {
                    name: '成都'
                },
                {
                    name: '苏州'
                },
                {
                    name: '杭州'
                },
                {
                    name: '南京'
                }
            ],

            city_list: [],
            barHeight: 0,
            curr: -1,
            scrollViewId: '',
            barTop: 0,
            showLetter: true,

            //搜索结果
            result: [],

            addressName: '',
            letter: ''
        };
    },
    onLoad: function (options) {
        this.getUserLocation();
        this.setData({
            // current_city: options.currentCity || "南京",
            city_list: cityData
        });
        uni.getSystemInfo({
            success: (res) => {
                console.log(res);
                let winHeight = res.windowHeight;
                let barHeight = winHeight - (res.windowWidth / 750) * 300;
                this.setData({
                    barHeight: barHeight,
                    barTop: (res.windowWidth / 750) * 180
                });
            }
        });
    },
    methods: {
        getUserLocation: function () {
            map.getUserLocation();
            let that = this;
            setTimeout(function () {
                that.setData({
                    addressName: app.globalData.currentLocationName,
                    current_city: app.globalData.city
                });
            }, 1000);
        },

        /**
         * 获取value值
         * @param {*} e
         */
        getValue(e) {
            this.setData(
                {
                    search: e.detail.value
                },
                () => {
                    this.searchFun(e.detail.value);
                }
            );
        },

        /**
         * 搜索成功
         */
        searchFun(e) {
            let result = [];
            let { city_list } = this;
            city_list.forEach((item1) => {
                item1.data.forEach((item2) => {
                    if (item2.keyword.indexOf(e.toLocaleUpperCase()) !== -1) {
                        result.push({
                            name: item2.cityName
                        });
                    }
                });
            });
            this.setData({
                result
            });
        },

        /**
         * 清空验证码
         */
        clear_input() {
            this.setData({
                search: ''
            });
        },

        touch(e) {
            let pageY = e.touches[0].pageY;
            let index = Math.floor((pageY - this.barTop) / (this.barHeight / 22)); //向下取整
            let item = this.city_list[index];
            if (item) {
                this.setData({
                    scrollViewId: item.letter,
                    curr: index
                });
            }
        },

        touchStart(e) {
            this.setData({
                showLetter: true
            });
            this.touch(e);
        },

        touchMove(e) {
            this.touch(e);
        },

        touchEnd() {
            this.setData({
                showLetter: false
            });
        },

        touchCancel() {
            this.setData({
                showLetter: false
            });
        }
    }
};
</script>
<style>
/* pages/jsCase/citySel/index.wxss */
page {
    height: 100%;
    background: #f2f5f7;
}

.head {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 170rpx;
    box-sizing: border-box;
    padding: 20rpx 20rpx 0;
    background: #fff;
    z-index: 9999;
}
.search-box {
    display: flex;
    align-items: center;
}
.r_head {
    height: 90rpx;
}

.head_input {
    /* position: relative; */
    flex: 1;
    display: flex;
    align-items: center;
    height: 60rpx;
    padding-left: 16rpx;
    border-radius: 30rpx;
    background: #f2f5f7;
}

.search_icon {
    /* position    : absolute;
  top         : 50%;
  left        : 0;
  margin-top  : -15rpx; */
    width: 30rpx;
    height: 30rpx;
    margin-right: 12rpx;
}

.head input {
    height: 60rpx;
    /* padding-left : 75rpx; */
    font-size: 28rpx;
}

.place_holder {
    font-size: 28rpx;
    color: #999999;
}

.sha_icon {
    margin-left: 18rpx;
    font-size: 28rpx;
    color: #333333;
}

.head_curr {
    height: 80rpx;
    display: flex;
    align-items: center;
    color: #333;
    font-size: 28rpx;
    /* padding-top: 20rpx; */
    box-sizing: border-box;
}

.h_c_icon {
    flex-shrink: 0;
    margin-right: 15rpx;
    width: 32rpx;
    height: 32rpx;
    margin-left: 12rpx;
}

.sy_container {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding-top: 170rpx;
}

.hot_city .title {
    padding: 10rpx 30rpx;
    color: #999;
    font-size: 26rpx;
}

.hot_city .box {
    background-color: #fff;
    padding: 5rpx 30rpx 15rpx 40rpx;
    box-sizing: border-box;
}

.hot_city .box .name {
    vertical-align: top;
    display: inline-block;
    min-width: 140rpx;
    line-height: 56rpx;
    height: 56rpx;
    border-radius: 28rpx;
    font-size: 28rpx;
    color: #333;
    text-align: center;
    padding: 0 20rpx;
    box-sizing: border-box;
    margin-top: 10rpx;
    margin-right: 20rpx;
    position: relative;
}

.hot_city .box .name::after {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scale(0.5, 0.5);
    transform: scale(0.5, 0.5);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    left: 0;
    top: 0;
    border-radius: 56rpx;
    border: 1rpx solid rgb(235, 225, 225);
}

.sel_city {
    color: #fff !important;
    background: pink;
}

.all_city .letter_name {
    height: 48rpx;
    font-size: 24rpx;
    color: #999;
    background: #f2f5f7;
    padding: 0 30rpx;
    line-height: 48rpx;
}

.all_city .city {
    background-color: #fff;
}

.all_city .city .name {
    width: 100%;
    padding: 30rpx;
    font-size: 28rpx;
    color: #333;
    position: relative;
    overflow: hidden;
}

.all_city .city .name::after {
    content: '';
    position: absolute;
    border-bottom: 1rpx solid #eaeef1;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    bottom: 0;
    right: 0;
    left: 30rpx;
}

.city_hover {
    background-color: #eee !important;
}

.fixed_bar {
    position: fixed;
    z-index: 999;
    top: 180rpx;
    right: 0px;
    padding-right: 10rpx;
    width: 50rpx;
    font-size: 22rpx;
    text-align: center;
}

.bar_item {
    background-color: rgb(233, 228, 220);
    border-radius: 50%;
}

@media screen and (max-width: 320px) {
    .fixed_bar {
        font-size: 20rpx;
    }
}

.bar_item_active {
    background-color: #fff;
    /* box-shadow      : 5rpx 5rpx 5rpx #f7c3ee; */
    box-shadow: 5rpx 5rpx 5rpx #09afff;
}

.fixed_letter {
    position: absolute;
    z-index: 20;
    width: 160rpx;
    height: 160rpx;
    left: 50%;
    top: 50%;
    margin-left: -80rpx;
    margin-top: -80rpx;
    border-radius: 80rpx;
    text-align: center;
    line-height: 160rpx;
    font-size: 70rpx;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5);
    /* box-shadow      : 5rpx 5rpx 5rpx #f7c3ee; */
    box-shadow: 5rpx 5rpx 5rpx #09afff;
}

/* 搜索结果 */
.result_list {
    padding-top: 90rpx;
    background: #fff;
    width: 100%;
}

.r_item {
    width: 100%;
    position: relative;
    padding: 30rpx 0 30rpx 30rpx;
    font-size: 28rpx;
    color: #333;
    box-sizing: border-box;
}

.r_item::after {
    content: '';
    position: absolute;
    border-bottom: 1rpx solid #eaeef1;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    bottom: 0;
    right: 0;
    left: 30rpx;
}

.r_item_hover {
    background-color: #eee !important;
}

.no_data {
    height: 500rpx;
    align-items: center;
    font-size: 26rpx;
    color: #999;
    display: flex;
    flex-direction: column;
}

.no_data image {
    width: 250rpx;
    height: 162rpx;
    margin-bottom: 30rpx;
}
</style>