feat: 新增商品促销折扣组件

app/web/page/editor/component/DynamicForm/component/DiscountGoodsSelector/index.vue

+<template>
+  <div class="discountGoodsContainer">
+    <div class="discountGoodsItem" v-for="(item, index) in goods" :key="index">
+      <p>商品{{index + 1}}<span v-if="item.status == 2">(已隐藏，商品已下架)</span></p>
+      <Form @submit.native.prevent ref="formCustom" :model="item" :label-width="80" label-position="left">
+        <FormItem label="sku_no" prop="skuNo">
+          <Input v-model="item.skuNo" placeholder="请输入商品sku编码" @on-focus="setPrevVal(item.skuNo)" @on-blur="getSkuInfo(item.skuNo, index)"></Input>
+        </FormItem>
+        <FormItem label="商品名称" prop="skuName">
+          <Input v-model="item.skuName" placeholder="请输入商品名称"></Input>
+        </FormItem>
+        <FormItem label="横幅文案" prop="subtitle">
+          <Input v-model="item.subtitle" placeholder="请输入商品横幅文案"></Input>
+        </FormItem>
+        <FormItem label="标签文案" prop="tag">
+          <Input v-model="item.tag" placeholder="请输入商品标签文案"></Input>
+        </FormItem>
+        <FormItem label="标签颜色" prop="tagColor">
+          <ColorSelector v-model="item.goodsTagFontColor" @input="updateStyle($event, 'tagColor', item)"></ColorSelector>
+        </FormItem>
+        <FormItem label="标签背景" prop="tagBg">
+          <Upload v-model="item.goodsTagBgImg" @change="updateStyle($event, 'tagBg', item)"></Upload>
+        </FormItem>
+      </Form>
+      <Button type="error" @click="del(index)" class="deleteGood">删除</Button>
+    </div>
+    <Button type="dashed" icon="plus-round" @click="add">添加商品</Button>
+    <!-- <Button type="primary" @click="save">保存</Button> -->
+  </div>
+</template>
+<script>
+import ColorSelector from '@editor/component/DynamicForm/component/ColorSelector/index.vue';
+import Upload from '@editor/component/DynamicForm/component/Upload/index.vue';
+import operationApi from '@api/operation.api';
+export default {
+  props: {
+    value: {
+      type: Array,
+      default: () => []
+    }
+  },
+  components: {
+    Upload,
+    ColorSelector
+  },
+  data() {
+    return {
+      goods: [],
+      prevEditSkuNo: ''
+    }
+  },
+  watch: {
+    goods: {
+      handler() {
+        this.$emit('input', this.goods);    
+      },
+      immediate: true,
+      deep: true
+    }
+  },
+  created() {
+    this.goods = JSON.parse(JSON.stringify(this.value));
+  },
+  methods: {
+    setPrevVal(skuNo) {
+      this.prevEditSkuNo = skuNo;
+    },
+    async getSkuInfo(skuNo, index) {
+      if (skuNo === this.prevEditSkuNo) return;
+      if (isNaN(parseInt(skuNo))) return;
+      const res = await operationApi.getGoods({
+        skus: [skuNo]
+      });
+      const result = res.skus[0];
+      if (!result) return;
+      const item = {
+        skuNo: result.skuNo || '',
+        skuName: result.skuName || '',
+        skuImg: result.skuUrl || '',
+        marketPrice: result.marketPrice || '',
+        salePrice: result.salePrice || '',
+        goodsTagFontColor: this.goods[index].goodsTagFontColor || '',
+        subtitle: this.goods[index].subtitle || '',
+        tag: this.goods[index].tag || '',
+        goodsTagBgImg: this.goods[index].goodsTagBgImg || '',
+        status: result.status
+      }
+      this.$set(this.goods, index, item);
+      // const goods = JSON.parse(JSON.stringify(this.goods));
+      // goods[index] = item;
+      // this.goods = goods;
+      console.log(this.goods, index);
+    },
+    updateStyle(e, key, item) {
+      item[key] = e;
+    },
+    add() {
+      this.goods.push({
+        skuNo: '',
+        skuName: '',
+        skuImg: '',
+        subtitle: '',
+        marketPrice: '',
+        salePrice: '',
+        tag: '',
+        goodsTagFontColor: '',
+        goodsTagBgImg: ''
+      })
+    },
+    del(index) {
+      this.goods.splice(index, 1)
+    }
+  }
+}
+</script>
+<style scoped lang="less">
+.discountGoodsContainer{
+  .discountGoodsItem{
+    border: 1px solid #dddee1;
+    border-radius: 4px;
+    margin-bottom: 10px;
+    padding: 5px;
+    .deleteGood{
+      width: 100%;
+      margin-top: 10px;
+    }
+    /deep/ .ivu-form-item{
+      margin-bottom: 10px;
+    }
+  }
+}
+</style>

app/web/page/editor/component/DynamicForm/index.ts

@@ -5,6 +5,7 @@ import ContextMenuMixin from '@editor/mixins/contextMenu.mixin';
 import DynamicFormMixin from './component/mixins/dynamicForm.mixin';
 import Upload from './component/Upload/index.vue';
 import ColorSelector from './component/ColorSelector/index.vue';
+import DiscountGoodsSelector from './component/DiscountGoodsSelector/index.vue';
 import BaseSelect from './component/BaseSelect/index.vue';
 import ComponentSelect from './component/ComponentSelect/index.vue';
 import FormList from './component/FormList/index.vue';
@@ -16,7 +17,7 @@ import ColumnSelector from './component/ColumnSelector/index.vue';
 import { resizeDiv, getStyle } from '@/service/utils.service';
 import EventBus from '@service/eventBus.service';
 
-@Component({ components: { Upload, ColorSelector, BaseSelect, FormList, Textarea, Number, ComponentSelect, GoodsTableModal, CouponTableModal, ColumnSelector }, name: 'DynamicForm' })
+@Component({ components: { Upload, ColorSelector, BaseSelect, FormList, Textarea, Number, ComponentSelect, GoodsTableModal, CouponTableModal, ColumnSelector, DiscountGoodsSelector }, name: 'DynamicForm' })
 export default class DynamicForm extends Mixins(ContextMenuMixin, DynamicFormMixin) {
   @State(state => state.editor.curEleIndex) curEleIndex;
   @State(state => state.editor.curChildIndex) curChildIndex;

app/web/page/editor/index.ts

@@ -6,7 +6,7 @@ import createStore from '@store/index';
 import createRouter from './router/index';
 import entry from '@editor/view/home/index.vue';
 import './public-path';
-
+Vue.config.devtools = true
 const create = function(initState) {
   console.log('initState', initState);
   const store = createStore(initState);