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

<template>
    <view class="container club clearfix" :style="{ paddingBottom: isIphoneX ? '140rpx' : '98rpx' }">
        <view class="club-search clearfix" :style="{ paddingTop: StatusBar + 'px' }">
            <view class="search-top" :style="{ height: CustomBar - StatusBar + 'px' }">
                <view
                    class="search-icon"
                    :style="{
                        width: CustomBar - StatusBar + 'px',
                        height: CustomBar - StatusBar + 'px',
                        lineHeight: CustomBar - StatusBar + 'px;'
                    }"
                >
                    <text v-if="isShowIndex" @click="handleNavigateIndex" class="iconfont icon-shouye"></text>
                    <text v-else @click="handleNavigateBack" class="iconfont icon-fanhui"></text>
                </view>
                <view class="title">机构列表</view>
            </view>
            <view style="display: flex;align-items: center;">
                <view
                    class="search-from name"
                    :style="{ height: capsule.height + 'px', borderRadius: capsule.height / 2 + 'px' }"
                >
                    <text
                        :style="{
                            width: capsule.height + 'px',
                            height: capsule.height + 'px',
                            lineHeight: capsule.height + 'px;'
                        }"
                        class="iconfont icon-iconfonticonfontsousuo1"
                    ></text>
                    <input
                        class="input"
                        type="text"
                        confirm-type="search"
                        v-model="listQuery.name"
                        @input="onShowClose"
                        @confirm="GetSellerClubList()"
                        placeholder="机构名称/联系人/手机号"
                        maxlength="16"
                        :style="{ lineHeight: capsule.height + 'px' }"
                    />
                    <text class="iconfont icon-shanchu1" v-if="isShowClose" @click="delInputText()"></text>
                </view>
                <view
                    class="search-btn"
                    :style="{
                        width: CustomBar - StatusBar + 'px',
                        height: capsule.height + 'px',
                        lineHeight: capsule.height + 'px;'
                    }"
                    v-if="isManage && tabSmallCurrentIndex == 1"
                    @click="showRightDrawer"
                >
                    <text class="iconfont icon-shaixuan"></text>
                </view>
                <view class="search-btn" @click="GetSellerClubList" v-if="!isManage || tabSmallCurrentIndex != 1">搜索</view>
            </view>
            <view class="search-tab">
                <view
                    class="tab-item"
                    v-for="(item, index) in listTab"
                    :key="index"
                    :class="{ current: tabCurrentNum === index }"
                    @click="tabCurrentClick(index)"
                >
                    <text class="item-text">
                        {{ item.name }}
                        <text class="line"></text>
                    </text>
                </view>
            </view>
            <view class="search-smalltab">
                <view
                    class="tab-item"
                    v-for="(item, index) in listItemTab"
                    :key="index"
                    :class="{ current: tabSmallCurrentIndex === index }"
                    @click="tabSmallCurrentClick(index)"
                >
                    <text class="item-text">{{ item.name }}</text>
                </view>
            </view>
        </view>
        <view class="club-main" style="margin-top: 508rpx;">
            <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="list-cell-top">
                            <view class="list-logo">
                                <image
                                    :src="
                                        club.headpic
                                            ? club.headpic
                                            : 'https://static.caimei365.com/app/img/icon/icon-club@3x.png'
                                    "
                                    mode=""
                                ></image>
                                <text class="list-id">编号:{{ club.newClubId }}</text>
                            </view>
                            <view class="list-content">
                                <view class="list-name">
                                    {{ club.userIdentity === 2 ? club.name : club.linkMan }}
                                    <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="tags xf" v-if="club.newDeal === 1">新分配</text>
                                </view>
                                <view class="list-tags">
                                    <text
                                        class="tags"
                                        @click.stop="
                                            this.$api.navigateTo('/pages/service/service?id=1041&title=标签说明')
                                        "
                                    >
                                        {{ club.activeState }}
                                        <text class="iconfont icon-xiayibu"></text>
                                    </text>
                                    <text
                                        class="tags"
                                        @click.stop="
                                            this.$api.navigateTo('/pages/service/service?id=1041&title=标签说明')
                                        "
                                    >
                                        {{ club.customerValue }}
                                        <text class="iconfont icon-xiayibu"></text>
                                    </text>
                                    <text class="tags-or" @click.stop="handleOrderHistory(club)">
                                        <text class="iconfont icon-dingdan"></text>
                                        订单列表
                                        <text
                                            v-if="club.orderNum > 0"
                                            class="opea-badge uni-badge uni-badge-error uni-small uni-badge--small icon-num"
                                        >
                                            {{ showBadge(club.orderNum) }}
                                        </text>
                                    </text>
                                </view>
                                <view class="list-ntel" v-if="tabSmallCurrentIndex === 1">
                                    <text class="list-link">销售：{{ club.serviceName ? club.serviceName : '' }}</text>
                                </view>
                                <view class="list-ntel" v-if="tabSmallCurrentIndex !== 1">
                                    <text class="list-link">{{ club.linkMan ? club.linkMan : '' }}</text>
                                    <text class="list-texl">{{ club.contractMobile ? club.contractMobile : '' }}</text>
                                </view>
                                <view class="list-ntel" v-if="listQuery.type === 6">
                                    <text class="list-link">分配时间：{{ club.providerTime | dateConversion }}</text>
                                </view>
                            </view>
                        </view>
                        <view class="club-list-bot">
                            <template v-if="tabSmallCurrentIndex === 0">
                                <view class="btn" @click.stop="handleClickOper(1, club)">
                                    <text class="iconfont icon-jigouhuaxiang"></text>
                                    机构画像
                                </view>
                                <view class="btn" @click.stop="handleClickOper(2, club)">
                                    <text class="iconfont icon-tianxie"></text>
                                    填写咨询记录
                                </view>
                                <view class="btn" @click.stop="handleClickOper(3, club)">
                                    <text class="iconfont icon-shangcheng"></text>
                                    商城访问记录
                                </view>
                                <view
                                    class="btn"
                                    v-if="tabSmallCurrentIndex === 0"
                                    @click.stop="handleShowBubble(club, index)"
                                >
                                    <text class="iconfont icon-gengduo2"></text>
                                    <view
                                        class="btn-bubble"
                                        :style="{
                                            height: isManage ? '160rpx' : '80rpx',
                                            top: isManage ? '-154rpx' : '-76rpx'
                                        }"
                                        v-if="currentIndex === index && club.bubble"
                                    >
                                        <view class="btn-view border" @click.stop="handleClickOper(4, club)">
                                            <text class="iconfont icon-xiugaiziliao"></text>
                                            修改资料
                                        </view>
                                        <view
                                            class="btn-view"
                                            v-if="isManage && club.serviceProviderId != 1342"
                                            @click.stop="handleClickOper(5, club)"
                                        >
                                            <text class="iconfont icon-xiaoshou"></text>
                                            更换协销
                                        </view>
                                    </view>
                                </view>
                            </template>
                            <template v-if="tabSmallCurrentIndex === 1">
                                <view class="btn" @click.stop="handleClickOper(1, club)">
                                    <text class="iconfont icon-jigouhuaxiang"></text>
                                    机构画像
                                </view>
                                <view class="btn" @click.stop="handleClickOper(3, club)">
                                    <text class="iconfont icon-tianxie"></text>
                                    商城访问记录
                                </view>
                                <view
                                    class="btn none"
                                    v-if="isManage && club.serviceProviderId != 1342"
                                    @click.stop="handleClickOper(5, club)"
                                >
                                    <text class="iconfont icon-xiaoshou"></text>
                                    更换协销
                                </view>
                            </template>
                        </view>
                    </view>
                    <!--加载loadding-->
                    <tui-loadmore :visible="loadding" :index="3" type="black"></tui-loadmore>
                    <tui-nomore :visible="!pullUpOn" bgcolor="#f7f7f7" :text="nomoreText"></tui-nomore>
                </scroll-view>
            </view>
        </view>
        <view class="tabBar" :style="{ height: isIphoneX ? '140rpx' : '98rpx' }" v-if="tabCurrentNum === 0">
            <view class="tabBar_list" :style="{ paddingBottom: isIphoneX ? '40rpx' : '' }">
                <view class="tabBar_item" :class="{ current: tabCurrentIndex === 0 }" @click="tabClick(0)">
                    <text class="iconfont icon-shenhetongguo"></text>
                    <view class="tabBar_name">待升级</view>
                </view>
                <view class="tabBar_item" :class="{ current1: tabCurrentIndex === 1 }" @click="tabClick(1)">
                    <text class="iconfont icon-lishidingdan"></text>
                    <view class="tabBar_name">升级中</view>
                </view>
                <view class="tabBar_item" :class="{ current2: tabCurrentIndex === 2 }" @click="tabClick(2)">
                    <text class="iconfont icon-shenhebutongguo"></text>
                    <view class="tabBar_name">升级失败</view>
                </view>
            </view>
        </view>
        <!-- 筛选抽屉 -->
        <cm-clubDrawer
            ref="screendrawer"
            v-if="rightDrawer"
            :rightDrawer="rightDrawer"
            @handSearchConfirm="handSearchConfirmData"
        ></cm-clubDrawer>
        <!-- 选择弹窗 -->
        <cm-seller-popup
            ref="cmresellerpopup"
            v-if="isSellerpopup"
            :show="isSellerpopup"
            @handleChoiceaSeller="handleChoiceaSellerData"
        ></cm-seller-popup>
    </view>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import authorize from '@/common/config/authorize.js'
