244 lines
7.7 KiB
JavaScript
244 lines
7.7 KiB
JavaScript
var goodsListHtml = '<div style="display:none;"></div>';
|
|
|
|
Vue.component("goods-recommend-sources", {
|
|
template: goodsListHtml,
|
|
data: function () {
|
|
return {
|
|
data: this.$parent.data,
|
|
goodsSources: {
|
|
initial: {
|
|
text: "默认",
|
|
icon: "iconmofang"
|
|
},
|
|
category: {
|
|
text: "商品分类",
|
|
icon: "iconshangpinfenlei"
|
|
},
|
|
diy: {
|
|
text: "手动选择",
|
|
icon: "iconshoudongxuanze"
|
|
},
|
|
},
|
|
sortWayList: [
|
|
{
|
|
text: "综合",
|
|
value: "default"
|
|
},
|
|
{
|
|
text: "新品",
|
|
value: "news"
|
|
},
|
|
{
|
|
text: "热销",
|
|
value: "sales"
|
|
},
|
|
{
|
|
text: "价格",
|
|
value: "price"
|
|
}
|
|
],
|
|
styleList: {
|
|
"style-1": {
|
|
saleSupport: true, // 是否支持商品销量
|
|
lineSupport: false, // 是否支持划线价
|
|
bgUrl: '',
|
|
componentBgColor: '',
|
|
elementBgColor: '#FFFFFF',
|
|
topStyle: {
|
|
icon: {
|
|
value: "icondiy icon-system-tuijian",
|
|
color: "#FF3D3D",
|
|
bgColor: "",
|
|
},
|
|
color: "#303133",
|
|
subColor: "#999CA7"
|
|
},
|
|
},
|
|
"style-2": {
|
|
saleSupport: true, // 是否支持商品销量
|
|
lineSupport: false, // 是否支持划线价
|
|
bgUrl: 'app/component/view/goods_recommend/img/bg.png',
|
|
componentBgColor: '#1278FE',
|
|
elementBgColor: '#FFFFFF',
|
|
topStyle: {
|
|
icon: {
|
|
value: "icondiy icon-system-tuijian",
|
|
color: "#1278FE",
|
|
bgColor: "#FFFFFF",
|
|
},
|
|
color: "#FFFFFF",
|
|
subColor: "#FFFFFF"
|
|
},
|
|
},
|
|
},
|
|
ornamentList: [
|
|
{
|
|
type: 'default',
|
|
text: '默认',
|
|
},
|
|
{
|
|
type: 'shadow',
|
|
text: '投影',
|
|
},
|
|
{
|
|
type: 'stroke',
|
|
text: '描边',
|
|
},
|
|
],
|
|
nameLineModeList: [
|
|
{
|
|
text: "单行",
|
|
value: "single"
|
|
},
|
|
{
|
|
text: "多行",
|
|
value: "multiple"
|
|
}
|
|
]
|
|
}
|
|
},
|
|
created: function () {
|
|
if (!this.$parent.data.verify) this.$parent.data.verify = [];
|
|
this.$parent.data.verify.push(this.verify);//加载验证方法
|
|
|
|
this.$parent.data.ignore = ['textColor']; //加载忽略内容 -- 其他设置中的属性设置
|
|
this.$parent.data.ignoreLoad = true; // 等待忽略数组赋值后加载
|
|
|
|
var previewList = {};
|
|
for (var i = 1; i < 4; i++) {
|
|
previewList["goods_id_" + ns.gen_non_duplicate(i)] = {
|
|
goods_name: "商品名称",
|
|
discount_price: (Math.random() * 10 * i + 10).toFixed(0), // 随机价格
|
|
line_price: (Math.random() * 10 * i + 10 + 10).toFixed(0), // 随机价格
|
|
sale_num: Math.floor((Math.random() * 10 * i + 10 + 10))
|
|
};
|
|
}
|
|
|
|
// 组件所需的临时数据
|
|
this.$parent.data.tempData = {
|
|
goodsSources: this.goodsSources,
|
|
sortWayList: this.sortWayList,
|
|
styleList: this.styleList,
|
|
ornamentList: this.ornamentList,
|
|
nameLineModeList: this.nameLineModeList,
|
|
previewList: previewList,
|
|
methods: {
|
|
addGoods: this.addGoods,
|
|
selectCategory: this.selectCategory,
|
|
selectTemplate: this.selectTemplate,
|
|
selectStyle: this.selectStyle
|
|
},
|
|
};
|
|
|
|
},
|
|
methods: {
|
|
verify: function (index) {
|
|
var res = {code: true, message: ""};
|
|
if (vue.data[index].sources === 'category' && vue.data[index].categoryId === 0) {
|
|
res.code = false;
|
|
res.message = "请选择商品分类";
|
|
}
|
|
return res;
|
|
},
|
|
addGoods: function () {
|
|
var self = this;
|
|
goodsSelect(function (res) {
|
|
self.$parent.data.goodsId = res;
|
|
}, self.$parent.data.goodsId, {mode: "spu", disabled: 0, promotion: "module", post: ns.appModule});
|
|
},
|
|
selectCategory() {
|
|
var self = this;
|
|
layui.use(['form'], function () {
|
|
var form = layui.form;
|
|
layer.open({
|
|
type: 1,
|
|
title: '选择分类',
|
|
area: ['630px', '430px'],
|
|
btn: ['确定', '返回'],
|
|
content: $(".draggable-element[data-index='" + self.data.index + "'] .edit-attribute .goods-category-layer").html(),
|
|
success: function (layero, index) {
|
|
$(".js-switch").click(function () {
|
|
var category_id = $(this).attr("data-category-id");
|
|
var level = $(this).attr("data-level");
|
|
var open = parseInt($(this).attr("data-open").toString());
|
|
|
|
if (open) {
|
|
$(".goods-category-list .layui-table tr[data-category-id-" + level + "='" + category_id + "']").hide();
|
|
$(this).text("+");
|
|
} else {
|
|
$(".goods-category-list .layui-table tr[data-category-id-" + level + "='" + category_id + "']").show();
|
|
$(this).text("-");
|
|
}
|
|
$(this).attr("data-open", (open ? 0 : 1));
|
|
});
|
|
|
|
// 勾选分类
|
|
form.on('checkbox(category_select_id)', function (data) {
|
|
if (data.elem.checked) {
|
|
$("input[name='category_select_id']:checked").prop("checked", false);
|
|
$(data.elem).prop("checked", true);
|
|
form.render();
|
|
}
|
|
});
|
|
|
|
$("input[name='category_select_id']:checked").prop("checked", false);
|
|
if (self.data.categoryId) {
|
|
$('.layui-layer-content [data-category_select_id="' + self.data.categoryId + '"]').prop("checked", true);
|
|
}
|
|
form.render();
|
|
},
|
|
yes: function (index, layero) {
|
|
var selected = $(".layui-layer-content input[name='category_select_id']:checked");
|
|
if (selected.length === 0) {
|
|
layer.msg('请选择商品分类');
|
|
return;
|
|
}
|
|
self.data.categoryName = selected.parents('tr').find('.category-name').text();
|
|
self.data.categoryId = selected.attr('data-category_select_id');
|
|
layer.closeAll()
|
|
}
|
|
});
|
|
});
|
|
},
|
|
selectTemplate(template, item) {
|
|
this.$parent.data.saleStyle.support = this.styleList[this.$parent.data.style].saleSupport;
|
|
// this.$parent.data.saleStyle.control = this.styleList[this.$parent.data.style].saleSupport; // 切换风格时，自动选中商品销量
|
|
this.$parent.data.priceStyle.lineSupport = this.styleList[this.$parent.data.style].lineSupport;
|
|
this.$parent.data.priceStyle.lineControl = this.styleList[this.$parent.data.style].lineSupport;
|
|
this.$parent.data.bgUrl = this.styleList[this.$parent.data.style].bgUrl;
|
|
this.$parent.data.componentBgColor = this.styleList[this.$parent.data.style].componentBgColor;
|
|
this.$parent.data.elementBgColor = this.styleList[this.$parent.data.style].elementBgColor;
|
|
|
|
this.$parent.data.topStyle.color = this.styleList[this.$parent.data.style].topStyle.color;
|
|
this.$parent.data.topStyle.subColor = this.styleList[this.$parent.data.style].topStyle.subColor;
|
|
this.$parent.data.topStyle.icon.value = this.styleList[this.$parent.data.style].topStyle.icon.value;
|
|
this.$parent.data.topStyle.icon.color = this.styleList[this.$parent.data.style].topStyle.icon.color;
|
|
this.$parent.data.topStyle.icon.bgColor = this.styleList[this.$parent.data.style].topStyle.icon.bgColor;
|
|
},
|
|
selectStyle: function () {
|
|
var self = this;
|
|
layer.open({
|
|
type: 1,
|
|
title: '风格选择',
|
|
area: ['650px', '400px'],
|
|
btn: ['确定', '返回'],
|
|
content: $(".draggable-element[data-index='" + self.data.index + "'] .edit-attribute .style-list-box").html(),
|
|
success: function (layero, index) {
|
|
$(".layui-layer-content input[name='style']").val(self.data.style);
|
|
$(".layui-layer-content input[name='style_name']").val(self.data.styleName);
|
|
$("body").on("click", ".layui-layer-content .style-list-con .style-li", function () {
|
|
$(this).addClass("selected border-color").siblings().removeClass("selected border-color bg-color-after");
|
|
$(".layui-layer-content input[name='style']").val($(this).attr("data_key"));
|
|
$(".layui-layer-content input[name='style_name']").val($(this).find("span").text());
|
|
});
|
|
},
|
|
yes: function (index, layero) {
|
|
self.data.style = $(".layui-layer-content input[name='style']").val();
|
|
self.data.styleName = $(".layui-layer-content input[name='style_name']").val();
|
|
self.selectTemplate();
|
|
layer.closeAll()
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}); |