页面修改

src/components/Buying/AdManageList.vue

@@ -2,9 +2,11 @@
   .height_auto.el-select .el-input {
     height: auto
   }
+
   .Rotationchart .TFimgList:hover .TFIMGzhe {
     display: block;
   }
+
   .AdManageList .TFimgList {
     float: left;
     width: 220px;
@@ -14,6 +16,7 @@
     margin: 0 10px 10px 0;
     overflow: hidden;
   }
+
   .AdManageList .TFIMGzhe {
     width: 100%;
     height: 100%;
@@ -25,6 +28,7 @@
     border-radius: 4px;
     display: none;
   }
+
   .AdManageList .TFreupload {
     width: 32px;
     height: 32px;
@@ -37,6 +41,7 @@
     background-color: gray;
     color: #fff;
   }
+
   .AdManageList .TFimgList:hover .TFIMGzhe {
     display: block;
   }
@@ -45,15 +50,17 @@
     width: 100%;
     height: 100%;
   }
+
   .AdManageList ._tit {
-      padding-left: 10px;
-      border-left: 3px solid #e95252;
-      font-size: 16px;
-      color: #000000;
+    padding-left: 10px;
+    border-left: 3px solid #e95252;
+    font-size: 16px;
+    color: #000000;
   }
+
   .AdManageList .changeMsg li {
-    float:left;
-    margin-right:30px;
+    float: left;
+    margin-right: 30px;
     color: #666666;
   }
 
@@ -61,11 +68,11 @@
 <template>
   <div class="flexOne AdManageList">
     <div class="query-box">
-        <ul>
-            <li>
-                <input type="button" class="normalBtn" value="新增" @click="IsShowBtm=true" />
-            </li>
-        </ul>
+      <ul>
+        <li>
+          <input type="button" class="normalBtn" value="新增" @click="IsShowBtm=true" />
+        </li>
+      </ul>
     </div>
     <table class="singeRowTable" border="0" cellspacing="0" cellpadding="0" v-loading="loading">
       <tr>
@@ -77,9 +84,12 @@
       </tr>
       <tr v-for="item in dataList">
         <td>{{item.Id}}</td>
-        <td>{{item.AdImage}}</td>
+        <td>
+          <img v-if="!item.ShowImage" src="../../assets/img/bg_c3@3x.png" />
+          <img v-else :src='item.ShowImage' style="width:100px;height:40px;" />
+        </td>
         <td>{{item.AdLink}}</td>
-        <td>{{item.Status}}</td>
+        <td>{{item.StatusStr}}</td>
         <td>
           <el-button-group>
             <el-tooltip class="item" effect="dark" :content="$t('active.ld_editInfo')" placement="top">
@@ -99,46 +109,42 @@
       <p>{{$t("active.ld_noData")}}</p>
     </div>
 
-
     <div class="combottomDiv" v-if="IsShowBtm" style="left:0;">
       <el-row>
         <el-col :span="20">
           <p class="combottomTitle">广告图</p>
         </el-col>
         <el-col :span="4">
-          <input type="button" class="normalBtn" @click="" value="保存" />
-          <input type="button" class="hollowFixedBtn" @click="IsShowBtm=false" value="取消" />
+          <input type="button" class="normalBtn" @click="SetAdmanage()" value="保存" />
+          <input type="button" class="hollowFixedBtn" @click="clearAdManage(),IsShowBtm=false" value="取消" />
         </el-col>
       </el-row>
       <el-form label-width="80px">
         <ul class="changeMsg">
           <li>
-            <el-form-item label="图片"> 
-                <div class="TFimgList">
-                    <img v-if="!addMsg.AdImage" src="../../assets/img/bg_c3@3x.png">
-                    <img v-else :src='addMsg.AdImage'>
-                    <div class="TFIMGzhe">
-                        <div class="TFreupload">
-                            <el-upload :file-list="fileList" :http-request="uploadTest" :multiple="true" :limit="2"
-                                    :on-change="handleChange1"
-                                    accept="image/jpeg, image/gif, image/png, image/bmp"
-                                    :show-file-list="false" action>
-                                    <i class="iconfont icon-Edit"></i>
-                            </el-upload>
-                        </div>
-                    </div>
+            <el-form-item label="图片">
+              <div class="TFimgList">
+                <img v-if="!ShowImgUrl" src="../../assets/img/bg_c3@3x.png">
+                <img v-else :src='ShowImgUrl'>
+                <div class="TFIMGzhe">
+                  <div class="TFreupload">
+                    <el-upload :file-list="fileList" :http-request="UploadImage" :multiple="false" :limit="1"
+                      accept="image/jpeg, image/gif, image/png, image/bmp" :show-file-list="false" action>
+                      <i class="iconfont icon-Edit"></i>
+                    </el-upload>
+                  </div>
                 </div>
