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="searchClubList" placeholder="机构名称/联系人" maxlength="12" />
                    <text class="iconfont icon-shanchu1" v-if="isShowClose" @click="delInputText"></text>
                </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" class="club-list-main">
                        <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.shopPhoto ? 
                                                     club.shopPhoto : 
                                                     'https://static.caimei365.com/app/img/icon/default-head-new.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>
                            </view>
                            <view class="club-list-bot">
                                <view class="btn buy" @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: 84rpx;
        width: 100%;
        box-sizing: border-box;
        padding:0 24rpx 20rpx 24rpx;
        background: #ffffff;
        display: flex;
        align-items: center;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 999;

        .search-from {
            width: 100%;
            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;
            }
        }
    }

    .club-main {
        padding-top: 100rpx;
        .club-list{
            width: 100%;
            .club-list-main{
                width: 100%;
                box-sizing: border-box;
                padding: 0 24rpx;
                .list {
                    align-items: center;
                    width: 100%;
                    height: auto;
                    padding: 18rpx 20rpx;
                    background: #ffffff;
                    position: relative;
                    float: left;
                    margin-bottom: 20rpx;
                    box-sizing: border-box;
                    border-radius: 24rpx;
                    .club-list-top {
                        width: 100%;
                        height: 100rpx;
                        float: left;
                        display: flex;
                        align-items: center;
                
                        .list-left {
                            height: 100rpx;
                            flex: 1;
                            margin-right: 15rpx;
                
                            .list-head {
                                width: 100rpx;
                                height: 100rpx;
                                border-radius: 50%;
                
                                image {
                                    width: 100rpx;
                                    height: 100rpx;
                                    border-radius: 50%;
                                }
                            }
                        }
                
                        .list-item {
                            height: 100rpx;
                            flex: 8;
                            display: flex;
                            flex-direction: column;
                
                            .list-title {
                                flex: 2;
                                line-height: 100rpx;
                                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: #999999;
                                    font-size: $font-size-24;
                                    text-align: right;
                                    padding-right: 30rpx;
                
                                    .icon-dingdanliebiao {
                                        font-size: $font-size-30;
                                        color: #999999;
                                    }
                                }
                            }
                
                            .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: 60rpx;
                        float: left;
                        border-radius: 8rpx;
                
                        .btn {
                            height: 60rpx;
                            box-sizing: border-box;
                            line-height: 60rpx;
                            padding: 0 30rpx;
                            font-size: $font-size-24;
                            background: #F1F1F1;
                            color: #333333; 
                            text-align: center;
                            float: right;
                            position: relative;
                            border-radius: 40rpx;
                            &.buy{
                                background:$btn-confirm;
                                color: #FFFFFF;
                                .iconfont {
                                    color: #FFFFFF;
                                }
                            }
                            &: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>