search-second.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438
  1. <template>
  2. <view class="search-container">
  3. <view class="search-main">
  4. <view class="gosearch-btn">
  5. <text class="iconfont icon-sousuo"></text>
  6. <input class="input" maxlength="20" type="text" value="" confirm-type="search" @input="onShowClose" @focus="onFocus" @confirm="subMitSearch()" placeholder="请输入关键词" v-model.trim="name"/>
  7. <text class="iconfont icon-shanchu1" v-if="isShowClose" @click.stop="delInputText()"></text>
  8. </view>
  9. </view>
  10. <view class="commodity-list-wrapper" :style="{'overflow':'auto','height':(listData.length>4? windowHeight + 'px' : 'auto')}">
  11. <scroll-view :style="{'height':scrollHeight+'px'}" @scrolltolower="scrolltolower" scroll-y v-if="listData.length > 0">
  12. <view class="Listitem" v-for="(item, index) in listData" :key="index" :class="item.sold==1?'activeImg':''"
  13. :productid="item.productID" @click.stop="navToDetailPage(item.productID)">
  14. <view class="itemImg onhref" >
  15. <image :src="item.imageList[0]" class="bigImg"></image>
  16. <image src="http://static-b.caimei365.com/app/img/icon/yishou.png" class="yishou_bg" v-if="item.sold==1&&item.newAdded==1||item.sold==1&&item.newAdded==0"></image>
  17. </view>
  18. <view class="ItemInfo">
  19. <text class="infotag news" v-if="item.sold==0&&item.newAdded==1">新</text>
  20. <view class="productname" href="" :style="item.sold==0&&item.newAdded==1?'text-indent:60rpx':''">
  21. {{item.name}}
  22. </view>
  23. <view class="targetprice" >
  24. <text v-if="item.detailTalkFlag ==2 && hasLogin==false">价格详聊</text>
  25. <text v-else-if="!hasLogin" class="priceparam">登录查看价格</text>
  26. <text v-else-if="hasLogin && item.detailTalkFlag==2">价格详聊</text>
  27. <text v-else>¥{{item.price1Str}}</text>
  28. </view>
  29. <view class="shijian">
  30. <text class="iconfont icon-shijian"></text> {{item.onLineDateStr}}
  31. </view>
  32. <view class="dizhi">
  33. <view class="dizhi_left">
  34. <text class="iconfont icon-dizhi1"></text>
  35. {{item.provinceCityDistrict}}
  36. </view>
  37. <view class="liulan_right">
  38. <text class="iconfont icon-kejian1"></text>
  39. {{item.viewingNum}}
  40. </view>
  41. </view>
  42. </view>
  43. </view>
  44. <view v-if="showLoading">
  45. <view class="loading-wrapper loading-wrapper-now" v-if="loadingNow">{{loadingText}}<text v-if="loadingText === '已至底部'">‧ ‧ ‧</text></view>
  46. <view class="loading-wrapper loading-wrapper-btm" v-else>———<text class="btm-text">已至底部</text>———</view>
  47. </view>
  48. </scroll-view>
  49. <view class="empty-container" v-if="showEmpty">
  50. <image class="empty-container-image" src="https://img.caimei365.com/group1/M00/03/8D/Cmis215XHXWAHCoqAAELHadZ9Xg365.png"></image>
  51. <text class="error-text">抱歉,没有相关商品!</text>
  52. </view>
  53. </view>
  54. <!-- 透明模态层 -->
  55. <modal-layer v-if='isModallayer'></modal-layer>
  56. </view>
  57. </template>
  58. <script>
  59. import { mapState,mapMutations } from 'vuex'
  60. import modalLayer from "@/components/modal-layer"
  61. import uniGrader from '@/components/uni-grade/uni-grade.vue'
  62. import authorize from '@/common/config/authorize.js'
  63. export default {
  64. components: {
  65. modalLayer,
  66. uniGrader
  67. },
  68. data() {
  69. return {
  70. shopId:0,
  71. userID:0,
  72. themeClass: 'block',
  73. show:false,
  74. userIdentity:'',
  75. identity:2,
  76. searchKeyType:1,
  77. isShowClose:false, //是否显示清空输入框图标
  78. isSearchHistory:false,//是都显示搜索历史
  79. isShowWrapper:false,
  80. isModallayer:false,
  81. isFocus:false,
  82. priceLoading:true,
  83. windowHeight: '',
  84. showEmpty: false,
  85. scrollHeight: '',
  86. listData: [],
  87. showLoading: false,
  88. loadingNow: true,
  89. loadingText: '上拉加载更多',
  90. pullFlag: true,
  91. pageNum: 1,
  92. pageSize: 10,
  93. secondHandType:1,
  94. instrumentType:0,
  95. name:'',
  96. total:0,
  97. hasNextPage:false
  98. }
  99. },
  100. created() {
  101. this.getListFromServer()
  102. },
  103. computed: {
  104. ...mapState(['hasLogin','userInfo'])
  105. },
  106. methods:{
  107. subMitSearch() {//搜索
  108. if (this.name == '') {
  109. this.$util.msg('请输入商品关键词',2000);
  110. }else{
  111. this.getListFromServer()
  112. }
  113. },
  114. getListFromServer(loadMore) {
  115. this.showLoading = true;
  116. this.loadingNow = true;
  117. this.loadingText = '加载中';
  118. this.showEmpty = false;
  119. if(loadMore) {
  120. this.pageNum += 1;
  121. }
  122. let params = {
  123. secondHandType:1,
  124. instrumentType:0,
  125. name:this.name,
  126. pageNum:this.pageNum,
  127. pageSize:this.pageSize
  128. }
  129. this.SecondService.SeconHandProductList(params).then(response =>{
  130. this.isShowWrapper = true
  131. const resData = response.data;
  132. const resList = resData.results;
  133. if(resList && resList.length > 0){
  134. this.total = resData.totalRecord;
  135. this.hasNextPage = resData.hasNextPage;
  136. this.showEmpty = false;
  137. if(loadMore) {
  138. this.listData = [...this.listData,...resList];
  139. } else {
  140. this.listData = [...resList];
  141. }
  142. // 防上拉暴滑
  143. this.pullFlag = false;
  144. setTimeout(()=>{ this.pullFlag = true; },500)
  145. // 底部提示文案
  146. if(this.hasNextPage) {
  147. this.loadingText = '上拉加载更多';
  148. } else {
  149. this.showLoading = true;
  150. this.loadingNow = false;
  151. }
  152. } else {
  153. if(!loadMore) {
  154. this.showEmpty = true;
  155. }
  156. }
  157. }).catch(error =>{
  158. this.$util.msg(error.msg,2000);
  159. })
  160. },
  161. scrolltolower() {
  162. if(this.hasNextPage && this.pullFlag) {
  163. this.getListFromServer(true);
  164. }
  165. },
  166. onShowClose () {//输入框失去焦点时触发
  167. if(this.name != ''){
  168. this.isShowClose = true;
  169. }else{
  170. this.isShowClose = false
  171. }
  172. },
  173. onFocus () { //输入框获取焦点时触发
  174. this.inputEmpty(this.searchInputVal)
  175. },
  176. inputEmpty(val){
  177. this.isShowWrapper = false
  178. if(val != ''){
  179. this.isShowClose = true
  180. }else{
  181. this.isShowClose = false
  182. }
  183. },
  184. delInputText () { //清除输入框内容
  185. this.name = ''
  186. this.isShowClose = false
  187. this.isShowWrapper = false
  188. this.getListFromServer()
  189. },
  190. keywordsClick (item) {//关键词搜索与历史搜索
  191. this.name = item;
  192. this.isShowClose = true;
  193. this.subMitSearch();
  194. },
  195. navToDetailPage(id) {
  196. this.isModallayer = true;
  197. this.$api.navigateTo(`/second/pages/product/product-details?id=${id}`);
  198. this.isModallayer = false;
  199. },
  200. setScrollHeight() {
  201. const {windowHeight, pixelRatio} = wx.getSystemInfoSync();
  202. this.windowHeight = windowHeight - 1;
  203. this.scrollHeight = windowHeight - 1;
  204. },
  205. toLoginPage() {
  206. let searchLoginType = 'search'
  207. uni.navigateTo({
  208. url:`/pages/login/login?type=${searchLoginType}`
  209. })
  210. },
  211. topBubble() {//显隐搜索项
  212. this.show = !this.show;
  213. },
  214. },
  215. onShow() {
  216. this.setScrollHeight();
  217. }
  218. }
  219. </script>
  220. <style lang="scss">
  221. @import "@/uni.scss";
  222. page{
  223. background-color:#fff;
  224. }
  225. .search-main{
  226. width: 100%;
  227. height: 88rpx;
  228. position: fixed;
  229. top: 0;
  230. left: 0;
  231. background: #FFFFFF;
  232. z-index: 1001;
  233. box-sizing: border-box;
  234. padding: 9rpx 0;
  235. .gosearch-btn{
  236. width: 702rpx;
  237. height: 100%;
  238. border-radius: 40rpx;
  239. background: #F0F0F0;
  240. margin: 0 auto;
  241. padding:0 20rpx;
  242. font-size: 28rpx;
  243. line-height: 70rpx;
  244. padding-left: 70rpx;
  245. color: #8A8A8A;
  246. background: #F7F7F7;
  247. position: relative;
  248. box-sizing: border-box;
  249. .icon-sousuo{
  250. width: 70rpx;
  251. height: 70rpx;
  252. line-height: 70rpx;
  253. text-align: center;
  254. display: block;
  255. position: absolute;
  256. left: 0;
  257. top: 0;
  258. font-size: 34rpx;
  259. color: #8A8A8A;
  260. z-index: 10;
  261. }
  262. .icon-shanchu1{
  263. font-size: 36rpx;
  264. color: #8A8A8A;
  265. position: absolute;
  266. right: 10rpx;
  267. top: 0;
  268. padding: 0 10rpx;
  269. z-index: 100;
  270. }
  271. .input{
  272. width: 400rpx;
  273. height: 100%;
  274. float: left;
  275. font-size: $font-size-24;
  276. box-sizing: border-box;
  277. padding-right: 66rpx;
  278. }
  279. }
  280. .search-btn{
  281. width: 120rpx;
  282. height: 70rpx;
  283. line-height: 70rpx;
  284. float: right;
  285. text-align: center;
  286. color: #666666;
  287. font-size: $font-size-24;
  288. }
  289. }
  290. .search-container{
  291. padding-top: 96rpx;
  292. }
  293. .s-block{
  294. background: #FFFFFF;
  295. .header{
  296. font-size: 32rpx;
  297. padding:40rpx 24rpx 22rpx 24rpx;
  298. line-height: 42rpx;
  299. font-size: 30rpx;
  300. font-weight: bold;
  301. position: relative;
  302. .icon-shanchu{
  303. font-size: 36rpx;
  304. color: #333333;
  305. float: right;
  306. padding: 0 10rpx;
  307. z-index: 10;
  308. font-weight: normal;
  309. }
  310. }
  311. .list{
  312. display: flex;
  313. flex-wrap: wrap;
  314. padding-bottom: 40rpx;
  315. view{
  316. color: #8A8A8A;
  317. font-size: 24rpx;
  318. box-sizing: border-box;
  319. text-align: center;
  320. height: 48rpx;
  321. line-height: 48rpx;
  322. border-radius: 24rpx;
  323. margin:12rpx;
  324. padding:.0 30rpx;
  325. overflow: hidden;
  326. white-space: nowrap;
  327. text-overflow: ellipsis;
  328. background-color: #F3F3F3;
  329. }
  330. }
  331. }
  332. .commodity-list-wrapper {
  333. scroll-view {
  334. height: 100%;
  335. overflow: scroll;
  336. }
  337. .Listitem{
  338. height: 202rpx;
  339. padding: 20rpx;
  340. border-bottom: 2rpx solid #F0F2F4;
  341. &.activeImg {
  342. opacity: 0.5;
  343. }
  344. .itemImg {
  345. width: 180rpx;
  346. height: 180rpx;
  347. float: left;
  348. background: #000;
  349. position: relative;
  350. .yishou_bg{
  351. width: 90rpx;
  352. height: 90rpx;
  353. position: absolute;
  354. top: 50%;
  355. left: 50%;
  356. transform: translate(-50%, -50%)
  357. }
  358. .bigImg {
  359. width: 100%;
  360. height: 100%;
  361. }
  362. }
  363. .ItemInfo {
  364. float: right;
  365. width:500rpx;
  366. .infotag{
  367. font-size: 20rpx;
  368. padding: 5rpx 15rpx;
  369. background: #f94b4b;
  370. color: #fff;
  371. position: absolute;
  372. border-radius: 6rpx;
  373. }
  374. .productname{
  375. display: inline-block;
  376. font-size: 28rpx;
  377. color: #333333;
  378. vertical-align: top;
  379. text-overflow: -o-ellipsis-lastline;
  380. overflow: hidden;
  381. text-overflow: ellipsis;
  382. display: -webkit-box;
  383. -webkit-line-clamp: 2;
  384. line-clamp: 2;
  385. -webkit-box-orient: vertical;
  386. width: 500rpx;
  387. }
  388. .targetprice {
  389. font-size: 26rpx;
  390. color: #f94b4b;
  391. cursor: pointer;
  392. margin: 15rpx 0;
  393. }
  394. .shijian{
  395. font-size: 24rpx;
  396. color: #999999;
  397. margin-top: 10rpx;
  398. .icon-shijian{
  399. font-size: 30rpx;
  400. color: #999999;
  401. margin-right: 10rpx;
  402. }
  403. }
  404. .dizhi{
  405. font-size: 24rpx;
  406. color: #999999;
  407. margin-top: 10rpx;
  408. .dizhi_left{
  409. float: left;
  410. .icon-dizhi1{
  411. font-size: 30rpx;
  412. color: #999999;
  413. margin-right: 10rpx;
  414. }
  415. }
  416. .liulan_right{
  417. float: right;
  418. margin-right: 25rpx;
  419. .icon-kejian1{
  420. font-size: 30rpx;
  421. color: #999999;
  422. margin-right: 10rpx;
  423. }
  424. }
  425. }
  426. .shijian{
  427. font-size: 24rpx;
  428. color: #999999;
  429. margin-top: 10rpx;
  430. }
  431. }
  432. }
  433. }
  434. </style>