Merge branch 'feat/v1.6' into 'master'

Feat/v1.6

See merge request !74

app/web/api/operation.api.ts

@@ -62,7 +62,9 @@ export default {
   },
   // 商品组或专题查询
   getGoods(params) {
-    return http.post(`${config.kdspHost}/api/kdsp/activity/activity-goods-special/skus`, params);
+    return http.post(`${config.kdspHost}/api/kdsp/activity/activity-goods-special/skus`, params, {
+      getGoods: true
+    });
   },
   // 根据id查询优惠券列表
   getCoupons(params) {

app/web/config/test.config.ts

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

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/SwiperListSelector/index.vue

+<template>
+  <div class="swiperListSelector">
+    <div class="listItem" v-for="(item, index) in lists" :key="index">
+      <p>素材{{index + 1}}</p>
+      <Form @submit.native.prevent ref="formCustom" :model="item" :label-width="90" label-position="left">
+        <FormItem label="素材名称" prop="name">
+          <Input v-model="item.name" placeholder="请输入素材名称" />
+        </FormItem>
+        <FormItem label="轮播图" prop="img">
+          <Upload v-model="item.img" />
+        </FormItem>
+        <FormItem label="跳转链接" prop="link">
+          <Input v-model="item.link" placeholder="请输入跳转链接" />
+        </FormItem>
+      </Form>
+      <Button type="error" @click="del(index)" class="delete">删除</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';
+
+export default {
+  props: {
+    value: {
+      type: Array,
+      default: () => []
+    }
+  },
+  components: {
+    Upload,
+    ColorSelector
+  },
+  data() {
+    return {
+      lists: [],
+    }
+  },
+  watch: {
+    value(val) {
+      this.lists = val;
+    },
+    lists: {
+      handler(val) {
+        this.$emit('input', val);    
+      },
+      deep: true
+    }
+  },
+  created() {
+    this.lists = JSON.parse(JSON.stringify(this.value));
+  },
+  methods: {
+    add() {
+      if (this.lists && this.lists.length >= 8) {
+        this.$toast('最多允许添加8个素材');
+        return
+      }
+      this.lists.push({
+        name: '',
+        img: '',
+        link: ''
+      })
+    },
+    del(index) {
+      this.lists.splice(index, 1)
+    }
+  }
+}
+</script>
+<style scoped lang="less">
+.swiperListSelector{
+  .listItem{
+    border: 1px solid #dddee1;
+    border-radius: 4px;
+    margin-bottom: 10px;
+    padding: 5px;
+    .delete{
+      width: 100%;
+      margin-top: 10px;
+    }
+    /deep/ .ivu-form-item{
+      margin-bottom: 10px;
+    }
+  }
+}
+</style>

app/web/page/editor/component/DynamicForm/component/SwiperStyleTypeSelector/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>

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

@@ -11,6 +11,9 @@ import VerticalAdStyleSelector from './component/VerticalAdStyleSelector/index.v
 import CategoryTypeSelector from './component/CategoryTypeSelector/index.vue';
 import CategorySelector from './component/CategorySelector/index.vue';
 import BatchGoodsSelector from './component/BatchGoodsSelector/index.vue';
+import SwiperStyleTypeSelector from './component/SwiperStyleTypeSelector/index.vue';
+import SwiperListSelector from './component/SwiperListSelector/index.vue';
+import GoodsSwiperSelector from './component/GoodsSwiperSelector/index.vue';
 import DiscountGoodsSelectorV2 from './component/DiscountGoodsSelectorV2/index.vue';
 import BaseSelect from './component/BaseSelect/index.vue';
 import ComponentSelect from './component/ComponentSelect/index.vue';
@@ -42,7 +45,10 @@ const allComponentsMap = getAllScheme();
   CategorySelector,
   VerticalAdStyleSelector,
   BatchGoodsSelector,
-  DiscountGoodsSelectorV2
+  DiscountGoodsSelectorV2,
+  SwiperStyleTypeSelector,
+  SwiperListSelector,
+  GoodsSwiperSelector
 }, name: 'DynamicForm' })
 export default class DynamicForm extends Mixins(ContextMenuMixin, DynamicFormMixin) {
   @State(state => state.editor.curEleIndex) curEleIndex;

app/web/page/editor/mixins/goodsTabs.mixin.ts

@@ -63,6 +63,31 @@ export default class GoodsTabsMixin extends Vue {
     return pageData;
   }
 
+  handleCouponIds() {
+    const pageData = cloneDeep(this.pageData);
+     // 下方逻辑: 为一键领取优惠券统计页面所有优惠券组件所含优惠券批次id，并逗号分割，加入到一键领取组件的couponIds字段
+    const { elements } = pageData;
+    let ids: any = [];
+    const batchPickupIndexArr: any[] = []; // 记录一键领取索引值
+    elements.forEach((item, index) => {
+      console.log(item);
+      if (item.name == 'cs-coupon' && item.props.couponsList && item.props.couponsList.length) {
+        ids = ids.concat(item.props.couponsList);
+      }
+      if (item.name == 'cs-batch-pickup') {
+        batchPickupIndexArr.push(index);
+      }
+    });
+    ids = Array.from(new Set(ids));
+    ids = ids.join();
+    if (batchPickupIndexArr.length) {
+      for (let i = 0; i < batchPickupIndexArr.length; i++) {
+        elements[batchPickupIndexArr[i]].props.couponIds = ids;
+      }
+    }
+    return pageData;
+  }
+
   parseGoodsTabs() {
     const goodsTabs = {};
     this.pageData.elements.forEach((element, idx) => {

app/web/page/editor/view/dashboard/index.ts

@@ -88,6 +88,7 @@ export default class DashBoard extends Mixins(ContextMenuMixin, GoodsTabsMixin,
         let pageData = this.handleTabsRepaetCom();
         pageData = this.handleComAchorScrollEnable();
         pageData = this.handleGoodsTabs();
+        pageData = this.handleCouponIds();
         const { pageName, pageDescribe, pageKeywords, coverImage, isPublish, isTemplate, shareCoverImage, shareOpenMethod, diversion } = pageConfig;
         // ！diversion shareCoverImage shareOpenMethod没有作为单独的sql字段存储下来，只是单纯的存储到的redis中
         // 目前对此打了补丁，存放到page的props中
@@ -100,7 +101,8 @@ export default class DashBoard extends Mixins(ContextMenuMixin, GoodsTabsMixin,
         separateAllScheme(pageData.elements);
         const pageInfo = { diversion, page: JSON.stringify(pageData), author: user?.account, isPublish,  pageName, pageDescribe, pageKeywords, coverImage, isTemplate, shareCoverImage, shareOpenMethod } as pageInfo;
         if (this.uuid) { pageInfo.uuid = this.uuid; }
-        await this.savePageData({ pageInfo, pageData: this.pageData });
+        const requestPageData = this.handleCouponIds();
+        await this.savePageData({ pageInfo, pageData: requestPageData });
         if (this.uuid) { await this.getPageDate({ pageId: this.uuid }); }
         this.showSubmitPopup = false;
         // 清除新增数据时的缓存

app/web/page/mixins/transformStyle.mixin.ts

 import { Component, Vue } from 'vue-property-decorator';
 import { pick, omit, omitBy } from 'lodash';
-import { transformStyle } from '@/service/utils.service';
+import { transformStyle, isPx, pxToRem } from '@/service/utils.service';
 
 @Component({ name: 'TransformStyleMixin' })
 export default class TransformStyleMixin extends Vue {
@@ -13,16 +13,17 @@ export default class TransformStyleMixin extends Vue {
     };
     if (!styleObj) { return style; }
     for (const key of Object.keys(styleObj)) {
-      if ( typeof styleObj[key] === 'number') {
+      if (typeof styleObj[key] === 'number') {
         if (key === 'height') { styleObj[key] = Math.ceil(styleObj[key]); }
         style[key] = `${(styleObj[key] / 37.5).toFixed(2)}rem`;
       } else {
-        style[key] = styleObj[key]?.includes('px') ? `${(+(styleObj[key].slice(0, -2)) / 37.5).toFixed(2)}rem` : styleObj[key];
+        style[key] = isPx(styleObj[key]) ? pxToRem(styleObj[key]) : styleObj[key];
       }
       if (key === 'backgroundImage' && style.backgroundImage) {
         style.backgroundImage = `url(${style.backgroundImage})`;
         // style.background = `url(${style.backgroundImage}) no-repeat 0 0 / cover`;
       }
+
     }
     if (element !== 'container') {
       style = omit(style, ['position', 'top', 'left']);

app/web/service/http.service.ts

@@ -91,7 +91,8 @@ instance.interceptors.request.use(
     }
     config.cancelToken = new CancelToken(c => (pending[(config.url + JSON.stringify(config.data)) as string] = c));
     // 添加token
-    const token = localStorage.get('token');
+    // 因未知原因，kdspapi调用传量星球token测试环境用户中心无法校验
+    const token = config.getGoods ? '' : localStorage.get('token');
     if (token) {
       config.headers['X-Auth-Token'] = token;
       if (config.accessToken) { config.headers['Access-Token'] = token; }

app/web/service/utils.service.ts

@@ -88,7 +88,15 @@ export const convertPointStyle = (point, defaultStyle, directionKey = DK) => {
   };
   return style;
 };
-
+export const isPx = str => /(\d+(\.\d*)?)+(px)/gi.test(str);
+export const pxToRem = (str, width = 37.5) => {
+  const reg = /(\d+(\.\d*)?)+(px)/gi; //可以匹配浮点数
+  let newStr = str.replace(reg, function (_x) {
+    _x = _x.replace(/px"/gi, '');
+    return parseFloat(parseFloat(_x) / width).toFixed(2) + 'rem';
+  });
+  return newStr;
+}
 export const getStyle = function(oElement, sName) {
   const result = oElement.currentStyle ? oElement.currentStyle[sName] : getComputedStyle(oElement, null)[sName];
   return result.includes('px') ? result.slice(0, -2) : result;
@@ -110,7 +118,7 @@ export const transformStyle = function(styleObj = {}) {
     if ( typeof styleObj[key] === 'number') {
       style[key] = `${(styleObj[key] / 37.5).toFixed(3)}rem`;
     } else {
-      style[key] = styleObj[key].includes('px') ? `${(+(styleObj[key].slice(0, -2)) / 37.5).toFixed(3)}rem` : styleObj[key];
+      style[key] = isPx(styleObj[key]) ? pxToRem(styleObj[key]) : styleObj[key];
     }
     if (key === 'backgroundImage' && style.backgroundImage) {
       style.background = `url(${style.backgroundImage}) no-repeat 0 0 / cover`;

package.json

@@ -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.46",
+    "@qg/citrus-ui": "0.3.47",
     "@riophae/vue-treeselect": "^0.4.0",
     "@types/lodash": "^4.14.117",
     "@types/node": "^10.12.0",