search-instrument.vue 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283
  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="listQuery.keyword"
  10. :focus="isFocus"
  11. @input="onShowClose"
  12. @confirm="GetSearchEquipmentList()"
  13. placeholder="请输入仪器名称"
  14. maxlength="16"/>
  15. <text class="iconfont icon-shanchu1" v-if="isShowClose" @click="delInputText()"></text>
  16. </view>
  17. <view class="search-btn">
  18. <button class="search-btn" type="default" @click.stop="searchsupplierList">搜索</button>
  19. </view>
  20. </view>
  21. <view class="equipment-main">
  22. <view v-if="isEmpty" class="empty-container">
  23. <image class="empty-container-image" :src="productNoneImage" mode="aspectFit"></image>
  24. <view class="txt">暂无项目仪器数据^_^</view>
  25. </view>
  26. <view v-else class="supplier-list">
  27. <view class="list clearfix" v-for="(item, index) in list" :key="index" @click.stop="navToDetailPage(item.e_id)">
  28. <image class="pros-item-image" :src="item.e_image" mode="scaleToFill"></image>
  29. <view class="pros-name">{{ isInterceptHtmlFn(item.e_name) }}</view>
  30. </view>
  31. <!--加载loadding-->
  32. <tui-loadmore :visible="loadding" :index="3" type="black"></tui-loadmore>
  33. <tui-nomore :visible="!pullUpOn" bgcolor="#F7F7F7" :text='nomoreText'></tui-nomore>
  34. <!--加载loadding-->
  35. </view>
  36. </view>
  37. </view>
  38. </template>
  39. <script>
  40. import authorize from '@/common/config/authorize.js'
  41. import tuiLoadmore from "@/components/tui-components/loadmore/loadmore"
  42. import tuiNomore from "@/components/tui-components/nomore/nomore"
  43. export default {
  44. components:{
  45. tuiLoadmore,
  46. tuiNomore
  47. },
  48. data() {
  49. return {
  50. iconClass:'icon-aixin',
  51. iconColor:'#ff9100',
  52. isShowClose:false,
  53. isEmpty:false,
  54. isFocus:true,
  55. productNoneImage:'http://static-b.caimei365.com/app/img/icon/icon-pnone.png',
  56. nomoreText: '上拉显示更多',
  57. loadding: false,
  58. pullUpOn: true,
  59. pullFlag: true,
  60. list:[],
  61. listQuery:{
  62. keyword: '',
  63. pageSize: 10,
  64. pageNum: 1
  65. },
  66. total:0
  67. }
  68. },
  69. onLoad(option){
  70. if(option.keyword){
  71. this.listQuery.keyword = option.keyword
  72. this.GetSearchEquipmentList();
  73. }
  74. },
  75. methods: {
  76. searchsupplierList(){//搜索
  77. this.listQuery.pageNum=1
  78. this.GetSearchEquipmentList()
  79. },
  80. GetSearchEquipmentList(){//查询供应商列表
  81. this.ProductService.GetSearchEquipmentList(this.listQuery).then(response =>{
  82. let data = JSON.parse(response.data)
  83. let dataList = data.items
  84. console.log(data)
  85. this.total = data.total
  86. if(dataList && dataList.length > 0){
  87. this.isEmpty = false
  88. this.list = dataList
  89. this.pullFlag = false;
  90. setTimeout(()=>{this.pullFlag = true;},500)
  91. if(this.total>this.list.length){
  92. this.pullUpOn = false
  93. this.nomoreText = '上拉显示更多'
  94. }else{
  95. this.pullUpOn = true
  96. this.loadding = false
  97. this.nomoreText = '已至底部'
  98. }
  99. }else{
  100. this.isEmpty = true
  101. }
  102. }).catch(error =>{
  103. this.$util.msg(error.msg,2000)
  104. })
  105. },
  106. GetSearchEquipmentListBottomData(){//上滑加载
  107. this.listQuery.pageNum+=1
  108. this.ProductService.GetSearchEquipmentList(this.listQuery).then(response =>{
  109. let data = JSON.parse(response.data)
  110. console.log(data)
  111. this.total = data.total
  112. this.list = this.list.concat(data.items)
  113. if(this.total>this.list.length){
  114. this.pullUpOn = false
  115. this.nomoreText = '上拉显示更多'
  116. }else{
  117. this.pullUpOn = true
  118. this.loadding = false
  119. this.nomoreText = '已至底部'
  120. }
  121. }).catch(error =>{
  122. this.$util.msg(error.msg,2000)
  123. })
  124. },
  125. onShowClose () {//输入框失去焦点时触发
  126. if(this.listQuery.keyword != ''){
  127. this.isShowClose = true
  128. }else{
  129. this.isShowClose = false
  130. this.listQuery.pageNum=1
  131. this.GetSearchEquipmentList()
  132. }
  133. },
  134. delInputText(){//清除输入框内容
  135. this.listQuery.keyword = ''
  136. this.isShowClose = false
  137. this.listQuery.pageNum=1
  138. this.GetSearchEquipmentList()
  139. },
  140. navToDetailPage(id) {//跳转仪器详情页
  141. this.$api.navigateTo(`/pages/goods/instrument-details?id=${id}`)
  142. },
  143. isInterceptHtmlFn(text){
  144. let name = this.$reg.interceptHtmlFn(text)
  145. return name
  146. },
  147. },
  148. onReachBottom() {
  149. if(this.total>this.list.length){
  150. this.loadding = true
  151. this.pullUpOn = true
  152. this.GetSearchEquipmentListBottomData()
  153. }
  154. },
  155. onShow() {
  156. }
  157. }
  158. </script>
  159. <style lang='scss'>
  160. page {
  161. height: auto;
  162. }
  163. page,.container{
  164. /* padding-bottom: 120upx; */
  165. background: #F7F7F7;
  166. }
  167. .container{
  168. position: relative;
  169. }
  170. .supplier {
  171. width: 100%;
  172. height: auto;
  173. box-sizing: border-box;
  174. }
  175. .supplier-search{
  176. height: 84rpx;
  177. width: 100%;
  178. padding:10rpx 24rpx;
  179. background: #FFFFFF;
  180. display: flex;
  181. align-items: center;
  182. position: fixed;
  183. top: 0;
  184. left: 0;
  185. z-index: 999;
  186. box-sizing: border-box;
  187. .search-from{
  188. width: 582rpx;
  189. height: 64rpx;
  190. background: #F7F7F7;
  191. border-radius: 32rpx;
  192. float: left;
  193. position: relative;
  194. .input{
  195. width: 500rpx;
  196. height: 64rpx;
  197. float: left;
  198. line-height: 64rpx;
  199. color: $text-color;
  200. font-size: $font-size-24;
  201. }
  202. .icon-sousuo{
  203. width: 64rpx;
  204. height: 64rpx;
  205. line-height: 64rpx;
  206. text-align: center;
  207. display: block;
  208. font-size: $font-size-38;
  209. float: left;
  210. color: #999999;
  211. }
  212. .icon-shanchu1{
  213. font-size: $font-size-32;
  214. color: #999999;
  215. position: absolute;
  216. width: 64rpx;
  217. height: 64rpx;
  218. line-height: 64rpx;
  219. text-align: center;
  220. top: 0;
  221. right: 0;
  222. z-index: 10;
  223. }
  224. }
  225. .search-btn{
  226. width: 120rpx;
  227. line-height: 64rpx;
  228. text-align: center;
  229. font-size: $font-size-28;
  230. color: #666666;
  231. float: left;
  232. background: #FFFFFF;
  233. }
  234. }
  235. .equipment-main{
  236. box-sizing: border-box;
  237. padding: 0 24rpx;
  238. margin-top: 94rpx;
  239. }
  240. .list{
  241. width: 340rpx;
  242. height: 301rpx;
  243. float: left;
  244. margin-right: 20rpx;
  245. margin-top: 10rpx;
  246. margin-bottom: 10rpx;
  247. border-radius: 6rpx;
  248. background-color: #FFFFFF;
  249. &:nth-child(2n){
  250. margin-right: 0;
  251. }
  252. .pros-item-image{
  253. width: 340rpx;
  254. height: 227rpx;
  255. display: block;
  256. float: left;
  257. border-radius: 6rpx 6rpx 0 0;
  258. }
  259. .pros-name{
  260. width: 100%;
  261. height: 74rpx;
  262. background-color: #FFFFFF;
  263. line-height: 74rpx;
  264. box-sizing: border-box;
  265. padding: 0 20rpx;
  266. font-size: $font-size-24;
  267. color: #666666;
  268. white-space: normal;
  269. word-break: break-all;
  270. overflow: hidden;
  271. text-overflow: ellipsis;
  272. display: -webkit-box;
  273. -webkit-box-orient: vertical;
  274. -webkit-line-clamp: 1;
  275. text-align: center;
  276. }
  277. }
  278. </style>