list.vue 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837
  1. <template>
  2. <view class="container club clearfix" :style="{ paddingBottom: isIphoneX ? '140rpx' : '98rpx' }">
  3. <view class="club-search clearfix" :style="{ paddingTop: StatusBar + 'px' }">
  4. <view class="search-top" :style="{ height: CustomBar - StatusBar + 'px' }">
  5. <view
  6. class="search-icon"
  7. :style="{
  8. width: CustomBar - StatusBar + 'px',
  9. height: CustomBar - StatusBar + 'px',
  10. lineHeight: CustomBar - StatusBar + 'px;'
  11. }"
  12. >
  13. <text v-if="isShowIndex" @click="handleNavigateIndex" class="iconfont icon-shouye"></text>
  14. <text v-else @click="handleNavigateBack" class="iconfont icon-fanhui"></text>
  15. </view>
  16. <view
  17. class="search-from name"
  18. :style="{ height: capsule.height + 'px', borderRadius: capsule.height / 2 + 'px' }"
  19. >
  20. <text
  21. :style="{
  22. width: capsule.height + 'px',
  23. height: capsule.height + 'px',
  24. lineHeight: capsule.height + 'px;'
  25. }"
  26. class="iconfont icon-iconfonticonfontsousuo1"
  27. ></text>
  28. <input
  29. class="input"
  30. type="text"
  31. confirm-type="search"
  32. v-model="listQuery.name"
  33. @input="onShowClose"
  34. @confirm="GetSellerClubList()"
  35. placeholder="机构名称/联系人/手机号"
  36. maxlength="16"
  37. :style="{ lineHeight: capsule.height + 'px' }"
  38. />
  39. <text class="iconfont icon-shanchu1" v-if="isShowClose" @click="delInputText()"></text>
  40. </view>
  41. <view
  42. class="search-btn"
  43. :style="{
  44. width: CustomBar - StatusBar + 'px',
  45. height: capsule.height + 'px',
  46. lineHeight: capsule.height + 'px;'
  47. }"
  48. v-if="isManage && tabSmallCurrentIndex == 1"
  49. @click="showRightDrawer"
  50. >
  51. <text class="iconfont icon-shaixuan"></text>
  52. </view>
  53. </view>
  54. <view class="search-tab">
  55. <view
  56. class="tab-item"
  57. v-for="(item, index) in listTab"
  58. :key="index"
  59. :class="{ current: tabCurrentNum === index }"
  60. @click="tabCurrentClick(index)"
  61. >
  62. <text class="item-text">{{ item.name }}<text class="line"></text></text>
  63. </view>
  64. </view>
  65. <view class="search-smalltab" v-if="isManage">
  66. <view
  67. class="tab-item"
  68. v-for="(item, index) in listItemTab"
  69. :key="index"
  70. :class="{ current: tabSmallCurrentIndex === index }"
  71. @click="tabSmallCurrentClick(index)"
  72. >
  73. <text class="item-text">{{ item.name }}</text>
  74. </view>
  75. </view>
  76. </view>
  77. <view class="club-main" :style="{ paddingTop: isManage ? '374rpx' : '254rpx' }">
  78. <view v-if="isEmpty" class="empty-container">
  79. <image
  80. class="club-empty-image"
  81. src="https://img.caimei365.com/group1/M00/03/71/Cmis2F3wna6AY2ZjAABpmnBICH4247.png"
  82. mode="aspectFit"
  83. ></image>
  84. <view class="txt">暂无机构数据</view>
  85. </view>
  86. <view v-else class="club-list">
  87. <scroll-view scroll-y="true">
  88. <view class="list" v-for="(club, index) in clubList" :key="index">
  89. <view class="list-cell-top">
  90. <view class="list-logo">
  91. <image
  92. :src="
  93. club.headpic
  94. ? club.headpic
  95. : 'https://static.caimei365.com/app/img/icon/icon-club@3x.png'
  96. "
  97. mode=""
  98. ></image>
  99. <text class="list-id">编号:{{ club.newClubId }}</text>
  100. </view>
  101. <view class="list-content">
  102. <view class="list-name">
  103. {{ club.userIdentity === 2 ? club.name : club.linkMan }}
  104. <text class="tags" v-if="club.vipFlag == 0 && club.userIdentity === 2">VIP</text>
  105. <text class="tags sv" v-if="club.vipFlag == 1">SVIP</text>
  106. <text class="tags xf" v-if="club.newDeal === 1">新分配</text>
  107. </view>
  108. <view class="list-tags">
  109. <text
  110. class="tags"
  111. @click.stop="
  112. this.$api.navigateTo('/pages/service/service?id=1041&title=标签说明')
  113. "
  114. >{{ club.activeState }} <text class="iconfont icon-xiayibu"></text
  115. ></text>
  116. <text
  117. class="tags"
  118. @click.stop="
  119. this.$api.navigateTo('/pages/service/service?id=1041&title=标签说明')
  120. "
  121. >{{ club.customerValue }} <text class="iconfont icon-xiayibu"></text
  122. ></text>
  123. </view>
  124. <view class="list-ntel" v-if="tabSmallCurrentIndex === 1">
  125. <text class="list-link">销售:{{ club.serviceName ? club.serviceName : '' }}</text>
  126. </view>
  127. <view class="list-ntel" v-else>
  128. <text class="list-link">{{ club.linkMan ? club.linkMan : '' }}</text>
  129. <text class="list-texl">{{ club.contractMobile ? club.contractMobile : '' }}</text>
  130. </view>
  131. </view>
  132. </view>
  133. <view class="list-cell-btn">
  134. <view class="btn" @click.stop="checkData(club)">修改资料</view>
  135. <view class="btn" @click.stop="orderHistory(club)">
  136. 历史订单
  137. <text
  138. v-if="club.orderNum > 0"
  139. class="opea-badge uni-badge uni-badge-error uni-small uni-badge--small icon-num"
  140. >
  141. {{ showBadge(club.orderNum) }}
  142. </text>
  143. </view>
  144. <view
  145. class="btn"
  146. v-if="isManage && club.serviceProviderId != 1342"
  147. @click.stop="handleReplaceClub(club)"
  148. >更换协销</view
  149. >
  150. <view class="btn" @click.stop="handleClubinfo(club)" v-if="club.recordCount === 1"
  151. >注册行为记录</view
  152. >
  153. </view>
  154. </view>
  155. <!--加载loadding-->
  156. <tui-loadmore :visible="loadding" :index="3" type="black"></tui-loadmore>
  157. <tui-nomore :visible="!pullUpOn" bgcolor="#f7f7f7" :text="nomoreText"></tui-nomore>
  158. </scroll-view>
  159. </view>
  160. </view>
  161. <view class="tabBar" :style="{ height: isIphoneX ? '140rpx' : '98rpx' }" v-if="tabCurrentNum === 0">
  162. <view class="tabBar_list" :style="{ paddingBottom: isIphoneX ? '40rpx' : '' }">
  163. <view class="tabBar_item" :class="{ current: tabCurrentIndex === 0 }" @click="tabClick(0)">
  164. <text class="iconfont icon-shenhetongguo"></text> <view class="tabBar_name">待升级</view>
  165. </view>
  166. <view class="tabBar_item" :class="{ current1: tabCurrentIndex === 1 }" @click="tabClick(1)">
  167. <text class="iconfont icon-lishidingdan"></text> <view class="tabBar_name">升级中</view>
  168. </view>
  169. <view class="tabBar_item" :class="{ current2: tabCurrentIndex === 2 }" @click="tabClick(2)">
  170. <text class="iconfont icon-shenhebutongguo"></text> <view class="tabBar_name">升级失败</view>
  171. </view>
  172. </view>
  173. </view>
  174. <!-- 筛选抽屉 -->
  175. <cm-clubDrawer
  176. ref="screendrawer"
  177. v-if="rightDrawer"
  178. :rightDrawer="rightDrawer"
  179. @handSearchConfirm="handSearchConfirmData"
  180. >
  181. </cm-clubDrawer>
  182. <!-- 选择弹窗 -->
  183. <cm-seller-popup
  184. ref="cmresellerpopup"
  185. v-if="isSellerpopup"
  186. :show="isSellerpopup"
  187. @handleChoiceaSeller="handleChoiceaSellerData"
  188. >
  189. </cm-seller-popup>
  190. </view>
  191. </template>
  192. <script>
  193. import { mapState, mapMutations } from 'vuex'
  194. import authorize from '@/common/config/authorize.js'
  195. import wxLogin from '@/common/config/wxLogin.js'
  196. import tuiLoadmore from '@/components/tui-components/loadmore/loadmore'
  197. import tuiNomore from '@/components/tui-components/nomore/nomore'
  198. import cmClubDrawer from '../components/cm-club-drawer'
  199. import cmSellerPopup from '../components/cm-seller-popup'
  200. const defaultListQuery = {
  201. userIdentity: 4,
  202. name: '',
  203. pageNum: 1,
  204. pageSize: 10,
  205. spId: 0,
  206. status: 90,
  207. type: 1,
  208. groupServiceId: 0
  209. }
  210. export default {
  211. components: {
  212. tuiLoadmore,
  213. tuiNomore,
  214. cmClubDrawer,
  215. cmSellerPopup
  216. },
  217. data() {
  218. return {
  219. listTab: [{ name: '个人机构' }, { name: '资质机构' }],
  220. listItemTab: [{ name: '我的机构' }, { name: '组员机构' }, { name: '待分配机构' }],
  221. listQuery: Object.assign({}, defaultListQuery),
  222. isShowClose: false,
  223. isEmpty: false,
  224. nomoreText: '上拉显示更多',
  225. pageNum: 1,
  226. pageSize: 10,
  227. hasNextPage: false,
  228. loadding: false,
  229. pullUpOn: true,
  230. pullFlag: true,
  231. tabCurrentNum: 0,
  232. tabCurrentIndex: 0,
  233. tabSmallCurrentIndex: 0,
  234. clubList: [],
  235. isIphoneX: this.$store.state.isIphoneX,
  236. CustomBar: this.CustomBar,
  237. StatusBar: this.StatusBar,
  238. capsule: this.capsule,
  239. show_index: 0, //控制显示那个组件
  240. rightDrawer: false,
  241. isSellerpopup: false,
  242. salesParams: {
  243. choseServiceId: 0,
  244. clubId: 0,
  245. spId: 0
  246. },
  247. isShowIndex: false
  248. }
  249. },
  250. onLoad(option) {
  251. if (option.type === 'wechat') {
  252. this.isShowIndex = true
  253. }
  254. },
  255. computed: {
  256. ...mapState(['isManage'])
  257. },
  258. methods: {
  259. async initGetStotage() {
  260. // 初始化
  261. const userInfo = await this.$api.getStorage()
  262. this.listQuery.spId = userInfo.serviceProviderId ? userInfo.serviceProviderId : 0
  263. this.salesParams.choseServiceId = userInfo.serviceProviderId ? userInfo.serviceProviderId : 0
  264. this.GetSellerClubList()
  265. },
  266. GetSellerClubList() {
  267. this.SellerService.GetSellerClubList(this.listQuery)
  268. .then(response => {
  269. let data = response.data
  270. if (data.list && data.list.length > 0) {
  271. this.isEmpty = false
  272. this.hasNextPage = response.data.hasNextPage
  273. this.clubList = data.list
  274. this.pullFlag = false
  275. setTimeout(() => {
  276. this.pullFlag = true
  277. }, 500)
  278. if (this.hasNextPage) {
  279. this.pullUpOn = false
  280. this.nomoreText = '上拉显示更多'
  281. } else {
  282. this.pullUpOn = true
  283. this.loadding = false
  284. this.nomoreText = '已至底部'
  285. }
  286. } else {
  287. this.isEmpty = true
  288. }
  289. })
  290. .catch(error => {
  291. this.$util.msg(error.msg, 2000)
  292. })
  293. },
  294. getOnReachBottomData() {
  295. this.listQuery.pageNum += 1
  296. this.SellerService.GetSellerClubList(this.listQuery)
  297. .then(response => {
  298. let data = response.data
  299. if (data.list && data.list.length > 0) {
  300. this.hasNextPage = response.data.hasNextPage
  301. this.clubList = this.clubList.concat(data.list)
  302. this.pullFlag = false // 防上拉暴滑
  303. setTimeout(() => {
  304. this.pullFlag = true
  305. }, 500)
  306. if (this.hasNextPage) {
  307. this.pullUpOn = false
  308. this.nomoreText = '上拉显示更多'
  309. } else {
  310. this.pullUpOn = false
  311. this.loadding = false
  312. this.nomoreText = '已至底部'
  313. }
  314. }
  315. })
  316. .catch(error => {
  317. this.$util.msg(error.msg, 2000)
  318. })
  319. },
  320. userClubChoseSales(param) {
  321. //分配或更换协销
  322. this.SellerService.userClubChoseSales(param)
  323. .then(response => {
  324. this.$util.msg('操作成功~', 2000, true, 'success')
  325. setTimeout(() => {
  326. this.GetSellerClubList()
  327. }, 1000)
  328. })
  329. .catch(error => {
  330. console.log('分配协销异常')
  331. })
  332. },
  333. tabClick(index) {
  334. //tab切换
  335. this.tabCurrentIndex = index
  336. switch (index) {
  337. case 0:
  338. this.listQuery.status = 90
  339. break
  340. case 1:
  341. this.listQuery.status = 1
  342. break
  343. case 2:
  344. this.listQuery.status = 92
  345. break
  346. }
  347. this.GetSellerClubList()
  348. },
  349. tabCurrentClick(index) {
  350. //商品详情&&供应商信息tab切换
  351. this.tabCurrentNum = index
  352. switch (index) {
  353. case 0:
  354. this.tabCurrentIndex = 0
  355. this.listQuery.userIdentity = 4
  356. this.listQuery.status = 90
  357. this.listQuery.pageNum = 1
  358. this.GetSellerClubList()
  359. break
  360. case 1:
  361. this.listQuery.pageNum = 1
  362. this.listQuery.userIdentity = 2
  363. this.listQuery.status = 90
  364. this.GetSellerClubList()
  365. break
  366. }
  367. },
  368. tabSmallCurrentClick(index) {
  369. //商品详情&&供应商信息tab切换
  370. this.tabSmallCurrentIndex = index
  371. switch (index) {
  372. case 0:
  373. this.tabCurrentIndex = 0
  374. this.listQuery.type = 1
  375. this.listQuery.status = 90
  376. this.listQuery.pageNum = 1
  377. this.listQuery.groupServiceId = 0
  378. this.GetSellerClubList()
  379. break
  380. case 1:
  381. this.listQuery.type = 2
  382. this.listQuery.status = 90
  383. this.listQuery.pageNum = 1
  384. this.listQuery.groupServiceId = 0
  385. this.GetSellerClubList()
  386. break
  387. case 2:
  388. this.listQuery.type = 3
  389. this.listQuery.status = 90
  390. this.listQuery.pageNum = 1
  391. this.listQuery.groupServiceId = 0
  392. this.GetSellerClubList()
  393. break
  394. }
  395. },
  396. handSearchConfirmData(data) {
  397. console.log('确定筛选', data)
  398. //确定筛选
  399. this.listQuery.groupServiceId = data.serviceProviderId
  400. this.GetSellerClubList()
  401. },
  402. handleChoiceaSellerData(data) {
  403. // 确定搜索
  404. this.salesParams.spId = data.serviceProviderId
  405. this.userClubChoseSales(this.salesParams)
  406. },
  407. handleReplaceClub(club) {
  408. //更换协销
  409. this.salesParams.clubId = club.clubId
  410. this.isSellerpopup = true
  411. },
  412. showRightDrawer() {
  413. //显示筛选抽屉
  414. this.rightDrawer = true
  415. },
  416. checkData(club) {
  417. //修改机构资料
  418. switch (this.tabCurrentNum) {
  419. case 0:
  420. this.$api.navigateTo(`/pages/seller/login/apply?userID=${club.userId}`)
  421. break
  422. case 1:
  423. this.$api.navigateTo(`/pages/seller/login/information?userID=${club.userId}`)
  424. break
  425. }
  426. },
  427. orderHistory(club) {
  428. //跳转机构历史订单
  429. this.$api.setStorage('orderUserInfo', club)
  430. if (this.tabSmallCurrentIndex === 1 || this.tabSmallCurrentIndex === 2) {
  431. // 查看组员机构历史订单
  432. this.$api.navigateTo(
  433. `/pages/seller/order/order-historylist?clubId=${club.clubId}&listType=0&authType=${
  434. this.tabSmallCurrentIndex
  435. }`
  436. )
  437. } else {
  438. this.$api.navigateTo(`/pages/seller/order/order-historylist?clubId=${club.clubId}&listType=0`)
  439. }
  440. },
  441. handleClubinfo(club) {
  442. //跳转机构信息
  443. this.$api.navigateTo(`/pages/seller/club/club-info?clubId=${club.clubId}`)
  444. },
  445. onShowClose() {
  446. //输入框失去焦点时触发
  447. if (this.listQuery.name != '') {
  448. this.isShowClose = true
  449. } else {
  450. this.isShowClose = false
  451. }
  452. },
  453. delInputText() {
  454. //清除输入框内容
  455. this.listQuery.name = ''
  456. this.isShowClose = false
  457. },
  458. showBadge(n) {
  459. let num = ''
  460. if (n > 100) {
  461. num = 99
  462. } else {
  463. num = n
  464. }
  465. return num
  466. },
  467. handleNavigateBack() {
  468. this.$api.navigateBack(1)
  469. },
  470. handleNavigateIndex() {
  471. this.$api.navigateTo(`/pages/seller/index/index`)
  472. }
  473. },
  474. onReachBottom() {
  475. if (this.hasNextPage) {
  476. this.loadding = true
  477. this.pullUpOn = true
  478. this.getOnReachBottomData()
  479. }
  480. },
  481. onShow() {
  482. wxLogin.wxLoginAuthorize()
  483. this.initGetStotage()
  484. }
  485. }
  486. </script>
  487. <style lang="scss">
  488. page {
  489. height: auto;
  490. }
  491. page,
  492. .container {
  493. /* padding-bottom: 120upx; */
  494. background: #f7f7f7;
  495. }
  496. .container {
  497. position: relative;
  498. }
  499. .club-search {
  500. height: auto;
  501. width: 100%;
  502. background: #ffffff;
  503. display: flex;
  504. flex-direction: column;
  505. position: fixed;
  506. top: 0;
  507. left: 0;
  508. z-index: 99;
  509. .search-top {
  510. flex: 1;
  511. display: flex;
  512. align-items: center;
  513. box-sizing: border-box;
  514. .search-icon {
  515. text-align: center;
  516. float: left;
  517. .icon-fanhui {
  518. font-size: 44rpx;
  519. color: #333333;
  520. }
  521. .icon-shouye {
  522. font-size: 44rpx;
  523. color: #333333;
  524. }
  525. }
  526. .search-from {
  527. width: 382rpx;
  528. background: #f7f7f7;
  529. float: left;
  530. position: relative;
  531. .input {
  532. width: 300rpx;
  533. height: 100%;
  534. float: left;
  535. color: $text-color;
  536. font-size: $font-size-24;
  537. }
  538. .icon-iconfonticonfontsousuo1 {
  539. text-align: center;
  540. display: block;
  541. font-size: $font-size-38;
  542. float: left;
  543. color: #999999;
  544. }
  545. .icon-shanchu1 {
  546. font-size: $font-size-32;
  547. color: #999999;
  548. position: absolute;
  549. width: 64rpx;
  550. height: 64rpx;
  551. line-height: 64rpx;
  552. text-align: center;
  553. top: 0;
  554. right: 0;
  555. z-index: 10;
  556. }
  557. }
  558. .search-btn {
  559. text-align: center;
  560. font-size: $font-size-28;
  561. color: $color-system;
  562. float: left;
  563. background: #ffffff;
  564. .icon-shaixuan {
  565. font-size: 44rpx;
  566. color: #333333;
  567. }
  568. }
  569. }
  570. .search-tab {
  571. height: 80rpx;
  572. display: flex;
  573. flex: 1;
  574. background: #ffffff;
  575. border-bottom: 1px solid #efefef;
  576. .tab-item {
  577. flex: 1;
  578. line-height: 80rpx;
  579. text-align: center;
  580. color: $text-color;
  581. font-size: $font-size-28;
  582. position: relative;
  583. .item-text {
  584. padding: 10rpx 0;
  585. border-bottom: 2px solid #ffffff;
  586. }
  587. &:nth-child(1)::before {
  588. content: '';
  589. width: 2px;
  590. height: 50rpx;
  591. position: absolute;
  592. right: 0;
  593. top: 15rpx;
  594. background: #ebebeb;
  595. }
  596. &.current {
  597. color: $color-system;
  598. .item-text {
  599. border-color: $color-system;
  600. }
  601. }
  602. }
  603. }
  604. .search-smalltab {
  605. width: 100%;
  606. height: 104rpx;
  607. background: #ffffff;
  608. box-sizing: border-box;
  609. padding: 20rpx 10rpx;
  610. .tab-item {
  611. width: 180rpx;
  612. height: 64rpx;
  613. line-height: 64rpx;
  614. text-align: center;
  615. color: $text-color;
  616. font-size: $font-size-28;
  617. float: left;
  618. &.current {
  619. background-color: $color-system;
  620. color: #fff;
  621. border-radius: 32rpx;
  622. }
  623. }
  624. }
  625. }
  626. .club-main {
  627. .list {
  628. width: 100%;
  629. height: 268rpx;
  630. padding: 24rpx;
  631. box-sizing: border-box;
  632. background: #ffffff;
  633. position: relative;
  634. border-bottom: 1px solid #ebebeb;
  635. .list-cell-top {
  636. width: 100%;
  637. height: 140rpx;
  638. box-sizing: border-box;
  639. .list-logo {
  640. width: 140rpx;
  641. height: 140rpx;
  642. float: left;
  643. position: relative;
  644. image {
  645. width: 140rpx;
  646. height: 140rpx;
  647. border-radius: 8rpx;
  648. }
  649. .list-id{
  650. display: inline-block;
  651. width: 100%;
  652. height: 32rpx;
  653. line-height: 32rpx;
  654. background: rgba(0,0,0,0.1);
  655. color: #333;
  656. position: absolute;
  657. top: 0;
  658. left: 0;
  659. box-sizing: border-box;
  660. text-align: left;
  661. font-size: 20rpx;
  662. padding-left: 4rpx;
  663. border-radius: 8rpx 8rpx 0 0;
  664. }
  665. }
  666. .list-content {
  667. width: 498rpx;
  668. height: 140rpx;
  669. float: left;
  670. padding-left: 30rpx;
  671. .list-name {
  672. width: 100%;
  673. height: 50rpx;
  674. float: left;
  675. line-height: 50rpx;
  676. text-align: left;
  677. font-size: $font-size-26;
  678. color: #333333;
  679. .tags {
  680. display: inline-block;
  681. height: 36rpx;
  682. box-sizing: border-box;
  683. padding: 0 15rpx;
  684. border-radius: 8rpx;
  685. background: #f0cb72;
  686. font-size: $font-size-22;
  687. color: #4e4539;
  688. text-align: center;
  689. line-height: 36rpx;
  690. margin-left: 20rpx;
  691. margin-top: 7rpx;
  692. &.sv {
  693. background: #333333;
  694. color: #f0cb72;
  695. }
  696. &.xf {
  697. background-color: #f94b4b;
  698. color: #ffffff;
  699. }
  700. }
  701. }
  702. .list-tags {
  703. width: 100%;
  704. height: 36rpx;
  705. float: left;
  706. line-height: 36rpx;
  707. margin: 7rpx 0;
  708. .tags {
  709. display: inline-block;
  710. height: 36rpx;
  711. box-sizing: border-box;
  712. padding: 0 8rpx 0 15rpx;
  713. border-radius: 8rpx;
  714. background: #faede5;
  715. font-size: $font-size-22;
  716. color: $color-system;
  717. text-align: center;
  718. line-height: 36rpx;
  719. margin-right: 16rpx;
  720. .icon-xiayibu {
  721. font-size: 20rpx;
  722. margin-left: 10rpx;
  723. }
  724. }
  725. }
  726. .list-ntel {
  727. width: 100%;
  728. height: 50rpx;
  729. float: left;
  730. line-height: 50rpx;
  731. text-align: left;
  732. font-size: $font-size-24;
  733. color: #666666;
  734. .list-link {
  735. display: inline-block;
  736. float: left;
  737. margin-right: 40rpx;
  738. }
  739. .list-texl {
  740. display: inline-block;
  741. float: left;
  742. }
  743. }
  744. }
  745. }
  746. .list-cell-btn {
  747. width: 100%;
  748. height: 60rpx;
  749. display: flex;
  750. color: #166ce1;
  751. flex-direction: row;
  752. align-items: center;
  753. float: left;
  754. margin-top: 20rpx;
  755. .btn {
  756. height: 60rpx;
  757. box-sizing: border-box;
  758. padding: 0 20rpx;
  759. line-height: 60rpx;
  760. border-radius: 30rpx;
  761. font-size: $font-size-24;
  762. color: $text-color;
  763. text-align: center;
  764. margin: 0 20rpx 0 0;
  765. position: relative;
  766. border: 1px solid #999999;
  767. .opea-badge {
  768. position: absolute;
  769. right: -10rpx;
  770. top: -20rpx;
  771. }
  772. }
  773. }
  774. }
  775. }
  776. .tabBar {
  777. width: 100%;
  778. height: 98rpx;
  779. background: #fff;
  780. border-top: 1px solid #e5e5e5;
  781. position: fixed;
  782. bottom: 0px;
  783. left: 0px;
  784. right: 0px;
  785. z-index: 99;
  786. display: flex;
  787. align-items: center;
  788. justify-content: center;
  789. .tabBar_list {
  790. width: 86%;
  791. display: flex;
  792. justify-content: space-between;
  793. .tabBar_item {
  794. width: 120rpx;
  795. display: flex;
  796. justify-content: center;
  797. align-items: center;
  798. flex-direction: column;
  799. font-size: 20rpx;
  800. color: #999999;
  801. &.current {
  802. color: #166ce1;
  803. .iconfont {
  804. color: #166ce1;
  805. }
  806. }
  807. &.current1 {
  808. color: #16e15c;
  809. .iconfont {
  810. color: #16e15c;
  811. }
  812. }
  813. &.current2 {
  814. color: #ff0000;
  815. .iconfont {
  816. color: #ff0000;
  817. }
  818. }
  819. .iconfont {
  820. width: 48rpx;
  821. height: 48rpx;
  822. display: block;
  823. margin-bottom: 2rpx;
  824. text-align: center;
  825. font-size: 46rpx;
  826. color: #999999;
  827. }
  828. }
  829. }
  830. }
  831. .nav_active {
  832. color: $color-system;
  833. }
  834. </style>