import wxLogin from '@/common/config/wxLogin.js'
import tuiLoadmore from '@/components/tui-components/loadmore/loadmore'
import tuiNomore from '@/components/tui-components/nomore/nomore'
import cmClubDrawer from '../components/cm-club-drawer'
import cmSellerPopup from '../components/cm-seller-popup'

const defaultListQuery = {
    userIdentity: 4,
    name: '',
    pageNum: 1,
    pageSize: 10,
    spId: 0,
    status: 90,
    type: 1,
    groupServiceId: 0
}
export default {
    components: {
        tuiLoadmore,
        tuiNomore,
        cmClubDrawer,
        cmSellerPopup
    },
    data() {
        return {
            listTab: [{ name: '个人机构' }, { name: '资质机构' }],
            listItemTab: [{ name: '我的机构' }, { name: '组员机构' }, { name: '新分配机构' }],
            listQuery: Object.assign({}, defaultListQuery),
            isShowClose: false,
            isEmpty: false,
            nomoreText: '上拉显示更多',
            pageNum: 1,
            pageSize: 10,
            hasNextPage: false,
            loadding: false,
            pullUpOn: true,
            pullFlag: true,
            tabCurrentNum: 0,
            tabCurrentIndex: 0,
            tabSmallCurrentIndex: 0,
            clubList: [],
            isIphoneX: this.$store.state.isIphoneX,
            CustomBar: this.CustomBar,
            StatusBar: this.StatusBar,
            capsule: this.capsule,
            show_index: 0, //控制显示那个组件
            rightDrawer: false,
            isSellerpopup: false,
            salesParams: {
                choseServiceId: 0,
                clubId: 0,
                spId: 0
            },
            isShowIndex: false,
            currentIndex: 0
        }
    },
    filters: {
        dateConversion(val) {
            const date = new Date(val)
            const setZero = val => (val < 10 ? '0' + val : val)
            return `${date.getFullYear()}-${setZero(date.getMonth() + 1)}-${setZero(date.getDate())} ${setZero(
                date.getHours()
            )}:${setZero(date.getMinutes())}:${setZero(date.getSeconds())}`
        }
    },
    onLoad(option) {
        if (option.type === 'wechat') {
            this.isShowIndex = true
        }
        if (!this.isManage) {
            this.listItemTab = this.listItemTab.filter((e, i) => i === 2)
        }
    },
    computed: {
        ...mapState(['isManage'])
    },
    methods: {
        async initGetStotage() {
            // 初始化
            const userInfo = await this.$api.getStorage()
            this.listQuery.spId = userInfo.serviceProviderId ? userInfo.serviceProviderId : 0
            this.salesParams.choseServiceId = userInfo.serviceProviderId ? userInfo.serviceProviderId : 0
            this.GetSellerClubList()
        },
        GetSellerClubList() {
            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.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)
                })
        },
        userClubChoseSales(param) {
            //分配或更换协销
            this.SellerService.userClubChoseSales(param)
                .then(response => {
                    this.$util.msg('操作成功~', 2000, true, 'success')
                    setTimeout(() => {
                        this.GetSellerClubList()
                    }, 1000)
                })
                .catch(error => {
                    console.log('分配协销异常')
                })
        },
        tabClick(index) {
            //tab切换
            this.tabCurrentIndex = index
            switch (index) {
                case 0:
                    this.listQuery.status = 90
                    break
                case 1:
                    this.listQuery.status = 1
                    break
                case 2:
                    this.listQuery.status = 92
                    break
            }
            this.GetSellerClubList()
        },
        tabCurrentClick(index) {
            //商品详情&&供应商信息tab切换
            this.tabCurrentNum = index
            switch (index) {
                case 0:
                    this.tabCurrentIndex = 0
                    this.listQuery.userIdentity = 4
                    this.listQuery.status = 90
                    this.listQuery.pageNum = 1
                    this.GetSellerClubList()
                    break
                case 1:
                    this.listQuery.pageNum = 1
                    this.listQuery.userIdentity = 2
                    this.listQuery.status = 90
                    this.GetSellerClubList()
                    break
            }
        },
        tabSmallCurrentClick(index) {
            //商品详情&&供应商信息tab切换
            this.tabSmallCurrentIndex = index
            switch (index) {
                case 0:
                    this.tabCurrentIndex = 0
                    this.listQuery.type = this.isManage ? 1 : 6
                    this.listQuery.status = 90
                    this.listQuery.pageNum = 1
                    this.listQuery.groupServiceId = 0
                    this.GetSellerClubList()
                    break
                case 1:
                    this.listQuery.type = 2
                    this.listQuery.status = 90
                    this.listQuery.pageNum = 1
                    this.listQuery.groupServiceId = 0
                    this.GetSellerClubList()
                    break
                case 2:
                    this.listQuery.type = 6
                    this.listQuery.status = 90
                    this.listQuery.pageNum = 1
                    this.listQuery.groupServiceId = 0
                    this.GetSellerClubList()
                    break
            }
        },
        handSearchConfirmData(data) {
            console.log('确定筛选', data)
            //确定筛选
            this.listQuery.groupServiceId = data.serviceProviderId
            this.GetSellerClubList()
        },
        handleChoiceaSellerData(data) {
            // 确定搜索
            this.salesParams.spId = data.serviceProviderId
            this.userClubChoseSales(this.salesParams)
        },
        showRightDrawer() {
            //显示筛选抽屉
            this.rightDrawer = true
        },
        // 按钮操作
        handleClickOper(type, club) {
            /**
             * 1：机构画像 2：填写咨询记录 3：商城访问记录 4：修改资料 5：更换协销
             * */

            console.log('type', type)
            switch (type) {
                case 1:
                    this.$api.navigateTo(`/pages/seller/club/club-portrait?userId=${club.userId}`)
                    break
                case 2:
                    this.$api.navigateTo(`/pages/seller/remarks/add?userId=${club.userId}`)
                    break
                case 3:
                    this.$api.navigateTo(`/pages/seller/club/club-info?clubId=${club.clubId}`)
                    break
                case 4:
                    this.handleReturnPath(club)
                    break
                case 5:
                    this.handleReplaceClub(club)
                    break
            }
        },
        handleReplaceClub(club) {
            //更换协销
            this.salesParams.clubId = club.clubId
            this.isSellerpopup = true
        },
        handleReturnPath(club) {
            //修改机构资料
            const tabMap = {
                0: `/pages/seller/login/apply?userID=${club.userId}`,
                1: `/pages/seller/login/information?userID=${club.userId}`
            }
            this.$api.navigateTo(tabMap[this.tabCurrentNum])
        },
        handleOrderHistory(club) {
            //跳转机构历史订单
            this.$api.setStorage('orderUserInfo', club)
            if (this.tabSmallCurrentIndex === 1 || this.tabSmallCurrentIndex === 2) {
                // 查看组员机构历史订单
                this.$api.navigateTo(
                    `/pages/seller/order/order-historylist?clubId=${club.clubId}&listType=0&authType=${
                        this.tabSmallCurrentIndex
                    }`
                )
            } else {
                this.$api.navigateTo(`/pages/seller/order/order-historylist?clubId=${club.clubId}&listType=0`)
            }
        },
        onShowClose() {
            //输入框失去焦点时触发
            if (this.listQuery.name != '') {
                this.isShowClose = true
            } else {
                this.isShowClose = false
            }
        },
        delInputText() {
            //清除输入框内容
            this.listQuery.name = ''
            this.isShowClose = false
        },
        showBadge(n) {
            let num = ''
            if (n > 100) {
                num = 99
            } else {
                num = n
            }
            return num
        },
        handleNavigateBack() {
            this.$api.navigateBack(1)
        },
        handleNavigateIndex() {
            this.$api.navigateTo('/pages/seller/index/index')
        },
        handleShowBubble(club, index) {
            this.currentIndex = index
            club.bubble = !club.bubble
        }
    },
    onReachBottom() {
        if (this.hasNextPage) {
            this.loadding = true
            this.pullUpOn = true
            this.getOnReachBottomData()
        }
    },
    onShow() {
        this.listQuery.type = this.isManage ? 1 : 6
        wxLogin.wxLoginAuthorize()
        this.initGetStotage()
    }
}
</script>

