Merge branch 'master' of https://gitee.com/beijing_hongye_huicheng/lilishop-ui

buyer/src/components/goodsDetail/ShowGoods.vue

@@ -76,7 +76,6 @@
             </div>
             <!-- 商品原价 -->
             <div class="item-price-row" v-else>
-
               <!-- 批发价格 -->
               <div v-if="wholesaleNum && wholesaleNum.length">
                 <div class="flex">
@@ -84,14 +83,23 @@
                     价 &nbsp;&nbsp;&nbsp;&nbsp;格
                   </div>
 
-                  <div v-for="(item,index) in wholesalePrice" :key="index" class="item-price item-num">{{
+                  <div
-                    item | unitPrice("￥")
+                    v-for="(item, index) in wholesalePrice"
-                  }}</div>
+                    :key="index"
+                    class="item-price item-num"
+                  >
+                    {{ item | unitPrice("￥") }}
+                  </div>
                 </div>
                 <div class="flex">
                   <div class="item-price-title">起 批 量</div>
-                  <div v-for="(item,index) in wholesaleNum" :key="index" class="item-num item-price-num">{{item}}{{skuDetail.goodsUnit}}</div>
+                  <div
-
+                    v-for="(item, index) in wholesaleNum"
+                    :key="index"
+                    class="item-num item-price-num"
+                  >
+                    {{ item }}{{ skuDetail.goodsUnit }}
+                  </div>
                 </div>
               </div>
 
@@ -106,24 +114,47 @@
               </div>
             </div>
             <!-- 优惠券展示 -->
-            <div class="item-price-row" v-if="promotionMap['COUPON'].length">
+            <div class="item-price-coupon-row" v-if="promotionMap['COUPON'].length">
-              <p>
+              <p class="Ellipsis">
                 <span class="item-price-title">优 惠 券</span>
-                <span
+                <span>
-                  class="item-coupon"
+                  <span
-                  v-for="(item, index) in promotionMap['COUPON']"
+                    class="item-coupon"
-                  :key="index"
+                    v-for="(item, index) in promotionMap['COUPON'].slice(0, 6)"
-                  @click="receiveCoupon(item.id)"
+                    :key="index"
-                >
+                    @click="receiveCoupon(item.id)"
-                  <span v-if="item.couponType == 'PRICE'"
-                    >满{{ item.consumeThreshold }}减{{ item.price }}</span
-                  >
-                  <span v-if="item.couponType == 'DISCOUNT'"
-                    >满{{ item.consumeThreshold }}打{{
-                      item.couponDiscount
-                    }}折</span
                   >
+                    <span v-if="item.couponType == 'PRICE'"
+                      >满{{ item.consumeThreshold }}减{{ item.price }}</span
+                    >
+                    <span v-if="item.couponType == 'DISCOUNT'"
+                      >满{{ item.consumeThreshold }}打{{
+                        item.couponDiscount
+                      }}折</span
+                    >
+                  </span>
                 </span>
+
+                <div class="dropdown" v-if="promotionMap['COUPON'].length > 6">
+                    <span>展开更多</span>
+                    <div class="dropdown-content">
+                      <span
+                        class="item-coupon"
+                        v-for="(item, index) in promotionMap['COUPON'].slice(6, promotionMap['COUPON'].length)"
+                        :key="index"
+                        @click="receiveCoupon(item.id)"
+                      >
+                        <span v-if="item.couponType == 'PRICE'"
+                          >满{{ item.consumeThreshold }}减{{ item.price }}</span
+                        >
+                        <span v-if="item.couponType == 'DISCOUNT'"
+                          >满{{ item.consumeThreshold }}打{{
+                            item.couponDiscount
+                          }}折</span
+                        >
+                      </span>
+                    </div>
+                  </div>
               </p>
             </div>
             <!-- 满减展示 -->
