jufubao-base 1.0.63-beta203 → 1.0.63-beta204

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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "jufubao-base",
3
- "version": "1.0.63-beta203",
3
+ "version": "1.0.63-beta204",
4
4
  "private": false,
5
5
  "description": "聚福宝业务组件基础插件包",
6
6
  "main": "index.js",
@@ -285,7 +285,7 @@ export default {
285
285
  list: [
286
286
  {"label": "一行", "value": 1},
287
287
  {"label": "两行", "value": 2},
288
- {"label": "两行", "value": 3},
288
+ {"label": "三行", "value": 3},
289
289
  ]
290
290
  },
291
291
  {
@@ -8,22 +8,21 @@ import console from "@dcloudio/uni-h5/src/core/helpers/console";
8
8
  export default {
9
9
  style:[],
10
10
  content:(params)=>{
11
- if(!params['isCarousel']) params['isCarousel'] = 1;
12
11
  return [
13
12
  {
14
- label: '广告位置配置:', //label
13
+ label: '视频位置配置:', //label
15
14
  ele: 'xd-site-poster', //package 名称
16
- valueKey: 'poster', //form[valueKey]
15
+ valueKey: 'video', //form[valueKey]
17
16
  className: 'input80',
18
- value: params.poster || {},
17
+ value: params.video || {},
19
18
  setting: {
20
19
  count: 1,
21
- scene: {label: '广告', value: 'normal'}
20
+ scene: {label: '视频', value: 'video'}
22
21
  },
23
22
  handleCustom({action, data}) {
24
23
  //设置场景参数
25
24
  if(data) {
26
- data.params = Object.assign({}, {scene: 'normal'}, data.params || {})
25
+ data.params = Object.assign({}, {scene: 'video'}, data.params || {})
27
26
  }
28
27
 
29
28
  //获取显示内容
@@ -216,30 +215,34 @@ export default {
216
215
  inline: false,
217
216
  notice: '',
218
217
  rules: [
219
- {required: true, message: '请选择广告位置', trigger: 'change'},
218
+ {required: true, message: '请选择视频位置', trigger: 'change'},
220
219
  ],
221
220
  },
222
- params.poster && params.poster['type'] !== '1' && {
223
- label: '广告位内容间距设置:',
224
- ele: 'el-input',
225
- type: 'number',
226
- valueKey: 'padding',
227
- value: params.padding || 0,
228
- className: 'input40',
229
- placeholder: '请广告位内容间距设置',
230
- notice: '在使用通屏显示类型广告位之外的样式时,该属性生效,单位:像素(px)',
231
- inline: false,
221
+ {
222
+ label: '视频位边距设置:',
223
+ ele: 'xd-margin-padding',
224
+ valueKey: 'margin',
225
+ value: params.margin || null,
226
+ disabled: false,
227
+ setting: {
228
+ type: 'margin',
229
+ },
230
+ placeholder: '请设置视频位边距设置',
231
+
232
232
  },
233
233
  {
234
- label: '广告圆角设置:',
234
+ label: '内容圆角设置:',
235
235
  ele: 'xd-site-select-list',
236
236
  valueKey: 'radius',
237
- value: params['radius'] || '20',
238
- placeholder: '请选择广告圆角设置',
237
+ value: params['radius'] || '0',
238
+ placeholder: '请选择内容圆角设置',
239
239
  multiple: false,
240
240
  className: 'input80',
241
241
  handleCustom({action, data}) {
242
- XdBus.getParentApi('getOptionsSettingList')({setting_id: 'edtix_style_radius'})
242
+ XdBus.getParentApi('getOptionsSettingList')({
243
+ setting_id: 'edtix_style_radius',
244
+ key: Date.now()
245
+ })
243
246
  .then(res => {
244
247
  data.cb(res.list)
245
248
  })
@@ -248,96 +251,6 @@ export default {
248
251
  });
249
252
  },
250
253
  },
251
- {
252
- label: '广告位边距设置:',
253
- ele: 'xd-margin-padding',
254
- valueKey: 'margin',
255
- value: params.margin || null,
256
- disabled: false,
257
- setting: {
258
- type: 'margin',
259
- },
260
- placeholder: '请设置广告位边距设置',
261
-
262
- },
263
- {
264
- label: '广告位置使用张数:',
265
- ele: 'el-input',
266
- type: 'number',
267
- valueKey: 'number',
268
- value: params.number || 1,
269
- placeholder: '请输入广告位置使用张数',
270
- className: 'input40',
271
- unit: '张',
272
- rules: [
273
- {
274
- required: true,
275
- message: '请输入广告位置使用张数',
276
- trigger: 'blur'
277
- },
278
- ]
279
- },
280
- {
281
- label: '广告位显示方式:',
282
- ele: 'xd-radio',
283
- valueKey: 'isCarousel',
284
- value: params['isCarousel'] || 1,
285
- rules: [
286
- {required: true, message: '请选择广告位显示方式', trigger: ['blur', 'change']}
287
- ],
288
- list: [
289
- {"label": "焦点图显示", "value": 1},
290
- {"label": "轮播图显示", "value": 2},
291
- ]
292
- },
293
- params['isCarousel'] === 2 && {
294
- label: '广告位轮播周期:',
295
- ele: 'el-input',
296
- type: 'number',
297
- isKey: true,
298
- valueKey: 'carouselTime',
299
- value: params.carouselTime || 5,
300
- placeholder: '请输入广告位轮播周期,单位秒',
301
- className: 'input40',
302
- unit: '秒',
303
- rules: [
304
- {
305
- required: true,
306
- message: '请输入广告位置高度',
307
- trigger: 'blur'
308
- },
309
- ]
310
- },
311
- params['isCarousel'] === 2 && {
312
- label: '广告显示dot类型:', //label
313
- ele: 'xd-select-list', //package 名称
314
- valueKey: 'dot_type', //form[valueKey]
315
- value: params['dot_type'] || 'dot', //v-model
316
- placeholder: '请选择广告显示dot类型',
317
- multiple: false,
318
- className: 'input80',
319
- list:[
320
- {label: '显示圆点', value: 'dot'},
321
- {label: '显示长方形', value: 'default'},
322
- {label: '显示圆点+长条', value: 'round'},
323
- {label: '显示索引+标题', value: 'nav'},
324
- {label: '显示索引', value: 'indexes'},
325
- ],
326
- notice: '在使用非通屏显示类型广告位之外的样式时,<span style="color: red">(显示索引+标题|显示索引)</span>使用"<span style="color: red">显示圆点</span>"',
327
- inline: false,
328
- },
329
- params['isCarousel'] === 2 && {
330
- label: '广告位内容显示行数:',
331
- ele: 'xd-radio',
332
- valueKey: 'rows',
333
- value: params.rows || 1,
334
- list: [
335
- {"label": "一行", "value": 1},
336
- {"label": "两行", "value": 2},
337
- ]
338
- },
339
-
340
-
341
254
  ].filter(i=>i)
342
255
  },
343
256
  advanced: [
@@ -1,87 +1,56 @@
1
1
  <template>
2
2
  <view
3
- class="jfb-base-poster"
3
+ class="jfb-base-video"
4
4
  @click="handleEditxSelect"
5
5
  :class="{ editx : isEditx && active }"
6
6
  >
7
7
  <!--#ifdef H5-->
8
8
  <view
9
- class="jfb-base-poster__edit"
9
+ class="jfb-base-video__edit"
10
10
  :class="{ editx : isEditx && active }"
11
11
  v-if="isEditx && active"
12
12
  >
13
- <view class="jfb-base-poster__edit-icon" @click="delEdit">删除</view>
13
+ <view class="jfb-base-video__edit-icon" @click="delEdit">删除</view>
14
14
  </view>
15
15
  <!-- #endif -->
16
- <view
17
- class="jfb-base-poster__body"
18
- v-if="noData"
19
- :style="{
20
- margin: margin
21
- }
22
- ">
23
- <!--一分屏-->
24
- <template v-if="posterType === '1'">
25
- <view
26
- v-if="isCarousel === false"
27
- class="jfb-base-poster__one notCarousel"
28
- :style="{
29
- width: width + 'rpx',
30
- height: height + 'rpx',
31
- borderRadius: (posterType === '1' ? radius: 0) + 'rpx',
32
- }"
33
- >
34
- <view @click="handleClick(info[0])">
35
- <image
36
- :style="{
37
- width: width + 'rpx',
38
- height: height + 'rpx'
39
- }"
40
- :src="info[0].image_url"
41
- mode="aspectFill"
42
- ></image>
43
- </view>
44
- </view>
45
- <view
46
- v-else
47
- class="jfb-base-poster__one carousel"
48
- :style="{
49
- width: width + 'rpx',
50
- height: height + 'rpx',
51
- borderRadius: (posterType === '1' ? radius: 0) + 'rpx',
52
- }"
53
- >
54
- <xd-swiper-dot
55
- :current="current"
56
- :info="info"
57
- field="content_name"
58
- :mode="mode"
59
- :dots-styles="dotStyleData"
60
- >
61
- <xd-swiper
62
- :indicator-dots="false"
63
- :list="info"
64
- :current="current"
65
- :width=" width + 'rpx'"
66
- :height="height + 'rpx'"
67
- @onClickItem="handleClick"
68
- @animationfinish="handleAnimationfinish"
69
- >
70
- <template slot-scope="{ item, index}">
71
- <image :src="item['image_url']" mode="aspectFill"></image>
72
- </template>
73
- </xd-swiper>
74
- </xd-swiper-dot>
16
+ <view class="jfb-base-video__body">
17
+ <view class="float"></view>
18
+ <view
19
+ class="video-box"
20
+ :style="{
21
+ width: contentWidth + 'rpx',
22
+ height:contentHeight + 'rpx',
23
+ margin: outMargin
24
+ }"
25
+ >
26
+ <view
27
+ class="thumb"
28
+ v-if="!playStatus"
29
+ :style="{borderRadius: radius + 'rpx'}"
30
+ >
31
+ <image :src="imageUrl" />
32
+ <view @click="handlePlay()">
33
+ <xd-font-icon
34
+ :icon="iconFont"
35
+ size="100"
36
+ color="#fff"
37
+ ></xd-font-icon>
75
38
 
