wechat_yxcl/pages/mbwa/newMap.vue

<template>
    <div class="main">
        <!-- <div class="top">
            <div class="search">
                <div class="right">
                    <input class="searchText" v-model="searchText" confirm-type="search" @confirm="handleSearch"
                        placeholder="搜索服务区" placeholder-style="font-size: 14px;color: #A69E9F;" />
                </div>
            </div>
        </div> -->

        <div class="serverPartListBox">
            <div class="serverPartItemBox" v-for="(item, index) in serviceList" :key="index">
                <div class="serverPartItemBoxTitle" v-if="item.type === 0">{{ item.label }}</div>
                <div class="serverPartItemBoxSmallTitle"
                    :class="{ 'selected': item.type === 1 && currentSelect === item.value }" v-if="item.type === 1"
                    @click="handleSelectServerPart(item)">{{
                        item.label }}</div>

                <div class="serverPartItemBoxChildren" v-if="item.children && item.children.length > 0">
                    <div class="serverPartItemBoxChildrenTitle"
                        :class="{ 'selected': subItem.type === 1 && currentSelect === subItem.value }"
                        v-for="subItem in item.children" @click="handleSelectServerPart(subItem)">{{
                            subItem.label }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            useInfo: {},// 当前用户信息
            serviceList: [],// 当前的服务区数据
            currentSelect: "",// 当前选择的服务区id
            searchText: "",// 当前查询的服务区内容
        };
    },

    async onLoad() {
        let userInfo = uni.getStorageSync('vuex')
        userInfo = JSON.parse(userInfo)
        this.useInfo = JSON.parse(JSON.stringify(userInfo))


        let serviceList = uni.getStorageSync('serviceList')
        if (serviceList) {
            this.serviceList = serviceList
            this.handleGetServerPartList()
        } else {
            this.handleGetServerPartList()
        }
    },
    onShow() {
        let currentServiceObj = uni.getStorageSync('currentServerPart')
        if (currentServiceObj.label) {
            this.currentSelect = currentServiceObj.value
        }
    },
    methods: {
        // 获取服务区列表数据
        async handleGetServerPartList() {
            const req = {
                ProvinceCode: '510000',
                ShowWholePower: false,
                ShowWholePower: true,
                ShowRoyalty: false,
                ShowCompactCount: false
            }
            const secondData = await this.$request.$webGet('EShangApiMain/BaseInfo/GetServerpartTree', req)
            let list = secondData.Result_Data.List
            console.log('listlistlistlistlist', list);
            this.serviceList = list
            uni.setStorageSync('serviceList', list)
        },
        // 选择一个服务区 存入缓存  并返回上一级
        handleSelectServerPart(obj) {
            console.log('objdsada', obj);
            uni.setStorageSync('currentServerPart', obj)
            uni.navigateBack({
                delta: 1
            });
        },
        handleSearch() {
            console.log('searchTextsearchTextsearchText', this.searchText);
        }
    },
};
</script>
<style scoped lang="less">
.main {
    width: 100vw;
    height: 100vh;
    background: #f8f9fa;

    .top {
        width: 100%;
        padding: 16rpx 32rpx;
        box-sizing: border-box;
        background: #fff;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);

        .search {
            width: 100%;
            height: 72rpx;
            background: #F7F8FA;
            border-radius: 36rpx;
            box-sizing: border-box;
            padding: 0 32rpx;
            display: flex;
            align-items: center;
            transition: all 0.3s ease;

            &:focus-within {
                background: #fff;
                border: 2rpx solid #1890ff;
            }

            .right {
                width: 100%;

                .searchText {
                    width: 100%;
                    height: 100%;
                    border: none;
                    background: transparent;
                    font-size: 28rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #333;
                    line-height: 40rpx;
                    outline: none;

                    &::placeholder {
                        color: #999;
                        font-size: 28rpx;
                    }
                }
            }
        }
    }

    .serverPartListBox {
        width: 100%;
        // height: calc(100vh - 104rpx);
        height: 100vh;
        box-sizing: border-box;
        padding: 24rpx 32rpx;
        overflow-y: auto;
        padding-bottom: env(safe-area-inset-bottom);

        .serverPartItemBox {
            margin-bottom: 32rpx;
            background: #fff;
            border-radius: 16rpx;
            padding: 24rpx;
            box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.04);
            transition: all 0.3s ease;

            &:hover {
                box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.08);
            }

            .serverPartItemBoxTitle {
                font-size: 32rpx;
                font-weight: 600;
                color: #1a1a1a;
                margin-bottom: 24rpx;
                padding-bottom: 16rpx;
                border-bottom: 2rpx solid #f0f0f0;
                line-height: 44rpx;
            }

            .serverPartItemBoxSmallTitle {
                display: inline-block;
                padding: 16rpx 24rpx;
                border: 2rpx solid #e8e8e8;
                border-radius: 24rpx;
                margin: 16rpx 16rpx 16rpx 0;
                font-size: 28rpx;
                color: #333;
                background: #fff;
                transition: all 0.3s ease;
                cursor: pointer;
                position: relative;
                overflow: hidden;

                &:hover {
                    border-color: #1890ff;
                    color: #1890ff;
                    transform: translateY(-2rpx);
                    box-shadow: 0 4px 12px 0 rgba(24, 144, 255, 0.15);
                }

                &.selected {
                    background: #ff814fff;
                    color: #fff;
                    border-color: #ff814f;
                    font-weight: 500;
                    box-shadow: 0 4px 16px 0 rgba(255, 129, 79, 0.3);
                    transform: translateY(-2rpx);
                }
            }

            .serverPartItemBoxChildren {
                display: flex;
                flex-wrap: wrap;
                margin-top: 16rpx;

                .serverPartItemBoxChildrenTitle {
                    display: inline-block;
                    padding: 12rpx 20rpx;
                    border: 2rpx solid #e8e8e8;
                    border-radius: 20rpx;
                    margin: 0 16rpx 16rpx 0;
                    font-size: 26rpx;
                    color: #666;
                    background: #fafafa;
                    transition: all 0.3s ease;
                    cursor: pointer;
                    position: relative;

                    &:hover {
                        border-color: #1890ff;
                        color: #1890ff;
                        background: #f6ffed;
                        transform: translateY(-1rpx);
                        box-shadow: 0 2px 8px 0 rgba(24, 144, 255, 0.12);
                    }

                    &.selected {
                        background: #ff814fff;
                        color: #fff;
                        border-color: #ff814f;
                        font-weight: 500;
                        box-shadow: 0 2px 12px 0 rgba(255, 129, 79, 0.25);
                        transform: translateY(-1rpx);
                    }
                }
            }
        }
    }
}
</style>