shigongli
/
miniapp-v2
Volgen 6
Ster 0
Vork 0
Code Kwesties 0 Pull-aanvragen 0 Publicaties 0 Wiki Activiteit
Bladeren bron

开始搞后台加油

李志伟 3 jaren geleden
bovenliggende
68e48ac2bf
commit
ed2fbfc2c3
6 gewijzigde bestanden met toevoegingen van 803 en 733 verwijderingen
Zij-aan-zij weergave Toon Diff Stats
  1. 2
    2
      src/pages/index/index.config.js
  2. 352
    296
      src/pages/index/tabs/Recommend.jsx
  3. 116
    132
      src/pages/index/tabs/less/Recommend.less
  4. 3
    0
      src/pages/searchResult/searchResult.config.js
  5. 236
    194
      src/pages/searchResult/searchResult.jsx
  6. 94
    109
      src/pages/searchResult/searchResult.less

+ 2
- 2
src/pages/index/index.config.js Bestand weergeven 

@@ -3,7 +3,7 @@ export default {
3 3 
   navigationStyle: 'custom',
4 4 
   styleIsolation: 'shared',
5 5 
   usingComponents: {
6 
-    "mp-tabbar": "weui-miniprogram/tabbar/tabbar"
7 
-
6 
+    "mp-tabbar": "weui-miniprogram/tabbar/tabbar",
7 
+    "mp-tabs": "../../../components/tabs/index"
8 8 
   }
9 9 
 }

+ 352
- 296
src/pages/index/tabs/Recommend.jsx Bestand weergeven 

@@ -1,37 +1,80 @@
1 
-import React from 'react'
1 
+import { React, useState, useEffect, } from 'react'
2 2 
 // .就是当前路径
3 3 
 import './less/Recommend.less'
4 4 
 import iconsearch from '../../../assets/icons/housemantj/search.png'
5 5 
 import icontip from '../../../assets/icons/housemantj/tip.png'
6 6 
 import location from '../../../assets/icons/housemantj/location.png'
