crm-app-vue3/pages/wareHouse/brandList.vue

<template>
    <view class="brand_list_page">
        <view class="brand_list">
            <u-navbar class="nav-bar" title="品牌" :autoBack="true" :placeholder="true" v-hideNav>
                <!-- <view class="u-nav-slot" slot="right" @click="handleAddBrand">
                    <u-icon name="plus-circle" color="#2979ff" size="20"></u-icon>
                    <text>新增</text>
                </view> -->
            </u-navbar>
            <u-search placeholder="搜索" v-model="keyword"></u-search>
            <view class="suggest_list">
                <view class="brand_item" v-for="item in brandList" :key="item.id">
                    <img class="brand_img" :src="item.url" alt="">
                    <view class="brand_name">{{ item.name }}</view>
                </view>
            </view>
        </view>
        <u-index-list :index-list="indexList" class="index_list">
            <template v-for="(item, index) in itemArr">
                <!-- #ifdef APP-NVUE -->
                <u-index-anchor :text="indexList[index]"></u-index-anchor>
                <!-- #endif -->
                <u-index-item>
                    <!-- #ifndef APP-NVUE -->
                    <u-index-anchor :text="indexList[index]"></u-index-anchor>
                    <!-- #endif -->
                    <view class="list-cell" v-for="(cell, index) in item">
                        <img :src="cell.url" alt="">
                        {{ cell.name }}
                    </view>
                </u-index-item>
            </template>
        </u-index-list>
        <view class="no_brand">
            <u-button type="primary" :plain="true" text="找不到品牌" color="#108cff"></u-button>
        </view>
    </view>
