Merge branch 'feat/1.2.2' into 'master'

Feat/1.2.2

See merge request !22

app/web/api/operation.api.ts

@@ -44,6 +44,12 @@ export default {
       accessToken: true
     });
   },
+  // 商品管理-商品标签列表_分页
+  labelPage(params) {
+    return http.post(`${config.opapiHost}/kdspOp/api/kdsp/activity/activity-goods/label-info/list-page`, params, {
+      accessToken: true
+    });
+  },
   // todo: 对外接口需提供x-auth-token
   // 购物车-添加商品
   addShopCart(params) {
@@ -57,52 +63,6 @@ export default {
   // 商品组或专题查询
   getGoods(params) {
     return http.post(`${config.kdspHost}/api/kdsp/activity/activity-goods-special/skus`, params);
-    // return {
-    //   skus: [
-    //     {
-    //       skuNo: '100014565800',
-    //       skuName: '【自营】【自营】小米手机 陶瓷黑 8GB+128GB 官方标配',
-    //       skuUrl: 'https://img14.360buyimg.com/n0/jfs/t1/141986/32/5318/98164/5f3236baE713fd239/5f2746db41f3e9c0.jpg',
-    //       salePrice: 2.85,
-    //       marketPrice: 293
-    //     },
-    //     {
-    //       skuNo: '100014565820',
-    //       skuName: '【自营】[自营][自营]0',
-    //       skuUrl: 'https://img14.360buyimg.com/n0/jfs/t1/141986/32/5318/98164/5f3236baE713fd239/5f2746db41f3e9c0.jpg',
-    //       salePrice: 264,
-    //       marketPrice: 300
-    //     },
-    //     {
-    //       skuNo: '100014565820',
-    //       skuName: '【自营】[自营][自营]0',
-    //       skuUrl: 'https://img14.360buyimg.com/n0/jfs/t1/141986/32/5318/98164/5f3236baE713fd239/5f2746db41f3e9c0.jpg',
-    //       salePrice: 264,
-    //       marketPrice: 300
-    //     },
-    //     {
-    //       skuNo: '100014565800',
-    //       skuName: '【自营】【自营】小米手机 陶瓷黑 8GB+128GB 官方标配',
-    //       skuUrl: 'https://img14.360buyimg.com/n0/jfs/t1/141986/32/5318/98164/5f3236baE713fd239/5f2746db41f3e9c0.jpg',
-    //       salePrice: 2.85,
-    //       marketPrice: 293
-    //     },
-    //     {
-    //       skuNo: '100014565820',
-    //       skuName: '【自营】[自营][自营]0',
-    //       skuUrl: 'https://img14.360buyimg.com/n0/jfs/t1/141986/32/5318/98164/5f3236baE713fd239/5f2746db41f3e9c0.jpg',
-    //       salePrice: 264,
-    //       marketPrice: 300
-    //     },
-    //     {
-    //       skuNo: '100014565820',
-    //       skuName: '【自营】[自营][自营]0',
-    //       skuUrl: 'https://img14.360buyimg.com/n0/jfs/t1/141986/32/5318/98164/5f3236baE713fd239/5f2746db41f3e9c0.jpg',
-    //       salePrice: 264,
-    //       marketPrice: 300
-    //     }
-    //   ]
-    // };
   },
   // 根据id查询优惠券列表
   getCoupons(params) {
@@ -113,78 +73,6 @@ export default {
         'x-auth-token': '7386386a-3a78-41f9-8584-14933823bf20'
       }
     });
-    // return {
-    //   coupons: [
-    //     {
-    //       id: 1,
-    //       pickupId: 1,
-    //       name: '3C数码会场',
-    //       startDate: '2021-02-22',
-    //       endDate: '2021-02-22',
-    //       faceValue: 100,
-    //       limitAmount: 300,
-    //       limitDesc: '满300减100',
-    //       couponCategory: 1,
-    //       iconUrl: 'in esse',
-    //       description: 'officia do',
-    //       status: 19667180,
-    //       navUrl: 'exercitation est',
-    //       pickupAble: false,
-    //       publishCountFinished: false
-    //     },
-    //     {
-    //       id: 2,
-    //       pickupId: 1,
-    //       name: '3C数码会场',
-    //       startDate: '2021-02-22',
-    //       endDate: '2021-02-22',
-    //       faceValue: 100,
-    //       limitAmount: 300,
-    //       limitDesc: '满300减100',
-    //       couponCategory: 1,
-    //       iconUrl: 'oc',
-    //       description: 'minim dolore tempor',
-    //       status: 63205995,
-    //       navUrl: 'cupidat',
-    //       pickupAble: true,
-    //       publishCountFinished: false
-    //     },
-    //     {
-    //       id: 3,
-    //       pickupId: 1,
-    //       name: '3C数码会场',
-    //       startDate: '2021-02-22',
-    //       endDate: '2021-02-22',
-    //       faceValue: 100,
-    //       limitAmount: 300,
-    //       limitDesc: '满300减100',
-    //       couponCategory: 1,
-    //       iconUrl: 'eu fugiat commodo voluptate exercitation',
-    //       description: 'nisi',
-    //       status: 43999314,
-    //       navUrl: 'commodo in reprehenderit',
-    //       pickupAble: false,
-    //       publishCountFinished: true
-    //     },
-    //     {
-    //       id: 4,
-    //       pickupId: 1,
-    //       name: '3C数码会场',
-    //       startDate: '2021-02-22',
-    //       endDate: '2021-02-22',
-    //       faceValue: 100,
-    //       limitAmount: 300,
-    //       limitDesc: '满300减100',
-    //       couponCategory: 1,
-    //       iconUrl: 'eu fugiat commodo voluptate exercitation',
-    //       description: 'nisi',
-    //       status: 43999314,
-    //       navUrl: 'commodo in reprehenderit',
-    //       pickupAble: false,
-    //       publishCountFinished: true
-    //     }
-    //   ]
-    // };
   },
   // 领取优惠券
   pickupCoupon(params) {

app/web/config/dev.config.ts

 const protocol = EASY_ENV_IS_BROWSER ? window.location.protocol : 'http';
 
 export default {
-  apiHost: `http://localhost:7001/`,
+  apiHost: `http://localhost:7002/`,
   // apiHost: `http://192.168.28.199:7001/`,
-  // apiHost: 'https://quantum-blocks-vcc2.liangkebang.net/',
-  h5Host: 'https://quantum-h5-vcc2.liangkebang.net',
+  // apiHost: 'https://quantum-blocks-test1.liangkebang.net/',
+  h5Host: 'https://quantum-h5-test1.liangkebang.net',
   qiniuHost: `https://appsync.lkbang.net`,
   shenceUrl: `${protocol}//bn.xyqb.com/sa?project=default`,
-  opapiHost: `https://opapi-vcc2.liangkebang.net`,
+  opapiHost: `https://opapi-test1.liangkebang.net`,
   qiniuUpHost: `${protocol}//up-z0.qiniup.com`,
-  // kdspHost: 'https://kdsp-api-vcc2.liangkebang.net',
-  kdspHost: 'https://talos-vcc2.liangkebang.net'
+  // kdspHost: 'https://kdsp-api-test1.liangkebang.net',
+  kdspHost: 'https://talos-test1.liangkebang.net'
 };
\ No newline at end of file

app/web/lib/Goods/index.vue

@@ -50,7 +50,7 @@
       goods: {
         type: Object,
         default: () => ({
-          type: 'goodsGroup',
+          type: 'goods',
           ids: []
         })
       },
@@ -87,7 +87,7 @@
         handler: async function (newVal) {
           if (newVal.ids.length) {
             let records = [];
-            if(newVal.type === 'goodsGroup') {
+            if(newVal.type === 'goodsSpecial') {
               ({ skus: records } = await operationApi.getGoods({ specialId: newVal.ids[0] }));
             } else if (newVal.type === 'goods') {
               ({ skus: records } = await operationApi.getGoods({ skus: newVal.ids }));
@@ -119,17 +119,20 @@
 <style lang="less" scoped>
   .container {
     margin: 0 12px;
+
     .goods {
       display: flex;
       flex-wrap: wrap;
       justify-content: space-between;
       padding: 4px;
       font-size: 0;
+
       &-item {
         border-radius: 8px;
         background: #fff;
         margin-bottom: 4px;
         overflow: hidden;
+
         &-title {
           height: 36px;
           font-size: 12px;
@@ -140,39 +143,46 @@
           -webkit-box-orient: vertical;
           text-align: left;
         }
+
         &-bottom {
           display: flex;
           justify-content: space-between;
           align-items: center;
+
           .Gi-bottom-left {
             display: flex;
             flex-direction: column;
             align-items: center;
+
             p {
               max-width: 55px;
               overflow: hidden;
               white-space: nowrap;
               text-overflow: ellipsis;
               text-align: left;
+
               &:first-child {
                 font-size: 15px;
-                color: #EC3333;
+                color: #ec3333;
               }
+
               &:last-child {
                 font-size: 13px;
-                color: #999999;
-                text-decoration:line-through;
+                color: #999;
+                text-decoration: line-through;
               }
             }
           }
+
           .Gi-bottom-right {
             width: 30px;
             height: 30px;
             display: flex;
             justify-content: center;
             align-items: center;
-            background: #FFF3F3;
+            background: #fff3f3;
             border-radius: 50%;
+
             /deep/ .cr-image {
               width: 18px !important;
               height: 18px !important;
@@ -183,16 +193,19 @@
         &_one {
           display: flex;
           width: 100%;
+
           .goods-item-img {
             width: 112px !important;
             height: 109px !important;
           }
+
           &-right {
             padding: 6px 8px;
             flex: 1;
             display: flex;
             flex-direction: column;
             justify-content: space-between;
+
             .Gi-bottom-left {
               margin-right: 10px;
               flex: 1;
@@ -200,6 +213,7 @@
               justify-content: space-around;
               flex-direction: row;
               align-items: flex-end;
+
               p {
                 max-width: 55px;
                 overflow: hidden;
@@ -219,13 +233,16 @@
 
         &_two {
           width: 49%;
+
           .goods-item-img {
             width: 100% !important;
             height: 180px !important;
           }
+
           .goods-item-title {
             margin: 8px 8px;
           }
+
           .goods-item-bottom {
             margin: 0 8px 6px;
           }
@@ -233,15 +250,19 @@
 
         &_three {
           width: 32%;
+
           .goods-item-img {
             width: 100% !important;
             height: 117px !important;
           }
+
           .goods-item-title {
             margin: 8px 4px;
           }
+
           .goods-item-bottom {
             margin: 0 4px 6px;
+
             .goods-item-bottom {
 
             }
@@ -251,7 +272,6 @@
         &_empty {
           height: 0;
         }
-
       }
     }
   }

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

@@ -68,7 +68,7 @@ export default class DynamicForm extends Vue {
   changeStyle(type) {
     const gridEle = document.querySelector('.vue-grid-layout');
     gridEle.childNodes.forEach(v => {
-      if (v.classList.contains('vue-grid-item') && !v.classList.contains('vue-grid-placeholder')) {
+      if (v.classList && v.classList.contains('vue-grid-item') && !v.classList.contains('vue-grid-placeholder')) {
         if (type === 'forward') {
           const transform = getStyle(v, 'transform');
           const transformY = transform.split('(')[1].split(')')[0].split(',')[5];

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

 <template>
   <div class="color-selector">
     <Input class="color-selector-input" v-model="color" placeholder="请输入" @input="change"></Input>
-    <ColorPicker placement="bottom-end" v-model="color" @on-active-change="change($event)" @on-change="change($event)" />
+    <ColorPicker placement="bottom-end" v-model="color" alpha @on-active-change="change($event)" @on-change="change($event)" />
   </div>
 </template>
 <script>
@@ -11,7 +11,7 @@
     },
     data() {
       return {
-        color: this.value,
+        color: this.value || '',
       }
     },
     created() {
@@ -35,6 +35,7 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
+
     &-input {
       width: 100px !important;
       flex-basis: 100px !important;

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

@@ -19,10 +19,12 @@
 <script>
   import ComponentSelect from '../ComponentSelect/index.vue';
   import Upload from '../Upload/index.vue';
+  import ColorSelector from '../ColorSelector/index.vue';
   export default {
     components: {
       ComponentSelect,
-      Upload
+      Upload,
+      ColorSelector
     },
     props: {
       value: {
@@ -88,8 +90,17 @@
     /deep/ .ivu-card {
       margin-bottom: 16px;
       .ivu-form {
+        .ivu-form-item {
+          display: flex;
+          margin-bottom: 12px;
+        }
         .ivu-form-item-label {
           text-align: left;
+          width: 60px !important;
+          font-size: 12px;
+        }
+        .ivu-form-item-content {
+          flex: 1 !important;
         }
       }
 

app/web/page/editor/component/DynamicForm/component/GoodsTableModal/columns/goodsLabel.column.ts

+const groupColumns = function() {
+  return [
+    {
+      type: 'selection',
+      width: 60,
+      hideSearch: true
+    },
+    {
+      title: '标签ID',
+      key: 'id',
+      formType: 'input'
+    },
+    {
+      title: '标签名称',
+      key: 'labelName',
+      formType: 'input'
+    },
+    {
+      title: '商品数量',
+      key: 'skuNum',
+      hideSearch: true
+    },
+    {
+      title: '品类数量',
+      key: 'cidNum',
+      hideSearch: true
+    },
+    {
+      title: '创建时间',
+      key: 'createdAt',
+      hideSearch: true,
+    }
+  ];
+};
+
+export default groupColumns;
\ No newline at end of file

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

 import {Component, Prop, Watch, Vue} from 'vue-property-decorator';
 import TableModal from '../TableModal/index.vue';
 import goodsColumn from './columns/goods.column';
-import goodsGroupColumn from './columns/goodsGroup.column';
+import goodsSpecialColumn from './columns/goodsSpecial.column';
+import goodsLabelColumn from './columns/goodsLabel.column';
 import { cloneDeep } from 'lodash';
 import operationApi from '@api/operation.api';
 
@@ -25,12 +26,20 @@ export default class GoodsTableModal extends Vue {
       query: this.query
     },
     {
-      title: '选择商品组',
+      title: '选择商品标签',
+      type: 'goodsLabel',
+      key: 'id',
+      multiple: false,
+      columns: goodsLabelColumn.call(this),
+      query: this.queryLabel
+    },
+    {
+      title: '选择商品专题',
       type: 'goodsGroup',
       key: 'id',
       multiple: false,
-      columns: goodsGroupColumn.call(this),
-      query: this.queryGroup
+      columns: goodsSpecialColumn.call(this),
+      query: this.querySpecial
     }
   ];
 
@@ -65,7 +74,7 @@ export default class GoodsTableModal extends Vue {
     const res = await operationApi.categoryQuery();
     return recursionData(res.level1List || []);
   },
-  async queryGroup(data) {
+  async querySpecial(data) {
     const { records, total } = await operationApi.specialPage(data);
     const selections = this.templates?.ids ? this.templates.ids : this.goods.ids;
     console.log('query', selections, this.templates.ids);
@@ -75,5 +84,16 @@ export default class GoodsTableModal extends Vue {
       }
     });
     return { data: records || [], total };
+  },
+  async queryLabel(data) {
+    const { records, total } = await operationApi.labelPage(data);
+    const selections = this.templates?.ids ? this.templates.ids : this.goods.ids;
+    console.log('query', selections, this.templates.ids);
+    records?.forEach(record => {
+      if (selections.some(v => v === record.id)) {
+        record._checked = true;
+      }
+    });
+    return { data: records || [], total };
   }
 }
\ No newline at end of file

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

@@ -17,16 +17,17 @@
       @on-ok="ok"
       @on-cancel="cancel"
       class="table-modal-popup"
+       :class="{ 'has-menu': table.length > 1 }"
       :title="editText('choose')">
         <div class="Tm-popup-body" v-if="modal">
-          <Menu v-if="table.length > 1" width="90px" :active-name="activeName" @on-select="menuChange">
+          <Menu v-if="table.length > 1" width="110px" :active-name="activeName" @on-select="menuChange">
             <MenuItem :name="index" :key="index" v-for="(item, index) in table">
               <span>{{item.title}}</span>
             </MenuItem>
           </Menu>
           <div class="Tmp-body-content">
             <template v-for="(item, index) in table">
-              <div v-show="activeName === index" >
+              <div v-show="activeName === index">
                 <QGTable
                   :ref="`qgTable${index}`"
                   :columns="item.columns"
@@ -48,38 +49,62 @@
 <style lang="less" scoped>
   .table-modal {
     &-card {
-      /deep/ .ivu-card-head{
+      /deep/ .ivu-card-head {
         background: #f0f2f5;
       }
+
       /deep/ .ivu-form {
         .ivu-form-item-label {
           width: 100px !important;
           text-align: left;
         }
       }
+
       .Fl-card-title {
         text-align: right;
       }
     }
+
     &-popup {
       /deep/ .tableComStyle {
         min-height: 0;
         // .tableGroupStyle {
         //   height: 500px;
         //   overflow: scroll;
-        // } 
+        // }
       }
+
       .Tm-popup-body {
         display: flex;
+
         .Tmp-body-content {
           flex: 1;
         }
+
         /deep/ .ivu-menu-item {
           text-align: center;
           padding: 10px 0;
           justify-content: center;
         }
       }
+
+      &.has-menu {
+        /deep/ .ivu-modal-body {
+          padding: 0;
+
+          .tableComStyle {
+            padding: 0;
+
+            .tableStyle {
+              margin-top: 0;
+            }
+          }
+
+          .tableGroupStyle {
+            margin-top: 1px;
+          }
+        }
+      }
     }
   }
 </style>
\ No newline at end of file

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

@@ -2,7 +2,9 @@
   <div>
     <div class="upload">
       <div class="upload-img" v-if="img">
-        <img :src="img">
+        <img :src="img" v-if="isUrl">
+        <cr-icon :type="img" class="upload-img-none-icon" v-else />
+       <!-- <Icon type="image" size="20" class="upload-img-none-icon"></Icon> -->
         <div class="upload-img-cover">
           <Icon type="ios-trash-outline" @click.native="handleRemove()"></Icon>
         </div>
@@ -14,7 +16,7 @@
         </div>
       </div>
     </div> 
-    <Input v-model="img"></Input>
+    <Input v-model="img" @input="handleImgUrlChange"></Input>
   </div>
 </template>        
 <script>   
@@ -35,12 +37,31 @@
         img: this.value
       }
     },
+    computed: {
+      containerId() {
+        return `container_${this.id}`;
+      },
+      isUrl() {
+        return /(https|http):\/\//gi.test(this.img);
+      }
+    },
+    watch: {
+      value: {
+        handler(newVal) {
+          this.img = newVal;
+        },
+        immediate: true
+      }
+    },
     methods: {
       handleRemove () {
         this.img = '';
         this.$emit('input', this.img);
         this.$emit('change', this.img);
       },
+      handleImgUrlChange() {
+        this.$emit('input', this.img);
+      },
       uploadQiniu() {
          var uploader = Qiniu.uploader({
            runtimes: 'html5', // 上传模式,依次退化
@@ -92,19 +113,7 @@
          });
        },
     },
-    computed: {
-      containerId() {
-        return `container_${this.id}`;
-      }
-    },
-    watch: {
-      value: {
-        handler(newVal) {
-          this.img = newVal;
-        },
-        immediate: true
-      }
-    },
+    
     mounted () {
       this.uploadQiniu();
     }
@@ -132,12 +141,25 @@
       position: relative;
       box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
       margin-right: 4px;
+      z-index: 1;
 
       img {
         width: 100%;
         height: 100%;
       }
 
+      &-none-icon {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        background: #fff;
+        z-index: 1;
+        line-height: 58px;
+        border: 1px solid #dddee1;
+      }
+
       &-cover {
         display: none;
         position: absolute;
@@ -146,7 +168,7 @@
         left: 0;
         right: 0;
         background: rgba(0, 0, 0, 0.6);
-
+        z-index: 3;
         i {
           margin: 0 2px;
           color: #fff;

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

@@ -7,9 +7,10 @@ import ColorSelector from '../DynamicForm/component/ColorSelector/index.vue';
 import BaseSelect from '../DynamicForm/component/BaseSelect/index.vue';
 import Textarea from '../DynamicForm/component/Textarea/index.vue';
 import Number from '../DynamicForm/component/Number/index.vue';
+import FormList from '../DynamicForm/component/FormList/index.vue';
 import { resizeDiv, getStyle } from '@/service/utils.service';
 
-@Component({ components: { Upload, ColorSelector, BaseSelect, Textarea, Number }, name: 'DynamicForm' })
+@Component({ components: { Upload, ColorSelector, BaseSelect, Textarea, Number, FormList }, name: 'DynamicForm' })
 export default class DynamicPageForm extends Mixins(ContextMenuMixin) {
   @Getter('pageData') pageData;
 
@@ -30,11 +31,59 @@ export default class DynamicPageForm extends Mixins(ContextMenuMixin) {
   ];
 
   propsSchame: object[] = [
+    {
+      key: 'showPageBottomTip',
+      name: '底部提示',
+      type: 'checkbox'
+    },
+    {
+      key: 'pageBottomTxt',
+      name: '提示文案',
+      type: 'Input'
+    },
+    {
+      key: 'pageBottomColor',
+      name: '提示颜色',
+      type: 'ColorSelector'
+    },
     {
       key: 'showBackTop',
       name: '返回顶部',
       type: 'checkbox'
-    }
+    },
+    {
+      key: 'btAttachVal',
+      name: '添加按钮',
+      desc: '添加按钮',
+      type: 'FormList',
+      formControl: [
+        {
+          key: 'name',
+          name: '名称',
+          type: 'text'
+        },
+        {
+          key: 'url',
+          name: '链接',
+          type: 'text'
+        },
+        {
+          key: 'icon',
+          name: '图片',
+          type: 'Upload'
+        },
+        {
+          key: 'color',
+          name: '文字颜色',
+          type: 'ColorSelector'
+        },
+        {
+          key: 'background',
+          name: '背景颜色',
+          type: 'ColorSelector'
+        }
+      ]
+    },
   ];
 
   @Watch('pageData', { immediate: true, deep: true })

app/web/page/editor/component/DynamicPageForm/index.vue

@@ -5,7 +5,7 @@
       <h3>基础属性</h3>
       <template v-for="(item, index) in propsSchame">
         <FormItem class="Df-component-formitem" :label="item.name" >
-          <component :is="item.type" :options="item.options"  v-model="propsForm[item.key]" />
+          <component :is="item.type" :options="item.options"  v-model="propsForm[item.key]"  :formControl="item.formControl" />
         </FormItem>
       </template>
     </Form>

app/web/page/editor/component/OperationPanel/component/PageBottomTip/index.vue

+<template>
+  <div class="Pb-container" :style="bgColor">
+    <span class="Pb-text" :style="style">{{ txt }}</span>
+  </div>
+</template>
+<script>
+import { mapGetters } from 'vuex';
+export default {
+  name: 'PageBottomTip',
+    computed: {
+    ...mapGetters(['pageData']),
+    txt() {
+      return this.pageData.props.pageBottomTxt;
+    },
+    style() {
+      return {
+        color: this.pageData.props.pageBottomColor
+      };
+    },
+    // TODO 这样不太好
+    bgColor() {
+      return {
+        'backgroundColor': this.pageData.commonStyle.backgroundColor
+      };
+    }
+  }
+}
+</script>
+<style lang="less">
+  .Pb {
+    &-container {
+      height: 60px;
+      width: 100%;
+      text-align: center;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    &-text {
+      font-size: 14px;
+      color: #333;
+    }
+  }
+</style>
\ No newline at end of file

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

@@ -3,8 +3,9 @@ import { Getter, Action, State, Mutation } from 'vuex-class';
 import type { PageInfo, Page, GridLayout  } from '@store/modules/editor/state';
 import TransformStyleMixin from '@page/mixins/transformStyle.mixin';
 import FreedomContainer from '@editor/component/FreedomContainer/index.vue';
+import PageBottomTip from './component/PageBottomTip/index.vue';
 
-@Component({ components: { FreedomContainer }, name: 'OperationPanel' })
+@Component({ components: { FreedomContainer, PageBottomTip }, name: 'OperationPanel' })
 export default class OperationPanel extends Mixins(TransformStyleMixin) {
   @Getter('pageData') pageData;
   @State(state => state.editor.gridLayout) gridLayout?: GridLayout;
@@ -14,10 +15,34 @@ export default class OperationPanel extends Mixins(TransformStyleMixin) {
   @Prop(Boolean) isDraging;
   @Prop(Boolean) isDragIn;
 
+  bottomInfo: object = {
+    x: 0,
+    y: 0,
+    w: 375,
+    h: 60,
+    i: 'page-bottom-top'
+  };
+
   get layout() {
     return this.pageData.elements.map(v => v.point);
   }
 
+  // @Watch('layout', { deep: true })
+  // onLayoutChange(val) {
+  //   const lastGridItemPoint = val[val.length - 1];
+  //   if (lastGridItemPoint && lastGridItemPoint.w) {
+  //     this.bottomInfo = {
+  //       x: 0,
+  //       y: 0,
+  //       w: 375,
+  //       h: 60,
+  //       i: 'page-bottom-top'
+  //     };
+  //     if (lastGridItemPoint.w > this.bottomInfo.w) { this.bottomInfo.w = lastGridItemPoint.w; }
+  //     this.bottomInfo.y = this.bottomInfo.y + lastGridItemPoint.y + lastGridItemPoint.h;
+  //   }
+  // }
+
   @Emit('update:isDragIn')
   dragenter() {
     return true;
@@ -62,4 +87,25 @@ export default class OperationPanel extends Mixins(TransformStyleMixin) {
   toggle(val) {
     //
   }
+
+  layoutUpdatedEvent() {
+    this.$nextTick(() => {
+      let layoutSorted = JSON.parse(JSON.stringify(this.layout));
+      layoutSorted = layoutSorted.sort((prev, cur) => {
+        return cur.y - prev.y;
+      });
+      const lastGridItemPoint = layoutSorted[0];
+      if (lastGridItemPoint && lastGridItemPoint.w) {
+        this.bottomInfo = {
+          x: 0,
+          y: 0,
+          w: 375,
+          h: 60,
+          i: 'page-bottom-top'
+        };
+        if (lastGridItemPoint.w > this.bottomInfo.w) { this.bottomInfo.w = lastGridItemPoint.w; }
+        this.bottomInfo.y = this.bottomInfo.y + lastGridItemPoint.y + lastGridItemPoint.h;
+      }
+    });
+  }
 }
\ No newline at end of file

app/web/page/editor/component/OperationPanel/index.vue

@@ -13,6 +13,7 @@
         :use-css-transforms="true"
         :style="transformStyle(pageData.commonStyle)"
         @click.native.stop="toggle(false)"
+        @layout-updated="layoutUpdatedEvent"
           >
             <grid-item @click.native.stop="handleElementClick(index, null)" v-for="(item, index) in pageData.elements"
              :x="item.point.x"
@@ -28,13 +29,25 @@
              :class="{'Dcmcp-item_selected': curEleIndex === index && curChildIndex === null}">
                 <component ref="container" :id="item.id" class="Dcmcp-item-com" @handleElementClick="handleElementClick" :containerIndex="index" :childItem="item" :is="item.name" :key="index" v-bind="item.props"></component>
             </grid-item>
+            <grid-item
+              v-if="pageData.props.showPageBottomTip"
+              :x="bottomInfo.x"
+              :y="bottomInfo.y"
+              :w="bottomInfo.w"
+              :h="bottomInfo.h"
+              :i="bottomInfo.i"
+              :static="true"
+              :key="bottomInfo.i + pageData.elements.length"
+            >
+              <page-bottom-tip />
+            </grid-item>
     </grid-layout>
   </div>
 </template>
 <script lang="ts" src="./index.ts"></script>
 <style lang="less" scoped>
   .border() {
-    &:before {
+    &::before {
       position: absolute;
       content: '';
       border: 3px solid #2d8cf0 !important;
@@ -42,9 +55,10 @@
       height: 100%;
       top: 0;
       left: 0;
-      z-index: 1
+      z-index: 1;
     }
   }
+
   .Dcm-container-panel {
     margin: 30px auto;
     width: 375px;
@@ -52,16 +66,18 @@
     min-height: 667px;
     overflow-y: scroll;
     background-color: rgb(244, 244, 244);
-    box-shadow: 2px 0px 10px rgba(0, 0, 0, 0.2);
+    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
+
     /deep/ .vue-grid-layout {
       min-height: 667px;
+
       .vue-grid-item {
         display: flex;
         justify-content: center;
         align-items: center;
         overflow: hidden;
 
-        &:after {
+        &::after {
           position: absolute;
           top: 0;
           left: 0;
@@ -70,24 +86,28 @@
           height: 100%;
           z-index: 100;
         }
-        
+
         &:hover {
           .border();
         }
+
         .vue-resizable-handle {
           z-index: 10000;
         }
       }
+
       .Dcmcp-item_selected {
         .border();
       }
     }
+
     &_draging {
       .Dcmcp-item-com {
         * {
           pointer-events: none;
         }
       }
+
       opacity: 0.7;
     }
   }

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

@@ -59,5 +59,6 @@ export default class AutoSaveMixin extends Vue {
   cancel() {
     // console.log('cancel');
     this.hasCompared = true;
+    localStorage.remove(`${this.account}-${this.pageInfo.id}`);
   }
 }
\ No newline at end of file

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

@@ -37,7 +37,7 @@ export default class ContextMenuMixin extends Vue {
     const elements = this.pageData.elements[this.curEleIndex];
     const component = document.getElementById(elements.id);
     const height = component ? getStyle(component, 'height') : 0;
-    // console.log('adjustHeight', height);
+    console.log('adjustHeight', height);
     this.updatePageInfo({ containerIndex: this.curEleIndex, data: { ...elements, point: { ...elements.point, h: Math.ceil(+height || elements.point.h) } } });
   }
 }
\ No newline at end of file

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

@@ -13,6 +13,7 @@ export default class TransformStyleMixin extends Vue {
     if (!styleObj) { return style; }
     for (const key of Object.keys(styleObj)) {
       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];

app/web/page/store/modules/editor/state.ts

@@ -82,7 +82,19 @@ export const defaultState = {
         backgroundImage: ''
       },
       props: {
+        showPageBottomTip: true,
+        pageBottomTxt: '没有更多啦～',
+        pageBottomColor: '#fff',
         showBackTop: true,
+        btAttachVal: [
+          {
+            name: '购物车',
+            icon: 'shopping-cart-o',
+            url: 'xyqb://shoppingCartTab',
+            color: '#333',
+            background: '#fff'
+          }
+        ],
       },
       elements: [],
     }

config/config.local.ts

@@ -26,18 +26,18 @@ export default (appInfo: EggAppConfig) => {
     dialect: 'mysql',
     username: 'qa',
     password: 'qatest',
-    host: '172.17.5.9',
-    port: 31024,
+    host: '172.17.5.5',
+    port: 31548,
     database: 'low_code',
-  };;
+  };
 
   exports.redis = {
     default: {
       keyPrefix: appInfo.name + ':',
     },
     client: {
-      port: 31565,          // Redis port
-      host: '172.17.5.13',   // Redis host
+      port: 31400,          // Redis port
+      host: '172.17.5.17',   // Redis host
       password: '',
       db: 0
     }
@@ -45,7 +45,7 @@ export default (appInfo: EggAppConfig) => {
 
   exports.webpack = {
     webpackConfigList: getWebpackConfig(),
-    browser: 'http://localhost:7001/editor/list'
+    browser: 'http://localhost:7002/editor/list'
   };
 
   return exports;

package-lock.json

@@ -1491,9 +1491,9 @@
       "integrity": "sha512-uOCUKu5mvX3PWee+7ZFXQSNIR1V5SN2JVE2yANmW9/wQOgpEct291gXGok8VMw0009HlTWB4JATURPwyOP2DFg=="
     },
     "@qg/cherry-ui": {
-      "version": "2.20.20",
-      "resolved": "http://npmprivate.quantgroups.com/@qg%2fcherry-ui/-/cherry-ui-2.20.20.tgz",
-      "integrity": "sha512-gTSydwNq6lhMgBvYzGMO8cfM+45JN8LNaTAvPobjyUNJ+bY6JFM4kE7ZZeRs9gUsaVRhDOY15U8SUP7GgvxouA==",
+      "version": "2.21.1",
+      "resolved": "http://npmprivate.quantgroups.com/@qg%2fcherry-ui/-/cherry-ui-2.21.1.tgz",
+      "integrity": "sha512-OQ9njfH6cs6FaNqPb7W+hEe/yftpdLXyjGXo2g4IwY7o/9Z5EH6Bn6B5X6dFGOka7LSyXyWRSfZzX0upIIpDFw==",
       "requires": {
         "@popperjs/core": "^2.5.4",
         "vue-lazyload": "^1.3.3",
@@ -1501,12 +1501,12 @@
       }
     },
     "@qg/citrus-ui": {
-      "version": "0.1.14",
-      "resolved": "http://npmprivate.quantgroups.com/@qg%2fcitrus-ui/-/citrus-ui-0.1.14.tgz",
-      "integrity": "sha512-88AJuAsBMugnMFkGA60S1quAH7UEh6iNjTqvq/hbQjV5UUSxksdAgdcF0+7ASSPb8aqek4XV2fdRrvC+YBtQxA==",
+      "version": "0.2.1",
+      "resolved": "http://npmprivate.quantgroups.com/@qg%2fcitrus-ui/-/citrus-ui-0.2.1.tgz",
+      "integrity": "sha512-HuN8iQ3oZujUR/v039rOHlSrg4UphQYowCYA1zdHnReldR7ZDzyFamxMz2vUR7iUmlOIlD4yBt8nEERpX+X7TQ==",
       "requires": {
         "@better-scroll/core": "^2.1.1",
-        "@qg/cherry-ui": "^2.20.20",
+        "@qg/cherry-ui": "^2.21.1",
         "@qg/js-bridge": "^1.1.11",
         "axios": "^0.21.1",
         "intersection-observer": "^0.12.0",
@@ -20135,11 +20135,11 @@
       "integrity": "sha1-8z/pz7Urv9UgqhgyO8ZdsRCht2w="
     },
     "rollup": {
-      "version": "2.51.1",
-      "resolved": "http://npmprivate.quantgroups.com/rollup/-/rollup-2.51.1.tgz",
-      "integrity": "sha512-8xfDbAtBleXotb6qKEHWuo/jkn94a9dVqGc7Rwl3sqspCVlnCfbRek7ldhCARSi7h32H0xR4QThm1t9zHN+3uw==",
+      "version": "2.52.3",
+      "resolved": "http://npmprivate.quantgroups.com/rollup/-/rollup-2.52.3.tgz",
+      "integrity": "sha512-QF3Sju8Kl2z0osI4unyOLyUudyhOMK6G0AeqJWgfiyigqLAlnNrfBcDWDx+f1cqn+JU2iIYVkDrgQ6/KtwEfrg==",
       "requires": {
-        "fsevents": "~2.3.1"
+        "fsevents": "~2.3.2"
       }
     },
     "run-async": {

package.json

@@ -7,7 +7,7 @@
     "test": "cross-env NODE_ENV=production EGG_SERVER_ENV=sit DEBUG=apollo APOLLO_CLUSTER=k8s NAMESPACE=qa2 egg-scripts start --port 80 --workers 1",
     "stop": "egg-scripts stop",
     "backend": "nohup egg-scripts start --port 7001 --workers 4",
-    "dev": "egg-bin dev -r egg-ts-helper/register",
+    "dev": "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": "easy build --devtool",
@@ -26,8 +26,8 @@
     "@easy-team/easywebpack-vue": "^4.0.0",
     "@hubcarl/json-typescript-mapper": "^2.0.0",
     "@qg/apollo-nodejs": "^2.1.2",
-    "@qg/cherry-ui": "2.20.20",
-    "@qg/citrus-ui": "0.1.14",
+    "@qg/cherry-ui": "2.21.1",
+    "@qg/citrus-ui": "0.2.1",
     "@riophae/vue-treeselect": "^0.4.0",
     "@types/lodash": "^4.14.117",
     "@types/node": "^10.12.0",