jufubao-food 1.0.15-beta1 → 1.0.15-beta3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/components/JfbFoodConfirmV2/JfbFoodConfirmV2.vue +3 -1
- package/src/components/JfbFoodProductInfo/Attr.js +9 -15
- package/src/components/JfbFoodProductInfo/cusAttr/advanced.js +28 -0
- package/src/components/JfbFoodProductInfo/cusAttr/content.js +40 -0
- package/src/components/JfbFoodProductInfo/cusAttr/style.js +56 -0
- package/src/components/JfbFoodProductList/Api.js +14 -0
- package/src/components/JfbFoodProductList/JfbFoodProductList.vue +427 -141
- package/src/components/JfbFoodProductList/Mock.js +301 -7
- package/src/components/JfbFoodProductList/cusAttr/content.js +71 -0
- package/src/components/JfbFoodProductList/cusAttr/style.js +333 -42
|
@@ -15,139 +15,187 @@
|
|
|
15
15
|
</view>
|
|
16
16
|
</view>
|
|
17
17
|
<!-- #endif -->
|
|
18
|
-
<view
|
|
19
|
-
<view
|
|
20
|
-
<view class="
|
|
21
|
-
<
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
<
|
|
18
|
+
<view class="jfb-food-product-list__body" :style="[bodyStyleComp]">
|
|
19
|
+
<view v-if="shopInfo">
|
|
20
|
+
<view class="shop_info" :style="{top: layoutInfo.top+'rpx'}" @click="toSwitchShopPage">
|
|
21
|
+
<view class="flex-center">
|
|
22
|
+
<xd-font-icon icon="icona-Buy2" size="36" style="margin-right: 8rpx;"></xd-font-icon>
|
|
23
|
+
<view class="shop_name">{{ shopInfo.shop_name }}</view><text style="margin:0 20rpx;">|</text> <text class="_distance">{{ shopInfo.distance }}</text>
|
|
24
|
+
</view>
|
|
25
|
+
<view>
|
|
26
|
+
<xd-font-icon icon="iconxiangyou_xian" color="#666666" size="28"></xd-font-icon>
|
|
27
|
+
</view>
|
|
26
28
|
</view>
|
|
27
|
-
|
|
28
|
-
<view style="height: 100rpx;"></view>
|
|
29
|
+
<view style="height: 100rpx;"></view>
|
|
29
30
|
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
>
|
|
50
|
-
<view
|
|
51
|
-
class="
|
|
52
|
-
:
|
|
53
|
-
:
|
|
31
|
+
<view class="section_main" :style="[sectionMainStyleComp]">
|
|
32
|
+
<view class="left_nav" :style="[navStyleComp]">
|
|
33
|
+
<scroll-view style="height:100%" scroll-y="true" class="nav_scroll">
|
|
34
|
+
<view v-for="(item, index) in categoryList" :key="item.category_id"
|
|
35
|
+
class="nav_item" :class="{active: index === cateIndex}"
|
|
36
|
+
:style="[navItemStyleComp, {
|
|
37
|
+
color: index === cateIndex ? titleStyle.actColor : titleStyle.color,
|
|
38
|
+
fontWeight: index === cateIndex ? titleStyle.actFontWeight : titleStyle.fontWeight,
|
|
39
|
+
fontSize: index === cateIndex ? titleStyle.actFontSize : titleStyle.fontSize,
|
|
40
|
+
backgroundColor: index === cateIndex ? titleStyle.actBgColor : titleStyle.bgColor
|
|
41
|
+
}]"
|
|
42
|
+
@click="switchCate(index)"
|
|
43
|
+
>
|
|
44
|
+
{{ item.category_name }}
|
|
45
|
+
<view v-if="item.cart_num" class="cate_num">{{ item.cart_num }}</view>
|
|
46
|
+
</view>
|
|
47
|
+
<view style="height: 80rpx;"></view>
|
|
48
|
+
</scroll-view>
|
|
49
|
+
</view>
|
|
50
|
+
<view class="right_product">
|
|
51
|
+
<scroll-view :style="{height:'100%'}" scroll-y="true"
|
|
52
|
+
class="product_scroll"
|
|
53
|
+
:scroll-into-view="prodScrollIntoView"
|
|
54
|
+
:scroll-top="prodScrollTop"
|
|
55
|
+
@scroll="handleScroll"
|
|
54
56
|
>
|
|
55
|
-
<view class="
|
|
56
|
-
|
|
57
|
-
<view v-for="
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
<view class="prod_specs" v-if="item.sub_name">{{item.sub_name}}</view>
|
|
69
|
-
<view class="prod_price">
|
|
70
|
-
<view style="display:flex;align-items:center">
|
|
71
|
-
<CusPrice :isPlus="is_plus_site" :isShowIcon="false" salePriceFontSize="32" :showPrice="item.show_prices"></CusPrice>
|
|
57
|
+
<view class="product_scroll_inner">
|
|
58
|
+
<view style="height: 16rpx;"></view>
|
|
59
|
+
<view v-for="(cate, i) in showCategoryList" :key="cate.category_id"
|
|
60
|
+
class="product_group"
|
|
61
|
+
:id="getID(cate)"
|
|
62
|
+
:data-next="cate.nextHeight"
|
|
63
|
+
>
|
|
64
|
+
<view class="group_title" :style="[contGroupTitleStyle]">{{ cate.category_name }}</view>
|
|
65
|
+
<view class="product_list" v-if="cate.productList.length">
|
|
66
|
+
<view v-for="item in cate.productList" :key="item.key" :style="[contProductStyles]">
|
|
67
|
+
<view class="product_item" @click="toProductDetail(item)">
|
|
68
|
+
<view class="prod_img" :style="[contProductImageStyle]">
|
|
69
|
+
<image :src="item.thumb"/>
|
|
72
70
|
</view>
|
|
73
|
-
<view class="
|
|
74
|
-
<view
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
71
|
+
<view class="prod_info">
|
|
72
|
+
<view class="prod_tit"
|
|
73
|
+
:style="[contProductTitleStyle]"
|
|
74
|
+
:class="{
|
|
75
|
+
prod_tit_one:item.product_sku_name
|
|
76
|
+
}">{{item.product_name}}</view>
|
|
77
|
+
<!-- <view class="prod_brand" :style="{color:brandTextColor}" v-if="prod.brand_name">{{prod.brand_name}}</view> -->
|
|
78
|
+
<view class="prod_specs" v-if="item.sub_name">{{item.sub_name}}</view>
|
|
79
|
+
<view class="prod_price">
|
|
80
|
+
<view style="display:flex;align-items:center">
|
|
81
|
+
<CusPrice :isPlus="is_plus_site" :isShowIcon="false" salePriceFontSize="32" :showPrice="item.show_prices"></CusPrice>
|
|
82
|
+
</view>
|
|
83
|
+
<view class="p_r" style="font-size: 28rpx;color:#999" @click.stop>
|
|
84
|
+
<view v-if="item.has_choose" class="chose_spu" @click="handleChoseProduct(item)">
|
|
85
|
+
选规格
|
|
86
|
+
<view v-if="item.num" class="cart_edg">{{ item.num }}</view>
|
|
87
|
+
</view>
|
|
88
|
+
<view v-else>
|
|
89
|
+
<xd-number v-if="item.num" v-model="item.num" circle @change="val => handleCartNumChange(val, item)"></xd-number>
|
|
90
|
+
<!-- <xd-font-icon v-else icon="iconaddcart" :color="mainColor" size="46"></xd-font-icon> -->
|
|
91
|
+
<view class="icon_add_cart" v-else @click="handleChoseProduct(item)">+</view>
|
|
92
|
+
</view>
|
|
93
|
+
</view>
|
|
82
94
|
</view>
|
|
83
95
|
</view>
|
|
84
96
|
</view>
|
|
85
97
|
</view>
|
|
86
98
|
</view>
|
|
99
|
+
<view class="product_list" v-else>
|
|
100
|
+
<view class="product_loading" :style="{height: scrollBoxHeight + 'px'}">
|
|
101
|
+
商品加载中...
|
|
102
|
+
</view>
|
|
103
|
+
</view>
|
|
87
104
|
</view>
|
|
105
|
+
<view style="height: 80rpx;"></view>
|
|
88
106
|
</view>
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
商品加载中...
|
|
92
|
-
</view>
|
|
93
|
-
</view>
|
|
94
|
-
</view>
|
|
95
|
-
<view style="height: 80rpx;"></view>
|
|
96
|
-
</scroll-view>
|
|
107
|
+
</scroll-view>
|
|
108
|
+
</view>
|
|
97
109
|
</view>
|
|
98
|
-
</view>
|
|
99
110
|
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
111
|
+
<view style="height: 120rpx;"></view>
|
|
112
|
+
<view class="fixed_bottom" :style="fixed_bottom">
|
|
113
|
+
<view class="btm_l">
|
|
114
|
+
<view class="card_edg" @click="cartProductShow=true">
|
|
115
|
+
<xd-font-icon icon="icona-Buy21" color="#FF5A39" size="50"></xd-font-icon>
|
|
116
|
+
<view v-if="cartCount" class="card_num">{{ cartCount }}</view>
|
|
117
|
+
</view>
|
|
118
|
+
<xd-unit :price="cartPrice" :isOld="false"></xd-unit>
|
|
106
119
|
</view>
|
|
107
|
-
<
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
<view class="modal_head">
|
|
118
|
-
<view>已选商品</view>
|
|
119
|
-
<view class="clear_cart" @click="handleClearCart">
|
|
120
|
-
<xd-font-icon icon="iconshanchu-01" color="#999999" size="26" style="margin-right: 8rpx;"></xd-font-icon>
|
|
121
|
-
清空
|
|
122
|
-
</view>
|
|
120
|
+
<view>
|
|
121
|
+
<xd-button v-if="cartProductList.length"
|
|
122
|
+
:cusStyle="{fontSize: '28rpx'}"
|
|
123
|
+
width="170rpx" size="small" type="primary"
|
|
124
|
+
@click="handleSubmitCart"
|
|
125
|
+
>选好了</xd-button>
|
|
126
|
+
<xd-button v-else
|
|
127
|
+
:cusStyle="{fontSize: '28rpx'}"
|
|
128
|
+
width="170rpx" size="small" type="primary" :disabled="true"
|
|
129
|
+
>选好了</xd-button>
|
|
123
130
|
</view>
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
<view
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
131
|
+
</view>
|
|
132
|
+
<view class="cart_product_modal" v-if="cartProductShow">
|
|
133
|
+
<view class="modal" @click="cartProductShow=false"></view>
|
|
134
|
+
<view class="modal_cont">
|
|
135
|
+
<view class="modal_head">
|
|
136
|
+
<view>已选商品</view>
|
|
137
|
+
<view class="clear_cart" @click="handleClearCart">
|
|
138
|
+
<xd-font-icon icon="iconshanchu-01" color="#999999" size="26" style="margin-right: 8rpx;"></xd-font-icon>
|
|
139
|
+
清空
|
|
140
|
+
</view>
|
|
141
|
+
</view>
|
|
142
|
+
<view v-if="cartProductList.length" class="prod_list">
|
|
143
|
+
<view class="prod_item" v-for="prod in cartProductList" :key="prod.product_id">
|
|
144
|
+
<view class="prod_img">
|
|
145
|
+
<image :src="prod.thumb"/>
|
|
146
|
+
</view>
|
|
147
|
+
<view class="prod_info">
|
|
148
|
+
<view class="prod_tit"
|
|
149
|
+
:class="{
|
|
150
|
+
prod_tit_one:prod.sub_name
|
|
151
|
+
}">{{prod.product_name}}</view>
|
|
152
|
+
<!-- <view class="prod_brand" :style="{color:brandTextColor}" v-if="prod.brand_name">{{prod.brand_name}}</view> -->
|
|
153
|
+
<view class="prod_specs" v-if="prod.sub_name">{{prod.sub_name}}</view>
|
|
154
|
+
<view class="prod_price">
|
|
155
|
+
<view style="display:flex;align-items:center">
|
|
156
|
+
<CusPrice :isPlus="is_plus_site" type="order" :showPrice="prod.show_prices"></CusPrice>
|
|
157
|
+
</view>
|
|
158
|
+
<view style="font-size: 28rpx;color:#999">
|
|
159
|
+
<xd-number circle v-model="prod.num" @change="val => handleCartNumChange(val, prod)"></xd-number>
|
|
160
|
+
</view>
|
|
142
161
|
</view>
|
|
143
162
|
</view>
|
|
144
163
|
</view>
|
|
145
164
|
</view>
|
|
165
|
+
<view v-else class="prod_list">
|
|
166
|
+
<xd-no-data height="250rpx" :scaleSize="0.8">购物车暂无商品</xd-no-data>
|
|
167
|
+
</view>
|
|
146
168
|
</view>
|
|
147
|
-
|
|
148
|
-
|
|
169
|
+
</view>
|
|
170
|
+
</view>
|
|
171
|
+
<xd-down-drawer :show.sync="showTakeoutShop" height="625rpx" :isClose="false">
|
|
172
|
+
<view class="take_shop_wrap" >
|
|
173
|
+
<view class="take_title">附近门店较多，请确认自取门店</view>
|
|
174
|
+
<view class="take_shop_list">
|
|
175
|
+
<view class="take_shop_item" :class="{active:i===curShopIndex}"
|
|
176
|
+
v-for="(item,i) in shopList" :key="i"
|
|
177
|
+
@click="setCurShop(i)"
|
|
178
|
+
>
|
|
179
|
+
<view class="shop_name_bar">
|
|
180
|
+
<view class="shop_name">
|
|
181
|
+
<text style="margin-right: 16rpx;">{{item.resource_shop_name}}</text>
|
|
182
|
+
<view class="curr_active">正在预览</view>
|
|
183
|
+
</view>
|
|
184
|
+
<view class="more_r">详情 <xd-font-icon icon="iconxiangyou_xian" :size="24"></xd-font-icon></view>
|
|
185
|
+
</view>
|
|
186
|
+
<view class="shop_addr_bar">
|
|
187
|
+
<view>{{item.address}}</view>
|
|
188
|
+
<view>{{item.distance}}</view>
|
|
189
|
+
</view>
|
|
190
|
+
<view class="shop_time" v-if="item.business_time_name">营业时间：{{ item.business_time_name }}</view>
|
|
191
|
+
</view>
|
|
149
192
|
</view>
|
|
193
|
+
<view class="chose_other" @click="handleSwitchShop">选择其他门店 <xd-font-icon icon="iconxiangyou_xian" :size="24"></xd-font-icon></view>
|
|
150
194
|
</view>
|
|
195
|
+
</xd-down-drawer>
|
|
196
|
+
<view v-if="showEmptyShop" class="empty_shop">
|
|
197
|
+
<xd-no-data :scaleSize="2" iconType="shop">附近暂无门店</xd-no-data>
|
|
198
|
+
<view class="empty_chose_btn" @click="handleSwitchShop">选择其他门店 <xd-font-icon icon="iconxiangyou_xian" :size="24"></xd-font-icon></view>
|
|
151
199
|
</view>
|
|
152
200
|
</view>
|
|
153
201
|
</view>
|
|
@@ -160,11 +208,11 @@
|
|
|
160
208
|
import XdButton from "@/components/XdButton/XdButton"
|
|
161
209
|
import XdUnit from "@/components/XdUnit/XdUnit"
|
|
162
210
|
import XdNoData from "@/components/XdNoData/XdNoData"
|
|
163
|
-
|
|
211
|
+
import XdDownDrawer from "@/components/XdDownDrawer/XdDownDrawer"
|
|
164
212
|
import XdNumber from "@/components/XdNumber/XdNumber"
|
|
165
213
|
import { jfbRootExec } from "@/utils/xd.event";
|
|
166
214
|
import JfbFoodProductListMixin from "./JfbFoodProductListMixin";
|
|
167
|
-
import { getContainerPropsValue } from "@/utils/xd.base";
|
|
215
|
+
import { getContainerPropsValue, gCPVal } from "@/utils/xd.base";
|
|
168
216
|
import componentsMixins from "@/mixins/componentsMixins";
|
|
169
217
|
import extsMixins from "@/mixins/extsMixins";
|
|
170
218
|
import { mapState } from "vuex";
|
|
@@ -175,7 +223,7 @@
|
|
|
175
223
|
CusProduct,
|
|
176
224
|
XdButton,
|
|
177
225
|
XdUnit,
|
|
178
|
-
|
|
226
|
+
XdDownDrawer,
|
|
179
227
|
CusPrice,
|
|
180
228
|
XdNumber,
|
|
181
229
|
XdNoData
|
|
@@ -186,6 +234,7 @@
|
|
|
186
234
|
data() {
|
|
187
235
|
return {
|
|
188
236
|
closeMask: true,
|
|
237
|
+
isPreview: false,
|
|
189
238
|
resource_shop_id: "",
|
|
190
239
|
xnamespace: "",
|
|
191
240
|
consume_mode: "",
|
|
@@ -196,6 +245,8 @@
|
|
|
196
245
|
page_size: 10,
|
|
197
246
|
page_token: 1,
|
|
198
247
|
productList: [],
|
|
248
|
+
showTakeoutShop: false,
|
|
249
|
+
showEmptyShop: false,
|
|
199
250
|
|
|
200
251
|
lastScrollTop: 0,
|
|
201
252
|
pointerScroll: true,
|
|
@@ -214,24 +265,33 @@
|
|
|
214
265
|
cartCount: 0,
|
|
215
266
|
cartProductShow: false,
|
|
216
267
|
scrollTopTimer: null,
|
|
268
|
+
brand_id: "",
|
|
269
|
+
shopList: [],
|
|
270
|
+
curShopIndex: 0,
|
|
217
271
|
|
|
218
272
|
//商品列表
|
|
219
273
|
column_num: 1,
|
|
220
274
|
skeNumber:10,
|
|
221
275
|
rowSpacing: 16,
|
|
222
|
-
columnSpacing:
|
|
276
|
+
columnSpacing: 16,
|
|
223
277
|
listPadding:{},
|
|
224
278
|
productConfig:{},
|
|
225
279
|
itemPadding:{},
|
|
226
|
-
itemSpacing:20,
|
|
227
|
-
imageRadius:'
|
|
280
|
+
itemSpacing: 20,
|
|
281
|
+
imageRadius:'0',
|
|
228
282
|
brandColor:'',
|
|
229
283
|
itemFontStyle:{},
|
|
230
284
|
itemBgcColor: '#FFFFFF',
|
|
231
285
|
is_plus_site: false,
|
|
286
|
+
radius: '0',
|
|
287
|
+
contShadow:'0 0 0 rgba(0,0,0,0)',
|
|
288
|
+
|
|
289
|
+
//导航
|
|
290
|
+
titleBgcColor: '#FFFFFF',
|
|
291
|
+
titleStyle: {},
|
|
232
292
|
|
|
233
293
|
//面板
|
|
234
|
-
|
|
294
|
+
showDiscount: "Y", //是否展示划线价
|
|
235
295
|
differ: 1, //原价与现价的差值
|
|
236
296
|
foodDetailPath: "",
|
|
237
297
|
confirmPath: "",
|
|
@@ -240,7 +300,8 @@
|
|
|
240
300
|
},
|
|
241
301
|
computed: {
|
|
242
302
|
...mapState({
|
|
243
|
-
stateLocation: state => state.cityLocation.location || {}
|
|
303
|
+
stateLocation: state => state.cityLocation.location || {},
|
|
304
|
+
stateCity: state => state.cityLocation.city || {},
|
|
244
305
|
}),
|
|
245
306
|
curCategory() {
|
|
246
307
|
return this.categoryList[this.cateIndex] || {};
|
|
@@ -248,19 +309,30 @@
|
|
|
248
309
|
contProductStyles(){
|
|
249
310
|
return {
|
|
250
311
|
backgroundColor: this.itemBgcColor,
|
|
251
|
-
marginBottom: this.
|
|
252
|
-
padding:
|
|
253
|
-
borderRadius: '
|
|
312
|
+
marginBottom: this.columnSpacing + 'rpx',
|
|
313
|
+
padding: this.getMarginAndPadding(this.itemPadding, 0),
|
|
314
|
+
borderRadius: this.radius + 'rpx',
|
|
315
|
+
border: this.contBorder,
|
|
316
|
+
boxShadow: this.contShadow
|
|
254
317
|
}
|
|
255
318
|
},
|
|
256
319
|
contGroupTitleStyle(){
|
|
320
|
+
return {}
|
|
321
|
+
},
|
|
322
|
+
contProductTitleStyle(){
|
|
323
|
+
return {
|
|
324
|
+
...this.itemFontStyle,
|
|
325
|
+
}
|
|
326
|
+
},
|
|
327
|
+
contProductImageStyle(){
|
|
257
328
|
return {
|
|
258
|
-
|
|
329
|
+
borderRadius: this.imageRadius + 'rpx',
|
|
259
330
|
}
|
|
260
331
|
},
|
|
261
332
|
bodyStyleComp(){
|
|
262
333
|
return {
|
|
263
|
-
'--main-color': this.mainColor
|
|
334
|
+
'--main-color': this.mainColor,
|
|
335
|
+
minHeight: this.layoutInfo.bodyMinHeightRpx + 'rpx',
|
|
264
336
|
}
|
|
265
337
|
},
|
|
266
338
|
sectionMainStyleComp(){
|
|
@@ -269,6 +341,16 @@
|
|
|
269
341
|
height: (this.layoutInfo.bodyMinHeightRpx - 220) + 'rpx',
|
|
270
342
|
}
|
|
271
343
|
},
|
|
344
|
+
navStyleComp(){
|
|
345
|
+
return {
|
|
346
|
+
backgroundColor: this.titleBgcColor,
|
|
347
|
+
}
|
|
348
|
+
},
|
|
349
|
+
navItemStyleComp(){
|
|
350
|
+
return {
|
|
351
|
+
|
|
352
|
+
}
|
|
353
|
+
},
|
|
272
354
|
fixed_bottom() {
|
|
273
355
|
return this.fixedStyle({height: 30, zIndex: 111});
|
|
274
356
|
},
|
|
@@ -291,6 +373,7 @@
|
|
|
291
373
|
},
|
|
292
374
|
created() {
|
|
293
375
|
this.init(this.container);
|
|
376
|
+
this.isPreview = this.$configProject['isPreview'];
|
|
294
377
|
this.is_plus_site = this.projectAttr.headers['X-Site-Group']==="vip";
|
|
295
378
|
//todo
|
|
296
379
|
},
|
|
@@ -299,19 +382,67 @@
|
|
|
299
382
|
this.setNameSpace(options);
|
|
300
383
|
this.resource_shop_id = options.resource_shop_id;
|
|
301
384
|
this.consume_mode = options.consume_mode || 'HDSELF';
|
|
302
|
-
|
|
303
|
-
this.
|
|
385
|
+
this.brand_id = options.brand_id;
|
|
386
|
+
this.p_getFoodShopList();
|
|
304
387
|
},
|
|
305
388
|
/**
|
|
306
389
|
* @description 监听事件变化
|
|
307
390
|
* @param container {object} 业务组件对象自己
|
|
308
391
|
*/
|
|
309
392
|
init(container) {
|
|
310
|
-
this.foodDetailPath = getContainerPropsValue(container, 'content.foodDetailPath', {value: "
|
|
311
|
-
this.confirmPath = getContainerPropsValue(container, 'content.confirmPath', {value: "
|
|
393
|
+
this.foodDetailPath = getContainerPropsValue(container, 'content.foodDetailPath', {value: ""}).value;
|
|
394
|
+
this.confirmPath = getContainerPropsValue(container, 'content.confirmPath', {value: ""}).value;
|
|
312
395
|
this.switchStorePath = getContainerPropsValue(container, 'content.switchStorePath', { value: ''}).value;
|
|
313
|
-
|
|
314
|
-
this.
|
|
396
|
+
this.showDiscount = gCPVal(container, 'showDiscount', "Y");
|
|
397
|
+
this.differ = gCPVal(container, 'differ', 1);
|
|
398
|
+
|
|
399
|
+
//商品样式关联属性
|
|
400
|
+
const sValue = "{\"border\":0,\"backgroundColor\":\"#fff\"}";
|
|
401
|
+
let itemBgcColoStyle = this.getRelationStatus(container,'productStyle',{ itemBgcColorStatus:['itemBgcColor'],bgBorder:['contBorder', 'bs']},sValue);
|
|
402
|
+
this.itemBgcColor = gCPVal(container, 'itemBgcColor', ['#fff'], {sKey: 'itemBgcColorStatus', cusFields: ['productStyle','backgroundColor',itemBgcColoStyle]});
|
|
403
|
+
this.contBorder = gCPVal(container, 'contBorder', [{color: '#eee',width: '2',style: 'solid'}], {isBorder: true, bsOld:['is_border','is_border_w','is_border_c'], cusFields: ['productStyle','border',itemBgcColoStyle]});
|
|
404
|
+
this.contStyleBorder = gCPVal(container, 'contBorder', [{color: '#eee',width: '2',style: 'solid'}], {isBorder: true, isBsWidth: true, bsOld:['is_border','is_border_w','is_border_c'], cusFields: ['productStyle','border',itemBgcColoStyle]});
|
|
405
|
+
|
|
406
|
+
console.log("this.z itemBgcColor", this.itemBgcColor)
|
|
407
|
+
console.log("this.z contBorder", this.contBorder)
|
|
408
|
+
console.log("this.z contStyleBorder", this.contStyleBorder)
|
|
409
|
+
|
|
410
|
+
this.itemPadding = gCPVal(container, 'itemPadding', [0], {sKey: "itemPaddingStatus", isPMR: true});
|
|
411
|
+
this.itemSpacing = gCPVal(container,'itemSpacing', [16,20], {sKey:'contStyleStatus',fields:['itemSpacing','contStyle']});
|
|
412
|
+
this.itemFontStyle = this.getFontAndBgcStyle(
|
|
413
|
+
gCPVal(container,'contStyle', {}, {sKey:'contStyleStatus',fields:['itemSpacing','contStyle']}),
|
|
414
|
+
{fontSize: '28rpx', color: '#333', fontWeight: 'normal'},
|
|
415
|
+
)
|
|
416
|
+
this.radius = gCPVal(container,'radius', [this.gStyleValue.radius,'0'], {sKey:'radiusStatus',fields:['radius']})||0;
|
|
417
|
+
this.imageRadius = gCPVal(container,'imageRadius', [this.gStyleValue.radius/2,'0'], {sKey:'imageRadiusStatus',fields:['imageRadius']})||0;
|
|
418
|
+
this.contShadow = gCPVal(container, 'contShadow', [this.gStyleValue.shadow,'none'], {isShadow:true});
|
|
419
|
+
this.columnSpacing = gCPVal(container,'columnSpacing', [16,20], {sKey:'columnRowStatus',fields:['columnSpacing']});
|
|
420
|
+
|
|
421
|
+
//导航
|
|
422
|
+
this.titleBgcColor = gCPVal(container,'titleBgcColor', '#f8f8f8', {sKey:'titleBgcColorStatus',fields:['titleBgcColor']});
|
|
423
|
+
this.titleStyle = gCPVal(
|
|
424
|
+
container,
|
|
425
|
+
"titleStyle",
|
|
426
|
+
[{
|
|
427
|
+
color: '#333333',
|
|
428
|
+
actColor: '#333333',
|
|
429
|
+
fontSize: '24',
|
|
430
|
+
actFontSize: '24', //'', 20 , 26 ,28,30, 36 默认值：''=>24
|
|
431
|
+
fontWeight: '400',
|
|
432
|
+
actFontWeight: '500',
|
|
433
|
+
actBgColor: "#FFFFFF",
|
|
434
|
+
bgColor: ""
|
|
435
|
+
}],
|
|
436
|
+
{sKey:'titleStyleStatus',fields:['titleStyle'],isMerge: true}
|
|
437
|
+
);
|
|
438
|
+
console.log("this.z titleStyle", this.titleStyle)
|
|
439
|
+
|
|
440
|
+
//预览mock数据
|
|
441
|
+
if (this.$configProject['isPreview']) {
|
|
442
|
+
this.categoryList = [];
|
|
443
|
+
this.p_getFoodShopDetail();
|
|
444
|
+
}
|
|
445
|
+
|
|
315
446
|
},
|
|
316
447
|
handleCartNumChange(val, prod){
|
|
317
448
|
console.log("handleCartNumChange", val, prod)
|
|
@@ -348,17 +479,52 @@
|
|
|
348
479
|
this.p_getFoodCartList();
|
|
349
480
|
})
|
|
350
481
|
},
|
|
482
|
+
toSwitchShopPage(){
|
|
483
|
+
this.showTakeoutShop = true;
|
|
484
|
+
},
|
|
351
485
|
handleSwitchShop(){
|
|
352
486
|
this.$xdUniHelper.navigateTo({
|
|
353
|
-
url: this.switchStorePath + "?brand_id=" + this.
|
|
487
|
+
url: this.switchStorePath + "?brand_id=" + this.brand_id + "&resource_shop_id=" + this.resource_shop_id,
|
|
488
|
+
})
|
|
489
|
+
},
|
|
490
|
+
setCurShop(index){
|
|
491
|
+
if(this.curShopIndex !== index){
|
|
492
|
+
this.curShopIndex = index;
|
|
493
|
+
this.p_getFoodShopDetail();
|
|
494
|
+
}
|
|
495
|
+
this.showTakeoutShop = false;
|
|
496
|
+
},
|
|
497
|
+
p_getFoodShopList(){
|
|
498
|
+
jfbRootExec("getFoodShopList", {
|
|
499
|
+
vm: this,
|
|
500
|
+
data: {
|
|
501
|
+
brand_id: this.brand_id,
|
|
502
|
+
latitude: this.stateLocation.latitude,
|
|
503
|
+
longitude: this.stateLocation.longitude,
|
|
504
|
+
city_code: this.stateCity.city_code,
|
|
505
|
+
page_token: 1,
|
|
506
|
+
page_size: 3,
|
|
507
|
+
}
|
|
508
|
+
}).then(res => {
|
|
509
|
+
if(res.list && res.list.length > 0){
|
|
510
|
+
this.shopList = res.list;
|
|
511
|
+
this.curShopIndex = 0;
|
|
512
|
+
this.p_getFoodShopDetail();
|
|
513
|
+
if(!this.$configProject['isPreview']){
|
|
514
|
+
this.showTakeoutShop = true;
|
|
515
|
+
}
|
|
516
|
+
}else{
|
|
517
|
+
this.showEmptyShop = true;
|
|
518
|
+
}
|
|
354
519
|
})
|
|
355
520
|
},
|
|
356
521
|
p_getFoodShopDetail(){
|
|
522
|
+
let curShop = this.shopList[this.curShopIndex];
|
|
357
523
|
jfbRootExec("getFoodShopDetail", {
|
|
358
524
|
vm: this,
|
|
359
525
|
data: {
|
|
360
526
|
xnamespace: this.xnamespace,
|
|
361
|
-
resource_shop_id:
|
|
527
|
+
resource_shop_id: curShop.resource_shop_id,
|
|
362
528
|
consume_mode: this.consume_mode,
|
|
363
529
|
latitude: this.stateLocation.latitude,
|
|
364
530
|
longitude: this.stateLocation.longitude,
|
|
@@ -428,11 +594,28 @@
|
|
|
428
594
|
page_token: options.page_token || 1,
|
|
429
595
|
page_size: this.page_size,
|
|
430
596
|
category_id: options.category_id,
|
|
431
|
-
is_show_uprice: this.
|
|
597
|
+
is_show_uprice: this.showDiscount !== 'Y' ? 0 : this.multiply(this.differ),
|
|
432
598
|
...options,
|
|
433
599
|
}
|
|
434
600
|
}).then(res => {
|
|
435
|
-
let productList = res.lists
|
|
601
|
+
let productList = res.lists.map(item => {
|
|
602
|
+
if(this.$configProject['isPreview']){
|
|
603
|
+
if(this.showDiscount !== "Y"){
|
|
604
|
+
item.show_prices = item.show_prices.filter(p=>p.t!=='U')
|
|
605
|
+
}else{
|
|
606
|
+
//展示划线价
|
|
607
|
+
let sP = item.show_prices.find(p => p.t === 'S');
|
|
608
|
+
let uP = item.show_prices.find(p => p.t === 'U');
|
|
609
|
+
if(!uP) return item;
|
|
610
|
+
if(uP.p - sP.p >= this.multiply(this.differ)){
|
|
611
|
+
item.show_prices = [sP, uP];
|
|
612
|
+
}else{
|
|
613
|
+
item.show_prices = [sP];
|
|
614
|
+
}
|
|
615
|
+
}
|
|
616
|
+
}
|
|
617
|
+
return item;
|
|
618
|
+
});
|
|
436
619
|
this.categoryList = this.categoryList.map((item, index) => {
|
|
437
620
|
if(item.category_id === options.category_id){
|
|
438
621
|
let prodList = [];
|
|
@@ -690,15 +873,19 @@
|
|
|
690
873
|
return Promise.resolve();
|
|
691
874
|
},
|
|
692
875
|
|
|
693
|
-
|
|
876
|
+
handleChoseProduct(product){
|
|
694
877
|
if(product.has_choose){
|
|
695
|
-
this
|
|
696
|
-
url: this.foodDetailPath + `?product_id=${product.product_id}&shop_id=${this.shopInfo.shop_id}&category_id=${product.category_id}`
|
|
697
|
-
})
|
|
878
|
+
this.toProductDetail(product);
|
|
698
879
|
}else{
|
|
699
880
|
this.addProductCart(product);
|
|
700
881
|
}
|
|
701
882
|
},
|
|
883
|
+
toProductDetail(product){
|
|
884
|
+
if(this.$configProject['isPreview']) return;
|
|
885
|
+
this.$xdUniHelper.navigateTo({
|
|
886
|
+
url: this.foodDetailPath + `?product_id=${product.product_id}&shop_id=${this.shopInfo.shop_id}&category_id=${product.category_id}`
|
|
887
|
+
})
|
|
888
|
+
},
|
|
702
889
|
|
|
703
890
|
//加入购入车
|
|
704
891
|
addProductCart(product){
|
|
@@ -784,6 +971,22 @@
|
|
|
784
971
|
.jfb-food-product-list {
|
|
785
972
|
&__body{
|
|
786
973
|
background-color: #FFFFFF;
|
|
974
|
+
.empty_shop{
|
|
975
|
+
background-color: #FFFFFF;
|
|
976
|
+
height: 100%;
|
|
977
|
+
.empty_chose_btn{
|
|
978
|
+
display: flex;
|
|
979
|
+
justify-content: center;
|
|
980
|
+
align-items: center;
|
|
981
|
+
width: 250rpx;
|
|
982
|
+
height: 64rpx;
|
|
983
|
+
margin: 0 auto;
|
|
984
|
+
font-size: 24rpx;
|
|
985
|
+
color: #E5010E;
|
|
986
|
+
border: 1px solid #E5010E;
|
|
987
|
+
border-radius: 100px;
|
|
988
|
+
}
|
|
989
|
+
}
|
|
787
990
|
|
|
788
991
|
.cart_edg{
|
|
789
992
|
position: absolute;
|
|
@@ -858,6 +1061,7 @@
|
|
|
858
1061
|
&.active{
|
|
859
1062
|
// color: var(--main-color);
|
|
860
1063
|
font-weight: 500;
|
|
1064
|
+
background-color: #FFFFFF;
|
|
861
1065
|
&::after{
|
|
862
1066
|
content: '';
|
|
863
1067
|
position: absolute;
|
|
@@ -872,7 +1076,11 @@
|
|
|
872
1076
|
}
|
|
873
1077
|
.right_product{
|
|
874
1078
|
flex: 1;
|
|
875
|
-
margin: 0;
|
|
1079
|
+
margin: 0 0rpx;
|
|
1080
|
+
.product_scroll_inner{
|
|
1081
|
+
padding: 0 32rpx;
|
|
1082
|
+
box-sizing: border-box;
|
|
1083
|
+
}
|
|
876
1084
|
|
|
877
1085
|
.product_group{
|
|
878
1086
|
.group_title{
|
|
@@ -884,7 +1092,6 @@
|
|
|
884
1092
|
height: 64rpx;
|
|
885
1093
|
line-height: 64rpx;
|
|
886
1094
|
border-radius: 16rpx;
|
|
887
|
-
padding-left: 32rpx;
|
|
888
1095
|
}
|
|
889
1096
|
.product_list{
|
|
890
1097
|
.product_loading{
|
|
@@ -898,7 +1105,6 @@
|
|
|
898
1105
|
.product_item{
|
|
899
1106
|
box-sizing: border-box;
|
|
900
1107
|
height: auto;
|
|
901
|
-
background: #FFFFFF;
|
|
902
1108
|
display: flex;
|
|
903
1109
|
|
|
904
1110
|
.chose_spu{
|
|
@@ -1107,5 +1313,85 @@
|
|
|
1107
1313
|
}
|
|
1108
1314
|
}
|
|
1109
1315
|
}
|
|
1316
|
+
.take_shop_wrap{
|
|
1317
|
+
background-color: #f8f8f8;
|
|
1318
|
+
.take_title{
|
|
1319
|
+
background-color: #FFFFFF;
|
|
1320
|
+
padding: 24rpx 32rpx;
|
|
1321
|
+
font-size: 32rpx;
|
|
1322
|
+
color: #333333;
|
|
1323
|
+
font-weight: 500;
|
|
1324
|
+
}
|
|
1325
|
+
.chose_other{
|
|
1326
|
+
display: flex;
|
|
1327
|
+
align-items: center;
|
|
1328
|
+
justify-content: center;
|
|
1329
|
+
font-size: 24rpx;
|
|
1330
|
+
line-height: 48rpx;
|
|
1331
|
+
color: #666666;
|
|
1332
|
+
padding: 16rpx 0;
|
|
1333
|
+
}
|
|
1334
|
+
.take_shop_item{
|
|
1335
|
+
background-color: #FFFFFF;
|
|
1336
|
+
margin: 16rpx;
|
|
1337
|
+
padding: 32rpx;
|
|
1338
|
+
border-radius: 16rpx;
|
|
1339
|
+
border: 1px solid transparent;
|
|
1340
|
+
|
|
1341
|
+
&.active{
|
|
1342
|
+
border: 1px solid rgba(229, 1, 14, 0.1);
|
|
1343
|
+
background-color: rgba(229, 1, 14, 0.03);
|
|
1344
|
+
.shop_name_bar{
|
|
1345
|
+
.curr_active{
|
|
1346
|
+
display: inline-flex;
|
|
1347
|
+
}
|
|
1348
|
+
}
|
|
1349
|
+
}
|
|
1350
|
+
.shop_name_bar{
|
|
1351
|
+
display: flex;
|
|
1352
|
+
align-items: flex-start;
|
|
1353
|
+
justify-content: space-between;
|
|
1354
|
+
font-size: 32rpx;
|
|
1355
|
+
color: #333333;
|
|
1356
|
+
.shop_name{
|
|
1357
|
+
align-items: center;
|
|
1358
|
+
flex: 1;
|
|
1359
|
+
padding-right: 40rpx;
|
|
1360
|
+
}
|
|
1361
|
+
.curr_active{
|
|
1362
|
+
border: 1px solid rgba(229, 1, 14, 0.2);
|
|
1363
|
+
border-radius: 6rpx;
|
|
1364
|
+
color: #D11528;
|
|
1365
|
+
height: 42rpx;
|
|
1366
|
+
width: 128rpx;
|
|
1367
|
+
align-items: center;
|
|
1368
|
+
justify-content: center;
|
|
1369
|
+
font-size: 24rpx;
|
|
1370
|
+
// margin-left: 16rpx;
|
|
1371
|
+
display: none;
|
|
1372
|
+
}
|
|
1373
|
+
.more_r{
|
|
1374
|
+
display: flex;
|
|
1375
|
+
align-items: center;
|
|
1376
|
+
color: #999999;
|
|
1377
|
+
font-size: 24rpx;
|
|
1378
|
+
padding-top: 8rpx;
|
|
1379
|
+
}
|
|
1380
|
+
}
|
|
1381
|
+
.shop_addr_bar{
|
|
1382
|
+
display: flex;
|
|
1383
|
+
align-items: center;
|
|
1384
|
+
justify-content: space-between;
|
|
1385
|
+
margin-top: 16rpx;
|
|
1386
|
+
font-size: 24rpx;
|
|
1387
|
+
color: #999999;
|
|
1388
|
+
}
|
|
1389
|
+
.shop_time{
|
|
1390
|
+
font-size: 24rpx;
|
|
1391
|
+
color: #999999;
|
|
1392
|
+
margin-top: 16rpx;
|
|
1393
|
+
}
|
|
1394
|
+
}
|
|
1395
|
+
}
|
|
1110
1396
|
}
|
|
1111
1397
|
</style>
|