feat: 新增商品轮播组件

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

+<template>
+  <div class="VerticalAdGoodsSelectorContainer">
+    <Input
+      v-model="data.ids"
+      type="textarea"
+      :autosize="{minRows: 3,maxRows: 10}"
+      placeholder="请输入skuNo,每个skuNo使用英文逗号隔开"
+      @on-blur="changeIds"
+    />
+  
+    <div class="goodsItem" v-for="(item, index) in data.data" :key="index">
+      <div class="title">
+        商品{{index + 1}}
+      </div>
+      <Form @submit.native.prevent ref="formCustom" :model="item" :label-width="90" label-position="left">
+        <FormItem label="sku_no" prop="skuNo">
+          <Input v-model="item.skuNo" disabled />
+        </FormItem>
+        <FormItem label="商品名称" prop="goodsName">
+          <Input v-model="item.goodsName" />
+        </FormItem>
+        <FormItem label="商品图片" prop="img">
+          <Upload v-model="item.img"></Upload>
+        </FormItem>
+      </Form>
+      <Button type="error" long @click="del(index, item.skuNo)" class="deleteGood">删除</Button>
+    </div>
+  </div>
+</template>
+<script>
+import operationApi from '@api/operation.api';
+import Upload from '@editor/component/DynamicForm/component/Upload/index.vue';
+export default {
+  props: {
+    value: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  watch: {
+    value: {
+      handler(val) {
+        this.data = val;
+      }
+    },
+    data: {
+      deep: true,
+      handler(val) {
+        this.$emit('input', val);  
+      }
+    }
+  },
+  components: {
+    Upload
+  },
+  data() {
+    return {
+      data: {}
+    }
+  },
+  created() {
+    this.data = JSON.parse(JSON.stringify(this.value));
+  },
+  methods: {
+   init() {
+      const data = this.value;
+      if (!data.ids) data.ids = '';
+      if (!data.data) data.data = [];
+      this.data = data;
+   }, 
+   async getGoods(params) {
+     let prevDataArr = this.data && this.data.data ? JSON.parse(JSON.stringify(this.data.data)) : [];
+     let skuToInfoMaps = {};
+     for (let i = 0; i < prevDataArr.length; i++) {
+       skuToInfoMaps[prevDataArr[i].skuNo] = prevDataArr[i];
+     }
+     const res = await operationApi.getGoods(params);
+     try {
+       let goodsList = res.skus || [];
+       let arr = [];
+       if (goodsList.length) {
+         for (let i = 0; i < goodsList.length; i++) {
+           let item = {};
+           item.goodsName = goodsList[i].skuName;
+           item.salePrice = goodsList[i].salePrice;
+           item.skuNo = goodsList[i].skuNo;
+           item.img = goodsList[i].skuUrl;
+           item.status = goodsList[i].status;
+           if (skuToInfoMaps[goodsList[i].skuNo]) {
+             item = Object.assign({}, skuToInfoMaps[goodsList[i].skuNo])
+           };
+           arr.push(item);
+         }
+         this.$set(this.data, 'data', arr);
+       } else {
+         this.$set(this.data, 'data', []);
+       }
+     } catch (err) {
+       console.log(err);
+       this.$set(this.data, 'data', []);
+     }
+    //  setTimeout(() => {
+    //    this.$emit('adjust')
+    //  }, 1000)
+   },
+   changeIds() {
+     const ids = this.data && this.data.ids ? this.data.ids.trim() : '';
+     this.data.ids = ids;
+     const skus = ids ? ids.split(',') : [];
+     if (skus.length) {
+       if (skus.length > 15) {
+         this.$toast('最多填入15个商品');
+         return;
+       }
+       this.getGoods({
+         skus: Array.from(new Set(skus))
+       });
+     } else {
+       this.$set(this.data, 'data', []);
+     }
+   },
+   del(index, skuNo) {
+      this.data.data.splice(index, 1)
+      const ids = this.data.ids ? this.data.ids.split(',') : [];
+      const idx = ids.indexOf(skuNo);
+      if (idx > -1 && ids.length) ids.splice(idx, 1);
+      this.data.ids = ids.join();
+      if (this.data.data.length == 0) this.data.ids = '';
+   }
+  }
+}
+</script>
+<style scoped lang="less">
+.goodsItem{
+  border: 1px solid #dddee1;
+  border-radius: 4px;
+  margin-top: 10px;
+  padding: 5px;
+  .title{
+    width: 100%;
+    height: 30px;
+    font-weight: bold;
+  }
+}
+</style>

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

+<template>
+  <div class="snapUpActivityContainer">
+    <span class="option" @click="select(item.id)" v-for="(item, index) in options" :key="index" :class="{selected: item.id == selected}">
+      {{item.label}} 
+    </span>
+    <!-- <Button type="primary" @click="save">保存</Button> -->
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    value: {
+      type: String,
+      default: "1"
+    }
+  },
+  watch: {
+    selected(val) {
+      this.$emit('input', val);  
+    }
+  },
+  methods: {
+    select(id) {
+      this.selected = id;
+    }
+  },
+  data() {
+    return {
+      options: [
+        {id: '1', label: '平铺'},
+        {id: '2', label: '主次'}
+      ],
+      selected: 0
+    }
+  },
+  created() {
+    this.selected = this.value;
+  }
+}
+</script>
+<style scoped lang="less">
+.option{
+  cursor: pointer;
+  border-radius: 4px;
+  line-height:normal;
+  display: inline-block;
+  padding: 3px 5px;
+  border: 1px solid #dddee1;
+  margin: 0 2px;
+  user-select: none;
+  &.selected, &:hover{
+    border-color: #57a3f3;
+    box-shadow: 0px 0px 0px 2px rgb(45 140 240 / 20%)
+  }
+}
+</style>