抽奖活动页面布局调整

src/api/business/startLottery.js

@@ -13,7 +13,20 @@ function findByActivityId(formData) {
   function findWinningByActivityId(formData) {
     return request.post(constant.serverUrl + "/business/startLottery/findWinningByActivityId", formData);
   }
+
+  function lotteryPersonnelList(formData) {
+    return request.post(constant.serverUrl + "/business/startLottery/lotteryPersonnelList", formData);
+  }
+
+  function edit(id) {
+    return request.get(constant.serverUrl + "/business/startLottery/edit/" + id);
+  }
+
+  function startLotteryAward(formData) {
+    return request.post(constant.serverUrl + "/business/startLottery/startLotteryAward", formData);
+  }
+  
   
 export default {
-    list,findByActivityId,findWinningByActivityId
+    list,findByActivityId,findWinningByActivityId,lotteryPersonnelList,edit,startLotteryAward
 }

src/views/startLottery.vue

@@ -163,19 +163,28 @@
 			lotteryResultsNum:lotteryResultsNum,
 			lotteryProcess: !lotteryResultsNum
 		}">
-			<div class="l-title">中奖结果</div>
-			<div class="l-title2">三等奖：服务费免单券20张</div>
+			<div class="l-title">{{popActivityName}}</div>
+			<div class="l-title2">{{popAwardName}}：{{popAwardPrize}}</div>
 
-			<div class="l-results">
-				<div class="l-imgText" v-for="(item,i) in  lotteryResultsNum?20:1" :key="i">
+			<div class="l-results" v-if="!isCompleted">
+				<div class="l-imgText">
 					<el-image class="l-imgText-img"
-						src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
-					<div class="l-imgText-t" style="">135****8888</div>
+						:src="lotteryPersonnelImage"></el-image>
+					<div class="l-imgText-t" style="">{{lotteryPersonnelPhone}}</div>
+				</div>
+			</div>
+
+			<div class="l-results" v-else>
+				<div class="l-imgText" v-for="(item,i) in  singleAwardWinningInfoList" :key="i">
+					<el-image class="l-imgText-img"
+						:src="item.lotteryPersonnelImage"></el-image>
+					<div class="l-imgText-t" style="">{{item.lotteryPersonnelPhone}}</div>
 				</div>
 			</div>
 
 			<div class="l-button-group" >
-				<el-button  @click="lotteryResultsNum=true">重新开始</el-button>
+				<el-button type="danger"  @click="handleStop" v-if="!isCompleted">停止</el-button>
+				<el-button type="success" @click="handleClose"  v-else >关闭</el-button>
 			</div>
 		</div>
 
@@ -191,15 +200,25 @@
 			return {
 				submitting: false,
 				submittingModel: false,
-				
 				lotteryResultsNum: true, //抽奖人数 多 or 少
-
-				formModel: {},
+				isCompleted:false,
+				formModel: {
+          activityId:"",
+          awardId:"",
+        },
 				activityList: [],
 				awardInfoList: [],
         awardWinningInfoList:[],
+		singleAwardWinningInfoList:[],
         selectedObject:null,
         awardImage:"",
+        lotteryPersonnelList:[],
+        lotteryPersonnelImage:"",
+        lotteryPersonnelPhone:"",
+        popActivityName:"",
+        popAwardName:"",
+        popAwardPrize:"",
+        intervalId: null,
 			}
 		},
 		created() {
@@ -232,25 +251,62 @@
 					}
 				});
 
-
         self.loadWinningInfoList(val);
+        self.loadLotteryPersonnelList(val);
 			},
       handleAwardChange(val){
         var self = this;
         (function() {
-          return awardInfoApi.edit(val);
+          return startLotteryApi.edit(val);
         })()
           .then(response => {
             var jsonData = response.data;
 
             if (jsonData.result) {
               self.awardImage = jsonData.data.image;
+              self.popActivityName = jsonData.data.activityName;
+              self.popAwardName = jsonData.data.name;
+              self.popAwardPrize = jsonData.data.prizeName;
             }
           })
       },
-			handleSubmit() {
-				this.submittingModel=true
-				this.lotteryResultsNum=false
+	handleSubmit() {
+
+		if(this.formModel.activityId==""||this.formModel.awardId==""){
+          this.$message({
+            message: "请先选择活动和奖项，才能开始抽奖！",
+            type: "error"
+          });
+          return;
+        }
+
+		if(this.lotteryPersonnelList==null||this.lotteryPersonnelList.length==0){
+          this.$message({
+            message: "该活动尚未导入抽奖用户，请先导入抽奖用户！",
+            type: "error"
+          });
+          return;
+        }
+
+        this.submittingModel=true;
+		this.lotteryResultsNum=false;
+		this.isCompleted = false;
+
+
+        var len = this.lotteryPersonnelList;
+
+        var i = 0;
+
+        this.intervalId = setInterval(() => {
+          // 切换到下一张
+          if(i+1==len){
+            i = 0;
+          }
+          this.lotteryPersonnelImage = this.lotteryPersonnelList[i].image;
+          this.lotteryPersonnelPhone = this.lotteryPersonnelList[i].phone;
+          i++;
+        },150);
+        
 			},
       loadWinningInfoList(activityId){
         var self = this;
@@ -284,7 +340,70 @@
             self.loading = false;
             // self.$message.error(error + "");
           });
-      }
+      },
+      loadLotteryPersonnelList(activityId){
+        var self = this;
+
+        var formData = new FormData();
+
+        formData.append("activityId", activityId);
+
+        startLotteryApi
+          .lotteryPersonnelList(formData)
+          .then(function(response) {
+            self.loading = false;
+
+            var jsonData = response.data;
+
+            if(jsonData.result){
+              var pageInfo = jsonData.data;
+
+              self.lotteryPersonnelList = pageInfo;
+
+              //alert(JSON.stringify(self.awardWinningInfoList))
+            }
+            else {
+              self.$message({
+                  message: jsonData.message + "",
+                  type: "warning"
+                });
+            }
+          })
+          .catch(error => {
+            self.loading = false;
+            // self.$message.error(error + "");
+          });
+      },
+      handleStop(){
+		var self = this;
+        self.lotteryResultsNum=true;
+		self.isCompleted = true;
+        clearInterval(this.intervalId);
+
+		var formData = new FormData();
+        formData.append("activityId", self.formModel.activityId);
+        formData.append("awardId", self.formModel.awardId);
+
+		startLotteryApi.startLotteryAward(formData).then(function(response) {
+                self.loading = false;
+  
+                var jsonData = response.data;
+
+                if (jsonData.result) {
+                    var page = jsonData.data;
+
+                    self.singleAwardWinningInfoList = page;
+
+					self.handleChange(self.formModel.activityId);
+              }
+			});
+
+      },
+		handleClose(){
+			this.isCompleted = false;
+			this.submittingModel=false;
+			this.singleAwardWinningInfoList=[];
+		}
 		}
 	}
 </script>