feat(manager): 新增积分商城装修组件

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

@@ -0,0 +1,78 @@
+<template>
+  <div class="panel-integral">
+    <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="20"
+    />
+    <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: "PanelIntegral",
+  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

@@ -3,9 +3,11 @@
 import PanelBlank from "./PanelBlank.vue";
 import PanelLine from "./PanelLine.vue";
 import PanelRichText from "./PanelRichText.vue";
+import PanelIntegral from "./PanelIntegral.vue";
 
 export default {
   blank: PanelBlank,
   line: PanelLine,
   richText: PanelRichText,
+  integral: PanelIntegral,
 };

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

@@ -729,5 +729,18 @@ export const modelData = [
       pageGap: 10,
       borderRadius: 0
     }
+  },
+  {
+    type: "integral",
+    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/tpl_integral.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="layout">
+  <div class="layout" :style="wrapperStyle">
     <div class="join-list">
       <div class="join-title">
-        <div>{{ res.list[0].title }}</div>
+        <div>{{ title }}</div>
 
         <div>更多</div>
       </div>
@@ -29,7 +29,21 @@
 </template>
 <script>
 export default {
-  props: ["res"]
+  props: ["res"],
+  computed: {
+    title() {
+      return (this.res.list && this.res.list[0] && this.res.list[0].title) || "积分商城";
+    },
+    wrapperStyle() {
+      return {
+        background: this.res.bgColor || "#FFFFFF",
+        padding: `0 ${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 lang="scss" scoped>