更新记录

1.0.0（2025-03-26）

初始版本

平台兼容性

源码清晰、规范、简单，适合二次开发，优化页面

原本加了tui-icon，有图标更好看,但考虑通用性，注释掉了，如果需要，请自行引入tui-icon，并放开注释

属性

事件

<template>
    <view class="content">

        <!-- 其他内容 -->
        <!-- <view class="flexa" style="margin-bottom: 100rpx;">
            <view class="" style="">
                <image class="logo" src="/static/logo.png"></image>
                <view class="text-area">
                    <text class="title">{{title}}</text>
                </view>
            </view>
        </view> -->

        <!-- 选择城市输入框 -->
        <view class="city-input-container">
            <view class="city-input" @click="showCitySelect = true">
                <text v-if="selectedCities.length === 0">请选择城市</text>
                <text v-else>已选择 {{ selectedCities.length }} 个城市</text>
                <view class="selected-cities-preview" v-if="selectedCities.length > 0">
                    {{ selectedCitiesText }}
                </view>
            </view>
        </view>

        <!-- 城市选择组件 -->
        <tanly-city-select 
            :selected="selectedCities"
            :show="showCitySelect"
            @confirm="handleCityConfirm"
            @close="showCitySelect = false"
        />
    </view>
</template>

<script>
// import TanlyCitySelect from '@/components/tanly-city-select/tanly-city-select.vue'

export default {
    // components: {
    //  TanlyCitySelect
    // },
    data() {
        return {
            title: 'Hello',
            selectedCities: [], // 存储选中的城市
            showCitySelect: false // 控制城市选择器显示
        }
    },
    computed: {
        selectedCitiesText() {
            return this.selectedCities
                .map(city => city.replace('全', ''))
                .join('、');
        }
    },
    onLoad() {

    },
    methods: {
        // 处理城市选择确认
        handleCityConfirm(cities) {
            this.selectedCities = cities;
            this.showCitySelect = false;
            console.log('已选择的城市：', cities);
        }
    }
}
</script>

<style>

.flex {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    .flexb {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .flexa {
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    .flexm {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .flexmc {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .content {
        padding: 30rpx;
    }

    .city-input-container {
        margin-bottom: 30rpx;
    }

    .city-input {
        background-color: #fff;
        padding: 20rpx 30rpx;
        border-radius: 10rpx;
        border: 1rpx solid #ddd;
        font-size: 28rpx;
        color: #333;
    }

    .selected-cities-preview {
        margin-top: 10rpx;
        font-size: 24rpx;
        color: #666;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .logo {
        height: 200rpx;
        width: 200rpx;
        margin-top: 200rpx;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 50rpx;
    }

    .text-area {
        display: flex;
        justify-content: center;
    }

    .title {
        font-size: 36rpx;
        color: #8f8f94;
    }
</style>