list.vue 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594
  1. <template>
  2. <view class="container operator clearfix">
  3. <view class="operator-top clearfix">
  4. <view class="operator-title">
  5. <view class="head"><image :src="clubImage == null ? 'https://static.caimei365.com/app/img/icon/icon-club@3x.png' : clubImage" mode=""></image></view>
  6. <view class="title">{{clubName}}</view>
  7. </view>
  8. <view class="operator-search">
  9. <view class="search-wrap">
  10. <view class="search-from name">
  11. <input class="input" type="text" v-model="listQuery.linkName" placeholder="请输入姓名" maxlength="6"/>
  12. </view>
  13. <view class="search-from phone">
  14. <input class="input" type="text" v-model="listQuery.mobile" placeholder="请输入手机号" maxlength="11"/>
  15. </view>
  16. <view class="search-from search">
  17. <button class="search-btn" type="default" @click.stop="handSearchOpertor">搜索</button>
  18. </view>
  19. </view>
  20. </view>
  21. </view>
  22. <view class="operator-main">
  23. <view v-if="isEmpty" class="empty-container">
  24. <view class="txt">暂无运营人员</view>
  25. </view>
  26. <view v-else class="operator-list">
  27. <scroll-view scroll-y="true" >
  28. <view class="list" v-for="(item, index) in operatorList" :key="index" @click.stop="showOperatorModel(item)">
  29. <view class="list-left">
  30. <view class="list-head"><image :src="item.headimgurl ? item.headimgurl : 'https://static.caimei365.com/app/img/icon/icon-seller@3x.png'" mode=""></image></view>
  31. <view class="list-tel">
  32. <text class="txt">{{ item.linkName ? item.linkName : ''}}</text>
  33. <text class="txt">{{ item.mobile ? item.mobile : '' }}</text>
  34. </view>
  35. </view>
  36. <view class="list-opea">
  37. <view class="opea-type">
  38. <view class="opea-type-cell" v-if="item.effectiveFlag != null">
  39. <text class="iconfont icon-iconfontweixin" :style="{color: iconStautsColor(item.status)}"></text>
  40. <text :style="{color: rexpStautsColor(item.effectiveFlag)}">{{ rexpStautsText(item.effectiveFlag) }}</text>
  41. </view>
  42. <view class="opea-type-cell none" v-else>
  43. <text>- -</text>
  44. </view>
  45. </view>
  46. <view class="opea-del">
  47. <view class="opea-type-cell" @click.stop="deleteOperator(item.id)">
  48. <text class="iconfont icon-shanchu"></text>
  49. <text>删除</text>
  50. </view>
  51. </view>
  52. </view>
  53. </view>
  54. <!--加载loadding-->
  55. <tui-loadmore :visible="loadding" :index="3" type="black"></tui-loadmore>
  56. <tui-nomore :visible="!pullUpOn" :backgroundColor="'#ffffff'" :text='nomoreText'></tui-nomore>
  57. <!--加载loadding-->
  58. </scroll-view>
  59. </view>
  60. </view>
  61. <div class="operator-btn" :style="{paddingBottom :isIphoneX ? '68rpx' : '0rpx'}">
  62. <view class="add-btn" @click="this.$api.navigateTo('/pages/user/operator/addoperator')">添加运营人员</view>
  63. </div>
  64. <view class="operator-model" v-if="isOperatorModel" @click.stop="closeModel">
  65. <view class="operator-alert">
  66. <text class="iconfont icon-iconfontguanbi" @click.stop="closeModel"></text>
  67. <view class="content">
  68. <view class="ciew-t">姓名:{{modelData.linkName}}</view>
  69. <view class="ciew-t">手机号:{{modelData.mobile}}</view>
  70. <view class="ciew-t">邀请码:{{modelData.invitationCode ? modelData.invitationCode : '无'}}
  71. <text :style="{color: rexpStautsColor(modelData.status)}">{{modelStautsText(modelData.effectiveFlag)}}</text>
  72. </view>
  73. <view class="ciew-t">邀请码有效期:{{modelData.effectiveDays ? modelData.effectiveDays : '0'}}天</view>
  74. <view class="ciew-t">状态:{{modelData.status == 2 ? '已绑定' : '未绑定'}}</view>
  75. <view class="ciew-t">添加时间:{{modelData.addTime}}</view>
  76. <view class="ciew-t">绑定时间:{{modelData.bindTime == null ? '无' : modelData.bindTime }}</view>
  77. </view>
  78. <view class="btn" v-if="modelData.status != 2" @click.stop="updateInvitationCode(modelData)">更新邀请码</view>
  79. </view>
  80. </view>
  81. </view>
  82. </template>
  83. <script>
  84. import authorize from '@/common/config/authorize.js'
  85. import tuiLoadmore from "@/components/tui-components/loadmore/loadmore"
  86. import tuiNomore from "@/components/tui-components/nomore/nomore"
  87. export default {
  88. components:{
  89. tuiLoadmore,
  90. tuiNomore,
  91. },
  92. data() {
  93. return {
  94. clubName:'',
  95. clubImage:'',
  96. linkman:'',
  97. clubMobile:'',
  98. isEmpty:false,
  99. nomoreText: '上拉显示更多',
  100. userID:'',
  101. pageNum:1,
  102. pageSize:10,
  103. hasNextPage:false,
  104. loadding: false,
  105. pullUpOn: true,
  106. pullFlag: true,
  107. allowDataStatus:true,
  108. wrapperHeight:'100%',
  109. scrollHeight:'',
  110. deleteAddressId:'',
  111. currPage:'',//当前页面
  112. prevPage:'',//上一个页面
  113. isOperatorModel:false,
  114. operatorList:[],
  115. isIphoneX:this.$store.state.isIphoneX,
  116. modelData:'',
  117. listQuery:{
  118. userId:'',
  119. linkName:'',
  120. mobile:'',
  121. pageNum:1,
  122. pageSize:10
  123. }
  124. }
  125. },
  126. onLoad(){
  127. this.setScrollHeight();
  128. },
  129. methods: {
  130. setScrollHeight() {
  131. // 窗口高度 - 底部距离
  132. setTimeout(()=> {
  133. const query = wx.createSelectorQuery().in(this);
  134. query.selectAll('.add-btn').boundingClientRect();
  135. query.exec(res => {
  136. if(res[0][0]){
  137. let winHeight = this.$api.getWindowHeight(),
  138. eleTop = res[0][0].top - 1;
  139. this.scrollHeight = eleTop;
  140. }
  141. })
  142. }, 500)
  143. },
  144. handSearchOpertor(){
  145. this.listQuery.pageNum=1
  146. this.InitOperatorList()
  147. },
  148. InitOperatorList(){ //查询机构运营人员列表
  149. this.UserService.QueryOperatorList(this.listQuery).then(response =>{
  150. let responseData = response.data
  151. if(responseData.results&&responseData.results.length > 0){
  152. this.isEmpty = false
  153. this.hasNextPage = response.data.hasNextPage
  154. this.operatorList =responseData.results
  155. this.pullFlag = false;
  156. setTimeout(()=>{this.pullFlag = true;},500)
  157. if(this.hasNextPage){
  158. this.pullUpOn = false
  159. this.nomoreText = '上拉显示更多'
  160. }else{
  161. this.pullUpOn = true
  162. this.loadding = false
  163. this.nomoreText = '已至底部'
  164. }
  165. }else{
  166. this.isEmpty = true
  167. }
  168. }).catch(error =>{
  169. this.$util.msg(error.msg,2000)
  170. })
  171. },
  172. getOnReachBottomData(){
  173. this.listQuery.pageNum+=1
  174. this.UserService.QueryOperatorList(this.listQuery).then(response =>{
  175. let responseData = response.data
  176. if(responseData.results&&responseData.results.length > 0){
  177. this.hasNextPage = response.data.hasNextPage
  178. this.operatorList = this.operatorList.concat(responseData.results)
  179. this.pullFlag = false;// 防上拉暴滑
  180. setTimeout(()=>{this.pullFlag = true;},500)
  181. if(this.hasNextPage){
  182. this.pullUpOn = false
  183. this.nomoreText = '上拉显示更多'
  184. }else{
  185. this.pullUpOn = false
  186. this.loadding = false
  187. this.nomoreText = '已至底部'
  188. }
  189. }
  190. }).catch(error =>{
  191. this.$util.msg(error.msg,2000)
  192. })
  193. },
  194. showOperatorModel(item){
  195. this.isOperatorModel = true
  196. this.modelData = item
  197. },
  198. closeModel(){
  199. this.isOperatorModel = false
  200. },
  201. deleteOperator(id){//删除运营人员
  202. this.$util.modal('','确定删除运营人员吗?','确定删除','取消',true,() =>{
  203. this.UserService.PostDeleteOperator({id:id}).then(response =>{
  204. this.$util.msg('删除成功',2000,true,'success')
  205. setTimeout(()=>{
  206. this.InitOperatorList()
  207. },2000)
  208. }).catch(error =>{
  209. this.$util.msg(error.msg,2000)
  210. })
  211. })
  212. },
  213. updateInvitationCode(item){ //更新邀请码
  214. this.$util.modal('','确定更新邀请码并发送给运营人员?','确定更新','取消',true,() =>{
  215. this.UserService.PostUpdateOperatorCode({id:item.id,status:item.status}).then(response =>{
  216. this.isOperatorModel = false
  217. this.$util.msg('更新邀请码成功',2000)
  218. setTimeout(()=>{
  219. this.InitOperatorList()
  220. },2000)
  221. }).catch(error =>{
  222. this.$util.msg(error.msg,2000)
  223. })
  224. })
  225. },
  226. rexpStautsText(n) {
  227. let text = ''
  228. switch (n) {
  229. case '':
  230. text = '--'
  231. break
  232. case 1:
  233. text = '邀请码有效'
  234. break
  235. case 2:
  236. text = '邀请码已使用'
  237. break
  238. case 3:
  239. text = '邀请码已过期'
  240. break
  241. }
  242. return text
  243. },
  244. modelStautsText(n) {
  245. let text = ''
  246. switch (n) {
  247. case 1:
  248. text = '(有效)'
  249. break
  250. case 2:
  251. text = '(已使用)'
  252. break
  253. case 3:
  254. text = '(已过期)'
  255. break
  256. }
  257. return text
  258. },
  259. rexpStautsColor(status) {
  260. let textColor = ''
  261. switch (status) {
  262. case 1:
  263. textColor = '#55BB00'
  264. break
  265. case 2:
  266. textColor = '#0056BB'
  267. break
  268. case 3:
  269. textColor = '#BB0000'
  270. break
  271. }
  272. return textColor
  273. },
  274. iconStautsColor(status) {
  275. let textColor = ''
  276. if(status == 2){
  277. textColor = '#09BB07'
  278. }else{
  279. textColor = '#DDDDDD'
  280. }
  281. return textColor
  282. },
  283. },
  284. onReachBottom() {
  285. if(this.hasNextPage){
  286. this.loadding = true
  287. this.pullUpOn = true
  288. this.getOnReachBottomData()
  289. }
  290. },
  291. onShow() {
  292. this.$api.getComStorage('clubInfo').then((resolve) =>{
  293. this.clubName = resolve.name
  294. this.clubImage = resolve.image ? resolve.image : ''
  295. this.listQuery.userId = resolve.userId
  296. this.listQuery.pageNum = 1;
  297. console.log('222222222222')
  298. this.InitOperatorList();
  299. })
  300. }
  301. }
  302. </script>
  303. <style lang='scss'>
  304. page {
  305. height: auto;
  306. }
  307. page,.container{
  308. /* padding-bottom: 120upx; */
  309. background: #F7F7F7;
  310. border-top: 1px solid #EBEBEB;
  311. }
  312. .container{
  313. position: relative;
  314. }
  315. .operator-top{
  316. width: 702rpx;
  317. padding: 0 24rpx;
  318. height: 282rpx;
  319. background: #FFFFFF;
  320. position:fixed ;
  321. top: 0;
  322. left: 0;
  323. z-index: 999;
  324. .operator-title{
  325. width: 100%;
  326. height: 92rpx;
  327. padding: 34rpx 0;
  328. .title{
  329. width: 420rpx;
  330. float: left;
  331. font-size: $font-size-32;
  332. color: $text-color;
  333. line-height: 92rpx;
  334. text-align: left;
  335. margin-left: 20rpx;
  336. -o-text-overflow: ellipsis;
  337. text-overflow: ellipsis;
  338. display: -webkit-box;
  339. word-break: break-all;
  340. -webkit-box-orient: vertical;
  341. -webkit-line-clamp: 1;
  342. overflow: hidden;
  343. }
  344. .head{
  345. width: 92rpx;
  346. height: 92rpx;
  347. border-radius: 50%;
  348. border: 1px solid #ebebeb;
  349. float: left;
  350. image{
  351. width: 92rpx;
  352. height: 92rpx;
  353. border-radius: 50%;
  354. }
  355. }
  356. }
  357. .operator-search{
  358. width: 100%;
  359. height: auto;
  360. .search-from{
  361. width: 300rpx;
  362. height: 40rpx;
  363. padding: 20rpx;
  364. background: $sub-bg-color;
  365. border-radius: 40rpx;
  366. position: relative;
  367. margin-bottom: 20rpx;
  368. float: left;
  369. &.name{
  370. width: 180rpx;
  371. margin-right: 20rpx;
  372. .input{
  373. width: 180rpx;
  374. font-size: $font-size-28;
  375. color: $text-color;
  376. line-height: 40rpx;
  377. float: left;
  378. height: 40rpx;
  379. }
  380. }
  381. &.phone{
  382. width: 228rpx;
  383. margin-right: 20rpx;
  384. .input{
  385. width: 228rpx;
  386. padding-left:10rpx;
  387. font-size: $font-size-28;
  388. color: $text-color;
  389. line-height: 40rpx;
  390. float: left;
  391. height: 40rpx;
  392. }
  393. }
  394. &.search{
  395. width: 175rpx;
  396. padding: 0;
  397. background: #FFFFFF;
  398. .search-btn{
  399. width: 170rpx;
  400. height: 78rpx;
  401. border-radius: 39rpx;
  402. font-size: $font-size-28;
  403. color: #FFFFFF;
  404. line-height: 78rpx;
  405. background: $btn-confirm;
  406. }
  407. }
  408. .label{
  409. text-align: left;
  410. font-size: $font-size-28;
  411. color:$text-color;
  412. line-height: 40rpx;
  413. float: left;
  414. }
  415. }
  416. }
  417. }
  418. .operator-main{
  419. padding-top: 282rpx;
  420. padding-bottom: 120rpx;
  421. }
  422. .list{
  423. display: flex;
  424. align-items: center;
  425. width: 702rpx;
  426. height: 92rpx;
  427. padding: 24rpx;
  428. background: #FFFFFF;
  429. position: relative;
  430. border-bottom: 1px solid #EBEBEB;
  431. .list-left{
  432. display: flex;
  433. flex: 4;
  434. .list-head{
  435. width: 92rpx;
  436. height: 92rpx;
  437. border-radius: 50%;
  438. image{
  439. width: 92rpx;
  440. height: 92rpx;
  441. border-radius: 50%;
  442. }
  443. }
  444. .list-tel{
  445. margin-left: 18rpx;
  446. .txt{
  447. display: flex;
  448. flex: 1;
  449. font-size: $font-size-28;
  450. color: $text-color;
  451. line-height: 46rpx;
  452. }
  453. }
  454. }
  455. .list-opea{
  456. flex:6;
  457. .opea-type{
  458. flex-direction: column;
  459. align-items: center;
  460. margin-left: 35rpx;
  461. float: left;
  462. .opea-type-cell{
  463. width: 186rpx;
  464. height: 64rpx;
  465. padding:0 16rpx;
  466. border-radius: 32rpx;
  467. border: 1px solid #DDDDDD;
  468. line-height: 64rpx;
  469. font-size: $font-size-24;
  470. .icon-iconfontweixin{
  471. margin-right: 8rpx;
  472. font-size: $font-size-32;
  473. }
  474. &.none{
  475. text-align: center;
  476. }
  477. }
  478. }
  479. .opea-del{
  480. float: right;
  481. flex-direction: column;
  482. align-items: center;
  483. .opea-type-cell{
  484. width: 86rpx;
  485. height: 64rpx;
  486. padding:0 24rpx;
  487. border-radius: 32rpx;
  488. border: 1px solid #DDDDDD;
  489. line-height: 64rpx;
  490. font-size: $font-size-24;
  491. color: #FF0000;
  492. .icon-shanchu{
  493. font-size: $font-size-32;
  494. margin-right: 6rpx;
  495. }
  496. }
  497. }
  498. }
  499. }
  500. .operator-model{
  501. width: 100%;
  502. height: 100%;
  503. background: rgba(0,0,0,.1);
  504. position: fixed;
  505. top: 0;
  506. left: 0;
  507. bottom: 0;
  508. right: 0;
  509. margin: auto;
  510. z-index: 1000;
  511. .operator-alert{
  512. width: 435rpx;
  513. height: 360rpx;
  514. padding: 68rpx 32rpx;
  515. background: #FFFFFF;
  516. border-radius: 14rpx;
  517. position: absolute;
  518. top: 0;
  519. left: 0;
  520. bottom: 0;
  521. right: 0;
  522. margin: auto;
  523. z-index: 1001;
  524. .icon-iconfontguanbi{
  525. width: 68rpx;
  526. height: 68rpx;
  527. text-align: center;
  528. line-height: 68rpx;
  529. position: absolute;
  530. right: 0;
  531. top: 0;
  532. font-size: $font-size-36;
  533. color: #999999;
  534. }
  535. .content{
  536. .ciew-t{
  537. font-size: $font-size-28;
  538. color: $text-color;
  539. line-height: 48rpx;
  540. }
  541. }
  542. .btn{
  543. width: 100%;
  544. height: 68rpx;
  545. border-top: 1px solid #F7F7F7;
  546. line-height: 68rpx;
  547. font-size: $font-size-26;
  548. text-align: center;
  549. color: $color-system;
  550. position: absolute;
  551. bottom:0 ;
  552. left: 0;
  553. }
  554. }
  555. }
  556. .operator-btn{
  557. position: fixed;
  558. width: 100%;
  559. height: 140rpx;
  560. left: 0;
  561. bottom: 0;
  562. background: #FFFFFF;
  563. z-index: 95;
  564. display: flex;
  565. align-items: center;
  566. justify-content: center;
  567. .add-btn{
  568. width: 600rpx;
  569. height: 88rpx;
  570. font-size: $font-size-28;
  571. line-height: 88rpx;
  572. color: #FFFFFF;
  573. text-align: center;
  574. background: $btn-confirm;
  575. border-radius: 44rpx;
  576. }
  577. }
  578. .adds-btn{
  579. width: 600rpx;
  580. height: 88rpx;
  581. font-size: 28rpx;
  582. line-height: 88rpx;
  583. color: #FFFFFF;
  584. margin: 0 auto;
  585. text-align: center;
  586. background: #000000;
  587. border-radius: 44rpx;
  588. }
  589. </style>