|
|
@@ -1,87 +1,129 @@
|
|
|
<template>
|
|
|
- <div class="bgDiv">
|
|
|
- <el-container>
|
|
|
- <div class="headTop">
|
|
|
- <div class="headTopA">
|
|
|
- <el-image style="width: 4vw; height: 4vw;margin-right: 4px;"
|
|
|
- :src="require('@/assets//img/startLottery/logo.png')"></el-image>
|
|
|
-
|
|
|
- 优电联盟抽奖平台
|
|
|
- </div>
|
|
|
- <div class="headTopB">
|
|
|
- <el-image style="width: 1.2vw; height: 1.2vw;margin-right: 4px;"
|
|
|
- :src="require('@/assets//img/startLottery/md-save.svg')"></el-image>
|
|
|
-
|
|
|
- 导出中奖名单
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- </el-container>
|
|
|
- <el-container>
|
|
|
- <!-- -->
|
|
|
- <el-container>
|
|
|
- <el-aside width="36vw" style="text-align:left;padding:0;">
|
|
|
- <div class="leftRegion leftRegionA ">
|
|
|
-
|
|
|
-
|
|
|
- <H1 style="text-align:center">抽奖活动</H1>
|
|
|
- <div class="leftMain">
|
|
|
- <el-form ref="form" :model="formModel" label-width="4vw">
|
|
|
- <el-form-item label="活动">
|
|
|
- <el-select v-model="formModel.activityId" placeholder="请选择" style="width:21vw"
|
|
|
- size="mini" @change="handleChange">
|
|
|
- <el-option v-for="item in activityList" :key="item.id" :label="item.name"
|
|
|
- :value="item.id">
|
|
|
- </el-option>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="奖项">
|
|
|
- <el-select v-model="formModel.awardId" placeholder="请选择" style="width:8vw"
|
|
|
- size="mini" @change="handleAwardChange">
|
|
|
- <el-option v-for="item in awardInfoList" :key="item.id" :label="item.name"
|
|
|
- :value="item.id">
|
|
|
- <span style="float: left">{{ item.name }}</span>
|
|
|
- <span
|
|
|
- style="float: right; color: #8492a6; font-size: 13px">数量：{{ item.num }}</span>
|
|
|
- </el-option>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- <div style="text-align:center">
|
|
|
- <span>
|
|
|
- <el-button type="primary" @click="handleSubmit"
|
|
|
- :loading="submitting">开始抽奖</el-button>
|
|
|
- <el-button>重新开始</el-button>
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- <div class="imgDiv">
|
|
|
- <el-image v-if="awardImage" style="width: 7.5vw; height: 7.5vw"
|
|
|
- :src="awardImage"
|
|
|
- fit="fit">
|
|
|
- </el-image>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-aside>
|
|
|
- <el-main>
|
|
|
- <div class="leftRegion leftRegionB">
|
|
|
- <div style="text-align:center;">
|
|
|
- <el-image :src="require('@/assets/img/zjmd.png')" style="width:15vw;height:3vw"></el-image>
|
|
|
+ <div class="bgDiv">
|
|
|
+ <el-container>
|
|
|
+ <div class="headTop">
|
|
|
+ <div class="headTopA">
|
|
|
+ <el-image
|
|
|
+ style="width: 4vw; height: 4vw;margin-right: 4px;"
|
|
|
+ :src="require('@/assets//img/startLottery/logo.png')"
|
|
|
+ ></el-image>
|
|
|
+
|
|
|
+ 优电联盟抽奖平台
|
|
|
+ </div>
|
|
|
+ <div class="headTopB" @click="exportXls">
|
|
|
+ <el-image
|
|
|
+ style="width: 1.2vw; height: 1.2vw;margin-right: 4px;"
|
|
|
+ :src="require('@/assets//img/startLottery/md-save.svg')"
|
|
|
+ ></el-image>
|
|
|
+
|
|
|
+ 导出中奖名单
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-container>
|
|
|
+ <el-container>
|
|
|
+ <!-- -->
|
|
|
+ <el-container>
|
|
|
+ <el-aside width="36vw" style="text-align:left;padding:0;">
|
|
|
+ <div class="leftRegion leftRegionA ">
|
|
|
+ <H1 style="text-align:center">抽奖活动</H1>
|
|
|
+ <div class="leftMain">
|
|
|
+ <el-form ref="form" :model="formModel" label-width="4vw">
|
|
|
+ <el-form-item label="活动">
|
|
|
+ <el-select
|
|
|
+ v-model="formModel.activityId"
|
|
|
+ placeholder="请选择"
|
|
|
+ style="width:21vw"
|
|
|
+ size="mini"
|
|
|
+ @change="handleChange"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in activityList"
|
|
|
+ :key="item.id"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.id"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="奖项">
|
|
|
+ <el-select
|
|
|
+ v-model="formModel.awardId"
|
|
|
+ placeholder="请选择"
|
|
|
+ style="width:8vw"
|
|
|
+ size="mini"
|
|
|
+ @change="handleAwardChange"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in awardInfoList"
|
|
|
+ :key="item.id"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.id"
|
|
|
+ >
|
|
|
+ <span style="float: left">{{ item.name }}</span>
|
|
|
+ <span
|
|
|
+ style="float: right; color: #8492a6; font-size: 13px"
|
|
|
+ >数量：{{ item.num }}</span
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div style="text-align:center">
|
|
|
+ <span>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ @click="handleSubmit"
|
|
|
+ :loading="submitting"
|
|
|
+ >开始抽奖</el-button
|
|
|
+ >
|
|
|
+ <el-button>重新开始</el-button>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="imgDiv">
|
|
|
+ <el-image
|
|
|
+ v-if="awardImage"
|
|
|
+ style="width: 7.5vw; height: 7.5vw"
|
|
|
+ :src="awardImage"
|
|
|
+ fit="fit"
|
|
|
+ >
|
|
|
+ </el-image>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-aside>
|
|
|
+ <el-main>
|
|
|
+ <div class="leftRegion leftRegionB">
|
|
|
+ <div style="text-align:center;">
|
|
|
+ <el-image
|
|
|
+ :src="require('@/assets/img/zjmd.png')"
|
|
|
+ style="width:15vw;height:3vw"
|
|
|
+ ></el-image>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ style="width:100%;margin-top: 1.2vw;"
|
|
|
+ v-for="(item, index) in awardWinningInfoList"
|
|
|
+ v-bind:key="index"
|
|
|
+ >
|
|
|
+ <span>{{ item.name }}：{{ item.num }}人</span>
|
|
|
+ <el-divider></el-divider>
|
|
|
+ <div style="margin-bottom:1.5vw;">
|
|
|
+ <div
|
|
|
+ class="imgText"
|
|
|
+ v-for="(item1, index1) in item.winningInfoList"
|
|
|
+ v-bind:key="index1"
|
|
|
+ >
|
|
|
+ <el-image
|
|
|
+ style="width: 4vw; height: 4vw"
|
|
|
+ :src="item1.lotteryPersonnelImage"
|
|
|
+ ></el-image>
|
|
|
+ <div style="font-size:0.6vw">
|
|
|
+ {{ item1.lotteryPersonnelPhone }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div style="width:100%;margin-top: 1.2vw;" v-for="(item,index) in awardWinningInfoList" v-bind:key="index">
|
|
|
- <span>{{item.name}}：{{item.num}}人</span>
|
|
|
- <el-divider></el-divider>
|
|
|
- <div style="margin-bottom:1.5vw;">
|
|
|
- <div class="imgText" v-for="(item1,index1) in item.winningInfoList" v-bind:key="index1">
|
|
|
- <el-image style="width: 4vw; height: 4vw"
|
|
|
- :src="item1.lotteryPersonnelImage"></el-image>
|
|
|
- <div style="font-size:0.6vw">{{item1.lotteryPersonnelPhone}}</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- </div>
|
|
|
|
|
|
- <!-- <div style="width:100%;margin-top: 1.2vw;">
|
|
|
+ <!-- <div style="width:100%;margin-top: 1.2vw;">
|
|
|
<span>一等奖：1人</span>
|
|
|
<el-divider></el-divider>
|
|
|
<div style="margin-bottom:1.5vw;">
|
|
|
@@ -99,7 +141,7 @@
|
|
|
|
|
|
</div> -->
|
|
|
|
|
|
- <!-- <div style="width:100%;margin-top: 1.2vw;">
|
|
|
+ <!-- <div style="width:100%;margin-top: 1.2vw;">
|
|
|
<span>一等奖：1人</span>
|
|
|
<el-divider></el-divider>
|
|
|
<div style="margin-bottom:1.5vw;">
|
|
|
@@ -171,449 +213,495 @@
|
|
|
</div>
|
|
|
|
|
|
</div> -->
|
|
|
-
|
|
|
- </div>
|
|
|
- </el-main>
|
|
|
- </el-container>
|
|
|
- </el-container>
|
|
|
- <div v-show="submittingModel" class=" lotteryRegion" :class="{
|
|
|
- lotteryResultsNum:lotteryResultsNum,
|
|
|
- lotteryProcess: !lotteryResultsNum
|
|
|
- }">
|
|
|
- <div class="l-title">{{popActivityName}}</div>
|
|
|
- <div class="l-title2">{{popAwardName}}：{{popAwardPrize}}</div>
|
|
|
-
|
|
|
- <div class="l-results" v-if="!isCompleted">
|
|
|
- <div class="l-imgText">
|
|
|
- <el-image class="l-imgText-img"
|
|
|
- :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 type="danger" @click="handleStop" v-if="!isCompleted">停止</el-button>
|
|
|
- <el-button type="success" @click="handleClose" v-else >关闭</el-button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ </el-main>
|
|
|
+ </el-container>
|
|
|
+ </el-container>
|
|
|
+ <div
|
|
|
+ v-show="submittingModel"
|
|
|
+ class=" lotteryRegion"
|
|
|
+ :class="{
|
|
|
+ lotteryResultsNum: lotteryResultsNum,
|
|
|
+ lotteryProcess: !lotteryResultsNum,
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <div class="l-title">{{ popActivityName }}</div>
|
|
|
+ <div class="l-title2">{{ popAwardName }}：{{ popAwardPrize }}</div>
|
|
|
+
|
|
|
+ <div class="l-results" v-if="!isCompleted">
|
|
|
+ <div class="l-imgText">
|
|
|
+ <el-image
|
|
|
+ class="l-imgText-img"
|
|
|
+ :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 type="danger" @click="handleStop" v-if="!isCompleted"
|
|
|
+ >停止</el-button
|
|
|
+ >
|
|
|
+ <el-button type="success" @click="handleClose" v-else>关闭</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import startLotteryApi from "@/api/business/startLottery";
|
|
|
- import awardInfoApi from "@/api/base/awardInfo";
|
|
|
-
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- submitting: false,
|
|
|
- submittingModel: false,
|
|
|
- lotteryResultsNum: true, //抽奖人数 多 or 少
|
|
|
- isCompleted:false,
|
|
|
- formModel: {
|
|
|
- activityId:"",
|
|
|
- awardId:"",
|
|
|
- },
|
|
|
- activityList: [],
|
|
|
- awardInfoList: [],
|
|
|
- awardWinningInfoList:[],
|
|
|
- singleAwardWinningInfoList:[],
|
|
|
- selectedObject:null,
|
|
|
- awardImage:"",
|
|
|
- lotteryPersonnelList:[],
|
|
|
- lotteryPersonnelImage:"",
|
|
|
- lotteryPersonnelPhone:"",
|
|
|
- popActivityName:"",
|
|
|
- popAwardName:"",
|
|
|
- popAwardPrize:"",
|
|
|
- intervalId: null,
|
|
|
- }
|
|
|
- },
|
|
|
- created() {
|
|
|
- var self = this;
|
|
|
-
|
|
|
- startLotteryApi.list().then(function(response) {
|
|
|
- var jsonData = response.data;
|
|
|
- if (jsonData.result) {
|
|
|
- if (jsonData.data != null && jsonData.data != "") {
|
|
|
- self.activityList = jsonData.data;
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- methods: {
|
|
|
- handleChange(val) {
|
|
|
- var self = this;
|
|
|
- var formData = new FormData();
|
|
|
-
|
|
|
- formData.append("activityId", val);
|
|
|
-
|
|
|
- self.awardInfoList = [];
|
|
|
-
|
|
|
- startLotteryApi.findByActivityId(formData).then(function(response) {
|
|
|
- var jsonData = response.data;
|
|
|
- if (jsonData.result) {
|
|
|
- if (jsonData.data != null && jsonData.data != "") {
|
|
|
- self.awardInfoList = jsonData.data;
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- self.loadWinningInfoList(val);
|
|
|
- self.loadLotteryPersonnelList(val);
|
|
|
- },
|
|
|
- handleAwardChange(val){
|
|
|
- var self = this;
|
|
|
- (function() {
|
|
|
- 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;
|
|
|
- }
|
|
|
- })
|
|
|
+import startLotteryApi from "@/api/business/startLottery";
|
|
|
+import awardInfoApi from "@/api/base/awardInfo";
|
|
|
+
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ submitting: false,
|
|
|
+ submittingModel: false,
|
|
|
+ lotteryResultsNum: true, //抽奖人数 多 or 少
|
|
|
+ isCompleted: false,
|
|
|
+ formModel: {
|
|
|
+ activityId: "",
|
|
|
+ awardId: "",
|
|
|
},
|
|
|
- handleSubmit() {
|
|
|
-
|
|
|
- if(this.formModel.activityId==""||this.formModel.awardId==""){
|
|
|
- this.$message({
|
|
|
- message: "请先选择活动和奖项，才能开始抽奖！",
|
|
|
- type: "error"
|
|
|
- });
|
|
|
- return;
|
|
|
+ activityList: [],
|
|
|
+ awardInfoList: [],
|
|
|
+ awardWinningInfoList: [],
|
|
|
+ singleAwardWinningInfoList: [],
|
|
|
+ selectedObject: null,
|
|
|
+ awardImage: "",
|
|
|
+ lotteryPersonnelList: [],
|
|
|
+ lotteryPersonnelImage: "",
|
|
|
+ lotteryPersonnelPhone: "",
|
|
|
+ popActivityName: "",
|
|
|
+ popAwardName: "",
|
|
|
+ popAwardPrize: "",
|
|
|
+ intervalId: null,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ var self = this;
|
|
|
+
|
|
|
+ startLotteryApi.list().then(function(response) {
|
|
|
+ var jsonData = response.data;
|
|
|
+ if (jsonData.result) {
|
|
|
+ if (jsonData.data != null && jsonData.data != "") {
|
|
|
+ self.activityList = jsonData.data;
|
|
|
}
|
|
|
-
|
|
|
- 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;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleChange(val) {
|
|
|
+ var self = this;
|
|
|
+ var formData = new FormData();
|
|
|
+
|
|
|
+ formData.append("activityId", val);
|
|
|
+
|
|
|
+ self.awardInfoList = [];
|
|
|
+
|
|
|
+ startLotteryApi.findByActivityId(formData).then(function(response) {
|
|
|
+ var jsonData = response.data;
|
|
|
+ if (jsonData.result) {
|
|
|
+ if (jsonData.data != null && jsonData.data != "") {
|
|
|
+ self.awardInfoList = jsonData.data;
|
|
|
}
|
|
|
- this.lotteryPersonnelImage = this.lotteryPersonnelList[i].image;
|
|
|
- this.lotteryPersonnelPhone = this.lotteryPersonnelList[i].phone;
|
|
|
- i++;
|
|
|
- },150);
|
|
|
-
|
|
|
- },
|
|
|
- loadWinningInfoList(activityId){
|
|
|
- var self = this;
|
|
|
-
|
|
|
- var formData = new FormData();
|
|
|
-
|
|
|
- formData.append("activityId", activityId);
|
|
|
-
|
|
|
- startLotteryApi
|
|
|
- .findWinningByActivityId(formData)
|
|
|
- .then(function(response) {
|
|
|
- self.loading = false;
|
|
|
-
|
|
|
- var jsonData = response.data;
|
|
|
-
|
|
|
- if(jsonData.result){
|
|
|
- var pageInfo = jsonData.data;
|
|
|
-
|
|
|
- self.awardWinningInfoList = pageInfo;
|
|
|
-
|
|
|
- //alert(JSON.stringify(self.awardWinningInfoList))
|
|
|
- }
|
|
|
- else {
|
|
|
- self.$message({
|
|
|
- message: jsonData.message + "",
|
|
|
- type: "warning"
|
|
|
- });
|
|
|
- }
|
|
|
- })
|
|
|
- .catch(error => {
|
|
|
- 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>
|
|
|
-<style lang="scss">
|
|
|
- .headTop{
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- width: 100%;
|
|
|
- margin: 2vw 2vw 0 2vw;
|
|
|
- .headTopA{
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- font-size: 3.2vw;
|
|
|
- font-weight: bold;
|
|
|
-
|
|
|
-
|
|
|
- }
|
|
|
- .headTopB{
|
|
|
- font-size: 1vw;
|
|
|
- width: 10vw;
|
|
|
- height: 3vw;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- border-radius: 4px;
|
|
|
- background-color: rgba(20, 0, 98, 0.5);
|
|
|
- text-align: center;
|
|
|
- border: 2px solid rgba(255, 255, 255, 1);
|
|
|
- }
|
|
|
- }
|
|
|
- /* lotteryRegion */
|
|
|
- .lotteryRegion {
|
|
|
- position: fixed;
|
|
|
- top: 50%;
|
|
|
- left: 50%;
|
|
|
- transform: translate(-50%, -50%);
|
|
|
-
|
|
|
- width: 40vw;
|
|
|
- height: 72vh;
|
|
|
-
|
|
|
- border-radius: 10px;
|
|
|
- background-color: rgba(0, 0, 0, 0.75);
|
|
|
- text-align: center;
|
|
|
- box-shadow: 0px 0px 6px 10px rgba(0, 0, 0, 0.15);
|
|
|
- border: 3px solid rgba(255, 255, 255, 1);
|
|
|
- padding: 2vw;
|
|
|
- }
|
|
|
-
|
|
|
- .l-title {
|
|
|
- font-size: 1.8vw;
|
|
|
- }
|
|
|
-
|
|
|
- .l-title2 {
|
|
|
- font-size: 1.2vw;
|
|
|
-
|
|
|
- }
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ self.loadWinningInfoList(val);
|
|
|
+ self.loadLotteryPersonnelList(val);
|
|
|
+ },
|
|
|
+ handleAwardChange(val) {
|
|
|
+ var self = this;
|
|
|
+ (function() {
|
|
|
+ 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() {
|
|
|
+ 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;
|
|
|
|
|
|
- .l-results {
|
|
|
- margin-top: 3.6vw;
|
|
|
+ var formData = new FormData();
|
|
|
|
|
|
- }
|
|
|
+ formData.append("activityId", activityId);
|
|
|
|
|
|
- .l-imgText {
|
|
|
-
|
|
|
- }
|
|
|
+ startLotteryApi
|
|
|
+ .findWinningByActivityId(formData)
|
|
|
+ .then(function(response) {
|
|
|
+ self.loading = false;
|
|
|
|
|
|
- //大图
|
|
|
- .lotteryProcess {
|
|
|
- .l-imgText-img {
|
|
|
- width: 12vw;
|
|
|
- height: 24vh;
|
|
|
- max-height: 12vw;
|
|
|
- }
|
|
|
-
|
|
|
- .l-imgText-t {
|
|
|
- font-size: 1.4vw;
|
|
|
- margin-top: 1vw;
|
|
|
- }
|
|
|
- }
|
|
|
+ var jsonData = response.data;
|
|
|
|
|
|
- //小图
|
|
|
- .lotteryResultsNum {
|
|
|
- .l-results {
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- justify-content: flex-start;
|
|
|
- height: 40vh;
|
|
|
- overflow: hidden;
|
|
|
- overflow-y: auto;
|
|
|
- }
|
|
|
-
|
|
|
- .l-imgText-img {
|
|
|
- width: 5vw;
|
|
|
- height: 5vw;
|
|
|
- }
|
|
|
-
|
|
|
- .l-imgText-t {
|
|
|
- font-size: 0.9vw;
|
|
|
- }
|
|
|
-
|
|
|
- .l-imgText {
|
|
|
- margin: 0 1.2vw 1.2vw 0;
|
|
|
- }
|
|
|
- }
|
|
|
+ if (jsonData.result) {
|
|
|
+ var pageInfo = jsonData.data;
|
|
|
|
|
|
- .l-button-group {
|
|
|
- margin-top: 3.5vh;
|
|
|
- }
|
|
|
+ self.awardWinningInfoList = pageInfo;
|
|
|
|
|
|
- /* zkx */
|
|
|
- .bgDiv {
|
|
|
- background-image: url('../../public/bg2.jpg');
|
|
|
- background-size: 100% 100%;
|
|
|
- /* 这会让图片在水平方向上铺满，垂直方向上保持原始比例 */
|
|
|
- background-repeat: repeat-x;
|
|
|
- /* 这会在水平方向上平铺 */
|
|
|
- color: #ffffff;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
+ //alert(JSON.stringify(self.awardWinningInfoList))
|
|
|
+ } else {
|
|
|
+ self.$message({
|
|
|
+ message: jsonData.message + "",
|
|
|
+ type: "warning",
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch((error) => {
|
|
|
+ self.loading = false;
|
|
|
+ // self.$message.error(error + "");
|
|
|
+ });
|
|
|
+ },
|
|
|
+ loadLotteryPersonnelList(activityId) {
|
|
|
+ var self = this;
|
|
|
|
|
|
- .leftRegion {
|
|
|
- background-color: rgba(20, 0, 98, 0.5);
|
|
|
- padding: 1vw;
|
|
|
- border: 2px solid rgba(255, 255, 255, 1);
|
|
|
- border-radius: 10px;
|
|
|
- height: 80vh;
|
|
|
- margin: 2vw;
|
|
|
+ var formData = new FormData();
|
|
|
|
|
|
- }
|
|
|
+ formData.append("activityId", activityId);
|
|
|
|
|
|
- .leftRegionA {
|
|
|
- width:30vw;
|
|
|
- }
|
|
|
+ startLotteryApi
|
|
|
+ .lotteryPersonnelList(formData)
|
|
|
+ .then(function(response) {
|
|
|
+ self.loading = false;
|
|
|
|
|
|
- .leftRegionB {
|
|
|
- margin: 2vw 2vw 2vw 0;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- overflow: hidden;
|
|
|
- overflow-y: auto;
|
|
|
- }
|
|
|
+ var jsonData = response.data;
|
|
|
|
|
|
- .el-main {
|
|
|
- /* //height: 500px; */
|
|
|
- overflow: auto;
|
|
|
- text-align: left;
|
|
|
- padding: 0px;
|
|
|
- margin: 0px
|
|
|
- }
|
|
|
+ if (jsonData.result) {
|
|
|
+ var pageInfo = jsonData.data;
|
|
|
|
|
|
- /* zkx */
|
|
|
- .el-header,
|
|
|
- .el-footer {
|
|
|
- text-align: center;
|
|
|
- line-height: 3vw;
|
|
|
- }
|
|
|
+ self.lotteryPersonnelList = pageInfo;
|
|
|
|
|
|
- .el-aside {
|
|
|
- text-align: center;
|
|
|
- padding: 0.5vw
|
|
|
- }
|
|
|
+ //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;
|
|
|
|
|
|
- body>.el-container {
|
|
|
- margin-bottom: 2vw;
|
|
|
- }
|
|
|
+ var jsonData = response.data;
|
|
|
|
|
|
- .el-container:nth-child(5) .el-aside,
|
|
|
- .el-container:nth-child(6) .el-aside {
|
|
|
- line-height: 13vw;
|
|
|
- }
|
|
|
+ if (jsonData.result) {
|
|
|
+ var page = jsonData.data;
|
|
|
|
|
|
- .el-container:nth-child(7) .el-aside {
|
|
|
- line-height: 16vw;
|
|
|
- }
|
|
|
+ self.singleAwardWinningInfoList = page;
|
|
|
|
|
|
- .leftMain {
|
|
|
- margin-top: 1.5vw
|
|
|
- }
|
|
|
+ self.handleChange(self.formModel.activityId);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleClose() {
|
|
|
+ this.isCompleted = false;
|
|
|
+ this.submittingModel = false;
|
|
|
+ this.singleAwardWinningInfoList = [];
|
|
|
+ },
|
|
|
+ exportXls(){
|
|
|
+ if (this.formModel.activityId == ""||this.formModel.activityId == null) {
|
|
|
+ this.$message({
|
|
|
+ message: "请先选择活动，才能导出中奖名单！",
|
|
|
+ type: "error",
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
|
|
|
- .imgDiv {
|
|
|
- margin-top: 2.5vw;
|
|
|
- text-align: center
|
|
|
- }
|
|
|
+ var self = this;
|
|
|
|
|
|
- .el-form-item__label {
|
|
|
- color: #ffffff
|
|
|
- }
|
|
|
+ var formData = new FormData();
|
|
|
|
|
|
- .imgText {
|
|
|
- float: left;
|
|
|
- margin-left: 1vw
|
|
|
+ formData.append("activityId", self.formModel.activityId);
|
|
|
+
|
|
|
+ startLotteryApi
|
|
|
+ .exportExcel(formData)
|
|
|
+ .then(function(response) {
|
|
|
+
|
|
|
+ var jsonData = response.data;
|
|
|
+
|
|
|
+ if(jsonData.result){
|
|
|
+ //导出
|
|
|
+ self.$message({
|
|
|
+ showClose: true,
|
|
|
+ type: "success",
|
|
|
+ message: `报表已生成，<a href="${jsonData.data}">请点击链接下载</a>`,
|
|
|
+ dangerouslyUseHTMLString: true,
|
|
|
+ duration: 30000
|
|
|
+ });
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ self.$message({
|
|
|
+ message: jsonData.message + "",
|
|
|
+ type: "warning"
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(error => {
|
|
|
+ self.loading = false;
|
|
|
+ // self.$message.error(error + "");
|
|
|
+ });
|
|
|
}
|
|
|
-</style>
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="scss">
|
|
|
+.headTop {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ width: 100%;
|
|
|
+ margin: 2vw 2vw 0 2vw;
|
|
|
+ .headTopA {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 3.2vw;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .headTopB {
|
|
|
+ font-size: 1vw;
|
|
|
+ width: 10vw;
|
|
|
+ height: 3vw;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ border-radius: 4px;
|
|
|
+ background-color: rgba(20, 0, 98, 0.5);
|
|
|
+ text-align: center;
|
|
|
+ border: 2px solid rgba(255, 255, 255, 1);
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+}
|
|
|
+/* lotteryRegion */
|
|
|
+.lotteryRegion {
|
|
|
+ position: fixed;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+
|
|
|
+ width: 40vw;
|
|
|
+ height: 72vh;
|
|
|
+
|
|
|
+ border-radius: 10px;
|
|
|
+ background-color: rgba(0, 0, 0, 0.75);
|
|
|
+ text-align: center;
|
|
|
+ box-shadow: 0px 0px 6px 10px rgba(0, 0, 0, 0.15);
|
|
|
+ border: 3px solid rgba(255, 255, 255, 1);
|
|
|
+ padding: 2vw;
|
|
|
+}
|
|
|
+
|
|
|
+.l-title {
|
|
|
+ font-size: 1.8vw;
|
|
|
+}
|
|
|
+
|
|
|
+.l-title2 {
|
|
|
+ font-size: 1.2vw;
|
|
|
+}
|
|
|
+
|
|
|
+.l-results {
|
|
|
+ margin-top: 3.6vw;
|
|
|
+}
|
|
|
+
|
|
|
+.l-imgText {
|
|
|
+}
|
|
|
+
|
|
|
+//大图
|
|
|
+.lotteryProcess {
|
|
|
+ .l-imgText-img {
|
|
|
+ width: 12vw;
|
|
|
+ height: 24vh;
|
|
|
+ max-height: 12vw;
|
|
|
+ }
|
|
|
+
|
|
|
+ .l-imgText-t {
|
|
|
+ font-size: 1.4vw;
|
|
|
+ margin-top: 1vw;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+//小图
|
|
|
+.lotteryResultsNum {
|
|
|
+ .l-results {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: flex-start;
|
|
|
+ height: 40vh;
|
|
|
+ overflow: hidden;
|
|
|
+ overflow-y: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .l-imgText-img {
|
|
|
+ width: 5vw;
|
|
|
+ height: 5vw;
|
|
|
+ }
|
|
|
+
|
|
|
+ .l-imgText-t {
|
|
|
+ font-size: 0.9vw;
|
|
|
+ }
|
|
|
+
|
|
|
+ .l-imgText {
|
|
|
+ margin: 0 1.2vw 1.2vw 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.l-button-group {
|
|
|
+ margin-top: 3.5vh;
|
|
|
+}
|
|
|
+
|
|
|
+/* zkx */
|
|
|
+.bgDiv {
|
|
|
+ background-image: url("../../public/bg2.jpg");
|
|
|
+ background-size: 100% 100%;
|
|
|
+ /* 这会让图片在水平方向上铺满，垂直方向上保持原始比例 */
|
|
|
+ background-repeat: repeat-x;
|
|
|
+ /* 这会在水平方向上平铺 */
|
|
|
+ color: #ffffff;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.leftRegion {
|
|
|
+ background-color: rgba(20, 0, 98, 0.5);
|
|
|
+ padding: 1vw;
|
|
|
+ border: 2px solid rgba(255, 255, 255, 1);
|
|
|
+ border-radius: 10px;
|
|
|
+ height: 80vh;
|
|
|
+ margin: 2vw;
|
|
|
+}
|
|
|
+
|
|
|
+.leftRegionA {
|
|
|
+ width: 30vw;
|
|
|
+}
|
|
|
+
|
|
|
+.leftRegionB {
|
|
|
+ margin: 2vw 2vw 2vw 0;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ overflow: hidden;
|
|
|
+ overflow-y: auto;
|
|
|
+}
|
|
|
+
|
|
|
+.el-main {
|
|
|
+ /* //height: 500px; */
|
|
|
+ overflow: auto;
|
|
|
+ text-align: left;
|
|
|
+ padding: 0px;
|
|
|
+ margin: 0px;
|
|
|
+}
|
|
|
+
|
|
|
+/* zkx */
|
|
|
+.el-header,
|
|
|
+.el-footer {
|
|
|
+ text-align: center;
|
|
|
+ line-height: 3vw;
|
|
|
+}
|
|
|
+
|
|
|
+.el-aside {
|
|
|
+ text-align: center;
|
|
|
+ padding: 0.5vw;
|
|
|
+}
|
|
|
+
|
|
|
+body > .el-container {
|
|
|
+ margin-bottom: 2vw;
|
|
|
+}
|
|
|
+
|
|
|
+.el-container:nth-child(5) .el-aside,
|
|
|
+.el-container:nth-child(6) .el-aside {
|
|
|
+ line-height: 13vw;
|
|
|
+}
|
|
|
+
|
|
|
+.el-container:nth-child(7) .el-aside {
|
|
|
+ line-height: 16vw;
|
|
|
+}
|
|
|
+
|
|
|
+.leftMain {
|
|
|
+ margin-top: 1.5vw;
|
|
|
+}
|
|
|
+
|
|
|
+.imgDiv {
|
|
|
+ margin-top: 2.5vw;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.el-form-item__label {
|
|
|
+ color: #ffffff;
|
|
|
+}
|
|
|
+
|
|
|
+.imgText {
|
|
|
+ float: left;
|
|
|
+ margin-left: 1vw;
|
|
|
+}
|
|
|
+</style>
|
yanliming