caimei-applets-caimei/pages/seller/club/club-list.vue

<template>
    <view class="container club clearfix">
        <tui-skeleton v-if="skeletonShow" backgroundColor="#fafafa" borderRadius="10rpx" :isLoading="true"
            :loadingType="5" />
        <template v-else>
            <view class="club-search clearfix">
                <view class="search-from name">
                    <text class="iconfont icon-iconfonticonfontsousuo1"></text>
                    <input class="input" type="text" confirm-type="search" v-model="listQuery.name" @input="onShowClose"
                        @confirm="GetSellerClubList()" placeholder="机构名称/联系人" maxlength="12" />
                    <text class="iconfont icon-shanchu1" v-if="isShowClose" @click="delInputText()"></text>
                </view>
                <view class="search-btn">
                    <button class="search-btn" type="default" @click.stop="searchClubList">搜索</button>
                </view>
            </view>
            <view class="club-main">
                <view v-if="isEmpty" class="empty-container">
                    <image class="club-empty-image"
                        src="https://img.caimei365.com/group1/M00/03/71/Cmis2F3wna6AY2ZjAABpmnBICH4247.png"
                        mode="aspectFit"></image>
                    <view class="txt">暂无机构数据</view>
                </view> 
                <view v-else class="club-list">
                    <scroll-view scroll-y="true">
                        <view class="list" v-for="(club, index) in clubList" :key="index">
                            <view class="club-list-top">
                                <view class="list-left">
                                    <view class="list-head">
                                        <image :src="
            											club.headpic
            												? club.headpic
            												: 'https://static.caimei365.com/app/img/icon/icon-club@3x.png'
            										" mode=""></image>
                                    </view>
                                </view>
                                <view class="list-item">
                                    <view class="list-title">
                                        <text class="list-name">
                                            {{ club.name }}
                                        </text>
                                        <text class="tags"
                                            v-if="club.vipFlag == 0 && club.userIdentity === 2">VIP</text>
                                        <text class="tags sv" v-if="club.vipFlag == 1">SVIP</text>
                                        <text class="list-hist" @click.stop="handleClickOper(5, club)"><text
                                                class="iconfont icon-dingdanliebiao"></text>订单列表</text>
                                    </view>
                                    <view class="list-opea">
                                        <text class="tags sm" @click.stop="
            											this.$api.navigateTo('/pages/service/service?id=1041&title=标签说明')
            										">{{ club.activeState }} <text class="iconfont icon-xiayibu"></text></text>
                                        <text class="tags sm" @click.stop="
            											this.$api.navigateTo('/pages/service/service?id=1041&title=标签说明')
            										">{{ club.customerValue }} <text class="iconfont icon-xiayibu"></text></text>
                                    </view>
                                </view>
                            </view>
                            <view class="club-list-bot">
                                <view class="btn" @click.stop="handleClickOper(1, club)"> <text
                                        class="iconfont icon-lijixiadan"></text> 立即下单</view>
                                <!-- 							<view class="btn" @click.stop="handleClickOper(3, club)"> <text class="iconfont icon-zaicigoumai1"></text> 再次购买</view>
            							<view class="btn" @click.stop="handleClickOper(6, club)"> <text class="iconfont icon-youhuiquan"></text> 购买优惠券</view>
            							<view class="btn" @click.stop="handleShowBubble(club,index)"> 
            								<text class="iconfont icon-gengduo2"></text> 
            								<view class="btn-bubble" v-if="currentIndex === index && club.bubble">
            									<view class="btn-view border" @click.stop="handleClickOper(2, club)">
            										<text class="iconfont icon-ershouxiadan"></text> 二手下单
            									</view>
            									<view class="btn-view" @click.stop="handleClickOper(4, club)">
            										<text class="iconfont icon-chongzhixiadingjin"></text> 充值/下订金
            									</view>
            								</view>
            							</view> -->
                            </view>
                        </view>
                        <!--加载loadding-->
                        <tui-loadmore :visible="loadding" :index="3" type="black" />
                        <tui-nomore :visible="!pullUpOn" :backgroundColor="'#ffffff'" :text="nomoreText" />
                        <!--加载loadding-->
                    </scroll-view>
                </view>
            </view>
        </template>
    </view>
