思路分析：1.v-mode 双向绑定输入的内容 @change="Search"方法
2.data(){retuen{keywords:'',//定义搜索的文字}}
3.将获取到的keywords提交到后台调用搜索方法
废话不多说上截图
1 <template>
2 <div>
3 <div class="main">
4 <!-- 头部返回标签搜索框 -->
5 <div class="header">
6 <i @click='back' class="el-icon-back"></i>
7 <input type="search" placeholder="华为nove 5z"
8 @change="onSearch"
9 v-model="keywords"
10 >
11 </div>
12 <!-- 店铺信息粉丝量关注 -->
13 <div class="shop">
14 <h2>华为自营官方旗舰店</h2>
15 <div class="ziyi">
16 <li><span class="business">自营</span><span style="color:#fff;">粉丝数量247万</span></li>
17 <li class="follow"><i class="el-icon-star-off"></i>关注</li>
18 </div>
19 </div>
20 <!-- tab滑动 -->
21 <div class="header_tab">
22 <van-tabs v-model="active">
23 <van-tab title="手机" style="flex-basis: 12%;">
24 <!--价格销量筛选 -->
25 <div class="price">
26 <ul>
27 <li>价格</li>
28 <li>销量</li>
29 <li>筛选</li>
30 </ul>
31 </div>
32 <!-- 商品信息渲染 -->
33 <ul class="box">
34 <li v-for="(item,index) in goodsList" :key="index">
35 <p class="commodity_i"><img :src="item.picUrl" alt="商品照片"></p>
36 <p class="commodity_name">{{item.name}}</p>
37 <!-- <p class="size">
38 <span>6.26英寸</span>|
39 <span>超长待机</span>|
40 <span>128GB</span>
41 </p> -->
42 <p class="commodity_price">¥<span>{{item.counterPrice}}</span>/天限时价</p>
43 <p class="all">
44 <span class="new">全新</span>
45 <span class="free">免押金</span>
46 <span class="gift">赠</span>
47 </p>
48 <p class="people">
49 <span>52.7万</span>人付款
50 <span>99%</span>好评
51 </p>
52 </li>
53
54 </ul>
55 </van-tab>
56 <van-tab title="游戏机" style="flex-basis: 12%;">
57
58 </van-tab>
59 <van-tab title="电脑" style="flex-basis: 12%;">
60 <!--价格销量筛选 -->
61 <div class="price">
62 <ul>
63 <li>价格</li>
64 <li>销量</li>
65 <li>筛选</li>
66 </ul>
67 </div>
68 <!-- 商品信息渲染 -->
69 <ul class="box">
70 <li>
71 <!-- <p class="commodity_i"><img src="../assets/image/phone.png" alt="商品照片"></p> -->
72 <p class="commodity_name">Apple iPhone X</p>
73 <!-- <p class="size">
74 <span>6.26英寸</span>|
75 <span>超长待机</span>|
76 <span>128GB</span>
77 </p> -->
78 <p class="commodity_price">¥<span>9.99</span>/天限时价</p>
79 <p class="all">
80 <span class="new">全新</span>
81 <span class="free">免押金</span>
82 <span class="gift">赠</span>
83 </p>
84 <p class="people">
85 <span>52.7万</span>人付款
86 <span>99%</span>好评
87 </p>
88 </li>
89 </ul>
90 </van-tab>
91 <van-tab title="相机" style="flex-basis: 12%;">内容 4</van-tab>
92 <van-tab title="办公用品" style="flex-basis: 12%;"></van-tab>
93 </van-tabs>
94 </div>
95 </div>
96
97 </div>
98
99 </template>
100
101 <script>
102 export default {
103 data(){
104 return{
105 goodsList:[],
106 // search:'',
107 keywords:''
108 }
109 },
110 methods:{
111 //返回上一级目录
112 back(){
113 this.$router.go(-1)
114 },
115 //商品数据
116 getgoodsList(){
117 this.$axios.get("http://192.168.0.18:8080/wx/goods/list",{params:{
118 keyword:this.keywords
119 }})
120 .then(res=>{
121 console.log(res.data.data.list);
122 this.goodsList=res.data.data.list;
123 console.log(this.goodsList);
124 })
125 },
126 onSearch(){
127 //获取到的值
128 let keyword=this.keywords;
129 this.$axios.get("http://192.168.0.18:8080/wx/goods/list",{params:{
130 keyword:this.keywords
131 }})
132 .then(res=>{
133 console.log(res.data.data.list);
134 this.goodsList=res.data.data.list;
135 console.log(this.goodsList);
136 })
137
138 }
139
140
141 },
142 //tab点击
143 mounted(){
144 document.onclick=function(e){
145 var smallDay=document.querySelector('.small-day');
146 var middleDay=document.querySelector('.middle-day');
147 var largeDay=document.querySelector('.large-day');
148 var event=e||event;
149 var target=event.targrt||event.srcElement;
150 if(target.className==='small-day'){
151 target.style.backgroundColor="#C7E8FF";
152 target.style.color="#1385FF";
153 middleDay.style.backgroundColor="#F5F6FA";
154 middleDay.style.color='black';
155 largeDay.style.backgroundColor="#F5F6FA";
156 largeDay.style.color='black';
157 }
158 if(target.className==='middle-day'){
159 target.style.backgroundColor="#C7E8FF";
160 target.style.color="#1385FF";
161 smallDay.style.backgroundColor="#F5F6FA";
162 smallDay.style.color='black';
163 largeDay.style.backgroundColor="#F5F6FA";
164 largeDay.style.color='black';
165 }
166 if(target.className==='large-day'){
167 target.style.backgroundColor="#C7E8FF";
168 target.style.color="#1385FF";
169 middleDay.style.backgroundColor="#F5F6FA";
170 middleDay.style.color='black';
171 smallDay.style.backgroundColor="#F5F6FA";
172 smallDay.style.color='black';
173 }
174 }
175 },
176 created(){
177 this.getgoodsList();
178 }
179
180
181
182 }
183 </script>
184
185 <style scoped>
186 li{
187 list-style: none;
188 }
189 .main{
190 background-image: url("../assets/image/main_bng.png") ;
191 background-color: #F8F9FB;
192 background-repeat: no-repeat;
193 background-position: -0.5rem -0.1rem;
194 background-size: 5.0rem 5.0rem;
195 }
196 .header{
197 padding: 0.15rem;
198 }
199 .header i{
200 font-size: 0.26rem;
201 }
202 .header input{
203 border-radius: 2rem;
204 width:79%;
205 color:#000000;
206 line-height: 0.28rem;
207 padding-left: 0.2rem;
208 margin-top: 0.1rem;
209 margin-left: 0.2rem;
210 }
211 .shop{
212 padding: 0.1rem;
213 padding-left: 0.26rem;
214 padding-right: 0.2rem;
215 }
216 .shop h2{
217 color:#fff;
218 font-size: 0.16rem;
219 font-weight: 500;
220 }
221 .ziyi{
222 margin-top: 0.1rem;
223 display: flex;
224 justify-content: space-between;
225 }
226 .business{
227 color:#EB5516;
228 border-radius: 0.1rem;
229 border:1px solid #ED9636;
230 font-size: 0.13rem;
231 background-color: #fff;
232 padding: 0.01rem;
233 padding-left: 0.03rem;
234 padding-right: 0.03rem;
235 }
236 .follow{
237 color:#fff;
238 border-radius: 0.1rem;
239 border:1px solid #fff;
240 font-size: 0.13rem;
241 background-color: #7A7A7A;
242 padding: 0.01rem;
243 padding-left: 0.03rem;
244 padding-right: 0.03rem;
245 }
246
247 /*tab 点击 样式*/
248 .van-tabs /deep/ .van-tabs__line {
249 position: absolute;
250 width: 0.2rem !important;
251 bottom: 0.15rem;
252 left: 0;
253 z-index: 1;
254 height: 0.03rem;
255 background-color: #f44;
256 border-radius: 0.03rem;
257 background: -webkit-linear-gradient(to left, #fff, #fff) !important;
258 background: -o-linear-gradient(to left, #fff, #fff) !important;
259 background: -moz-linear-gradient(to left, #fff, #fff) !important;
260 background: linear-gradient(to left, #fff, #fff) !important;
261 }
262 .van-tabs /deep/ .van-tabs__wrap{
263 margin-left: 0;
264 width: 100%;
265 }
266 .van-tabs /deep/ .van-tabs__nav{
267 background:rgba(0,0,0,.01);
268 }
269 .van-tabs /deep/ [class*=van-hairline]::after{
270 border:1px solid rgba(0,0,0,.01);
271 }
272 .van-tabs /deep/ .van-tab--active {
273 color: #fff;
274 font-weight: 500;
275 }
276 .van-tabs /deep/ .van-tab{
277 color: #fff;
278 flex-basis: 20% !important;
279 }
280 /* 价格销量筛选 */
281 .price ul{
282 display: flex;
283 justify-content: space-around;
284 }
285 .price ul li{
286 color:#5E6165;
287 font-size: 0.14rem;
288 padding-top: 0.1rem;
289 }
290 /*商品信息渲染*/
291 .ii li{
292 margin-top: 30px;
293 }
294 .box{
295 width: 100%;
296 overflow: hidden;
297 }
298 .box li{
299 width: 1.6rem;
300 overflow: hidden;
301 overflow: auto;
302 border-radius: 0.2rem;
303 float:left;
304 border:1px solid #ccc;
305 margin-top: 20px;
306 margin-left: 20px;
307 background-color: #fff;
308 }
309 .commodity_i{
310 width: 1.3rem;
311 height: 1.4rem;
312 padding: 0.18rem;
313 }
314 .commodity_i>img{
315 width: 100%;
316 }
317
318 .commodity_name{
319 font-weight: 600;
320 font-size: 0.12rem;
321 padding-top: 0.2rem;
322 padding-left: 0.12rem;
323 }
324 .size{
325 background-color: #F2F2F2;
326 margin-top: 0.1rem;
327 margin-left: 0.06rem;
328 margin-right: 0.06rem;
329 font-size: 0.01rem;
330 }
331 .size span{
332 margin-left: 0.001rem;
333 }
334 .commodity_price{
335 padding-left: 0.1rem;
336 color:#B3381D;
337 margin-top: 0.06rem;
338 }
339 .commodity_price span{
340 font-weight:bold;
341 }
342 .all{
343 margin-top: 0.08rem;
344 }
345 .new{
346 background-color: #EE6226;
347 color:#fff;
348 font-size: 0.06rem;
349 padding: 0.02rem;
350 margin-left: 0.1rem;
351 }
352 .free{
353 color:#46A8F2;
354 border:1px solid #46A8F2;
355 font-size: 0.06rem;
356 padding: 0.01rem;
357 margin-left: 0.1rem;
358 }
359 .gift{
360 color:#F08E26;
361 border:1px solid #F08E26;
362 font-size: 0.06rem;
363 padding: 0.01rem;
364 margin-left: 0.1rem;
365 }
366 .people{
367 margin-top: 0.1rem;
368 color:#CFCFCF;
369 font-size: 0.1rem;
370 padding-left: 0.12rem;
371 padding-bottom: 0.12rem;
372 }
373 </style>