三周年抽奖活动后台抽奖页面功能

奖项的图片可以上传多张

src/views/base/awardInfo-detail.vue

@@ -49,7 +49,7 @@
           <el-input-number v-model="formModel.num" :step="1" :min="0" style="width:400px"></el-input-number>
         </el-form-item>
         <el-form-item label="照片" prop="image">
-              <el-upload
+              <!-- <el-upload
                   style="width:300px"
                   class="avatar-uploader"
                   name="photoFile"
@@ -61,7 +61,26 @@
                   :before-upload="beforeAvatarUpload">
                   <img v-if="fileUrl" :src="fileUrl" class="avatar">
                   <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+              </el-upload> -->
+              <el-upload
+                style="width:300px"
+                class="avatar-uploader"
+                name="photoFile"
+                list-type="picture-card"
+                :action="uploadUrl"
+                :headers="headers"
+                :data="uploadData"
+                :on-success="handleImageSuccess"
+                :before-upload="beforeAvatarUpload"
+                :on-remove="handleRemove"
+                :file-list="fileList"
+                multiple
+                >
+                <i class="el-icon-plus"></i>
               </el-upload>
+              <el-dialog :visible.sync="dialogVisible">
+                <img width="100%" :src="dialogImageUrl">
+              </el-dialog>
           </el-form-item>
       </el-form>
     </div>
@@ -102,6 +121,10 @@ export default {
       headers: {
           Authorization: getToken(),
       },
+      dialogImageUrl: '',
+      dialogVisible: false,
+      fileList:[],
+      imageUrlList:[],
     };
   },
   methods: {
@@ -117,6 +140,12 @@ export default {
 
             self.formModel.activityId = self.activityId;
 
+            //alert(self.fileList);
+
+            if(self.imageUrlList.length>0){
+              self.formModel.imageList = self.imageUrlList;
+            }
+
             if (id == null || id.length == 0) {
               return awardInfoApi.add(self.formModel);
             } else {
@@ -144,6 +173,20 @@ export default {
         }
       });
     },
+
+    handleImageSuccess(res, file) {
+      var self = this;
+
+      if(res.result){
+        let fileData = {};
+        fileData.url = res.data;
+        fileData.name = file.name;
+
+        self.imageUrlList.push(fileData);
+
+        //alert(JSON.stringify(self.imageUrlList));
+      }
+    },
     handleAvatarSuccess(res, file) {
         var self = this;
         self.formModel.image = res.data;
@@ -158,6 +201,17 @@ export default {
         }
         return isLt2M;
     },
+
+    handleRemove(file) {
+      console.log(file);
+      var index = 0;
+      this.fileList.forEach(function(item,i){
+        if(item.name==file.name){
+          index = i;
+        }
+      })
+      this.fileList.splice(index,1);
+    },
   },
   mounted: function ()  {
     var self = this;
@@ -177,10 +231,13 @@ export default {
         if (jsonData.result) {
           self.formModel = jsonData.data;
 
-            let image = self.formModel.image;
-            if (image != null) {
-                self.fileUrl = image 
+            if(jsonData.data.imageList!=null){
+            if(jsonData.data.imageList.length > 0){
+              self.fileList = jsonData.data.imageList;
+              self.imageUrlList = jsonData.data.imageList;
             }
+          }
+
         } else {
           self.$message.error(jsonData.message + "");
         }

src/views/base/awardInfo-list.vue

@@ -56,14 +56,17 @@
         <el-table-column prop="prizeName" label="奖品名称" width="350"></el-table-column>
         <el-table-column prop="num" label="奖品数量" ></el-table-column>
         <el-table-column prop="activityName" label="所属活动" width="300"></el-table-column>
-        <el-table-column  prop="image"  label="奖品图片">
+        <el-table-column  prop="image"  label="奖品图片" width="200">
             <template slot-scope="{row}">
-            <a v-if="row.image" :href="row.image" target="_blank">
-              <el-image
-              style="width: 50px; height: 50px"
-              :src="row.image"
-              fit="fit"></el-image>
-            </a>
+              <span v-for="(item, index) in row.imageList" v-bind:key="index" style="margin-right:10px">
+                <a v-if="item.url" :href="item.url" target="_blank">
+                  <el-image
+                  style="width: 50px; height: 50px"
+                  :src="item.url"
+                  fit="fit"></el-image>
+                </a>
+              </span>
+
           </template>
         </el-table-column>
         <el-table-column label="操作" width="200">

src/views/startLottery.vue

@@ -71,15 +71,17 @@
                 </el-form-item>
               </el-form>
               <div class="imgDiv">
-                <el-image
-                  v-if="awardImage"
-                  style="width: 7.5vw; height: 7.5vw"
-                  :src="awardImage"
-                  fit="fit"
-                >
-                </el-image>
+                <span v-for="(item,index) in awardImageList" v-bind:key="index">
+                  <el-image
+                    v-if="item.url"
+                    style="width: 7.5vw; height: 7.5vw;margin-right:2vw"
+                    :src="item.url"
+                    fit="fit"
+                  >
+                  </el-image>
+                </span>
               </div>
-              <div style="margin-left:4vw;margin-top:vw">
+              <div style="margin-left:4vw;margin-top:2vw">
                 <span>
                   <el-button
                     style="background-color:#FAB90C;border-color:#FAB90C"
@@ -104,15 +106,13 @@
             <div
               style="width:100%;margin-top: 1.2vw;"
               v-for="(item, index) in awardWinningInfoList"
-              v-bind:key="index"
-            >
-			 <el-divider v-if="index!=0"></el-divider>
-              <div style="    display: flex;align-items: center;padding-bottom:2vh ;">
+              v-bind:key="index">
+              <el-divider v-if="index!=0"></el-divider>
+              <div style="display: flex;align-items: center;padding-bottom:2vh;">
                 <el-image
                   :src="require('@/assets/img/min.png')"
                   style="width:2vw;height:2vw"
                 ></el-image>
-
                 <span>{{ item.name }}：{{ item.num }}人</span>
               </div>
 
@@ -295,7 +295,7 @@ export default {
       awardWinningInfoList: [],
       singleAwardWinningInfoList: [],
       selectedObject: null,
-      awardImage: "",
+      awardImageList:[],
       lotteryPersonnelList: [],
       lotteryPersonnelImage: "",
       lotteryPersonnelPhone: "",
@@ -347,7 +347,8 @@ export default {
         var jsonData = response.data;
 
         if (jsonData.result) {
-          self.awardImage = jsonData.data.image;
+          //self.awardImage = jsonData.data.image;
+          self.awardImageList = jsonData.data.imageList;
           self.popActivityName = jsonData.data.activityName;
           self.popAwardName = jsonData.data.name;
           self.popAwardPrize = jsonData.data.prizeName;
@@ -721,5 +722,6 @@ body > .el-container {
 .imgText {
   float: left;
   margin-left: 1vw;
+  margin-bottom: 1vw;
 }
 </style>