caimei-applets-caimei/pages/seller/club/club-team-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-main">
                    <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="getList" placeholder="机构名称/联系人/手机号" maxlength="16"
                            :style="{ lineHeight: capsule.height + 'px' }" />
                        <text class="iconfont icon-shanchu1" v-if="isShowClose" @click="delInputText()"></text>
                    </view>
                </view>
            </view>
            <view class="club-main">
                <view class="club-list clearfix" v-if="!isEmpty">
                    <view class="list" v-for="(club, index) in clubList" :key="index">
                        <view class="list-cell-top">
                            <view class="list-logo">
                                <image src="https://static.caimei365.com/app/img/icon/icon-club@3x.png" mode="">
                                </image>
                                <!-- <text class="list-id">编号:{{ club.newClubId }}</text> -->
                                <text class="list-tips">{{ club.userIdentity === 2 ? '资质机构' : '个人机构' }}</text>
                            </view>
                            <view class="list-content">
                                <view class="list-name">
                                    <text
                                        class="list-name-text">{{ club.userIdentity === 2 ? club.name : club.linkMan }}</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="tags xf" v-if="club.newDeal === 1">新分配</text>
                                </view>
                                <view class="list-ntel">
                                    <text class="list-link">服务商：{{ club.serviceName ? club.serviceName : '' }}</text>
                                </view>
                                <view class="list-ntel">
                                    <text class="list-link">{{ club.linkMan ? club.linkMan : '' }}</text>
                                    <text class="list-texl" @click="handlePhone(club.contractMobile)">
                                        {{ 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">
                            <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-lijixiadan"></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>
                            </view>
                            <view class="btn" @click.stop="handleClickOper(3, club)">
                                <text class="iconfont icon-tianxie"></text> 访问记录
                            </view>
                            <view class="btn none" @click.stop="handleClickOper(4, club)">
                                <text class="iconfont icon-xiaoshou"></text> 更换服务商
                            </view>
                        </view>
                    </view>
                    <!--加载loadding-->
                    <tui-loadmore :visible="loadding" :index="3" type="black" />
                    <tui-nomore :visible="!pullUpOn" bgcolor="#f7f7f7" :text="nomoreText" />
                </view>
                <view v-else 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>
        </template>
        <!-- 选择弹窗 -->
        <cm-seller-popup ref="cmresellerpopup" :show="isSellerpopup" @handleChoiceaSeller="handleChoiceaSellerData" />
    </view>
</template>

<script>
    import { mapState, mapMutations } from 'vuex'
    import authorize from '@/common/config/authorize.js'
    import wxLogin from '@/common/config/wxLogin.js'
    import cmSellerPopup from '../components/cm-seller-popup'

    const defaultListQuery = {
        userIdentity: '',
        name: '',
        pageNum: 1,
        pageSize: 10,
        spId: 0,
        status: '',
        type: 1,
        groupServiceId: 0,
    }
    export default {
        components: {
            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,
                skeletonShow: true
            }
        },
        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) {

            this.initGetStotage(option)
        },
        computed: {
            ...mapState(['isManage'])
        },
        methods: {
            async initGetStotage(option) {
                // 初始化
                const userInfo = await this.$api.getStorage()
                uni.setNavigationBarTitle({ title: `${option.name}的机构` })
                this.listQuery.type = this.isManage ? 2 : 6
                this.listQuery.groupServiceId = option.groupServiceId
                this.listQuery.spId = userInfo.serviceProviderId ? userInfo.serviceProviderId : 0
                this.salesParams.choseServiceId = userInfo.serviceProviderId ? userInfo.serviceProviderId : 0
                this.getList()
                setTimeout(() => {
                    this.skeletonShow = false
                }, 1000)
            },
            async getList() {
                try {
                    this.listQuery.pageNum = 1
                    const res = await this.SellerService.GetSellerClubList(this.listQuery)
                    const data = res.data
                    if (data.list && data.list.length > 0) {
                        this.isEmpty = false
                        this.hasNextPage = 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) {
                    //TODO handle the exception
                    this.$util.msg(error.msg, 2000)
                }
            },
            async getOnReachBottomData() {
                try {
                    this.listQuery.pageNum++
                    const res = await this.SellerService.GetSellerClubList(this.listQuery)
                    const data = res.data
                    if (data.list && data.list.length > 0) {
                        this.hasNextPage = 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) {
                    //TODO handle the exception
                    this.$util.msg(error.msg, 2000)
                }
            },
            userClubChoseSales(param) {
                //分配或更换服务商
                this.SellerService.userClubChoseSales(param)
                    .then(response => {
                        this.$util.msg('操作成功~', 2000, true, 'success')
                        setTimeout(() => {
                            this.getList()
                        }, 1000)
                    })
                    .catch(error => {
                        console.log('分配服务商异常')
                    })
            },
            handleChoiceaSellerData(data) {
                // 确定搜索
                this.salesParams.spId = data.serviceProviderId
                this.userClubChoseSales(this.salesParams)
            },
            // 按钮操作
            handleClickOper(type, club) {
                /**
                 * 1：机构画像 2：机构订单 3：访问记录 4：更换服务商 
                 * */
                console.log('type', type)
                switch (type) {
                    case 1:
                        this.$api.navigateTo(`/pages/seller/club/club-portrait?userId=${club.userId}`)
                        break
                    case 2:
                        this.$api.setStorage('orderUserInfo', club)
                        this.$api.navigateTo(
                            `/pages/seller/order/order-historylist?clubId=${club.clubId}&listType=0&authType=1`)
                        break
                    case 3:
                        this.$api.navigateTo(`/pages/seller/club/club-visit?clubId=${club.clubId}`)
                        break
                    case 4:
                        this.handleReplaceClub(club)
                        break
                }
            },
            handleReplaceClub(club) {
                //更换服务商
                this.salesParams.clubId = club.clubId
                this.isSellerpopup = true
            },
            // 拨打电话
            handlePhone(phoneNumber) {
                uni.makePhoneCall({
                    phoneNumber: phoneNumber //拨打电话
                })
            },
            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
            },
            handleShowBubble(club, index) {
                this.currentIndex = index
                club.bubble = !club.bubble
            }
        },
        onReachBottom() {
            if (this.hasNextPage) {
                this.loadding = true
                this.pullUpOn = true
                this.getOnReachBottomData()
            }
        },
        onShow() {
            wxLogin.wxLoginAuthorize()
        }
    }
</script>

<style lang="scss">
    page {
        height: 100%;
        background: #F7F7F7;
    }
    .container {
        height: auto;
        background: #F7F7F7;
        position: relative;
        padding-top: 98rpx;
        box-sizing: border-box;
    }
    .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-main {
            width: 100%;
            height: 80rpx;
            box-sizing: border-box;
            padding: 10rpx 24rpx;

            .search-from {
                background: #f7f7f7;
                position: relative;
                width: 100%;
                height: 100%;
                padding-right: 60rpx;
                box-sizing: border-box;
                padding: 0 10rpx;
                float: left;
                border-radius: 30rpx;

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

                .input {
                    width: 520rpx;
                    height: 100%;
                    float: left;
                    color: $text-color;
                    font-size: $font-size-24;
                    box-sizing: border-box;
                    padding-left: 10rpx;
                }

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

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

                .icon-shaixuan {
                    font-size: 44rpx;
                    color: #333333;
                }
            }
        }
    }

    .club-main {
        width: 100%;
        .club-list {
            width: 100%;
            height: auto;
            box-sizing: border-box;
            padding: 0 15rpx;
        }

        .list {
            width: 100%;
            height: auto;
            padding: 15rpx;
            box-sizing: border-box;
            background: #ffffff;
            position: relative;
            float: left;
            margin-bottom: 15rpx;
            border-radius: 8rpx;
            overflow: hidden;

            .list-cell-top {
                width: 100%;
                height: auto;
                box-sizing: border-box;

                .list-logo {
                    width: 140rpx;
                    height: 140rpx;
                    float: left;
                    position: relative;

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

                    .list-tips {
                        display: inline-block;
                        width: 100%;
                        height: 32rpx;
                        line-height: 32rpx;
                        background: rgba(0, 0, 0, 0.1);
                        color: #333;
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        box-sizing: border-box;
                        text-align: left;
                        font-size: 20rpx;
                        padding-left: 4rpx;
                        border-radius: 8rpx 8rpx 0 0;
                        text-align: center;
                    }

                    .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;
                        text-align: center;
                    }
                }

                .list-content {
                    width: 550rpx;
                    height: auto;
                    float: left;
                    padding-left: 20rpx;
                    box-sizing: border-box;

                    .list-name {
                        width: 100%;
                        height: 50rpx;
                        float: left;
                        line-height: 50rpx;

                        .list-name-text {
                            width: 310rpx;
                            text-align: left;
                            text-overflow: ellipsis;
                            overflow: hidden;
                            display: -webkit-box;
                            -webkit-line-clamp: 1;
                            line-clamp: 1;
                            -webkit-box-orient: vertical;
                            font-size: $font-size-26;
                            color: #333333;
                            float: left;
                        }

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

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

                            &.xf {
                                background-color: #f94b4b;
                                color: #ffffff;
                            }
                        }
                    }

                    .list-tags {
                        width: 100%;
                        height: auto;
                        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: rgba(0, 0, 0, 0.1);
                            font-size: 20rpx;
                            color: #666666;
                            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: 20rpx;
                            color: #666666;
                            text-align: center;
                            line-height: 36rpx;
                            position: relative;
                            padding: 0 8rpx 0 15rpx;
                            border-radius: 8rpx;
                            background: rgba(0, 0, 0, 0.1);



                            .icon-dingdan {
                                font-size: 22rpx;
                                color: #999999;
                            }
                        }
                    }

                    .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;
                            text-decoration: underline;
                        }
                    }
                }
            }

            .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;
                        }

                        .opea-badge {
                            position: absolute;
                            right: -2rpx;
                            top: 2rpx;
                        }
                    }

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

                    &:last-child {
                        padding: 0 20rpx;
                        .iconfont {
                            font-size: 24rpx;
                        }
                    }

                    &.none {
                        &::before {
                            background-color: #f7f7f7 !important;
                        }
                    }

                    .iconfont {
                        font-size: 30rpx;
                        color: #666666;
                        margin-right: 2rpx;
                        position: relative;
                    }
                }
            }
        }
    }

    .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>