jufubao-mall 2.0.32-beta6 → 2.0.32

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.
Files changed (26) hide show
  1. package/package.json +1 -1
  2. package/src/components/CusCouponChose/CusCouponChose.vue +13 -10
  3. package/src/components/CusEnter/CusEnter.vue +1 -9
  4. package/src/components/CusPoster/CusPoster.vue +62 -17
  5. package/src/components/CusProduct/CusProduct.vue +184 -576
  6. package/src/components/CusShops/CusShops.vue +209 -409
  7. package/src/components/CusTab/CusTab.vue +22 -159
  8. package/src/components/JfbMallProductInfo/cusAttr/content.js +0 -2
  9. package/src/components/JfbMallProductList/Attr.js +0 -1
  10. package/src/components/JfbMallProductList/JfbMallProductList.vue +1 -7
  11. package/src/components/JfbMallProductList/XdCateV1.vue +1 -0
  12. package/src/components/SkeProduct/SkeProduct.vue +3 -88
  13. package/src/components/CusListItem/CusListItem.vue +0 -141
  14. package/src/components/CusPrice/CusPrice.vue +0 -391
  15. package/src/components/CusVipList/CusVipList.vue +0 -169
  16. package/src/components/JfbMallNetworkMedia/Api.js +0 -94
  17. package/src/components/JfbMallNetworkMedia/Attr.js +0 -20
  18. package/src/components/JfbMallNetworkMedia/JfbMallNetworkMedia.vue +0 -1164
  19. package/src/components/JfbMallNetworkMedia/JfbMallNetworkMediaLess.less +0 -80
  20. package/src/components/JfbMallNetworkMedia/JfbMallNetworkMediaMixin.js +0 -30
  21. package/src/components/JfbMallNetworkMedia/Mock.js +0 -372
  22. package/src/components/JfbMallNetworkMedia/cusAttr/advanced.js +0 -60
  23. package/src/components/JfbMallNetworkMedia/cusAttr/content.js +0 -230
  24. package/src/components/JfbMallNetworkMedia/cusAttr/font.js +0 -122
  25. package/src/components/JfbMallNetworkMedia/cusAttr/icon.js +0 -257
  26. package/src/components/JfbMallNetworkMedia/cusAttr/style.js +0 -12