@@ -285,7 +316,7 @@ export default {
     detail: {
       handler(val) {
         this.skuDetail = val.data;
-        this.wholesaleList = val.wholesaleList
+        this.wholesaleList = val.wholesaleList;
         this.swiperGoodsImg();
       },
       deep: true,
@@ -294,7 +325,7 @@ export default {
   },
   data() {
     return {
-      wholesaleList:[],
+      wholesaleList: [],
       count: 1, // 商品数量
       imgIndex: 0, // 展示图片下标
       currentSelceted: [], // 当前商品sku
@@ -313,17 +344,24 @@ export default {
       loading: false, // 立即购买loading
       loading1: false, // 加入购物车loading
       isCollected: false, // 是否收藏
-
     };
   },
   components: { PicZoom, Promotion },
   computed: {
-    wholesalePrice(key){
+    wholesalePrice(key) {
-      return this.wholesaleList.length ? this.wholesaleList.map(item=>{ return item.price }) :[]
+      return this.wholesaleList.length
+        ? this.wholesaleList.map((item) => {
+            return item.price;
+          })
+        : [];
+    },
+    wholesaleNum(key) {
+      return this.wholesaleList.length
+        ? this.wholesaleList.map((item) => {
+            return item.num;
+          })
+        : [];
     },
-    wholesaleNum(key){
-      return this.wholesaleList.length ? this.wholesaleList.map(item=>{ return item.num }) :[]
-    }
   },
   methods: {
     select(index, value) {
@@ -519,23 +557,22 @@ export default {
   width: 175px;
   margin-left: 30px;
 }
-.flex{
+.flex {
   display: flex;
 }
 .inventory {
   padding-left: 4px;
 }
 
-
 .wrapper {
   @include white_background_color();
 }
 
-.item-num{
+.item-num {
-  text-align:center;
+  text-align: center;
   width: 100px;
 }
-.item-price-num{
+.item-price-num {
   font-size: 16px;
   color: #666;
 }
@@ -647,14 +684,65 @@ export default {
   margin-left: 5px;
 }
 
+.item-price-coupon-row {
+  display: flex;
+  align-items: center;
+  margin: 5px 0px;
+}
+
+.Ellipsis {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 2; //控制显示几行
+  -webkit-box-orient: vertical; //webbox方向
+}
+
+.dropdown {
+  position: relative;
+  display: inline-block;
+  cursor: pointer;
+  z-index: 999;
+}
+
+.dropdown .item-coupon {
+  display: flex;
+  align-content: center;
+  align-items: center;
+  color: $theme_color;
+  margin: 5px 0;
+  font-size: 12px;
+  background-color: #ffdedf;
+  border: 1px dotted $theme_color;
+  cursor: pointer;
+
+  span {
+    padding: 3px;
+  }
+}
+.dropdown-content {
+  display: none;
+  position: absolute;
+  background-color: #f9f9f9;
+  min-width: 160px;
+  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+  padding: 12px 16px;
+}
+.dropdown:hover .dropdown-content {
+  display: block;
+}
+
 .item-coupon {
   margin-right: 5px;
-  padding: 3px;
+  padding: 0 5px;
   color: $theme_color;
   font-size: 12px;
   background-color: #ffdedf;
   border: 1px dotted $theme_color;
   cursor: pointer;
+
+  span {
+    padding: 3px;
+  }
 }
 .item-promotion {
   margin-right: 5px;
@@ -663,8 +751,17 @@ export default {
   font-size: 12px;
   border: 1px solid $theme_color;
 }
+
+.item-price-right {
+  display: flex;
+  align-content: center;
+  align-items: center;
+}
+
 .item-remarks-sum {
-  padding-left: 8px;
+  width: 70px;
+  text-align: center;
+  padding: 0 10px;
   border-left: 1px solid $border_color;
 }
 

manager/README.md

@@ -31,7 +31,7 @@ npm run lint
 ####  login.vue页面，测试时不走权限，直接return  318行
 ####  Main.vue 页面，241行，修改，避免报错
 
-#### main-components  头部，左侧所有内容
+#### main-parts  头部，左侧所有内容
 
-#### lili-floor-renovation  楼层装修模块
+#### decoration  楼层装修模块
      

manager/package.json

@@ -22,7 +22,7 @@
     "sockjs-client": "^1.4.0",
     "swiper": "^6.3.5",
     "uuid": "^8.3.2",
-    "view-design": "^4.2.0",
+    "view-design": "^4.7.0",
     "vue": "^2.6.10",
     "vue-awesome-swiper": "^4.1.1",
     "vue-i18n": "^8.15.1",

manager/src/components/hotzone/assets/styles/main.css

@@ -0,0 +1,657 @@
+.hz-m-wrap {
+  position: relative;
+  /*overflow: hidden;*/
+}
+
+.hz-m-wrap .hz-u-img {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  height: auto;
+  max-height: 100%;
+  user-select: none;
+}
+
+.hz-m-wrap .hz-m-area {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  cursor: crosshair;
+}
+
+.hz-m-wrap .hz-m-item {
+  position: absolute;
+  display: block;
+}
+
+.hz-m-wrap .hz-m-box {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  box-shadow: 0 0 6px #000;
+  background-color: #e31414;
+  font-size: 12px;
+  cursor: pointer;
+  color: #fff;
+  opacity: 0.8;
+}
+.hz-m-box{
+  overflow: hidden;
+}
+
+.hz-m-wrap .hz-m-box>li {
+  position: absolute;
+  text-align: center;
+  user-select: none;
+}
+
+.hz-m-wrap .hz-m-box.hz-z-hidden>li {
+  display: none;
+}
+
+.hz-m-wrap .hz-m-box.hz-m-hoverbox:hover {
+  box-shadow: 0 0 0 2px #373950;
+}
+
+.hz-m-wrap .hz-m-box.hz-m-hoverbox .hz-icon:hover {
+  background-color: #373950;
+}
+
+.hz-m-wrap .hz-m-box .hz-icon {
+  width: 24px;
+  height: 24px;
+  line-height: 24px;
+  font-size: 20px;
+  text-align: center;
+}
+
+.hz-m-wrap .hz-m-box .hz-icon:hover {
+  background-color: #e31414;
+  opacity: 0.8;
+}
+
+.hz-m-wrap .hz-m-box .hz-u-index {
+  top: 0;
+  left: 0;
+  width: 24px;
+  height: 24px;
+  line-height: 24px;
+  background-color: #000;
+  z-index: 100;
+}
+
+.hz-m-wrap .hz-m-box .hz-u-close {
+  top: 0;
+  right: 0;
+  z-index: 10;
+}
+
+.hz-m-wrap .hz-m-box .hz-m-copy {
+  display: inline-block;
+}
+
+.hz-m-wrap .hz-m-box .hz-small-icon {
+  border: 0;
+  border-radius: 0;
+}
+
+.hz-m-wrap .hz-m-box .hz-u-square {
+  width: 8px;
+  height: 8px;
+  opacity: 0.8;
+}
+
+.hz-m-wrap .hz-m-box .hz-u-square:after {
+  content: '';
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 4px;
+  height: 4px;
+  border-radius: 4px;
+  background-color: #fff;
+}
+
+.hz-m-wrap .hz-m-box .hz-u-square-tl {
+  top: -4px;
+  left: -4px;
+  cursor: nw-resize;
+}
+
+.hz-m-wrap .hz-m-box .hz-u-square-tc {
+  top: -4px;
+  left: 50%;
+  transform: translateX(-50%);
+  cursor: n-resize;
+}
+
+.hz-m-wrap .hz-m-box .hz-u-square-tr {
+  top: -4px;
+  right: -4px;
+  cursor: ne-resize;
+}
+
+.hz-m-wrap .hz-m-box .hz-u-square-cl {
+  top: 50%;
+  left: -4px;
+  transform: translateY(-50%);
+  cursor: w-resize;
+}
+
+.hz-m-wrap .hz-m-box .hz-u-square-cr {
+  top: 50%;
+  right: -4px;
+  transform: translateY(-50%);
+  cursor: w-resize;
+}
+
+.hz-m-wrap .hz-m-box .hz-u-square-bl {
+  bottom: -4px;
+  left: -4px;
+  cursor: sw-resize;
+}
+
+.hz-m-wrap .hz-m-box .hz-u-square-bc {
+  bottom: -4px;
+  left: 50%;
+  transform: translateX(-50%);
+  cursor: s-resize;
+}
+
+.hz-m-wrap .hz-m-box .hz-u-square-br {
+  bottom: -4px;
+  right: -4px;
+  cursor: se-resize;
+}
+
+/* reset */
+.hz-m-modal,
+.hz-m-wrap {
+  font-size: 12px;
+  /* 清除内外边距 */
+  /* 重置列表元素 */
+  /* 重置文本格式元素 */
+  /* 初始化 input */
+}
+
+.hz-m-modal ul,
+.hz-m-wrap ul,
+.hz-m-modal ol,
+.hz-m-wrap ol,
+.hz-m-modal li,
+.hz-m-wrap li {
+  margin: 0;
+  padding: 0;
+}
+
+.hz-m-modal ul,
+.hz-m-wrap ul,
+.hz-m-modal ol,
+.hz-m-wrap ol {
+  list-style: none;
+}
+
+.hz-m-modal a,
+.hz-m-wrap a {
+  text-decoration: none;
+}
+
+.hz-m-modal a:hover,
+.hz-m-wrap a:hover {
+  text-decoration: underline;
+}
+
+.hz-m-modal p,
+.hz-m-wrap p {
+  -webkit-margin-before: 0;
+  -webkit-margin-after: 0;
+}
+
+.hz-m-modal input[type="checkbox"],
+.hz-m-wrap input[type="checkbox"] {
+  cursor: pointer;
+}
+
+/* basic */
+/* modal 样式 */
+.hz-m-modal {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1000;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+  touch-action: cross-slide-y pinch-zoom double-tap-zoom;
+  text-align: center;
+  overflow: hidden;
+}
+
+.hz-m-modal:before {
+  content: "";
+  display: inline-block;
+  vertical-align: middle;
+  height: 100%;
+}
+
+.hz-m-modal .hz-modal_dialog {
+  display: inline-block;
+  vertical-align: middle;
+  text-align: left;
+  border-radius: 3px;
+}
+
+.hz-m-modal .hz-modal_title {
+  margin: 0;
+}
+
+.hz-m-modal .hz-modal_close {
+  float: right;
+  margin: -6px -4px 0 0;
+}
+
+@media (max-width: 767px) {
+  .hz-m-modal .hz-modal_dialog {
+    width: auto;
+  }
+}
+
+html.z-modal,
+html.z-modal body {
+  overflow: hidden;
+}
+
+.hz-m-modal {
+  background: rgba(0, 0, 0, 0.6);
+}
+
+.hz-m-modal .hz-modal_dialog {
+  width: 450px;
+  background: #fff;
+  -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.125);
+  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.125);
+}
+
+.hz-m-modal .hz-modal_hd {
+  padding: 15px;
+  border-bottom: 1px solid #f4f4f4;
+}
+
+.hz-m-modal .hz-modal_title {
+  font-size: 18px;
+}
+
+.hz-m-modal .hz-modal_close {
+  margin: -15px -15px 0 0;
+  padding: 6px;
+  color: #bbb;
+  cursor: pointer;
+}
+
+.hz-m-modal .hz-modal_close:hover {
+  color: #888;
+}
+
+.hz-m-modal .hz-modal_close .hz-u-icon-close {
+  font-size: 18px;
+  transition: transform 500ms ease-in-out;
+  transform: rotate(0deg);
+  width: 18px;
+  text-align: center;
+}
+
+.hz-m-modal .hz-modal_close:hover .hz-u-icon-close {
+  transform: rotate(270deg);
+}
+
+.hz-m-modal .hz-modal_bd {
+  padding: 15px 15px 0 15px;
+  min-height: 10px;
+}
+
+.hz-m-modal .hz-modal_ft {
+  padding: 15px;
+  text-align: center;
+  border-top: 1px solid #f4f4f4;
+}
+
+.hz-m-modal .hz-modal_ft .hz-u-btn {
+  margin: 0 10px;
+}
+
+@media (max-width: 767px) {
+  .hz-m-modal .hz-modal_dialog {
+    margin: 10px;
+  }
+}
+
+/* 基本按钮样式 btn */
+.hz-u-btn {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-appearance: none;
+  border: none;
+  overflow: visible;
+  font: inherit;
+  text-transform: none;
+  text-decoration: none;
+  cursor: pointer;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  background: none;
+  display: inline-block;
+  vertical-align: middle;
+  text-align: center;
+  font-size: 12px;
+}
+
+.hz-u-btn:hover,
+.hz-u-btn:focus {
+  outline: none;
+  text-decoration: none;
+}
+
+.hz-u-btn:disabled {
+  cursor: not-allowed;
+}
+
+.hz-u-btn-block {
+  display: block;
+  width: 100%;
+}
+
+.hz-u-btn {
+  padding: 0 16px;
+  height: 28px;
+  line-height: 26px;
+  background: #f4f4f4;
+  color: #444;
+  border: 1px solid #ddd;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+}
+
+.hz-u-btn:hover,
+.hz-u-btn:focus {
+  background: #e5e5e5;
+  border: 1px solid #adadad;
+}
+
+.hz-u-btn:active {
+  background: #e5e5e5;
+  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+}
+
+.hz-u-btn:disabled {
+  background: #fff;
+  border: 1px solid #ccc;
+  filter: alpha(opacity=65);
+  opacity: 0.65;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+
+/* 按钮类型 */
+.hz-u-btn-primary {
+  background: #67739b;
+  color: #fff;
+  border: 1px solid #67739b;
+}
+
+.hz-u-btn-primary:hover,
+.hz-u-btn-primary:focus {
+  background: #31384b;
+  color: #fff;
+  border: 1px solid #31384b;
+}
+
+.hz-u-btn-primary:active {
+  background: #367fa9;
+  color: #fff;
+  border: 1px solid #367fa9;
+}
+
+.hz-u-btn-primary:disabled {
+  background: #444;
+  color: #fff;
+  border: 1px solid #444;
+}
+
+/* input */
+.hz-u-input {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  margin: 0;
+  border: 0;
+  padding: 0;
+  border-radius: 0;
+  font: inherit;
+  color: inherit;
+  vertical-align: middle;
+}
+
+.hz-u-input {
+  position: relative;
+  z-index: 0;
+  padding: 5px 6px;
+  border: 1px solid #d2d6de;
+  color: #555;
+  background: #fff;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+}
+
+.hz-u-input::-webkit-input-placeholder {
+  color: #bbb;
+  filter: alpha(opacity=100);
+  opacity: 1;
+}
+
+.hz-u-input::-moz-placeholder {
+  color: #bbb;
+  filter: alpha(opacity=100);
+  opacity: 1;
+}
+
+.hz-u-input:-moz-placeholder {
+  color: #bbb;
+  filter: alpha(opacity=100);
+  opacity: 1;
+}
+
+.hz-u-input:-ms-placeholder {
+  color: #bbb;
+  filter: alpha(opacity=100);
+  opacity: 1;
+}
+
+.hz-u-input:focus {
+  outline: 0;
+  background: #fff;
+  color: #555;
+  border: 1px solid #3c8dbc;
+}
+
+.hz-u-input:disabled {
+  cursor: not-allowed;
+  background: #eee;
+  color: #999;
+  border: 1px solid #d2d6de;
+}
+
+.hz-u-input {
+  width: 280px;
+  height: 34px;
+}
+
+.hz-u-input.hz-u-input-success {
+  color: #00a65a;
+  border-color: #00a65a;
+}
+
+.hz-u-input.hz-u-input-warning {
+  color: #f39c12;
+  border-color: #f39c12;
+}
+
+.hz-u-input.hz-u-input-error {
+  color: #dd4b39;
+  border-color: #dd4b39;
+}
+
+.hz-u-input.hz-u-input-blank {
+  border-color: transparent;
+  border-style: dashed;
+  background: none;
+}
+
+.hz-u-input.hz-u-input-blank:focus {
+  border-color: #ddd;
+}
+
+/* formItem */
+.hz-u-formitem {
+  display: inline-block;
+  *zoom: 1;
+  margin-bottom: 1em;
+}
+
+.hz-u-formitem:before,
+.hz-u-formitem:after {
+  display: table;
+  content: "";
+  line-height: 0;
+}
+
+.hz-u-formitem:after {
+  clear: both;
+}
+
+.hz-u-formitem .hz-formitem_tt {
+  display: block;
+  float: left;
+  text-align: right;
+}
+
+.hz-u-formitem .hz-formitem_ct {
+  display: block;
+}
+
+.hz-u-formitem .hz-formitem_rqr {
+  line-height: 28px;
+  color: #dd4b39;
+}
+
+.hz-u-formitem .hz-formitem_tt {
+  line-height: 34px;
+  width: 100px;
+}
+
+.hz-u-formitem .hz-formitem_ct {
+  line-height: 34px;
+  margin-left: 108px;
+}
+
+/* icon */
+.hz-u-icon {
+  display: inline-block;
+  font: normal normal normal 14px/1 FontAwesome;
+  font-size: inherit;
+  text-rendering: auto;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* label */
+.hz-u-label {
+  display: inline-block;
+  cursor: pointer;
+}
+
+/* margin */
+.hz-f-ml0 {
+  margin-bottom: 0;
+}
+
+/* replicator */
+.hz-u-copy input[data-for-copy] {
+  transform: translateZ(0);
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  width: 1px;
+  height: 1px;
+  opacity: 0;
+  overflow: hidden;
+  z-index: -999;
+  color: transparent;
+  background-color: transparent;
+  border: none;
+  outline: none;
+}
+
+@font-face {
+  font-family: 'iconfont';
+  /* project id 525460 */
+  src: url('//at.alicdn.com/t/font_525460_d0ysfwzacahsemi.eot');
+  src: url('//at.alicdn.com/t/font_525460_d0ysfwzacahsemi.eot?#iefix') format('embedded-opentype'), url('//at.alicdn.com/t/font_525460_d0ysfwzacahsemi.woff') format('woff'), url('//at.alicdn.com/t/font_525460_d0ysfwzacahsemi.ttf') format('truetype'), url('//at.alicdn.com/t/font_525460_d0ysfwzacahsemi.svg#iconfont') format('svg');
+}
+
+.hz-icon {
+  font-family: "iconfont" !important;
+  font-size: 20px;
+  font-style: normal;
+  text-align: center;
+  user-select: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.hz-icon-edit {
+  position: absolute;
+  top: -4px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.hz-flex-img {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.hz-flex-img img {
+  width: 100%;
+  height: 100%;
+}
+
+.hz-icon-trash:before {
+  content: "\e605";
+}
+
+.hz-edit-img {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+
+}
+
+.hz-edit-img img {
+  max-width: 300px;
+  max-height: 200px;
+  margin-bottom: 10px;
+}
+
+.hz-edit-del {
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+}

manager/src/components/hotzone/components/Hotzone.vue

@@ -0,0 +1,101 @@
+<template>
+  <div ref="content" class="hz-m-wrap">
+    <img class="hz-u-img" :src="image" />
+    <ul class="hz-m-area" v-add-item>
+      <zone
+        class="hz-m-item"
+        v-for="(zone, index) in zones"
+        :key="index"
+        :index="index"
+        :setting="zone"
+        @delItem="removeItem($event)"
+        @changeInfo="changeInfo($event)"
+      ></zone>
+    </ul>
+  </div>
+</template>
+
+<script>
+import Zone from "./Zone";
+import addItem from "../directives/addItem";
+
+export default {
+  name: "HotZone",
+  data() {
+    return {
+      zones: [],
+    };
+  },
+  props: {
+    image: {
+      type: String,
+      required: true,
+    },
+    zonesInit: {
+      type: Array,
+      default: () => [],
+    },
+    max: {
+      type: Number,
+    },
+  },
+  mounted() {
+    this.zones = this.zonesInit.concat();
+  },
+  methods: {
+    changeInfo(res) {
+      let { info, index, zoneInfo } = res;
+      info = { ...zoneInfo, ...info };
+      // 改变热区并发送change通知
+      Object.assign(this.zones[index], info);
+      this.hasChange("changeInfo");
+    },
+    addItem(setting) {
+      this.zones.push(setting);
+      this.$emit("choose");
+      // this.hasChange()  不应该发送通知，mouseup判定成功才应该发
+      // this.$emit('add', setting)
+    },
+    eraseItem(index = this.zones.length - 1) {
+      this.zones.splice(index, 1);
+      this.$emit("erase", index);
+    },
+    isOverRange() {
+      let { max, zones } = this;
+
+      return max && zones.length > max;
+    },
+    overRange() {
+      const index = this.zones.length - 1;
+
+      this.zones.splice(index, 1);
+      this.$emit("overRange", index);
+    },
+    removeItem(index = this.zones.length - 1) {
+      this.zones.splice(index, 1);
+      this.hasChange("removeItem");
+      this.$emit("remove", index);
+    },
+    changeItem(info, isAdd) {
+      const index = this.zones.length - 1;
+      // 改变热区并发送change通知
+      Object.assign(this.zones[index], info);
+      this.hasChange("changeItem");
+      isAdd && this.$emit("add", this.zones[index]);
+    },
+    hasChange(from) {
+      this.$emit("change", this.zones);
+    },
+  },
+  directives: {
+    addItem,
+  },
+  components: {
+    Zone,
+  },
+};
+</script>
+
+<style scoped>
+@import "../assets/styles/main.css";
+</style>

manager/src/components/hotzone/components/Zone.vue

@@ -0,0 +1,212 @@
+<template>
+  <li
+    v-drag-item
+    :style="{
+      top: zoneTop,
+      left: zoneLeft,
+      width: zoneWidth,
+      height: zoneHeight,
+    }"
+  >
+    <ul
+      v-change-size
+      class="hz-m-box"
+      :class="{
+        'hz-z-hidden': tooSmall,
+        'hz-m-hoverbox': !hideZone,
+      }"
+    >
+      <li class="hz-u-index" :title="`热区${index + 1}`">{{ index + 1 }}</li>
+      
+      <li
+        title="删除该热区"
+        v-show="!hideZone"
+        class="hz-u-close hz-icon hz-icon-trash"
+        @click.prevent.stop="delItem(index)"
+        @mousedown.stop
+        @mouseup.stop
+        @mousemove.stop
+      ></li>
+      <li
+        title="编辑该热区"
+        v-show="!hideZone"
+        class="hz-u-close hz-icon hz-icon-edit"
+        @click.prevent.stop="showModalFn(index)"
+        @mousedown.stop
+        @mouseup.stop
+        @mousemove.stop
+      >
+        <img width="17" height="17" src="../assets/styles/icons8-edit-64.png"></img>
+      </li>
+      <li class="hz-flex-img">
+        <img class="hz-u-img" :src="zoneForm.img" />
+      </li>
+      <li class="hz-u-square hz-u-square-tl" data-pointer="dealTL"></li>
+      <li class="hz-u-square hz-u-square-tc" data-pointer="dealTC"></li>
+      <li class="hz-u-square hz-u-square-tr" data-pointer="dealTR"></li>
+      <li class="hz-u-square hz-u-square-cl" data-pointer="dealCL"></li>
+      <li class="hz-u-square hz-u-square-cr" data-pointer="dealCR"></li>
+      <li class="hz-u-square hz-u-square-bl" data-pointer="dealBL"></li>
+      <li class="hz-u-square hz-u-square-bc" data-pointer="dealBC"></li>
+      <li class="hz-u-square hz-u-square-br" data-pointer="dealBR"></li>
+    </ul>
+    <Modal
+      v-model="showModal"
+      title="编辑热区"
+      draggable
+      scrollable
+      :mask="false"
+      ok-text="保存"
+      @on-ok="saveZone"
+      @on-cancel="
+        () => {
+          showModal = false;
+        }
+      "
+    >
+      <div>
+        <div class="hz-edit-img">
+          <img class="show-image" :src="zoneForm.img" alt />
+        </div>
+
+        <Form :model="zoneForm" :label-width="80">
+          <FormItem label="图片链接：">
+            <Input v-model="zoneForm.img"></Input>
+            <Button size="small" type="primary" @click="handleSelectImg"
+              >选择图片</Button
+            >
+          </FormItem>
+          <FormItem label="跳转链接：">
+            <Input v-model="zoneForm.link"></Input>
+            <Button size="small" type="primary" @click="handleSelectLink"
+              >选择链接</Button
+            >
+          </FormItem>
+        </Form>
+      </div>
+    </Modal>
+    <!-- 选择商品。链接 -->
+    <liliDialog ref="liliDialog" @selectedLink="selectedLink"></liliDialog>
+    <!-- 选择图片 -->
+    <Modal width="1200px" v-model="picModelFlag" footer-hide>
+      <ossManage
+        @callback="callbackSelected"
+        :isComponent="true"
+        ref="ossManage"
+      />
+    </Modal>
+  </li>
+</template>
+
+<script>
+import changeSize from "../directives/changeSize";
+import dragItem from "../directives/dragItem";
+import ossManage from "@/views/sys/oss-manage/ossManage";
+
+export default {
+  name: "Zone",
+  components: {
+    ossManage,
+  },
+  data() {
+    return {
+      zoneTop: "",
+      zoneLeft: "",
+      zoneWidth: "",
+      zoneHeight: "",
+      hideZone: false,
+      tooSmall: false,
+      showModal: false,
+      picModelFlag: false,
+      currentIndex: 0,
+      zoneForm: {
+        img: "",
+        link: "",
+        type: "",
+      },
+    };
+  },
+
+  props: ["index", "setting"],
+  mounted() {
+    console.log(this.setting);
+    this.setZoneInfo(this.setting);
+  },
+  methods: {
+    setZoneInfo(val) {
+      this.zoneTop = this.getZoneStyle(val.topPer);
+      this.zoneLeft = this.getZoneStyle(val.leftPer);
+      this.zoneWidth = this.getZoneStyle(val.widthPer);
+      this.zoneHeight = this.getZoneStyle(val.heightPer);
+      this.tooSmall = val.widthPer < 0.01 && val.heightPer < 0.01;
+      this.zoneForm.img = val.img;
+      this.zoneForm.link = val.link;
+      this.zoneForm.type = val.type;
+    },
+    handlehideZone(isHide = true) {
+      if (this.hideZone === isHide) {
+        return;
+      }
+
+      this.hideZone = isHide;
+    },
+    changeInfo(info = {}) {
+      const { index } = this;
+
+      this.$emit("changeInfo", {
+        info,
+        index,
+        zoneInfo: this.zoneForm,
+      });
+    },
+    showModalFn(index) {
+      this.showModal = true;
+      this.currentIndex = index;
+    },
+    // 选择图片
+    handleSelectImg() {
+      this.$refs.ossManage.selectImage = true;
+      this.picModelFlag = true;
+    },
+    // 选择图片回调
+    callbackSelected(item) {
+      this.picModelFlag = false;
+      this.zoneForm.img = item.url;
+    },
+
+    // 调起选择链接弹窗
+    handleSelectLink(item, index) {
+      if (item) this.selectedNav = item;
+      this.$refs.liliDialog.open("link");
+    },
+    // 已选链接
+    selectedLink(val) {
+      this.zoneForm.link = this.$options.filters.formatLinkType(val);
+      this.zoneForm.type = val.___type;
+    },
+    saveZone() {},
+    delZone() {
+      this.delItem(this.currentIndex);
+    },
+    delItem(index) {
+      this.$emit("delItem", index);
+    },
+    getZoneStyle(val) {
+      return `${(val || 0) * 100}%`;
+    },
+  },
+
+  watch: {
+    setting: {
+      handler: function (val) {
+        this.setZoneInfo(val);
+      },
+      deep: true,
+    },
+  },
+  directives: {
+    changeSize,
+    dragItem,
+  },
+};
+</script>

manager/src/components/hotzone/directives/addItem.js

@@ -0,0 +1,100 @@
+import _ from '../utils'
+
+export default {
+  bind: function (el, binding, vnode) {
+    const MIN_LIMIT = _.MIN_LIMIT
+
+    el.addEventListener('mousedown', handleMouseDown,{ passive: false })
+
+    function handleMouseDown (e) {
+      console.log('additem', e)
+      e && e.preventDefault()
+
+      let itemInfo = {
+        top: _.getDistanceY(e, el),
+        left: _.getDistanceX(e, el),
+        width: 0,
+        height: 0
+      }
+      let container = _.getOffset(el)
+
+      // Only used once at the beginning of init
+      let setting = {
+        topPer: _.decimalPoint(itemInfo.top / container.height),
+        leftPer: _.decimalPoint(itemInfo.left / container.width),
+        widthPer: 0,
+        heightPer: 0
+      }
+      let preX = _.getPageX(e)
+      let preY = _.getPageY(e)
+
+      vnode.context.addItem(setting)// 这里去添加并发送了add通知，不应该发送通知
+
+      window.addEventListener('mousemove', handleChange,{ passive: false })
+      window.addEventListener('mouseup', handleMouseUp,{ passive: false })
+
+      function handleChange (e) {
+        e && e.preventDefault()
+
+        let moveX = _.getPageX(e) - preX
+        let moveY = _.getPageY(e) - preY
+        preX = _.getPageX(e)
+        preY = _.getPageY(e)
+
+        // Not consider the direction of movement first, consider only the lower right drag point
+        let minLimit = 0
+        // 添加热区时，判定鼠标释放时，满足（热区大于48*48时）条件时生效
+        let styleInfo = _.dealBR(itemInfo, moveX, moveY, minLimit)
+
+        // Boundary value processing 改变热区大小时边界条件的处理
+        itemInfo = _.dealEdgeValue(itemInfo, styleInfo, container, vnode.context.zones)
+
+        Object.assign(el.lastElementChild.style, {
+          top: `${itemInfo.top}px`,
+          left: `${itemInfo.left}px`,
+          width: `${itemInfo.width}px`,
+          height: `${itemInfo.height}px`
+        })
+      }
+
+      function handleMouseUp () {
+        let perInfo = {
+          topPer: _.decimalPoint(itemInfo.top / container.height),
+          leftPer: _.decimalPoint(itemInfo.left / container.width),
+          widthPer: _.decimalPoint(itemInfo.width / container.width),
+          heightPer: _.decimalPoint(itemInfo.height / container.height),
+          img: "",
+          link: "",
+          type: "",
+        }
+
+        if (vnode.context.isOverRange()) {
+          vnode.context.overRange() // 判断超出个数限制，给overRange钩子抛回调
+        } else if (container.height < MIN_LIMIT && itemInfo.width > MIN_LIMIT) {
+          vnode.context.changeItem(Object.assign(perInfo, {
+            topPer: 0,
+            heightPer: 1
+          }), true)
+        } else if (container.width < MIN_LIMIT && itemInfo.height > MIN_LIMIT) {
+          vnode.context.changeItem(Object.assign(perInfo, {
+            leftper: 0,
+            widthPer: 1
+          }), true)
+        } else if (itemInfo.width > MIN_LIMIT && itemInfo.height > MIN_LIMIT) {
+          vnode.context.changeItem(perInfo, true)
+        } else {
+          // 当添加区域超出范围或小于最小区域（48*48）时触发，删除当亲绘制的热区并发送erase事件通知
+          vnode.context.eraseItem()
+        }
+
+        window.removeEventListener('mousemove', handleChange)
+        window.removeEventListener('mouseup', handleMouseUp)
+      }
+    }
+
+    el.$destroy = () => el.removeEventListener('mousedown', handleMouseDown)
+  },
+  unbind: function (el) {
+    el.$destroy()
+  }
+}

manager/src/components/hotzone/directives/changeSize.js

@@ -0,0 +1,91 @@
+import _ from '../utils'
+
+export default {
+  bind: function (el, binding, vnode) {
+    el.addEventListener('mousedown', handleMouseDown,{ passive: false })
+
+    function handleMouseDown (e) {
+      let pointer = e.target.dataset.pointer //元素上绑定的方法名
+
+      if (!pointer) {
+        return
+      }
+
+      e && e.stopPropagation()
+
+      let zone = el.parentNode
+      let setting = vnode.context.setting
+      let currentIndex = vnode.context.index
+      let container = _.getOffset(zone.parentNode)
+      let itemInfo = {
+        width: _.getOffset(zone).width || 0,
+        height: _.getOffset(zone).height || 0,
+        top: setting.topPer * container.height || 0,
+        left: setting.leftPer * container.width || 0
+      }
+      let preX = _.getPageX(e)
+      let preY = _.getPageY(e)
+      let flag
+
+      // Hide the info displayed by hover
+      vnode.context.handlehideZone(true)
+
+      window.addEventListener('mousemove', handleChange,{ passive: false })
+      window.addEventListener('mouseup', handleMouseUp,{ passive: false })
+
+      function handleChange (e) {
+        e && e.preventDefault()
+        flag = true
+
+        let moveX = _.getPageX(e) - preX
+        let moveY = _.getPageY(e) - preY
+
+        preX = _.getPageX(e)
+        preY = _.getPageY(e)
+
+        // Handling the situation when different dragging points are selected
+        let styleInfo = _[pointer](itemInfo, moveX, moveY)//调用对应的方法
+        // Boundary value processing
+        itemInfo = _.dealEdgeValue(itemInfo, styleInfo, container, vnode.context.$parent.zones, currentIndex)
+
+        Object.assign(zone.style, {
+          top: `${itemInfo.top}px`,
+          left: `${itemInfo.left}px`,
+          width: `${itemInfo.width}px`,
+          height: `${itemInfo.height}px`
+        })
+      }
+
+      function handleMouseUp () {
+        if (flag) {
+          flag = false
+          let perInfo = {
+            topPer: _.decimalPoint(itemInfo.top / container.height),
+            leftPer: _.decimalPoint(itemInfo.left / container.width),
+            widthPer: _.decimalPoint(itemInfo.width / container.width),
+            heightPer: _.decimalPoint(itemInfo.height / container.height)
+          }
+          vnode.context.changeInfo(perInfo)
+
+          // 兼容数据无变更情况下导致 computed 不更新，数据仍为 px 时 resize 出现的问题
+          Object.assign(zone.style, {
+            top: `${itemInfo.top}px`,
+            left: `${itemInfo.left}px`,
+            width: `${itemInfo.width}px`,
+            height: `${itemInfo.height}px`
+          })
+        }
+        // Show the info
+        vnode.context.handlehideZone(false)
+
+        window.removeEventListener('mousemove', handleChange)
+        window.removeEventListener('mouseup', handleMouseUp)
+      }
+    }
+
+    el.$destroy = () => el.removeEventListener('mousedown', handleMouseDown)
+  },
+  unbind: function (el) {
+    el.$destroy()
+  }
+}

manager/src/components/hotzone/directives/dragItem.js

@@ -0,0 +1,108 @@
+import _ from '../utils'
+
+export default {
+  bind: function (el, binding, vnode) {
+    el.addEventListener('mousedown', handleMouseDown)
+    let collision
+    function handleMouseDown (e) {
+      e && e.stopPropagation()
+      let container = _.getOffset(el.parentNode)
+      let preX = _.getPageX(e)
+      let preY = _.getPageY(e)
+      let topPer
+      let leftPer
+      let flag
+
+      window.addEventListener('mousemove', handleChange,{ passive: false })
+      window.addEventListener('mouseup', handleMouseUp,{ passive: false })
+
+      function handleChange (e) {
+        e && e.preventDefault()
+        flag = true
+        collision = false
+        // Hide the info displayed by hover
+        vnode.context.handlehideZone(true)
+
+        let setting = vnode.context.setting
+        let currentIndex = vnode.context.index
+        let moveX = _.getPageX(e) - preX
+        let moveY = _.getPageY(e) - preY
+
+        setting.topPer = setting.topPer || 0
+        setting.leftPer = setting.leftPer || 0
+        topPer = _.decimalPoint(moveY / container.height + setting.topPer)
+        leftPer = _.decimalPoint(moveX / container.width + setting.leftPer)
+
+        // Hotzone moving boundary processing
+        if (topPer < 0) {
+          topPer = 0
+          moveY = -container.height * setting.topPer
+        }
+
+        if (leftPer < 0) {
+          leftPer = 0
+          moveX = -container.width * setting.leftPer
+        }
+
+        if (topPer + setting.heightPer > 1) {
+          topPer = 1 - setting.heightPer
+          moveY = container.height * (topPer - setting.topPer)
+        }
+
+        if (leftPer + setting.widthPer > 1) {
+          leftPer = 1 - setting.widthPer
+          moveX = container.width * (leftPer - setting.leftPer)
+        }
+        // 拖拽碰撞检测
+        if (vnode.context.$parent.zones.length > 1) {
+          let currentzones = JSON.parse(JSON.stringify(vnode.context.$parent.zones)).map((zone) => {
+            return {
+              left: (zone.leftPer || 0) * container.width,
+              top: (zone.topPer || 0) * container.height,
+              width: (zone.widthPer || 0) * container.width,
+              height: (zone.heightPer || 0) * container.height
+            }
+          })
+          // 矫正
+          let changeSetting = {}
+          changeSetting.left = setting.leftPer * container.width + moveX
+          changeSetting.top = setting.topPer * container.height + moveY
+          changeSetting.width = setting.widthPer * container.width
+          changeSetting.height = setting.heightPer * container.height
+          // 碰撞检测
+          for (let i = 0, len = currentzones.length; i < len; i++) {
+            if (currentIndex !== i && _.handleEgdeCollisions(currentzones[i], changeSetting)) {
+              collision = true
+              break
+            }
+          }
+        }
+        el.style.transform = `translate(${moveX}px, ${moveY}px)`
+      }
+
+      function handleMouseUp () {
+        if (flag) {
+          flag = false
+          el.style.transform = 'translate(0, 0)'
+          if (!collision) {
+            vnode.context.changeInfo({
+              topPer,
+              leftPer
+            })
+          }
+        }
+
+        // Show the info
+        vnode.context.handlehideZone(false)
+
+        window.removeEventListener('mousemove', handleChange)
+        window.removeEventListener('mouseup', handleMouseUp)
+      }
+    }
+
+    el.$destroy = () => el.removeEventListener('mousedown', handleMouseDown)
+  },
+  unbind: function (el) {
+    el.$destroy()
+  }
+}

manager/src/components/hotzone/index.js

@@ -0,0 +1,7 @@
+import hotzone from './components/Hotzone.vue'
+
+hotzone.install = (Vue) => {
+  Vue.component(hotzone.name, hotzone)
+}
+
+export default hotzone

manager/src/components/hotzone/utils/index.js

@@ -0,0 +1,274 @@
+let _ = {
+  MIN_LIMIT: 48, // Min size of zone
+  DECIMAL_PLACES: 4 // Hotzone positioning decimal point limit number of digits
+}
+
+/**
+ * Get a power result of 10 for the power of the constant
+ * @return {Number}
+ */
+_.getMultiple = (decimalPlaces = _.DECIMAL_PLACES) => {
+  return Math.pow(10, decimalPlaces)
+}
+
+/**
+ * Limit decimal places
+ * @param  {Number} num
+ * @return {Number}
+ */
+_.decimalPoint = (val = 0) => { // 处理js小数点计算不精确问题，先放再缩小
+  return Math.round(val * _.getMultiple()) / _.getMultiple() || 0
+}
+
+/**
+ * Get element width and height
+ * @param  {Object} elem
+ * @return {Object}
+ */
+_.getOffset = (elem = {}) => ({
+  width: elem.clientWidth || 0,
+  height: elem.clientHeight || 0
+})
+
+/**
+ * Get pageX
+ * @param  {Object} e
+ * @return {Number}
+ */
+_.getPageX = (e) => ('pageX' in e) ? e.pageX : e.touches[0].pageX
+
+/**
+ * Get pageY
+ * @param  {Object} e
+ * @return {Number}
+ */
+_.getPageY = (e) => ('pageY' in e) ? e.pageY : e.touches[0].pageY
+
+/**
+ * Gets the abscissa value of the mouse click relative to the target node
+ * @param  {Object} e
+ * @param  {Object} container
+ * @return {Number}
+ */
+_.getDistanceX = (e, container) =>
+  _.getPageX(e) - (container.getBoundingClientRect().left + window.pageXOffset)
+
+/**
+ * Gets the ordinate value of the mouse click relative to the target node
+ * @param  {Object} e
+ * @param  {Object} container
+ * @return {Number}
+ */
+_.getDistanceY = (e, container) =>
+  _.getPageY(e) - (container.getBoundingClientRect().top + window.pageYOffset)
+
+// 检测区域是否有碰撞 true 有碰撞交集 ,false 无碰撞
+_.handleEgdeCollisions = (rect1, rect2) => {
+  const l1 = { left: rect1.left, top: rect1.top }
+  const r1 = { left: rect1.left + rect1.width, top: rect1.top + rect1.height }
+  const l2 = { left: rect2.left, top: rect2.top }
+  const r2 = { left: rect2.left + rect2.width, top: rect2.top + rect2.height }
+  return !(
+    l1.left > r2.left ||
+    l2.left > r1.left ||
+    l1.top > r2.top ||
+    l2.top > r1.top
+  )
+}
+/**
+ * Treatment of boundary conditions when changing the size of the hotzone 改变热区大小时边界条件的处理（如果要避免热区重叠，代码要加载这里）
+ * @param {Object} itemInfo
+ * @param {Object} styleInfo
+ * @param {Object} container
+ */
+_.dealEdgeValue = (itemInfo, styleInfo, container, zones, currentIndex = zones.length - 1) => {
+  
+  if (Object.prototype.hasOwnProperty.call(styleInfo, "left") && styleInfo.left < 0) {
+    styleInfo.left = 0
+    styleInfo.width = itemInfo.width + itemInfo.left
+  }
+
+  if (Object.prototype.hasOwnProperty.call(styleInfo, "top") && styleInfo.top < 0) {
+    styleInfo.top = 0
+    styleInfo.height = itemInfo.height + itemInfo.top
+  }
+
+  if (!Object.prototype.hasOwnProperty.call(styleInfo, "left") && Object.prototype.hasOwnProperty.call(styleInfo, "width")) {
+    if (itemInfo.left + styleInfo.width > container.width) {
+      styleInfo.width = container.width - itemInfo.left
+    }
+  }
+
+  if (!Object.prototype.hasOwnProperty.call(styleInfo, "top") && Object.prototype.hasOwnProperty.call(styleInfo, "height")) {
+    if (itemInfo.top + styleInfo.height > container.height) {
+      styleInfo.height = container.height - itemInfo.top
+    }
+  }
+  // 与其他热区重叠，则修正 检测是否发生碰撞
+  if (zones.length > 1) {
+    let currentzones = JSON.parse(JSON.stringify(zones)).map((zone) => {
+      return {
+        left: (zone.leftPer || 0) * container.width,
+        top: (zone.topPer || 0) * container.height,
+        width: (zone.widthPer || 0) * container.width,
+        height: (zone.heightPer || 0) * container.height
+      }
+    })
+    let current = { ...itemInfo, ...styleInfo }
+    for (let i = 0, len = currentzones.length; i < len; i++) {
+      if (currentIndex !== i && _.handleEgdeCollisions(currentzones[i], current)) {
+        return itemInfo
+      }
+    }
+  }
+
+  return Object.assign(itemInfo, styleInfo)
+}
+
+/**
+ * Handle different drag points, capital letters mean: T-top，L-left，C-center，R-right，B-bottom
+ * @param  {Object} itemInfo
+ * @param  {Number} moveX
+ * @param  {Number} moveY
+ * @return {Object}
+ */
+_.dealTL = (itemInfo, moveX, moveY, minLimit = _.MIN_LIMIT) => {
+  let styleInfo = {}
+  let width = itemInfo.width - moveX
+  let height = itemInfo.height - moveY
+
+  if (width >= Math.min(minLimit, itemInfo.width)) {
+    Object.assign(styleInfo, {
+      width,
+      left: itemInfo.left + moveX
+    })
+  }
+
+  if (height >= Math.min(minLimit, itemInfo.height)) {
+    Object.assign(styleInfo, {
+      height,
+      top: itemInfo.top + moveY
+    })
+  }
+
+  return styleInfo
+}
+
+_.dealTC = (itemInfo, moveX, moveY, minLimit = _.MIN_LIMIT) => {
+  let styleInfo = {}
+  let height = itemInfo.height - moveY
+
+  if (height >= Math.min(minLimit, itemInfo.height)) {
+    styleInfo = {
+      height,
+      top: itemInfo.top + moveY
+    }
+  }
+
+  return styleInfo
+}
+
+_.dealTR = (itemInfo, moveX, moveY, minLimit = _.MIN_LIMIT) => {
+  let styleInfo = {}
+  let width = itemInfo.width + moveX
+  let height = itemInfo.height - moveY
+
+  if (width >= Math.min(minLimit, itemInfo.width)) {
+    Object.assign(styleInfo, {
+      width
+    })
+  }
+
+  if (height >= Math.min(minLimit, itemInfo.height)) {
+    Object.assign(styleInfo, {
+      height,
+      top: itemInfo.top + moveY
+    })
+  }
+
+  return styleInfo
+}
+
+_.dealCL = (itemInfo, moveX, moveY, minLimit = _.MIN_LIMIT) => {
+  let styleInfo = {}
+  let width = itemInfo.width - moveX
+
+  if (width >= Math.min(minLimit, itemInfo.width)) {
+    Object.assign(styleInfo, {
+      width,
+      left: itemInfo.left + moveX
+    })
+  }
+
+  return styleInfo
+}
+
+_.dealCR = (itemInfo, moveX, moveY, minLimit = _.MIN_LIMIT) => {
+  let styleInfo = {}
+  let width = itemInfo.width + moveX
+
+  if (width >= Math.min(minLimit, itemInfo.width)) {
+    Object.assign(styleInfo, {
+      width
+    })
+  }
+
+  return styleInfo
+}
+
+_.dealBL = (itemInfo, moveX, moveY, minLimit = _.MIN_LIMIT) => {
+  let styleInfo = {}
+  let width = itemInfo.width - moveX
+  let height = itemInfo.height + moveY
+
+  if (width >= Math.min(minLimit, itemInfo.width)) {
+    Object.assign(styleInfo, {
+      width,
+      left: itemInfo.left + moveX
+    })
+  }
+
+  if (height >= Math.min(minLimit, itemInfo.height)) {
+    Object.assign(styleInfo, {
+      height
+    })
+  }
+
+  return styleInfo
+}
+
+_.dealBC = (itemInfo, moveX, moveY, minLimit = _.MIN_LIMIT) => {
+  let styleInfo = {}
+  let height = itemInfo.height + moveY
+
+  if (height >= Math.min(minLimit, itemInfo.height)) {
+    Object.assign(styleInfo, {
+      height
+    })
+  }
+
+  return styleInfo
+}
+// 添加热区时，判定鼠标释放点满足一下条件时生效
+_.dealBR = (itemInfo, moveX, moveY, minLimit = _.MIN_LIMIT) => {
+  let styleInfo = {}
+  let width = itemInfo.width + moveX
+  let height = itemInfo.height + moveY
+  if (width >= Math.min(minLimit, itemInfo.width)) {
+    // 改变后的宽度 >= min(之前宽度,内置的最小宽度标准)，即生效
+    Object.assign(styleInfo, {
+      width
+    })
+  }
+
+  if (height >= Math.min(minLimit, itemInfo.height)) {
+    // 改变后的高度 大于等于 Min（最小高度，之前高度）时，生效
+    Object.assign(styleInfo, {
+      height
+    })
+  }
+
+  return styleInfo
+}
+
+export default _

manager/src/main.js

@@ -17,8 +17,8 @@ import { setStore, getStore, removeStore } from '@/libs/storage'
 import util from '@/libs/util'
 
 import * as filters from '@/utils/filters' // global filter
-import liliDialog from '@/views/lili-dialog'
+import liliDialog from '@/components/lili-dialog'
-import i18nBox from '@/views/lili-components/i18n-translate'
+import i18nBox from '@/components/i18n-translate'
 import {md5} from '@/utils/md5.js';
 
 // 打印

manager/src/router/router.js

@@ -257,13 +257,13 @@ export const otherRouter = {
       path: "/floorList/renovation",
       title: "编辑模板",
       name: "renovation",
-      component: () => import("@/views/lili-floor-renovation/renovation.vue")
+      component: () => import("@/views/page-decoration/renovation.vue")
     },
     {
       path: "/floorList/main",
       title: "编辑模板",
       name: "main",
-      component: () => import("@/views/lili-floor-renovation/wap/main.vue")
+      component: () => import("@/views/page-decoration/wap/main.vue")
     },
     {
       path: "add-sms-sign",

manager/src/views/Main.vue

@@ -77,10 +77,10 @@
 </template>
 
 <script>
-import shrinkableMenu from "./main-components/shrinkable-menu/shrinkable-menu.vue";
+import shrinkableMenu from "./main-parts/shrinkable-menu/shrinkable-menu.vue";
-import tagsPageOpened from "./main-components/tags-page-opened.vue";
+import tagsPageOpened from "./main-parts/tags-page-opened.vue";
-import messageTip from "./main-components/message-tip.vue";
+import messageTip from "./main-parts/message-tip.vue";
-import circleLoading from "@/views/my-components/lili/circle-loading.vue";
+import circleLoading from "@/components/lili/circle-loading.vue";
 import Cookies from "js-cookie";
 import util from "@/libs/util.js";
 import { getNoticePage, logout } from "@/api/index";

manager/src/views/change-password/change-password.vue

@@ -25,7 +25,7 @@
 </template>
 
 <script>
-import SetPassword from "@/views/my-components/lili/set-password";
+import SetPassword from "@/components/lili/set-password";
 import { changePass } from "@/api/index";
 
 export default {

manager/src/views/custom-words/index.vue

@@ -59,7 +59,7 @@ import {
 
 import { regular } from "@/utils";
 export default {
-  name: "customWords",
+  name: "custom-words",
   data() {
     return {
       loading: true, // 表单加载状态

manager/src/views/goods/goods-manage/brand.vue

@@ -43,7 +43,7 @@ import {
   disableBrand,
   delBrand,
 } from "@/api/goods";
-import uploadPicInput from "@/views/my-components/lili/upload-pic-input";
+import uploadPicInput from "@/components/lili/upload-pic-input";
 
 import {regular} from "@/utils";
 

manager/src/views/goods/goods-manage/category.vue

@@ -194,7 +194,7 @@ import {
   getCategoryTree,
 } from "@/api/goods";
 
-import uploadPicInput from "@/views/my-components/lili/upload-pic-input";
+import uploadPicInput from "@/components/lili/upload-pic-input";
 import { regular } from "@/utils";
 export default {
   name: "goods-category",

manager/src/views/home/home.vue

@@ -200,7 +200,7 @@ import { homeStatistics, hotGoods, hotShops, getNoticePage } from "@/api/index";
 import * as API_Goods from "@/api/goods";
 import { Chart } from "@antv/g2";
 import * as API_Member from "@/api/member";
-// import i18nBox from '@/views/lili-components/i18n-translate'
+// import i18nBox from '@/components/i18n-translate'
 export default {
   name: "home",
   // components:{

manager/src/views/login.vue

@@ -34,11 +34,11 @@
 <script>
 import { login, userInfo } from "@/api/index";
 import Cookies from "js-cookie";
-import Header from "@/views/main-components/header";
+import Header from "@/views/main-parts/header";
-import Footer from "@/views/main-components/footer";
+import Footer from "@/views/main-parts/footer";
-import LangSwitch from "@/views/main-components/lang-switch";
+import LangSwitch from "@/views/main-parts/lang-switch";
 import util from "@/libs/util.js";
-import verify from "@/views/my-components/verify";
+import verify from "@/components/verify";
 
 export default {
   components: {

manager/src/views/member/list/index.vue

@@ -104,7 +104,7 @@
 </template>
 
 <script>
-import region from "@/views/lili-components/region";
+import region from "@/components/region";
 import * as API_Member from "@/api/member.js";
 import ossManage from "@/views/sys/oss-manage/ossManage";
 import * as RegExp from "@/libs/RegExp.js";

manager/src/views/member/list/memberDetail.vue

@@ -353,10 +353,10 @@
 </template>
 
 <script>
-  import region from "@/views/lili-components/region";
+  import region from "@/components/region";
   import * as API_Member from "@/api/member.js";
   import ossManage from "@/views/sys/oss-manage/ossManage";
-  import liliMap from "@/views/my-components/map/index";
+  import liliMap from "@/components/map/index";
   import * as RegExp from '@/libs/RegExp.js';
   import * as API_Order from "@/api/order.js";
 

manager/src/views/member/list/memberRecycle.vue

@@ -159,7 +159,7 @@
 </template>
 
 <script>
-import region from "@/views/lili-components/region";
+import region from "@/components/region";
 import * as API_Member from "@/api/member.js";
 import ossManage from "@/views/sys/oss-manage/ossManage";
 

manager/src/views/member/point/point.vue

@@ -49,7 +49,7 @@
 </template>
 
 <script>
-  import region from "@/views/lili-components/region";
+  import region from "@/components/region";
   import * as API_Member from "@/api/member.js";
   import ossManage from "@/views/sys/oss-manage/ossManage";
 

manager/src/views/order/order/orderDetail.vue

@@ -505,7 +505,7 @@
 <script>
 import * as API_Order from "@/api/order";
 import * as RegExp from "@/libs/RegExp.js";
-import region from "@/views/lili-components/region";
+import region from "@/components/region";
 import vueQr from "vue-qr";
 export default {
   name: "orderList",

manager/src/views/page-decoration/wap/config.js

@@ -25,6 +25,7 @@ export const modelData = [
     type: "carousel",
     name: "图片轮播",
     img: "md-image",
+    onlyImg: true,
     notTitle: false,
     close: true,
     options: {
@@ -33,19 +34,22 @@ export const modelData = [
           img: "https://i.loli.net/2020/12/05/fKH4CwImpbuD5Xj.png",
           url: "",
           link: "",
-          size: "750*350"
+          size: "750*350",
+          model: "link"
         },
         {
           img: "https://i.loli.net/2020/12/05/12kleCgrSLfKoQs.png",
           url: "",
           link: "",
-          size: "750*350"
+          size: "750*350",
+          model: "link"
         },
         {
           img: "https://i.loli.net/2021/05/14/ZlzcCdnpejtN9gL.png",
           url: "",
           link: "",
-          size: "750*350"
+          size: "750*350",
+          model: "link"
         }
       ]
     }
@@ -55,6 +59,7 @@ export const modelData = [
     name: "左一右二",
     notAdd: true,
     drawer: true,
+    onlyImg: true,
     view: "tpl_ad_list",
     img: "md-image",
     options: {
@@ -63,19 +68,22 @@ export const modelData = [
           img: "https://i.loli.net/2021/05/14/dtNvI5UxchXn8gz.png",
           url: "",
           link: "",
-          size: "335*335"
+          size: "335*335",
+          model: "link"
         },
         {
           img: "https://i.loli.net/2021/05/14/kdB3AE9ay4c1SnN.png",
           url: "",
           link: "",
-          size: "335*177"
+          size: "335*177",
+          model: "link"
         },
         {
           img: "https://i.loli.net/2021/05/14/FmDr9ksiXeEqYLU.png",
           url: "",
           link: "",
-          size: "335*177"
+          size: "335*177",
+          model: "link"
         }
       ]
     }
@@ -97,7 +105,8 @@ export const modelData = [
           bk_color: "#FF0000",
           textAlign: "center",
           link: "",
-          url: ''
+          url: '',
+          model: "link"
         }
       ]
     }
@@ -107,7 +116,7 @@ export const modelData = [
     name: "左二右一",
     notAdd: true,
     drawer: true,
-
+    onlyImg: true,
     img: "md-image",
     options: {
       list: [
@@ -115,19 +124,22 @@ export const modelData = [
           img: "https://i.loli.net/2021/05/14/kdB3AE9ay4c1SnN.png",
           url: "",
           link: "",
-          size: "335*177"
+          size: "335*177",
+          model: "link"
         },
         {
           img: "https://i.loli.net/2021/05/14/FmDr9ksiXeEqYLU.png",
           url: "",
           link: "",
-          size: "335*177"
+          size: "335*177",
+          model: "link"
         },
         {
           img: "https://i.loli.net/2021/05/14/dtNvI5UxchXn8gz.png",
           url: "",
           link: "",
-          size: "335*335"
+          size: "335*335",
+          model: "link"
         }
       ]
     }
@@ -137,7 +149,7 @@ export const modelData = [
     name: "三列单行",
     drawer: true,
     notAdd: true,
-
+    onlyImg: true,
     img: "md-image",
     options: {
       list: [
@@ -145,19 +157,22 @@ export const modelData = [
           img: "https://i.loli.net/2021/05/14/dtNvI5UxchXn8gz.png",
           url: "",
           link: "",
-          size: "226*226 (1:1)"
+          size: "226*226 (1:1)",
+          model: "link"
         },
         {
           img: "https://i.loli.net/2021/05/14/dtNvI5UxchXn8gz.png",
           url: "",
           link: "",
-          size: "226*226 (1:1)"
+          size: "226*226 (1:1)",
+          model: "link"
         },
         {
           img: "https://i.loli.net/2021/05/14/dtNvI5UxchXn8gz.png",
           url: "",
           link: "",
-          size: "226*226 (1:1)"
+          size: "226*226 (1:1)",
+          model: "link"
         }
       ]
     }
@@ -167,7 +182,7 @@ export const modelData = [
     name: "一张大图",
     drawer: true,
     notAdd: true,
-
+    onlyImg: true,
     img: "md-image",
     options: {
       list: [
@@ -175,7 +190,8 @@ export const modelData = [
           img: "https://i.loli.net/2020/12/05/8wSNWbnqujDh6HL.png",
           url: "",
           link: "",
-          size: "750*280"
+          size: "750*280",
+          model: "link"
         }
       ]
     }
@@ -185,7 +201,7 @@ export const modelData = [
     name: "两张横图",
     drawer: true,
     notAdd: true,
-
+    onlyImg: true,
     img: "md-image",
     options: {
       list: [
@@ -193,13 +209,15 @@ export const modelData = [
           img: "https://i.loli.net/2021/05/14/dtNvI5UxchXn8gz.png",
           url: "",
           link: "",
-          size: "335*220"
+          size: "335*220",
+          model: "link"
         },
         {
           img: "https://i.loli.net/2021/05/14/dtNvI5UxchXn8gz.png",
           url: "",
           link: "",
-          size: "335*220"
+          size: "335*220",
+          model: "link"
         }
       ]
     }
@@ -209,7 +227,7 @@ export const modelData = [
     name: "上一下二",
     drawer: true,
     notAdd: true,
-
+    onlyImg: true,
     img: "md-image",
     options: {
       list: [
@@ -217,19 +235,22 @@ export const modelData = [
           img: "https://i.loli.net/2021/05/14/dtNvI5UxchXn8gz.png",
           url: "",
           link: "",
-          size: "710*170"
+          size: "710*170",
+          model: "link"
         },
         {
           img: "https://i.loli.net/2021/05/14/dtNvI5UxchXn8gz.png",
           url: "",
           link: "",
-          size: "335*170"
+          size: "335*170",
+          model: "link"
         },
         {
           img: "https://i.loli.net/2021/05/14/dtNvI5UxchXn8gz.png",
           url: "",
           link: "",
-          size: "335*170"
+          size: "335*170",
+          model: "link"
         }
       ]
     }
@@ -239,7 +260,7 @@ export const modelData = [
     name: "上二下一",
     drawer: true,
     notAdd: true,
-
+    onlyImg: true,
     img: "md-image",
     options: {
       list: [
@@ -247,20 +268,22 @@ export const modelData = [
           img: "https://i.loli.net/2021/05/14/dtNvI5UxchXn8gz.png",
           url: "",
           link: "",
-
+          size: "335*170",
-          size: "335*170"
+          model: "link"
         },
         {
           img: "https://i.loli.net/2021/05/14/dtNvI5UxchXn8gz.png",
           url: "",
           link: "",
-          size: "335*170"
+          size: "335*170",
+          model: "link"
         },
         {
           img: "https://i.loli.net/2021/05/14/dtNvI5UxchXn8gz.png",
           url: "",
           link: "",
-          size: "710*170"
+          size: "710*170",
+          model: "link"
         }
       ]
     }
@@ -270,7 +293,7 @@ export const modelData = [
     name: "五列单行",
     drawer: true,
     notAdd: true,
-
+    onlyImg: true,
     img: "md-image",
     options: {
       list: [
@@ -278,31 +301,36 @@ export const modelData = [
           img: "https://picsum.photos/id/127/200/200",
           url: "",
           link: "",
-          size: "75*75（1:1）"
+          size: "75*75（1:1）",
+          model: "link"
         },
         {
           img: "https://i.loli.net/2021/05/14/dtNvI5UxchXn8gz.png",
           url: "",
           link: "",
-          size: "75*75（1:1）"
+          size: "75*75（1:1）",
+          model: "link"
         },
         {
           img: "https://i.loli.net/2021/05/14/dtNvI5UxchXn8gz.png",
           url: "",
           link: "",
-          size: "75*75（1:1）"
+          size: "75*75（1:1）",
+          model: "link"
         },
         {
           img: "https://i.loli.net/2021/05/14/dtNvI5UxchXn8gz.png",
           url: "",
           link: "",
-          size: "75*75（1:1）"
+          size: "75*75（1:1）",
+          model: "link"
         },
         {
           img: "https://i.loli.net/2021/05/14/dtNvI5UxchXn8gz.png",
           url: "",
           link: "",
-          size: "75*75（1:1）"
+          size: "75*75（1:1）",
+          model: "link"
         }
       ]
     }
@@ -312,7 +340,7 @@ export const modelData = [
     name: "四列单行",
     drawer: true,
     notAdd: true,
-
+    onlyImg: true,
     img: "md-image",
     options: {
       list: [
@@ -320,25 +348,29 @@ export const modelData = [
           img: "https://i.loli.net/2021/05/14/dtNvI5UxchXn8gz.png",
           url: "",
           link: "",
-          size: "88*88（1:1）"
+          size: "88*88（1:1）",
+          model: "link"
         },
         {
           img: "https://i.loli.net/2021/05/14/dtNvI5UxchXn8gz.png",
           url: "",
           link: "",
-          size: "88*88（1:1）"
+          size: "88*88（1:1）",
+          model: "link"
         },
         {
           img: "https://i.loli.net/2021/05/14/dtNvI5UxchXn8gz.png",
           url: "",
           link: "",
-          size: "88*88（1:1）"
+          size: "88*88（1:1）",
+          model: "link"
         },
         {
           img: "https://i.loli.net/2021/05/14/dtNvI5UxchXn8gz.png",
           url: "",
           link: "",
-          size: "88*88（1:1）"
+          size: "88*88（1:1）",
+          model: "link"
         }
       ]
     }
@@ -357,28 +389,32 @@ export const modelData = [
           url: "",
           link: "",
           title: "文字",
-          size: "88*88（1:1）"
+          size: "88*88（1:1）",
+          model: "link"
         },
         {
           img: "https://i.loli.net/2021/05/14/dtNvI5UxchXn8gz.png",
           url: "",
           link: "",
           title: "文字",
-          size: "88*88（1:1）"
+          size: "88*88（1:1）",
+          model: "link"
         },
         {
           img: "https://i.loli.net/2021/05/14/dtNvI5UxchXn8gz.png",
           url: "",
           link: "",
           title: "文字",
-          size: "88*88（1:1）"
+          size: "88*88（1:1）",
+          model: "link"
         },
         {
           img: "https://i.loli.net/2021/05/14/dtNvI5UxchXn8gz.png",
           url: "",
           link: "",
           title: "文字",
-          size: "88*88（1:1）"
+          size: "88*88（1:1）",
+          model: "link"
         }
       ]
     }
@@ -410,35 +446,40 @@ export const modelData = [
           url: "",
           link: "",
           title: "标题",
-          size: "88*88 (1:1)"
+          size: "88*88 (1:1)",
+          model: "link"
         },
         {
           img: "https://i.loli.net/2020/12/05/JXR5K3sbIeENjqH.png",
           url: "",
           link: "",
           title: "标题",
-          size: "88*88 (1:1)"
+          size: "88*88 (1:1)",
+          model: "link"
         },
         {
           img: "https://i.loli.net/2020/12/05/KlZfnCFIdEV231Y.png",
           url: "",
           link: "",
           title: "标题",
-          size: "88*88 (1:1)"
+          size: "88*88 (1:1)",
+          model: "link"
         },
         {
           img: "https://i.loli.net/2020/12/05/GfmMyN2wrUVIlci.png",
           url: "",
           link: "",
           title: "标题",
-          size: "88*88 (1:1)"
+          size: "88*88 (1:1)",
+          model: "link"
         },
         {
           img: "https://i.loli.net/2020/12/05/eznDa3iNby5FkYL.png",
           url: "",
           link: "",
           title: "标题",
-          size: "88*88 (1:1)"
+          size: "88*88 (1:1)",
+          model: "link"
         }
       ]
     }
@@ -529,10 +570,10 @@ export const modelData = [
     options: {
       list: [
         {
-          title: [{context: "这是一条公告"}],
+          title: [{ context: "这是一条公告" }],
           color: "#666",
           bk_color: "#FFF",
-          direction:"horizontal",
+          direction: "horizontal",
           img: 'http://files.sxcfx.cn/upload/20220318/71e5d27aca82aeedf647052e1e4ceaaa.png'
         }
       ]

manager/src/views/page-decoration/wap/decorate.vue

@@ -303,7 +303,7 @@
           <!-- 填写链接 -->
 
           <div class="decorate-view" v-if="!res.notLink">
-            <div class="decorate-view-title">选择链接</div>
+            <div class="decorate-view-title">选择模式</div>
             <div
               v-if="item.url && item.url.length != 0"
               class="decorate-view-link"
@@ -351,13 +351,16 @@
             </div>
 
             <div>
-              <Button
+              <RadioGroup
-                ghost
+                @on-change="clickLink(item, index, res)"
-                size="small"
+                v-model="item.model"
-                type="primary"
+                type="button"
-                @click="clickLink(item, index)"
-                >选择链接</Button
               >
+                <Radio value="link" label="link">链接</Radio>
+                <Radio v-if="res.onlyImg" value="hotzone" label="hotzone"
+                  >热区</Radio
+                >
+              </RadioGroup>
             </div>
           </div>
           <!-- 链接地址-->
@@ -405,7 +408,7 @@
 <script>
 import ossManage from "@/views/sys/oss-manage/ossManage";
 import { modelData } from "./config";
-import ways from "@/views/lili-dialog/wap.js"; // 选择链接的类型
+import ways from "@/components/lili-dialog/wap.js"; // 选择链接的类型
 export default {
   components: {
     ossManage,
@@ -494,9 +497,11 @@ export default {
       this.textAlign = val;
     },
     // 点击链接赋值一个唯一值，并将当前选择的模块赋值
-    clickLink(val, index) {
+    clickLink(val, index, oval) {
-      this.selectedLinks = val;
+      if (val.model === "link") {
-      this.liliDialogFlag(false);
+        this.selectedLinks = val;
+        this.liliDialogFlag(false);
+      }
     },
     //点击图片解析成base64
     changeFile(item, index) {
@@ -527,10 +532,20 @@ export default {
           link: "",
           url: "",
           size: this.res.options.list[0].size,
+          model: "link",
         };
         this.res.options.list.push(way);
       }
     },
+    addHotPoint() {
+      let way = {
+        img: "https://picsum.photos/id/264/200/200",
+        text: "标题",
+        link: "",
+        url: "",
+      };
+      this.res.options.list[0].points.push(way);
+    },
     // 图片选择器回显
     callbackSelected(val) {
       this.picModelFlag = false;

manager/src/views/page-decoration/wap/index.vue

@@ -195,7 +195,7 @@ export default {
             if (res.success && !exist) {
               this.contentData.list[newIndex].options.list.push({
                 data: res.result[val.promotionsType]
-                  ? res.result[val.promotionsType].splice(0,2)
+                  ? res.result[val.promotionsType].splice(0, 2)
                   : [],
                 type: val.promotionsType,
                 title1: val.subName,