</template>
<script>
export default {
    components: {
    },
    props: {
    },
    emits: [],
    data() {
        return {
            keyword: '',
            brandList: [
                {
                    id: 1,
                    name: '品牌1',
                    code: '001',
                    url: './imgs/1.jpg',
                },
                {
                    id: 2,
                    name: '品牌2',
                    code: '002',
                    url: './imgs/1.jpg',
                },
                {
                    id: 1,
                    name: '品牌1',
                    code: '001',
                    url: './imgs/1.jpg',
                },
                {
                    id: 2,
                    name: '品牌2',
                    code: '002',
                    url: './imgs/1.jpg',
                },
                {
                    id: 1,
                    name: '品牌1',
                    code: '001',
                    url: './imgs/1.jpg',
                },
                {
                    id: 1,
                    name: '品牌1',
                    code: '001',
                    url: './imgs/1.jpg',
                },
            ],
            indexList: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z","#"],
            itemArr: [
                [
                    {
                        name:'品牌1',
                        url:require('./imgs/1.jpg'),
                    },
                    {
                        name:'品牌2',
                        url:'./imgs/1.jpg',
                    },
                ],
                [
                    {
                        name:'品牌3',
                        url:'./imgs/1.jpg',
                    },
                    {
                        name:'品牌4',
                        url:'./imgs/1.jpg',
                    },
                ],
                [
                    {
                        name:'品牌5',
                        url:'./imgs/1.jpg',
                    },
                    {
                        name:'品牌6',
                        url:'./imgs/1.jpg',
                    },
                ],
                [
                    {
                        name:'品牌7',
                        url:'./imgs/1.jpg',
                    },
                    {
                        name:'品牌8',
                        url:'./imgs/1.jpg',
                    },
                ],
                [
                    {
                        name:'品牌9',
                        url:'./imgs/1.jpg',
                    },
                    {
                        name:'品牌10',
                        url:'./imgs/1.jpg',
                    },
                ],
                [
                    {
                        name:'品牌11',
                        url:'./imgs/1.jpg',
                    },
                    {
                        name:'品牌12',
                        url:'./imgs/1.jpg',
                    },
                ],
                [
                    {
                        name:'品牌13',
                        url:'./imgs/1.jpg',
                    },
                    {
                        name:'品牌14',
                        url:'./imgs/1.jpg',
                    },
                ],
                [
                    {
                        name:'品牌15',
                        url:'./imgs/1.jpg',
                    },
                    {
                        name:'品牌16',
                        url:'./imgs/1.jpg',
                    },
                ],
                [
                    {
                        name:'品牌17',
                        url:'./imgs/1.jpg',
                    },
                    {
                        name:'品牌18',
                        url:'./imgs/1.jpg',
                    },
                ],
                [
                    {
                        name:'品牌19',
                        url:'./imgs/1.jpg',
                    },
                    {
                        name:'品牌20',
                        url:'./imgs/1.jpg',
                    },
                ],
                [
                    {
                        name:'品牌21',
                        url:'./imgs/1.jpg',
                    },
                    {
                        name:'品牌22',
                        url:'./imgs/1.jpg',
                    },
                ],
                [
                    {
                        name:'品牌23',
                        url:'./imgs/1.jpg',
                    },
                    {
                        name:'品牌24',
                        url:'./imgs/1.jpg',
                    },
                ],
                [
                    {
                        name:'品牌25',
                        url:'./imgs/1.jpg',
                    },
                    {
                        name:'品牌26',
                        url:'./imgs/1.jpg',
                    },
                ],
                [
                    {
                        name:'品牌27',
                        url:'./imgs/1.jpg',
                    },
                    {
                        name:'品牌28',
                        url:'./imgs/1.jpg',
                    },
                ],
                [
                    {
                        name:'品牌25',
                        url:'./imgs/1.jpg',
                    },
                    {
                        name:'品牌26',
                        url:'./imgs/1.jpg',
                    },
                ],
                [
                    {
                        name:'品牌27',
                        url:'./imgs/1.jpg',
                    },
                    {
                        name:'品牌28',
                        url:'./imgs/1.jpg',
                    },
                ],
                [
                    {
                        name:'品牌25',
                        url:'./imgs/1.jpg',
                    },
                    {
                        name:'品牌26',
                        url:'./imgs/1.jpg',
                    },
                ],
                [
                    {
                        name:'品牌27',
                        url:'./imgs/1.jpg',
                    },
                    {
                        name:'品牌28',
                        url:'./imgs/1.jpg',
                    },
                ],
                [
                    {
                        name:'品牌25',
                        url:'./imgs/1.jpg',
                    },
                    {
                        name:'品牌26',
                        url:'./imgs/1.jpg',
                    },
                ],
                [
                    {
                        name:'品牌27',
                        url:'./imgs/1.jpg',
                    },
                    {
                        name:'品牌28',
                        url:'./imgs/1.jpg',
                    },
                ],
                [
                    {
                        name:'品牌25',
                        url:'./imgs/1.jpg',
                    },
                    {
                        name:'品牌26',
                        url:'./imgs/1.jpg',
                    },
                ],
                [
                    {
                        name:'品牌27',
                        url:'./imgs/1.jpg',
                    },
                    {
                        name:'品牌28',
                        url:'./imgs/1.jpg',
                    },
                ],
                [
                    {
                        name:'品牌25',
                        url:'./imgs/1.jpg',
                    },
                    {
                        name:'品牌26',
                        url:'./imgs/1.jpg',
                    },
                ],
                [
                    {
                        name:'品牌27',
                        url:'./imgs/1.jpg',
                    },
                    {
                        name:'品牌28',
                        url:'./imgs/1.jpg',
                    },
                ],
                [
                    {
                        name:'品牌25',
                        url:'./imgs/1.jpg',
                    },
                    {
                        name:'品牌26',
                        url:'./imgs/1.jpg',
                    },
                ],
                [
                    {
                        name:'品牌27',
                        url:'./imgs/1.jpg',
                    },
                    {
                        name:'品牌28',
                        url:'./imgs/1.jpg',
                    },
                ],
                [
                    {
                        name:'##品牌27',
                        url:'./imgs/1.jpg',
                    },
                    {
                        name:'#品牌28',
                        url:'./imgs/1.jpg',
                    },
                ]
            ]
        }
    },
    methods: {
    }
}
</script>
<style lang="scss" scoped>
@import './styles/brandList.scss';
</style>