+              </div>
             </el-form-item>
           </li>
           <li>
-            <el-form-item label="广告链接"> 
-                <el-input v-model="addMsg.AdLink" class="w210"></el-input>
+            <el-form-item label="广告链接">
+              <el-input v-model="addMsg.AdLink" class="w210"></el-input>
             </el-form-item>
           </li>
         </ul>
       </el-form>
     </div>
-
   </div>
 </template>
 <script>
@@ -155,11 +161,12 @@
         loading: false,
         dataList: [],
         //显示底部
-        IsShowBtm:false,
+        IsShowBtm: false,
         fileList: [],
+        //图片全路劲
+        ShowImgUrl: "",
       };
     },
-
     mounted() {
       this.getList();
     },
@@ -181,20 +188,32 @@
       SetAdmanage() {
         this.apipost("ShopAd_post_SetAdManageService", this.addMsg, res => {
           if (res.data.resultCode === 1) {
+            this.IsShowBtm = false;
+            this.clearAdManage();
             this.getList();
           } else {
             this.Error(res.data.message)
           }
         }, null);
-
+      },
+      //情况默认值
+      clearAdManage() {
+        this.addMsg.Id = 0;
+        this.addMsg.AdImage = "";
+        this.addMsg.AdLink = "";
+        this.ShowImgUrl = "";
       },
       //根据编号获取广告详情
       getAdManage(Id) {
+        this.IsShowBtm = true;
         this.apipost("ShopAd_get_GetAdManageService", {
           Id: Id
         }, res => {
           if (res.data.resultCode === 1) {
             this.addMsg = res.data.data;
+            if (this.addMsg.AdImage) {
+              this.ShowImgUrl = this.domainManager().ViittoFileUrl + this.addMsg.AdImage;
+            }
           } else {
             this.Error(res.data.message)
           }
@@ -202,42 +221,31 @@
       },
       //根据编号删除广告详情
       removeAdManage(Id) {
-        this.apipost("ShopAd_post_RemoveAdManageService", {
-          Id: Id
-        }, res => {
-          if (res.data.resultCode === 1) {
-            this.getList();
-          } else {
-            this.Error(res.data.message)
-          }
-        }, null);
+        var that = this;
+        this.Confirm("是否删除此广告?", function () {
+          that.apipost("ShopAd_post_RemoveAdManageService", {
+            Id: Id
+          }, res => {
+            if (res.data.resultCode === 1) {
+              that.getList();
+            } else {
+              that.Error(res.data.message)
+            }
+          }, null);
+        });
       },
-    },
-
-    uploadTest(file) {
-
-    },
-    handleChange1(file, fileList) {
-
-    },
-
-    //上传图片
-    UploadImage(file) {
-      let newArr = [];
-      newArr.push(file.file);
-      let fileName = file.file.name;
-      var path = "/Upload/Temporary/";
-      this.UploadSelfFileT(path, newArr, x => {
-        //统一图片处理
-        if (this.DiningImageArray.length === 5) {
-          return this.$message.error('最多上传5张图片')
-        }
-        var obj = {}
-        var str = x.data.FilePath;
-        var imgUrl = this.domainManager().ViittoFileUrl + x.data.FilePath;
-        this.DiningImageArray.push(imgUrl);
-      });
-    },
+      //上传图片
+      UploadImage(file) {
+        let newArr = [];
+        newArr.push(file.file);
+        let fileName = file.file.name;
+        var path = "/Upload/Temporary/";
+        this.UploadSelfFileT(path, newArr, x => {
+          this.addMsg.AdImage = x.data.FilePath;
+          this.ShowImgUrl = this.domainManager().ViittoFileUrl + x.data.FilePath;
+        });
+      },
+    }
   };
 
 </script>