search.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529
  1. <template>
  2. <view class="search-container">
  3. <view class="search-main">
  4. <view class="search-input">
  5. <text class="iconfont icon-iconfonticonfontsousuo1"></text>
  6. <input maxlength="20" focus type="text" value="" confirm-type="search" @focus="onFocus" @input="onShowClose" @confirm="subMitSearch()" placeholder="请输入商品关键词" v-model.trim="searchInputVal"/>
  7. <text class="iconfont icon-shanchu1" v-if="isShowClose" @click="delInputText()"></text>
  8. </view>
  9. <view class="search-btn" @click="subMitSearch()">搜索</view>
  10. </view>
  11. <view class="search-container-history" v-if="!isShowWrapper">
  12. <view :class="'s-' + themeClass" v-if="serachRecordList.length>0">
  13. <view class="header">
  14. 搜索历史
  15. <text class="iconfont icon-shanchu" @click="confirmDetele"></text>
  16. </view>
  17. <view class="list">
  18. <view v-for="(item,index) in serachRecordList" :key="index" @click="keywordsClick(item.searchWord)">{{item.searchWord}}</view>
  19. </view>
  20. </view>
  21. </view>
  22. <!-- <go-search :theme="themeClass" @subMitSearch="subMitSearch"></go-search> -->
  23. <view v-else class="commodity-list-wrapper" :style="{'overflow':'auto','height':(commodityList.length>4? windowHeight + 'px' : 'auto')}">
  24. <scroll-view :style="{'height':(commodityList.length>4? scrollHeight+'px' : 'auto')}" @scrolltolower="scrolltolower" scroll-y v-if="!showEmpty">
  25. <view v-for="(item,index) in commodityList" :key="index" :id="item.id" class="all-type-list-content commodity-list" @click.stop="navToDetailPage(item.productID)">
  26. <image mode='widthFix' :src="item.mainImage" class="list-img" alt="list-img"></image>
  27. <view class="list-details-info">
  28. <text class="list-details-title">{{item.name}}</text>
  29. <text class="list-details-specs">规格:{{item.unit}}</text>
  30. <text class="list-details-miniQuantity" v-if="fromRegularPurchasePage">起订量:{{item.minBuyNumber}}</text>
  31. <view class="list-details-price">
  32. <view v-if="!hasLogin" class="list-login-now">
  33. <text class="p-no">价格:</text>
  34. <uni-stars :stars="parseInt(item.price1Grade)" :font-size='36' :width-info="180"></uni-stars>
  35. </view>
  36. <view class="list-price" v-else>
  37. <view class="price-larger" v-if="item.price1TextFlag == '1'">
  38. <text class="txt">该未公开价格</text>
  39. </view>
  40. <text v-else>¥<text class="price-larger">{{item.retailPrice.toFixed(2)}}</text></text>
  41. </view>
  42. </view>
  43. </view>
  44. </view>
  45. <view v-if="showLoading && commodityList.length > 4">
  46. <view class="loading-wrapper loading-wrapper-now" v-if="loadingNow">{{loadingText}}<text v-if="loadingText === '已至底部'">‧ ‧ ‧</text></view>
  47. <view class="loading-wrapper loading-wrapper-btm" v-else>———<text class="btm-text">已至底部</text>———</view>
  48. </view>
  49. </scroll-view>
  50. <view class="empty-container" v-if="showEmpty">
  51. <image class="empty-container-image" src="https://img.caimei365.com/group1/M00/03/8D/Cmis215XHXWAHCoqAAELHadZ9Xg365.png"></image>
  52. <text class="error-text">抱歉,没有相关商品!</text>
  53. </view>
  54. </view>
  55. <!-- 透明模态层 -->
  56. <modal-layer v-if='isModallayer'></modal-layer>
  57. </view>
  58. </template>
  59. <script>
  60. import { mapState,mapMutations } from 'vuex'
  61. import goSearch from '@/components/uni-search/go-search.vue'
  62. import modalLayer from "@/components/modal-layer"
  63. import uniStars from '@/components/uni-stars/uni-stars.vue'
  64. import authorize from '@/common/config/authorize.js'
  65. import { querySearchProduct , querySearchHistory,clearSearchHistory } from "@/api/product.js"
  66. export default {
  67. components: {
  68. // goSearch,
  69. modalLayer,
  70. uniStars
  71. },
  72. data() {
  73. return {
  74. userID:'',
  75. themeClass: 'block',
  76. searchInputVal:'', //搜索关键词
  77. isShowClose:false, //是否显示清空输入框图标
  78. isSearchHistory:false, //是都显示搜索历史
  79. serachRecordList:[], //历史搜索记录
  80. isShowWrapper:false,
  81. isModallayer:false,
  82. windowHeight: '',
  83. showEmpty: false,
  84. scrollHeight: '',
  85. commodityList: [],
  86. showLoading: false,
  87. loadingNow: true,
  88. loadingText: '上拉加载更多',
  89. pageSize: 10,
  90. pageNum: 1,
  91. hasNextPage: false,
  92. totalPage: 1,
  93. pullFlag: true,
  94. }
  95. },
  96. onLoad() {
  97. this.initGetSerachRecord()
  98. },
  99. computed: {
  100. ...mapState(['hasLogin','userInfo'])
  101. },
  102. methods:{
  103. initGetSerachRecord(){
  104. this.$api.getStorage().then((resolve) =>{
  105. this.userID = resolve.userID ? resolve.userID : '';
  106. querySearchHistory({userId:this.userID}).then(response =>{
  107. if(response.code == 0){
  108. this.serachRecordList = response.data
  109. }
  110. })
  111. })
  112. },
  113. subMitSearch() {
  114. if (this.searchInputVal == '') {
  115. this.$util.msg('请输入商品关键词',2000);
  116. }else{
  117. this.commodityList =[]
  118. this.getListFromServer(false)
  119. }
  120. },
  121. scrolltolower() {
  122. if(this.hasNextPage && this.pullFlag) {
  123. this.getListFromServer(true);
  124. }
  125. },
  126. getListFromServer(loadMore) {
  127. this.showLoading = true;
  128. this.loadingNow = true;
  129. this.loadingText = '加载中';
  130. this.showEmpty = false;
  131. if(loadMore) {
  132. this.pageNum += 1;
  133. }
  134. let params = {userId:this.userID,searchWord:this.searchInputVal,pageNum:this.pageNum,pageSize:this.pageSize}
  135. querySearchProduct(params).then(response =>{
  136. this.isShowWrapper = true
  137. const resData = response.data;
  138. const resList = resData.results;
  139. if(resList && resList.length > 0){
  140. this.hasNextPage = resData.hasNextPage;
  141. this.totalPage = resData.totalPage;
  142. this.showEmpty = false;
  143. if(loadMore) {
  144. this.commodityList = [...this.commodityList,...resList];
  145. } else {
  146. this.commodityList = [...resList];
  147. }
  148. // 防上拉暴滑
  149. this.pullFlag = false;
  150. setTimeout(()=>{
  151. this.pullFlag = true;
  152. },500)
  153. // 底部提示文案
  154. if(this.hasNextPage) {
  155. this.loadingText = '上拉加载更多';
  156. } else {
  157. this.showLoading = true;
  158. this.loadingNow = false;
  159. }
  160. } else {
  161. if(!loadMore) {
  162. this.showEmpty = true;
  163. }
  164. }
  165. }).catch(response =>{
  166. this.$util.msg(response.msg,2000);
  167. })
  168. },
  169. onShowClose () {//输入框失去焦点时触发
  170. this.inputEmpty(this.searchInputVal)
  171. },
  172. onFocus () { //输入框获取焦点时触发
  173. this.inputEmpty(this.searchInputVal)
  174. this.initGetSerachRecord()
  175. },
  176. delInputText () { //清除输入框内容
  177. this.searchInputVal = ''
  178. this.isShowClose = false
  179. this.isShowWrapper = false
  180. this.inputEmpty(this.searchInputVal)
  181. this.initGetSerachRecord()
  182. },
  183. keywordsClick (item) {//关键词搜索与历史搜索
  184. this.searchInputVal = item;
  185. this.isShowClose = true;
  186. this.subMitSearch();
  187. },
  188. confirmDetele() {//清空历史记录
  189. this.$util.modal('提示','确定删除历史记录?','确定','取消',true,() =>{
  190. clearSearchHistory({userId:this.userID}).then(response =>{
  191. this.$util.msg('删除成功',2000,true,'success')
  192. this.serachRecordList=[];
  193. }).catch(response =>{
  194. this.$util.msg(response.msg,2000)
  195. })
  196. })
  197. },
  198. inputEmpty(val){
  199. this.isShowWrapper = false
  200. if(val != ''){
  201. this.isShowClose = true
  202. }else{
  203. this.isShowClose = false
  204. }
  205. },
  206. navToDetailPage(id) {
  207. this.isModallayer = true;
  208. this.$api.navigateTo(`/pages/goods/product?id=${id}`);
  209. this.isModallayer = false;
  210. },
  211. setScrollHeight() {
  212. const {windowHeight, pixelRatio} = wx.getSystemInfoSync();
  213. this.windowHeight = windowHeight - 1;
  214. this.scrollHeight = windowHeight - 1;
  215. },
  216. toLoginPage() {
  217. let searchLoginType = 'search'
  218. uni.navigateTo({
  219. url:`/pages/login/login-accont?type=${searchLoginType}`
  220. })
  221. }
  222. },
  223. onShow() {
  224. this.setScrollHeight();
  225. }
  226. }
  227. </script>
  228. <style lang="scss">
  229. @import "@/uni.scss";
  230. page{
  231. background-color: #F7F7F7 !important;
  232. }
  233. .search-main{
  234. width: 702rpx;
  235. height: 80rpx;
  236. padding: 12rpx 24rpx;
  237. border-bottom: 1px solid #F0F0F0;
  238. position: fixed;
  239. top: 0;
  240. left: 0;
  241. background: #FFFFFF;
  242. z-index: 1001;
  243. .search-input{
  244. width: 448rpx;
  245. height: 80rpx;
  246. padding: 0 68rpx;
  247. line-height: 80rpx;
  248. border-radius: 40rpx;
  249. position: relative;
  250. background: #F0F0F0;
  251. float: left;
  252. .icon-iconfonticonfontsousuo1{
  253. font-size: 36rpx;
  254. color: #8A8A8A;
  255. position: absolute;
  256. left: 24rpx;
  257. z-index: 10;
  258. }
  259. .icon-shanchu1{
  260. font-size: 36rpx;
  261. color: #8A8A8A;
  262. position: absolute;
  263. right: 24rpx;
  264. top: 0;
  265. padding: 0 10rpx;
  266. z-index: 10;
  267. }
  268. input{
  269. width: 448rpx;
  270. height: 80rpx;
  271. background-color: #F0F0F0;
  272. font-size: 26rpx;
  273. }
  274. }
  275. .search-btn{
  276. width: 118rpx;
  277. height: 80rpx;
  278. line-height: 80rpx;
  279. color: $color-system;
  280. font-size: 30rpx;
  281. text-align: center;
  282. float: left;
  283. }
  284. .voice-icon{
  285. width: 36rpx;
  286. height: 36rpx;
  287. padding: 16rpx 20rpx 16rpx 0;
  288. position: absolute;
  289. left: 16rpx;
  290. top: 4rpx;
  291. z-index: 10;
  292. }
  293. }
  294. .search-container{
  295. padding-top: 106rpx;
  296. }
  297. .s-block{
  298. background: #FFFFFF;
  299. .header{
  300. font-size: 32rpx;
  301. padding:40rpx 24rpx 22rpx 24rpx;
  302. line-height: 42rpx;
  303. font-size: 30rpx;
  304. font-weight: bold;
  305. position: relative;
  306. .icon-shanchu{
  307. font-size: 36rpx;
  308. color: #333333;
  309. float: right;
  310. padding: 0 10rpx;
  311. z-index: 10;
  312. font-weight: normal;
  313. }
  314. }
  315. .list{
  316. display: flex;
  317. flex-wrap: wrap;
  318. padding-bottom: 40rpx;
  319. view{
  320. color: #8A8A8A;
  321. font-size: 24rpx;
  322. box-sizing: border-box;
  323. text-align: center;
  324. height: 48rpx;
  325. line-height: 48rpx;
  326. border-radius: 24rpx;
  327. margin:12rpx;
  328. padding:.0 30rpx;
  329. overflow: hidden;
  330. white-space: nowrap;
  331. text-overflow: ellipsis;
  332. background-color: #F3F3F3;
  333. }
  334. }
  335. }
  336. .s-circle{
  337. margin-top: 30rpx;
  338. .header{
  339. font-size: 32rpx;
  340. padding: 30rpx;
  341. border-bottom: 2rpx solid #F9F9F9;
  342. position: relative;
  343. image{
  344. width: 36rpx;
  345. height: 36rpx;
  346. padding: 10rpx;
  347. position: absolute;
  348. right: 40rpx;
  349. top: 24rpx;
  350. }
  351. }
  352. .list{
  353. display: flex;
  354. flex-wrap: wrap;
  355. padding: 0 30rpx 20rpx;
  356. view{
  357. padding: 8rpx 30rpx;
  358. margin: 20rpx 30rpx 0 0;
  359. font-size: 28rpx;
  360. color: #8A8A8A;
  361. background-color: #F7F7F7;
  362. box-sizing: border-box;
  363. text-align: center;
  364. border-radius: 20rpx;
  365. }
  366. }
  367. }
  368. .wanted-block{
  369. margin-top: 30rpx;
  370. .header{
  371. font-size: 32rpx;
  372. padding: 30rpx;
  373. }
  374. .list{
  375. display: flex;
  376. flex-wrap: wrap;
  377. view{
  378. width: 50%;
  379. color: #8A8A8A;
  380. font-size: 28rpx;
  381. box-sizing: border-box;
  382. text-align: center;
  383. padding: 20rpx 0;
  384. border-top: 2rpx solid #FFF;
  385. border-left: 2rpx solid #FFF;
  386. background-color: #F7F7F7;
  387. overflow: hidden;
  388. white-space: nowrap;
  389. text-overflow: ellipsis;
  390. }
  391. }
  392. }
  393. .wanted-circle{
  394. margin-top: 30rpx;
  395. .header{
  396. font-size: 32rpx;
  397. padding: 30rpx;
  398. }
  399. .list{
  400. display: flex;
  401. flex-wrap: wrap;
  402. padding: 0 30rpx 20rpx;
  403. view{
  404. padding: 8rpx 30rpx;
  405. margin: 20rpx 30rpx 0 0;
  406. font-size: 28rpx;
  407. color: #8A8A8A;
  408. background-color: #F7F7F7;
  409. box-sizing: border-box;
  410. text-align: center;
  411. border-radius: 20rpx;
  412. }
  413. }
  414. }
  415. .commodity-list-wrapper {
  416. scroll-view {
  417. height: 100%;
  418. overflow: scroll;
  419. }
  420. .empty-container-image {
  421. margin-top: -300rpx;
  422. }
  423. .toIndexPage {
  424. bottom: 390rpx;
  425. }
  426. .show-more-btn {
  427. width: 276rpx;
  428. height: 52rpx;
  429. line-height: 52rpx;
  430. border: 2rpx solid #D8D8D8;
  431. background: #F7F7F7;
  432. font-size: 26rpx;
  433. margin: 26rpx 0;
  434. position: absolute;
  435. left: 50%;
  436. margin-left: -138rpx;
  437. }
  438. }
  439. .all-type-list-content {
  440. height: 216rpx;
  441. padding: 24rpx;
  442. background: #fff;
  443. margin-bottom: 2rpx;
  444. display: flex;
  445. flex-direction: row;
  446. box-sizing: content-box;
  447. .list-img {
  448. width: 210rpx;
  449. height: 218rpx !important;
  450. margin-right: 26rpx;
  451. border-radius: 10rpx;
  452. border: 2rpx solid #f3f3f3;
  453. }
  454. }
  455. .list-details-info {
  456. width: 466rpx;
  457. display: flex;
  458. flex-direction: column;
  459. font-size: 26rpx;
  460. position: relative;
  461. .list-details-title {
  462. line-height: 38rpx;
  463. text-overflow: ellipsis;
  464. overflow: hidden;
  465. display: -webkit-box;
  466. -webkit-line-clamp: 2;
  467. line-clamp: 2;
  468. -webkit-box-orient: vertical;
  469. }
  470. .list-details-specs {
  471. margin-top: 8rpx;
  472. color: #999999;
  473. }
  474. .list-details-miniQuantity {
  475. margin-top: 7rpx;
  476. }
  477. }
  478. .list-details-price {
  479. width: 100%;
  480. display: flex;
  481. flex-direction: row;
  482. justify-content: space-between;
  483. position: absolute;
  484. bottom: 0;
  485. right: 0;
  486. .price-icon {
  487. width: 22rpx;
  488. height: 28rpx;
  489. vertical-align: middle;
  490. margin-right: 10rpx;
  491. }
  492. .price-icon + text {
  493. font-size: 25rpx;
  494. vertical-align: middle;
  495. }
  496. .list-login-now {
  497. width: 375rpx;
  498. color: #F8C499;
  499. position: absolute;
  500. bottom: 0;
  501. .p-no{
  502. float: left;
  503. font-size: $font-size-24;
  504. color: $color-system;
  505. margin-right: 10rpx;
  506. }
  507. }
  508. .login-now {
  509. padding: 10rpx 10rpx 10rpx 0;
  510. }
  511. .list-price {
  512. color: #FF2A2A;
  513. .price-larger {
  514. font-size: 32rpx;
  515. .txt{
  516. font-size: $font-size-24;
  517. display: inline-block;
  518. line-height: 30rpx;
  519. text-align: left;
  520. }
  521. }
  522. }
  523. }
  524. </style>