76
- <view v-if="isPreview" class="carousel-mask"></view>
77
- </view>
78
- </template>
79
- <!--一分屏-->
80
- <more-screen
81
- v-if="posterType !== '1'"
82
- :config="getConfig"
83
- :content="info"
84
- ></more-screen>
39
+ </view>
40
+ </view>
41
+ <view
42
+ class="video"
43
+ :style="{borderRadius: radius + 'rpx'}"
44
+ v-else
45
+ >
46
+ <video
47
+ :src="videoUrl"
48
+ :autoplay="autoplay === 'Y'"
49
+ @ended="handleEnd()"
50
+ @error="handleError"
51
+ ></video>
52
+ </view>
53
+ </view>
85
54
  </view>
86
55
  </view>
87
56
  </template>
@@ -95,317 +64,144 @@
95
64
  import extsMixins from "@/mixins/extsMixins"
96
65
  import { getContainerPropsValue } from "@/utils/xd.base";
97
66
  import getServiceUrl from '@/common/getServiceUrl'
98
- import XdImage from "@/components/XdImage/XdImage";
99
- import XdSwiper from "@/components/XdSwiper/XdSwiper";
100
- import MoreScreen from "./MoreScreen";
101
- import XdSwiperDot from "./XdSwiperDot";
67
+
102
68
 
