YXGJ/pages/index/cloud/product.vue

<template>
    <view>
        <u-tabs :list="types" :activeStyle="{ fontWeight: 'bold', color: '#C30D23' }" lineColor="#C30D23"
            keyName="classname" @change="changeClass1">
            <view slot="right" class="nav-search" hover-class="navigator-hover" @click="changeSearchShow(searchShow)">
                <view class="iconfont icon-sousuo" :style="{ color: searchShow ? '#C30D23' : '#999999' }" />
            </view>
        </u-tabs>
        <u-transition :show="searchShow">
            <view class="My_search-box">
                <My_search :value="content.where.condition" @onSearch="onSearch">
                    <view class="cancel" v-if="content.where.condition" hover-class="navigator-hover" @click="onSearch('')">
                        取消
                    </view>
                    <view v-else style="width: 5px;" />
                </My_search>
            </view>
        </u-transition>
        <view class="tabs2-box" v-if="tabs2.length">
            <v-tabs ref="tabs2" v-model="tabs2Active" field="classname" :pills="true" height="28px" pillsBorderRadius="14px"
                pillsColor="#FFFFFF" bgColor="none" color="#FFFFFF" activeColor="#C30D23" :tabs="tabs2"
                @change="changeClass2" />
        </view>
        <view class="tabs3-box" v-if="tabs3.length">
            <v-tabs ref="tabs3" v-model="tabs3Active" field="classname" :pills="true" height="24px" pillsBorderRadius="12px"
                pillsColor="#C30D23" pillsUnColor="#eee" bgColor="none" itemMargin="0 4px 0 0" color="#333333"
                activeColor="#FFFFFF" :tabs="tabs3" @change="changeClass3" />
        </view>
        <view class="list">
            <view class="head">
                <view class="crumbs u-line-1">
                    <text class="crumb" v-for="item in crumbs" :key="item.classname">{{ item.classname }}</text>
                </view>
                <view class="total">共{{ total }}件</view>
            </view>
            <My_listbox ref="List" @getlist="getList" :bottomHeight="70">
                <view class="list-box">
                    <navigator class="item" :url="'/packageCase/product/detail?id=' + item.sa_fadid" v-for="item in list"
                        :key="item.sa_fadid" hover-class="navigator-hover">
                        <image class="image" :src="item.cover" mode="aspectFill" lazy-load="true" />
                        <view class="title u-line-1">
                            {{ item.name }}
                        </view>
                    </navigator>
                </view>
            </My_listbox>
        </view>
    </view>
</template>