@@ -1,1164 +0,0 @@
1
- <template>
2
- <view
3
- class="jfb-mall-network-media"
4
- @click="handleEditxSelect"
5
- :class="{ editx : isEditx && active }"
6
- >
7
- <!--#ifdef H5-->
8
- <view
9
- class="jfb-mall-network-media__edit"
10
- :class="{ editx : isEditx && active }"
11
- v-if="isEditx && active"
12
- >
13
- <view class="jfb-mall-network-media__edit-icon" @click.stop="delEdit">
14
- <xd-font-icon icon="iconshanchu-01" color="#fff" size="30"></xd-font-icon>
15
- </view>
16
- </view>
17
- <!-- #endif -->
18
- <view class="jfb-mall-network-media__body" :style="[gCompStyle]">
19
- <view class="media-tab" v-if="cateOneList.length > 0">
20
- <view class="media-tab-hold" :style="holdTabStyleComp" v-if="!isPreview"></view>
21
- <view class="media-tab-cont" :style="tabStyleComp" :class="{isPreview:isPreview}">
22
- <cus-tab
23
- class="xd-tab"
24
- item-padding="0 16rpx"
25
- :bg-color="tabStyleComp.backgroundColor"
26
- :scroll-with-animation="true"
27
- :height="104"
28
- :tab-index="oneCateIndex"
29
- :spacing="fontSp"
30
- :list="cateOneList"
31
- :line-bottom="lineBottom"
32
- :footer-style="navStyle"
33
- :no-border="false"
34
- :color="titleStyle.color"
35
- :act-color="titleStyle.actColor"
36
- :font-size="titleStyle.fontSize"
37
- :act-font-size="titleStyle.actFontSize"
38
- :font-weight="titleStyle.fontWeight"
39
- :act-font-weight="titleStyle.actFontWeight"
40
- :bgc-color="titleStyle.bgColor"
41
- :act-bgc-color="titleStyle.actBgColor"
42
- @onTab="handleCate"
43
- ></cus-tab>
44
- </view>
45
- </view>
46
- <view class="media-two" v-if="cateTwoList.length > 0" :style="[twoTabStyleComp]">
47
- <scroll-view
48
- :scroll-x="true"
49
- :scroll-into-view="twoViewId"
50
- :scroll-with-animation="true"
51
- >
52
- <view class="media-two-box">
53
- <view
54
- @click="handleCate(item)"
55
- class="media-two-item"
56
- :class="{active: item.category_id === twoCateId}"
57
- v-for="item in cateTwoList"
58
- :key="item.category_id"
59
- :id="`index-${item.category_id}`"
60
- :style="[twoTabStyleItemComp]"
61
- >
62
- <view :style="[twoCateId === item.category_id?twoTabActIconComp:twoTabIconComp,subTitleInIcon]">
63
- <view>
64
- <image :src="item.category_icon" :alt="item.category_name"></image>
65
- </view>
66
- </view>
67
- <view class="media-two-name-hold"></view>
68
- <view :style="[twoCateId === item.category_id?twoTabActNameComp:twoTabNameComp]">{{item.category_name}}</view>
69
- <view v-if="twoCateId === item.category_id">
70
- <image :src="triangleIcon"></image>
71
- </view>
72
- </view>
73
- </view>
74
- </scroll-view>
75
- </view>
76
- <view class="media-content" v-if="hasProducts === 'Y'">
77
- <view class="media-input" v-if="blessingData.length > 0">
78
- <view
79
- class="media-input-item"
80
- v-for="item in blessingData"
81
- :key="item.id"
82
- >
83
- <input
84
- :maxlength="item.struct.maxlength||16"
85
- :minlength="item.struct.minlength||0"
86
- v-model="item.data"
87
- placeholder-style="color: #ccc"
88
- :placeholder="item.value || item.struct.placeholder" />
89
- <view
90
- class="media-input-tip"
91
- v-if="item.struct && item.struct.explain"
92
- >{{item.struct.explain}}</view>
93
- </view>
94
- </view>
95
- <view class="media-three" v-if="cateThreeList.length > 0">
96
- <scroll-view
97
- :scroll-x="true"
98
- :scroll-into-view="threeViewId"
99
- :scroll-with-animation="true"
100
- >
101
- <view class="media-three-box">
102
- <view
103
- @click="handleCate(item)"
104
- class="media-three-item"
105
- :class="{active: item.category_id === threeCateId}"
106
- v-for="item in cateThreeList"
107
- :key="item.category_id"
108
- :id="`index-${item.category_id}`"
109
- >
110
- <view>{{item.category_name}}</view>
111
- <view v-if="threeCateId === item.category_id"></view>
112
- </view>
113
- </view>
114
- </scroll-view>
115
- </view>
116
- <view class="media-product" v-if="productList && productList.length > 0">
117
- <view
118
- class="media-product-item"
119
- v-for="item in productList"
120
- :key="item.product_id"
121
- :class="{active: item.product_id === productId}"
122
- @click="handleSelectProduct(item.product_id, item.shopId)"
123
- :style="[productStyleComp]"
124
- >
125
- <view>{{item.list_title}}</view>
126
- <view>
127
- <cus-price type="two" :is-plus="isPlus" :show-price="item['show_prices']" ></cus-price>
128
- </view>
129
- <view v-if="item.product_id === productId"></view>
130
- </view>
131
- </view>
132
- <view class="media-product-nodata" v-if="productList && productList.length === 0">
133
- <xd-no-data
134
- icon-type="product"
135
- :scale-size="2"
136
- height="100%"
137
- >当前暂无商品</xd-no-data>
138
- </view>
139
- <view class="media-detail" v-if="prodcutInfo">
140
- <view>商品详情</view>
141
- <view>
142
- <xd-content-xss :key="prodcutContKey" v-if="prodcutInfo" :html="prodcutInfo"></xd-content-xss>
143
- </view>
144
- </view>
145
- </view>
146
- <view
147
- class="media-no-data"
148
- v-if="hasProducts === 'N'"
149
- :style="[noDataCompStyle]"
150
- >
151
- <xd-no-data icon-type="product" :scale-size="2" height="100%">当前暂无商品</xd-no-data>
152
- </view>
153
- <view style="height: 120rpx"></view>
154
- <view class="media-btn" :style="mediaBtnComp">
155
- <view>
156
- <view class="media-btn-index" @click="handleIndex">
157
- <view v-if="showIndex === 'Y'"><xd-font-icon :icon="showIndexIcon" color="#999"></xd-font-icon></view>
158
- <view v-if="showIndex === 'Y'">首页</view>
159
- </view>
160
- <view>
161
- <xd-button
162
- v-if="isSubmitStatus"
163
- @click="handleSubmit"
164
- type="primary"
165
- size="small"
166
- width="200rpx"
167
- >{{nowBuyText}}</xd-button>
168
- <xd-button
169
- v-else
170
- disabled
171
- type="primary"
172
- size="small"
173
- width="200rpx"
174
- >{{nowBuyText}}</xd-button>
175
- </view>
176
- </view>
177
- </view>
178
- </view>
179
- </view>
180
- </template>
181
-
182
- <script>
183
- import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
184
- import XdNoData from "@/components/XdNoData/XdNoData.vue";
185
- import XdContentXss from "@/components/XdContentXss/XdContentXss.vue";
186
- import XdUnit from "@/components/XdUnit/XdUnit.vue";
187
- import CusPrice from "@/components/CusPrice/CusPrice.vue";
188
- import XdButton from "@/components/XdButton/XdButton.vue";
189
- import { jfbRootExec } from "@/utils/xd.event";
190
- import JfbMallNetworkMediaMixin from "./JfbMallNetworkMediaMixin";
191
- import {gCPVal, getContainerPropsValue} from "@/utils/xd.base";
192
- import componentsMixins from "@/mixins/componentsMixins";
193
- import extsMixins from "@/mixins/extsMixins";
194
- import {Base64} from "js-base64";
195
- import CusTab from "@/components/CusTab/CusTab.vue";
196
- import getServiceUrl from "@/common/getServiceUrl";
197
- import Color from "color";
198
-
199
- export default {
200
- name: "JfbMallNetworkMedia",
201
- components: {
202
- CusTab,
203
- XdFontIcon,
204
- XdContentXss,
205
- XdUnit,
206
- XdButton,
207
- XdNoData,
208
- CusPrice
209
- },
210
- mixins: [
211
- componentsMixins, extsMixins, JfbMallNetworkMediaMixin
212
- ],
213
- computed:{
214
- productStyleComp(){
215
- return {
216
- height: this.isShowDiscount === 'Y' ? '182rpx':'140rpx'
217
- }
218
- },
219
- noDataCompStyle(){
220
- let other = 104;//一级高度
221
- if(this.cateTwoList.length > 0) other += 190 //二级分类高度
222
- other += 80 //底部缝隙高度
223
- other += 120 //底部高度
224
- other += 32;
225
- if(this.cateThreeList.length === 0) other -= 80
226
- return {
227
- height: `calc(${this.layoutInfo.bodyMinHeightPx}px - ${other* this.$rpxNum}px)`
228
- }
229
- },
230
- holdTabStyleComp(){
231
- return {
232
- backgroundColor: this.titleBgColor,
233
- height: '56rpx',
234
- padding: '24rpx'
235
- }
236
- },
237
- tabStyleComp(){
238
- let top = 0;
239
- if(!this.isPreview) top = this.layoutInfo.top;
240
- return {
241
- backgroundColor: this.titleBgColor,
242
- top: top + 'rpx',
243
- }
244
- },
245
- gCompStyle(){
246
- return {
247
- '--g-comp-radius': this.gStyleValue.radius * this.$rpxNum + 'px',
248
- '--g-comp-style-radius-w': parseInt(this['subTitleRadius']) * this.$rpxNum + 'px'
249
- }
250
- },
251
- isSubmitStatus(){
252
- if(!this.isCanBuy) return false;
253
- //为空不检查是否直接购买
254
- if(this.blessingData.length === 0) return true
255
-
256
- //有值根据后台数据返回是否需要检查是否购买
257
- let flag = true;
258
- this.blessingData.map(item=>{
259
- if(item.struct && item.struct.required) {
260
- if(!item.data) flag = false
261
- }
262
- });
263
- return flag;
264
- },
265
- mediaBtnComp() {
266
- return this.fixedStyle({ paddingBottom: 0, zIndex: 110 });
267
- },
268
- twoTabStyleComp(){
269
- return {
270
- backgroundColor: this.level2BgcColor
271
- }
272
- },
273
- twoTabStyleItemComp(){
274
- return {
275
- marginRight: this.iconImageSp + 'rpx',
276
- }
277
- },
278
-
279
- twoTabNameComp(){
280
- let {color, fontSize, fontWeight,bgColor} = this.level2Name;
281
- return {color, fontSize, fontWeight, backgroundColor: bgColor}
282
- },
283
- twoTabActNameComp(){
284
- let {actColor, actFontSize, actFontWeight, actBgColor} = this.level2Name;
285
- return {color:actColor, fontSize:actFontSize, fontWeight:actFontWeight,backgroundColor: actBgColor}
286
- },
287
-
288
- twoTabIconComp(){
289
- let style = { borderRadius: this['subTitleRadius']}
290
- let border = 0;
291
- if(typeof this['subTitleIconBorder'] === 'string' && this['subTitleIconBorder']) {
292
- border = this['subTitleIconBorder'].split(' ')[0];
293
- }
294
- style['border'] = `${border} solid rgba(255,255,255,0.01)`;
295
- return style
296
- },
297
- twoTabActIconComp(){
298
- let style = { borderRadius: this['subTitleRadius']}
299
- style['border'] = this['subTitleIconBorder'];
300
- return style
301
- },
302
- subTitleInIcon(){
303
- let {iconWdith, iconBgColor} = this
304
- return {
305
- width: iconWdith + 'rpx',
306
- height: iconWdith + 'rpx',
307
- backgroundColor: iconBgColor
308
- }
309
- },
310
- },
311
- data() {
312
- return {
313
- isPreview: false,
314
- closeMask: true,
315
- triangleIcon:'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAeCAYAAABXNvynAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAEASURBVFiFzZVBEYMwEEWZKkACUuKglYCESsABEiKhEpBQCZFQCa+HkhYYIBR22bwjh+XNn92folAAqDXmqgA4oLP22Azg+VBauyQBKn401j5JBukCPK19kgCBMU76HxepQX0zVJPPV6n54sykC/DK8viAekY23+MDuhXhYO03on8oUjhrzy+JdCN5vHwb080nZeabIc+UWW+GJWpL4X/SjQQsehm475CNtGfLVjvTHeLOFPYHZeGs1WDfoS3htWUlVmFKoyncCcvqSQONkqy8NMcq7FxpZI9MV9pAdr80+jub4sGWngZKoDWWjQSgWpN1yPfsUQJwmxPtTLXSePq03xLWohge5x8uAAAAAElFTkSuQmCC',
316
- searchTimer:null,//搜索关键字截流
317
- cateOneList: [],
318
- cateTwoList:[],
319
- cateThreeList:[],
320
- productList:null,
321
- productListOrg:[], //商品原生数据【预览模式使用】
322
- parentId:0,
323
- hasProducts: 'UNDEF', //是否有数据 'Y'=>有数据 N=>无 UNDEF=>未熟初始化
324
- page_size: 51,
325
- page_token: '1',
326
- isPlus: false,
327
-
328
- //内容
329
- nowBuyText:'立即充值',
330
- showIndex:'N', //是否展示首页链接
331
- showIndexIcon:'iconshouye1',//首页图标样式
332
- lineBottom:12, //分类样式距离底部距离
333
- navStyle:'line-6-8-s',
334
-
335
- //提交数据
336
- productId: -1,//商品id
337
- oneCateId:-1, //一级分类
338
- oneCateIndex:0, //组件要求传入选中数据记录索引值
339
- oneViewId:-1, //二级分类进入效果
340
- twoCateId:-1, //二级分类
341
- twoViewId:'', //二级分类进入效果
342
- threeCateId: -1, //三级分类ID
343
- threeViewId:'',
344
-
345
-
346
- //划线价格
347
- isShowDiscount:'N',//是否展示划线价格
348
- differ:10,
349
- isCanBuy: false, //是否可以购买
350
-
351
-
352
- //地址栏参数
353
- addressPid: '',
354
- addressTwoId:'',
355
-
356
- //内容
357
- prodcutInfo:'',
358
- prodcutContKey:'prodcutContKey',
359
-
360
- //表单配置信息
361
- blessingData: [],
362
- weixinBtnBug: false,
363
-
364
- //一级菜单
365
- titleBgColor:'', //背景颜色
366
- titleStyle:{}, //文字样式
367
- fontSp:1,//间距
368
-
369
- //二级导航
370
- level2BgcColor:'#f8f8f8',
371
- iconImageSp:16,//间距
372
- level2Name:{},
373
- subTitleRadius:'40rpx', //圆角
374
- subTitleIconBorder:0, //边框样式
375
- iconBgColor:'', //背景颜色
376
- iconWdith: 96, //icon大小
377
-
378
- //
379
- productInfoPath:null
380
-
381
- }
382
- },
383
- watch: {
384
- container(value, oldValue) {
385
- if (JSON.stringify(value) === JSON.stringify(oldValue)) return;
386
- if (this.$configProject['isPreview']) this.init(value)
387
- },
388
- isShowDiscount(){
389
- this.productList = this.filterProdcutData(this.productListOrg);
390
- }
391
- },
392
- created() {
393
- this.isPreview = this.$configProject['isPreview'];
394
- this.init(this.container);
395
- },
396
- methods: {
397
- async onJfbLoad(options) {
398
- this.setNameSpace(options);
399
- //参数设置
400
- if(options.pid) this.addressPid = Number(options.pid);
401
- if(options.cateId) this.addressTwoId = Number(options.cateId);
402
- if(this.$configProject['isPreview']) {
403
- this.addressPid = 157696
404
- }
405
- await this.getCategoryList();
406
- },
407
-
408
-
409
- /**
410
- * @description 监听事件变化
411
- * @param container {object} 业务组件对象自己
412
- */
413
- init(container) {
414
- let categoryParentType = gCPVal(container, 'categoryParentType', 'root');
415
- if(categoryParentType === 'root') this.parentId = 0;
416
- else {
417
- let categoryParent = gCPVal(container, 'categoryParent', '');
418
- if(!categoryParent) this.parentId = 0;
419
- else this.parentId = categoryParent;
420
- }
421
-
422
- this.xnamespace = 'ad5cb47e'//gCPVal(container, 'xnamespace', this.projectAttr.business_code||this.xnamespace);
423
- this.showIndex = gCPVal(container, 'showIndex', 'Y');
424
- this.nowBuyText = gCPVal(container, 'nowBuyText', '立即充值');
425
- let showIndexIcon = 'iconshouye1';
426
- this.showIndex = gCPVal(container, 'showIndex', 'Y');
427
- if(this.showIndex === 'Y') {
428
- showIndexIcon = gCPVal(container, 'showIndexIcon', 'iconshouye1');
429
- }
430
- this.showIndexIcon = showIndexIcon;
431
-
432
- this.isShowDiscount = gCPVal(container,'isShowDiscount', 'Y');
433
- this.differ = gCPVal(container,'differ', 0);
434
- this.navStyle = gCPVal(container, 'navStyle', 'line-6-8-s');
435
-
436
- //一级分类
437
- this.titleBgColor = gCPVal(container, 'titleBgColor', '#fff',{sKey:'titleBgColorStatus', fields:['titleBgColor']});
438
- let defTitleStyle = {
439
- color:'#333',
440
- actColor: this.navStyle === 'tags'?'#fff':this.mainColor,
441
- fontSize: '28',
442
- actFontSize: '28',
443
- fontWeight:'400',
444
- actFontWeight: '400',
445
- bgColor: this.navStyle === 'tags'?'rgba(0,0,0,0)':'#f8f8f8',
446
- actBgColor: this.navStyle === 'tags'?this.mainColor: 'rgba(0,0,0,0)'
447
- }
448
- this.titleStyle = gCPVal(container, 'titleStyle', [defTitleStyle],{sKey:'titleStyleStatus', fields:['titleStyle','titleColor'],isMerge: true});
449
- this.fontSp = gCPVal(container, 'fontSp', [16],{sKey:'fontSpSpStatus', fields:['fontSp']});
450
-
451
-
452
- //二级分类
453
- this.level2BgcColor = gCPVal(container, 'level2BgcColor', ['#f8f8f8'],{sKey:'level2BgcColorStatus', fields:['level2BgcColor']});
454
- this.level2Name = gCPVal(container, 'level2Name', [{
455
- fontSize: '24',
456
- actFontSize: '24',
457
- color: '#333',
458
- actColor:this.mainColor,
459
- bgColor:'rgba(0,0,0,0)',
460
- actBgColor:'rgba(0,0,0,0)',
461
- fontWeight: '400',
462
- actFontWeight: '400',
463
- }],{sKey:'level2NameStatus', fields:['level2Name','level2Color'],isMerge: true});
464
- this.subTitleIconBorder = gCPVal(container, 'subTitleIconBorder', [{style:'solid', width: '2', color: this.mainColor}], {isBorder:true});
465
- this.iconWdith = gCPVal(container, 'iconWdith', [96],{sKey:'iconWdithStatus', fields:['iconWdith']});
466
- this.iconImageSp = gCPVal(container, 'iconImageSp', [16],{sKey:'iconImageSpStatus', fields:['iconImageSp']});
467
- this.iconBgColor = gCPVal(container, 'iconBgColor', [100],{sKey:'iconBgColorStatus', fields:['iconBgColor']});
468
- let defTitleRadius = 40*Number(this.iconWdith)/96 + 'rpx';
469
- this.subTitleRadius = gCPVal(container, 'subTitleRadius', [defTitleRadius],{sKey:'subTitleRadiusStatus', fields:['subTitleRadius']})||0;
470
-
471
-
472
- //高级
473
- this.productInfoPath = gCPVal(container, "productInfoPath", {value: ""}).value;
474
- },
475
-
476
- //====分类数据=========
477
- clearStatus(level){
478
- if(level === 1) {
479
- this.threeCateId = -1;
480
- this.twoCateId = -1;
481
-
482
- }
483
- if(level === 2) {
484
- this.threeCateId = -1
485
- }
486
- this.twoViewId = '';
487
- this.threeViewId = ''
488
- this.productList = null;
489
- this.prodcutInfo = '';
490
- this.productId = -1
491
- this.shopId = -1;
492
-
493
- },
494
- getCategoryList(){
495
- return new Promise((resolve)=>{
496
- let params = {
497
- xnamespace: this.xnamespace,
498
- root_category_id: this.parentId,
499
- level: 3,
500
- };
501
- jfbRootExec("getMallMediaCategoryTree", {
502
- vm: this,
503
- data: params
504
- })
505
- .then(res => {
506
- //设置条件
507
- this.cateOneList = res.items
508
- .filter(item=>item.children.length > 0)
509
- .map((item,index) => {
510
- item['name'] = item.category_name;
511
- item['id'] = item.category_id;
512
- item['level'] = 1;
513
- //页面传参中的一级分类否分存在
514
- if(this.addressPid && Number(this.addressPid) === item.category_id) {
515
- this.oneCateIndex = index;
516
- }
517
- item['category_icon'] = getServiceUrl(item['category_icon'], 'size3');
518
-
519
- //二级分类
520
- item.children = item.children.map(child => {
521
- child['category_icon'] = getServiceUrl(child['category_icon'], 'size3');
522
- child['level'] = 2;
523
-
524
- //三级分类
525
- if(child.children && child.children.length > 0) {
526
- child.children = child.children.map(three=>{
527
- three['category_icon'] = getServiceUrl(three['category_icon'], 'size3');
528
- three['level'] = 3;
529
- return three
530
- })
531
- }
532
-
533
- return child;
534
- });
535
- return item;
536
- });
537
-
538
- //第一次操作
539
- if(this.cateOneList.length > 0) {
540
- if(this.addressPid) {
541
- let curItemIndex = this.cateOneList.findIndex(item=>item.id === this.addressPid);
542
- if(curItemIndex === -1) this.handleCate(this.cateOneList[0]);
543
- else this.handleCate(this.cateOneList[curItemIndex ])
544
- }
545
- else this.handleCate(this.cateOneList[0]);
546
- }
547
-
548
- resolve()
549
- })
550
- .catch(err => {
551
- this.$xdLog.catch(err);
552
- resolve()
553
- })
554
- })
555
- },
556
- handleCate(cate){
557
-
558
- let {level} = cate;
559
- let idsMap = {
560
- "1": "oneCateId",
561
- "2": "twoCateId",
562
- "3": "threeCateId"
563
- }
564
- let listMap = {
565
- "1": "cateOneList",
566
- "2": "cateTwoList",
567
- "3": "cateThreeList"
568
- }
569
- let addressMap = {
570
- "1": "addressPid",
571
- "2": "addressTwoId",
572
- }
573
- let viewToMap = {
574
- "2": 'twoViewId',
575
- "3" : "threeViewId"
576
- };
577
- let curCateIdKey = idsMap[level];
578
-
579
- //点击为相同分类
580
- if(this[curCateIdKey] === cate.category_id) return;
581
-
582
- //设置当前分类ID
583
- this[curCateIdKey] = cate.category_id;
584
-
585
- //使用动画
586
- if(viewToMap[level]) {
587
- setTimeout(()=>{
588
- this[viewToMap[level]] = `index-${this[curCateIdKey]}`;
589
- },100)
590
- }
591
-
592
-
593
- //层级小于三级处理
594
- if(cate.level < 3) {
595
- this.clearStatus(level);
596
- let nextCateListKey = listMap[level+1];
597
- this[nextCateListKey] = cate.children;
598
-
599
- //有子级自动触发点击事件(操作第一个记录)
600
- if(cate.children.length > 0) {
601
- let nextCateKey = addressMap[level + 1];
602
- //下一级为二级分类处理
603
- if(nextCateKey !== undefined) {
604
- if(this[nextCateKey]) {
605
- let curItemIndex = cate.children.findIndex(item=>item.category_id === this[nextCateKey]);
606
- if(curItemIndex === -1) this.handleCate(cate.children[0]);
607
- else {
608
- let item = cate.children[curItemIndex]
609
- let nextViewToKey = viewToMap[level + 1];
610
- this.$nextTick(()=>{
611
- if(nextViewToKey) {
612
- this[nextViewToKey] = `index-${item.category_id}`;
613
- }
614
- })
615
-
616
- this.handleCate(item);
617
- }
618
- }
619
-
620
- //无值使用第一个
621
- else this.handleCate(cate.children[0]);
622
- }
623
- //下一级为三级分类处理
624
- else {
625
- if(cate.children.length >0) this.handleCate(cate.children[0]);
626
- else this.getProductInfo();
627
- }
628
-
629
- }
630
- //无数据
631
- else this.getProductInfo();
632
- }
633
-
634
- //第三级分类处理
635
- else {
636
- //有子级自动触发点击事件(操作第一个记录)
637
- this.getProductInfo(cate);
638
- }
639
-
640
- },
641
- getProductInfo(item = null){
642
- this.prodcutInfo = '';
643
- if(item === null) this.hasProducts = 'N';
644
- else {
645
- this.hasProducts = 'Y';
646
- this.getList(item);
647
- }
648
- },
649
- //====分类数据=========
650
-
651
- //==商品相关操作=======
652
- async handleProductOperate(){
653
- await this.getProductContent(this.productId);
654
- await this.getProductBtns(this.productId);
655
- await this.getProductForm(this.productId);
656
- this.$xdHideLoading();
657
- },
658
-
659
- handleSelectProduct(i){
660
- if(i === this.productId) return
661
- this.productId = i;
662
- this.$xdShowLoading({});
663
- this.handleProductOperate()
664
- },
665
-
666
- getProductBtns(product_id){
667
- return new Promise((resolve)=>{
668
- jfbRootExec("getMallMediaProductBuyButton", {
669
- vm: this,
670
- data: {
671
- product_id,
672
- xnamespace: this.xnamespace,
673
- }
674
- }).then(res=>{
675
- let isCanBuyItem = res['buttons'].filter(item=>{
676
- return item.code === 'buy-now' && item.enabled === true;
677
- });
678
- this.isCanBuy = isCanBuyItem.length > 0;
679
- resolve();
680
- }).catch(err=>{
681
- this.isCanBuy = false
682
- resolve();
683
- })
684
- })
685
-
686
- },
687
-
688
- getProductForm(product_id){
689
- return new Promise((resolve)=>{
690
- jfbRootExec("getMallMediaProductForm", {
691
- vm: this,
692
- data: {
693
- product_id,
694
- xnamespace: this.xnamespace,
695
- }
696
- }).then(res=>{
697
- this.blessingData = res['form_data']||[];
698
- resolve()
699
- }).catch(err=>{
700
- this.blessingData = [];
701
- console.error(err);
702
- resolve()
703
- })
704
- })
705
-
706
- },
707
-
708
- getProductContent(product_id){
709
- return new Promise((resolve)=>{
710
- this.prodcutInfo = '';
711
- this.prodcutContKey = Date.now();
712
-
713
- jfbRootExec("getMallMediaProductContent", {
714
- vm: this,
715
- data: {
716
- product_id,
717
- xnamespace: this.xnamespace,
718
- }
719
- }).then(res=>{
720
- this.prodcutInfo = res.content;
721
- this.prodcutContKey = Date.now();
722
- resolve()
723
- }).catch(err=>{
724
- this.prodcutInfo = '';
725
- this.prodcutContKey = Date.now();
726
- resolve()
727
- })
728
- })
729
-
730
- },
731
-
732
- filterProdcutData(list = []){
733
- return this.$xdUniHelper.cloneDeep(list)
734
- .filter(item=>item.status === 'ok')
735
- .map(item=>{
736
- if(this.isShowDiscount === 'N') {
737
- item['show_prices'] = item['show_prices'].filter(it=>{
738
- return it.t !== 'U'
739
- })
740
- }
741
- return item;
742
- });
743
- },
744
-
745
- getList(cate){
746
- let data = {
747
- xnamespace: this.xnamespace,
748
- page_token: this.page_token,
749
- page_size: this.page_size,
750
- custom_category_id: cate.category_id,
751
- is_remove_same_prefix_name: 'Y'
752
- }
753
-
754
- //设置是否展示划线价格
755
- if(this.isShowDiscount==='Y') data.is_show_uprice = this.$xdUniHelper.multiplyFloatNumber(this.differ,100)
756
- else data.is_show_uprice = -1
757
- this.$xdShowLoading({});
758
- jfbRootExec("getMallMediaProductList", {
759
- vm: this,
760
- data: data
761
- }).then(res=>{
762
- this.productListOrg = this.$xdUniHelper.cloneDeep(res.list);
763
- this.productList = this.filterProdcutData(res.list);
764
-
765
- //获取内容
766
- if(this.productList.length > 0) {
767
- let item = this.productList[0];
768
- this.productId = item.product_id;
769
- this.handleProductOperate()
770
- }
771
- else {
772
- this.$xdHideLoading();
773
- this.blessingData = [];
774
- }
775
-
776
- }).catch(err=>{
777
- this.$xdHideLoading();
778
- this.productList = [ ]
779
- })
780
- },
781
- //==商品相关操作=======
782
-
783
- handleSubmit(){
784
- if(this.$configProject['isPreview']) return;
785
- let params = {
786
- namespace: this.xnamespace,
787
- product: {
788
- product_id: this.productId,
789
- num: 1,
790
- product_sku_id: 0,
791
- }
792
- }
793
- this.$xdShowLoading({});
794
- jfbRootExec("nowMallMediaBuyPay", {
795
- vm: this,
796
- data: params
797
- }).then(res => {
798
- this.$xdHideLoading();
799
- if(!this.productInfoPath) console.warn('参数为空')
800
- if(this.$configProject['isPreview'] || !this.productInfoPath) return;
801
- this.$nextTick(() => {
802
- let data = {...this.getFromData(),order_id: res.cart_order_id};
803
- let dataStr = this.$xdUniHelper.jsonToParams(data);
804
- this.$xdUniHelper.navigateTo({
805
- url: this.productInfoPath + `?${dataStr}`
806
- })
807
- })
808
- }).catch((err) => {
809
- this.$xdHideLoading()
810
- this.$xdLog.catch(err);
811
- })
812
- },
813
- getFromData(){
814
- //无form数据
815
- if(this.blessingData.length === 0) return {};
816
- let params = { product_id: this.productId}
817
- this.blessingData.map(item=>{
818
- params[item.id] = item['data'];
819
- });
820
- console.warn(JSON.stringify(params));
821
- return {
822
- blessing: Base64.encodeURI(JSON.stringify(params))
823
- }
824
- },
825
-
826
- handleIndex(){
827
- if(this.$configProject['isPreview'] || this.showIndex === 'N') return;
828
- this.$xdUniHelper.redirectTo({
829
- url: this.$settings.index
830
- },false)
831
- },
832
-
833
- onJfbBack(options) {
834
- console.log('event.onJfbBack', options)
835
- },
836
-
837
- onJfbCustomEvent({action, data}){
838
- if(action === 'baseHeader@search'){
839
- if(this.searchTimer) {
840
- clearTimeout(this.searchTimer);
841
- this.searchTimer = null;
842
- }
843
- this.searchTimer = setTimeout(()=>{
844
- this.keyword = data;
845
- this.getList();
846
- },1000)
847
- }
848
- },
849
- }
850
- }
851
-
852
- </script>
853
-
854
- <style scoped lang="less">
855
- @import "./JfbMallNetworkMediaLess.less";
856
-
857
- .jfb-mall-network-media {
858
- &__body{
859
- .media-tab {
860
- position: relative;
861
- z-index: 1;
862
- &-cont {
863
- position: fixed;
864
- left:0;
865
- right: 0;
866
-
867
- &.isPreview {
868
- position: relative;
869
- }
870
- }
871
- }
872
- .media-two {
873
- &-box {
874
- display: flex;
875
- justify-content: flex-start;
876
- white-space: nowrap;
877
- padding: 16rpx 0 30rpx 32rpx;
878
- }
879
- &-item {
880
- margin-right: 16rpx;
881
- padding: 0 16rpx 0;
882
- position: relative;
883
-
884
- & > view:first-child {
885
- width: 96rpx;
886
- height: 96rpx;
887
- display: flex;
888
- justify-content: center;
889
- align-items: center;
890
-
891
- & > view {
892
- width: 100%;
893
- height: 100%;
894
- border-radius: var(--g-comp-style-radius-w);
895
- overflow: hidden;
896
- box-sizing: border-box;
897
- border: 2rpx solid #fff;
898
- }
899
-
900
- & image {
901
- max-width:100%;
902
- max-height: 100%;
903
- }
904
- }
905
- & > view:nth-child(3) {
906
- position: absolute;
907
- left: 0;
908
- right: 0;
909
- max-width: calc(100% + 32rpx);
910
- bottom: 0;
911
- overflow: hidden;
912
- font-size: 24rpx;
913
- word-break: break-all;
914
- white-space: wrap;
915
- font-weight: 400;
916
- text-align: center;
917
- height: 40rpx;
918
- line-height: 40rpx;
919
- border-radius: 30rpx;
920
- }
921
- & > view:nth-child(4) {
922
- width: 42rpx;
923
- height: 30rpx;
924
- position: absolute;
925
- bottom: -32rpx;
926
- left: 50%;
927
- transform: translateX(-50%);
928
- display: flex;
929
- justify-content: flex-start;
930
- align-items: flex-start;
931
- & > image {
932
- width: 100%;
933
- height: 100%;
934
- }
935
- }
936
- &:last-child {
937
- margin-right: 0;
938
- }
939
-
940
- }
941
-
942
- &-name-hold {
943
- height: 40rpx;
944
- line-height: 40rpx;
945
- margin-top: 8rpx;
946
- }
947
- }
948
-
949
-
950
-
951
- .media-content {
952
- margin: 0 16rpx 16rpx;
953
- }
954
-
955
- .media-no-data {
956
- margin: 0 16rpx 16rpx;
957
- background-color: #fff;
958
- border-radius: 16rpx;
959
- }
960
-
961
- .media-input {
962
- border-radius: 16rpx;
963
- background: rgba(255, 255, 255, 1);
964
- padding: 24rpx;
965
-
966
- &-tip {
967
- color: var(--g-theme-dangerColor);
968
- line-height: 30rpx;
969
- font-size: 24rpx;
970
- margin-top: 16rpx;
971
- }
972
- &-item {
973
- margin-bottom: 32rpx;
974
- &:last-child {
975
- margin-bottom: 0;
976
- }
977
-
978
- & > input {
979
- padding: 20rpx;
980
- background-color: #fff;
981
- border: 1px solid #ccc;
982
- height: 40rpx;
983
- line-height: 40rpx;
984
- border-radius: 16rpx;
985
- font-size: 28rpx;
986
- }
987
-
988
- }
989
- }
990
-
991
- .media-three {
992
- &-box {
993
- display: flex;
994
- justify-content: space-between;
995
- white-space: nowrap;
996
- min-width: fit-content;
997
- box-sizing: border-box;
998
- padding: 24rpx 0;
999
- }
1000
- &-item {
1001
- flex-shrink: 0;
1002
- flex: 1;
1003
- text-align: center;
1004
- height: 56rpx;
1005
- line-height: 56rpx;
1006
- font-size: 28rpx;
1007
- font-weight: 500;
1008
- color: #999;
1009
- position: relative;
1010
- margin-right: 48rpx;
1011
-
1012
- &:last-child {
1013
- margin-right: 0;
1014
- }
1015
-
1016
- & > view:first-child {
1017
- line-height: 56rpx;
1018
- }
1019
- & > view:nth-child(2) {
1020
- background-color: var(--g-theme-mainColor);
1021
- height: 6rpx;
1022
- width: 60rpx;
1023
- position: absolute;
1024
- left: 50%;
1025
- bottom: 0;
1026
- transform: translateX(-50%);
1027
- border-radius: 6rpx;
1028
- }
1029
-
1030
- &.active {
1031
- & > view:first-child {
1032
- color: #333;
1033
- }
1034
- }
1035
-
1036
- }
1037
- }
1038
- .media-product-nodata {
1039
- padding: 24rpx;
1040
- border-radius: var(--g-comp-radius);
1041
- overflow: hidden;
1042
- background: rgba(255, 255, 255, 1);
1043
- margin-bottom: 24rpx;
1044
- height: 700rpx;
1045
- }
1046
- .media-product {
1047
- padding: 24rpx;
1048
- border-radius: var(--g-comp-radius);
1049
- overflow: hidden;
1050
- background: rgba(255, 255, 255, 1);
1051
- margin-bottom: 24rpx;
1052
- display: flex;
1053
- justify-content: flex-start;
1054
- align-content: center;
1055
- align-items: center;
1056
- flex-flow: wrap;
1057
-
1058
-
1059
-
1060
- &-item {
1061
- width: calc((100% - 48rpx)/3);
1062
- flex-shrink: 0;
1063
- margin-right: 24rpx;
1064
- box-sizing: border-box;
1065
- padding: 16rpx;
1066
- border-radius: 16rpx;
1067
- background: linear-gradient(135deg, #FFFFFF 0%, #F5F5F5 100%);
1068
- box-shadow: 0 0 8rpx rgba(0,0,0,.1);
1069
- margin-top:24rpx;
1070
- position:relative;
1071
-
1072
- &:nth-child(1),&:nth-child(2),&:nth-child(3) {
1073
- margin-top: 0;
1074
- }
1075
-
1076
- &.active {
1077
- & > view:nth-child(3) {
1078
- position: absolute;
1079
- left: 0;
1080
- right: 0;
1081
- top:0;
1082
- bottom:0;
1083
- border: 6rpx solid var(--g-theme-mainColor);
1084
- border-radius: 16rpx;
1085
- }
1086
- }
1087
-
1088
- & > view:first-child {
1089
- font-size: 28rpx;
1090
- color: #333;
1091
- height: 40rpx;
1092
- line-height: 40rpx;
1093
- overflow: hidden;
1094
- margin-bottom: 16rpx;
1095
- word-break: break-all;
1096
- word-wrap: break-word;
1097
- white-space: pre-line;
1098
- }
1099
-
1100
- &:nth-child(3n) {
1101
- margin-right: 0;
1102
- }
1103
- }
1104
-
1105
- }
1106
-
1107
- .media-detail {
1108
- border-radius: var(--g-comp-radius);
1109
- overflow: hidden;
1110
- background: rgba(255, 255, 255, 1);
1111
- & > view:first-child {
1112
- padding: 0 24rpx;
1113
- line-height: 76rpx;
1114
- font-size: 28rpx;
1115
- height: 76rpx;
1116
- color: #333;
1117
- border-bottom: 1px solid #f8f8f8;
1118
- }
1119
- & > view:nth-child(2) {
1120
- padding: 24rpx;
1121
- /deep/ img{
1122
- max-width: 100% !important;
1123
- height: auto !important;
1124
- }
1125
- /deep/ *{
1126
- max-width: 100% !important;
1127
- }
1128
- }
1129
- }
1130
-
1131
- .media-btn {
1132
- position: fixed;
1133
- bottom: 0;
1134
- left: 0;
1135
- background: #fff;
1136
- z-index: 1;
1137
-
1138
- & > view {
1139
- padding: 16rpx 32rpx;
1140
- height: 84rpx;
1141
- display: flex;
1142
- justify-content: space-between;
1143
- align-items: center;
1144
- font-size: unit(28, rpx);
1145
- }
1146
-
1147
- &-index {
1148
- display: flex;
1149
- justify-content: flex-start;
1150
- align-items: center;
1151
- flex-flow: wrap;
1152
- width: 60rpx;
1153
- & > view {
1154
- width: 100%;
1155
- flex-shrink: 0;
1156
- text-align: center;
1157
- font-size: 24rpx;
1158
- color: #999;
1159
- }
1160
- }
1161
- }
1162
- }
1163
- }
1164
- </style>