<style lang="scss">
page {
    height: auto;
}
page,
.container {
    /* padding-bottom: 120upx; */
    background: #f7f7f7;
}
.container {
    position: relative;
}
.club-search {
    height: auto;
    width: 100%;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    .search-top {
        flex: 1;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        position: relative;
        .title {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        .search-icon {
            text-align: center;
            float: left;
            .icon-fanhui {
                font-size: 44rpx;
                color: #333333;
            }
            .icon-shouye {
                font-size: 44rpx;
                color: #333333;
            }
        }
    }
    .search-from {
        background: #f7f7f7;
        position: relative;
        width: 604rpx;
        margin: 50rpx 20rpx 40rpx 24rpx;
        .input {
            width: 300rpx;
            height: 100%;
            float: left;
            color: $text-color;
            font-size: $font-size-24;
        }
        .icon-iconfonticonfontsousuo1 {
            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;
        }
    }
    .search-btn {
        text-align: center;
        font-size: $font-size-28;
        color: $color-system;
        float: left;
        background: #ffffff;
        .icon-shaixuan {
            font-size: 44rpx;
            color: #333333;
        }
    }
    .search-tab {
        height: 80rpx;
        display: flex;
        flex: 1;
        background: #ffffff;
        border-bottom: 1px solid #efefef;
        .tab-item {
            flex: 1;
            line-height: 80rpx;
            text-align: center;
            color: $text-color;
            font-size: $font-size-28;
            position: relative;
            .item-text {
                padding: 10rpx 0;
                border-bottom: 2px solid #ffffff;
            }
            &:nth-child(1)::before {
                content: '';
                width: 2px;
                height: 50rpx;
                position: absolute;
                right: 0;
                top: 15rpx;
                background: #ebebeb;
            }
            &.current {
                color: $color-system;
                .item-text {
                    border-color: $color-system;
                }
            }
        }
    }
    .search-smalltab {
        width: 100%;
        height: 104rpx;
        background: #ffffff;
        box-sizing: border-box;
        padding: 20rpx 24rpx;
        .tab-item {
            width: 168rpx;
            height: 64rpx;
            line-height: 64rpx;
            text-align: center;
            color: $text-color;
            font-size: $font-size-28;
            float: left;
            border-radius: 32rpx;
            border: 1px solid #b2b2b2;
            margin-right: 32rpx;
            &.current {
                color: #ff5b00;
                border: 1px solid #ff5b00;
            }
        }
    }
}
.club-main {
    .list {
        width: 100%;
        height: 320rpx;
        padding: 24rpx;
        box-sizing: border-box;
        background: #ffffff;
        position: relative;
        border-bottom: 1px solid #ebebeb;
        .list-cell-top {
            width: 100%;
            height: 140rpx;
            box-sizing: border-box;
            .list-logo {
                width: 140rpx;
                height: 140rpx;
                float: left;
                position: relative;
                image {
                    width: 140rpx;
                    height: 140rpx;
                    border-radius: 8rpx;
                }
                .list-id {
                    display: inline-block;
                    width: 100%;
                    height: 32rpx;
                    line-height: 32rpx;
                    background: rgba(0, 0, 0, 0.1);
                    color: #333;
                    position: absolute;
                    top: 0;
                    left: 0;
                    box-sizing: border-box;
                    text-align: left;
                    font-size: 20rpx;
                    padding-left: 4rpx;
                    border-radius: 8rpx 8rpx 0 0;
                }
            }
            .list-content {
                width: 530rpx;
                height: 190rpx;
                float: left;
                padding-left: 30rpx;
                .list-name {
                    width: 100%;
                    height: 50rpx;
                    float: left;
                    line-height: 50rpx;
                    text-align: left;
                    font-size: $font-size-26;
                    color: #333333;
                    .tags {
                        display: inline-block;
                        height: 36rpx;
                        box-sizing: border-box;
                        padding: 0 15rpx;
                        border-radius: 8rpx;
                        background: #f0cb72;
                        font-size: $font-size-22;
                        color: #4e4539;
                        text-align: center;
                        line-height: 36rpx;
                        margin-left: 20rpx;
                        margin-top: 7rpx;
                        &.sv {
                            background: #333333;
                            color: #f0cb72;
                        }
                        &.xf {
                            background-color: #f94b4b;
                            color: #ffffff;
                        }
                    }
                }
                .list-tags {
                    width: 100%;
                    height: 36rpx;
                    float: left;
                    line-height: 36rpx;
                    margin: 7rpx 0;
                    .tags {
                        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: 16rpx;
                        .icon-xiayibu {
                            font-size: 20rpx;
                            margin-left: 10rpx;
                        }
                    }
                    .tags-or {
                        display: inline-block;
                        height: 36rpx;
                        box-sizing: border-box;
                        font-size: $font-size-22;
                        color: #1890f9;
                        text-align: center;
                        line-height: 36rpx;
                        position: relative;
                        .opea-badge {
                            position: absolute;
                            right: -30rpx;
                            top: -15rpx;
                        }
                        .icon-xiayibu {
                            font-size: 22rpx;
                            color: #1890f9;
                        }
                    }
                }
                .list-ntel {
                    width: 100%;
                    height: 50rpx;
                    float: left;
                    line-height: 50rpx;
                    text-align: left;
                    font-size: $font-size-24;
                    color: #666666;
                    .list-link {
                        display: inline-block;
                        float: left;
                        margin-right: 12rpx;
                    }
                    .list-texl {
                        display: inline-block;
                        float: left;
                    }
                }
            }
        }
        .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 20rpx;
                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 28rpx;
                    .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: -26rpx;
                            right: 35rpx;
                        }
                        .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);
                            }
                        }
                    }
                }
                &.none {
                    &::before {
                        background-color: #f7f7f7 !important;
                    }
                }
                .iconfont {
                    font-size: 30rpx;
                    color: #333333;
                    margin-right: 5rpx;
                }
            }
        }
    }
}
.tabBar {
    width: 100%;
    height: 98rpx;
    background: #fff;
    border-top: 1px solid #e5e5e5;
    position: fixed;
    bottom: 0px;
    left: 0px;
    right: 0px;
    z-index: 99;
    display: flex;
    align-items: center;
    justify-content: center;
    .tabBar_list {
        width: 86%;
        display: flex;
        justify-content: space-between;
        .tabBar_item {
            width: 120rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            font-size: 20rpx;
            color: #999999;
            &.current {
                color: #166ce1;
                .iconfont {
                    color: #166ce1;
                }
            }
            &.current1 {
                color: #16e15c;
                .iconfont {
                    color: #16e15c;
                }
            }
            &.current2 {
                color: #ff0000;
                .iconfont {
                    color: #ff0000;
                }
            }
            .iconfont {
                width: 48rpx;
                height: 48rpx;
                display: block;
                margin-bottom: 2rpx;
                text-align: center;
                font-size: 46rpx;
                color: #999999;
            }
        }
    }
}
.nav_active {
    color: $color-system;
}
</style>