103
69
  export default {
104
70
  name: "JfbBaseVideo",
105
71
  components: {
106
72
  XdFontIcon,
107
- XdImage,
108
- XdSwiper,
109
- MoreScreen,
110
- XdSwiperDot
111
73
  },
112
74
  mixins: [componentsMixins,extsMixins,JfbBaseVideoMixin],
113
75
  data() {
114
76
  return {
115
77
  selfMask: true,
116
- params: {},
78
+ page_size: 1,
79
+ options:{},
117
80
 
118
- //Swiper 配置
119
- mode:'round', //default 、round 、nav 、dot, indexes
120
- current: 0,
121
- poster: null,
122
- posterPosition: null,
123
- posterType: '1',//分屏模式
124
- showType: '', //广告显示方式
125
- isCarousel: true, //是否轮播图
126
- carouselTime: 5,//轮播图轮播周期
127
- useNumber: null, //广告使用张数
128
- height: 0, //广告高度
129
- width: 0, //广告高度
130
- padding: 0, //广告内容之间间距
131
- rows: 1, //四分屏起作用
132
- radius: 0,
133
- timer: null,
134
- info: [],
135
- mS: {
136
- top: 0,
137
- bottom: 0,
138
- left: 0,
139
- right: 0
140
- },
141
- isPreview: false,
142
- noData:false,
81
+ //css
82
+ width: 0,
83
+ height: 0,
84
+ video: {},
85
+ margin: {},
86
+ radius:0,
87
+
88
+ //play
89
+ imageUrl: '//img.jufubao.cn/vedio/700.gif',
90
+ videoUrl: '//img.jufubao.cn/vedio/bg.mp4',
91
+ playStatus: false,
92
+ autoplay: 'N',
143
93
 
144
- test: {
145
- "content_id": "KpBbUKdj4aBejwe7Fh1ki",
146
- "position_id": "QCk3PmoyQmOWRP1SxnYR3",
147
- "partner_id": 0,
148
- "site_id": "",
149
- "content_name": "测试.",
150
- "image_url": "//dummyimage.com/200x200",
151
- "redirect_type": "EMP",
152
- "redirect_type_name": "无链接",
153
- "redirect_data": "",
154
- "sort": "",
155
- "status": "",
156
- "start_time": "",
157
- "end_time": "",
158
- "op_user_id": "",
159
- "created_time": 0,
160
- "updated_time": 0
161
- }
162
94
  }
163
95
  },
164
96
  computed: {
165
- getConfig(){
166
- let cell = this.posterType === '2' ? 2: (this.posterType === '3' ? 3: 4);
167
- let spacing = Math.floor((cell - 1) * this.padding * this.$rpxNum);
168
- let viewWidth = uni.getSystemInfoSync().safeArea.width - ((this.mS.right || 0) + (this.mS.left || 0)) * this.$rpxNum - spacing;
169
- if(this.$configProject.isPreview) viewWidth -= 2;
170
- let width = Math.floor(viewWidth / cell);
171
- let height = this.height * width / this.width;
172
- return {
173
- mode: this.getMode,
174
- dotStyleData: this.dotStyleData,
175
- poster: this.poster,
176
- showType: this.showType,
177
- isCarousel: this.isCarousel,
178
- carouselTime: this.carouselTime,
179
- radius: this.radius,
180
- padding: this.padding,
181
- rows: this.rows,
182
- cell,
183
- height,
184
- width
185
- }
186
- },
187
- margin(){
188
- return `${this.mS.top||0}rpx ${this.mS.right||0}rpx ${this.mS.bottom||0}rpx ${this.mS.left||0}rpx`
189
- },
190
- getMode(){
191
- let mode = this.mode;
192
- if (this.posterType !== '1') {
193
- if (this.mode === 'nav'
194
- || this.mode === 'indexes') {
195
- mode = 'dot'
196
- }
197
- }
198
- return mode;
199
- },
200
- dotStyleData(){
201
- let alpha = 1;
202
- if(this.posterType === '1') alpha = 0.6;
97
+ iconFont(){
98
+ if(this.autoplay === 'N') return 'iconplayright'
99
+ if(this.autoplay === 'E') return 'iconshibai';
100
+ if(this.autoplay === 'R') return 'iconplayreplay';
101
+ },
102
+ contentWidth(){
103
+ let border = 0;
104
+ if(this.isPreview) border = 2;
105
+ return 750 - (this.margin.left + this.margin.right + border);
106
+ },
107
+ contentHeight(){
108
+ let border = 0;
109
+ if(this.isPreview) border = 2;
110
+ let winWidth = 750 - ((this.margin.left||0) + (this.margin.right||0) + border);
111
+ return winWidth * this.height/this.width;
112
+ },
203
113
 
204
- let selectedColor = `rgba(${color(this.mainColor).alpha(alpha).array().join(',')})`;
205
- console.log('selectedColor',selectedColor, this.mode, this.posterType);
206
- let style = {
207
- dot: {
208
- backgroundColor: 'rgba(166,166,166,.5)',
209
- border: '0px rgba(166,166,166,.5) solid',
210
- color: '#fff',
211
- selectedBackgroundColor: selectedColor,
212
- selectedBorder: `0px this.mainColor solid`
213
- },
214
- default: {
215
- width: 16,
216
- backgroundColor: 'rgba(200,200,200,.45)',
217
- border: '1px rgba(200,200,200,.45) solid',
218
- color: '#fff',
219
- selectedBackgroundColor: selectedColor,
220
- selectedBorder: `1px this.mainColor solid`
221
- },
222
- round: {
223
- backgroundColor: 'rgba(166,166,166,.5)',
224
- border: '0px rgba(166,166,166,.5) solid',
225
- color: '#fff',
226
- selectedBackgroundColor: selectedColor,
227
- selectedBorder: `0px this.mainColor solid`
228
- },
229
- nav: {
230
- backgroundColor: 'rgba(0,0,0,.5)',
231
- border: '1px rgba(0,0,0,.5) solid',
232
- color: '#fff',
233
- selectedBackgroundColor: 'rgba(255, 255, 255, 1)',
234
- selectedBorder: '1px rgba(255, 255, 255 1) solid'
235
- },
236
- indexes: {
237
- backgroundColor: 'rgba(0,0,0,.5)',
238
- border: '0px rgba(0,0,0,.5) solid',
239
- color: '#aaa',
240
- selectedBackgroundColor: 'rgba(0,0,0,.8)',
241
- selectedBorder: '0px rgba(0,0,0,.8) solid',
242
- selectedColor: '#fff',
243
- }
244
- }
245
- if(this.posterType !== '1') {
246
- if(this.mode === 'nav'
247
- || this.mode === 'indexes') {
248
- this.mode = 'dot'
249
- }
250
- }
251
- return style[this.mode]
252
- },
114
+ outMargin(){
115
+ let margin = `${this.margin.top !== null ? this.margin.top : 0}rpx`;
116
+ margin = `${margin} ${this.margin.right !== null ? this.margin.right : 0}rpx`;
117
+ margin = `${margin} ${this.margin.bottom !== null ? this.margin.bottom :0}rpx`;
118
+ margin = `${margin} ${this.margin.left !== null ? this.margin.left : 0}rpx`;
119
+ return margin;
120
+ }
253
121
  },
254
122
  watch: {
255
123
  container(value) {
256
124
  this.init(value);
257
125
  if(this.timer) clearTimeout(this.timer);
258
126
  this.timer = setTimeout(()=>{
259
- if (this.$configProject['isPreview']) this.onJfbLoad()
127
+ if (this.$configProject['isPreview']) this.onJfbLoad(this.options)
260
128
  }, 400)
261
129
  }
262
130
  },
263
131
  created() {
264
- this.init(this.container);
265
132
  this.isPreview = this.$configProject.isPreview;
133
+ this.init(this.container);
134
+
266
135
  },
267
136
  methods: {
268
- getTestData(){
269
- let temp = [];
270
- for (let i = 0; i< this.useNumber; i++) {
271
- let item = this.$xdUniHelper.cloneDeep(this.test);
272
- item.content_id = i;
273
- item.content_name = item.content_name + i;
274
- item.image_url = `//dummyimage.com/${this.width}x${this.height}`;
275
- temp.push(item)
276
- }
277
- return temp
278
- },
279
- handleAnimationfinish(e) {
280
- this.current = e.detail.current;
281
- },
282
- handleClick(item) {
283
- //内部链接跳转地址
284
- if (item.redirect_type === 'INN') {
285
- try {
286
- let url = JSON.parse(item.redirect_data);
287
- let params = '';
288
- if (item['redirect_params']) params = `?${item['redirect_params']}`;
289
- this.$xdUniHelper.navigateTo({
290
- url: url.page + params
291
- })
292
- } catch (e) {
293
- console.error(e)
294
- }
295
- }
296
-
297
- //外部链接
298
- if (item.redirect_type === 'URL') {
299
- let reg = /^(http:\/\/|https:\/\/|\/\/)+.+$/;
300
- //#ifdef MP-WEIXIN
301
- try {
302
- let url = JSON.parse(item.redirect_data);
303
- if (reg.test(url.url) && this.$configProject.extras.webview) {
304
- console.warn(`广告跳转外站: ${url.url}`)
305
- this.$xdUniHelper.navigateTo({
306
- url: `${this.$configProject.extras.webview}?seatUrl=${Base64.encodeURI(url.url)}`
307
- });
308
- } else {
309
- throw Error('地址错误')
310
- }
311
- } catch (e) {
312
- console.error(e)
313
- }
314
- //#endif
315
- //#ifdef H5
316
- try {
317
- let url = JSON.parse(item.redirect_data);
318
- if (reg.test(url.url)) {
319
- console.warn(`广告跳转外站: ${url.url}`);
320
- window.location.href = url.url;
321
- } else {
322
- throw Error('地址错误')
323
- }
324
- } catch (e) {
325
- console.error(e)
326
- }
327
- //#endif
328
-
329
- }
330
- },
331
- handleImage(list){
332
- return list.map(item => {
333
- return {
334
- ...item,
335
- image_url: getServiceUrl(item.image_url)
336
- }
337
- })
338
- },
339
- handleOne(list){
340
- this.info = this.handleImage(list);
341
- },
342
-
343
- getDefualtValue(key){
344
- if (key === 'margin') {
345
- return {top: 0, bottom: 0, left: 0, right: 0}
346
- }
347
- },
348
137
 
349
138
  /**
350
139
  * @description 监听事件变化
351
140
  * @param container {object} 业务组件对象自己
352
141
  */
353
142
  init(container) {
354
- this.poster = getContainerPropsValue(container, 'content.poster', {size:{width: 750, height: 160}, type: '1'});
355
- if (this.poster.type) {
356
- this.posterType = this.poster.type
357
- }
358
- if(this.poster.position) {
359
- this.posterPosition = this.poster.position
360
- }
143
+ this.video = getContainerPropsValue(container, 'content.video', {size:{width: 400, height: 300}, type: '1'});
144
+ this.margin = getContainerPropsValue(container, 'content.margin', {top:0, bottom:0, right:0, left: 0});
361
145
  this.radius = getContainerPropsValue(container, 'content.radius', 0);
362
- this.padding = getContainerPropsValue(container, 'content.padding', 0);
363
- this.rows = getContainerPropsValue(container, 'content.rows', 1);
364
- this.mS = getContainerPropsValue(container, 'content.margin', this.getDefualtValue('margin'));
365
-
366
- //content
367
- this.mode = getContainerPropsValue(container, 'content.dot_type', 'dot');
368
- this.isCarousel = getContainerPropsValue(container, 'content.isCarousel', 1) === 2;
369
- this.carouselTime = Number(getContainerPropsValue(container, 'content.carouselTime', 5)) * 1000;
370
- this.useNumber = getContainerPropsValue(container, 'content.number', 1);
371
-
372
- if(this.poster.size) {
373
- this.width = this.poster.size.width;
374
- this.height = this.poster.size.height;
146
+ if(this.video.size) {
147
+ this.width = this.video.size.width;
148
+ this.height = this.video.size.height;
375
149
  }
376
150
  },
377
151
 
378
152
  onJfbLoad(options) {
379
- this.params = options;
153
+ this.options = options;
380
154
  jfbRootExec('getListPosterContent', {
381
155
  vm: this,
382
156
  data: {
383
157
  page_id: this.pageAttr['page_id'], //页面ID
384
158
  container_id: this.containerId, //组件ID
385
- page_size: this.useNumber //可以不传
159
+ page_size: this.page_size //可以不传
386
160
  },
387
161
  })
388
162
  .then(res => {
389
- if(res.list.length === 0 && this.isPreview) {
390
- res.list = this.getTestData();
391
- }
392
-
393
- if (this.posterType === '1') this.handleOne(res.list);
394
- if (this.posterType === '2') this.handleOne(res.list);
395
- if (this.posterType === '3') this.handleOne(res.list);
396
- if (this.posterType === '4') this.handleOne(res.list);
397
- if(this.$configProject.isPreview) this.noData = true;
398
- else this.noData = res.list.length > 0;
163
+ if(res && res.list && res.list.length > 0) {
164
+ let {image_url, thumb} = res.list[0];
165
+ if(image_url) this.videoUrl = getServiceUrl(image_url);
166
+ if(thumb) this.imageUrl = getServiceUrl(thumb);
167
+ }
399
168
  })
400
169
  .catch(error => {
401
170
  console.error(error)
402
171
  })
403
172
  },
404
173
 
405
- onJfbUpdate(data) {
406
- this.onJfbLoad(this.params);
407
- }
174
+ onJfbUpdate() {
175
+ this.onJfbLoad(this.options);
176
+ },
408
177
 
178
+ handlePlay(){
179
+ if(this.autoplay === 'E') return;
180
+ this.playStatus = !this.playStatus;
181
+ this.autoplay = "Y";
182
+ },
183
+
184
+ handleEnd(){
185
+ setTimeout(()=>{
186
+ this.playStatus = !this.playStatus;
187
+ this.autoplay = "R";
188
+ }, 1000)
189
+ },
190
+
191
+ handleError(){
192
+ this.$xdConfirm({
193
+ title: '温馨提示',
194
+ content:'当前视频资源无法播放',
195
+ cancel: false,
196
+ confirmText:'我知道了',
197
+ zIndex:10000,
198
+ success:()=>{
199
+ this.playStatus = !this.playStatus;
200
+ this.autoplay = "R";
201
+ }
202
+ })
203
+
204
+ }
409
205
 
410
206
  }
411
207
  }
@@ -417,49 +213,50 @@
417
213
 
418
214
  .jfb-base-video {
419
215
  &__body{
420
- box-sizing: border-box;
421
- overflow: hidden;
422
- justify-content: center;
423
- align-items: center;
424
- display: flex;
216
+
217
+
425
218
  }
426
- &__one.notCarousel {
427
- position: relative;
428
- box-sizing: border-box;
429
- display: flex;
430
- justify-content: center;
431
- align-items: center;
432
- overflow: hidden;
433
219
 
220
+ }
434
221
 
435
- & > view {
436
- width: 100%;
437
- height: 100%;
438
- box-sizing: border-box;
222
+ .float {
223
+ height: 1px;
224
+ width: 100%;
225
+ overflow: hidden;
226
+ }
439
227
 
440
- & > image {
228
+ .video-box {
229
+ view.thumb {
230
+ height: 100%;
231
+ width: 100%;
232
+ position: relative;
233
+ overflow: hidden;
441
234
 
442
- }
443
- }
444
- }
235
+ & > view {
236
+ width: 120rpx;
237
+ height: 120rpx;
238
+ position: absolute;
239
+ top: 50%;
240
+ left: 50%;
241
+ margin-top: -60rpx;
242
+ margin-left:-60rpx;
243
+ }
445
244
 
446
- &__one.carousel {
447
- position: relative;
448
- box-sizing: border-box;
449
- display: flex;
450
- justify-content: center;
451
- align-items: center;
452
- overflow: hidden;
245
+ & > image {
246
+ height: 100%;
247
+ width: 100%;
248
+ }
249
+ }
453
250
 
454
- & .carousel-mask {
455
- position: absolute;
456
- left: 0;
457
- right: 0;
458
- top: 0;
459
- bottom: 0;
460
- background: rgba(0,0,0,0);
461
- }
462
- }
251
+ view.video {
252
+ overflow: hidden;
253
+ height: 100%;
254
+ width: 100%;
463
255
 
256
+ & video {
257
+ height: 100%;
258
+ width: 100%;
259
+ }
260
+ }
464
261
  }
465
262
  </style>
@@ -1,5 +1,3 @@
1
1
  'use strict';
2
2
 
3
- module.exports = {
4
- aaaa: {}
5
- }
3
+ module.exports = {}
@@ -1,281 +0,0 @@
1
- <template>
2
- <view class="sreen">
3
- <view
4
- class="sreen__box notCarousel"
5
- v-if="config.isCarousel === false"
6
- >
7
- <view
8
- v-for="(item,index) in list"
9
- :key="item['content_id']"
10
- :style="{
11
- borderRadius: config.radius + 'rpx',
12
- marginTop: index < config.cell ? 0 : config.padding + 'rpx',
13
- width: config.width + 'px',
14
- height: config.height + 'px',
15
- marginRight: (index+1) % config.cell === 0 ? 0: config.padding + 'rpx'
16
- }"
17
- @click="handleClick(item)"
18
- >
19
- <image
20
- :style="{
21
- width: width + 'px',
22
- height: height + 'px'
23
- }"
24
- :src="item.image_url"
25
- mode="widthFix"
26
- ></image>
27
- </view>
28
- </view>
29
- <view class="sreen__box carousel" v-if="config.isCarousel === true">
30
- <xd-swiper-dot
31
- :current="current"
32
- :info="list"
33
- field="content_name"
34
- :mode="config.mode"
35
- :dots-styles="config.dotStyleData"
36
- :style="{height:(getHeight + 46 * $rpxNum) + 'px'}"
37
- >
38
- <xd-swiper
39
- :indicator-dots="false"
40
- :interval="config.carouselTime"
41
- :list="list"
42
- :current="current"
43
- width="100%"
44
- :height="getHeight + 'px'"
45
- @onClickItem="handleClick"
46
- @animationfinish="handleAnimationfinish"
47
- >
48
- <template slot-scope="{ item, index}">
49
- <view
50
- class="sreen__box-list"
51
- :style="{
52
- height: getHeight + 'px'
53
- }"
54
- >
55
- <view
56
- v-for="(it, indext) in item"
57
- :key="it['content_id']"
58
- :style="{
59
- borderRadius: config.radius + 'rpx',
60
- width: config.width + 'px',
61
- height: config.height + 'px',
62
- marginRight: (indext+1) % config.cell === 0 ? 0: config.padding + 'rpx',
63
- marginTop: indext < config.cell ? 0 : config.padding + 'rpx',
64
- }"
65
- @click="handleClick(it)"
66
- >
67
- <image :style="{ width: width + 'px', height: height + 'px'}" :src="it.image_url" mode="widthFix"></image>
68
- </view>
69
- </view>
70
- </template>
71
- </xd-swiper>
72
- </xd-swiper-dot>
73
- </view>
74
- <view v-if="isPreview" class="carousel-mask"></view>
75
- </view>
76
- </template>
77
-
78
- <script>
79
- import XdSwiperDot from "./XdSwiperDot";
80
- import XdSwiper from "@/components/XdSwiper/XdSwiper";
81
-
82
- export default {
83
- components:{
84
- XdSwiperDot,
85
- XdSwiper
86
- },
87
- name: "MoreScreen",
88
- props: {
89
- config: {
90
- type: Object,
91
- required: true
92
- },
93
- content: {
94
- type: Array,
95
- required: true
96
- }
97
- },
98
- data() {
99
- return {
100
- timer: null,
101
- width: 0,
102
- height: 0,
103
- padding: 0,
104
- status: false,
105
- list: [],
106
- isPreview: false,
107
- current: 0,
108
- }
109
- },
110
- computed:{
111
- getHeight() {
112
- let height = this.height * this.config.rows;
113
- let padding = 0;
114
- if (this.config.rows === 2) padding = Number(this.config.padding) * this.$rpxNum;
115
- return height + padding;
116
- },
117
- },
118
- watch: {
119
- config() {
120
- this.init()
121
- },
122
- content() {
123
- this.init();
124
- },
125
-
126
- },
127
- created() {
128
- this.isPreview = this.$configProject.isPreview;
129
- this.init();
130
- },
131
- methods: {
132
- handleAnimationfinish(e) {
133
- this.current = e.detail.current;
134
- },
135
- init() {
136
- if (this.timer) clearTimeout(this.timer);
137
- this.timer = setTimeout(() => {
138
- this.width = Number(this.config.width);
139
- this.height = Number(this.config.height);
140
- this.padding = Number(this.config.padding);
141
-
142
- //静态图显示
143
- if(this.config.isCarousel === false) {
144
- this.list = this.content
145
- }
146
- //轮播图显示
147
- else {
148
- let num = 4 * this.config.rows;
149
- let maxPage = Math.ceil(this.content.length / num);
150
- let arr = [];
151
- for(let i =1 ; i <= maxPage; i++) {
152
- arr.push(this.$xdUniHelper.getLocalPaginationData(this.content, i, num))
153
- }
154
- this.list = arr;
155
- }
156
-
157
-
158
- }, 100)
159
- },
160
- handleClick(item) {
161
- //内部链接跳转地址
162
- if (item.redirect_type === 'INN') {
163
- try {
164
- let url = JSON.parse(item.redirect_data);
165
- let params = '';
166
- if (item['redirect_params']) params = `?${item['redirect_params']}`;
167
- this.$xdUniHelper.navigateTo({
168
- url: url.page + params
169
- })
170
- } catch (e) {
171
- console.error(e)
172
- }
173
- }
174
-
175
- //外部链接
176
- if (item.redirect_type === 'URL') {
177
- let reg = /^(http:\/\/|https:\/\/|\/\/)+.+$/;
178
- //#ifdef MP-WEIXIN
179
- try {
180
- let url = JSON.parse(item.redirect_data);
181
- if (reg.test(url.url) && this.$configProject.extras.webview) {
182
- console.warn(`广告跳转外站: ${url.url}`)
183
- this.$xdUniHelper.navigateTo({
184
- url: `${this.$configProject.extras.webview}?seatUrl=${Base64.encodeURI(url.url)}`
185
- });
186
- } else {
187
- throw Error('地址错误')
188
- }
189
- } catch (e) {
190
- console.error(e)
191
- }
192
- //#endif
193
- //#ifdef H5
194
- try {
195
- let url = JSON.parse(item.redirect_data);
196
- if (reg.test(url.url)) {
197
- console.warn(`广告跳转外站: ${url.url}`);
198
- window.location.href = url.url;
199
- } else {
200
- throw Error('地址错误')
201
- }
202
- } catch (e) {
203
- console.error(e)
204
- }
205
- //#endif
206
-
207
- }
208
- },
209
- }
210
- }
211
- </script>
212
-
213
- <style scoped lang="less">
214
- .sreen {
215
- width: calc(100% + 4px); /**防止宽度不够问**/
216
- position: relative;
217
-
218
- & .carousel-mask {
219
- position: absolute;
220
- left: 0;
221
- right: 0;
222
- top: 0;
223
- bottom: 0;
224
- background: rgba(0, 0, 0, 0);
225
- }
226
-
227
- &__box.notCarousel {
228
- display: flex;
229
- justify-content: flex-start;
230
- align-items: flex-start;
231
- flex-wrap: wrap;
232
- overflow: hidden;
233
- width: calc(100% + 20px); /**防止宽度不够问**/
234
-
235
- & > view {
236
- display: flex;
237
- justify-content: center;
238
- align-items: flex-start;
239
- flex-shrink: 0;
240
- box-sizing: border-box;
241
- overflow: hidden;
242
- }
243
- }
244
-
245
- &__box.carousel {
246
- display: flex;
247
- justify-content: flex-start;
248
- align-items: flex-start;
249
- flex-wrap: wrap;
250
- overflow: hidden;
251
- }
252
-
253
- & .sreen__box-list {
254
- width: calc(100% + 20px); /**防止宽度不够问**/
255
- display: flex;
256
- justify-content: flex-start;
257
- align-items: flex-start;
258
- flex-wrap: wrap;
259
- overflow: hidden;
260
-
261
- & view {
262
- display: flex;
263
- justify-content: center;
264
- align-items: flex-start;
265
- flex-shrink: 0;
266
- box-sizing: border-box;
267
- overflow: hidden;
268
-
269
- &:nth-child(4n) {
270
- margin-right: 0 !important;
271
- }
272
-
273
- & > image {
274
-
275
- }
276
- }
277
- }
278
- }
279
-
280
-
281
- </style>
@@ -1,234 +0,0 @@
1
- <template>
2
- <view class="uni-swiper__warp">
3
- <slot />
4
- <view v-if="mode === 'default'" :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box" key='default'>
5
- <view v-for="(item,index) in info" @click="clickItem(index)" :style="{
6
- 'width': (index === current? dots.width*1.7: dots.width ) + 'px','height':dots.width*(2/5) +'px' ,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border-radius':'0px'}"
7
- :key="index" class="uni-swiper__dots-item uni-swiper__dots-bar" />
8
- </view>
9
- <view v-if="mode === 'dot'" :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box" key='dot'>
10
- <view v-for="(item,index) in info" @click="clickItem(index)" :style="{
11
- 'width': dots.width + 'px','height':dots.height +'px' ,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border':index !==current ? dots.border:dots.selectedBorder}"
12
- :key="index" class="uni-swiper__dots-item" />
13
- </view>
14
- <view v-if="mode === 'round'" :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box" key='round'>
15
- <view v-for="(item,index) in info" @click="clickItem(index)" :class="[index === current&&'uni-swiper__dots-long']" :style="{
16
- 'width':(index === current? dots.width*3:dots.width ) + 'px','height':dots.height +'px' ,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border':index !==current ? dots.border:dots.selectedBorder}"
17
- :key="index" class="uni-swiper__dots-item " />
18
- </view>
19
- <view v-if="mode === 'nav'" key='nav' :style="{'background-color':dotsStyles.backgroundColor,'bottom':'0'}" class="uni-swiper__dots-box uni-swiper__dots-nav">
20
- <text :style="{'color':dotsStyles.color}" class="uni-swiper__dots-nav-item">{{ (current+1)+"/"+info.length }}</text>
21
- </view>
22
- <view v-if="mode === 'indexes'" key='indexes' :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box">
23
- <view v-for="(item,index) in info" @click="clickItem(index)" :style="{
24
- 'width':dots.width + 'rpx','height':dots.height +'rpx' ,'color':index === current?dots.selectedColor:dots.color,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border':index !==current ? dots.border:dots.selectedBorder}"
25
- :key="index" class="uni-swiper__dots-item uni-swiper__dots-indexes"><text class="uni-swiper__dots-indexes-text">{{ index+1 }}</text></view>
26
- </view>
27
- </view>
28
- </template>
29
-
30
- <script>
31
-
32
- /**
33
- * XdSwiperDot 轮播图指示点
34
- * @description 自定义轮播图指示点
35
- * @tutorial https://ext.dcloud.net.cn/plugin?id=284
36
- * @property {Number} current 当前指示点索引,必须是通过 `swiper` 的 `change` 事件获取到的 `e.detail.current`
37
- * @property {String} mode = [default|round|nav|indexes] 指示点的类型
38
- * @value defualt 默认指示点
39
- * @value round 圆形指示点
40
- * @value nav 条形指示点
41
- * @value indexes 索引指示点
42
- * @property {String} field mode 为 nav 时,显示的内容字段(mode = nav 时必填)
43
- * @property {String} info 轮播图的数据,通过数组长度决定指示点个数
44
- * @property {Object} dotsStyles 指示点样式
45
- * @event {Function} clickItem 组件触发点击事件时触发,e={currentIndex}
46
- */
47
-
48
- export default {
49
- name: 'XdSwiperDot',
50
- emits:['clickItem'],
51
- props: {
52
- info: {
53
- type: Array,
54
- default () {
55
- return []
56
- }
57
- },
58
- current: {
59
- type: Number,
60
- default: 0
61
- },
62
- dotsStyles: {
63
- type: Object,
64
- default () {
65
- return {}
66
- }
67
- },
68
- // 类型 :default(默认) indexes long nav
69
- mode: {
70
- type: String,
71
- default: 'default'
72
- },
73
- // 只在 nav 模式下生效,变量名称
74
- field: {
75
- type: String,
76
- default: ''
77
- }
78
- },
79
- data() {
80
- return {
81
- dotsSource: {
82
- width: 8,
83
- height: 8,
84
- bottom: 7,
85
- color: '#fff',
86
- backgroundColor: 'rgba(0, 0, 0, .3)',
87
- border: '1px rgba(0, 0, 0, .3) solid',
88
- selectedBackgroundColor: '#333',
89
- selectedBorder: '1px rgba(0, 0, 0, .9) solid'
90
- },
91
- dots: { }
92
- }
93
- },
94
- watch: {
95
- dotsStyles(newVal) {
96
- this.init(newVal)
97
- },
98
- mode() {
99
- this.init(this.dotsStyles)
100
- }
101
-
102
- },
103
- created() {
104
- this.init(this.dotsStyles)
105
- },
106
- methods: {
107
- clickItem(index) {
108
- this.$emit('clickItem', index)
109
- },
110
-
111
- init(value){
112
- let dot = {};
113
- if (this.mode === 'indexes') {
114
- dot = {
115
- width: 34,
116
- height: 34,
117
- }
118
- }
119
- this.dots = Object.assign(
120
- JSON.parse(JSON.stringify(this.dotsSource)),
121
- JSON.parse(JSON.stringify(value)),
122
- dot
123
- )
124
- }
125
-
126
- }
127
- }
128
- </script>
129
-
130
- <style lang="scss" scoped>
131
- .uni-swiper__warp {
132
- /* #ifndef APP-NVUE */
133
- display: flex;
134
- /* #endif */
135
- flex: 1;
136
- flex-direction: column;
137
- position: relative;
138
- overflow: hidden;
139
- }
140
-
141
- .uni-swiper__dots-box {
142
- position: absolute;
143
- bottom: 10px;
144
- left: 0;
145
- right: 0;
146
- /* #ifndef APP-NVUE */
147
- display: flex;
148
- /* #endif */
149
- flex: 1;
150
- flex-direction: row;
151
- justify-content: center;
152
- align-items: center;
153
- }
154
-
155
- .uni-swiper__dots-item {
156
- width: 8px;
157
- border-radius: 100px;
158
- margin-left: 6px;
159
- background-color: $uni-bg-color-mask;
160
- /* #ifndef APP-NVUE */
161
- cursor: pointer;
162
- /* #endif */
163
- /* #ifdef H5 */
164
- // border-width: 5px 0;
165
- // border-style: solid;
166
- // border-color: transparent;
167
- // background-clip: padding-box;
168
- /* #endif */
169
- // transition: width 0.2s linear; 不要取消注释,不然会不能变色
170
- }
171
-
172
- .uni-swiper__dots-item:first-child {
173
- margin: 0;
174
- }
175
-
176
- .uni-swiper__dots-default {
177
- border-radius: 100px;
178
- }
179
-
180
- .uni-swiper__dots-long {
181
- border-radius: 50px;
182
- }
183
-
184
- .uni-swiper__dots-bar {
185
- border-radius: 50px;
186
- }
187
-
188
- .uni-swiper__dots-nav {
189
- bottom: 20rpx!important;
190
- height: 38rpx;
191
- line-height: 38rpx;
192
- position: absolute;
193
- right: 0;
194
- left: initial;
195
- /* #ifndef APP-NVUE */
196
- display: flex;
197
- /* #endif */
198
- flex: 1;
199
- flex-direction: row;
200
- justify-content: flex-start;
201
- align-items: center;
202
- background-color: rgba(0, 0, 0, 0.5);
203
- border-radius: 6rpx 0 0 6rpx;
204
-
205
- & > text {
206
- font-size: 20rpx;
207
- padding: 0 10px!important;
208
- margin: 0;
209
- text-align: center;
210
- }
211
- }
212
-
213
- .uni-swiper__dots-nav-item {
214
- /* overflow: hidden;
215
- text-overflow: ellipsis;
216
- white-space: nowrap; */
217
- font-size: $uni-font-size-base;
218
- color: #fff;
219
- margin: 0 15px;
220
- }
221
-
222
- .uni-swiper__dots-indexes {
223
- /* #ifndef APP-NVUE */
224
- display: flex;
225
- /* #endif */
226
- // flex: 1;
227
- justify-content: center;
228
- align-items: center;
229
- }
230
-
231
- .uni-swiper__dots-indexes-text {
232
- font-size: $uni-font-size-sm;
233
- }
234
- </style>