供应商品牌

src/main/resources/static/css/supplier-center/shop/goods.css

@@ -32,111 +32,26 @@
   .brand-status .font-blue{color: #1890f9;}
   .brand-status .font-red{color: #f94b4b;}
   .bg-brand{position: fixed;background: rgba(34,39,46, 0.3); top: 0;left: 0; width: 100%;height: 100%;z-index: 1000}
-  .add-brand-box{
-    width: 338px;
-    height: 350px;
-    background-color: #ffffff;
-    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
-    border-radius: 2px;
-    border: solid 1px #efefef;
-    position: absolute;
-    left: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    margin: auto
-  }
-  .modal-header{
-    height: 42px;
-    line-height: 42px;
-    border: solid 1px #efefef;
-    background-color: #f8f8f8;
-    padding-left: 20px;
-    color: #333333
-  }
-  .close-modalForm{
-    text-align: center;
-    float: right;
-    width: 30px;
-    cursor: pointer
-  }
-  .brand-content{
-     padding: 10px 10px;
-     color: #22272e
-  }
+  .add-brand-box{ width: 338px; height: 350px;background-color: #ffffff;box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16); border-radius: 2px;
+    border: solid 1px #efefef;position: absolute;left: 0;top: 0;right: 0;bottom: 0;margin: auto}
+  .modal-header{height: 42px; line-height: 42px;border: solid 1px #efefef;background-color: #f8f8f8;padding-left: 20px;color: #333333}
+  .close-modalForm{text-align: center;float: right;width: 30px;cursor: pointer}
+  .brand-content{padding: 10px 10px;color: #22272e}
   .required{color: red}
-  .brand-name input{
-        width: 210px;
-      height: 36px;
-      background-color: #ffffff;
-      border-radius: 2px;
-      border: solid 1px #b8bfca;
-      padding-left: 10px
-  }
-  .img-box{
-    width: 56px;
-	height: 56px;
-	background-color: #ffffff;
-	border-radius: 2px;
-	border: solid 1px #b8bfca;
-	    display: inline-block
-  }
-  .img-box img{
-    width: 100%;
-    height: 100%;
-  }
-  .brand-img{
-    margin: 10px 0;
-  }
-  .add-pic{
-    width: 56px;
-    height: 56px;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%,-50%);
-    border-radius: 2px;
-    opacity: 0
-  }
-  .brand-content .label{
-    width: 81px;
-    text-align: right;
-    display: inline-block;
-  }
-  .font-color{
-    color: #e15616;
-  }
+  .brand-name input{width: 210px;height: 36px;background-color: #ffffff; border-radius: 2px;border: solid 1px #b8bfca;padding-left: 10px}
+  .img-box{ width: 56px;height: 56px;background-color: #ffffff;border-radius: 2px;border: solid 1px #b8bfca;display: inline-block; position: relative;}
+  .img-box img{width: 100%;height: 100%; }
+  .brand-img{margin: 10px 0;}
+  .add-pic{ width: 56px;height: 56px;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);border-radius: 2px;opacity: 0;cursor: pointer}
+  .brand-content .label{width: 81px;text-align: right; display: inline-block;}
+  .font-color{color: #e15616;}
   .tishiyu{font-size: 12px;text-align: right; margin-top: 5px}
-  .brand-description span{
-    vertical-align: top;
-  }
-  .miaoshu{
-        background-color: #ffffff;
-    width: 220px;
-    height: 78px;
-    border-radius: 2px;
-    border: 1px solid #EFEFEF;
-    padding: 5px;
-    resize: none
-  }
-   .box-btn{float: right}
-  .box-btn div{
-    display: inline-block;
-    width: 68px;
-	height: 32px;
-	line-height: 32px;
-	text-align: center;
-	background-color: #ffffff;
-	border-radius: 2px;
-	border: solid 1px #b8bfca;
-      margin-right: 10px;
-      color: #22272e;
-      cursor: pointer;
-  }
-  .box-btn .btn-cancel{
-    background-color: #e15616;
-    color: #fff;
-    border: 1px solid #e15616;
-  }
+  .brand-description span{vertical-align: top; }
+  .miaoshu{background-color: #ffffff;width: 220px;height: 78px;border-radius: 2px; border: 1px solid #EFEFEF; padding: 5px;resize: none}
+  .box-btn{float: right}
+  .box-btn div{display: inline-block;width: 68px;height: 32px;line-height: 32px;text-align: center;background-color: #ffffff;border-radius: 2px;border: solid 1px #b8bfca;
+   margin-right: 10px;color: #22272e; cursor: pointer;}
+  .box-btn .btn-cancel{background-color: #e15616;color: #fff; border: 1px solid #e15616;}
+  .icon.add:before { width: 25px;height: 25px;background-position: -168px -374px; position: relative; top: 15px; right: -15px}
   }
 

src/main/resources/static/js/supplier-center/shop/goods.js

@@ -15,10 +15,14 @@ var Brandgoods =new Vue({
             logo:'',
             description:''
         },
+        title:'',
+        formData:new FormData(),
         brandlist:[],
         pageInput: '1',
         listRecord: 0,
         bgflag:false,
+        logoShow:false,
+        iconflag:true
     },
      computed: {
         pageTotal: function () {
@@ -77,22 +81,80 @@ var Brandgoods =new Vue({
         var _this = this;
         _this.BrandList()
       },
-    newBrand:function(){//提交新品牌
+    newBrand:function(){
         var _this = this;
         _this.bgflag = true;
+        _this.title = '添加新品牌'
         },
-    editBrand:function(){
-
+     submit:function(){ //确认提交新品牌
+          var _this = this;
+          console.log(_this.brandobj)
+          if(_this.brandobj.name ==''){
+            CAIMEI.dialog('请输入品牌名称')
+         }else {
+             SupplierApi.addBrand(_this.brandobj,function (res) {
+                 if (res.code==0){
+                  CAIMEI.Alert('提交成功，我们将会在1-2个工作日内审核','确定',true,function () {
+                      location.reload()
+                  });
+                   _this.closebg();
+                 } else if(res.code == -1){
+                     var errmsg = res.msg;
+                    if(errmsg.indexOf('请先登录') > -1) {
+                        CAIMEI.dialog('请先登录');
+                    } else if (errmsg.indexOf('已存在') > -1) {
+                        CAIMEI.dialog('有相同品牌存在，无需重复提交，详情请致电0755-22907771');
+                    } else {
+                        CAIMEI.dialog('网络错误，请稍后再试');
+                    }
+                 }
+               })
+             }
+        },
+    editBrand:function(item){
+         var _this = this;
+         _this.bgflag = true;
+          _this.title = '编辑新品牌';
+         _this.brandobj.name = item.name;
+         _this.brandobj.description=item.description;
+         if(item.logo !=''){
+            _this.brandobj.logo=item.logo;
+            _this.logoShow = true;
+            _this.iconflag = false;
+         }else {
+            _this.logoShow = false;
+            _this.iconflag = true;
+         }
+          _this.brandobj.id=item.id;
         },
     closebg:function () {
          var _this = this;
             _this.bgflag = false;
+            _this.brandobj.name='';
+            _this.brandobj.description='';
+            _this.brandobj.logo='';
+            _this.logoShow = false;
+            _this.iconflag = true;
+
+        },
+    uploadlogo:function () { //上传品牌图片
+            var _this = this;
+            var inputDOM = _this.$refs.goodslogo;
+            var file = inputDOM.files;
+            _this.formData.append('file', file[0]);
+            SupplierApi.uploadimg(_this.formData,function(response){
+               _this.brandobj.logo = response.data;
+               _this.logoShow = true;
+               _this.iconflag = false;
+                event.target.value = '';
+            });
         }
     },
     mounted:function () {
         var _self = this;
         if(globalUserData){
               _self.params.userID = globalUserData.userId;
+              _self.brandobj.userID = globalUserData.userId;
             }
         _self.BrandList()
     }

src/main/resources/templates/supplier-center/shop/goods.html

@@ -53,7 +53,10 @@
                     <div class="tbody">
                         <ul v-for="item in brandlist">
                             <li class="brand-name"><h3>{{item.name}}</h3></li>
-                            <li class="brand-logo"><img :src="item.logo"></li>
+                            <li class="brand-logo">
+                                <img :src="item.logo" v-if="item.logo!=''">
+                                <span v-else>暂无</span>
+                            </li>
                             <li class="brand-status">
                                 <span class="font-red"  v-if="item.status ==0">待审核</span>
                                 <span class="font-blue" v-if="item.status ==1">审核通过</span>
@@ -91,7 +94,7 @@
          <div class="bg-brand" v-show="bgflag">
              <div class="add-brand-box">
                     <div class="modal-header">
-                        <span class="shou-address">添加新品牌</span>
+                        <span class="shou-address">{{title}}</span>
                         <span class="close-modalForm" @click="closebg">x</span>
                     </div>
                     <div class="brand-content">
@@ -102,8 +105,9 @@
                         <div class="brand-img">
                             <span class="label">品牌logo：</span>
                             <div class="img-box upimg">
-                                <img class="center" src="" style="display: none">
-                                <input type="file"  class="add-pic"  id="uploadfile" accept="image/*"/>
+                                <img class="center" :src="brandobj.logo" v-if="logoShow">
+                                <i class="icon mIcon add" v-if="iconflag"></i>
+                                <input type="file" ref="goodslogo" class="add-pic"  id="uploadfile" accept="image/*" @change="uploadlogo"/>
                               </div>
                             <p class="tishiyu">请上传<span class="font-color">jpg/png</span>格式的图片，大小不超过<span>5M</span> </p>
                          </div>
@@ -113,8 +117,8 @@
                         </div>
                     </div>
                      <div class="box-btn">
-                         <div class="btn-submit">提交</div>
-                          <div class="btn-cancel">取消</div>
+                         <div class="btn-submit" @click="submit">提交</div>
+                          <div class="btn-cancel" @click="closebg">取消</div>
                      </div>
                 </div>
              </div>