From f6ff0b8a124369b46d909a1e903da881718db1f3 Mon Sep 17 00:00:00 2001 From: paulGao Date: Tue, 6 Sep 2022 19:45:02 +0800 Subject: [PATCH] =?UTF-8?q?=E7=AE=A1=E7=90=86=E7=AB=AF=E6=A5=BC=E5=B1=82?= =?UTF-8?q?=E8=A3=85=E4=BF=AE=E5=A2=9E=E5=8A=A0=E7=83=AD=E5=8C=BA=E5=8A=9F?= =?UTF-8?q?=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/hotzone/assets/styles/main.css | 2 +- .../components/hotzone/components/Hotzone.vue | 184 ++++++++++++++++-- .../components/hotzone/components/Zone.vue | 58 ++++-- .../components/hotzone/directives/addItem.js | 15 +- manager/src/components/hotzone/index.js | 2 +- manager/src/components/hotzone/index.vue | 69 +++++++ .../lili-dialog/template/marketing.vue | 2 +- .../src/views/page-decoration/wap/config.js | 59 +++--- .../views/page-decoration/wap/decorate.vue | 81 +++++--- .../src/views/page-decoration/wap/navbar.vue | 2 +- .../wap/template/tpl_flex_one.vue | 1 - 11 files changed, 380 insertions(+), 95 deletions(-) create mode 100644 manager/src/components/hotzone/index.vue diff --git a/manager/src/components/hotzone/assets/styles/main.css b/manager/src/components/hotzone/assets/styles/main.css index d7216d11..da6a3052 100644 --- a/manager/src/components/hotzone/assets/styles/main.css +++ b/manager/src/components/hotzone/assets/styles/main.css @@ -8,7 +8,7 @@ width: 100%; max-width: 100%; height: auto; - max-height: 100%; + /* max-height: 100%; */ user-select: none; } diff --git a/manager/src/components/hotzone/components/Hotzone.vue b/manager/src/components/hotzone/components/Hotzone.vue index 2c340e19..614e8488 100644 --- a/manager/src/components/hotzone/components/Hotzone.vue +++ b/manager/src/components/hotzone/components/Hotzone.vue @@ -1,17 +1,65 @@ @@ -43,6 +91,43 @@ export default { this.zones = this.zonesInit.concat(); }, methods: { + addHotzone() { + let perInfo = { + topPer: 0.15, + leftPer: 0.4, + widthPer: 0.2, + heightPer: 0.05, + img: "", + link: "", + type: "", + title: "", + }; + this.addItem(perInfo); + }, + editZone(index) { + this.$refs[`zone${index}`][0].showModalFn(index); + }, + delZone(index) { + this.$refs[`zone${index}`][0].delItem(index); + }, + showZoneText(zone) { + switch(zone.type) { + case 'goods': + return `商品：${zone.goodsName}`; + case "category": + return `分类：${zone.name}`; + case "shops": + return `店铺：${zone.storeName}`; + case "pages": + return `文章：${zone.title}`; + case "marketing": + return `促销活动商品：${zone.goodsName}`; + case "other": + return `${zone.title}`; + default: + return '请选择跳转链接'; + } + }, changeInfo(res) { let { info, index, zoneInfo } = res; info = { ...zoneInfo, ...info }; @@ -96,6 +181,77 @@ export default { }; - diff --git a/manager/src/components/hotzone/components/Zone.vue b/manager/src/components/hotzone/components/Zone.vue index bb3894f9..113458b4 100644 --- a/manager/src/components/hotzone/components/Zone.vue +++ b/manager/src/components/hotzone/components/Zone.vue @@ -50,6 +50,7 @@
  • +
    @@ -70,14 +67,15 @@
    - + - + @@ -108,6 +106,7 @@ export default { components: { ossManage, }, + data() { return { zoneTop: "", @@ -119,6 +118,7 @@ export default { showModal: false, picModelFlag: false, currentIndex: 0, + currentShowIndex: -1, zoneForm: { img: "", link: "", @@ -126,10 +126,8 @@ export default { }, }; }, - props: ["index", "setting"], mounted() { - console.log(this.setting); this.setZoneInfo(this.setting); }, methods: { @@ -139,9 +137,10 @@ export default { this.zoneWidth = this.getZoneStyle(val.widthPer); this.zoneHeight = this.getZoneStyle(val.heightPer); this.tooSmall = val.widthPer < 0.01 && val.heightPer < 0.01; - this.zoneForm.img = val.img; - this.zoneForm.link = val.link; - this.zoneForm.type = val.type; + this.zoneForm = { + ...val, + ...this.zoneForm, + }; }, handlehideZone(isHide = true) { if (this.hideZone === isHide) { @@ -162,6 +161,7 @@ export default { showModalFn(index) { this.showModal = true; this.currentIndex = index; + console.log(this.zoneForm); }, // 选择图片 handleSelectImg() { @@ -183,8 +183,40 @@ export default { selectedLink(val) { this.zoneForm.link = this.$options.filters.formatLinkType(val); this.zoneForm.type = val.___type; + this.zoneForm.title = val.title; + switch (val.___type) { + case "goods": + this.zoneForm.id = val.id; + this.zoneForm.goodsId = val.goodsId; + this.zoneForm.goodsName = val.goodsName; + break; + case "category": + this.zoneForm.id = val.allId; + this.zoneForm.name = val.name; + break; + case "shops": + this.zoneForm.id = val.id; + this.zoneForm.storeName = val.storeName; + break; + case "pages": + this.zoneForm.id = val.id; + this.zoneForm.___path = val.___path; + this.zoneForm.title = val.title; + break; + case "marketing": + this.zoneForm.id = val.id; + this.zoneForm.goodsId = val.goodsId; + this.zoneForm.goodsName = val.goodsName; + break; + default: + break; + } + this.changeInfo(this.zoneForm); }, saveZone() {}, + cancelZone() { + this.showModal = false; + }, delZone() { this.delItem(this.currentIndex); }, diff --git a/manager/src/components/hotzone/directives/addItem.js b/manager/src/components/hotzone/directives/addItem.js index 228def17..9832b00f 100644 --- a/manager/src/components/hotzone/directives/addItem.js +++ b/manager/src/components/hotzone/directives/addItem.js @@ -4,10 +4,10 @@ export default { bind: function (el, binding, vnode) { const MIN_LIMIT = _.MIN_LIMIT - el.addEventListener('mousedown', handleMouseDown,{ passive: false }) + el.addEventListener('mousedown', handleMouseDown, { passive: false }) - function handleMouseDown (e) { - console.log('additem', e) + function handleMouseDown(e) { + // console.log('additem', e) e && e.preventDefault() let itemInfo = { @@ -30,10 +30,10 @@ export default { vnode.context.addItem(setting)// 这里去添加并发送了add通知，不应该发送通知 - window.addEventListener('mousemove', handleChange,{ passive: false }) - window.addEventListener('mouseup', handleMouseUp,{ passive: false }) + window.addEventListener('mousemove', handleChange, { passive: false }) + window.addEventListener('mouseup', handleMouseUp, { passive: false }) - function handleChange (e) { + function handleChange(e) { e && e.preventDefault() let moveX = _.getPageX(e) - preX @@ -57,7 +57,7 @@ export default { }) } - function handleMouseUp () { + function handleMouseUp() { let perInfo = { topPer: _.decimalPoint(itemInfo.top / container.height), leftPer: _.decimalPoint(itemInfo.left / container.width), @@ -66,6 +66,7 @@ export default { img: "", link: "", type: "", + title: "" } if (vnode.context.isOverRange()) { diff --git a/manager/src/components/hotzone/index.js b/manager/src/components/hotzone/index.js index 050ab96a..c818a357 100644 --- a/manager/src/components/hotzone/index.js +++ b/manager/src/components/hotzone/index.js @@ -1,4 +1,4 @@ -import hotzone from './components/Hotzone.vue' +import hotzone from './index.vue' hotzone.install = (Vue) => { Vue.component(hotzone.name, hotzone) diff --git a/manager/src/components/hotzone/index.vue b/manager/src/components/hotzone/index.vue new file mode 100644 index 00000000..90d75467 --- /dev/null +++ b/manager/src/components/hotzone/index.vue @@ -0,0 +1,69 @@ + + + diff --git a/manager/src/components/lili-dialog/template/marketing.vue b/manager/src/components/lili-dialog/template/marketing.vue index c81f56fa..3715f52b 100644 --- a/manager/src/components/lili-dialog/template/marketing.vue +++ b/manager/src/components/lili-dialog/template/marketing.vue @@ -380,7 +380,7 @@ export default { getPromotion(res) { if (res.result) { this.promotionList = res.result; - this.typeOption(Object.keys(res.result)[0]).methodsed(); + Object.keys(res.result)[0] && this.typeOption(Object.keys(res.result)[0]).methodsed(); } // if (Object.keys(res.result).length) { diff --git a/manager/src/views/page-decoration/wap/config.js b/manager/src/views/page-decoration/wap/config.js index df1e580d..2566b2e8 100644 --- a/manager/src/views/page-decoration/wap/config.js +++ b/manager/src/views/page-decoration/wap/config.js @@ -21,11 +21,31 @@ export let homeData = {}; * close:true 右侧关闭按钮 */ export const modelData = [ + + { + type: "flexOne", + name: "图片", + // drawer: true, + notAdd: true, + onlyImg: true, + img: "md-image", + options: { + list: [ + { + img: "https://i.loli.net/2020/12/05/8wSNWbnqujDh6HL.png", + url: "", + link: "", + size: "750*280", + model: "link" + } + ] + } + }, { type: "carousel", - name: "图片轮播", + name: "轮播图", img: "md-image", - onlyImg: true, + // onlyImg: true, notTitle: false, close: true, options: { @@ -59,7 +79,7 @@ export const modelData = [ name: "左一右二", notAdd: true, drawer: true, - onlyImg: true, + // onlyImg: true, view: "tpl_ad_list", img: "md-image", options: { @@ -116,7 +136,7 @@ export const modelData = [ name: "左二右一", notAdd: true, drawer: true, - onlyImg: true, + // onlyImg: true, img: "md-image", options: { list: [ @@ -149,7 +169,7 @@ export const modelData = [ name: "三列单行", drawer: true, notAdd: true, - onlyImg: true, + // onlyImg: true, img: "md-image", options: { list: [ @@ -177,31 +197,12 @@ export const modelData = [ ] } }, - { - type: "flexOne", - name: "一张大图", - drawer: true, - notAdd: true, - onlyImg: true, - img: "md-image", - options: { - list: [ - { - img: "https://i.loli.net/2020/12/05/8wSNWbnqujDh6HL.png", - url: "", - link: "", - size: "750*280", - model: "link" - } - ] - } - }, { type: "flexTwo", name: "两张横图", drawer: true, notAdd: true, - onlyImg: true, + // onlyImg: true, img: "md-image", options: { list: [ @@ -227,7 +228,7 @@ export const modelData = [ name: "上一下二", drawer: true, notAdd: true, - onlyImg: true, + // onlyImg: true, img: "md-image", options: { list: [ @@ -260,7 +261,7 @@ export const modelData = [ name: "上二下一", drawer: true, notAdd: true, - onlyImg: true, + // onlyImg: true, img: "md-image", options: { list: [ @@ -293,7 +294,7 @@ export const modelData = [ name: "五列单行", drawer: true, notAdd: true, - onlyImg: true, + // onlyImg: true, img: "md-image", options: { list: [ @@ -340,7 +341,7 @@ export const modelData = [ name: "四列单行", drawer: true, notAdd: true, - onlyImg: true, + // onlyImg: true, img: "md-image", options: { list: [ diff --git a/manager/src/views/page-decoration/wap/decorate.vue b/manager/src/views/page-decoration/wap/decorate.vue index 3b883cc6..cb6d7cb8 100644 --- a/manager/src/views/page-decoration/wap/decorate.vue +++ b/manager/src/views/page-decoration/wap/decorate.vue @@ -145,7 +145,7 @@
    -
    +
    建议尺寸 {{ item.size }}
    @@ -302,8 +302,19 @@ -
    +
    选择模式
    + +
    + + 链接 + 热区 + +
    +
    + +
    +
    选择链接
    -
    - + {{ item.model === "hotzone" ? "绘制热区" : "选择链接" }} - 链接 - 热区 -
    -
    - -
    -
    外部链接
    -
    - + +
    +
    外部链接
    +
    + +
    -
    -

    - (如非同域名下，则在小程序与公众号中无效) -

    +

    + (如非同域名下，则在小程序与公众号中无效) +

    +
    @@ -400,6 +408,8 @@ @selectedGoodsData="selectedGoodsData" > + + @@ -408,10 +418,12 @@