search-supplier.vue 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571
  1. <template>
  2. <view class="container supplier clearfix">
  3. <view class="supplier-search clearfix">
  4. <view class="search-from name">
  5. <text class="iconfont icon-sousuo"></text>
  6. <input class="input"
  7. type="text"
  8. confirm-type="search"
  9. v-model="searchInputVal"
  10. @input="onShowClose"
  11. @confirm="initsupplierList()"
  12. placeholder="请输入供应商名称"
  13. maxlength="16"/>
  14. <text class="iconfont icon-shanchu1" v-if="isShowClose" @click="delInputText()"></text>
  15. </view>
  16. <view class="search-btn">
  17. <button class="search-btn" type="default" @click.stop="searchsupplierList">搜索</button>
  18. </view>
  19. </view>
  20. <view class="supplier-main">
  21. <view v-if="isEmpty" class="empty-container">
  22. <image class="supplier-empty-image" src="https://img.caimei365.com/group1/M00/03/71/Cmis2F3wna6AY2ZjAABpmnBICH4247.png" mode="aspectFit"></image>
  23. <view class="txt">暂无供应商数据</view>
  24. </view>
  25. <view v-else class="supplier-list">
  26. <view class="list clearfix" v-for="(item, index) in supplierList" :key="index">
  27. <view class="list-top">
  28. <view class="list-top-supplier" @click="goSupplier">
  29. <view class="logo"><img :src="item.image" alt=""></view>
  30. <view class="main">
  31. <view class="name">{{ item.name }}</view>
  32. <view class="massgs">
  33. <view class="label">满意度:</view>
  34. <view class="p-stars">
  35. <uni-stars :stars="6" :iconClass="iconClass" :iconColor="iconColor" :fontSize="36" :widthInfo="176"></uni-stars>
  36. </view>
  37. </view>
  38. </view>
  39. <view class="right"><text class="iconfont icon-xiayibu"></text></view>
  40. </view>
  41. <view class="list-top-msg">
  42. <view class="msg-pin clearfix">
  43. <view class="label">经营品项:</view>
  44. <view class="label-li">
  45. <text class="text" v-for="(label, idx) in item.labels" :key="idx">{{ label.text }}</text>
  46. </view>
  47. </view>
  48. <view class="msg-pin clearfix">
  49. <view class="label">经营品项:</view>
  50. <view class="label-text">广东省深圳市</view>
  51. </view>
  52. </view>
  53. </view>
  54. <view class="list-bottom">
  55. <view class="pros-item" v-for="(pros, pdx) in item.list" :key="pdx">
  56. <image class="pros-item-image" :src="pros.image" mode="scaleToFill"></image>
  57. <view class="pros-name">{{ pros.name }}</view>
  58. </view>
  59. </view>
  60. </view>
  61. <!--加载loadding-->
  62. <tui-loadmore :visible="loadding" :index="3" type="black"></tui-loadmore>
  63. <tui-nomore :visible="!pullUpOn" bgcolor="#F7F7F7" :text='nomoreText'></tui-nomore>
  64. <!--加载loadding-->
  65. </view>
  66. </view>
  67. </view>
  68. </template>
  69. <script>
  70. import authorize from '@/common/config/authorize.js'
  71. import tuiLoadmore from "@/components/tui-components/loadmore/loadmore"
  72. import tuiNomore from "@/components/tui-components/nomore/nomore"
  73. import uniStars from '@/components/uni-stars/uni-stars.vue'
  74. import { getFindAllsupplierList } from "@/api/seller.js"
  75. export default {
  76. components:{
  77. tuiLoadmore,
  78. tuiNomore,
  79. uniStars
  80. },
  81. data() {
  82. return {
  83. iconClass:'icon-aixin',
  84. iconColor:'#ff9100',
  85. serviceProviderId:'',
  86. isShowClose:false,
  87. searchInputVal:'',
  88. isEmpty:false,
  89. nomoreText: '上拉显示更多',
  90. pageNum:1,
  91. pageSize:10,
  92. hasNextPage:false,
  93. loadding: false,
  94. pullUpOn: true,
  95. pullFlag: true,
  96. allowDataStatus:true,
  97. wrapperHeight:'100%',
  98. scrollHeight:'',
  99. deleteAddressId:'',
  100. currPage:'',//当前页面
  101. prevPage:'',//上一个页面
  102. tabCurrentIndex:0,
  103. listStatus:1,
  104. supplierList:[
  105. {
  106. image:'https://img.caimei365.com/group1/M00/03/4B/Cmis210DQ_qAIoyoAAKD15t_iQc959.png',
  107. name:'北京恩盛众成国际贸易有限公司',
  108. labels:[
  109. {text:'仪器护理类'},
  110. {text:'仪器护理类'},
  111. {text:'仪器护理类'},
  112. {text:'仪器护理类'}
  113. ],
  114. areatext:'广东省深圳市福田区',
  115. list:[
  116. {
  117. image:'https://img.caimei365.com/group1/M00/03/4B/Cmis210DQ_qAIoyoAAKD15t_iQc959.png',
  118. name:'北京恩盛众成国际贸易有限公司',
  119. },
  120. {
  121. image:'https://img.caimei365.com/group1/M00/03/4B/Cmis210DQ_qAIoyoAAKD15t_iQc959.png',
  122. name:'北京恩盛众成国际贸易有限公司',
  123. },
  124. {
  125. image:'https://img.caimei365.com/group1/M00/03/4B/Cmis210DQ_qAIoyoAAKD15t_iQc959.png',
  126. name:'北京恩盛众成国际贸易有限公司',
  127. },
  128. ]
  129. },{
  130. image:'https://img.caimei365.com/group1/M00/03/4B/Cmis210DQ_qAIoyoAAKD15t_iQc959.png',
  131. name:'北京恩盛众成国际贸易有限公司',
  132. labels:[
  133. {text:'仪器护理类'},
  134. {text:'仪器护理类'},
  135. {text:'仪器护理类'},
  136. {text:'仪器护理类'}
  137. ],
  138. areatext:'广东省深圳市福田区',
  139. list:[
  140. {
  141. image:'https://img.caimei365.com/group1/M00/03/4B/Cmis210DQ_qAIoyoAAKD15t_iQc959.png',
  142. name:'北京恩盛众成国际贸易有限公司',
  143. },
  144. {
  145. image:'https://img.caimei365.com/group1/M00/03/4B/Cmis210DQ_qAIoyoAAKD15t_iQc959.png',
  146. name:'北京恩盛众成国际贸易有限公司',
  147. },
  148. {
  149. image:'https://img.caimei365.com/group1/M00/03/4B/Cmis210DQ_qAIoyoAAKD15t_iQc959.png',
  150. name:'北京恩盛众成国际贸易有限公司',
  151. },
  152. ]
  153. },{
  154. image:'https://img.caimei365.com/group1/M00/03/4B/Cmis210DQ_qAIoyoAAKD15t_iQc959.png',
  155. name:'北京恩盛众成国际贸易有限公司',
  156. labels:[
  157. {text:'仪器护理类'},
  158. {text:'仪器护理类'},
  159. {text:'仪器护理类'},
  160. {text:'仪器护理类'}
  161. ],
  162. areatext:'广东省深圳市福田区',
  163. list:[
  164. {
  165. image:'https://img.caimei365.com/group1/M00/03/4B/Cmis210DQ_qAIoyoAAKD15t_iQc959.png',
  166. name:'北京恩盛众成国际贸易有限公司',
  167. },
  168. {
  169. image:'https://img.caimei365.com/group1/M00/03/4B/Cmis210DQ_qAIoyoAAKD15t_iQc959.png',
  170. name:'北京恩盛众成国际贸易有限公司',
  171. },
  172. {
  173. image:'https://img.caimei365.com/group1/M00/03/4B/Cmis210DQ_qAIoyoAAKD15t_iQc959.png',
  174. name:'北京恩盛众成国际贸易有限公司',
  175. },
  176. ]
  177. },{
  178. image:'https://img.caimei365.com/group1/M00/03/4B/Cmis210DQ_qAIoyoAAKD15t_iQc959.png',
  179. name:'北京恩盛众成国际贸易有限公司',
  180. labels:[
  181. {text:'仪器护理类'},
  182. {text:'仪器护理类'},
  183. {text:'仪器护理类'},
  184. {text:'仪器护理类'}
  185. ],
  186. areatext:'广东省深圳市福田区',
  187. list:[
  188. {
  189. image:'https://img.caimei365.com/group1/M00/03/4B/Cmis210DQ_qAIoyoAAKD15t_iQc959.png',
  190. name:'北京恩盛众成国际贸易有限公司',
  191. },
  192. {
  193. image:'https://img.caimei365.com/group1/M00/03/4B/Cmis210DQ_qAIoyoAAKD15t_iQc959.png',
  194. name:'北京恩盛众成国际贸易有限公司',
  195. },
  196. {
  197. image:'https://img.caimei365.com/group1/M00/03/4B/Cmis210DQ_qAIoyoAAKD15t_iQc959.png',
  198. name:'北京恩盛众成国际贸易有限公司',
  199. },
  200. ]
  201. },
  202. ],
  203. isIphoneX:this.$store.state.isIphoneX,
  204. show_index:0,//控制显示那个组件
  205. }
  206. },
  207. onLoad(){
  208. this.setScrollHeight();
  209. },
  210. methods: {
  211. setScrollHeight() {
  212. // 窗口高度 - 底部距离
  213. setTimeout(()=> {
  214. const query = wx.createSelectorQuery().in(this);
  215. query.selectAll('.add-btn').boundingClientRect();
  216. query.exec(res => {
  217. if(res[0][0]){
  218. let winHeight = this.$api.getWindowHeight(),
  219. eleTop = res[0][0].top - 1;
  220. this.scrollHeight = eleTop;
  221. }
  222. })
  223. }, 500)
  224. },
  225. searchsupplierList(){
  226. this.pageNum=1
  227. this.initsupplierList()
  228. },
  229. initsupplierList(){
  230. let params = { searchWord:this.searchInputVal,pageNum:1,pageSize:this.pageSize }
  231. getFindAllsupplierList(params).then(response =>{
  232. let responseData = response.data
  233. if(responseData.results&&responseData.results.length > 0){
  234. this.isEmpty = false
  235. this.hasNextPage = response.data.hasNextPage
  236. this.supplierList =responseData.results
  237. this.pullFlag = false;
  238. setTimeout(()=>{this.pullFlag = true;},500)
  239. if(this.hasNextPage){
  240. this.pullUpOn = false
  241. this.nomoreText = '上拉显示更多'
  242. }else{
  243. this.pullUpOn = true
  244. this.loadding = false
  245. this.nomoreText = '已至底部'
  246. }
  247. }else{
  248. this.isEmpty = true
  249. }
  250. }).catch(error =>{
  251. this.$util.msg(error.msg,2000)
  252. })
  253. },
  254. getOnReachBottomData(){
  255. this.pageNum+=1
  256. let params = {searchWord:this.searchInputVal,pageNum:this.pageNum,pageSize:this.pageSize }
  257. getFindAllsupplierList(params).then(response =>{
  258. let responseData = response.data
  259. if(responseData.results&&responseData.results.length > 0){
  260. this.hasNextPage = response.data.hasNextPage
  261. this.supplierList = this.supplierList.concat(responseData.results)
  262. this.pullFlag = false;// 防上拉暴滑
  263. setTimeout(()=>{this.pullFlag = true;},500)
  264. if(this.hasNextPage){
  265. this.pullUpOn = false
  266. this.nomoreText = '上拉显示更多'
  267. }else{
  268. this.pullUpOn = false
  269. this.loadding = false
  270. this.nomoreText = '已至底部'
  271. }
  272. }
  273. }).catch(error =>{
  274. this.$util.msg(error.msg,2000)
  275. })
  276. },
  277. goOperator(item){
  278. this.$api.setStorage('orderUserInfo',item)
  279. this.$api.navigateTo('/seller/pages/supplier/addoperator')
  280. },
  281. onShowClose () {//输入框失去焦点时触发
  282. if(this.searchInputVal != ''){
  283. this.isShowClose = true
  284. }else{
  285. this.isShowClose = false
  286. this.pageNum=1
  287. this.initsupplierList()
  288. }
  289. },
  290. delInputText(){//清除输入框内容
  291. this.searchInputVal = ''
  292. this.isShowClose = false
  293. this.pageNum=1
  294. this.initsupplierList()
  295. },
  296. hidePhone(val){
  297. let phone
  298. if(val==null || val==""){
  299. phone = ""
  300. }else{
  301. phone = this.$reg.hidePhone(val)
  302. }
  303. return phone
  304. },
  305. checkData (value){
  306. let data;
  307. if(value == null || value ==""){
  308. data = ''
  309. }else{
  310. data = value
  311. }
  312. return data
  313. },
  314. desensitizationName(val){
  315. let name = this.$reg.desensitizationName(val)
  316. return name
  317. }
  318. },
  319. onReachBottom() {
  320. if(this.hasNextPage){
  321. this.loadding = true
  322. this.pullUpOn = true
  323. this.getOnReachBottomData()
  324. }
  325. },
  326. onShow() {
  327. this.$api.getStorage().then(response =>{
  328. this.serviceProviderId = response.serviceProviderID
  329. this.pageNum = 1;
  330. this.initsupplierList();
  331. })
  332. }
  333. }
  334. </script>
  335. <style lang='scss'>
  336. page {
  337. height: auto;
  338. }
  339. page,.container{
  340. /* padding-bottom: 120upx; */
  341. background: #F7F7F7;
  342. }
  343. .container{
  344. position: relative;
  345. }
  346. .supplier {
  347. width: 100%;
  348. height: auto;
  349. box-sizing: border-box;
  350. }
  351. .supplier-search{
  352. height: 64rpx;
  353. width: 702rpx;
  354. padding: 24rpx;
  355. background: #FFFFFF;
  356. display: flex;
  357. align-items: center;
  358. position: fixed;
  359. top: 0;
  360. left: 0;
  361. z-index: 999;
  362. .search-from{
  363. width: 582rpx;
  364. height: 64rpx;
  365. background: #F7F7F7;
  366. border-radius: 32rpx;
  367. float: left;
  368. position: relative;
  369. .input{
  370. width: 500rpx;
  371. height: 64rpx;
  372. float: left;
  373. line-height: 64rpx;
  374. color: $text-color;
  375. font-size: $font-size-24;
  376. }
  377. .icon-sousuo{
  378. width: 64rpx;
  379. height: 64rpx;
  380. line-height: 64rpx;
  381. text-align: center;
  382. display: block;
  383. font-size: $font-size-38;
  384. float: left;
  385. color: #999999;
  386. }
  387. .icon-shanchu1{
  388. font-size: $font-size-32;
  389. color: #999999;
  390. position: absolute;
  391. width: 64rpx;
  392. height: 64rpx;
  393. line-height: 64rpx;
  394. text-align: center;
  395. top: 0;
  396. right: 0;
  397. z-index: 10;
  398. }
  399. }
  400. .search-btn{
  401. width: 120rpx;
  402. line-height: 64rpx;
  403. text-align: center;
  404. font-size: $font-size-28;
  405. color: $text-color;
  406. float: left;
  407. background: #FFFFFF;
  408. }
  409. }
  410. .supplier-main{
  411. padding-top: 112rpx;
  412. }
  413. .list{
  414. box-sizing: border-box;
  415. padding: 0 24rpx;
  416. background-color:#FFFFFF ;
  417. margin-bottom: 20rpx;
  418. }
  419. .list-top{
  420. width: 100%;
  421. height: auto;
  422. }
  423. .list-top-msg{
  424. width: 100%;
  425. height: auto;
  426. box-sizing: border-box;
  427. padding-left: 115rpx;
  428. .msg-pin{
  429. width: 100%;
  430. height: auto;
  431. margin-bottom: 16rpx;
  432. .label{
  433. float: left;
  434. line-height: 37rpx;
  435. font-size: $font-size-26;
  436. color: #999999;
  437. }
  438. .label-li{
  439. width: 476rpx;
  440. float: left;
  441. line-height: 37rpx;
  442. .text{
  443. display: inline-block;
  444. padding: 0 8rpx;
  445. height: 33rpx;
  446. border-radius: 6rpx;
  447. background-color: #86b2fb;
  448. color: #FFFFFF;
  449. line-height: 33rpx;
  450. float: left;
  451. font-size: $font-size-20;
  452. text-align: center;
  453. margin: 10rpx;
  454. }
  455. }
  456. .label-text{
  457. line-height: 37rpx;
  458. font-size: $font-size-26;
  459. color: #999999;
  460. margin-left: 10rpx;
  461. float: left;
  462. }
  463. }
  464. }
  465. .list-top-supplier{
  466. width: 100%;
  467. height: 140rpx;
  468. padding: 30rpx 0 10rpx 0;
  469. box-sizing: border-box;
  470. background-color: #FFFFFF;
  471. position: relative;
  472. box-sizing: border-box;
  473. .logo{
  474. width: 90rpx;
  475. height: 72rpx;
  476. float: left;
  477. border: 1px solid #efefef;
  478. border-radius: 6rpx;
  479. image{
  480. width: 100%;
  481. height: 100%;
  482. display: block;
  483. border-radius: 6rpx;
  484. }
  485. }
  486. .main{
  487. width: 470rpx;
  488. height: 92rpx;
  489. float: left;
  490. margin-left: 20rpx;
  491. .name{
  492. width: 100%;
  493. line-height: 46rpx;
  494. float: left;
  495. font-size: $font-size-28;
  496. color: $text-color;
  497. float: right;
  498. overflow: hidden;
  499. text-overflow:ellipsis;
  500. white-space: nowrap;
  501. text-align: left;
  502. }
  503. .massgs{
  504. width: 100%;
  505. line-height: 46rpx;
  506. float: left;
  507. font-size: $font-size-24;
  508. color: #999999;
  509. .label{
  510. float: left;
  511. }
  512. .p-stars{
  513. float: left;
  514. margin-left: 20rpx;
  515. }
  516. }
  517. }
  518. .icon-xiayibu{
  519. line-height: 154rpx;
  520. display: inline-block;
  521. position: absolute;
  522. width: 48rpx;
  523. top: 0;
  524. right: 0;
  525. color: #b2b2b2;
  526. }
  527. }
  528. .list-bottom{
  529. width: 100%;
  530. height: auto;
  531. float: left;
  532. padding: 20rpx 0;
  533. .pros-item{
  534. width: 220rpx;
  535. height: auto;
  536. float: left;
  537. margin-right: 20rpx;
  538. &:last-child{
  539. margin-right: 0;
  540. }
  541. .pros-item-image{
  542. width: 218rpx;
  543. height: 218rpx;
  544. display: block;
  545. float: left;
  546. border: 1px solid #EBEBEB;
  547. border-radius: 6rpx;
  548. }
  549. .pros-name{
  550. width: 100%;
  551. height: 54rpx;
  552. line-height: 54rpx;
  553. box-sizing: border-box;
  554. padding: 0 10rpx;
  555. font-size: $font-size-24;
  556. color: #666666;
  557. white-space: normal;
  558. word-break: break-all;
  559. overflow: hidden;
  560. text-overflow: ellipsis;
  561. display: -webkit-box;
  562. -webkit-box-orient: vertical;
  563. -webkit-line-clamp: 1;
  564. }
  565. }
  566. }
  567. </style>