7 
-import msImage from'../../../assets/icons/housemantj/ms.jpg'
8 
-import mjImage from'../../../assets/icons/housemantj/mj.jpg'
9 
-import glImage from'../../../assets/icons/housemantj/gl.jpg'
10 
-import msTip from'../../../assets/icons/housemantj/foodtip.png'
11 
-import mjTip from'../../../assets/icons/housemantj/mjtip.png'
12 
-import glTip from'../../../assets/icons/housemantj/gltip.png'
13 
-import onlove from'../../../assets/icons/housemantj/onlove.png'
14 
-import Taro from '@tarojs/taro'
7 
+import msImage from '../../../assets/icons/housemantj/ms.jpg'
8 
+import mjImage from '../../../assets/icons/housemantj/mj.jpg'
9 
+import glImage from '../../../assets/icons/housemantj/gl.jpg'
10 
+import msTip from '../../../assets/icons/housemantj/foodtip.png'
11 
+import mjTip from '../../../assets/icons/housemantj/mjtip.png'
12 
+import glTip from '../../../assets/icons/housemantj/gltip.png'
13 
+import onlove from '../../../assets/icons/housemantj/onlove.png'
14 
+import Taro,{useRouter } from '@tarojs/taro'
15 
+
16 
+
15 17
16 18 
 export default (props) => {
17 
-  const onSearch=()=>{
19 
+  const [activeTab, setActiveTab] = useState(0)
20 
+  const { params } = useRouter()
21 
+  const { tabJump } = params || {}
22 
+  useEffect(() => {
23 
+    if (tabJump) {
24 
+      setActiveTab(tabJump - 0)
25 
+    }
26 
+    console.log('---------------------', tabJump);
27 
+
28 
+  }, [tabJump])
29 
+
30 
+  const tabs = [
31 
+    {
32 
+      title: '附近',
33 
+    },
34 
+    {
35 
+      title: '全城',
36 
+
37 
+    },
38 
+    {
39 
+      title: '夫子庙',
40 
+
41 
+    },
42 
+    {
43 
+      title: '新街口',
44 
+
45 
+    },
46 
+  ]
47 
+  const handleTabChange = (e) => {
48 
+    const { index } = e.detail
49 
+    setActiveTab(index)
50 
+  }
51 
+
52 
+
53 
+
54 
+
55 
+  const onSearch = () => {
18 56 
     // 用绝对路径
19 
-    Taro.navigateTo({ url:'/pages/search/search'});
57 
+    Taro.navigateTo({ url: '/pages/search/search' });
20 58 
   }
21 
-  const toDetails=()=>{
59 
+  const toDetails = () => {
22 60 
     // 用绝对路径
23 
-    Taro.navigateTo({ url:'/pages/details/foodDetails/foodDetails'});
61 
+    Taro.navigateTo({ url: '/pages/details/foodDetails/foodDetails' });
24 62 
   }
25 
-  const toDetails2=()=>{
63 
+  const toDetails2 = () => {
26 64 
     // 用绝对路径
27 
-    Taro.navigateTo({ url:'/pages/details/mjDetails/sceneryDetails'});
65 
+    Taro.navigateTo({ url: '/pages/details/mjDetails/sceneryDetails' });
28 66 
   }
29 
-  const onLogin=()=>{
67 
+  const onLogin = () => {
30 68 
     // 用绝对路径
31 
-    Taro.navigateTo({ url:'/pages/login/login'});
69 
+    Taro.navigateTo({ url: '/pages/login/login' });
32 70 
   }
33 71 
   return (
34 
-    <view style={{height: '100%',overflow:'auto'}}>
72 
+    <view style={{ height: '100%', overflow: 'auto' }}>
73 
+
74 
+
75 
+
76 
+
77 
+
35 78 
       <view className='search' onClick={onSearch}>
36 79 
         <input className='searchInput' disabled />
37 80 
         <image className='searchicon' src={iconsearch} />
 
@@ -41,295 +84,308 @@ export default (props) => {
41 84 
         <image className='tipicon' src={icontip} />
42 85 
         <view className='tipword' >Tip : 饮食无大小，疫情防控请大家认真对待！</view>
43 86 
       </view>
44 
-      <view className='nav'>
45 
-        <view className='dinwei'>
46 
-          <image className='location' src={location} />
47 
-          <view className='city'>南京</view>
48 
-        </view>
49 
-        <view className='line' />
50 
-        <view className='list'>
51 
-          <view className='bdattractions' >
52 
-            <view className='acname'>附近</view>
53 
-            <view className='buttonline' ></view>
54 
-          </view>
55 
-          <view className='bdattractions'>
56 
-            <view className='acname'>全城</view>
57 
-            <view className='buttonline'></view>
58 
-          </view><view className='bdattractions'>
59 
-            <view className='acname'>夫子庙</view>
60 
-            <view className='buttonline'></view>
61 
-          </view><view className='bdattractions'>
62 
-            <view className='acname'>新街口</view>
63 
-            <view className='buttonline'></view>
64 
-          </view>
87 
+      <view className='index-tabs'>
88 
+        <view className='position'>
89 
+            <image className='location' src={location} />
90 
+            <view className='city'>南京</view>
91 
+          <view className='line' />
65 92 
         </view>
93 
+
94 
+        <scroll-view scroll-x="true" scroll-view='true' bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll">
95 
+
96 
+        <mp-tabs
97 
+          tabClass='tabs-Unselected'
98 
+          swiperClass='tabs-swiper'
99 
+          activeClass='tabs-Selected'
100 
+          tabs={tabs}
101 
+          current={activeTab}
102 
+          onChange={handleTabChange}
103 
+          activeTab={activeTab}
104 
+        >
105 
+        </mp-tabs>
106 
+        </scroll-view>
66 107 
       </view>
67 
-      <scroll-view  scroll-y="true" scroll-view='true' bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" className='content'>
108 
+      <scroll-view scroll-y="true" scroll-view='true' bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll">
68 109 
         <view className="waterfall">
69 
-
70 
-          <view className='contentCard' onClick={toDetails2}>
71 
-             <view className='cardTop'>
72 
-              <image mode='widthFix' src={mjImage} className='cCardimg'/>
73 
-            <image  className='lefttips' src={mjTip} />
74 
-              <image src={onlove} className='loveharde'></image>
75 
-            </view>
76 
-            <view className='bContent'>
77 
-              <view className='cCword'>
78 
-                超划算套餐？这么便宜也是第一次见6荤6素1...
79 
-              </view>
80 
-              <view className='cCleft'>
81 
-                <image src={location} className='cCicon'></image>
82 
-                <view className='distance'><text>9.99</text>公里</view>
110 
+          {activeTab === 0 &&
111 
+            <>
112 
+              <view className='contentCard' onClick={toDetails2}>
113 
+                <view className='cardTop'>
114 
+                  <image mode='widthFix' src={mjImage} className='cCardimg' />
115 
+                  <image className='lefttips' src={mjTip} />
116 
+                  <image src={onlove} className='loveharde'></image>
117 
+                </view>
118 
+                <view className='bContent'>
119 
+                  <view className='cCword'>
120 
+                    超划算套餐？这么便宜也是第一次见6荤6素1...
121 
+                  </view>
122 
+                  <view className='cCleft'>
123 
+                    <image src={location} className='cCicon'></image>
124 
+                    <view className='distance'><text>9.99</text>公里</view>
125 
+                  </view>
126 
+                  <view className='cCright'>
127 
+                    <view className='money'>￥</view>
128 
+                    <view className='price'><text>999</text>/人</view>
129 
+                  </view>
130 
+                </view>
131 
+              </view>
132 
+              <view className='contentCard'>
133 
+                <view className='cardTop'>
134 
+                  <image mode='widthFix' src={msImage} className='cCardimg' />
135 
+                  <image className='lefttips' src={msTip} />
136 
+                  <image src={onlove} className='loveharde'></image>
137 
+                </view>
138 
+                <view className='bContent'>
139 
+                  <view className='cCword'>
140 
+                    超划算套餐？这么便宜也是第一次见6荤6素1...
141 
+                  </view>
142 
+                  <view className='cCleft'>
143 
+                    <image src={location} className='cCicon'></image>
144 
+                    <view className='distance'><text>9.99</text>公里</view>
145 
+                  </view>
146 
+                  <view className='cCright'>
147 
+                    <view className='money'>￥</view>
148 
+                    <view className='price'><text>999</text>/人</view>
149 
+                  </view>
150 
+                </view>
151 
+              </view>
152 
+              <view className='contentCard'>
153 
+                <view className='cardTop'>
154 
+                  <image mode='widthFix' src={glImage} className='cCardimg' />
155 
+                  <image className='lefttips' src={glTip} />
156 
+                  <image src={onlove} className='loveharde'></image>
157 
+                </view>
158 
+                <view className='bContent'>
159 
+                  <view className='cCword'>
160 
+                    超划算套餐？这么便宜也是第一次见6荤6素1...
161 
+                  </view>
162 
+                  <view className='cCleft'>
163 
+                    <image src={location} className='cCicon'></image>
164 
+                    <view className='distance'>9.99公里</view>
165 
+                  </view>
166 
+                  <view className='cCright'>
167 
+                    <view className='money'>￥</view>
168 
+                    <view className='price'>999/人</view>
169 
+                  </view>
170 
+                </view>
171 
+              </view>
172 
+              <view className='contentCard'>
173 
+                <view className='cardTop'>
174 
+                  <image mode='widthFix' src={mjImage} className='cCardimg' />
175 
+                  <image className='lefttips' src={mjTip} />
176 
+                  <image src={onlove} className='loveharde'></image>
177 
+                </view>
178 
+                <view className='bContent'>
179 
+                  <view className='cCword'>
180 
+                    超划算套餐？这么便宜也是第一次见6荤6素1...
181 
+                  </view>
182 
+                  <view className='cCleft'>
183 
+                    <image src={location} className='cCicon'></image>
184 
+                    <view className='distance'><text>9.99</text>公里</view>
185 
+                  </view>
186 
+                  <view className='cCright'>
187 
+                    <view className='money'>￥</view>
188 
+                    <view className='price'><text>999</text>/人</view>
189 
+                  </view>
190 
+                </view>
191 
+              </view>
192 
+              <view className='contentCard'>
193 
+                <view className='cardTop'>
194 
+                  <image mode='widthFix' src={mjImage} className='cCardimg' />
195 
+                  <image className='lefttips' src={mjTip} />
196 
+                  <image src={onlove} className='loveharde'></image>
197 
+                </view>
198 
+                <view className='bContent'>
199 
+                  <view className='cCword'>
200 
+                    超划算套餐？这么便宜也是第一次见6荤6素1...
201 
+                  </view>
202 
+                  <view className='cCleft'>
203 
+                    <image src={location} className='cCicon'></image>
204 
+                    <view className='distance'><text>9.99</text>公里</view>
205 
+                  </view>
206 
+                  <view className='cCright'>
207 
+                    <view className='money'>￥</view>
208 
+                    <view className='price'><text>999</text>/人</view>
209 
+                  </view>
210 
+                </view>
211 
+              </view>
212 
+              <view className='contentCard'>
213 
+                <view className='cardTop'>
214 
+                  <image mode='widthFix' src={msImage} className='cCardimg' />
215 
+                  <image className='lefttips' src={msTip} />
216 
+                  <image src={onlove} className='loveharde'></image>
217 
+                </view>
218 
+                <view className='bContent'>
219 
+                  <view className='cCword'>
220 
+                    超划算套餐？这么便宜也是第一次见6荤6素1...
221 
+                  </view>
222 
+                  <view className='cCleft'>
223 
+                    <image src={location} className='cCicon'></image>
224 
+                    <view className='distance'><text>9.99</text>公里</view>
225 
+                  </view>
226 
+                  <view className='cCright'>
227 
+                    <view className='money'>￥</view>
228 
+                    <view className='price'><text>999</text>/人</view>
229 
+                  </view>
230 
+                </view>
231 
+              </view>
232 
+              <view className='contentCard'>
233 
+                <view className='cardTop'>
234 
+                  <image mode='widthFix' src={mjImage} className='cCardimg' />
235 
+                  <image className='lefttips' src={mjTip} />
236 
+                  <image src={onlove} className='loveharde'></image>
237 
+                </view>
238 
+                <view className='bContent'>
239 
+                  <view className='cCword'>
240 
+                    超划算套餐？这么便宜也是第一次见6荤6素1...
241 
+                  </view>
242 
+                  <view className='cCleft'>
243 
+                    <image src={location} className='cCicon'></image>
244 
+                    <view className='distance'><text>9.99</text>公里</view>
245 
+                  </view>
246 
+                  <view className='cCright'>
247 
+                    <view className='money'>￥</view>
248 
+                    <view className='price'><text>999</text>/人</view>
249 
+                  </view>
250 
+                </view>
251 
+              </view>
252 
+              <view className='contentCard' onClick={toDetails}>
253 
+                <view className='cardTop'>
254 
+                  <image mode='widthFix' src={msImage} className='cCardimg' />
255 
+                  <image className='lefttips' src={msTip} />
256 
+                  <image src={onlove} className='loveharde'></image>
257 
+                </view>
258 
+                <view className='bContent'>
259 
+                  <view className='cCword'>
260 
+                    超划算套餐？这么便宜也是第一次见6荤6素1...
261 
+                  </view>
262 
+                  <view className='cCleft'>
263 
+                    <image src={location} className='cCicon'></image>
264 
+                    <view className='distance'><text>9.99</text>公里</view>
265 
+                  </view>
266 
+                  <view className='cCright'>
267 
+                    <view className='money'>￥</view>
268 
+                    <view className='price'><text>999</text>/人</view>
269 
+                  </view>
270 
+                </view>
271 
+              </view>
272 
+            </>
273 
+          }
274 
+          {activeTab === 1 &&
275 
+            <>
276 
+              <view className='contentCard'>
277 
+                <view className='cardTop'>
278 
+                  <image mode='widthFix' src={mjImage} className='cCardimg' />
279 
+                  <image className='lefttips' src={mjTip} />
280 
+                  <image src={onlove} className='loveharde'></image>
281 
+                </view>
282 
+                <view className='bContent'>
283 
+                  <view className='cCword'>
284 
+                    超划算套餐？这么便宜也是第一次见6荤6素1...
285 
+                  </view>
286 
+                  <view className='cCleft'>
287 
+                    <image src={location} className='cCicon'></image>
288 
+                    <view className='distance'><text>9.99</text>公里</view>
289 
+                  </view>
290 
+                  <view className='cCright'>
291 
+                    <view className='money'>￥</view>
292 
+                    <view className='price'><text>999</text>/人</view>
293 
+                  </view>
294 
+                </view>
295 
+              </view>
296 
+              <view className='contentCard'>
297 
+                <view className='cardTop'>
298 
+                  <image mode='widthFix' src={msImage} className='cCardimg' />
299 
+                  <image className='lefttips' src={msTip} />
300 
+                  <image src={onlove} className='loveharde'></image>
301 
+                </view>
302 
+                <view className='bContent'>
303 
+                  <view className='cCword'>
304 
+                    超划算套餐？这么便宜也是第一次见6荤6素1...
305 
+                  </view>
306 
+                  <view className='cCleft'>
307 
+                    <image src={location} className='cCicon'></image>
308 
+                    <view className='distance'><text>9.99</text>公里</view>
309 
+                  </view>
310 
+                  <view className='cCright'>
311 
+                    <view className='money'>￥</view>
312 
+                    <view className='price'><text>999</text>/人</view>
313 
+                  </view>
314 
+                </view>
315 
+              </view>
316 
+            </>
317 
+          }
318 
+          {activeTab === 2 &&
319 
+            <view className='contentCard'>
320 
+              <view className='cardTop'>
321 
+                <image mode='widthFix' src={mjImage} className='cCardimg' />
322 
+                <image className='lefttips' src={mjTip} />
323 
+                <image src={onlove} className='loveharde'></image>
324 
+              </view>
325 
+              <view className='bContent'>
326 
+                <view className='cCword'>
327 
+                  超划算套餐？这么便宜也是第一次见6荤6素1...
328 
+                </view>
329 
+                <view className='cCleft'>
330 
+                  <image src={location} className='cCicon'></image>
331 
+                  <view className='distance'><text>9.99</text>公里</view>
332 
+                </view>
333 
+                <view className='cCright'>
334 
+                  <view className='money'>￥</view>
335 
+                  <view className='price'><text>999</text>/人</view>
336 
+                </view>
83 337 
               </view>
84 
-              <view className='cCright'>
85 
-                <view className='money'>￥</view>
86 
-                <view className='price'><text>999</text>/人</view>
87 
-              </view>
88 
-            </view>
89 
-          </view>
90 
-          <view className='contentCard'>
91 
-            <view className='cardTop'>
92 
-              <image mode='widthFix' src={msImage} className='cCardimg'/>
93 
-              <image  className='lefttips' src={msTip} />
94 
-              <image src={onlove} className='loveharde'></image>
95 
-            </view>
96 
-            <view className='bContent'>
97 
-              <view className='cCword'>
98 
-                超划算套餐？这么便宜也是第一次见6荤6素1...
99 
-              </view>
100 
-              <view className='cCleft'>
101 
-                <image src={location} className='cCicon'></image>
102 
-                <view className='distance'><text>9.99</text>公里</view>
103 
-              </view>
104 
-              <view className='cCright'>
105 
-                <view className='money'>￥</view>
106 
-                <view className='price'><text>999</text>/人</view>
107 
-              </view>
108 
-            </view>
109 
-          </view>
110 
-          <view className='contentCard'>
111 
-            <view className='cardTop'>
112 
-              <image mode='widthFix' src={glImage} className='cCardimg'/>
113 
-              <image  className='lefttips' src={glTip} />
114 
-              <image src={onlove} className='loveharde'></image>
115 
-            </view>
116 
-            <view className='bContent'>
117 
-              <view className='cCword'>
118 
-                超划算套餐？这么便宜也是第一次见6荤6素1...
119 
-              </view>
120 
-              <view className='cCleft'>
121 
-                <image src={location} className='cCicon'></image>
122 
-                <view className='distance'>9.99公里</view>
123 
-              </view>
124 
-              <view className='cCright'>
125 
-                <view className='money'>￥</view>
126 
-                <view className='price'>999/人</view>
127 
-              </view>
128 
-            </view>
129 
-          </view>
130 
-          <view className='contentCard'>
131 
-             <view className='cardTop'>
132 
-              <image mode='widthFix' src={mjImage} className='cCardimg'/>
133 
-            <image  className='lefttips' src={mjTip} />
134 
-              <image src={onlove} className='loveharde'></image>
135 338 
             </view>
136 
-            <view className='bContent'>
137 
-              <view className='cCword'>
138 
-                超划算套餐？这么便宜也是第一次见6荤6素1...
139 
-              </view>
140 
-              <view className='cCleft'>
141 
-                <image src={location} className='cCicon'></image>
142 
-                <view className='distance'><text>9.99</text>公里</view>
339 
+          }
340 
+          {activeTab === 3 && <>
341 
+            <view className='contentCard'>
342 
+              <view className='cardTop'>
343 
+                <image mode='widthFix' src={msImage} className='cCardimg' />
344 
+                <image className='lefttips' src={msTip} />
345 
+                <image src={onlove} className='loveharde'></image>
346 
+              </view>
347 
+              <view className='bContent'>
348 
+                <view className='cCword'>
349 
+                  超划算套餐？这么便宜也是第一次见6荤6素1...
350 
+                </view>
351 
+                <view className='cCleft'>
352 
+                  <image src={location} className='cCicon'></image>
353 
+                  <view className='distance'><text>9.99</text>公里</view>
354 
+                </view>
355 
+                <view className='cCright'>
356 
+                  <view className='money'>￥</view>
357 
+                  <view className='price'><text>999</text>/人</view>
358 
+                </view>
143 359 
               </view>
144 
-              <view className='cCright'>
145 
-                <view className='money'>￥</view>
146 
-                <view className='price'><text>999</text>/人</view>
147 
-              </view>
148 
-            </view>
149 
-          </view>
150 
-          <view className='contentCard'>
151 
-             <view className='cardTop'>
152 
-              <image mode='widthFix' src={mjImage} className='cCardimg'/>
153 
-            <image  className='lefttips' src={mjTip} />
154 
-              <image src={onlove} className='loveharde'></image>
155 360 
             </view>
156 
-            <view className='bContent'>
157 
-              <view className='cCword'>
158 
-                超划算套餐？这么便宜也是第一次见6荤6素1...
361 
+            <view className='contentCard'>
362 
+              <view className='cardTop'>
363 
+                <image mode='widthFix' src={mjImage} className='cCardimg' />
364 
+                <image className='lefttips' src={mjTip} />
365 
+                <image src={onlove} className='loveharde'></image>
366 
+              </view>
367 
+              <view className='bContent'>
368 
+                <view className='cCword'>
369 
+                  超划算套餐？这么便宜也是第一次见6荤6素1...
370 
+                </view>
371 
+                <view className='cCleft'>
372 
+                  <image src={location} className='cCicon'></image>
373 
+                  <view className='distance'><text>9.99</text>公里</view>
374 
+                </view>
375 
+                <view className='cCright'>
376 
+                  <view className='money'>￥</view>
377 
+                  <view className='price'><text>999</text>/人</view>
378 
+                </view>
159 379 
               </view>
160 
-              <view className='cCleft'>
161 
-                <image src={location} className='cCicon'></image>
162 
-                <view className='distance'><text>9.99</text>公里</view>
163 
-              </view>
164 
-              <view className='cCright'>
165 
-                <view className='money'>￥</view>
166 
-                <view className='price'><text>999</text>/人</view>
167 
-              </view>
168 
-            </view>
169 
-          </view>
170 
-          <view className='contentCard'>
171 
-            <view className='cardTop'>
172 
-              <image mode='widthFix' src={msImage} className='cCardimg'/>
173 
-              <image  className='lefttips' src={msTip} />
174 
-              <image src={onlove} className='loveharde'></image>
175 380 
             </view>
176 
-            <view className='bContent'>
177 
-              <view className='cCword'>
178 
-                超划算套餐？这么便宜也是第一次见6荤6素1...
179 
-              </view>
180 
-              <view className='cCleft'>
181 
-                <image src={location} className='cCicon'></image>
182 
-                <view className='distance'><text>9.99</text>公里</view>
183 
-              </view>
184 
-              <view className='cCright'>
185 
-                <view className='money'>￥</view>
186 
-                <view className='price'><text>999</text>/人</view>
187 
-              </view>
188 
-            </view>
189 
-          </view>
190 
-          <view className='contentCard'>
191 
-             <view className='cardTop'>
192 
-              <image mode='widthFix' src={mjImage} className='cCardimg'/>
193 
-            <image  className='lefttips' src={mjTip} />
194 
-              <image src={onlove} className='loveharde'></image>
195 
-            </view>
196 
-            <view className='bContent'>
197 
-              <view className='cCword'>
198 
-                超划算套餐？这么便宜也是第一次见6荤6素1...
199 
-              </view>
200 
-              <view className='cCleft'>
201 
-                <image src={location} className='cCicon'></image>
202 
-                <view className='distance'><text>9.99</text>公里</view>
203 
-              </view>
204 
-              <view className='cCright'>
205 
-                <view className='money'>￥</view>
206 
-                <view className='price'><text>999</text>/人</view>
207 
-              </view>
208 
-            </view>
209 
-          </view>
210 
-          <view className='contentCard'onClick={toDetails}>
211 
-            <view className='cardTop'>
212 
-              <image mode='widthFix' src={msImage} className='cCardimg'/>
213 
-              <image  className='lefttips' src={msTip} />
214 
-              <image src={onlove} className='loveharde'></image>
215 
-            </view>
216 
-            <view className='bContent'>
217 
-              <view className='cCword'>
218 
-                超划算套餐？这么便宜也是第一次见6荤6素1...
219 
-              </view>
220 
-              <view className='cCleft'>
221 
-                <image src={location} className='cCicon'></image>
222 
-                <view className='distance'><text>9.99</text>公里</view>
223 
-              </view>
224 
-              <view className='cCright'>
225 
-                <view className='money'>￥</view>
226 
-                <view className='price'><text>999</text>/人</view>
227 
-              </view>
228 
-            </view>
229 
-          </view>
230 
-          <view className='contentCard'>
231 
-             <view className='cardTop'>
232 
-              <image mode='widthFix' src={mjImage} className='cCardimg'/>
233 
-            <image  className='lefttips' src={mjTip} />
234 
-              <image src={onlove} className='loveharde'></image>
235 
-            </view>
236 
-            <view className='bContent'>
237 
-              <view className='cCword'>
238 
-                超划算套餐？这么便宜也是第一次见6荤6素1...
239 
-              </view>
240 
-              <view className='cCleft'>
241 
-                <image src={location} className='cCicon'></image>
242 
-                <view className='distance'><text>9.99</text>公里</view>
243 
-              </view>
244 
-              <view className='cCright'>
245 
-                <view className='money'>￥</view>
246 
-                <view className='price'><text>999</text>/人</view>
247 
-              </view>
248 
-            </view>
249 
-          </view>
250 
-          <view className='contentCard'>
251 
-            <view className='cardTop'>
252 
-              <image mode='widthFix' src={msImage} className='cCardimg'/>
253 
-              <image  className='lefttips' src={msTip} />
254 
-              <image src={onlove} className='loveharde'></image>
255 
-            </view>
256 
-            <view className='bContent'>
257 
-              <view className='cCword'>
258 
-                超划算套餐？这么便宜也是第一次见6荤6素1...
259 
-              </view>
260 
-              <view className='cCleft'>
261 
-                <image src={location} className='cCicon'></image>
262 
-                <view className='distance'><text>9.99</text>公里</view>
263 
-              </view>
264 
-              <view className='cCright'>
265 
-                <view className='money'>￥</view>
266 
-                <view className='price'><text>999</text>/人</view>
267 
-              </view>
268 
-            </view>
269 
-          </view>
270 
-          <view className='contentCard'>
271 
-             <view className='cardTop'>
272 
-              <image mode='widthFix' src={mjImage} className='cCardimg'/>
273 
-            <image  className='lefttips' src={mjTip} />
274 
-              <image src={onlove} className='loveharde'></image>
275 
-            </view>
276 
-            <view className='bContent'>
277 
-              <view className='cCword'>
278 
-                超划算套餐？这么便宜也是第一次见6荤6素1...
279 
-              </view>
280 
-              <view className='cCleft'>
281 
-                <image src={location} className='cCicon'></image>
282 
-                <view className='distance'><text>9.99</text>公里</view>
283 
-              </view>
284 
-              <view className='cCright'>
285 
-                <view className='money'>￥</view>
286 
-                <view className='price'><text>999</text>/人</view>
287 
-              </view>
288 
-            </view>
289 
-          </view>
290 
-          <view className='contentCard'>
291 
-            <view className='cardTop'>
292 
-              <image mode='widthFix' src={msImage} className='cCardimg'/>
293 
-              <image  className='lefttips' src={msTip} />
294 
-              <image src={onlove} className='loveharde'></image>
295 
-            </view>
296 
-            <view className='bContent'>
297 
-              <view className='cCword'>
298 
-                超划算套餐？这么便宜也是第一次见6荤6素1...
299 
-              </view>
300 
-              <view className='cCleft'>
301 
-                <image src={location} className='cCicon'></image>
302 
-                <view className='distance'><text>9.99</text>公里</view>
303 
-              </view>
304 
-              <view className='cCright'>
305 
-                <view className='money'>￥</view>
306 
-                <view className='price'><text>999</text>/人</view>
307 
-              </view>
308 
-            </view>
309 
-          </view>
310 
-          <view className='contentCard'>
311 
-             <view className='cardTop'>
312 
-              <image mode='widthFix' src={mjImage} className='cCardimg'/>
313 
-            <image  className='lefttips' src={mjTip} />
314 
-              <image src={onlove} className='loveharde'></image>
315 
-            </view>
316 
-            <view className='bContent'>
317 
-              <view className='cCword'>
318 
-                超划算套餐？这么便宜也是第一次见6荤6素1...
319 
-              </view>
320 
-              <view className='cCleft'>
321 
-                <image src={location} className='cCicon'></image>
322 
-                <view className='distance'><text>9.99</text>公里</view>
323 
-              </view>
324 
-              <view className='cCright'>
325 
-                <view className='money'>￥</view>
326 
-                <view className='price'><text>999</text>/人</view>
327 
-              </view>
328 
-            </view>
329 
-          </view>
381 
+          </>
382 
+          }
383 
+
384 
+
385 
+
330 386 
         </view>
331 387 
         <view className='botton'>已经到底了~</view>
332 
-       </scroll-view>
388 
+      </scroll-view>
333 389 
     </view>
334 390 
   )
335 391 
 }

+ 116
- 132
src/pages/index/tabs/less/Recommend.less Bestand weergeven 

@@ -43,154 +43,138 @@
43 43 
     color: #999;
44 44 
   }
45 45 
 }
46 
-.nav{
47 
-  margin-left: 36px;
48 
-  .dinwei{
49 
-    float: left;
46 
+.waterfall{
47 
+  column-count: 2;      //分两列
48 
+  column-gap: 30px;    //列间距
49 
+  background-color: #F8F8F8;
50 
+  padding:30px 30px 0 30px;
51 
+
52 
+  .contentCard{
53 
+    background: #FFF;
54 
+    box-shadow: 0px 8px 38px 0px rgba(0, 0, 0, 0.12);
55 
+    border-radius: 24px;
56 
+    overflow: hidden;
57 
+    margin-bottom:50px;
58 
+    break-inside: avoid;
50 59 
     position: relative;
60 
+
61 
+    .cardTop{
62 
+      border-radius: 24px 24px 0px 0px;
63 
+      .cCardimg{
64 
+        width: 100%;
65 
+        border-radius: 24px 24px 0px 0px;
66 
+      }
67 
+      .lefttips{
68 
+        width:99px;
69 
+        height:37px;
70 
+        position: absolute;
71 
+        left: 0;
72 
+      }
73 
+      .loveharde{
74 
+        width: 22px;
75 
+        height: 20px;
76 
+        position: absolute;
77 
+        right: 20px;
78 
+        top: 10px;
79 
+      }
80 
+    }
81 
+    .bContent{
82 
+      padding:20px;
83 
+      .cCword{
84 
+        font-size: 24px;
85 
+        font-weight: bold;
86 
+        color: #404040;
87 
+      }
88 
+
89 
+      .cCleft{
90 
+        float: left;
91 
+        position: relative;
92 
+        padding:40px 0 30px 0;
93 
+        .cCicon{
94 
+          width: 17px;
95 
+          height: 21px;
96 
+          position: absolute;
97 
+          left: 0;
98 
+          top: 48px;
99 
+        }
100 
+        .distance{
101 
+          padding-left: 24px;
102 
+          font-size: 24px;
103 
+          color: #C0C8D3;
104 
+        }
105 
+      }
106 
+      .cCright{
107 
+        position: relative;
108 
+        float: right;
109 
+        padding:40px 0 30px 0;
110 
+        .money{
111 
+          font-size: 20px;
112 
+          color: #FF3434;
113 
+          position: absolute;
114 
+          right: 78px;
115 
+          bottom: 32px;
116 
+        }
117 
+        .price{
118 
+          font-size: 24px;
119 
+          color: #FF3434;
120 
+        }
121 
+      }
122 
+    }
123 
+  }
124 
+}
125 
+.botton{
126 
+  font-size: 28px;
127 
+  color: #C0C8D3;
128 
+  text-align: center;
129 
+  padding:40px 0 50px 0;
130 
+  background-color: #F8F8F8;
131 
+}
132 
+.index-tabs {
133 
+  padding-left: 95px;
134 
+  position: relative;
135 
+  .position{
136 
+    position: absolute;
137 
+    left: 36px;
51 138 
     top: 4px;
52 139 
     .location{
53 140 
       width: 35px;
54 141 
       height: 42px;
55 142 
     }
56 143 
     .city{
57 
-      width: 40px;
58 144 
       font-size: 20px;
59 145 
       font-weight: bold;
60 146 
       color: #4C4C4C;
61 147 
       position: relative;
62 148 
       left: -2px;
63 149 
       bottom: 11px;
150 
+    }
151 
+    .line{
152 
+      width: 1px;
153 
+      height: 68px;
154 
+      background: #4C4C4C;
155 
+      opacity: 0.1;
156 
+      position: relative;
157 
+      left: 57px;
158 
+      bottom: 82px;
64 159 
     }
65 160 
   }
66 
-  .line{
67 
-    float: left;
68 
-    width: 1px;
69 
-    height: 68px;
70 
-    background: #4C4C4C;
71 
-    opacity: 0.1;
72 
-    display: inline-block;
73 
-    position: relative;
74 
-    left: 19px;
75 
-    top: 4px;
76 
-
161 
+  .tabs-Unselected {
162 
+    width: 20vw;
163 
+    font-weight: bold;
164 
+    color: #C0C8D3;
165 
+    text-align: center;
166 
+    font-size: 28px;
167 
+    line-height: 91px;
77 168 
   }
78 
-  .list{
79 
-    float: left;
80 
-    .bdattractions{
81 
-      float: left;
82 
-      padding:28px 20px 27px 49px ;
83 
-      .acname{
84 
-        font-size: 28px;
85 
-        font-weight: bold;
86 
-        color: #C0C8D3;
87 
-      }
88 
-      .buttonline{
89 
-        width: 30px;
90 
-        height: 6px;
91 
-        position: relative;
92 
-        bottom:-27px;
93 
-        left: 0;
94 
-        margin: 0 auto;
95 
-      }
96 
-
97 
-    }
98 
-    .bdattractions:first-child .acname{
99 
-        font-size: 32px;
100 
-        color: #4C4C4C;
101 
-    }
102 
-    .bdattractions:first-child .buttonline{
103 
-        background: #4C4C4C;
104 
-    }
169 
+  .tabs-swiper {
170 
+    max-height: 0;
105 171 
   }
106 
-}
107 
-.content{
108 
-  width: 100%;
109 
-  height: calc(100vh - 120px);
110 
-  .waterfall{
111 
-    column-count: 2;      //分两列
112 
-    column-gap: 30px;    //列间距
113 
-    background-color: #F8F8F8;
114 
-    padding:30px 30px 0 30px;
115 
-
116 
-    .contentCard{
117 
-      background: #FFF;
118 
-      box-shadow: 0px 8px 38px 0px rgba(0, 0, 0, 0.12);
119 
-      border-radius: 24px;
120 
-      overflow: hidden;
121 
-      margin-bottom:50px;
122 
-      break-inside: avoid;
123 
-      position: relative;
124 
-
125 
-      .cardTop{
126 
-        border-radius: 24px 24px 0px 0px;
127 
-        .cCardimg{
128 
-          width: 100%;
129 
-          border-radius: 24px 24px 0px 0px;
130 
-        }
131 
-        .lefttips{
132 
-          width:99px;
133 
-          height:37px;
134 
-          position: absolute;
135 
-          left: 0;
136 
-        }
137 
-        .loveharde{
138 
-          width: 22px;
139 
-          height: 20px;
140 
-          position: absolute;
141 
-          right: 20px;
142 
-          top: 10px;
143 
-        }
144 
-      }
145 
-      .bContent{
146 
-        padding:20px;
147 
-        .cCword{
148 
-          font-size: 24px;
149 
-          font-weight: bold;
150 
-          color: #404040;
151 
-        }
152 
-
153 
-        .cCleft{
154 
-          float: left;
155 
-          position: relative;
156 
-          padding:40px 0 30px 0;
157 
-          .cCicon{
158 
-            width: 17px;
159 
-            height: 21px;
160 
-            position: absolute;
161 
-            left: 0;
162 
-            top: 48px;
163 
-          }
164 
-          .distance{
165 
-            padding-left: 24px;
166 
-            font-size: 24px;
167 
-            color: #C0C8D3;
168 
-          }
169 
-        }
170 
-        .cCright{
171 
-          position: relative;
172 
-          float: right;
173 
-          padding:40px 0 30px 0;
174 
-          .money{
175 
-            font-size: 20px;
176 
-            color: #FF3434;
177 
-            position: absolute;
178 
-            right: 78px;
179 
-            bottom: 32px;
180 
-          }
181 
-          .price{
182 
-            font-size: 24px;
183 
-            color: #FF3434;
184 
-          }
185 
-        }
186 
-      }
187 
-    }
188 
-  }
189 
-  .botton{
190 
-    font-size: 28px;
191 
-    color: #C0C8D3;
172 
+  .tabs-Selected {
173 
+    font-size: 32px;
174 
+    color: #4C4C4C;
175 
+    width: 20vw;
176 
+    font-weight: bold;
192 177 
     text-align: center;
193 
-    padding:40px 0 50px 0;
194 
-    background-color: #F8F8F8;
195 
-  }
178 
+    border-bottom: 6px solid #4C4C4C;
179 
+  }
196 180 
 }

+ 3
- 0
src/pages/searchResult/searchResult.config.js Bestand weergeven 

@@ -1,4 +1,7 @@
1 1 
 export default {
2 2 
     navigationBarTitleText: '搜索',
3 3 
     navigationStyle: 'custom',
4 
+    usingComponents: {
5 
+      "mp-tabs": "../../../components/tabs/index"
6 
+    }
4 7 
   }

+ 236
- 194
src/pages/searchResult/searchResult.jsx Bestand weergeven 

@@ -1,4 +1,4 @@
1 
-import React from 'react'
1 
+import { React, useState, useEffect, } from 'react'
2 2 
 // .就是当前路径
3 3 
 import iconsearch from '../../assets/icons/housemantj/search.png'
4 4 
 import location from '../../assets/icons/housemantj/location.png'
 
@@ -10,11 +10,47 @@ import mjTip from '../../assets/icons/housemantj/mjtip.png'
10 10 
 import glTip from '../../assets/icons/housemantj/gltip.png'
11 11 
 import onlove from '../../assets/icons/housemantj/onlove.png'
12 12 
 import CustomNav from '@/components/CustomNav'
13 
-import Taro from '@tarojs/taro'
13 
+import Taro, { useRouter } from '@tarojs/taro'
14 14 
 import './searchResult.less'
15 15
16 16
17 17 
 export default (props) => {
18 
+  // 横向tab
19 
+  const [activeTab, setActiveTab] = useState(0)
20 
+  const { params } = useRouter()
21 
+  const { tabJump } = params || {}
22 
+  useEffect(() => {
23 
+    if (tabJump) {
24 
+      setActiveTab(tabJump - 0)
25 
+    }
26 
+    console.log('---------------------', tabJump);
27 
+
28 
+  }, [tabJump])
29 
+
30 
+  const tabs = [
31 
+    {
32 
+      title: '全部',
33 
+    },
34 
+    {
35 
+      title: '美食',
36 
+
37 
+    },
38 
+    {
39 
+      title: '景点',
40 
+
41 
+    },
42 
+    {
43 
+      title: '攻略',
44 
+
45 
+    },
46 
+  ]
47 
+  const handleTabChange = (e) => {
48 
+    const { index } = e.detail
49 
+    setActiveTab(index)
50 
+  }
51 
+
52 
+
53 
+
18 54 
   const onSearch = () => {
19 55 
     // 用绝对路径
20 56 
     Taro.navigateTo({ url: '/pages/search/search' });
 
@@ -29,235 +65,241 @@ export default (props) => {
29 65 
       <view className='index-navbar'>
30 66 
         <CustomNav title='搜索' />
31 67 
       </view>
32 
-      <view style={{ height: '100%',overflow:'auto'}}>
68 
+      <view style={{ height: '100%', overflow: 'auto' }}>
33 69 
         <view className='search'>
34 70 
           <input className='searchInput' placeholder='请输入景区/城市搜索' disabled onClick={onSearch} />
35 71 
           <image className='searchicon' src={iconsearch} />
36 72 
           <view className='lineSearch'></view>
37 
-        </view>
38 
-        <view className='nav'>
39 
-          <view className='list'>
40 
-            <view className='bdattractions' >
41 
-              <view className='acname'>全部</view>
42 
-              <view className='buttonline' ></view>
43 
-            </view>
44 
-            <view className='bdattractions'>
45 
-              <view className='acname'>美食</view>
46 
-              <view className='buttonline'></view>
47 
-            </view>
48 
-            <view className='bdattractions'>
49 
-              <view className='acname'>景点</view>
50 
-              <view className='buttonline'></view>
51 
-            </view>
52 
-            <view className='bdattractions'>
53 
-              <view className='acname'>攻略</view>
54 
-              <view className='buttonline'></view>
55 
-            </view>
56 
-          </view>
73 
+        </view><view className='index-tabs'>
74 
+          <mp-tabs
75 
+            tabClass='tabs-Unselected'
76 
+            swiperClass='tabs-swiper'
77 
+            activeClass='tabs-Selected'
78 
+            tabs={tabs}
79 
+            current={activeTab}
80 
+            onChange={handleTabChange}
81 
+            activeTab={activeTab}
82 
+          >
83 
+          </mp-tabs>
57 84 
         </view>
58 85
59 
-        <scroll-view scroll-y="true" scroll-view='true' bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" className='content'>
86 
+        <scroll-view scroll-y="true" scroll-view='true' bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" >
60 87 
           <view className="waterfall">
61 
-            <view className='contentCard'>
62 
-              <view className='cardTop'>
63 
-                <image mode='widthFix' src={msImage} className='cCardimg' />
64 
-                <image className='lefttips' src={msTip} />
65 
-                <image src={onlove} className='loveharde'></image>
66 
-              </view>
67 
-              <view className='bContent'>
68 
-                <view className='cCword'>
69 
-                  超划算套餐？这么便宜也是第一次见6荤6素1...
88 
+
89 
+            {activeTab === 0 && <>
90 
+              <view className='contentCard'>
91 
+                <view className='cardTop'>
92 
+                  <image mode='widthFix' src={msImage} className='cCardimg' />
93 
+                  <image className='lefttips' src={msTip} />
94 
+                  <image src={onlove} className='loveharde'></image>
70 95 
                 </view>
71 
-                <view className='cCleft'>
72 
-                  <image src={location} className='cCicon'></image>
73 
-                  <view className='distance'><text>9.99</text>公里</view>
74 
-              </view>
75 
-              <view className='cCright'>
76 
-                <view className='money'>￥</view>
77 
-                <view className='price'><text>999</text>/人</view>
96 
+                <view className='bContent'>
97 
+                  <view className='cCword'>
98 
+                    超划算套餐？这么便宜也是第一次见6荤6素1...
99 
+                  </view>
100 
+                  <view className='cCleft'>
101 
+                    <image src={location} className='cCicon'></image>
102 
+                    <view className='distance'><text>9.99</text>公里</view>
103 
+                  </view>
104 
+                  <view className='cCright'>
105 
+                    <view className='money'>￥</view>
106 
+                    <view className='price'><text>999</text>/人</view>
107 
+                  </view>
78 108 
                 </view>
79 109 
               </view>
80 
-            </view>
81 
-            <view className='contentCard'>
82 
-              <view className='cardTop'>
83 
-                <image mode='widthFix' src={mjImage} className='cCardimg' />
84 
-                <image className='lefttips' src={mjTip} />
85 
-                <image src={onlove} className='loveharde'></image>
86 
-              </view>
87 
-              <view className='bContent'>
88 
-                <view className='cCword'>
89 
-                  超划算套餐？这么便宜也是第一次见6荤6素1...
110 
+              <view className='contentCard'>
111 
+                <view className='cardTop'>
112 
+                  <image mode='widthFix' src={mjImage} className='cCardimg' />
113 
+                  <image className='lefttips' src={mjTip} />
114 
+                  <image src={onlove} className='loveharde'></image>
90 115 
                 </view>
91 
-                <view className='cCleft'>
92 
-                  <image src={location} className='cCicon'></image>
93 
-                  <view className='distance'><text>9.99</text>公里</view>
94 
-              </view>
95 
-              <view className='cCright'>
96 
-                <view className='money'>￥</view>
97 
-                <view className='price'><text>999</text>/人</view>
116 
+                <view className='bContent'>
117 
+                  <view className='cCword'>
118 
+                    超划算套餐？这么便宜也是第一次见6荤6素1...
119 
+                  </view>
120 
+                  <view className='cCleft'>
121 
+                    <image src={location} className='cCicon'></image>
122 
+                    <view className='distance'><text>9.99</text>公里</view>
123 
+                  </view>
124 
+                  <view className='cCright'>
125 
+                    <view className='money'>￥</view>
126 
+                    <view className='price'><text>999</text>/人</view>
127 
+                  </view>
98 128 
                 </view>
99 129 
               </view>
100 
-            </view>
101 
-            <view className='contentCard'>
102 
-              <view className='cardTop'>
103 
-                <image mode='widthFix' src={glImage} className='cCardimg' />
104 
-                <image className='lefttips' src={glTip} />
105 
-                <image src={onlove} className='loveharde'></image>
106 
-              </view>
107 
-              <view className='bContent'>
108 
-                <view className='cCword'>
109 
-                  超划算套餐？这么便宜也是第一次见6荤6素1...
130 
+              <view className='contentCard'>
131 
+                <view className='cardTop'>
132 
+                  <image mode='widthFix' src={glImage} className='cCardimg' />
133 
+                  <image className='lefttips' src={glTip} />
134 
+                  <image src={onlove} className='loveharde'></image>
110 135 
                 </view>
111 
-                <view className='cCleft'>
112 
-                  <image src={location} className='cCicon'></image>
113 
-                  <view className='distance'><text>9.99</text>公里</view>
114 
-              </view>
115 
-              <view className='cCright'>
116 
-                <view className='money'>￥</view>
117 
-                <view className='price'><text>999</text>/人</view>
136 
+                <view className='bContent'>
137 
+                  <view className='cCword'>
138 
+                    超划算套餐？这么便宜也是第一次见6荤6素1...
139 
+                  </view>
140 
+                  <view className='cCleft'>
141 
+                    <image src={location} className='cCicon'></image>
142 
+                    <view className='distance'><text>9.99</text>公里</view>
143 
+                  </view>
144 
+                  <view className='cCright'>
145 
+                    <view className='money'>￥</view>
146 
+                    <view className='price'><text>999</text>/人</view>
147 
+                  </view>
118 148 
                 </view>
119 149 
               </view>
120 
-            </view>
121 
-            <view className='contentCard'>
122 
-              <view className='cardTop'>
123 
-                <image mode='widthFix' src={mjImage} className='cCardimg' />
124 
-                <image className='lefttips' src={mjTip} />
125 
-                <image src={onlove} className='loveharde'></image>
126 
-              </view>
127 
-              <view className='bContent'>
128 
-                <view className='cCword'>
129 
-                  超划算套餐？这么便宜也是第一次见6荤6素1...
150 
+              <view className='contentCard'>
151 
+                <view className='cardTop'>
152 
+                  <image mode='widthFix' src={mjImage} className='cCardimg' />
153 
+                  <image className='lefttips' src={mjTip} />
154 
+                  <image src={onlove} className='loveharde'></image>
130 155 
                 </view>
131 
-                <view className='cCleft'>
132 
-                  <image src={location} className='cCicon'></image>
133 
-                  <view className='distance'><text>9.99</text>公里</view>
134 
-              </view>
135 
-              <view className='cCright'>
136 
-                <view className='money'>￥</view>
137 
-                <view className='price'><text>999</text>/人</view>
156 
+                <view className='bContent'>
157 
+                  <view className='cCword'>
158 
+                    超划算套餐？这么便宜也是第一次见6荤6素1...
159 
+                  </view>
160 
+                  <view className='cCleft'>
161 
+                    <image src={location} className='cCicon'></image>
162 
+                    <view className='distance'><text>9.99</text>公里</view>
163 
+                  </view>
164 
+                  <view className='cCright'>
165 
+                    <view className='money'>￥</view>
166 
+                    <view className='price'><text>999</text>/人</view>
167 
+                  </view>
138 168 
                 </view>
139 169 
               </view>
140 
-            </view>
141 
-            <view className='contentCard'>
142 
-              <view className='cardTop'>
143 
-                <image mode='widthFix' src={msImage} className='cCardimg' />
144 
-                <image className='lefttips' src={msTip} />
145 
-                <image src={onlove} className='loveharde'></image>
146 
-              </view>
147 
-              <view className='bContent'>
148 
-                <view className='cCword'>
149 
-                  超划算套餐？这么便宜也是第一次见6荤6素1...
170 
+
171 
+            </>}
172 
+            {activeTab === 1 && <>
173 
+              <view className='contentCard'>
174 
+                <view className='cardTop'>
175 
+                  <image mode='widthFix' src={msImage} className='cCardimg' />
176 
+                  <image className='lefttips' src={msTip} />
177 
+                  <image src={onlove} className='loveharde'></image>
150 178 
                 </view>
151 
-                <view className='cCleft'>
152 
-                  <image src={location} className='cCicon'></image>
153 
-                  <view className='distance'><text>9.99</text>公里</view>
154 
-              </view>
155 
-              <view className='cCright'>
156 
-                <view className='money'>￥</view>
157 
-                <view className='price'><text>999</text>/人</view>
179 
+                <view className='bContent'>
180 
+                  <view className='cCword'>
181 
+                    超划算套餐？这么便宜也是第一次见6荤6素1...
182 
+                  </view>
183 
+                  <view className='cCleft'>
184 
+                    <image src={location} className='cCicon'></image>
185 
+                    <view className='distance'><text>9.99</text>公里</view>
186 
+                  </view>
187 
+                  <view className='cCright'>
188 
+                    <view className='money'>￥</view>
189 
+                    <view className='price'><text>999</text>/人</view>
190 
+                  </view>
158 191 
                 </view>
159 192 
               </view>
160 
-            </view>
161 
-            <view className='contentCard'>
162 
-              <view className='cardTop'>
163 
-                <image mode='widthFix' src={mjImage} className='cCardimg' />
164 
-                <image className='lefttips' src={mjTip} />
165 
-                <image src={onlove} className='loveharde'></image>
166 
-              </view>
167 
-              <view className='bContent'>
168 
-                <view className='cCword'>
169 
-                  超划算套餐？这么便宜也是第一次见6荤6素1...
193 
+
194 
+            </>}
195 
+            {activeTab === 2 && <>
196 
+              <view className='contentCard'>
197 
+                <view className='cardTop'>
198 
+                  <image mode='widthFix' src={mjImage} className='cCardimg' />
199 
+                  <image className='lefttips' src={mjTip} />
200 
+                  <image src={onlove} className='loveharde'></image>
170 201 
                 </view>
171 
-                <view className='cCleft'>
172 
-                  <image src={location} className='cCicon'></image>
173 
-                  <view className='distance'><text>9.99</text>公里</view>
174 
-              </view>
175 
-              <view className='cCright'>
176 
-                <view className='money'>￥</view>
177 
-                <view className='price'><text>999</text>/人</view>
202 
+                <view className='bContent'>
203 
+                  <view className='cCword'>
204 
+                    超划算套餐？这么便宜也是第一次见6荤6素1...
205 
+                  </view>
206 
+                  <view className='cCleft'>
207 
+                    <image src={location} className='cCicon'></image>
208 
+                    <view className='distance'><text>9.99</text>公里</view>
209 
+                  </view>
210 
+                  <view className='cCright'>
211 
+                    <view className='money'>￥</view>
212 
+                    <view className='price'><text>999</text>/人</view>
213 
+                  </view>
178 214 
                 </view>
179 215 
               </view>
180 
-            </view>
181 
-            <view className='contentCard'>
182 
-              <view className='cardTop'>
183 
-                <image mode='widthFix' src={msImage} className='cCardimg' />
184 
-                <image className='lefttips' src={msTip} />
185 
-                <image src={onlove} className='loveharde'></image>
186 
-              </view>
187 
-              <view className='bContent'>
188 
-                <view className='cCword'>
189 
-                  超划算套餐？这么便宜也是第一次见6荤6素1...
216 
+              <view className='contentCard'>
217 
+                <view className='cardTop'>
218 
+                  <image mode='widthFix' src={msImage} className='cCardimg' />
219 
+                  <image className='lefttips' src={msTip} />
220 
+                  <image src={onlove} className='loveharde'></image>
190 221 
                 </view>
191 
-                <view className='cCleft'>
192 
-                  <image src={location} className='cCicon'></image>
193 
-                  <view className='distance'><text>9.99</text>公里</view>
194 
-              </view>
195 
-              <view className='cCright'>
196 
-                <view className='money'>￥</view>
197 
-                <view className='price'><text>999</text>/人</view>
222 
+                <view className='bContent'>
223 
+                  <view className='cCword'>
224 
+                    超划算套餐？这么便宜也是第一次见6荤6素1...
225 
+                  </view>
226 
+                  <view className='cCleft'>
227 
+                    <image src={location} className='cCicon'></image>
228 
+                    <view className='distance'><text>9.99</text>公里</view>
229 
+                  </view>
230 
+                  <view className='cCright'>
231 
+                    <view className='money'>￥</view>
232 
+                    <view className='price'><text>999</text>/人</view>
233 
+                  </view>
198 234 
                 </view>
199 235 
               </view>
200 
-            </view>
201 
-            <view className='contentCard'>
202 
-              <view className='cardTop'>
203 
-                <image mode='widthFix' src={mjImage} className='cCardimg' />
204 
-                <image className='lefttips' src={mjTip} />
205 
-                <image src={onlove} className='loveharde'></image>
206 
-              </view>
207 
-              <view className='bContent'>
208 
-                <view className='cCword'>
209 
-                  超划算套餐？这么便宜也是第一次见6荤6素1...
236 
+
237 
+            </>}
238 
+            {activeTab === 3 && <>
239 
+              <view className='contentCard'>
240 
+                <view className='cardTop'>
241 
+                  <image mode='widthFix' src={mjImage} className='cCardimg' />
242 
+                  <image className='lefttips' src={mjTip} />
243 
+                  <image src={onlove} className='loveharde'></image>
210 244 
                 </view>
211 
-                <view className='cCleft'>
212 
-                  <image src={location} className='cCicon'></image>
213 
-                  <view className='distance'><text>9.99</text>公里</view>
214 
-              </view>
215 
-              <view className='cCright'>
216 
-                <view className='money'>￥</view>
217 
-                <view className='price'><text>999</text>/人</view>
245 
+                <view className='bContent'>
246 
+                  <view className='cCword'>
247 
+                    超划算套餐？这么便宜也是第一次见6荤6素1...
248 
+                  </view>
249 
+                  <view className='cCleft'>
250 
+                    <image src={location} className='cCicon'></image>
251 
+                    <view className='distance'><text>9.99</text>公里</view>
252 
+                  </view>
253 
+                  <view className='cCright'>
254 
+                    <view className='money'>￥</view>
255 
+                    <view className='price'><text>999</text>/人</view>
256 
+                  </view>
218 257 
                 </view>
219 258 
               </view>
220 
-            </view>
221 
-            <view className='contentCard'>
222 
-              <view className='cardTop'>
223 
-                <image mode='widthFix' src={msImage} className='cCardimg' />
224 
-                <image className='lefttips' src={msTip} />
225 
-                <image src={onlove} className='loveharde'></image>
226 
-              </view>
227 
-              <view className='bContent'>
228 
-                <view className='cCword'>
229 
-                  超划算套餐？这么便宜也是第一次见6荤6素1...
259 
+              <view className='contentCard'>
260 
+                <view className='cardTop'>
261 
+                  <image mode='widthFix' src={msImage} className='cCardimg' />
262 
+                  <image className='lefttips' src={msTip} />
263 
+                  <image src={onlove} className='loveharde'></image>
230 264 
                 </view>
231 
-                <view className='cCleft'>
232 
-                  <image src={location} className='cCicon'></image>
233 
-                  <view className='distance'><text>9.99</text>公里</view>
234 
-              </view>
235 
-              <view className='cCright'>
236 
-                <view className='money'>￥</view>
237 
-                <view className='price'><text>999</text>/人</view>
265 
+                <view className='bContent'>
266 
+                  <view className='cCword'>
267 
+                    超划算套餐？这么便宜也是第一次见6荤6素1...
268 
+                  </view>
269 
+                  <view className='cCleft'>
270 
+                    <image src={location} className='cCicon'></image>
271 
+                    <view className='distance'><text>9.99</text>公里</view>
272 
+                  </view>
273 
+                  <view className='cCright'>
274 
+                    <view className='money'>￥</view>
275 
+                    <view className='price'><text>999</text>/人</view>
276 
+                  </view>
238 277 
                 </view>
239 278 
               </view>
240 
-            </view>
241 
-            <view className='contentCard'>
242 
-              <view className='cardTop'>
243 
-                <image mode='widthFix' src={mjImage} className='cCardimg' />
244 
-                <image className='lefttips' src={mjTip} />
245 
-                <image src={onlove} className='loveharde'></image>
246 
-              </view>
247 
-              <view className='bContent'>
248 
-                <view className='cCword'>
249 
-                  超划算套餐？这么便宜也是第一次见6荤6素1...
279 
+              <view className='contentCard'>
280 
+                <view className='cardTop'>
281 
+                  <image mode='widthFix' src={mjImage} className='cCardimg' />
282 
+                  <image className='lefttips' src={mjTip} />
283 
+                  <image src={onlove} className='loveharde'></image>
250 284 
                 </view>
251 
-                <view className='cCleft'>
252 
-                  <image src={location} className='cCicon'></image>
253 
-                  <view className='distance'><text>9.99</text>公里</view>
254 
-              </view>
255 
-              <view className='cCright'>
256 
-                <view className='money'>￥</view>
257 
-                <view className='price'><text>999</text>/人</view>
285 
+                <view className='bContent'>
286 
+                  <view className='cCword'>
287 
+                    超划算套餐？这么便宜也是第一次见6荤6素1...
288 
+                  </view>
289 
+                  <view className='cCleft'>
290 
+                    <image src={location} className='cCicon'></image>
291 
+                    <view className='distance'><text>9.99</text>公里</view>
292 
+                  </view>
293 
+                  <view className='cCright'>
294 
+                    <view className='money'>￥</view>
295 
+                    <view className='price'><text>999</text>/人</view>
296 
+                  </view>
258 297 
                 </view>
259 298 
               </view>
260 
-            </view>
299 
+
300 
+            </>}
301 
+
302 
+
261 303 
           </view>
262 304 
           <view className='botton'>已经到底了~</view>
263 305 
         </scroll-view>

+ 94
- 109
src/pages/searchResult/searchResult.less Bestand weergeven 

@@ -26,128 +26,113 @@
26 26 
       opacity: 0.2;
27 27 
     }
28 28 
 }
29 
-.nav{
30 
-  margin-left: 36px;
31 
-  .list{
32 
-    float: left;
33 
-    .bdattractions{
34 
-      float: left;
35 
-      padding:28px 49px 27px 20px ;
36 
-      box-sizing: border-box;
37 
-      .acname{
38 
-        font-size: 28px;
39 
-        font-weight: bold;
40 
-        color: #C0C8D3;
41 
-      }
42 
-      .buttonline{
43 
-        width: 30px;
44 
-        height: 6px;
45 
-        position: relative;
46 
-        top:27px;
47 
-        margin: 0 auto;
48 
-      }
49 
-    }
50 
-    .bdattractions:first-child .acname{
51 
-        font-size: 32px;
52 
-        color: #4C4C4C;
53 
-    }
54 
-    .bdattractions:first-child .buttonline{
55 
-        background: #4C4C4C;
56 
-    }
57 
-  }
58 
-}
59 29
30 
+.waterfall{
31 
+  column-count: 2;      //分两列
32 
+  column-gap: 30px;    //列间距
33 
+  background-color: #F8F8F8;
34 
+  padding:30px 30px 0 30px;
35 
+
36 
+  .contentCard{
37 
+    background: #FFF;
38 
+    box-shadow: 0px 8px 38px 0px rgba(0, 0, 0, 0.12);
39 
+    border-radius: 24px;
40 
+    overflow: hidden;
41 
+    margin-bottom:50px;
42 
+    break-inside: avoid;
43 
+    position: relative;
60 44
61 
-
62 
-.content{
63 
-  width: 100%;
64 
-  height: calc(100vh - 120px);
65 
-  .waterfall{
66 
-    column-count: 2;      //分两列
67 
-    column-gap: 30px;    //列间距
68 
-    background-color: #F8F8F8;
69 
-    padding:30px 30px 0 30px;
70 
-
71 
-    .contentCard{
72 
-      background: #FFF;
73 
-      box-shadow: 0px 8px 38px 0px rgba(0, 0, 0, 0.12);
74 
-      border-radius: 24px;
75 
-      overflow: hidden;
76 
-      margin-bottom:50px;
77 
-      break-inside: avoid;
78 
-      position: relative;
79 
-
80 
-      .cardTop{
45 
+    .cardTop{
46 
+      border-radius: 24px 24px 0px 0px;
47 
+      .cCardimg{
48 
+        width: 100%;
81 49 
         border-radius: 24px 24px 0px 0px;
82 
-        .cCardimg{
83 
-          width: 100%;
84 
-          border-radius: 24px 24px 0px 0px;
85 
-        }
86 
-        .lefttips{
87 
-          width:99px;
88 
-          height:37px;
50 
+      }
51 
+      .lefttips{
52 
+        width:99px;
53 
+        height:37px;
54 
+        position: absolute;
55 
+        left: 0;
56 
+      }
57 
+      .loveharde{
58 
+        width: 22px;
59 
+        height: 20px;
60 
+        position: absolute;
61 
+        right: 20px;
62 
+        top: 10px;
63 
+      }
64 
+    }
65 
+    .bContent{
66 
+      padding:20px;
67 
+      .cCword{
68 
+        font-size: 24px;
69 
+        font-weight: bold;
70 
+        color: #404040;
71 
+      }
72 
+
73 
+      .cCleft{
74 
+        float: left;
75 
+        position: relative;
76 
+        padding:40px 0 30px 0;
77 
+        .cCicon{
78 
+          width: 17px;
79 
+          height: 21px;
89 80 
           position: absolute;
90 81 
           left: 0;
82 
+          top: 48px;
91 83 
         }
92 
-        .loveharde{
93 
-          width: 22px;
94 
-          height: 20px;
95 
-          position: absolute;
96 
-          right: 20px;
97 
-          top: 10px;
98 
-        }
99 
-      }
100 
-      .bContent{
101 
-        padding:20px;
102 
-        .cCword{
84 
+        .distance{
85 
+          padding-left: 24px;
103 86 
           font-size: 24px;
104 
-          font-weight: bold;
105 
-          color: #404040;
87 
+          color: #C0C8D3;
106 88 
         }
107 
-
108 
-        .cCleft{
109 
-          float: left;
110 
-          position: relative;
111 
-          padding:40px 0 30px 0;
112 
-          .cCicon{
113 
-            width: 17px;
114 
-            height: 21px;
115 
-            position: absolute;
116 
-            left: 0;
117 
-            top: 48px;
118 
-          }
119 
-          .distance{
120 
-            padding-left: 24px;
121 
-            font-size: 24px;
122 
-            color: #C0C8D3;
123 
-          }
89 
+      }
90 
+      .cCright{
91 
+        position: relative;
92 
+        float: right;
93 
+        padding:40px 0 30px 0;
94 
+        .money{
95 
+          font-size: 20px;
96 
+          color: #FF3434;
97 
+          position: absolute;
98 
+          right: 78px;
99 
+          bottom: 32px;
124 100 
         }
125 
-        .cCright{
126 
-          position: relative;
127 
-          float: right;
128 
-          padding:40px 0 30px 0;
129 
-          .money{
130 
-            font-size: 20px;
131 
-            color: #FF3434;
132 
-            position: absolute;
133 
-            right: 78px;
134 
-            bottom: 32px;
135 
-          }
136 
-          .price{
137 
-            font-size: 24px;
138 
-            color: #FF3434;
139 
-          }
101 
+        .price{
102 
+          font-size: 24px;
103 
+          color: #FF3434;
140 104 
         }
141 105 
       }
142 106 
     }
143 
-  }
144 
-  .botton{
107 
+  }
108 
+}
109 
+.botton{
110 
+  font-size: 28px;
111 
+  color: #C0C8D3;
112 
+  text-align: center;
113 
+  padding:40px 0 50px 0;
114 
+  background-color: #F8F8F8;
115 
+}
116 
+.index-tabs {
117 
+  position: relative;
118 
+  .tabs-Unselected {
119 
+    width: 25vw;
120 
+    font-weight: bold;
121 
+    color: #C0C8D3;
122 
+    text-align: center;
145 123 
     font-size: 28px;
146 
-    color: #C0C8D3;
124 
+    line-height: 91px;
125 
+  }
126 
+  .tabs-swiper {
127 
+    max-height: 0;
128 
+  }
129 
+  .tabs-Selected {
130 
+    font-size: 32px;
131 
+    color: #4C4C4C;
132 
+    width: 25vw;
133 
+    font-weight: bold;
147 134 
     text-align: center;
148 
-    padding:40px 0 50px 0;
149 
-    background-color: #F8F8F8;
150 
-  }
135 
+    border-bottom: 6px solid #4C4C4C;
136 
+  }
151 137 
 }
152 138
153 
-