12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058 |
- <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" :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 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 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 clearfix">
- <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="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">
- {{ 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-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>
- <text class="tags-or" @click.stop="handleOrderHistory(club)">
- 订单列表
- <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 class="iconfont icon-dingdan"></text>
- </text>
- </view>
- </view>
- </view>
- <view class="club-list-bot">
- <template v-if="tabSmallCurrentIndex === 0 || tabSmallCurrentIndex === 2">
- <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 || tabSmallCurrentIndex === 2"
- @click.stop="handleShowBubble(club, index)"
- >
- <text class="iconfont icon-gengduo2"></text>
- <view
- class="btn-bubble"
- :style="{
- height: isManage ? '180rpx' : '120rpx',
- top: isManage ? '-180rpx' : '-120rpx'
- }"
- 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(6, club)">
- <text class="iconfont icon-tianxie"></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 v-if="!isManage" 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-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-nomore :visible="!pullUpOn" bgcolor="#f7f7f7" :text="nomoreText" />
- </scroll-view>
- </view>
- </view>
- </template>
- <!-- 筛选抽屉 -->
- <cm-clubDrawer
- ref="screendrawer"
- v-if="rightDrawer"
- :current="tabSmallCurrentIndex"
- :rightDrawer="rightDrawer"
- @handSearchConfirm="handSearchConfirmData"
- />
- <!-- 选择弹窗 -->
- <cm-seller-popup
- ref="cmresellerpopup"
- v-if="isSellerpopup"
- :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) {
- //商品详情&&供应商信息tab切换
- 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: auto;
- }
- page,
- .container {
- /* padding-bottom: 120upx; */
- background: #FFFFFF;
- }
- .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-main {
- width: 100%;
- height: 80rpx;
- box-sizing: border-box;
- padding: 10rpx 24rpx;
- .search-from {
- background: #f7f7f7;
- position: relative;
- width: 642rpx;
- 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%;
- padding-top: 370rpx;
- background: #F7F7F7;
- .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: 520rpx;
- height: auto;
- float: left;
- padding-left: 20rpx;
- box-sizing: border-box;
- .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: 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 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 24rpx;
- .iconfont {
- font-weight: bold;
- }
- .btn-bubble {
- width: 200rpx;
- height: 120rpx;
- background: rgba(51, 51, 51, 0.8);
- position: absolute;
- top: -120rpx;
- right: -7rpx;
- 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: 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: #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>
|