caimei-applets-caimei/pages/seller/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-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 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 class="search-btn" @click="showRightDrawer"> <text class="iconfont icon-shaixuan"></text> </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">
            	<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="tags xf" v-if="club.newDeal === 1">新分配</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-name-text">{{ club.userIdentity === 2 ? club.name : club.linkMan }}</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" @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 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> -->
                                </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="handleOrderHistory(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-shangcheng"></text> 访问记录
                            </view>
                            <view
                                class="btn"
                                v-if="tabSmallCurrentIndex === 0 || tabSmallCurrentIndex === 2"
                                @click.stop="handleShowBubble(club, index)"
                            >
                                <text class="iconfont icon-gengduo2"></text>
                                <view
                                    class="btn-bubble"
                                    :style="{
                                        height: isManage ? '240rpx' : '180rpx',
                                        top: isManage ? '-240rpx' : '-180rpx'
                                    }"
                                    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 border" @click.stop="handleClickOper(2, club)">
                                        <text class="iconfont icon-tianxie"></text> 填写记录
                                    </view>
                                    <view class="btn-view border" @click.stop="handleClickOper(6, club)">
                                        <text class="iconfont icon-yunyingrenyuanguanli"></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>
                        </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-clubDrawer
			ref="screendrawer"
			v-if="rightDrawer"
			:current="tabSmallCurrentIndex"
			:rightDrawer="rightDrawer"
			@handSearchConfirm="handSearchConfirmData"
		/>
		<!-- 选择弹窗 -->
		<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 cmClubDrawer from './components/cm-club-drawer'
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: {
		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,
            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) {
		if (option.type === 'wechat') {
			this.isShowIndex = true
		}
		if (!this.isManage) {
			this.listItemTab = this.listItemTab.filter((e, i) => i !== 1)
		}
	},
	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.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('分配服务商异常')
				})
		},
		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.getList()
		},
		tabCurrentClick(index) {
			//商品详情&&供应商信息tab切换
			this.tabCurrentNum = index
			switch (index) {
				case 0:
					this.tabCurrentIndex = 0
					this.listQuery.status = 90
					this.listQuery.userIdentity = 4
					this.getList()
					break
				case 1:
					this.listQuery.status = 90
					this.listQuery.userIdentity = 2
					this.getList()
					break
			}
		},
		tabSmallCurrentClick(index) {
			//组员机构
			this.tabSmallCurrentIndex = index
			switch (index) {
				case 0:
					this.tabCurrentIndex = 0
					this.listQuery.type = 1
					this.listQuery.groupServiceId = 0
					this.getList()
					break
				case 1:
					this.listQuery.type = this.isManage ? 2 : 6
					this.listQuery.groupServiceId = 0
					this.getList()
					break
				case 2:
					this.listQuery.type = 6
					this.listQuery.groupServiceId = 0
					this.getList()
					break
			}
		},
		handSearchConfirmData(data) {
			console.log('确定筛选', data)
			//确定筛选
			this.listQuery = { ...this.listQuery, ...data }
			this.getList()
		},
		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-visit?clubId=${club.clubId}`)
					break
				case 4:
					this.handleReturnPath(club)
					break
				case 5:
					this.handleReplaceClub(club)
					break
				case 6:
					this.$api.navigateTo(`/pages/seller/remarks/record-club-list?clubId=${club.clubId}`)
					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`)
			}
		},
		// 拨打电话
		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
		},
		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() {
		wxLogin.wxLoginAuthorize()
		this.initGetStotage()
	}
}
</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;
			}
		}
	}

	.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 {
            padding: 0 20rpx;
			height: 58rpx;
			line-height: 58rpx;
			text-align: center;
			color: $text-color;
			font-size: $font-size-28;
			float: left;
			border-radius: 8rpx;
			border: 1px solid #b2b2b2;
			margin-right: 20rpx;
			&.current {
				color: #ffffff;
				border: 1px solid #ff5b00;
                background: #ff5b00;
			}
		}
	}
}
.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;
		.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;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    .list-name-text{
                        width: 360rpx;
                        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;
                        margin-left: 10rpx;
                    }
					.tags {
						display: flex;
						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);
						.opea-badge {
							position: absolute;
							right: -10rpx;
							top: -15rpx;
						}
						.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 30rpx;
				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 {
					.iconfont {
                        font-weight: bold;
					}
					.btn-bubble {
						width: 200rpx;
						height: 180rpx;
						background: rgba(51, 51, 51, 0.8);
						position: absolute;
						top: -180rpx;
						right: -7rpx;
						border-radius: 8rpx;
                        z-index: 999;
						&: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: 60rpx;
							box-sizing: border-box;
							line-height: 60rpx;
							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: #666666;
					margin-right: 2rpx;
				}
			}
		}
	}
}
.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>