协销分配

src/main/resources/config/dev/application-dev.yml

@@ -4,14 +4,14 @@ spring:
   #数据源连接--start
   datasource:
     #本地连接数据库
-    url: jdbc:mysql://192.168.2.100:3306/caimei?characterEncoding=UTF8&serverTimezone=Asia/Shanghai
-    username: developer
-    password: 05bZ/OxTB:X+yd%1
-    #测试连接数据库
-#    url: jdbc:mysql://120.79.25.27:3306/caimei?characterEncoding=UTF8&serverTimezone=Asia/Shanghai
+#    url: jdbc:mysql://192.168.2.100:3306/caimei?characterEncoding=UTF8&serverTimezone=Asia/Shanghai
 #    username: developer
-#    password: J5p3tgOVazNl4ydf
-    #type: com.zaxxer.hikari.HikariDataSource
+#    password: 05bZ/OxTB:X+yd%1
+    #测试连接数据库
+    url: jdbc:mysql://120.79.25.27:3306/caimei?characterEncoding=UTF8&serverTimezone=Asia/Shanghai
+    username: developer
+    password: J5p3tgOVazNl4ydf
+    type: com.zaxxer.hikari.HikariDataSource
     hikari:
       minimum-idle: 5
       maximum-pool-size: 15

src/main/resources/static/css/help/clubinfo.css

