|
@@ -1,83 +1,105 @@
|
1
|
|
-import CustomNav from '@/components/CustomNav'
|
2
|
|
-import withLayout from '@/layouts'
|
3
|
|
-import { getShopDetail, getShopPackage, getExtendContent } from '@/services/home'
|
4
|
|
-import { useState, useEffect, useRef } from 'react'
|
5
|
|
-import { Button, Swiper, SwiperItem } from '@tarojs/components';
|
6
|
|
-import Star from '@/components/Star/Star.jsx'
|
7
|
|
-import Cards from '@/components/foodCards/foodCards.jsx'
|
8
|
|
-import ax from '@/assets/icons/housemantj/onlove.png'
|
9
|
|
-import yysj from '@/assets/icons/housemantj/营业时间.png'
|
10
|
|
-import dw from '@/assets/icons/housemantj/地址.png'
|
11
|
|
-import zhuandao from '@/assets/icons/housemantj/backTop.png'
|
12
|
|
-import titlezs from '@/assets/icons/housemantj/标题装饰.png'
|
13
|
|
-import showMore from '@/assets/icons/housemantj/查看更多.png'
|
14
|
|
-import share from '@/assets/icons/housemantj/景点分享.png'
|
15
|
|
-import good from '@/assets/icons/housemantj/景点爆赞.png'
|
16
|
|
-import baozan from '@/assets/icons/housemantj/爆赞.png'
|
17
|
|
-import weibaozan from '@/assets/icons/housemantj/未赞.png'
|
18
|
|
-import Taro, { useShareAppMessage } from '@tarojs/taro'
|
19
|
|
-import useSave from "@/utils/hooks/useSave"
|
20
|
|
-import useLike from "@/utils/hooks/useLike"
|
21
|
|
-import Extend from '../components/Extend/extend'
|
22
|
|
-import './foodDetails.less'
|
|
1
|
+import CustomNav from "@/components/CustomNav";
|
|
2
|
+import withLayout from "@/layouts";
|
|
3
|
+import {
|
|
4
|
+ getShopDetail,
|
|
5
|
+ getShopPackage,
|
|
6
|
+ getExtendContent,
|
|
7
|
+} from "@/services/home";
|
|
8
|
+import { getVerifyTargetList } from "@/services/payOrder";
|
|
9
|
+import { useState, useEffect, useRef } from "react";
|
|
10
|
+import { Button, Swiper, SwiperItem } from "@tarojs/components";
|
|
11
|
+import Star from "@/components/Star/Star.jsx";
|
|
12
|
+import Cards from "@/components/foodCards/foodCards.jsx";
|
|
13
|
+import ax from "@/assets/icons/housemantj/onlove.png";
|
|
14
|
+import yysj from "@/assets/icons/housemantj/营业时间.png";
|
|
15
|
+import dw from "@/assets/icons/housemantj/地址.png";
|
|
16
|
+import zhuandao from "@/assets/icons/housemantj/backTop.png";
|
|
17
|
+import titlezs from "@/assets/icons/housemantj/标题装饰.png";
|
|
18
|
+import showMore from "@/assets/icons/housemantj/查看更多.png";
|
|
19
|
+import share from "@/assets/icons/housemantj/景点分享.png";
|
|
20
|
+import good from "@/assets/icons/housemantj/景点爆赞.png";
|
|
21
|
+import baozan from "@/assets/icons/housemantj/爆赞.png";
|
|
22
|
+import weibaozan from "@/assets/icons/housemantj/未赞.png";
|
|
23
|
+import Taro, { useShareAppMessage } from "@tarojs/taro";
|
|
24
|
+import useSave from "@/utils/hooks/useSave";
|
|
25
|
+import useLike from "@/utils/hooks/useLike";
|
|
26
|
+import Extend from "../components/Extend/extend";
|
|
27
|
+import "./foodDetails.less";
|
23
|
28
|
|
24
|
29
|
export default withLayout((props) => {
|
25
|
|
- const { router, person } = props
|
26
|
|
- const { id, subOrderId } = props.router.params
|
|
30
|
+ const { router, person } = props;
|
|
31
|
+ const { id, subOrderId, scene } = props.router.params;
|
27
|
32
|
// console.log(id,subOrderId,'--333-----')
|
28
|
33
|
useEffect(() => {
|
29
|
|
- console.log(id, subOrderId, '-------')
|
|
34
|
+ console.log(id, subOrderId, "-------");
|
30
|
35
|
if (id && subOrderId) {
|
31
|
36
|
Taro.navigateTo({
|
32
|
37
|
url: `/pages/TobeShop/index?id=${id}&subOrderId=${subOrderId}`,
|
33
|
38
|
});
|
34
|
39
|
}
|
35
|
|
- }, [id, subOrderId])
|
|
40
|
+ }, [id, subOrderId]);
|
|
41
|
+
|
|
42
|
+ useEffect(() => {
|
|
43
|
+
|
|
44
|
+ if (id && scene) {
|
|
45
|
+ getVerifyTargetList({
|
|
46
|
+ shopId: id,
|
|
47
|
+ isMine: true,
|
|
48
|
+ isVerified: 0,
|
|
49
|
+ }).then((res) => {
|
|
50
|
+ if(res?.records?.length>0){
|
|
51
|
+ Taro.navigateTo({
|
|
52
|
+ url: `/pages/TobeShop/index?id=${id}`,
|
|
53
|
+ });
|
|
54
|
+ }
|
|
55
|
+
|
|
56
|
+ });
|
|
57
|
+ }
|
|
58
|
+ }, [id, scene]);
|
|
59
|
+
|
36
|
60
|
//商铺基础信息
|
37
|
|
- const [detail, setDetail] = useState({})
|
|
61
|
+ const [detail, setDetail] = useState({});
|
38
|
62
|
//商铺套餐
|
39
|
|
- const [spackage, setPackage] = useState([])
|
|
63
|
+ const [spackage, setPackage] = useState([]);
|
40
|
64
|
//banner图集数组
|
41
|
|
- const [imglist, setimglist] = useState([])
|
42
|
|
- const [index, setIndex] = useState(0)
|
|
65
|
+ const [imglist, setimglist] = useState([]);
|
|
66
|
+ const [index, setIndex] = useState(0);
|
43
|
67
|
const handchange = (e) => {
|
44
|
|
- setIndex(e.detail.current)
|
45
|
|
- }
|
46
|
|
-
|
47
|
|
-
|
|
68
|
+ setIndex(e.detail.current);
|
|
69
|
+ };
|
48
|
70
|
|
49
|
|
- const [isSaved, toggleSave] = useSave(detail.isSaved, 'shop', id)
|
50
|
|
- const [isLike, toggleLike] = useLike(detail.isLike, 'shop', id)
|
|
71
|
+ const [isSaved, toggleSave] = useSave(detail.isSaved, "shop", id);
|
|
72
|
+ const [isLike, toggleLike] = useLike(detail.isLike, "shop", id);
|
51
|
73
|
|
52
|
74
|
//当前套餐总数
|
53
|
|
- const [newpgNum, setNewpgNum] = useState(0)
|
|
75
|
+ const [newpgNum, setNewpgNum] = useState(0);
|
54
|
76
|
//全部套餐个数
|
55
|
|
- const [AllpgNum, setAllpgNum] = useState(0)
|
|
77
|
+ const [AllpgNum, setAllpgNum] = useState(0);
|
56
|
78
|
//套餐当前页数
|
57
|
|
- const [page, setpage] = useState(2)
|
|
79
|
+ const [page, setpage] = useState(2);
|
58
|
80
|
const pgMore = () => {
|
59
|
|
- setpage(page + 1)
|
|
81
|
+ setpage(page + 1);
|
60
|
82
|
getShopPackage(id, { pageNum: page }).then((res) => {
|
61
|
|
- setPackage([...spackage, ...res.records])
|
62
|
|
- setNewpgNum(newpgNum + res.records.length)
|
63
|
|
- })
|
64
|
|
- }
|
|
83
|
+ setPackage([...spackage, ...res.records]);
|
|
84
|
+ setNewpgNum(newpgNum + res.records.length);
|
|
85
|
+ });
|
|
86
|
+ };
|
65
|
87
|
//本店指南
|
66
|
|
- const [extend, setExtend] = useState([])
|
|
88
|
+ const [extend, setExtend] = useState([]);
|
67
|
89
|
|
68
|
90
|
//当前指南总数
|
69
|
|
- const [newextNum, setNewextNum] = useState(0)
|
|
91
|
+ const [newextNum, setNewextNum] = useState(0);
|
70
|
92
|
//全部指南个数
|
71
|
|
- const [AllextNum, setAllextNum] = useState(0)
|
|
93
|
+ const [AllextNum, setAllextNum] = useState(0);
|
72
|
94
|
//指南当前页数
|
73
|
|
- const [epage, setepage] = useState(2)
|
|
95
|
+ const [epage, setepage] = useState(2);
|
74
|
96
|
const extendMore = () => {
|
75
|
|
- setepage(epage + 1)
|
76
|
|
- getExtendContent('shop', id, { pageNum: epage }).then((res) => {
|
77
|
|
- setExtend([...extend, ...res.records])
|
78
|
|
- setNewextNum(newextNum + res.records.length)
|
79
|
|
- })
|
80
|
|
- }
|
|
97
|
+ setepage(epage + 1);
|
|
98
|
+ getExtendContent("shop", id, { pageNum: epage }).then((res) => {
|
|
99
|
+ setExtend([...extend, ...res.records]);
|
|
100
|
+ setNewextNum(newextNum + res.records.length);
|
|
101
|
+ });
|
|
102
|
+ };
|
81
|
103
|
const openMap = () => {
|
82
|
104
|
Taro.openLocation({
|
83
|
105
|
longitude: log.current - 0,
|
|
@@ -85,30 +107,35 @@ export default withLayout((props) => {
|
85
|
107
|
name: detail.shopName,
|
86
|
108
|
address: detail.address,
|
87
|
109
|
scale: 12,
|
88
|
|
- })
|
89
|
|
- }
|
90
|
|
- const log = useRef('')
|
91
|
|
- const lat = useRef('')
|
|
110
|
+ });
|
|
111
|
+ };
|
|
112
|
+ const log = useRef("");
|
|
113
|
+ const lat = useRef("");
|
92
|
114
|
|
93
|
115
|
useEffect(() => {
|
94
|
116
|
getShopDetail(id).then((res) => {
|
95
|
|
- setDetail(res)
|
96
|
|
- log.current = (res.locaton).toString().split(',')[0]
|
97
|
|
- lat.current = (res.locaton).toString().split(',')[1]
|
98
|
|
- setimglist(res.imageList || [])
|
99
|
|
- })
|
|
117
|
+ setDetail(res);
|
|
118
|
+ log.current = res.locaton.toString().split(",")[0];
|
|
119
|
+ lat.current = res.locaton.toString().split(",")[1];
|
|
120
|
+ setimglist(res.imageList || []);
|
|
121
|
+ });
|
100
|
122
|
getShopPackage(id).then((res) => {
|
101
|
|
- setPackage(res.records || [])
|
102
|
|
- setNewpgNum(res.records.length)
|
103
|
|
- setAllpgNum(res.total)
|
104
|
|
- })
|
105
|
|
- getExtendContent('shop', id).then((res) => {
|
106
|
|
- setExtend(res.records || [])
|
107
|
|
- setAllextNum(res.total)
|
108
|
|
- setNewextNum(res.records.length)
|
109
|
|
- })
|
110
|
|
- }, [])
|
111
|
|
- const star = parseFloat(((detail.sweetScore + detail.environmentScore + detail.serviceScore) / 3).toFixed(1));
|
|
123
|
+ setPackage(res.records || []);
|
|
124
|
+ setNewpgNum(res.records.length);
|
|
125
|
+ setAllpgNum(res.total);
|
|
126
|
+ });
|
|
127
|
+ getExtendContent("shop", id).then((res) => {
|
|
128
|
+ setExtend(res.records || []);
|
|
129
|
+ setAllextNum(res.total);
|
|
130
|
+ setNewextNum(res.records.length);
|
|
131
|
+ });
|
|
132
|
+ }, []);
|
|
133
|
+ const star = parseFloat(
|
|
134
|
+ (
|
|
135
|
+ (detail.sweetScore + detail.environmentScore + detail.serviceScore) /
|
|
136
|
+ 3
|
|
137
|
+ ).toFixed(1)
|
|
138
|
+ );
|
112
|
139
|
|
113
|
140
|
// 分享
|
114
|
141
|
useShareAppMessage(() => {
|
|
@@ -116,103 +143,155 @@ export default withLayout((props) => {
|
116
|
143
|
title: detail.shopName,
|
117
|
144
|
path: `/pages/details/foodDetails/foodDetails?id=${id}`,
|
118
|
145
|
imageUrl: detail.poster,
|
119
|
|
- }
|
120
|
|
-
|
121
|
|
- })
|
|
146
|
+ };
|
|
147
|
+ });
|
122
|
148
|
|
123
|
149
|
return (
|
124
|
|
- <view className='page-index'>
|
125
|
|
- <view className='index-navbar'>
|
126
|
|
- <CustomNav title='十公里' />
|
|
150
|
+ <view className="page-index">
|
|
151
|
+ <view className="index-navbar">
|
|
152
|
+ <CustomNav title="十公里" />
|
127
|
153
|
</view>
|
128
|
|
- <view style={{ overflow: 'auto', padding: '0 30rpx', background: '#F8F8F8' }}>
|
129
|
|
- <scroll-view scroll-y='true' scroll-view='true' bindscrolltoupper='upper' bindscrolltolower='lower' bindscroll='scroll'>
|
130
|
|
- <view className='storeDetails'>
|
|
154
|
+ <view
|
|
155
|
+ style={{ overflow: "auto", padding: "0 30rpx", background: "#F8F8F8" }}
|
|
156
|
+ >
|
|
157
|
+ <scroll-view
|
|
158
|
+ scroll-y="true"
|
|
159
|
+ scroll-view="true"
|
|
160
|
+ bindscrolltoupper="upper"
|
|
161
|
+ bindscrolltolower="lower"
|
|
162
|
+ bindscroll="scroll"
|
|
163
|
+ >
|
|
164
|
+ <view className="storeDetails">
|
131
|
165
|
<Swiper
|
132
|
|
- className='.swiper'
|
|
166
|
+ className=".swiper"
|
133
|
167
|
circular
|
134
|
168
|
current={index}
|
135
|
169
|
onChange={handchange}
|
136
|
170
|
>
|
137
|
|
- {
|
138
|
|
- imglist.map((item) =>
|
139
|
|
- <SwiperItem>
|
140
|
|
- <image src={item.url} className='storeImage' >
|
141
|
|
- <view className='tpPage'>
|
142
|
|
- <text>{index + 1}/{imglist.length}</text>
|
143
|
|
- </view>
|
144
|
|
- </image>
|
145
|
|
- </SwiperItem>
|
146
|
|
- )
|
147
|
|
- }
|
|
171
|
+ {imglist.map((item) => (
|
|
172
|
+ <SwiperItem>
|
|
173
|
+ <image src={item.url} className="storeImage">
|
|
174
|
+ <view className="tpPage">
|
|
175
|
+ <text>
|
|
176
|
+ {index + 1}/{imglist.length}
|
|
177
|
+ </text>
|
|
178
|
+ </view>
|
|
179
|
+ </image>
|
|
180
|
+ </SwiperItem>
|
|
181
|
+ ))}
|
148
|
182
|
</Swiper>
|
149
|
|
- <view className='storeJs'>
|
150
|
|
- <view style={{ overflow: 'hidden' }}>
|
151
|
|
- <view className='storeName'>{detail.shopName}</view>
|
152
|
|
- <view className='sprice'>
|
153
|
|
- <text className='t1'>¥</text>
|
|
183
|
+ <view className="storeJs">
|
|
184
|
+ <view style={{ overflow: "hidden" }}>
|
|
185
|
+ <view className="storeName">{detail.shopName}</view>
|
|
186
|
+ <view className="sprice">
|
|
187
|
+ <text className="t1">¥</text>
|
154
|
188
|
{detail.averagePrice / 100}/人
|
155
|
|
- <view className='bzRight'>
|
156
|
|
- <image src={baozan} style={{ width: '15px', height: '15px', marginRight: '11rpx', marginBottom: '-2px' }} />
|
157
|
|
- 爆赞{detail.likeNum}</view>
|
|
189
|
+ <view className="bzRight">
|
|
190
|
+ <image
|
|
191
|
+ src={baozan}
|
|
192
|
+ style={{
|
|
193
|
+ width: "15px",
|
|
194
|
+ height: "15px",
|
|
195
|
+ marginRight: "11rpx",
|
|
196
|
+ marginBottom: "-2px",
|
|
197
|
+ }}
|
|
198
|
+ />
|
|
199
|
+ 爆赞{detail.likeNum}
|
|
200
|
+ </view>
|
158
|
201
|
</view>
|
159
|
202
|
</view>
|
160
|
|
- <view className='appraise'>
|
161
|
|
- <Star star={star} />{star}
|
162
|
|
- <view style={{ float: 'right', marginTop: '5px' }}>
|
163
|
|
- <text className='comment'>点评:</text>
|
164
|
|
- <text className='t1'>口味:{detail.sweetScore}</text>
|
165
|
|
- <text className='t1'>环境:{detail.environmentScore}</text>
|
166
|
|
- <text className='t1'>服务:{detail.serviceScore}</text>
|
|
203
|
+ <view className="appraise">
|
|
204
|
+ <Star star={star} />
|
|
205
|
+ {star}
|
|
206
|
+ <view style={{ float: "right", marginTop: "5px" }}>
|
|
207
|
+ <text className="comment">点评:</text>
|
|
208
|
+ <text className="t1">口味:{detail.sweetScore}</text>
|
|
209
|
+ <text className="t1">环境:{detail.environmentScore}</text>
|
|
210
|
+ <text className="t1">服务:{detail.serviceScore}</text>
|
167
|
211
|
</view>
|
168
|
212
|
</view>
|
169
|
|
- <view className='yysj'>
|
170
|
|
- <image src={yysj} className='yysjImg' />营业时间:{detail.businessHours}
|
|
213
|
+ <view className="yysj">
|
|
214
|
+ <image src={yysj} className="yysjImg" />
|
|
215
|
+ 营业时间:{detail.businessHours}
|
171
|
216
|
</view>
|
172
|
|
- <view className='dpPosition' onClick={openMap}>
|
173
|
|
- <image src={dw} className='dwTip' />
|
|
217
|
+ <view className="dpPosition" onClick={openMap}>
|
|
218
|
+ <image src={dw} className="dwTip" />
|
174
|
219
|
<view>
|
175
|
|
- {detail.address}<image src={zhuandao} className='zhuandao' />
|
|
220
|
+ {detail.address}
|
|
221
|
+ <image src={zhuandao} className="zhuandao" />
|
176
|
222
|
</view>
|
177
|
223
|
</view>
|
178
|
224
|
</view>
|
179
|
225
|
</view>
|
180
|
|
- <view style={{ position: 'relative', display: spackage == '' ? 'none' : '' }}>
|
181
|
|
- <view className='title'>
|
182
|
|
- <image src={titlezs} /><text>返现套餐</text>
|
|
226
|
+ <view
|
|
227
|
+ style={{
|
|
228
|
+ position: "relative",
|
|
229
|
+ display: spackage == "" ? "none" : "",
|
|
230
|
+ }}
|
|
231
|
+ >
|
|
232
|
+ <view className="title">
|
|
233
|
+ <image src={titlezs} />
|
|
234
|
+ <text>返现套餐</text>
|
183
|
235
|
</view>
|
184
|
|
- {(spackage||[]).map((item) => <Cards star={star} item={item} />)}
|
185
|
|
- <view className='showMore' style={{ display: newpgNum == AllpgNum ? 'none' : '' }} onClick={pgMore}>
|
|
236
|
+ {(spackage || []).map((item) => (
|
|
237
|
+ <Cards star={star} item={item} />
|
|
238
|
+ ))}
|
|
239
|
+ <view
|
|
240
|
+ className="showMore"
|
|
241
|
+ style={{ display: newpgNum == AllpgNum ? "none" : "" }}
|
|
242
|
+ onClick={pgMore}
|
|
243
|
+ >
|
186
|
244
|
<view>查看更多</view>
|
187
|
|
- <image src={showMore} className='moreTip' />
|
|
245
|
+ <image src={showMore} className="moreTip" />
|
188
|
246
|
</view>
|
189
|
247
|
</view>
|
190
|
|
- <view style={{ position: 'relative', display: extend == '' ? 'none' : '' }}>
|
191
|
|
- <view className='title'>
|
|
248
|
+ <view
|
|
249
|
+ style={{
|
|
250
|
+ position: "relative",
|
|
251
|
+ display: extend == "" ? "none" : "",
|
|
252
|
+ }}
|
|
253
|
+ >
|
|
254
|
+ <view className="title">
|
192
|
255
|
<image src={titlezs} />
|
193
|
256
|
<text>本店指南</text>
|
194
|
257
|
</view>
|
195
|
|
- {(extend||[]).map((item) => <Extend item={item} />)}
|
196
|
|
- <view className='showMore' style={{ display: newextNum == AllextNum ? 'none' : '' }} onClick={extendMore}>
|
|
258
|
+ {(extend || []).map((item) => (
|
|
259
|
+ <Extend item={item} />
|
|
260
|
+ ))}
|
|
261
|
+ <view
|
|
262
|
+ className="showMore"
|
|
263
|
+ style={{ display: newextNum == AllextNum ? "none" : "" }}
|
|
264
|
+ onClick={extendMore}
|
|
265
|
+ >
|
197
|
266
|
<view>查看更多</view>
|
198
|
|
- <image src={showMore} className='moreTip' />
|
|
267
|
+ <image src={showMore} className="moreTip" />
|
199
|
268
|
</view>
|
200
|
269
|
</view>
|
201
|
|
- <view className='botton' style={{ display: newextNum == AllextNum ? '' : 'none' }}>已经到底了~</view>
|
|
270
|
+ <view
|
|
271
|
+ className="botton"
|
|
272
|
+ style={{ display: newextNum == AllextNum ? "" : "none" }}
|
|
273
|
+ >
|
|
274
|
+ 已经到底了~
|
|
275
|
+ </view>
|
202
|
276
|
</scroll-view>
|
203
|
277
|
</view>
|
204
|
|
- <view className='bottomTab'>
|
205
|
|
- <Button openType='share' className='sharebtn'>分享</Button>
|
206
|
|
- <view className='tab'>
|
207
|
|
- <image className='share' src={share} />分享
|
|
278
|
+ <view className="bottomTab">
|
|
279
|
+ <Button openType="share" className="sharebtn">
|
|
280
|
+ 分享
|
|
281
|
+ </Button>
|
|
282
|
+ <view className="tab">
|
|
283
|
+ <image className="share" src={share} />
|
|
284
|
+ 分享
|
208
|
285
|
</view>
|
209
|
|
- <view className='tab' onClick={toggleLike}>
|
210
|
|
- <image className='good' src={isLike > 0 ? baozan : weibaozan} />{isLike > 0 ? '已爆赞' : '爆赞'}
|
|
286
|
+ <view className="tab" onClick={toggleLike}>
|
|
287
|
+ <image className="good" src={isLike > 0 ? baozan : weibaozan} />
|
|
288
|
+ {isLike > 0 ? "已爆赞" : "爆赞"}
|
211
|
289
|
</view>
|
212
|
|
- <view className='tab' onClick={toggleSave}>
|
213
|
|
- <image className='collection' src={isSaved > 0 ? ax : good} />{isSaved > 0 ? '已收藏' : '加入收藏'}
|
|
290
|
+ <view className="tab" onClick={toggleSave}>
|
|
291
|
+ <image className="collection" src={isSaved > 0 ? ax : good} />
|
|
292
|
+ {isSaved > 0 ? "已收藏" : "加入收藏"}
|
214
|
293
|
</view>
|
215
|
294
|
</view>
|
216
|
295
|
</view>
|
217
|
|
- )
|
218
|
|
-})
|
|
296
|
+ );
|
|
297
|
+});
|