feat: 增加竖向广告组件

app/web/config/dev.config.ts

@@ -3,15 +3,15 @@ const protocol = EASY_ENV_IS_BROWSER ? window.location.protocol : 'http';
 const hostMap = {
   apiHost: `http://localhost:7002/`,
   // apiHost: `http://192.168.28.199:7001/`,
-  // apiHost: 'https://quantum-blocks-qa.liangkebang.net/',
-  h5Host: 'https://quantum-h5-qa.liangkebang.net',
+  // apiHost: 'https://quantum-blocks-vcc2.liangkebang.net/',
+  h5Host: 'https://quantum-h5-vcc2.liangkebang.net',
   qiniuHost: `https://appsync.lkbang.net`,
   shenceUrl: `${protocol}//bn.xyqb.com/sa?project=default`,
-  opapiHost: `https://opapi-qa.liangkebang.net`,
+  opapiHost: `https://opapi-vcc2.liangkebang.net`,
   qiniuUpHost: `${protocol}//up-z0.qiniup.com`,
-  // kdspHost: 'https://kdsp-api-qa.liangkebang.net',
-  talosHost: 'https://talos-qa.liangkebang.net',
-  kdspHost: 'https://kdsp-api-qa.liangkebang.net',
+  // kdspHost: 'https://kdsp-api-vcc2.liangkebang.net',
+  talosHost: 'https://talos-vcc2.liangkebang.net',
+  kdspHost: 'https://kdsp-api-vcc2.liangkebang.net',
   yxmTenantId: 560761,
   appIdMap: {
     560761: 'wxe16bf9293671506c',

app/web/page/editor/component/DynamicForm/component/BatchGoodsSelector/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">
+      <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>
+        <FormItem label="商品横幅文案" prop="subtitle">
+          <Input v-model="item.subtitle" />
+        </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: {
+    data: {
+      deep: true,
+      handler(val) {
+        console.log(val);
+        this.$emit('input', val);  
+      }
+    }
+  },
+  components: {
+    Upload
+  },
+  data() {
+    return {
+      data: {}
+    }
+  },
+  created() {
+    const data = JSON.parse(JSON.stringify(this.value));
+    if (!data.ids) data.ids = '';
+    if (!data.data) data.data = [];
+    this.data = data;
+  },
+  methods: {
+   async getGoods(params) {
+     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.subtitle = '';
+           item.status = goodsList[i].status;
+           arr.push(item)
+         }
+         this.data.data = arr;
+       } else {
+         this.data.data = []
+       }
+     } catch (err) {
+       console.log(err);
+       this.data.data = []
+     }
+   },
+   changeIds() {
+     const skus = this.data.ids ? this.data.ids.split(',') : [];
+     if (skus.length) {
+       if (skus.length > 15) {
+         this.$toast('最多填入15个商品');
+         return;
+       }
+       this.getGoods({
+         skus
+       });
+     }
+   },
+   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;
+}
+</style>

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

