123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214 |
- var videoPreviewHtml = '<div v-bind:id="id" class="videobox" :class="{fillet: data.sliderRadius==\'fillet\'}">';
- videoPreviewHtml += ' <div v-for="(item,index) in list">';
- videoPreviewHtml += ' <video :src="item.videoUrl" controls v-if="item.videoUrl" />';
- videoPreviewHtml += ' <img src="/static/images/diy/crack_figure.png" style="height: 150px;" v-else >';
- videoPreviewHtml += ' </div>';
- videoPreviewHtml += '</div>';
- Vue.component("szy-video", {
- data: function () {
- return {
- id: "video_" + get_math_rant(10),
- data: this.$parent.data,
- list: this.$parent.data.list,
- videoWidth: 710
- }
- },
- created: function () {
- if (!this.$parent.data.verify) this.$parent.data.verify = [];
- this.$parent.data.verify.push(this.verify);
- },
- watch: {
- list : function(val, oldval){
- console.log(val)
- console.log(oldval)
- },
- },
- methods: {
- verify: function () {
- var res = {
- code: true,
- message: ""
- };
- return res;
- },
- },
- template: videoPreviewHtml
- });
- var videoListHtml = '<div class="video-list">';
- videoListHtml += '<div class="template-edit-wrap">';
- videoListHtml += '<ul>';
- videoListHtml += '<li v-for="(item,index) in list" v-bind:key="index">';
- videoListHtml += '<video-upload v-bind:data="{ data: item }"></video-upload>';
- videoListHtml += '<div class="content-block">';
- videoListHtml += '</div>';
- videoListHtml += '<i class="del" v-on:click="list.splice(index,1)" data-disabled="1">x</i>';
- videoListHtml += '<div class="error-msg"></div>';
- videoListHtml += '</li>';
- videoListHtml += '</ul>';
- videoListHtml += '</div>';
- videoListHtml += '<div class="template-edit-wrap">';
- videoListHtml += '<video-radius></video-radius>';
- videoListHtml += '</div>';
- videoListHtml += '<div class="template-edit-title">';
- videoListHtml += '<h3>其他设置</h3>';
- videoListHtml += '<i class="layui-icon layui-icon-down" onclick="closeBox(this)"></i>';
- videoListHtml += '</div>';
- videoListHtml += '<div class="template-edit-wrap">';
- videoListHtml += '<color v-bind:data="{ field : \'backgroundColor\', label : \'背景颜色\' }"></color>';
- videoListHtml += '<div class="text-slide">';
- videoListHtml += '<slide v-bind:data="{ field : \'marginTop\', label : \'页面间距\' }"></slide>';
- videoListHtml += '</div>';
- videoListHtml += '</div>';
- videoListHtml += '</div>';
- Vue.component("video-list", {
- data: function () {
- return {
- data: this.$parent.data,
- showAddItem: true,
- list: this.$parent.data.list,
- imageScale: this.$parent.data.imageScale,
- padding: this.$parent.data.padding,
- maxTip: 5,
- scrollSettingList: [{
- name: "固定",
- value: "fixed",
- max: 5
- }],
- };
- },
- created: function () {
- this.changeShowAddItem();
- if (!this.$parent.data.verify) this.$parent.data.verify = [];
- this.$parent.data.verify.push(this.verify);
- },
- watch: {
- list: function () {
- this.changeShowAddItem();
- }
- },
- methods: {
-
- changeShowAddItem: function () {
- if (this.list.length >= this.scrollSettingList[0].max) this.showAddItem = false;
- else this.showAddItem = true;
- this.maxTip = this.scrollSettingList[0].max;
- },
-
- changePadding: function (event) {
- var v = event.target.value;
- if (v != "") {
- if (v >= 0 && v <= 100) {
- this.padding = v;
- this.$parent.data.padding = this.padding;
- } else {
- layer.msg("请输入合法数字0~100");
- }
- } else {
- layer.msg("请输入合法数字0~100");
- }
- },
- verify: function () {
- var res = {
- code: true,
- message: ""
- };
- var _self = this;
- $(".draggable-element[data-index='" + this.data.index + "'] .slider .slider-list .template-edit-wrap>ul>li").each(function (index) {
- $(this).find("input[name='title']").removeAttr("style");
-
- if (_self.list[index].videoUrl == "") {
- res.code = false;
- res.message = "请选择视频";
- $(this).find(".error-msg").text("请选择视频").show();
- return res;
- } else {
- $(this).find(".error-msg").text("").hide();
- }
- });
- return res;
- }
- },
- template: videoListHtml
- });
- var videoRadiusHtml = '<div class="layui-form-item ns-icon-radio">';
- videoRadiusHtml += '<label class="layui-form-label sm">圆角展示</label>';
- videoRadiusHtml += '<div class="layui-input-block">';
- videoRadiusHtml += '<template v-for="(item, index) in sliderRadius" v-bind:k="index">';
- videoRadiusHtml += '<span :class="[item.value == data.sliderRadius ? \'\' : \'layui-hide\']">{{item.text}}</span>';
- videoRadiusHtml += '</template>';
- videoRadiusHtml += '<ul class="ns-icon">';
- videoRadiusHtml += '<li v-for="(item, index) in sliderRadius" v-bind:k="index" :class="[item.value == data.sliderRadius ? \'ns-text-color ns-border-color ns-bg-color-diaphaneity\' : \'\']" @click="data.sliderRadius=item.value">';
- videoRadiusHtml += '<img v-if="item.value == data.sliderRadius" :src="item.selectedSrc" />'
- videoRadiusHtml += '<img v-else :src="item.src" />'
- videoRadiusHtml += '</li>';
- videoRadiusHtml += '</ul>';
- videoRadiusHtml += '</div>';
- videoRadiusHtml += '</div>';
- Vue.component("video-radius", {
- template: videoRadiusHtml,
- data: function () {
- return {
- data: this.$parent.data,
- sliderRadius: [{
- text: "直角",
- value: "right-angle",
- src: sliderResourcePath + "/graphic_nav/img/right-angle.png",
- selectedSrc: sliderResourcePath + "/graphic_nav/img/right-angle_1.png"
- },
- {
- text: "圆角",
- value: "fillet",
- src: sliderResourcePath + "/graphic_nav/img/fillet.png",
- selectedSrc: sliderResourcePath + "/graphic_nav/img/fillet_1.png"
- }
- ],
- }
- },
- created: function () {
- if (!this.$parent.data.verify) this.$parent.data.verify = [];
- this.$parent.data.verify.push(this.verify);
- },
- methods: {
- verify: function () {
- var res = {
- code: true,
- message: ""
- };
- return res;
- },
- },
- });
|