<script>
export default {
    name: "product",
    data() {
        return {
            updatePage: true,

            types: [],

            tabs2: [],
            tabs2Active: 0,

            tabs3: [],
            tabs3Active: 0,

            crumbs: [],
            list: [],
            "content": {
                "where": {
                    "condition": "",
                    "isonsale": 1,
                    "begindate_create": "",
                    "enddate_create": "",
                    "begindate_onsale": "",
                    "enddate_onsale": "",
                }
            },
            total: 0,
            searchShow: false,
            searchShowAntiShake: null,
            sa_fadclassid: "",
        }
    },
    methods: {
        init(callBack) {
            this.$Http.basic({
                "id": "20240418112002",
                "content": {
                    "parentid": 0,
                    "where": { "isenable": 1 }
                }
            }).then(res => {
                console.log("获取单品分类", res)
                this.types = res.data;
                if (res.data.length) this.changeClass1(res.data[0]).then(res => {
                    callBack()
                    this.updatePage = false
                })
            })
        },
        changeClass1(item) {
            if (this.sa_fadclassid == item.sa_fadclassid) return;
            this.sa_fadclassid = item.sa_fadclassid;
            this.crumbs = [item, {
                classname: '全部',
                sa_fadclassid: item.sa_fadclassid
            }];
            if (item.children.length && item.children[0].classname != '全部') item.children.unshift({
                classname: "全部",
                sa_fadclassid: item.sa_fadclassid,
                children: []
            });
            this.tabs2 = item.children;
            this.tabs2Active = 0;
            if (this.tabs2.length) setTimeout(() => {
                this.$refs.tabs2.update()
            }, 100)
            this.tabs3 = [];
            this.tabs3Active = 0;

            return this.getList(true);
        },
        changeClass2(index) {
            let item = this.tabs2[index];
            if (this.sa_fadclassid == item.sa_fadclassid) return;
            this.sa_fadclassid = item.sa_fadclassid;
            this.crumbs = [this.crumbs[0], item];
            if (item.classname != '全部') this.crumbs.push({
                classname: '全部',
                sa_fadclassid: item.sa_fadclassid,
                children: []
            })
            if (item.children.length && item.children[0].classname != '全部') item.children.unshift({
                classname: "全部",
                sa_fadclassid: item.sa_fadclassid
            });

            this.tabs3 = item.children || [];
            this.tabs3Active = 0;

            if (this.tabs3.length) setTimeout(() => {
                this.$refs.tabs3.update()
            }, 100)
            this.getList(true);
        },
        changeClass3(index) {
            let item = this.tabs3[index];
            if (this.sa_fadclassid == item.sa_fadclassid) return;
            this.sa_fadclassid = item.sa_fadclassid;
            this.crumbs[2] = item;
            this.getList(true);
        },
        getList(init = false) {
            return new Promise((resolve, reject) => {
                if (this.paging(this.content, init)) return resolve();
                this.content.where.sa_fadclassids = [[this.crumbs[this.crumbs.length - 1].sa_fadclassid]];
                this.$Http.basic({
                    "id": "20240418141302",
                    content: this.content
                }).then(res => {
                    this.$refs.List.setHeight()
                    this.$refs.List.RefreshToComplete()
                    console.log("获取产品列表", res)
                    resolve();
                    if (this.cutoff(res.msg)) return;
                    res.data = res.data.map(v => {
                        v.cover = v.attinfos.length ? this.getSpecifiedImage(v.attinfos.find(s => s.usetype == "sa_fad") || v.attinfos[0]) : ''
                        return v
                    })
                    this.list = res.pageNumber == 1 ? res.data : this.list.concat(res.data);
                    this.content = this.$refs.List.paging(this.content, res)
                    this.total = res.total;
                })
            })
        },
        onSearch(condition) {
            if (condition == this.content.where.condition) return;
            this.content.where.condition = condition;
            this.getList(true);
        },
        changeSearchShow(searchShow) {
            this.searchShow = !searchShow;
            clearTimeout(this.searchShowAntiShake)
            this.searchShowAntiShake = setTimeout(() => {
                this.$refs.List.setHeight();
            }, 350)
        }
    },
}
</script>

<style lang="scss">
.nav-search {
    display: flex;
    align-items: center;
    padding: 0 15px;
    height: 44px;
    border-radius: 8px;
    margin-right: 5px;
}

.My_search-box {
    background: #fff;
    width: 100vw;
    padding: 5px;
    padding-left: 10px;
    box-sizing: border-box;

    .cancel {
        line-height: 30px;
        margin-left: 10px;
        padding: 0 10px;
        font-family: Source Han Sans SC, Source Han Sans SC;
        font-size: 14px;
        color: #666666;
        border-radius: 4px;
    }
}

.tabs2-box,
.tabs3-box {
    padding-left: 10px;
    box-sizing: border-box;
}

.tabs2-box {
    padding-top: 6px;
    background: linear-gradient(90deg, #202E42 0%, #3D405F 100%);
    height: 40px;
    width: 100vw;
}

.tabs3-box {
    background: #fff;
    padding-top: 8px;
    height: 30px;
    width: 100vw;
}


.list-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .item {
        width: 173px;
        height: 207px;
        margin-top: 10px;
        border-radius: 5px;
        overflow: hidden;
        flex-shrink: 0;

        .image {
            width: 173px;
            height: 172px;
            background: #F5F5F5;
            border-radius: 5px;
        }


        .title {
            width: 100%;
            height: 25px;
            line-height: 20px;
            font-family: PingFang SC, PingFang SC;
            font-size: 14px;
            color: #333333;
            margin-top: 10px;
            text-align: center;
        }
    }

}

.list {
    width: 100vw;
    padding: 10px;
    box-sizing: border-box;
    background: #fff;

    .head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 17px;
        line-height: 17px;

        .crumbs {
            flex: 1;
            width: 0;

            .crumb {
                flex-shrink: 0;
                font-size: 12px;
                font-family: PingFang SC, PingFang SC;
            }

            .crumb::after {
                content: ">";
                padding: 0 2px;
            }

            .crumb:last-child {
                font-weight: bold;
            }

            .crumb:last-child::after {
                content: "";
            }
        }

        .total {
            flex-shrink: 0;
            font-family: Source Han Sans SC, Source Han Sans SC;
            font-size: 12px;
            color: #999999;
            margin-left: 20px;
        }
    }
}
</style>