抽奖时现实正在抽奖的图标

src/views/startLottery.vue

@@ -69,30 +69,31 @@
                   <span style="margin-left:2vw">数量：</span
                   ><span>{{ awardNum }}</span>
                 </el-form-item>
-                <el-form-item label="奖品" >
-					<div style="    display: flex;">
-						<span v-for="(item,index) in awardImageList"
-						 style="    display: flex; flex-direction: column;"
-						 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 class="prizeNameTxt">{{item.name}}</span>
-						</span>
-					</div>
+                <el-form-item label="奖品">
+                  <div style="    display: flex;">
+                    <span
+                      v-for="(item, index) in awardImageList"
+                      style="    display: flex; flex-direction: column;"
+                      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 class="prizeNameTxt">{{ item.name }}</span>
+                    </span>
+                  </div>
                 </el-form-item>
               </el-form>
 
-              <div style="margin-left:4vw;margin-top:2vw">
+              <div style="margin-top:2vw;text-align:center">
                 <span>
                   <el-button
                     style="background-color:#FAB90C;border-color:#FAB90C"
                     @click="handleSubmit"
-                    :loading="submitting"
                     >开始抽奖</el-button
                   >
                   <!-- <el-button>重新抽奖</el-button> -->
@@ -112,9 +113,12 @@
             <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"
@@ -122,7 +126,6 @@
                 <span>{{ item.name }}：{{ item.num }}人</span>
               </div>
 
-             
               <div style="margin-bottom:1.5vw;">
                 <div
                   class="imgText"
@@ -130,10 +133,20 @@
                   v-bind:key="index1"
                 >
                   <el-image
-                    :style="item.winningInfoList.length<5?'width: 6vw; height: 6vw;': 'width: 4vw; height: 4vw;' "
+                    :style="
+                      item.winningInfoList.length < 5
+                        ? 'width: 6vw; height: 6vw;'
+                        : 'width: 4vw; height: 4vw;'
+                    "
                     :src="item1.lotteryPersonnelImage"
                   ></el-image>
-                  <div :style="item.winningInfoList.length<5?'font-size:1vw':'font-size:0.6vw'">
+                  <div
+                    :style="
+                      item.winningInfoList.length < 5
+                        ? 'font-size:1vw'
+                        : 'font-size:0.6vw'
+                    "
+                  >
                     {{ item1.lotteryPersonnelPhone }}
                   </div>
                 </div>
@@ -237,6 +250,10 @@
     <div
       v-show="submittingModel"
       class=" lotteryRegion"
+      element-loading-text="正在读取中奖人列表..."
+      element-loading-spinner="el-icon-loading"
+      element-loading-background="rgba(0, 0, 0, 0.8)"
+      v-loading="loading"
       :class="{
         lotteryResultsNum: lotteryResultsNum,
         lotteryProcess: !lotteryResultsNum,
@@ -288,7 +305,6 @@ import awardInfoApi from "@/api/base/awardInfo";
 export default {
   data() {
     return {
-      submitting: false,
       submittingModel: false,
       lotteryResultsNum: true, //抽奖人数 多 or 少
       isCompleted: false,
@@ -301,7 +317,7 @@ export default {
       awardWinningInfoList: [],
       singleAwardWinningInfoList: [],
       selectedObject: null,
-      awardImageList:[],
+      awardImageList: [],
       lotteryPersonnelList: [],
       lotteryPersonnelImage: "",
       lotteryPersonnelPhone: "",
@@ -310,6 +326,7 @@ export default {
       popAwardPrize: "",
       intervalId: null,
       awardNum: "",
+      loading: false
     };
   },
   created() {
@@ -466,6 +483,7 @@ export default {
     },
     handleStop() {
       var self = this;
+      self.loading = true;
       if (self.awardNum > 1) {
         self.lotteryResultsNum = true;
       }
@@ -717,7 +735,7 @@ body > .el-container {
 
 .imgDiv {
   margin-top: 2.5vw;
-  margin-left:4vw;
+  margin-left: 4vw;
   text-align: left;
 }
 
@@ -730,9 +748,9 @@ body > .el-container {
   margin-left: 1vw;
   margin-bottom: 1vw;
 }
-.prizeNameTxt{
-line-height: 2.4vw;
-  
-    font-size:    1.2vw;
+.prizeNameTxt {
+  line-height: 2.4vw;
+
+  font-size: 1.2vw;
 }
 </style>