videoBoxW.vue
3.57 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<template>
<div class="video-box-w" v-if="videoBoxs">
<div class="box">
<div class="bg">
<img v-lazy="videoBoxs.img" class="img" />
</div>
<div class="video-box">
<div class="poster-box" @click="playStart">
<div class="poster-img-box">
<img :src="videoBoxs.video_img" class="poster-img" />
</div>
<div class="play-img-box">
<img :src="playImg" class="play-img" />
</div>
</div>
</div>
</div>
<div class="list-box" v-if="videoBoxs.list && videoBoxs.list.length">
<div class="scroll-box" ref="scrollBox">
<div class="box" :style="'width: ' + scrollItemBox + 'vw'">
<div class="item" v-if="item.simg && item.title && item.price" v-for="(item, index) in videoBoxs.list" :key="index">
<div class="a-link" @click="toDetail(item)">
<div class="img-box">
<img v-lazy="item.simg" class="img" />
</div>
<div class="title">
{{item.title}}
</div>
<div class="prices" v-if="parseFloat(item.prices) > parseFloat(item.price)">
￥{{item.prices}}
</div>
<div class="prices" v-else>
</div>
<div class="price">
￥{{item.price}}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
// 引入组件
import BScroll from "better-scroll";
export default {
data() {
return {
playImg: "static/img/play.png",
basicWidth: 100,
scrollItemBox: 100
}
},
props: ["videoBoxs"],
methods: {
/**
* 跳转详情页
* @param {object} goods [商品详情对象]
*/
toDetail(goods) {
if (typeof this.videoBoxs.funcs === "object" && typeof this.videoBoxs.funcs.toDetail === "function") {
this.videoBoxs.funcs.toDetail(goods);
}
},
/**
* 播放视频
*/
playStart() {
// App内，直接跳播放器，不做其他处理
if (this.isCNLive.value) {
// 跳转参数
let goods = {
type: "22",
to: this.videoBoxs.video,
shop_type: ""
};
// 调用通用跳转接口，调起视频播放
this.toDetail(goods);
}
},
/**
* 设置横向滚动
* @param {object} wrapper [需要设置滚动的对象]
*/
setScrollBox(wrapper) {
// box滚动元素宽度，item对象
let scrollItemBox = 0;
let clientWidth = wrapper.clientWidth;
let multiple = clientWidth / 750;
let childrens = wrapper.children[0].children;
// 遍历子元素，获取box宽度
for (let i = 0; i < childrens.length; i++) {
scrollItemBox += childrens[i].clientWidth;
}
// 根据屏幕比例计算实际设置vw值
// scrollItemBox = (scrollItemBox + ((30 * multiple * (childrens.length - 1)))) / clientWidth * this.basicWidth;
scrollItemBox = (scrollItemBox / clientWidth * this.basicWidth);
// 判断scrollItemBox值，更新this.scrollItemBox宽度
if (scrollItemBox > this.basicWidth) {
this.$set(this, "scrollItemBox", scrollItemBox);
} else {
this.$set(this, "scrollItemBox", this.basicWidth);
}
}
},
watch: {
/**
* 监听横向滚动数据加载
*
*/
"videoBoxs.list"(newVal, oldVal) {
// 判断是否有数据
if (typeof newVal === "object" && newVal.length > 0) {
// 下一周期处理
this.$nextTick(function() {
// 设置横向滚动
this.setScrollBox(this.$refs.scrollBox);
});
}
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style rel="stylesheet/less" lang="less">
@import './video_box_w';
</style>