allClub-list.vue 8.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327
  1. <template>
  2. <view class="container club clearfix">
  3. <view class="club-search clearfix">
  4. <view class="search-from name">
  5. <text class="iconfont icon-iconfonticonfontsousuo1"></text>
  6. <input class="input" type="text" v-model="searchInputVal" @input="onShowClose" placeholder="请输入机构关键词" maxlength="16"/>
  7. <text class="iconfont icon-shanchu1" v-if="isShowClose" @click="delInputText()"></text>
  8. </view>
  9. <view class="search-btn">
  10. <button class="search-btn" type="default" @click.stop="searchClubList">搜索</button>
  11. </view>
  12. </view>
  13. <view class="club-main">
  14. <view v-if="isEmpty" class="empty-container">
  15. <image class="club-empty-image" src="https://img.caimei365.com/group1/M00/03/71/Cmis2F3wna6AY2ZjAABpmnBICH4247.png" mode="aspectFit"></image>
  16. <view class="txt">暂无机构数据</view>
  17. </view>
  18. <view v-else class="club-list">
  19. <scroll-view scroll-y="true" >
  20. <view class="list" v-for="(item, index) in clubList" :key="index">
  21. <view class="list-left">
  22. <view class="list-head"><image :src="item.headpic ? item.headpic : '../../../static/temp/icon-club@3x.png'" mode=""></image></view>
  23. <view class="list-tel">
  24. <text class="txt">{{item.name}}</text>
  25. <text class="txt sm">
  26. <text class="txt-le">{{item.linkMan1 ? item.linkMan1 : ''}}</text>
  27. {{item.contractMobile1 ? item.contractMobile1 : item.contractMobile1}}
  28. </text>
  29. </view>
  30. </view>
  31. <view class="list-opea">
  32. <view class="opea-type-cell" @click.stop="goOperator(item)">
  33. <text class="text">邀请运营人员</text>
  34. </view>
  35. </view>
  36. </view>
  37. <!--加载loadding-->
  38. <tui-loadmore :visible="loadding" :index="3" type="black"></tui-loadmore>
  39. <tui-nomore :visible="!pullUpOn" bgcolor="#F7F7F7" :text='nomoreText'></tui-nomore>
  40. <!--加载loadding-->
  41. </scroll-view>
  42. </view>
  43. </view>
  44. </view>
  45. </template>
  46. <script>
  47. import authorize from '@/common/config/authorize.js'
  48. import tuiLoadmore from "@/components/tui-components/loadmore/loadmore"
  49. import tuiNomore from "@/components/tui-components/nomore/nomore"
  50. import { getFindAllClubList } from "@/api/seller.js"
  51. export default {
  52. components:{
  53. tuiLoadmore,
  54. tuiNomore,
  55. },
  56. data() {
  57. return {
  58. serviceProviderId:'',
  59. isShowClose:false,
  60. searchInputVal:'',
  61. isEmpty:false,
  62. nomoreText: '上拉显示更多',
  63. pageNum:1,
  64. pageSize:10,
  65. hasNextPage:false,
  66. loadding: false,
  67. pullUpOn: true,
  68. pullFlag: true,
  69. allowDataStatus:true,
  70. wrapperHeight:'100%',
  71. scrollHeight:'',
  72. deleteAddressId:'',
  73. currPage:'',//当前页面
  74. prevPage:'',//上一个页面
  75. tabCurrentIndex:0,
  76. listStatus:1,
  77. clubList:[],
  78. isIphoneX:this.$store.state.isIphoneX,
  79. show_index:0,//控制显示那个组件
  80. }
  81. },
  82. onLoad(){
  83. this.setScrollHeight();
  84. },
  85. methods: {
  86. setScrollHeight() {
  87. // 窗口高度 - 底部距离
  88. setTimeout(()=> {
  89. const query = wx.createSelectorQuery().in(this);
  90. query.selectAll('.add-btn').boundingClientRect();
  91. query.exec(res => {
  92. if(res[0][0]){
  93. let winHeight = this.$api.getWindowHeight(),
  94. eleTop = res[0][0].top - 1;
  95. this.scrollHeight = eleTop;
  96. }
  97. })
  98. }, 500)
  99. },
  100. searchClubList(){
  101. this.pageNum=1
  102. this.initclubList()
  103. },
  104. initclubList(){
  105. let params = { searchWord:this.searchInputVal,pageNum:1,pageSize:this.pageSize }
  106. getFindAllClubList(params).then(response =>{
  107. let responseData = response.data
  108. if(responseData.results&&responseData.results.length > 0){
  109. this.isEmpty = false
  110. this.hasNextPage = response.data.hasNextPage
  111. this.clubList =responseData.results
  112. this.pullFlag = false;
  113. setTimeout(()=>{this.pullFlag = true;},500)
  114. if(this.hasNextPage){
  115. this.pullUpOn = false
  116. this.nomoreText = '上拉显示更多'
  117. }else{
  118. this.pullUpOn = true
  119. this.loadding = false
  120. this.nomoreText = '已至底部'
  121. }
  122. }else{
  123. this.isEmpty = true
  124. }
  125. }).catch(response =>{
  126. this.$util.msg(response.msg,2000)
  127. })
  128. },
  129. getOnReachBottomData(){
  130. this.pageNum+=1
  131. let params = {searchWord:this.searchInputVal,pageNum:this.pageNum,pageSize:this.pageSize }
  132. getFindAllClubList(params).then(response =>{
  133. let responseData = response.data
  134. if(responseData.results&&responseData.results.length > 0){
  135. this.hasNextPage = response.data.hasNextPage
  136. this.clubList = this.clubList.concat(responseData.results)
  137. this.pullFlag = false;// 防上拉暴滑
  138. setTimeout(()=>{this.pullFlag = true;},500)
  139. if(this.hasNextPage){
  140. this.pullUpOn = false
  141. this.nomoreText = '上拉显示更多'
  142. }else{
  143. this.pullUpOn = false
  144. this.loadding = false
  145. this.nomoreText = '已至底部'
  146. }
  147. }
  148. }).catch(response =>{
  149. this.$util.msg(response.msg,2000)
  150. })
  151. },
  152. goOperator(item){
  153. this.$api.setStorage('orderUserInfo',item)
  154. this.$api.navigateTo('/market/pages/club/addoperator')
  155. },
  156. onShowClose () {//输入框失去焦点时触发
  157. if(this.searchInputVal != ''){
  158. this.isShowClose = true
  159. }else{
  160. this.isShowClose = false
  161. this.pageNum=1
  162. this.initclubList()
  163. }
  164. },
  165. delInputText(){//清除输入框内容
  166. this.searchInputVal = ''
  167. this.isShowClose = false
  168. this.pageNum=1
  169. this.initclubList()
  170. }
  171. },
  172. onReachBottom() {
  173. if(this.hasNextPage){
  174. this.loadding = true
  175. this.pullUpOn = true
  176. this.getOnReachBottomData()
  177. }
  178. },
  179. onShow() {
  180. this.$api.getStorage().then(response =>{
  181. this.serviceProviderId = response.serviceProviderID
  182. this.pageNum = 1;
  183. this.initclubList();
  184. })
  185. }
  186. }
  187. </script>
  188. <style lang='scss'>
  189. page {
  190. height: auto;
  191. }
  192. page,.container{
  193. /* padding-bottom: 120upx; */
  194. background: #F7F7F7;
  195. border-top: 1px solid #EBEBEB;
  196. }
  197. .container{
  198. position: relative;
  199. }
  200. .club-search{
  201. height: 64rpx;
  202. width: 702rpx;
  203. padding: 24rpx;
  204. background: #FFFFFF;
  205. display: flex;
  206. align-items: center;
  207. position: fixed;
  208. top: 0;
  209. left: 0;
  210. z-index: 999;
  211. .search-from{
  212. width: 582rpx;
  213. height: 64rpx;
  214. background: #F7F7F7;
  215. border-radius: 14rpx;
  216. float: left;
  217. position: relative;
  218. .input{
  219. width: 500rpx;
  220. height: 64rpx;
  221. float: left;
  222. line-height: 64rpx;
  223. color: $text-color;
  224. font-size: $font-size-24;
  225. }
  226. .icon-iconfonticonfontsousuo1{
  227. width: 64rpx;
  228. height: 64rpx;
  229. line-height: 64rpx;
  230. text-align: center;
  231. display: block;
  232. font-size: $font-size-38;
  233. float: left;
  234. color: #999999;
  235. }
  236. .icon-shanchu1{
  237. font-size: $font-size-32;
  238. color: #999999;
  239. position: absolute;
  240. width: 64rpx;
  241. height: 64rpx;
  242. line-height: 64rpx;
  243. text-align: center;
  244. top: 0;
  245. right: 0;
  246. z-index: 10;
  247. }
  248. }
  249. .search-btn{
  250. width: 120rpx;
  251. line-height: 64rpx;
  252. text-align: center;
  253. font-size: $font-size-28;
  254. color: $color-system;
  255. float: left;
  256. background: #FFFFFF;
  257. }
  258. }
  259. .club-main{
  260. padding-top: 122rpx;
  261. .list{
  262. display: flex;
  263. align-items: center;
  264. width: 702rpx;
  265. height: 92rpx;
  266. padding: 24rpx;
  267. background: #FFFFFF;
  268. position: relative;
  269. border-bottom: 1px solid #EBEBEB;
  270. .list-left{
  271. display: flex;
  272. flex: 8;
  273. .list-head{
  274. width: 92rpx;
  275. height: 92rpx;
  276. border-radius: 14rpx;
  277. image{
  278. width: 92rpx;
  279. height: 92rpx;
  280. border-radius: 14rpx;
  281. }
  282. }
  283. .list-tel{
  284. margin-left: 18rpx;
  285. .txt{
  286. display: flex;
  287. flex: 1;
  288. font-size: $font-size-28;
  289. color: $text-color;
  290. line-height: 46rpx;
  291. &.sm{
  292. font-size: $font-size-24;
  293. color: #666666;
  294. .txt-le{
  295. margin-right: 26rpx;
  296. }
  297. }
  298. }
  299. }
  300. }
  301. .list-opea{
  302. display: flex;
  303. flex: 2;
  304. color: #166CE1;
  305. flex-direction: column;
  306. .opea-type-cell{
  307. font-size: 24rpx;
  308. .text{
  309. width: 156rpx;
  310. height: 60rpx;
  311. padding: 0 20rpx;
  312. line-height: 60rpx;
  313. border-radius: 10rpx;
  314. font-size: $font-size-24;
  315. color: #FFFFFF;
  316. text-align: center;
  317. background: $btn-confirm;
  318. display: block;
  319. }
  320. }
  321. }
  322. }
  323. }
  324. </style>