uniapp-ZHSQ/packages/localLife/index/index.vue

<template>
    <div class="container">
        <div class="local">
            <image id="local" src="http://192.168.0.172:5500/local_localIcon.png" mode="aspectFill"></image>
            桃城苑小区西北50米(育才南大街)
            <u-icon name="arrow-down" color="#999999" size="28"></u-icon>
        </div>


        <div class="search">
            <div class="searchBox">
                <image src="http://192.168.0.172:5500/com_communitySearchIcon.png" mode="aspectFill"></image>
                <input type="text" placeholder="请输入您想搜索的内容">
            </div>
        </div>


        <div class="swiperBox">
            <swiper class="swiper" @change="swiperChange" :current="currentIndex">
                <swiper-item v-for="(page, pageIndex) in swiperList" :key="pageIndex">
                    <div class="navList">
                        <div class="navItem" v-for="(item, itemIndex) in page" :key="itemIndex">
                            <image :src="picUrl + item.cate_image" mode="widthFix"></image>
                            <div class="navName">{{ item.cate_name }}</div>
                        </div>
                    </div>
                </swiper-item>
            </swiper>

            <div class="dot">
                <div class="dotItem" v-for="(page, index) in swiperList" :class="currentIndex == index ? 'actives' : ''"></div>
            </div>
        </div>

        <scroll-view scroll-x="true" enhanced enable-flex class="scrollBox">
            <div class="scrollView">
                <div class="scroll-viewItem" v-for="(item, index) in 4" @click="checkItem(index)">
                    <image v-show="!checkedItems[index]" src="http://192.168.0.172:5500/local_uncheck.png"
                        mode="aspectFill"></image>
                    <image v-show="checkedItems[index]" src="http://192.168.0.172:5500/local-check.png"
                        mode="aspectFill"></image>
                    买单返物业费
                </div>
            </div>
        </scroll-view>

        <div class="merchantList">
            <div class="merchantItem" v-for="itme in 3">
                <div class="merchantItem_left">
                    <image src="http://192.168.0.172:5500/test.png" mode="aspectFill"></image>
                </div>
                <div class="merchantItem_right">
                    <div class="merchantItem_right_tit">
                        <div class="merchantItem_right_tit_left">
                            大发师美容美发店
                        </div>
                        <div class="merchantItem_right_tit_right">
                            898km
                        </div>
                    </div>
                    <div class="merchantItem_right_con">
                        <div class="merchantItem_right_con_left">
                            <div class="startList">
                                <image v-for="iten in 5" src="http://192.168.0.172:5500/local_start1.png"
                                    mode="aspectFill"></image>
                            </div>
                            <div class="merchangtItem_tag">买单返物业费</div>
                        </div>
                        <div class="merchantItem_right_con_right">
                            <image src="http://192.168.0.172:5500/local_review.png" mode="aspectFill"></image>
                            点评
                        </div>
                    </div>
                    <div class="merchantItem_right_add">
                        苏州市太仓市城厢镇桃园三村11幢105市
                    </div>
                </div>
            </div>
        </div>

        <div class="btnList">
            <div class="btn_left">
                <image src="http://192.168.0.172:5500/local_serverIcon.png" mode="aspectFill"></image>
                到店服务券
            </div>
            <div class="line"></div>
            <div class="btn_right">
                <image src="http://192.168.0.172:5500/lcoal_payIcon.png" mode="aspectFill"></image>
                快捷支付记录
            </div>
        </div>
        <div class="btnList_after"></div>




    </div>
</template>

<script>
import {
    request,
    picUrl,
    uniqueByField,
    menuButtonInfo,
    NavgateTo
} from '../../../utils';

import { apiArr } from '../../../api/v2local';


export default {
    data() {
        return {
            picUrl,
            top: "",
            localHeight: "",
            swiperList: [
            ],
            currentIndex: 0,
            checkedItems: [false, false, false, false]

        }
    },
    onLoad(options) {
        const meun = menuButtonInfo();
        this.top = meun.top;
        // this.top = meun.height + meun.top;
        this.localHeight = meun.height;
        this.getCateList();
    },


    methods: {
        swiperChange(e) {
            this.currentIndex = e.detail.current;
        },

        checkItem(index) {
            this.$set(this.checkedItems, index, !this.checkedItems[index]);
        },

        getCateList() {
            let that = this
            request(apiArr.getMerChantList, "POST").then(res => {
                console.log(res);
                // 将数据分成每10个一组
                const chunkSize = 10;
                that.swiperList = [];
                for (let i = 0; i < res.rows.length; i += chunkSize) {
                    that.swiperList.push(res.rows.slice(i, i + chunkSize));
                }
            })
        },
    },


}
</script>

<style>
@import url("./index.css");
</style>