更新记录

1.0.0（2025-03-30）

初始版

平台兼容性

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

属性

事件

<template>
    <view class="content">

        <!-- 商品列表按钮 -->
        <view class="product-btn" @click="showProductList = true">
            <text>查看商品列表</text>
        </view>

        <!-- 商品列表组件  -->
        <product-list
            :show="showProductList"
            @close="showProductList = false"
            :themeColor="'#0C87E3'"
        />
    </view>
</template>

<script>
// import TanlyCitySelect from '@/components/tanly-city-select/tanly-city-select.vue'// 无需引入
// import ProductList from '@/components/product-list/product-list.vue' // 无需引入

export default {
    components: {
        // TanlyCitySelect,// 无需引入
        // ProductList // 无需引入
    },
    data() {
        return {
            title: 'Hello',
            showProductList: false // 控制商品列表显示
        }
    },
    computed: {
    },
    onLoad() {

    },
    methods: {
        // 处理商品列表确认
        handleProductConfirm() {
            this.showProductList = false;
            console.log('商品列表确认');
        }
    }
}
</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;
    }

    .product-btn {
        background-color: #ff6700;
        color: #fff;
        padding: 20rpx 30rpx;
        border-radius: 10rpx;
        text-align: center;
        margin-top: 30rpx;
    }
</style>