@@ -20,6 +20,28 @@
   .info-main .info-p span{color: #333333;}
   .info-main .info-img{width: 180px;height: 180px;}
   .info-main .info-img img{width: 180px;height: 180px;display: block;margin-left: 20px;border: 1px dashed #E2E2E2;}
+  .info-button {width: 100%;height: 120px;box-sizing: border-box;background-color: #FFFFFF;padding:35px 40px;float: left;}
+  .info-button .btn{width: 300px;height: 50px;background-color: #E15616;line-height:50px;display: block;text-align: center;color: #FFFFFF;font-size:14px;float: left;}
+  /*弹窗*/
+  .seller-popup{width:100%;height:100%;position:fixed;top:0;left:0;background-color:rgba(0,0,0,.4);z-index: 99999;opacity: 0;}
+  .seller-popup.hide{opacity: 0;}
+  .seller-popup.show{opacity: 1;}
+  .seller-popup .seller-popup-model-content{width:100%;height:400px;position:absolute;left:0;bottom:0;background-color:#FFFFFF;border-radius:2px;box-sizing:border-box;}
+  .seller-popup .title{width:100%;height:50px;float:left;box-sizing:border-box;position:relative;padding:0 24px;background-color: #FEF6F1;}
+  .seller-popup .title p{font-size:16px;line-height:50px;text-align:left;color:#E15616;float:left;font-weight: bold;}
+  .seller-popup .title .icon{width:16px;height:16px;display:block;position:absolute;right:0;top:0;cursor:pointer;padding:10px}
+  .seller-popup .title .icon:before{width:16px;height:16px;background-position:-318px 0}
+  .seller-popup .seller-popup-main{width:100%;height:442px;box-sizing:border-box;float:left;}
+  .seller-popup .seller-popup-content{width:100%;height:385px;box-sizing:border-box;padding: 16px 0;float: left;}
+  .seller-popup .seller-popup-btn{width: 100%;height: 120px;box-sizing: border-box;background-color: #FFFFFF;padding:35px 40px;position: absolute;bottom: 0;left: 0;z-index: 99;}
+  .seller-popup .seller-popup-btn .btn{width: 100%;height: 50px;background-color: #E15616;line-height:50px;display: block;text-align: center;color: #FFFFFF;font-size:14px;float: left;}
+  .seller-popup .seller-popup-scroll{width:100%;height:100%;box-sizing:border-box;float:left;overflow:hidden;overflow-y:auto;padding-bottom:140px;}
+  .seller-popup .seller-list-cell{width: 100%;height: 60px;float: left;position: relative;border-bottom: 1px solid #E1E1E1;padding: 0 20px;box-sizing: border-box;}
+  .seller-popup .seller-list-cell .seller-list-le{width: 50%;height:60px;float: left;box-sizing: border-box;line-height: 60px;font-size: 14px;}
+  .seller-popup .seller-list-cell .seller-list-ri{width: 60px;height: 60px;float: right;box-sizing: border-box;font-size: 16px;color: #FFF;cursor: pointer;padding: 21px;}
+  .seller-popup .seller-list-cell .seller-list-ri .new-icon{width: 18px;height: 18px;box-sizing: border-box;display: block;background: url("/img/base/icon-news@2x.png");background-size: cover;float: left;}
+  .seller-popup .seller-list-cell .seller-list-ri .new-icon.active{background: url("/img/base/icon-news-active@2x.png");background-size: cover;}
+
  }
 
 /*移动端**/
@@ -30,7 +52,7 @@
   .info-header{width: 100%;height: auto;padding: 3vw;float:left;box-sizing: border-box;border-bottom: 10px solid #F7F7F7;background-color: #FFFFFF;}
   .info-header p{width: 100%;font-size: 4vw;line-height:6vw;font-weight: bold;color: #333333;}
   .info-header p span{font-size: 3.4vw;color: #666666;font-weight: normal;}
-  .info-content{width: 100%;height: auto;float: left;box-sizing: border-box;padding: 3vw;background-color: #FFFFFF;}
+  .info-content{width: 100%;min-height: 100vw;float: left;box-sizing: border-box;padding: 3vw;background-color: #FFFFFF;}
   .info-title{width: 100%;height: 9.8vw;border-bottom: 1px solid #F0F0F0;}
   .info-title .info-title-left{width: 50%;height: 9.8vw;font-size: 4vw;font-weight: bold;color: #333333;float: left;line-height: 9.8vw;}
   .info-title .info-title-left span{display: inline-block;padding: 0 2vw;line-height: 5.6vw;background-color: #FFF2D5;font-size: 3vw;color: #E4AA43;text-align: center;margin-left: 1vw;font-weight: normal;}
@@ -42,4 +64,27 @@
   .info-main .info-p span{color: #333333;}
   .info-main .info-img{width: 26vw;height: 26vw;border: 1px dashed #E2E2E2;}
   .info-main .info-img img{width: 26vw;height: 26vw;display: block;}
+  .info-button {width: 100%;height: 20vw;box-sizing: border-box;background-color: #FFFFFF;padding: 4vw;position: fixed;bottom: 0;left: 0;z-index: 99;}
+  .info-button .btn{width: 100%;height: 12vw;background-color: #E15616;line-height: 12vw;display: block;text-align: center;color: #FFFFFF;font-size: 4vw;}
+  /*优惠券弹窗*/
+  .seller-popup{width:100%;height:100%;position:fixed;bottom:0;left:0;background-color:rgba(0,0,0,.4);z-index: 99999;opacity: 0;}
+  .seller-popup.hide{opacity: 0;}
+  .seller-popup.show{opacity: 1;}
+  .seller-popup .seller-popup-model-content{width:100%;height:106.7vw;position:absolute;bottom:0;left:0;right:0;bottom:0;background-color:#FFFFFF;margin:auto;border-radius:2px;box-sizing:border-box}
+  .seller-popup .title{width:100%;height:11vw;float:left;box-sizing:border-box;position:relative;padding:2.3vw;background-color:#FEF6F1;}
+  .seller-popup .title p{font-size:3.4vw;line-height:6.4vw;text-align:left;color:#E15616;font-weight: bold;}
+  .seller-popup .title .icon{width:6.4vw;height:6.4vw;display:block;position:absolute;right:0;top:0;cursor:pointer;padding:10px}
+  .seller-popup .title .icon:before{width:6.4vw;height:6.4vw;background-position:-33.6vw 0;}
+  .seller-popup .seller-popup-main{width:100%;height:95.7vw;box-sizing:border-box;padding:0 3.5vw;float:left;}
+  .seller-popup .seller-popup-content{width:100%;height:84.7vw;box-sizing:border-box;padding: 4vw 0;float: left;position: relative;}
+  .seller-popup .seller-popup-btn{width: 100%;height: 20vw;box-sizing: border-box;background-color: #FFFFFF;padding: 4vw;position: absolute;bottom: 0;left: 0;z-index: 99;}
+  .seller-popup .seller-popup-btn .btn{width: 100%;height: 12vw;background-color: #E15616;line-height: 12vw;display: block;text-align: center;color: #FFFFFF;font-size: 4vw;}
+  .seller-popup .seller-popup-scroll{width:100%;height:100%;box-sizing:border-box;float:left;overflow:hidden;overflow-y:auto;padding-bottom: 20vw;}
+  .seller-popup .seller-list-cell{width: 100%;height: 12vw;float: left;position: relative;border-bottom: 1px solid #E1E1E1;}
+  .seller-popup .seller-list-cell:last-child{border-bottom: none;}
+  .seller-popup .seller-list-cell .seller-list-le{width: 80vw;height:12vw;float: left;box-sizing: border-box;line-height: 12vw;font-size:3.4vw;}
+  .seller-popup .seller-list-cell .seller-list-ri{width: 10vw;height: 12vw;float: right;box-sizing: border-box;font-size:3.4vw;color: #FFF;padding: 4vw 0;}
+  .seller-popup .seller-list-cell .seller-list-ri .new-icon{width: 18px;height: 18px;box-sizing: border-box;display: block;background: url("/img/base/icon-news@2x.png");background-size: cover;float: left;cursor: pointer;}
+  .seller-popup .seller-list-cell .seller-list-ri .new-icon.active{background: url("/img/base/icon-news-active@2x.png");background-size: cover;}
+
  }

src/main/resources/static/js/help/clubinfo.js

@@ -6,7 +6,17 @@ var InformationPage = new Vue({
     data: {
         clubId:0,
         clubInfo:{},
-        saleName:''// 分配销售人名称
+        isShowPopup:false,
+        checkedIndex:0,
+        saleName:'',// 分配销售人名称
+        sellerList:[
+            {name:'张顺星',isCheck:true},
+            {name:'张顺星',isCheck:false},
+            {name:'张顺星',isCheck:false},
+            {name:'张顺星',isCheck:false},
+            {name:'张顺星',isCheck:false},
+            {name:'张顺星',isCheck:false},
+        ]
     },
     filters: {
         FirstFormat: function(type) {
@@ -59,6 +69,30 @@ var InformationPage = new Vue({
                     console.log('获取机构信息异常')
                 }
             })
+        },
+        checkedCoupon:function(idx){
+            // 选择商品
+            var _self = this;
+            _self.checkedIndex = idx
+            _self.sellerList.forEach((el, index) => {
+                if (_self.checkedIndex == index) {
+                    el.isCheck = !el.isCheck
+                } else {
+                    el.isCheck = false
+                }
+            })
+        },
+        handleConfirm:function () {
+            var _self = this;
+            _self.isShowPopup = false;
+        },
+        showPopup:function(){// 显示优惠券弹窗
+            var _self = this;
+            _self.isShowPopup = true;
+        },
+        hidePopup:function(){// 隐藏优惠券弹窗
+            var _self = this;
+            _self.isShowPopup = false;
         }
     },
     created: function () {

src/main/resources/templates/help/clubinfo.html

@@ -59,8 +59,34 @@
       <div class="info-p">公司介绍：<span>{{ clubInfo.profile ? clubInfo.profile : '无' }}</span></div>
     </div>
   </div>
+  <div class="info-button">
+    <a href="javascript:void(0)" class="btn" @click="showPopup">{{  clubInfo.spType === 0 ? '分配销售' : '更换销售' }}</a>
+  </div>
+  <!--优惠券弹窗-->
+  <div class="seller-popup" v-show="isShowPopup" :class="isShowPopup ? 'show' : 'hide'">
+    <div class="seller-popup-model-content">
+      <div class="title"><p>请选择一个销售人员进行分配</p><i class="icon mIcon" @click="hidePopup"></i></div>
+      <div class="seller-popup-main">
+        <div class="seller-popup-content">
+          <div class="seller-popup-scroll">
+            <div class="seller-list-cell" v-for="(seller, index) in sellerList" :key="index" @click="checkedCoupon(index)">
+              <div class="seller-list-le">
+                <p>{{ seller.name }}</p>
+              </div>
+              <div class="seller-list-ri">
+                <span class="new-icon" :class="seller.isCheck ? 'active' : ''"></span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="seller-popup-btn">
+        <a href="javascript:void(0)" class="btn" @click="handleConfirm"> 确定 </a>
+      </div>
+    </div>
+  </div>
 </div>
-<!-- 引入底部 -->
+"<!-- 引入底部 -->
 <template th:replace="components/foot-link"></template>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/user.service.js(v=${version})}"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/help/clubinfo.js(v=${version})}"></script>