admin/app/component/view/image_ads/js/design.js

/**
 * 图片广告的图片上传
 */
var imageAdsCarouselHtml = '<div style="display:none;"></div>';

Vue.component("image-ads-carouse", {
	data: function () {
		return {
			data: this.$parent.data
		}
	},
	created: function () {
		this.$parent.data.ignore = ['textColor', 'elementBgColor', 'elementAngle'];//加载忽略内容 -- 其他设置中的属性设置
		this.$parent.data.ignoreLoad = true; // 等待忽略数组赋值后加载

		// 组件所需的临时数据
		this.$parent.data.tempData = {
			swiperHeight: 0,
			carouselIndex: 0
		};

		var imgArr = [];
		for (let i = 0; i < this.data.list.length; i++) {
			let item = this.data.list[i];
			imgArr[i] = (item.imgWidth / item.imgHeight);
		}
		imgArr.sort(function (a, b) {
			return a - b
		});
		var swiperHeight = (370 / imgArr[0]).toFixed(2);
		this.$parent.data.tempData.swiperHeight = swiperHeight;
	},
	template: imageAdsCarouselHtml,
	watch: {
		data: {
			handler: function (val, oldVal) {
				// 计算图片高度
				var imgArr = [];
				for (let i = 0; i < this.data.list.length; i++) {
					let item = this.data.list[i];
					imgArr[i] = (item.imgWidth / item.imgHeight) || 2;
				}
				imgArr.sort(function (a, b) {
					return a - b
				});
				var swiperHeight = (370 / imgArr[0]).toFixed(2);
				this.$parent.data.tempData.swiperHeight = swiperHeight;
			},
			deep: true
		}
	},
	methods: {}
});

var imageAdsListHtml = '<div style="display:none;"></div>';

Vue.component("image-ads-list", {
	template: imageAdsListHtml,
	data: function () {
		return {
			data: this.$parent.data,
			list: this.$parent.data.list,
			imgAdsCarousel: [
				{
					text: "圆点",
					value: "circle",
					src: "iconyuandian",
				},
				{
					text: "直线",
					value: "line",
					src: "iconzhishiqi-yuanjiao",
				}
			]
		}
	},
	created: function () {
		if (!this.$parent.data.verify) this.$parent.data.verify = [];
		this.$parent.data.verify.push(this.verify);//加载验证方法

		this.list.forEach(function (e, i) {
			e.id = ns.gen_non_duplicate(6);
		});
		this.$parent.data.list = this.list;

		// 组件所需的临时数据
		this.$parent.data.tempData = {
			...this.$parent.data.tempData,
			imgAdsCarousel: this.imgAdsCarousel,
			methods: {
				deleteItem: this.deleteItem,
				addItem: this.addItem,
				setHeatMap:this.setHeatMap
			}
		};

		var moveBeforeIndex = 0;
		var _this = this;
		setTimeout(function () {
			var componentIndex = _this.data.index;
			$('[data-index="' + componentIndex + '"] .navigation-set-list').DDSort({
				target: 'li',
				floatStyle: {
					'border': '1px solid #ccc',
					'background-color': '#fff'
				},
				//设置可拖拽区域
				draggableArea: "icontuodong",
				down: function (index) {
					moveBeforeIndex = index;
				},
				up: function () {
					var index = $(this).index();
					var temp = _this.list[moveBeforeIndex];
					_this.list.splice(moveBeforeIndex, 1);
					_this.list.splice(index, 0, temp);
					_this.$parent.data.list = _this.list;
				}
			});
		});
	},
	methods: {
		//热区设置
		setHeatMap :function(index) {
			let that = this;
			if(!that.list[index].imageUrl){
				layer.msg('请先上传广告图片');
				return;
			}
			sessionStorage.setItem('imageData',JSON.stringify(that.list[index]));
			ns.open_iframe({
				title: '热区设置',
				url:ns.url("shop/diy/heatmap"),
				area:['100%', '100%'],
				success: function(data){
					that.list[index] = data;
					that.$parent.data.list[index] = data;
					//触发变异方法，进行视图更新
					that.$parent.data.list.push({});
					that.$parent.data.list.pop();
				}
			})
		},
		verify: function (index) {
			var res = {code: true, message: ""};
			$(".draggable-element[data-index='" + index + "'] .image-ads .image-ad-list>ul>li").each(function (i) {
				if (vue.data[index].list[i].imageUrl === "") {
					res.code = false;
					res.message = "请添加图片";
					$(this).find(".error-msg").text("请添加图片").show();
					return res;
				} else {
					$(this).find(".error-msg").text("").hide();
				}
			});
			return res;
		},
		addItem: function () {
			this.list.push({
				imageUrl: "",
				imgWidth: 0,
				imgHeight: 0,
				link: {name: ""}
			});
		},
		deleteItem: function (index) {
			this.list.splice(index, 1);
		}
	}
});