feat(manager): 新增优惠券装修组件

manager/src/views/page-decoration/wap/config-panel/PanelCoupon.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="panel-coupon">
+    <div class="ctrl-row">
+      <div class="ctrl-label">标题</div>
+      <div class="ctrl-body">
+        <el-input v-model="firstItem.title" style="width: 200px" />
+      </div>
+    </div>
+    <slider-field
+      v-model="firstItem.count"
+      label="显示数量"
+      :min="1"
+      :max="10"
+    />
+    <color-field
+      v-model="res.options.bgColor"
+      label="背景颜色"
+      :default-value="defaults.bgColor"
+    />
+    <slider-field
+      v-model="res.options.paddingX"
+      label="左右边距"
+      :min="0"
+      :max="30"
+    />
+    <slider-field
+      v-model="res.options.pageGap"
+      label="页面间距"
+      :min="0"
+      :max="100"
+    />
+    <slider-field
+      v-model="res.options.borderRadius"
+      label="背景圆角"
+      :min="0"
+      :max="30"
+    />
+  </div>
+</template>
+
+<script>
+import ColorField from "../controls/ColorField.vue";
+import SliderField from "../controls/SliderField.vue";
+
+const DEFAULTS = {
+  bgColor: "#FFFFFF",
+  paddingX: 0,
+  pageGap: 10,
+  borderRadius: 0,
+};
+const DEFAULT_ITEM = { title: "优惠券", count: 3 };
+
+export default {
+  name: "PanelCoupon",
+  components: { ColorField, SliderField },
+  props: {
+    res: { type: Object, required: true },
+  },
+  data() {
+    return { defaults: DEFAULTS };
+  },
+  computed: {
+    firstItem() {
+      return this.res.options.list[0];
+    },
+  },
+  created() {
+    this.res.options = Object.assign({}, DEFAULTS, this.res.options);
+    if (!Array.isArray(this.res.options.list) || !this.res.options.list[0]) {
+      this.res.options.list = [{ ...DEFAULT_ITEM }];
+    }
+  },
+};
+</script>
+
+<style scoped lang="scss">
+@import "../controls/field-common.scss";
+</style>

manager/src/views/page-decoration/wap/config-panel/index.js

@@ -4,10 +4,12 @@ import PanelBlank from "./PanelBlank.vue";
 import PanelLine from "./PanelLine.vue";
 import PanelRichText from "./PanelRichText.vue";
 import PanelIntegral from "./PanelIntegral.vue";
+import PanelCoupon from "./PanelCoupon.vue";
 
 export default {
   blank: PanelBlank,
   line: PanelLine,
   richText: PanelRichText,
   integral: PanelIntegral,
+  coupon: PanelCoupon,
 };

manager/src/views/page-decoration/wap/config.js

@@ -742,5 +742,18 @@ export const modelData = [
       pageGap: 10,
       borderRadius: 0
     }
+  },
+  {
+    type: "coupon",
+    name: "优惠券",
+    group: "marketing",
+    img: "md-image",
+    options: {
+      list: [{ title: "优惠券", count: 3 }],
+      bgColor: "#FFFFFF",
+      paddingX: 0,
+      pageGap: 10,
+      borderRadius: 0
+    }
   }
 ];

manager/src/views/page-decoration/wap/template/index.js

@@ -26,6 +26,7 @@ import tpl_promotions from "./tpl_promotions";
 import tpl_blank from "./tpl_blank";
 import tpl_line from "./tpl_line";
 import tpl_rich_text from "./tpl_rich_text";
+import tpl_coupon from "./tpl_coupon";
 
 export default {
   notice: tpl_notice,
@@ -56,4 +57,5 @@ export default {
   blank: tpl_blank,
   line: tpl_line,
   richText: tpl_rich_text,
+  coupon: tpl_coupon,
 };

manager/src/views/page-decoration/wap/template/tpl_coupon.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="tpl-coupon" :style="wrapperStyle">
+    <div class="coupon-title" v-if="title">{{ title }}</div>
+    <div class="coupon-list">
+      <div class="coupon-item" v-for="i in 2" :key="i">
+        <div class="coupon-left">
+          <div class="coupon-amount">
+            <span class="coupon-symbol">¥</span>10
+          </div>
+          <div class="coupon-threshold">满100可用</div>
+        </div>
+        <div class="coupon-right">
+          <div class="coupon-name">优惠券名称</div>
+          <div class="coupon-btn">立即领取</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "tpl_coupon",
+  props: {
+    res: { type: Object, default: () => ({}) },
+  },
+  computed: {
+    title() {
+      return (this.res.list && this.res.list[0] && this.res.list[0].title) || "";
+    },
+    wrapperStyle() {
+      return {
+        background: this.res.bgColor || "#FFFFFF",
+        padding: `10px ${this.res.paddingX || 0}px`,
+        marginBottom: `${this.res.pageGap !== undefined ? this.res.pageGap : 10}px`,
+        borderRadius: `${this.res.borderRadius || 0}px`,
+        overflow: "hidden",
+      };
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.tpl-coupon {
+  font-size: 13px;
+}
+.coupon-title {
+  font-size: 15px;
+  font-weight: 600;
+  padding: 4px 10px 10px;
+}
+.coupon-item {
+  display: flex;
+  margin: 0 10px 10px;
+  border-radius: 6px;
+  overflow: hidden;
+  background: linear-gradient(90deg, #ffece8, #fff5f4);
+}
+.coupon-left {
+  width: 90px;
+  padding: 12px 0;
+  text-align: center;
+  color: #e1251b;
+  border-right: 1px dashed #f0c0bb;
+}
+.coupon-amount {
+  font-size: 20px;
+  font-weight: 700;
+}
+.coupon-symbol {
+  font-size: 12px;
+}
+.coupon-threshold {
+  font-size: 11px;
+}
+.coupon-right {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 12px;
+}
+.coupon-name {
+  color: #333;
+}
+.coupon-btn {
+  background: #e1251b;
+  color: #fff;
+  font-size: 12px;
+  padding: 4px 10px;
+  border-radius: 12px;
+}
+</style>