search.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262
  1. <template>
  2. <view class="search">
  3. <view class="top">
  4. <!-- @searchConfirm="searchConfirm" @searchBlur="searchBlur" -->
  5. <navbar ref="nav" :config="config" backColor="#666">
  6. <!-- <view slot="right" @click="goSearchConfirm" style="font-size: 28rpx; font-weight: 500; color: #FFFFFF;margin-right: 30rpx;" >
  7. 搜索
  8. </view> -->
  9. </navbar>
  10. </view>
  11. <div class="search-box">
  12. <div class="search-wap">
  13. <text class="hxicon search-icon">&#xe65c;</text>
  14. <input type="text" focus class="sput" placeholder-style="color: #ddd;" confirm-type="search"
  15. v-model="inputValue" placeholder="请输入搜索内容" @confirm="searchConfirm" />
  16. </div>
  17. <div class="word" @click="goSearchConfirm">搜索</div>
  18. </div>
  19. <view class="record" v-if="recordList.length>0">
  20. <view class="record-top"> 历史记录 </view>
  21. <view class="record-flex">
  22. <view class="record-item" v-for="(item,index) in recordList" :key="index" @click="goProductList(item)">
  23. {{ item }}
  24. </view>
  25. </view>
  26. </view>
  27. <view class="find">
  28. <view class="find-top"> 搜索发现 </view>
  29. <view class="find-flex">
  30. <view class="find-item" v-for="(item,index) in findList" :key="index" @click="goProductList(item.key_word)">
  31. {{ item.key_word }}
  32. </view>
  33. </view>
  34. </view>
  35. </view>
  36. </template>
  37. <script>
  38. export default {
  39. data() {
  40. return {
  41. recordList: [],
  42. findList: [],
  43. config: {
  44. back: true, //false是tolbar页面 是则不写
  45. title: "搜索",
  46. color: "#1A1A1A",
  47. //背景颜色;参数一:透明度(0-1);参数二:背景颜色(array则为线性渐变,string为单色背景)
  48. backgroundColor: [1, "#fff "],
  49. // rightSlot: true,
  50. // search: {
  51. // value: "",
  52. // placeholder: "请输入搜索关键字",
  53. // disabled: false,
  54. // },
  55. },
  56. inputValue: ''
  57. };
  58. },
  59. onShow() {
  60. // this.recordList = uni.getStorageSync("history") ?
  61. // uni.getStorageSync("history") :
  62. // [];
  63. if (uni.getStorageSync("history")) {
  64. this.recordList = uni.getStorageSync("history").reverse();
  65. }
  66. this.$http.get("/keyword/search/list", {
  67. limit: 20
  68. }).then((res) => {
  69. if (res && res.code == 200) {
  70. this.findList = res.list;
  71. }
  72. });
  73. },
  74. methods: {
  75. onClickBtn(data) {
  76. //console.log(data);
  77. },
  78. //点击按钮
  79. goSearchConfirm() {
  80. // this.inputValue = this.$refs.nav.config.search.value;
  81. this.historyRecored()
  82. uni.navigateTo({
  83. url: "/pages/product/search/productList?keyword=" + this.inputValue
  84. });
  85. },
  86. historyRecored() {
  87. let word = this.inputValue
  88. if (word != '') {
  89. let history = uni.getStorageSync("history");
  90. if (!history) {
  91. uni.setStorageSync("history", [word]);
  92. } else {
  93. let arr = uni.getStorageSync("history");
  94. let isHad = false;
  95. for (var i = 0; i < arr.length; i++) {
  96. if (arr[i] == word) {
  97. isHad = true;
  98. break;
  99. }
  100. }
  101. if (!isHad) {
  102. if (arr.length > 10) {
  103. arr.splice(9, 1);
  104. let pp = arr.concat([word]);
  105. uni.setStorageSync("history", pp);
  106. } else {
  107. history = history.concat([word]);
  108. uni.setStorageSync("history", history);
  109. }
  110. this.recordList = uni.getStorageSync("history").reverse();
  111. }
  112. }
  113. }
  114. },
  115. searchBlur(e) {
  116. this.inputValue = e.value
  117. },
  118. searchConfirm() {
  119. // if (e.value) {
  120. // if (e.value.length > 50) {
  121. // this.$mUtil.toast("搜索最多50个字符");
  122. // return false;
  123. // }
  124. this.historyRecored()
  125. uni.navigateTo({
  126. url: "/pages/product/search/productList?keyword=" + this.inputValue,
  127. });
  128. // }
  129. }, //搜索结果页
  130. goProductList(text) {
  131. uni.navigateTo({
  132. url: "/pages/product/search/productList?keyword=" + text,
  133. });
  134. },
  135. },
  136. };
  137. </script>
  138. <style lang="scss" scoped>
  139. @font-face {
  140. font-family: 'hxicon';
  141. /* project id 2009392 */
  142. src: url(data:font/truetype;charset=utf-8;base64,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) format('truetype');
  143. }
  144. .hxicon {
  145. font-family: "hxicon" !important;
  146. font-size: 20px;
  147. font-style: normal;
  148. /* #ifndef APP-NVUE */
  149. -webkit-font-smoothing: antialiased;
  150. -webkit-text-stroke-width: 0.2px;
  151. -moz-osx-font-smoothing: grayscale;
  152. /* #endif */
  153. }
  154. /deep/.hx-navbar__content__main_search_hxicon {
  155. span {
  156. font-size: 30rpx;
  157. }
  158. }
  159. .search-box {
  160. height: 85rpx;
  161. padding: 0 30rpx;
  162. // width: 100%;
  163. background-color: #fff;
  164. display: flex;
  165. // align-items: center;
  166. .search-wap {
  167. width: 600rpx;
  168. height: 60rpx;
  169. display: flex;
  170. align-items: center;
  171. background: #fff;
  172. border: 1px solid rgba(0, 0, 0, 0.42);
  173. border-radius: 30rpx;
  174. position: relative;
  175. .search-icon {
  176. font-size: 18px;
  177. margin-left: 30rpx;
  178. }
  179. .sput {
  180. margin-left: 25rpx;
  181. font-size: 22rpx;
  182. color: #ffffff;
  183. width: 100%;
  184. }
  185. }
  186. .word {
  187. font-size: 28rpx;
  188. margin-left: 24rpx;
  189. line-height: 60rpx;
  190. }
  191. }
  192. .find {
  193. margin: 10rpx 30rpx 0 30rpx;
  194. .find-top {
  195. color: #1a1a1a;
  196. font-size: 32rpx;
  197. font-weight: 700;
  198. line-height: 28rpx;
  199. }
  200. .find-flex {
  201. display: flex;
  202. flex-wrap: wrap;
  203. margin-top: 20rpx;
  204. .find-item {
  205. color: #999999;
  206. font-size: 24rpx;
  207. font-weight: 400;
  208. line-height: 24rpx;
  209. padding: 18rpx 30rpx;
  210. background-color: #f5f5f5;
  211. border-radius: 36rpx;
  212. margin: 0 22rpx 32rpx 0;
  213. }
  214. }
  215. }
  216. .record {
  217. margin: 30rpx;
  218. .record-top {
  219. font-size: 32rpx;
  220. font-weight: 700;
  221. color: #1a1a1a;
  222. }
  223. .record-flex {
  224. display: flex;
  225. flex-wrap: wrap;
  226. margin-top: 30rpx;
  227. .record-item {
  228. margin: 0 22rpx 30rpx 0;
  229. padding: 20rpx 30rpx;
  230. color: #999999;
  231. font-size: 24rpx;
  232. font-weight: 400;
  233. background-color: #f5f5f5;
  234. line-height: 24rpx;
  235. border-radius: 36rpx;
  236. }
  237. }
  238. }
  239. </style>