|
@@ -1,70 +1,75 @@
|
1
|
1
|
import CustomNav from '@/components/CustomNav'
|
2
|
|
-import mj from '../../../assets/icons/housemantj/mj2.jpg'
|
3
|
|
-import mj3 from '../../../assets/icons/housemantj/mj3.jpg'
|
4
|
2
|
import ax from '../../../assets/icons/housemantj/onlove.png'
|
5
|
|
-import huangxin from '../../../assets/icons/housemantj/已收藏.png'
|
|
3
|
+import hongxin from '../../../assets/icons/housemantj/已收藏.png'
|
6
|
4
|
import baixin from '../../../assets/icons/housemantj/收藏.png'
|
7
|
5
|
import dw from '../../../assets/icons/housemantj/地址.png'
|
8
|
6
|
import titlejd from '../../../assets/icons/housemantj/推荐景点.png'
|
9
|
7
|
import titlems from '../../../assets/icons/housemantj/推荐美食.png'
|
10
|
|
-import pay from '../../../assets/icons/housemantj/pay.png'
|
11
|
|
-import ms2 from '../../../assets/icons/housemantj/ms2.jpg'
|
12
|
|
-import msTip from '../../../assets/icons/housemantj/foodtip.png'
|
13
|
|
-import wz from '../../../assets/icons/housemantj/location.png'
|
14
|
8
|
import showMore from '../../../assets/icons/housemantj/查看更多.png'
|
15
|
|
-import dp from '../../../assets/icons/housemantj/dp.jpg'
|
16
|
9
|
import share from '../../../assets/icons/housemantj/景点分享.png'
|
17
|
10
|
import good from '../../../assets/icons/housemantj/景点爆赞.png'
|
18
|
11
|
import collection from '../../../assets/icons/housemantj/景点收藏.png'
|
19
|
12
|
import './sceneryDetails.less'
|
20
|
13
|
import withLayout from '@/layouts'
|
21
|
14
|
import { useState, useEffect } from 'react'
|
22
|
|
-import { getTouristDetail, saveCollection, removeCollection } from '@/services/home'
|
|
15
|
+import { getTouristDetail, getExtendContent, getRecommendList } from '@/services/home'
|
23
|
16
|
import { Swiper, SwiperItem } from '@tarojs/components';
|
24
|
|
-
|
|
17
|
+import useSave from "@/utils/hooks/useSave"
|
|
18
|
+import useLike from "@/utils/hooks/useLike"
|
|
19
|
+import Extend from '../components/extend'
|
|
20
|
+import Cards from '@/components/foodCards/foodCards.jsx'
|
25
|
21
|
|
26
|
22
|
|
27
|
23
|
|
28
|
24
|
export default withLayout((props) => {
|
29
|
|
- const { router, person, id } = props
|
30
|
|
- const { detail, setDetail } = useState()
|
31
|
|
- const tips = [
|
32
|
|
- { src: mj },
|
33
|
|
- { src: mj3 },
|
34
|
|
- { src: collection },
|
35
|
|
- { src: mj },
|
36
|
|
- { src: mj },
|
37
|
|
- { src: mj3 },
|
38
|
|
- { src: titlems },
|
39
|
|
- { src: mj }
|
40
|
|
- ]
|
41
|
|
- const [ jshidden, setHidden] = useState('none')
|
42
|
|
- const [ jsclose, setClose ] = useState('none')
|
43
|
|
- const [ jsmore, setMore ] = useState('block')
|
44
|
|
- const [ tchidden, tcHidden ] = useState('none')
|
45
|
|
- const [ tcclose, setTcclose ] = useState('none')
|
46
|
|
- const [ tcmore, setTcMore ] = useState('block')
|
47
|
|
- const onClose=()=>{
|
48
|
|
- setHidden('none')
|
49
|
|
- setClose('none')
|
50
|
|
- setMore('block')
|
51
|
|
- }
|
52
|
|
- const onShow=()=>{
|
53
|
|
- setHidden('block')
|
54
|
|
- setClose('block')
|
55
|
|
- setMore('none')
|
56
|
|
- }
|
57
|
|
-
|
|
25
|
+ const { router, person } = props
|
|
26
|
+ const { id, distance, location } = props.router.params
|
|
27
|
+ const [detail, setDetail] = useState({})
|
|
28
|
+ const [isSaved, toggleSave] = useSave(detail.isSaved, 'tourist', id)
|
|
29
|
+ const [isLike, toggleLike] = useLike(detail.isLike, 'tourist', id)
|
58
|
30
|
|
|
31
|
+ //banner图集数组
|
|
32
|
+ const [imglist, setimglist] = useState([])
|
59
|
33
|
const [index, setIndex] = useState(0)
|
60
|
34
|
const handchange = (e) => {
|
61
|
35
|
setIndex(e.detail.current)
|
62
|
36
|
}
|
|
37
|
+
|
|
38
|
+ //本店指南
|
|
39
|
+ const [extend, setExtend] = useState([])
|
|
40
|
+ //当前指南总数
|
|
41
|
+ const [newextNum, setNewextNum] = useState(0)
|
|
42
|
+ //全部指南个数
|
|
43
|
+ const [AllextNum, setAllextNum] = useState(0)
|
|
44
|
+ //指南当前页数
|
|
45
|
+ const [epage, setepage] = useState(2)
|
|
46
|
+ const extendMore = () => {
|
|
47
|
+ setepage(epage + 1)
|
|
48
|
+ getExtendContent('tourist', id, { pageNum: epage }).then((res) => {
|
|
49
|
+ setExtend([...extend, ...res.records])
|
|
50
|
+ setNewextNum(newextNum + res.records.length)
|
|
51
|
+ })
|
|
52
|
+ }
|
|
53
|
+
|
|
54
|
+ // 推荐套餐列表
|
|
55
|
+ const [recommend, setRecommend] = useState([])
|
|
56
|
+
|
63
|
57
|
useEffect(() => {
|
64
|
58
|
getTouristDetail(id).then((res) => {
|
65
|
59
|
setDetail(res)
|
|
60
|
+ setimglist(res.imageList || [])
|
|
61
|
+
|
|
62
|
+ })
|
|
63
|
+ getExtendContent('tourist', id).then((res) => {
|
|
64
|
+ setExtend(res.records || [])
|
|
65
|
+ setAllextNum(res.total)
|
|
66
|
+ setNewextNum(res.records.length)
|
|
67
|
+ })
|
|
68
|
+ getRecommendList({ location: location }).then((res) => {
|
|
69
|
+ setRecommend(res || [])
|
66
|
70
|
})
|
67
|
71
|
}, [])
|
|
72
|
+ console.log(extend=='')
|
68
|
73
|
return (
|
69
|
74
|
<view className='page-index'>
|
70
|
75
|
<view className='index-navbar'>
|
|
@@ -80,11 +85,11 @@ export default withLayout((props) => {
|
80
|
85
|
onChange={handchange}
|
81
|
86
|
>
|
82
|
87
|
{
|
83
|
|
- tips.map((item) =>
|
|
88
|
+ imglist.map((item) =>
|
84
|
89
|
<SwiperItem>
|
85
|
|
- <image src={item.src} className='storeImage' >
|
|
90
|
+ <image src={item.url} className='storeImage' >
|
86
|
91
|
<view className='tpPage'>
|
87
|
|
- <text>{index + 1}</text><text>/</text><text>{tips.length}</text>
|
|
92
|
+ <text>{index + 1}/{imglist.length}</text>
|
88
|
93
|
</view>
|
89
|
94
|
</image>
|
90
|
95
|
</SwiperItem>
|
|
@@ -94,205 +99,54 @@ export default withLayout((props) => {
|
94
|
99
|
|
95
|
100
|
<view className='storeJs'>
|
96
|
101
|
<view className='introduce'>
|
97
|
|
- <text className='storeName'>玄武湖</text>
|
|
102
|
+ <text className='storeName'>{detail.touristName}</text>
|
98
|
103
|
</view>
|
99
|
104
|
<view className='bz'>
|
100
|
105
|
<image src={ax} style={{ width: '15px', height: '15px', marginRight: '10px', marginBottom: '-2px' }} />
|
101
|
|
- <text className='bzRight'>爆赞<text>9999+</text></text>
|
|
106
|
+ <text className='bzRight'>爆赞{detail.likeNum}</text>
|
102
|
107
|
</view>
|
103
|
|
- <view className='wz'>凤游寺52号悦动新门西15栋111号</view>
|
|
108
|
+ <view className='wz'>{detail.address}</view>
|
104
|
109
|
<view className='dpPosition'>
|
105
|
110
|
<image src={dw} className='dwTip' />
|
106
|
|
- <view className='distance'><text>9.99</text>公里</view>
|
|
111
|
+ <view className='distance'>{distance}公里</view>
|
107
|
112
|
</view>
|
108
|
113
|
</view>
|
109
|
114
|
</view>
|
110
|
115
|
<view className='jdjs'>
|
111
|
|
- <view>
|
112
|
|
- 到了10月下旬的深秋时节,“不觉初秋夜渐长,清风习习重凄
|
113
|
|
- 凉”,秋天的美,毫不输给繁花似锦的春天11月栖霞山枫叶最
|
114
|
|
- 佳观赏期快要来了,赶紧提前收藏这些吧!
|
115
|
|
- </view>
|
|
116
|
+ <view>{detail.description}</view>
|
116
|
117
|
<view className='line'></view>
|
117
|
|
- <view className='sc'>
|
118
|
|
- <image className='scTip' src={baixin} /><text>加入收藏</text>
|
|
118
|
+ <view className='sc' onClick={toggleSave}>
|
|
119
|
+ <image className='scTip' src={isSaved > 0 ? hongxin : baixin} /><text>{isSaved > 0 ? '已收藏' : '加入收藏'}</text>
|
119
|
120
|
</view>
|
120
|
121
|
</view>
|
121
|
|
- <view style={{ position: 'relative' }}>
|
122
|
|
-
|
|
122
|
+ <view style={{ position: 'relative',display:extend==''?'none':''}}>
|
123
|
123
|
<view className='title'>
|
124
|
|
- <image src={titlejd}></image>
|
125
|
|
- <text>景点介绍</text>
|
126
|
|
- </view>
|
127
|
|
- <view className='storezn'>
|
128
|
|
- Lorem ipsum dolor sit amet, consectetur adipiscing elit,
|
129
|
|
- sed do eiusmod tempor incididunt ut labore et dolore
|
130
|
|
- magna aliqua. Quis ipsum suspendisse ultrices gravida.
|
131
|
|
- Risus commodo viverra maecenas accumsan lacus vel
|
132
|
|
- facilisis.
|
|
124
|
+ <image src={titlejd} />景点介绍
|
133
|
125
|
</view>
|
134
|
|
- <image src={dp} mode='widthFix' />
|
135
|
|
- <view className='storezn'>
|
136
|
|
- Lorem ipsum dolor sit amet, consectetur adipiscing elit,
|
137
|
|
- sed do eiusmod tempor incididunt ut labore et dolore
|
138
|
|
- magna aliqua. Quis ipsum suspendisse ultrices gravida.
|
139
|
|
- </view>
|
140
|
|
-
|
141
|
|
-
|
142
|
|
-
|
143
|
|
- <view style={{display:jshidden}} >
|
144
|
|
- <view className='title'>
|
145
|
|
- <image src={titlejd}></image>
|
146
|
|
- <text>景点介绍</text>
|
147
|
|
- </view>
|
148
|
|
- <view className='storezn'>
|
149
|
|
- Lorem ipsum dolor sit amet, consectetur adipiscing elit,
|
150
|
|
- sed do eiusmod tempor incididunt ut labore et dolore
|
151
|
|
- magna aliqua. Quis ipsum suspendisse ultrices gravida.
|
152
|
|
- Risus commodo viverra maecenas accumsan lacus vel
|
153
|
|
- facilisis.
|
154
|
|
- </view>
|
155
|
|
- <image src={dp} mode='widthFix' />
|
156
|
|
- <view className='storezn'>
|
157
|
|
- Lorem ipsum dolor sit amet, consectetur adipiscing elit,
|
158
|
|
- sed do eiusmod tempor incididunt ut labore et dolore
|
159
|
|
- magna aliqua. Quis ipsum suspendisse ultrices gravida.
|
160
|
|
- </view>
|
161
|
|
- <view className='title'>
|
162
|
|
- <image src={titlejd}></image>
|
163
|
|
- <text>景点介绍</text>
|
164
|
|
- </view>
|
165
|
|
- <view className='storezn'>
|
166
|
|
- Lorem ipsum dolor sit amet, consectetur adipiscing elit,
|
167
|
|
- sed do eiusmod tempor incididunt ut labore et dolore
|
168
|
|
- magna aliqua. Quis ipsum suspendisse ultrices gravida.
|
169
|
|
- Risus commodo viverra maecenas accumsan lacus vel
|
170
|
|
- facilisis.
|
171
|
|
- </view>
|
172
|
|
- <image src={dp} mode='widthFix' />
|
173
|
|
- <view className='storezn'>
|
174
|
|
- Lorem ipsum dolor sit amet, consectetur adipiscing elit,
|
175
|
|
- sed do eiusmod tempor incididunt ut labore et dolore
|
176
|
|
- magna aliqua. Quis ipsum suspendisse ultrices gravida.
|
177
|
|
- </view>
|
178
|
|
- </view>
|
179
|
|
- <view className='showMore' style={{display:jsclose}} onClick={onClose}>
|
180
|
|
- <image src={showMore} className='moreTip2' />
|
181
|
|
- <view>收起</view>
|
182
|
|
- </view>
|
183
|
|
- <view className='showMore' style={{display:jsmore}} onClick={onShow}>
|
|
126
|
+ {extend?.map((item) => <Extend item={item} />)}
|
|
127
|
+ <view className='showMore' style={{ display: newextNum == AllextNum ? 'none' : '' }} onClick={extendMore}>
|
184
|
128
|
<view>点击查看更多</view>
|
185
|
129
|
<image src={showMore} className='moreTip' />
|
186
|
130
|
</view>
|
187
|
|
-
|
188
|
|
-
|
189
|
131
|
</view>
|
190
|
|
- <view style={{ position: 'relative' }}>
|
|
132
|
+ <view style={{ position: 'relative', display: recommend=='' ? 'none' : '' }}>
|
191
|
133
|
<view className='title'>
|
192
|
|
- <image src={titlems}></image>
|
193
|
|
- <text>老板推荐好吃的</text>
|
194
|
|
- </view>
|
195
|
|
- <view className='foodCard'>
|
196
|
|
- <view className='fCleft'>
|
197
|
|
- <view className='backMoney'>
|
198
|
|
- 返现¥2.04
|
199
|
|
- </view>
|
200
|
|
- <view className='appraise'>
|
201
|
|
- <image className='star' src={huangxin}></image>
|
202
|
|
- <image className='star' src={huangxin}></image>
|
203
|
|
- <image className='star' src={huangxin}></image>
|
204
|
|
- <image className='star' src={huangxin}></image>
|
205
|
|
- <image className='star' src={baixin}></image>
|
206
|
|
- <text className='storezf'>4.5</text>
|
207
|
|
- </view>
|
208
|
|
- <view style={{ overflow: 'hidden' }}>
|
209
|
|
- <view className='contentImg'>
|
210
|
|
- <image src={ms2} className='img1' ></image>
|
211
|
|
- <image src={msTip} className='mstip'></image>
|
212
|
|
- </view>
|
213
|
|
- <view className='neirong'>
|
214
|
|
- <view className='textword'>
|
215
|
|
- 探店拥有“蓝色波浪”的咖啡店连手提袋都很特别手绘的...
|
216
|
|
- </view>
|
217
|
|
- <view className='jiage'>
|
218
|
|
- <text className='rmb' >¥ </text>
|
219
|
|
- <text className='p1'><text className='price' >55</text>元 </text>
|
220
|
|
- <text className='p2'>门市价<text className='oldprice' >78</text>元</text>
|
221
|
|
- </view>
|
222
|
|
- <view className='address'>
|
223
|
|
- <image className='dw' src={wz} />
|
224
|
|
- <text className='wz'>南京市/秦淮区</text>
|
225
|
|
- <image className='star' src={huangxin}></image>
|
226
|
|
- <text className='collection'>已收藏</text>
|
227
|
|
- </view>
|
228
|
|
- </view>
|
229
|
|
- </view>
|
230
|
|
- </view>
|
231
|
|
- <view className='fCright'>
|
232
|
|
- <image src={pay} />
|
233
|
|
- <view>支付</view>
|
234
|
|
- </view>
|
235
|
|
- <view className='columnLine'></view>
|
236
|
|
- </view>
|
237
|
|
- <view className='foodCard'>
|
238
|
|
- <view className='fCleft'>
|
239
|
|
- <view className='backMoney'>
|
240
|
|
- 返现¥2.04
|
241
|
|
- </view>
|
242
|
|
- <view className='appraise'>
|
243
|
|
- <image className='star' src={huangxin}></image>
|
244
|
|
- <image className='star' src={huangxin}></image>
|
245
|
|
- <image className='star' src={huangxin}></image>
|
246
|
|
- <image className='star' src={huangxin}></image>
|
247
|
|
- <image className='star' src={baixin}></image>
|
248
|
|
- <text className='storezf'>4.5</text>
|
249
|
|
- </view>
|
250
|
|
- <view style={{ overflow: 'hidden' }}>
|
251
|
|
- <view className='contentImg'>
|
252
|
|
- <image src={ms2} className='img1' ></image>
|
253
|
|
- <image src={msTip} className='mstip'></image>
|
254
|
|
- </view>
|
255
|
|
- <view className='neirong'>
|
256
|
|
- <view className='textword'>
|
257
|
|
- 探店拥有“蓝色波浪”的咖啡店连手提袋都很特别手绘的...
|
258
|
|
- </view>
|
259
|
|
- <view className='jiage'>
|
260
|
|
- <text className='rmb' >¥ </text>
|
261
|
|
- <text className='p1'><text className='price' >55</text>元 </text>
|
262
|
|
- <text className='p2'>门市价<text className='oldprice' >78</text>元</text>
|
263
|
|
- </view>
|
264
|
|
- <view className='address'>
|
265
|
|
- <image className='dw' src={wz} />
|
266
|
|
- <text className='wz'>南京市/秦淮区</text>
|
267
|
|
- <image className='star' src={huangxin}></image>
|
268
|
|
- <text className='collection'>已收藏</text>
|
269
|
|
- </view>
|
270
|
|
- </view>
|
271
|
|
- </view>
|
272
|
|
- </view>
|
273
|
|
- <view className='fCright'>
|
274
|
|
- <image src={pay} />
|
275
|
|
- <view>支付</view>
|
276
|
|
- </view>
|
277
|
|
- <view className='columnLine'></view>
|
278
|
|
- </view>
|
279
|
|
- <view className='showMore'>
|
280
|
|
- <view>查看更多</view>
|
281
|
|
- <image src={showMore} className='moreTip' />
|
|
134
|
+ <image src={titlems} />老板推荐好吃的
|
282
|
135
|
</view>
|
|
136
|
+ {recommend?.map((item) => <Cards item={item} />)}
|
283
|
137
|
</view>
|
284
|
138
|
<view className='bottom'>已经到底了~</view>
|
285
|
139
|
</scroll-view>
|
286
|
140
|
</view>
|
287
|
141
|
<view className='bottomTab'>
|
288
|
142
|
<view className='tab'>
|
289
|
|
- <image className='share' src={share} /><text>分享</text>
|
|
143
|
+ <image className='share' src={share} />分享
|
290
|
144
|
</view>
|
291
|
|
- <view className='tab'>
|
292
|
|
- <image className='good' src={good} /><text>爆赞</text>
|
|
145
|
+ <view className='tab' onClick={toggleLike}>
|
|
146
|
+ <image className='good' src={isLike > 0 ? ax : good} />{isLike > 0 ? '已爆赞' : '爆赞'}
|
293
|
147
|
</view>
|
294
|
|
- <view className='tab'>
|
295
|
|
- <image className='collection' src={collection} /><text>加入收藏</text>
|
|
148
|
+ <view className='tab' onClick={toggleSave}>
|
|
149
|
+ <image className='collection' src={isSaved > 0 ? hongxin : collection} />{isSaved > 0 ? '已收藏' : '加入收藏'}
|
296
|
150
|
</view>
|
297
|
151
|
</view>
|
298
|
152
|
|