feat(manager): 新增店铺列表装修组件

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

@@ -0,0 +1,78 @@
+<template>
+  <div class="panel-shop">
+    <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: 4 };
+
+export default {
+  name: "PanelShop",
+  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

@@ -6,6 +6,7 @@ import PanelRichText from "./PanelRichText.vue";
 import PanelIntegral from "./PanelIntegral.vue";
 import PanelCoupon from "./PanelCoupon.vue";
 import PanelArticle from "./PanelArticle.vue";
+import PanelShop from "./PanelShop.vue";
 
 export default {
   blank: PanelBlank,
@@ -14,4 +15,5 @@ export default {
   integral: PanelIntegral,
   coupon: PanelCoupon,
   article: PanelArticle,
+  shop: PanelShop,
 };

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

@@ -768,5 +768,18 @@ export const modelData = [
       pageGap: 10,
       borderRadius: 0
     }
+  },
+  {
+    type: "shop",
+    name: "店铺列表",
+    group: "base",
+    img: "md-image",
+    options: {
+      list: [{ title: "店铺列表", count: 4 }],
+      bgColor: "#FFFFFF",
+      paddingX: 0,
+      pageGap: 10,
+      borderRadius: 0
+    }
   }
 ];

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

@@ -28,6 +28,7 @@ import tpl_line from "./tpl_line";
 import tpl_rich_text from "./tpl_rich_text";
 import tpl_coupon from "./tpl_coupon";
 import tpl_article from "./tpl_article";
+import tpl_shop from "./tpl_shop";
 
 export default {
   notice: tpl_notice,
@@ -60,4 +61,5 @@ export default {
   richText: tpl_rich_text,
   coupon: tpl_coupon,
   article: tpl_article,
+  shop: tpl_shop,
 };

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

@@ -0,0 +1,65 @@
+<template>
+  <div class="tpl-shop" :style="wrapperStyle">
+    <div class="shop-title" v-if="title">{{ title }}</div>
+    <div class="shop-grid">
+      <div class="shop-item" v-for="i in 4" :key="i">
+        <div class="shop-logo"></div>
+        <div class="shop-name">店铺名称</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "tpl_shop",
+  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">
+.shop-title {
+  font-size: 15px;
+  font-weight: 600;
+  padding: 4px 12px 10px;
+}
+.shop-grid {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0 12px;
+}
+.shop-item {
+  width: 50%;
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+}
+.shop-logo {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background: #f0f0f0;
+  flex-shrink: 0;
+}
+.shop-name {
+  font-size: 13px;
+  color: #333;
+  margin-left: 8px;
+}
+</style>