</template>

<script>
    import authorize from '@/common/config/authorize.js'
    const defaultListQuery = {
        userIdentity: '',
        name: '',
        pageNum: 1,
        pageSize: 10,
        spId: 0,
        status: 66,
        type: 1,
        groupServiceId: 0
    }
    export default {
        components: {},
        data() {
            return {
                skeletonShow:true,
                isShowClose: false,
                isEmpty: false,
                nomoreText: '上拉显示更多',
                hasNextPage: false,
                loadding: false,
                pullUpOn: true,
                pullFlag: true,
                scrollHeight: '',
                currPage: '', //当前页面
                prevPage: '', //上一个页面
                clubList: [],
                listQuery: Object.assign({}, defaultListQuery),
                currentIndex: 0
            }
        },
        onLoad() {},
        methods: {
            async initGetStotage() {
                // 初始化
                const userInfo = await this.$api.getStorage()
                this.listQuery.spId = userInfo.serviceProviderId ? userInfo.serviceProviderId : 0
                this.GetSellerClubList()
                setTimeout(()=>{
                    this.skeletonShow = false
                },1000)
            },
            searchClubList() {
                // 搜索
                this.GetSellerClubList()
            },
            GetSellerClubList() {
                this.listQuery.pageNum = 1
                this.SellerService.GetSellerClubList(this.listQuery)
                    .then(response => {
                        let data = response.data
                        if (data.list && data.list.length > 0) {
                            this.isEmpty = false
                            this.hasNextPage = response.data.hasNextPage
                            this.clubList = data.list.map((el, index) => {
                                el.bubble = false
                                return el
                            })
                            this.pullFlag = false
                            setTimeout(() => {
                                this.pullFlag = true
                            }, 500)
                            if (this.hasNextPage) {
                                this.pullUpOn = false
                                this.nomoreText = '上拉显示更多'
                            } else {
                                this.pullUpOn = true
                                this.loadding = false
                                this.nomoreText = '已至底部'
                            }
                        } else {
                            this.isEmpty = true
                        }
                    })
                    .catch(error => {
                        this.$util.msg(error.msg, 2000)
                    })
            },
            getOnReachBottomData() {
                this.listQuery.pageNum += 1
                this.SellerService.GetSellerClubList(this.listQuery)
                    .then(response => {
                        let data = response.data
                        if (data.list && data.list.length > 0) {
                            this.hasNextPage = response.data.hasNextPage
                            this.clubList = this.clubList.concat(data.list)
                            this.clubList = this.clubList.map((el, index) => {
                                el.bubble = false
                                return el
                            })
                            this.pullFlag = false // 防上拉暴滑
                            setTimeout(() => {
                                this.pullFlag = true
                            }, 500)
                            if (this.hasNextPage) {
                                this.pullUpOn = false
                                this.nomoreText = '上拉显示更多'
                            } else {
                                this.pullUpOn = false
                                this.loadding = false
                                this.nomoreText = '已至底部'
                            }
                        }
                    })
                    .catch(error => {
                        this.$util.msg(error.msg, 2000)
                    })
            },
            onShowClose() {
                //输入框失去焦点时触发
                if (this.listQuery.name != '') {
                    this.isShowClose = true
                } else {
                    this.isShowClose = false
                }
            },
            delInputText() {
                //清除输入框内容
                this.listQuery.name = ''
                this.isShowClose = false
            },
            handleClickOper(type, club) {
                const pathMap = {
                    1: '/pages/seller/cart/immediately',
                    2: '/pages/seller/cart/second',
                    3: '/pages/seller/cart/buyagain',
                    4: '/pages/seller/order/create-recharge-order',
                    5: '/pages/seller/order/order-historylist?listType=0',
                    6: '/pages/seller/cart/coupon',
                }
                this.$api.setStorage('orderUserInfo', club)
                this.$api.navigateTo(pathMap[type])
            },
            handleShowBubble(club, index) {
                this.currentIndex = index
                club.bubble = !club.bubble
            }
        },
        onReachBottom() {
            if (this.hasNextPage) {
                this.loadding = true
                this.pullUpOn = true
                this.getOnReachBottomData()
            }
        },
        onShow() {
            this.initGetStotage()
        }
    }