@@ -221,7 +221,6 @@ export default {
     },
     categoryData: {
       handler(val) {
-        console.log(1);
         this.$emit('input', val);    
       },
       deep: true

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

@@ -48,7 +48,8 @@ export default {
   padding: 3px 5px;
   border: 1px solid #dddee1;
   margin: 0 2px;
-  &.selected{
+  user-select: none;
+  &.selected, &:hover{
     border-color: #57a3f3;
     box-shadow: 0px 0px 0px 2px rgb(45 140 240 / 20%)
   }

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

+<template>
+  <div class="VerticalAdStyleSelectorContainer">
+    <span class="options" v-for="(item, index) in list" :class="{selected: item.id == styleType}" :key="index" @click="changeSelect(item.id)">{{item.title}}</span>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    value: {
+      type: String,
+      default: '1'
+    }
+  },
+  watch: {
+    styleType(val) {
+      this.$emit('input', val);  
+    }
+  },
+  components: {
+  },
+  data() {
+    return {
+      list: [
+        {
+          id: '1',
+          title: '一行一组'
+        },
+        {
+          id: '2',
+          title: '两行一组'
+        }
+      ],
+      styleType: ''
+    }
+  },
+  created() {
+    this.styleType = this.value;
+  },
+  methods: {
+    changeSelect(id) {
+      if (id == this.styleType) return;
+      this.styleType = id;
+    }
+  }
+}
+</script>
+<style scoped lang="less">
+.options{
+  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>

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

@@ -7,8 +7,10 @@ import Upload from './component/Upload/index.vue';
 import ColorSelector from './component/ColorSelector/index.vue';
 import DiscountGoodsSelector from './component/DiscountGoodsSelector/index.vue';
 import SnapUpActivitySelector from './component/SnapUpActivitySelector/index.vue';
+import VerticalAdStyleSelector from './component/VerticalAdStyleSelector/index.vue';
 import CategoryTypeSelector from './component/CategoryTypeSelector/index.vue';
 import CategorySelector from './component/CategorySelector/index.vue';
+import BatchGoodsSelector from './component/BatchGoodsSelector/index.vue';
 import BaseSelect from './component/BaseSelect/index.vue';
 import ComponentSelect from './component/ComponentSelect/index.vue';
 import FormList from './component/FormList/index.vue';
@@ -22,7 +24,7 @@ import { getAllScheme } from '../../../store/modules/editor/scheme';
 import EventBus from '@service/eventBus.service';
 
 const allComponentsMap = getAllScheme();
-@Component({ components: { Upload, ColorSelector, BaseSelect, FormList, Textarea, Number, ComponentSelect, GoodsTableModal, CouponTableModal, ColumnSelector, DiscountGoodsSelector, SnapUpActivitySelector, CategoryTypeSelector, CategorySelector }, name: 'DynamicForm' })
+@Component({ components: { Upload, ColorSelector, BaseSelect, FormList, Textarea, Number, ComponentSelect, GoodsTableModal, CouponTableModal, ColumnSelector, DiscountGoodsSelector, SnapUpActivitySelector, CategoryTypeSelector, CategorySelector, VerticalAdStyleSelector, BatchGoodsSelector }, name: 'DynamicForm' })
 export default class DynamicForm extends Mixins(ContextMenuMixin, DynamicFormMixin) {
   @State(state => state.editor.curEleIndex) curEleIndex;
   @State(state => state.editor.curChildIndex) curChildIndex;

package.json

@@ -8,7 +8,7 @@
     "test": "cross-env NODE_ENV=production EGG_SERVER_ENV=sit egg-scripts start --port 80 --workers 1",
     "stop": "egg-scripts stop",
     "backend": "nohup egg-scripts start --port 7001 --workers 4",
-    "dev": "cross-env NODE_ENV=test APOLLO_CLUSTER=k8s NAMESPACE=test1 npm run apollo && egg-bin dev -r egg-ts-helper/register --port 7002",
+    "dev": "cross-env NODE_ENV=test APOLLO_CLUSTER=k8s NAMESPACE=vcc2 npm run apollo && egg-bin dev -r egg-ts-helper/register --port 7002",
     "debug": "egg-bin debug -r egg-ts-helper/register",
     "apollo": "node bin/apollo.js",
     "build": "cross-env NODE_ENV=production APOLLO_CLUSTER=3C npm run apollo && cross-env COS_ENV=production easy build --devtool",
@@ -30,7 +30,7 @@
     "@hubcarl/json-typescript-mapper": "^2.0.0",
     "@qg/apollo-nodejs": "^2.1.2",
     "@qg/cherry-ui": "2.23.10",
-    "@qg/citrus-ui": "0.3.40-beta1",
+    "@qg/citrus-ui": "0.3.39-beta3",
     "@riophae/vue-treeselect": "^0.4.0",
     "@types/lodash": "^4.14.117",
     "@types/node": "^10.12.0",