jufubao-food 1.0.14 → 1.0.15-beta2
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/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 +412 -138
- 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,177 @@
|
|
|
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
|
-
<xd-button v-if="cartProductList.length" width="170rpx" size="small" type="primary" @click="handleSubmitCart">选好了</xd-button>
|
|
111
|
-
<xd-button v-else width="170rpx" size="small" type="primary" :disabled="true">选好了</xd-button>
|
|
112
|
-
</view>
|
|
113
|
-
</view>
|
|
114
|
-
<view class="cart_product_modal" v-if="cartProductShow">
|
|
115
|
-
<view class="modal" @click="cartProductShow=false"></view>
|
|
116
|
-
<view class="modal_cont">
|
|
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" width="170rpx" size="small" type="primary" @click="handleSubmitCart">选好了</xd-button>
|
|
122
|
+
<xd-button v-else width="170rpx" size="small" type="primary" :disabled="true">选好了</xd-button>
|
|
123
123
|
</view>
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
<view
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
124
|
+
</view>
|
|
125
|
+
<view class="cart_product_modal" v-if="cartProductShow">
|
|
126
|
+
<view class="modal" @click="cartProductShow=false"></view>
|
|
127
|
+
<view class="modal_cont">
|
|
128
|
+
<view class="modal_head">
|
|
129
|
+
<view>已选商品</view>
|
|
130
|
+
<view class="clear_cart" @click="handleClearCart">
|
|
131
|
+
<xd-font-icon icon="iconshanchu-01" color="#999999" size="26" style="margin-right: 8rpx;"></xd-font-icon>
|
|
132
|
+
清空
|
|
133
|
+
</view>
|
|
134
|
+
</view>
|
|
135
|
+
<view v-if="cartProductList.length" class="prod_list">
|
|
136
|
+
<view class="prod_item" v-for="prod in cartProductList" :key="prod.product_id">
|
|
137
|
+
<view class="prod_img">
|
|
138
|
+
<image :src="prod.thumb"/>
|
|
139
|
+
</view>
|
|
140
|
+
<view class="prod_info">
|
|
141
|
+
<view class="prod_tit"
|
|
142
|
+
:class="{
|
|
143
|
+
prod_tit_one:prod.sub_name
|
|
144
|
+
}">{{prod.product_name}}</view>
|
|
145
|
+
<!-- <view class="prod_brand" :style="{color:brandTextColor}" v-if="prod.brand_name">{{prod.brand_name}}</view> -->
|
|
146
|
+
<view class="prod_specs" v-if="prod.sub_name">{{prod.sub_name}}</view>
|
|
147
|
+
<view class="prod_price">
|
|
148
|
+
<view style="display:flex;align-items:center">
|
|
149
|
+
<CusPrice :isPlus="is_plus_site" type="order" :showPrice="prod.show_prices"></CusPrice>
|
|
150
|
+
</view>
|
|
151
|
+
<view style="font-size: 28rpx;color:#999">
|
|
152
|
+
<xd-number circle v-model="prod.num" @change="val => handleCartNumChange(val, prod)"></xd-number>
|
|
153
|
+
</view>
|
|
142
154
|
</view>
|
|
143
155
|
</view>
|
|
144
156
|
</view>
|
|
145
157
|
</view>
|
|
158
|
+
<view v-else class="prod_list">
|
|
159
|
+
<xd-no-data height="250rpx" :scaleSize="0.8">购物车暂无商品</xd-no-data>
|
|
160
|
+
</view>
|
|
146
161
|
</view>
|
|
147
|
-
|
|
148
|
-
|
|
162
|
+
</view>
|
|
163
|
+
</view>
|
|
164
|
+
<xd-down-drawer :show.sync="showTakeoutShop" height="625rpx" :isClose="false">
|
|
165
|
+
<view class="take_shop_wrap" >
|
|
166
|
+
<view class="take_title">附近门店较多，请确认自取门店</view>
|
|
167
|
+
<view class="take_shop_list">
|
|
168
|
+
<view class="take_shop_item" :class="{active:i===curShopIndex}"
|
|
169
|
+
v-for="(item,i) in shopList" :key="i"
|
|
170
|
+
@click="setCurShop(i)"
|
|
171
|
+
>
|
|
172
|
+
<view class="shop_name_bar">
|
|
173
|
+
<view class="shop_name">{{item.resource_shop_name}} <view class="curr_active">正在预览</view></view>
|
|
174
|
+
<view class="more_r">详情 <xd-font-icon icon="iconxiangyou_xian" :size="24"></xd-font-icon></view>
|
|
175
|
+
</view>
|
|
176
|
+
<view class="shop_addr_bar">
|
|
177
|
+
<view>{{item.address}}</view>
|
|
178
|
+
<view>{{item.distance}}</view>
|
|
179
|
+
</view>
|
|
180
|
+
<view class="shop_time">营业时间：09-21:00</view>
|
|
181
|
+
</view>
|
|
149
182
|
</view>
|
|
183
|
+
<view class="chose_other" @click="handleSwitchShop">选择其他门店 <xd-font-icon icon="iconxiangyou_xian" :size="24"></xd-font-icon></view>
|
|
150
184
|
</view>
|
|
185
|
+
</xd-down-drawer>
|
|
186
|
+
<view v-if="showEmptyShop" class="empty_shop">
|
|
187
|
+
<xd-no-data :scaleSize="2" iconType="shop">附近暂无门店</xd-no-data>
|
|
188
|
+
<view class="empty_chose_btn" @click="handleSwitchShop">选择其他门店 <xd-font-icon icon="iconxiangyou_xian" :size="24"></xd-font-icon></view>
|
|
151
189
|
</view>
|
|
152
190
|
</view>
|
|
153
191
|
</view>
|
|
@@ -160,11 +198,11 @@
|
|
|
160
198
|
import XdButton from "@/components/XdButton/XdButton"
|
|
161
199
|
import XdUnit from "@/components/XdUnit/XdUnit"
|
|
162
200
|
import XdNoData from "@/components/XdNoData/XdNoData"
|
|
163
|
-
|
|
201
|
+
import XdDownDrawer from "@/components/XdDownDrawer/XdDownDrawer"
|
|
164
202
|
import XdNumber from "@/components/XdNumber/XdNumber"
|
|
165
203
|
import { jfbRootExec } from "@/utils/xd.event";
|
|
166
204
|
import JfbFoodProductListMixin from "./JfbFoodProductListMixin";
|
|
167
|
-
import { getContainerPropsValue } from "@/utils/xd.base";
|
|
205
|
+
import { getContainerPropsValue, gCPVal } from "@/utils/xd.base";
|
|
168
206
|
import componentsMixins from "@/mixins/componentsMixins";
|
|
169
207
|
import extsMixins from "@/mixins/extsMixins";
|
|
170
208
|
import { mapState } from "vuex";
|
|
@@ -175,7 +213,7 @@
|
|
|
175
213
|
CusProduct,
|
|
176
214
|
XdButton,
|
|
177
215
|
XdUnit,
|
|
178
|
-
|
|
216
|
+
XdDownDrawer,
|
|
179
217
|
CusPrice,
|
|
180
218
|
XdNumber,
|
|
181
219
|
XdNoData
|
|
@@ -186,6 +224,7 @@
|
|
|
186
224
|
data() {
|
|
187
225
|
return {
|
|
188
226
|
closeMask: true,
|
|
227
|
+
isPreview: false,
|
|
189
228
|
resource_shop_id: "",
|
|
190
229
|
xnamespace: "",
|
|
191
230
|
consume_mode: "",
|
|
@@ -196,6 +235,8 @@
|
|
|
196
235
|
page_size: 10,
|
|
197
236
|
page_token: 1,
|
|
198
237
|
productList: [],
|
|
238
|
+
showTakeoutShop: false,
|
|
239
|
+
showEmptyShop: false,
|
|
199
240
|
|
|
200
241
|
lastScrollTop: 0,
|
|
201
242
|
pointerScroll: true,
|
|
@@ -214,24 +255,33 @@
|
|
|
214
255
|
cartCount: 0,
|
|
215
256
|
cartProductShow: false,
|
|
216
257
|
scrollTopTimer: null,
|
|
258
|
+
brand_id: "",
|
|
259
|
+
shopList: [],
|
|
260
|
+
curShopIndex: 0,
|
|
217
261
|
|
|
218
262
|
//商品列表
|
|
219
263
|
column_num: 1,
|
|
220
264
|
skeNumber:10,
|
|
221
265
|
rowSpacing: 16,
|
|
222
|
-
columnSpacing:
|
|
266
|
+
columnSpacing: 16,
|
|
223
267
|
listPadding:{},
|
|
224
268
|
productConfig:{},
|
|
225
269
|
itemPadding:{},
|
|
226
|
-
itemSpacing:20,
|
|
227
|
-
imageRadius:'
|
|
270
|
+
itemSpacing: 20,
|
|
271
|
+
imageRadius:'0',
|
|
228
272
|
brandColor:'',
|
|
229
273
|
itemFontStyle:{},
|
|
230
274
|
itemBgcColor: '#FFFFFF',
|
|
231
275
|
is_plus_site: false,
|
|
276
|
+
radius: '0',
|
|
277
|
+
contShadow:'0 0 0 rgba(0,0,0,0)',
|
|
278
|
+
|
|
279
|
+
//导航
|
|
280
|
+
titleBgcColor: '#FFFFFF',
|
|
281
|
+
titleStyle: {},
|
|
232
282
|
|
|
233
283
|
//面板
|
|
234
|
-
|
|
284
|
+
showDiscount: "Y", //是否展示划线价
|
|
235
285
|
differ: 1, //原价与现价的差值
|
|
236
286
|
foodDetailPath: "",
|
|
237
287
|
confirmPath: "",
|
|
@@ -240,7 +290,8 @@
|
|
|
240
290
|
},
|
|
241
291
|
computed: {
|
|
242
292
|
...mapState({
|
|
243
|
-
stateLocation: state => state.cityLocation.location || {}
|
|
293
|
+
stateLocation: state => state.cityLocation.location || {},
|
|
294
|
+
stateCity: state => state.cityLocation.city || {},
|
|
244
295
|
}),
|
|
245
296
|
curCategory() {
|
|
246
297
|
return this.categoryList[this.cateIndex] || {};
|
|
@@ -248,19 +299,30 @@
|
|
|
248
299
|
contProductStyles(){
|
|
249
300
|
return {
|
|
250
301
|
backgroundColor: this.itemBgcColor,
|
|
251
|
-
marginBottom: this.
|
|
252
|
-
padding:
|
|
253
|
-
borderRadius: '
|
|
302
|
+
marginBottom: this.columnSpacing + 'rpx',
|
|
303
|
+
padding: this.getMarginAndPadding(this.itemPadding, 0),
|
|
304
|
+
borderRadius: this.radius + 'rpx',
|
|
305
|
+
border: this.contBorder,
|
|
306
|
+
boxShadow: this.contShadow
|
|
254
307
|
}
|
|
255
308
|
},
|
|
256
309
|
contGroupTitleStyle(){
|
|
310
|
+
return {}
|
|
311
|
+
},
|
|
312
|
+
contProductTitleStyle(){
|
|
313
|
+
return {
|
|
314
|
+
...this.itemFontStyle,
|
|
315
|
+
}
|
|
316
|
+
},
|
|
317
|
+
contProductImageStyle(){
|
|
257
318
|
return {
|
|
258
|
-
|
|
319
|
+
borderRadius: this.imageRadius + 'rpx',
|
|
259
320
|
}
|
|
260
321
|
},
|
|
261
322
|
bodyStyleComp(){
|
|
262
323
|
return {
|
|
263
|
-
'--main-color': this.mainColor
|
|
324
|
+
'--main-color': this.mainColor,
|
|
325
|
+
minHeight: this.layoutInfo.bodyMinHeightRpx + 'rpx',
|
|
264
326
|
}
|
|
265
327
|
},
|
|
266
328
|
sectionMainStyleComp(){
|
|
@@ -269,6 +331,16 @@
|
|
|
269
331
|
height: (this.layoutInfo.bodyMinHeightRpx - 220) + 'rpx',
|
|
270
332
|
}
|
|
271
333
|
},
|
|
334
|
+
navStyleComp(){
|
|
335
|
+
return {
|
|
336
|
+
backgroundColor: this.titleBgcColor,
|
|
337
|
+
}
|
|
338
|
+
},
|
|
339
|
+
navItemStyleComp(){
|
|
340
|
+
return {
|
|
341
|
+
|
|
342
|
+
}
|
|
343
|
+
},
|
|
272
344
|
fixed_bottom() {
|
|
273
345
|
return this.fixedStyle({height: 30, zIndex: 111});
|
|
274
346
|
},
|
|
@@ -291,6 +363,7 @@
|
|
|
291
363
|
},
|
|
292
364
|
created() {
|
|
293
365
|
this.init(this.container);
|
|
366
|
+
this.isPreview = this.$configProject['isPreview'];
|
|
294
367
|
this.is_plus_site = this.projectAttr.headers['X-Site-Group']==="vip";
|
|
295
368
|
//todo
|
|
296
369
|
},
|
|
@@ -299,8 +372,8 @@
|
|
|
299
372
|
this.setNameSpace(options);
|
|
300
373
|
this.resource_shop_id = options.resource_shop_id;
|
|
301
374
|
this.consume_mode = options.consume_mode || 'HDSELF';
|
|
302
|
-
|
|
303
|
-
this.
|
|
375
|
+
this.brand_id = options.brand_id;
|
|
376
|
+
this.p_getFoodShopList();
|
|
304
377
|
},
|
|
305
378
|
/**
|
|
306
379
|
* @description 监听事件变化
|
|
@@ -310,8 +383,56 @@
|
|
|
310
383
|
this.foodDetailPath = getContainerPropsValue(container, 'content.foodDetailPath', {value: "/Smallline/food/pinfo"}).value;
|
|
311
384
|
this.confirmPath = getContainerPropsValue(container, 'content.confirmPath', {value: "/Smallline/food/confirmv2"}).value;
|
|
312
385
|
this.switchStorePath = getContainerPropsValue(container, 'content.switchStorePath', { value: ''}).value;
|
|
313
|
-
|
|
314
|
-
this.
|
|
386
|
+
this.showDiscount = gCPVal(container, 'showDiscount', "Y");
|
|
387
|
+
this.differ = gCPVal(container, 'differ', 1);
|
|
388
|
+
|
|
389
|
+
//商品样式关联属性
|
|
390
|
+
const sValue = "{\"border\":0,\"backgroundColor\":\"#fff\"}";
|
|
391
|
+
let itemBgcColoStyle = this.getRelationStatus(container,'productStyle',{ itemBgcColorStatus:['itemBgcColor'],bgBorder:['contBorder', 'bs']},sValue);
|
|
392
|
+
this.itemBgcColor = gCPVal(container, 'itemBgcColor', ['#fff'], {sKey: 'itemBgcColorStatus', cusFields: ['productStyle','backgroundColor',itemBgcColoStyle]});
|
|
393
|
+
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]});
|
|
394
|
+
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]});
|
|
395
|
+
|
|
396
|
+
console.log("this.z itemBgcColor", this.itemBgcColor)
|
|
397
|
+
console.log("this.z contBorder", this.contBorder)
|
|
398
|
+
console.log("this.z contStyleBorder", this.contStyleBorder)
|
|
399
|
+
|
|
400
|
+
this.itemPadding = gCPVal(container, 'itemPadding', [0], {sKey: "itemPaddingStatus", isPMR: true});
|
|
401
|
+
this.itemSpacing = gCPVal(container,'itemSpacing', [16,20], {sKey:'contStyleStatus',fields:['itemSpacing','contStyle']});
|
|
402
|
+
this.itemFontStyle = this.getFontAndBgcStyle(
|
|
403
|
+
gCPVal(container,'contStyle', {}, {sKey:'contStyleStatus',fields:['itemSpacing','contStyle']}),
|
|
404
|
+
{fontSize: '28rpx', color: '#333', fontWeight: 'normal'},
|
|
405
|
+
)
|
|
406
|
+
this.radius = gCPVal(container,'radius', [this.gStyleValue.radius,'0'], {sKey:'radiusStatus',fields:['radius']})||0;
|
|
407
|
+
this.imageRadius = gCPVal(container,'imageRadius', [this.gStyleValue.radius/2,'0'], {sKey:'imageRadiusStatus',fields:['imageRadius']})||0;
|
|
408
|
+
this.contShadow = gCPVal(container, 'contShadow', [this.gStyleValue.shadow,'none'], {isShadow:true});
|
|
409
|
+
this.columnSpacing = gCPVal(container,'columnSpacing', [16,20], {sKey:'columnRowStatus',fields:['columnSpacing']});
|
|
410
|
+
|
|
411
|
+
//导航
|
|
412
|
+
this.titleBgcColor = gCPVal(container,'titleBgcColor', '#f8f8f8', {sKey:'titleBgcColorStatus',fields:['titleBgcColor']});
|
|
413
|
+
this.titleStyle = gCPVal(
|
|
414
|
+
container,
|
|
415
|
+
"titleStyle",
|
|
416
|
+
[{
|
|
417
|
+
color: '#333333',
|
|
418
|
+
actColor: '#333333',
|
|
419
|
+
fontSize: '24',
|
|
420
|
+
actFontSize: '24', //'', 20 , 26 ,28,30, 36 默认值：''=>24
|
|
421
|
+
fontWeight: '400',
|
|
422
|
+
actFontWeight: '500',
|
|
423
|
+
actBgColor: "#FFFFFF",
|
|
424
|
+
bgColor: ""
|
|
425
|
+
}],
|
|
426
|
+
{sKey:'titleStyleStatus',fields:['titleStyle'],isMerge: true}
|
|
427
|
+
);
|
|
428
|
+
console.log("this.z titleStyle", this.titleStyle)
|
|
429
|
+
|
|
430
|
+
//预览mock数据
|
|
431
|
+
if (this.$configProject['isPreview']) {
|
|
432
|
+
this.categoryList = [];
|
|
433
|
+
this.p_getFoodShopDetail();
|
|
434
|
+
}
|
|
435
|
+
|
|
315
436
|
},
|
|
316
437
|
handleCartNumChange(val, prod){
|
|
317
438
|
console.log("handleCartNumChange", val, prod)
|
|
@@ -348,17 +469,52 @@
|
|
|
348
469
|
this.p_getFoodCartList();
|
|
349
470
|
})
|
|
350
471
|
},
|
|
472
|
+
toSwitchShopPage(){
|
|
473
|
+
this.showTakeoutShop = true;
|
|
474
|
+
},
|
|
351
475
|
handleSwitchShop(){
|
|
352
476
|
this.$xdUniHelper.navigateTo({
|
|
353
477
|
url: this.switchStorePath + "?brand_id=" + this.shopInfo.brand_id + "&resource_shop_id=" + this.resource_shop_id,
|
|
354
478
|
})
|
|
355
479
|
},
|
|
480
|
+
setCurShop(index){
|
|
481
|
+
if(this.curShopIndex !== index){
|
|
482
|
+
this.curShopIndex = index;
|
|
483
|
+
this.p_getFoodShopDetail();
|
|
484
|
+
}
|
|
485
|
+
this.showTakeoutShop = false;
|
|
486
|
+
},
|
|
487
|
+
p_getFoodShopList(){
|
|
488
|
+
jfbRootExec("getFoodShopList", {
|
|
489
|
+
vm: this,
|
|
490
|
+
data: {
|
|
491
|
+
brand_id: this.brand_id,
|
|
492
|
+
latitude: this.stateLocation.latitude,
|
|
493
|
+
longitude: this.stateLocation.longitude,
|
|
494
|
+
city_code: this.stateCity.city_code,
|
|
495
|
+
page_token: 1,
|
|
496
|
+
page_size: 3,
|
|
497
|
+
}
|
|
498
|
+
}).then(res => {
|
|
499
|
+
if(res.list && res.list.length > 0){
|
|
500
|
+
this.shopList = res.list;
|
|
501
|
+
this.curShopIndex = 0;
|
|
502
|
+
this.p_getFoodShopDetail();
|
|
503
|
+
if(!this.$configProject['isPreview']){
|
|
504
|
+
this.showTakeoutShop = true;
|
|
505
|
+
}
|
|
506
|
+
}else{
|
|
507
|
+
this.showEmptyShop = true;
|
|
508
|
+
}
|
|
509
|
+
})
|
|
510
|
+
},
|
|
356
511
|
p_getFoodShopDetail(){
|
|
512
|
+
let curShop = this.shopList[this.curShopIndex];
|
|
357
513
|
jfbRootExec("getFoodShopDetail", {
|
|
358
514
|
vm: this,
|
|
359
515
|
data: {
|
|
360
516
|
xnamespace: this.xnamespace,
|
|
361
|
-
resource_shop_id:
|
|
517
|
+
resource_shop_id: curShop.resource_shop_id,
|
|
362
518
|
consume_mode: this.consume_mode,
|
|
363
519
|
latitude: this.stateLocation.latitude,
|
|
364
520
|
longitude: this.stateLocation.longitude,
|
|
@@ -428,11 +584,28 @@
|
|
|
428
584
|
page_token: options.page_token || 1,
|
|
429
585
|
page_size: this.page_size,
|
|
430
586
|
category_id: options.category_id,
|
|
431
|
-
is_show_uprice: this.
|
|
587
|
+
is_show_uprice: this.showDiscount !== 'Y' ? 0 : this.multiply(this.differ),
|
|
432
588
|
...options,
|
|
433
589
|
}
|
|
434
590
|
}).then(res => {
|
|
435
|
-
let productList = res.lists
|
|
591
|
+
let productList = res.lists.map(item => {
|
|
592
|
+
if(this.$configProject['isPreview']){
|
|
593
|
+
if(this.showDiscount !== "Y"){
|
|
594
|
+
item.show_prices = item.show_prices.filter(p=>p.t!=='U')
|
|
595
|
+
}else{
|
|
596
|
+
//展示划线价
|
|
597
|
+
let sP = item.show_prices.find(p => p.t === 'S');
|
|
598
|
+
let uP = item.show_prices.find(p => p.t === 'U');
|
|
599
|
+
if(!uP) return item;
|
|
600
|
+
if(uP.p - sP.p >= this.multiply(this.differ)){
|
|
601
|
+
item.show_prices = [sP, uP];
|
|
602
|
+
}else{
|
|
603
|
+
item.show_prices = [sP];
|
|
604
|
+
}
|
|
605
|
+
}
|
|
606
|
+
}
|
|
607
|
+
return item;
|
|
608
|
+
});
|
|
436
609
|
this.categoryList = this.categoryList.map((item, index) => {
|
|
437
610
|
if(item.category_id === options.category_id){
|
|
438
611
|
let prodList = [];
|
|
@@ -690,15 +863,19 @@
|
|
|
690
863
|
return Promise.resolve();
|
|
691
864
|
},
|
|
692
865
|
|
|
693
|
-
|
|
866
|
+
handleChoseProduct(product){
|
|
694
867
|
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
|
-
})
|
|
868
|
+
this.toProductDetail(product);
|
|
698
869
|
}else{
|
|
699
870
|
this.addProductCart(product);
|
|
700
871
|
}
|
|
701
872
|
},
|
|
873
|
+
toProductDetail(product){
|
|
874
|
+
if(this.$configProject['isPreview']) return;
|
|
875
|
+
this.$xdUniHelper.navigateTo({
|
|
876
|
+
url: this.foodDetailPath + `?product_id=${product.product_id}&shop_id=${this.shopInfo.shop_id}&category_id=${product.category_id}`
|
|
877
|
+
})
|
|
878
|
+
},
|
|
702
879
|
|
|
703
880
|
//加入购入车
|
|
704
881
|
addProductCart(product){
|
|
@@ -784,6 +961,22 @@
|
|
|
784
961
|
.jfb-food-product-list {
|
|
785
962
|
&__body{
|
|
786
963
|
background-color: #FFFFFF;
|
|
964
|
+
.empty_shop{
|
|
965
|
+
background-color: #FFFFFF;
|
|
966
|
+
height: 100%;
|
|
967
|
+
.empty_chose_btn{
|
|
968
|
+
display: flex;
|
|
969
|
+
justify-content: center;
|
|
970
|
+
align-items: center;
|
|
971
|
+
width: 250rpx;
|
|
972
|
+
height: 64rpx;
|
|
973
|
+
margin: 0 auto;
|
|
974
|
+
font-size: 24rpx;
|
|
975
|
+
color: #E5010E;
|
|
976
|
+
border: 1px solid #E5010E;
|
|
977
|
+
border-radius: 100px;
|
|
978
|
+
}
|
|
979
|
+
}
|
|
787
980
|
|
|
788
981
|
.cart_edg{
|
|
789
982
|
position: absolute;
|
|
@@ -858,6 +1051,7 @@
|
|
|
858
1051
|
&.active{
|
|
859
1052
|
// color: var(--main-color);
|
|
860
1053
|
font-weight: 500;
|
|
1054
|
+
background-color: #FFFFFF;
|
|
861
1055
|
&::after{
|
|
862
1056
|
content: '';
|
|
863
1057
|
position: absolute;
|
|
@@ -872,7 +1066,11 @@
|
|
|
872
1066
|
}
|
|
873
1067
|
.right_product{
|
|
874
1068
|
flex: 1;
|
|
875
|
-
margin: 0;
|
|
1069
|
+
margin: 0 0rpx;
|
|
1070
|
+
.product_scroll_inner{
|
|
1071
|
+
padding: 0 32rpx;
|
|
1072
|
+
box-sizing: border-box;
|
|
1073
|
+
}
|
|
876
1074
|
|
|
877
1075
|
.product_group{
|
|
878
1076
|
.group_title{
|
|
@@ -884,7 +1082,6 @@
|
|
|
884
1082
|
height: 64rpx;
|
|
885
1083
|
line-height: 64rpx;
|
|
886
1084
|
border-radius: 16rpx;
|
|
887
|
-
padding-left: 32rpx;
|
|
888
1085
|
}
|
|
889
1086
|
.product_list{
|
|
890
1087
|
.product_loading{
|
|
@@ -898,7 +1095,6 @@
|
|
|
898
1095
|
.product_item{
|
|
899
1096
|
box-sizing: border-box;
|
|
900
1097
|
height: auto;
|
|
901
|
-
background: #FFFFFF;
|
|
902
1098
|
display: flex;
|
|
903
1099
|
|
|
904
1100
|
.chose_spu{
|
|
@@ -1107,5 +1303,83 @@
|
|
|
1107
1303
|
}
|
|
1108
1304
|
}
|
|
1109
1305
|
}
|
|
1306
|
+
.take_shop_wrap{
|
|
1307
|
+
background-color: #eee;
|
|
1308
|
+
.take_title{
|
|
1309
|
+
background-color: #FFFFFF;
|
|
1310
|
+
padding: 24rpx 32rpx;
|
|
1311
|
+
font-size: 32rpx;
|
|
1312
|
+
color: #333333;
|
|
1313
|
+
font-weight: 500;
|
|
1314
|
+
}
|
|
1315
|
+
.chose_other{
|
|
1316
|
+
display: flex;
|
|
1317
|
+
align-items: center;
|
|
1318
|
+
justify-content: center;
|
|
1319
|
+
font-size: 24rpx;
|
|
1320
|
+
line-height: 48rpx;
|
|
1321
|
+
color: #666666;
|
|
1322
|
+
padding: 16rpx 0;
|
|
1323
|
+
}
|
|
1324
|
+
.take_shop_item{
|
|
1325
|
+
background-color: #FFFFFF;
|
|
1326
|
+
margin: 16rpx;
|
|
1327
|
+
padding: 32rpx;
|
|
1328
|
+
border-radius: 16rpx;
|
|
1329
|
+
border: 1px solid transparent;
|
|
1330
|
+
|
|
1331
|
+
&.active{
|
|
1332
|
+
border: 1px solid rgba(229, 1, 14, 0.1);
|
|
1333
|
+
background-color: rgba(229, 1, 14, 0.03);
|
|
1334
|
+
.shop_name_bar{
|
|
1335
|
+
.curr_active{
|
|
1336
|
+
display: flex;
|
|
1337
|
+
}
|
|
1338
|
+
}
|
|
1339
|
+
}
|
|
1340
|
+
.shop_name_bar{
|
|
1341
|
+
display: flex;
|
|
1342
|
+
align-items: center;
|
|
1343
|
+
justify-content: space-between;
|
|
1344
|
+
font-size: 32rpx;
|
|
1345
|
+
color: #333333;
|
|
1346
|
+
.shop_name{
|
|
1347
|
+
display: flex;
|
|
1348
|
+
align-items: center;
|
|
1349
|
+
}
|
|
1350
|
+
.curr_active{
|
|
1351
|
+
border: 1px solid rgba(229, 1, 14, 0.2);
|
|
1352
|
+
border-radius: 6rpx;
|
|
1353
|
+
color: #D11528;
|
|
1354
|
+
height: 42rpx;
|
|
1355
|
+
width: 128rpx;
|
|
1356
|
+
align-items: center;
|
|
1357
|
+
justify-content: center;
|
|
1358
|
+
font-size: 24rpx;
|
|
1359
|
+
margin-left: 16rpx;
|
|
1360
|
+
display: none;
|
|
1361
|
+
}
|
|
1362
|
+
.more_r{
|
|
1363
|
+
display: flex;
|
|
1364
|
+
align-items: center;
|
|
1365
|
+
color: #999999;
|
|
1366
|
+
font-size: 24rpx;
|
|
1367
|
+
}
|
|
1368
|
+
}
|
|
1369
|
+
.shop_addr_bar{
|
|
1370
|
+
display: flex;
|
|
1371
|
+
align-items: center;
|
|
1372
|
+
justify-content: space-between;
|
|
1373
|
+
margin-top: 16rpx;
|
|
1374
|
+
font-size: 24rpx;
|
|
1375
|
+
color: #999999;
|
|
1376
|
+
}
|
|
1377
|
+
.shop_time{
|
|
1378
|
+
font-size: 24rpx;
|
|
1379
|
+
color: #999999;
|
|
1380
|
+
margin-top: 16rpx;
|
|
1381
|
+
}
|
|
1382
|
+
}
|
|
1383
|
+
}
|
|
1110
1384
|
}
|
|
1111
1385
|
</style>
|