</script>

<style lang="scss">
    page {
        height: auto;
    }

    page,
    .container {
        /* padding-bottom: 120upx; */
        background: #f7f7f7;
    }

    .container {
        position: relative;
    }

    .club-search {
        height: 64rpx;
        width: 702rpx;
        padding: 24rpx;
        background: #ffffff;
        display: flex;
        align-items: center;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 999;

        .search-from {
            width: 582rpx;
            height: 64rpx;
            background: #f7f7f7;
            border-radius: 32rpx;
            float: left;
            position: relative;

            .icon-iconfonticonfontsousuo1 {
                width: 64rpx;
                height: 64rpx;
                line-height: 64rpx;
                text-align: center;
                display: block;
                font-size: $font-size-38;
                float: left;
                color: #999999;
            }

            .icon-shanchu1 {
                font-size: $font-size-32;
                color: #999999;
                position: absolute;
                width: 64rpx;
                height: 64rpx;
                line-height: 64rpx;
                text-align: center;
                top: 0;
                right: 0;
                z-index: 10;
            }

            .input {
                width: 500rpx;
                height: 64rpx;
                float: left;
                line-height: 64rpx;
                color: $text-color;
                font-size: $font-size-24;
            }
        }

        .search-btn {
            width: 120rpx;
            line-height: 64rpx;
            text-align: center;
            font-size: $font-size-28;
            color: $color-system;
            float: left;
            background: #ffffff;
        }
    }

    .club-main {
        padding-top: 122rpx;

        .list {
            align-items: center;
            width: 702rpx;
            height: auto;
            padding: 24rpx;
            background: #ffffff;
            position: relative;
            border-bottom: 1px solid #ebebeb;
            float: left;

            .club-list-top {
                width: 100%;
                height: 140rpx;
                float: left;
                display: flex;
                align-items: center;

                .list-left {
                    height: 140rpx;
                    flex: 2;
                    margin-right: 10rpx;

                    .list-head {
                        width: 140rpx;
                        height: 140rpx;
                        border-radius: 14rpx;

                        image {
                            width: 140rpx;
                            height: 140rpx;
                            border-radius: 14rpx;
                        }
                    }
                }

                .list-item {
                    height: 140rpx;
                    flex: 8;
                    display: flex;
                    flex-direction: column;

                    .list-title {
                        flex: 2;
                        line-height: 80rpx;
                        width: 100%;
                        font-size: $font-size-28;
                        color: $text-color;
                        padding-left: 11rpx;
                        flex-direction: row;
                        justify-content: flex-start;

                        .list-name {
                            min-width: 100rpx;
                            display: block;
                            float: left;
                            text-align: left;
                            -o-text-overflow: ellipsis;
                            text-overflow: ellipsis;
                            display: -webkit-box;
                            word-break: break-all;
                            -webkit-box-orient: vertical;
                            -webkit-line-clamp: 1;
                            overflow: hidden;
                        }

                        .tags {
                            display: inline-block;
                            height: 36rpx;
                            padding: 0 15rpx;
                            border-radius: 8rpx;
                            background: #f0cb72;
                            font-size: $font-size-22;
                            color: #4e4539;
                            text-align: center;
                            line-height: 36rpx;
                            margin-left: 10rpx;
                            margin-right: 10rpx;

                            &.sv {
                                background: #333333;
                                color: #f0cb72;
                            }
                        }

                        .list-hist {
                            display: block;
                            float: right;
                            color: #1890F9;
                            font-size: $font-size-24;
                            text-align: right;
                            padding-right: 30rpx;

                            .icon-dingdanxuanzhong {
                                font-size: $font-size-34;
                                color: #1890F9;
                            }
                        }
                    }

                    .list-opea {
                        width: 100%;
                        display: flex;
                        flex: 4;
                        color: #166ce1;
                        flex-direction: row;
                        align-items: center;

                        .tags {
                            display: inline-block;
                            height: 36rpx;
                            padding: 0 15rpx;
                            border-radius: 8rpx;
                            background: #f0cb72;
                            font-size: $font-size-22;
                            color: #4e4539;
                            text-align: center;
                            line-height: 36rpx;
                            margin-left: 10rpx;
                            margin-right: 10rpx;

                            &.sv {
                                background: #333333;
                                color: #f0cb72;
                            }

                            &.sm {
                                display: inline-block;
                                height: 36rpx;
                                box-sizing: border-box;
                                padding: 0 8rpx 0 15rpx;
                                border-radius: 8rpx;
                                background: #faede5;
                                font-size: $font-size-22;
                                color: $color-system;
                                text-align: center;
                                line-height: 36rpx;
                                margin-right: 10rpx;

                                .icon-xiayibu {
                                    font-size: 20rpx;
                                    margin-left: 10rpx;
                                }
                            }
                        }
                    }
                }
            }

            .club-list-bot {
                width: 100%;
                height: 80rpx;
                float: left;
                background-color: #F7F7F7;
                border-radius: 8rpx;
                margin-top: 20rpx;

                .btn {
                    height: 80rpx;
                    box-sizing: border-box;
                    line-height: 80rpx;
                    padding: 0 28rpx;
                    font-size: $font-size-24;
                    color: #333333;
                    text-align: center;
                    float: left;
                    position: relative;

                    // &:nth-child(1){
                    // 	&:before{
                    // 		content: '';
                    // 		width: 1px;
                    // 		height: 20rpx;
                    // 		background-color: #B2B2B2;
                    // 		position: absolute;
                    // 		right: 0;
                    // 		top: 30rpx;
                    // 	}
                    // }
                    &:nth-child(2) {
                        &:before {
                            content: '';
                            width: 1px;
                            height: 20rpx;
                            background-color: #B2B2B2;
                            position: absolute;
                            right: 0;
                            top: 30rpx;
                        }
                    }

                    &:nth-child(3) {
                        &:before {
                            content: '';
                            width: 1px;
                            height: 20rpx;
                            background-color: #B2B2B2;
                            position: absolute;
                            right: 0;
                            top: 30rpx;
                        }
                    }

                    &:last-child {
                        padding: 0 36rpx;

                        .iconfont {
                            font-weight: bold;
                        }

                        .btn-bubble {
                            width: 200rpx;
                            height: 160rpx;
                            background: rgba(51, 51, 51, 0.8);
                            position: absolute;
                            top: -154rpx;
                            right: 0;
                            border-radius: 8rpx;

                            &:before {
                                content: '';
                                width: 0;
                                height: 0;
                                border: 15rpx solid transparent;
                                border-top: 15rpx solid rgba(51, 51, 51, 0.8);
                                position: absolute;
                                bottom: -28rpx;
                                right: 42rpx;
                            }

                            .btn-view {
                                width: 100%;
                                height: 80rpx;
                                box-sizing: border-box;
                                line-height: 80rpx;
                                font-size: $font-size-24;
                                color: #FFFFFF;
                                text-align: center;
                                float: left;

                                .iconfont {
                                    font-size: 28rpx;
                                    color: #FFFFFF;
                                    margin-right: 5rpx;
                                    font-weight: normal;
                                }

                                &.border {
                                    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
                                }
                            }
                        }
                    }

                    .iconfont {
                        font-size: 30rpx;
                        color: #333333;
                        margin-right: 5rpx;
                    }
                }
            }
        }
    }
</style>