|
|
@@ -1,357 +1,456 @@
|
|
|
<template>
|
|
|
- <div class="bgDiv">
|
|
|
- <el-container>
|
|
|
- <!-- <el-header style="height:150px">Header</el-header> -->
|
|
|
- <el-container>
|
|
|
- <el-aside width="720px" 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="80px">
|
|
|
- <el-form-item label="活动">
|
|
|
- <el-select
|
|
|
- v-model="formModel.activityId"
|
|
|
- placeholder="请选择"
|
|
|
- style="width:420px"
|
|
|
- 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:160px"
|
|
|
- size="mini"
|
|
|
- >
|
|
|
- <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
|
|
|
- style="width: 150px; height: 150px"
|
|
|
- src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
|
|
|
- fit="fit"
|
|
|
- >
|
|
|
- </el-image>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-aside>
|
|
|
- <el-main>
|
|
|
- <div class="leftRegion leftRegionB">
|
|
|
- <div style="text-align:center;margin-bottom:10px">
|
|
|
- <el-image
|
|
|
- style="width: 150px; height: 50px"
|
|
|
- :src="require('@/assets/img/zjmd.png')"
|
|
|
- alt="Element UI Logo"
|
|
|
- fit="contain"
|
|
|
- >
|
|
|
- </el-image>
|
|
|
- </div>
|
|
|
- <div style="width:100%;margin-top: 24px;">
|
|
|
- <span>一等奖：1人</span>
|
|
|
- <el-divider></el-divider>
|
|
|
- <div style="margin-bottom:30px;">
|
|
|
- <div class="imgText">
|
|
|
- <el-image
|
|
|
- style="width: 80px; height: 80px"
|
|
|
- src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
|
|
|
- ></el-image>
|
|
|
- <div style="font-size:12px">13588888888</div>
|
|
|
- </div>
|
|
|
- <div class="imgText">
|
|
|
- <el-image
|
|
|
- style="width: 80px; height: 80px"
|
|
|
- src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
|
|
|
- ></el-image>
|
|
|
- <div style="font-size:12px">13588888888</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div class="bgDiv">
|
|
|
+ <el-container>
|
|
|
+ <!-- -->
|
|
|
+ <el-container>
|
|
|
+ <el-aside width="36vw" style="text-align:left;padding:0;">
|
|
|
+ <div class="leftRegion leftRegionA ">
|
|
|
|
|
|
- <div style="width:100%;margin-top: 24px;">
|
|
|
- <span>一等奖：1人</span>
|
|
|
- <el-divider></el-divider>
|
|
|
- <div style="margin-bottom:30px;">
|
|
|
- <div class="imgText">
|
|
|
- <el-image
|
|
|
- style="width: 80px; height: 80px"
|
|
|
- src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
|
|
|
- ></el-image>
|
|
|
- <div style="font-size:12px">13588888888</div>
|
|
|
- </div>
|
|
|
- <div class="imgText">
|
|
|
- <el-image
|
|
|
- style="width: 80px; height: 80px"
|
|
|
- src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
|
|
|
- ></el-image>
|
|
|
- <div style="font-size:12px">13588888888</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
|
|
|
- <div style="width:100%;margin-top: 24px;">
|
|
|
- <span>一等奖：1人</span>
|
|
|
- <el-divider></el-divider>
|
|
|
- <div style="margin-bottom:30px;">
|
|
|
- <div class="imgText">
|
|
|
- <el-image
|
|
|
- style="width: 80px; height: 80px"
|
|
|
- src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
|
|
|
- ></el-image>
|
|
|
- <div style="font-size:12px">13588888888</div>
|
|
|
- </div>
|
|
|
- <div class="imgText">
|
|
|
- <el-image
|
|
|
- style="width: 80px; height: 80px"
|
|
|
- src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
|
|
|
- ></el-image>
|
|
|
- <div style="font-size:12px">13588888888</div>
|
|
|
- </div>
|
|
|
- <div class="imgText">
|
|
|
- <el-image
|
|
|
- style="width: 80px; height: 80px"
|
|
|
- src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
|
|
|
- ></el-image>
|
|
|
- <div style="font-size:12px">13588888888</div>
|
|
|
- </div>
|
|
|
- <div class="imgText">
|
|
|
- <el-image
|
|
|
- style="width: 80px; height: 80px"
|
|
|
- src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
|
|
|
- ></el-image>
|
|
|
- <div style="font-size:12px">13588888888</div>
|
|
|
- </div>
|
|
|
- <div class="imgText">
|
|
|
- <el-image
|
|
|
- style="width: 80px; height: 80px"
|
|
|
- src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
|
|
|
- ></el-image>
|
|
|
- <div style="font-size:12px">13588888888</div>
|
|
|
- </div>
|
|
|
- <div class="imgText">
|
|
|
- <el-image
|
|
|
- style="width: 80px; height: 80px"
|
|
|
- src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
|
|
|
- ></el-image>
|
|
|
- <div style="font-size:12px">13588888888</div>
|
|
|
- </div>
|
|
|
- <div class="imgText">
|
|
|
- <el-image
|
|
|
- style="width: 80px; height: 80px"
|
|
|
- src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
|
|
|
- ></el-image>
|
|
|
- <div style="font-size:12px">13588888888</div>
|
|
|
- </div>
|
|
|
- <div class="imgText">
|
|
|
- <el-image
|
|
|
- style="width: 80px; height: 80px"
|
|
|
- src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
|
|
|
- ></el-image>
|
|
|
- <div style="font-size:12px">13588888888</div>
|
|
|
- </div>
|
|
|
- <div class="imgText">
|
|
|
- <el-image
|
|
|
- style="width: 80px; height: 80px"
|
|
|
- src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
|
|
|
- ></el-image>
|
|
|
- <div style="font-size:12px">13588888888</div>
|
|
|
- </div>
|
|
|
- <div class="imgText">
|
|
|
- <el-image
|
|
|
- style="width: 80px; height: 80px"
|
|
|
- src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
|
|
|
- ></el-image>
|
|
|
- <div style="font-size:12px">13588888888</div>
|
|
|
- </div>
|
|
|
- <div class="imgText">
|
|
|
- <el-image
|
|
|
- style="width: 80px; height: 80px"
|
|
|
- src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
|
|
|
- ></el-image>
|
|
|
- <div style="font-size:12px">13588888888</div>
|
|
|
- </div>
|
|
|
- <div class="imgText">
|
|
|
- <el-image
|
|
|
- style="width: 80px; height: 80px"
|
|
|
- src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
|
|
|
- ></el-image>
|
|
|
- <div style="font-size:12px">13588888888</div>
|
|
|
- </div>
|
|
|
- <div class="imgText">
|
|
|
- <el-image
|
|
|
- style="width: 80px; height: 80px"
|
|
|
- src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
|
|
|
- ></el-image>
|
|
|
- <div style="font-size:12px">13588888888</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <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>
|
|
|
- </el-main>
|
|
|
- </el-container>
|
|
|
- </el-container>
|
|
|
- </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;">
|
|
|
+ <span>一等奖：1人</span>
|
|
|
+ <el-divider></el-divider>
|
|
|
+ <div style="margin-bottom:1.5vw;">
|
|
|
+ <div class="imgText">
|
|
|
+ <el-image style="width: 4vw; height: 4vw"
|
|
|
+ src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
|
|
|
+ <div style="font-size:0.6vw">13588888888</div>
|
|
|
+ </div>
|
|
|
+ <div class="imgText">
|
|
|
+ <el-image style="width: 4vw; height: 4vw"
|
|
|
+ src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
|
|
|
+ <div style="font-size:0.6vw">13588888888</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div> -->
|
|
|
+
|
|
|
+ <!-- <div style="width:100%;margin-top: 1.2vw;">
|
|
|
+ <span>一等奖：1人</span>
|
|
|
+ <el-divider></el-divider>
|
|
|
+ <div style="margin-bottom:1.5vw;">
|
|
|
+ <div class="imgText">
|
|
|
+ <el-image style="width: 4vw; height: 4vw"
|
|
|
+ src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
|
|
|
+ <div style="font-size:0.6vw">13588888888</div>
|
|
|
+ </div>
|
|
|
+ <div class="imgText">
|
|
|
+ <el-image style="width: 4vw; height: 4vw"
|
|
|
+ src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
|
|
|
+ <div style="font-size:0.6vw">13588888888</div>
|
|
|
+ </div>
|
|
|
+ <div class="imgText">
|
|
|
+ <el-image style="width: 4vw; height: 4vw"
|
|
|
+ src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
|
|
|
+ <div style="font-size:0.6vw">13588888888</div>
|
|
|
+ </div>
|
|
|
+ <div class="imgText">
|
|
|
+ <el-image style="width: 4vw; height: 4vw"
|
|
|
+ src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
|
|
|
+ <div style="font-size:0.6vw">13588888888</div>
|
|
|
+ </div>
|
|
|
+ <div class="imgText">
|
|
|
+ <el-image style="width: 4vw; height: 4vw"
|
|
|
+ src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
|
|
|
+ <div style="font-size:0.6vw">13588888888</div>
|
|
|
+ </div>
|
|
|
+ <div class="imgText">
|
|
|
+ <el-image style="width: 4vw; height: 4vw"
|
|
|
+ src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
|
|
|
+ <div style="font-size:0.6vw">13588888888</div>
|
|
|
+ </div>
|
|
|
+ <div class="imgText">
|
|
|
+ <el-image style="width: 4vw; height: 4vw"
|
|
|
+ src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
|
|
|
+ <div style="font-size:0.6vw">13588888888</div>
|
|
|
+ </div>
|
|
|
+ <div class="imgText">
|
|
|
+ <el-image style="width: 4vw; height: 4vw"
|
|
|
+ src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
|
|
|
+ <div style="font-size:0.6vw">13588888888</div>
|
|
|
+ </div>
|
|
|
+ <div class="imgText">
|
|
|
+ <el-image style="width: 4vw; height: 4vw"
|
|
|
+ src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
|
|
|
+ <div style="font-size:0.6vw">13588888888</div>
|
|
|
+ </div>
|
|
|
+ <div class="imgText">
|
|
|
+ <el-image style="width: 4vw; height: 4vw"
|
|
|
+ src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
|
|
|
+ <div style="font-size:0.6vw">13588888888</div>
|
|
|
+ </div>
|
|
|
+ <div class="imgText">
|
|
|
+ <el-image style="width: 4vw; height: 4vw"
|
|
|
+ src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
|
|
|
+ <div style="font-size:0.6vw">13588888888</div>
|
|
|
+ </div>
|
|
|
+ <div class="imgText">
|
|
|
+ <el-image style="width: 4vw; height: 4vw"
|
|
|
+ src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
|
|
|
+ <div style="font-size:0.6vw">13588888888</div>
|
|
|
+ </div>
|
|
|
+ <div class="imgText">
|
|
|
+ <el-image style="width: 4vw; height: 4vw"
|
|
|
+ src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
|
|
|
+ <div style="font-size:0.6vw">13588888888</div>
|
|
|
+ </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">中奖结果</div>
|
|
|
+ <div class="l-title2">三等奖：服务费免单券20张</div>
|
|
|
+
|
|
|
+ <div class="l-results">
|
|
|
+ <div class="l-imgText" v-for="(item,i) in lotteryResultsNum?20:1" :key="i">
|
|
|
+ <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>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="l-button-group" >
|
|
|
+ <el-button @click="lotteryResultsNum=true">重新开始</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import startLotteryApi from "@/api/business/startLottery";
|
|
|
-
|
|
|
-export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- submitting: false,
|
|
|
- formModel: {},
|
|
|
- activityList: [],
|
|
|
- awardInfoList: [],
|
|
|
- };
|
|
|
- },
|
|
|
- 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;
|
|
|
- }
|
|
|
+ import startLotteryApi from "@/api/business/startLottery";
|
|
|
+ import awardInfoApi from "@/api/base/awardInfo";
|
|
|
+
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ submitting: false,
|
|
|
+ submittingModel: false,
|
|
|
+
|
|
|
+ lotteryResultsNum: true, //抽奖人数 多 or 少
|
|
|
+
|
|
|
+ formModel: {},
|
|
|
+ activityList: [],
|
|
|
+ awardInfoList: [],
|
|
|
+ awardWinningInfoList:[],
|
|
|
+ selectedObject:null,
|
|
|
+ awardImage:"",
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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);
|
|
|
+ },
|
|
|
+ handleAwardChange(val){
|
|
|
+ var self = this;
|
|
|
+ (function() {
|
|
|
+ return awardInfoApi.edit(val);
|
|
|
+ })()
|
|
|
+ .then(response => {
|
|
|
+ var jsonData = response.data;
|
|
|
+
|
|
|
+ if (jsonData.result) {
|
|
|
+ self.awardImage = jsonData.data.image;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleSubmit() {
|
|
|
+ this.submittingModel=true
|
|
|
+ this.lotteryResultsNum=false
|
|
|
+ },
|
|
|
+ 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 + "");
|
|
|
+ });
|
|
|
}
|
|
|
- });
|
|
|
- },
|
|
|
- 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;
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- handleSubmit() {},
|
|
|
- },
|
|
|
-};
|
|
|
+ }
|
|
|
+ }
|
|
|
</script>
|
|
|
-<style>
|
|
|
-/* 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: 20px;
|
|
|
- border: 2px solid rgba(255, 255, 255, 1);
|
|
|
- border-radius: 10px;
|
|
|
- height: 800px;
|
|
|
- margin: 40px;
|
|
|
-}
|
|
|
-
|
|
|
-.leftRegionA {
|
|
|
- width: 600px;
|
|
|
-}
|
|
|
-
|
|
|
-.leftRegionB {
|
|
|
- margin: 40px 40px 40px 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: 60px;
|
|
|
-}
|
|
|
-
|
|
|
-.el-aside {
|
|
|
- text-align: center;
|
|
|
- padding: 10px;
|
|
|
-}
|
|
|
-
|
|
|
-body > .el-container {
|
|
|
- margin-bottom: 40px;
|
|
|
-}
|
|
|
-
|
|
|
-.el-container:nth-child(5) .el-aside,
|
|
|
-.el-container:nth-child(6) .el-aside {
|
|
|
- line-height: 260px;
|
|
|
-}
|
|
|
-
|
|
|
-.el-container:nth-child(7) .el-aside {
|
|
|
- line-height: 320px;
|
|
|
-}
|
|
|
-
|
|
|
-.leftMain {
|
|
|
- margin-top: 30px;
|
|
|
-}
|
|
|
-
|
|
|
-.imgDiv {
|
|
|
- margin-top: 50px;
|
|
|
- text-align: center;
|
|
|
-}
|
|
|
-
|
|
|
-.el-form-item__label {
|
|
|
- color: #ffffff;
|
|
|
-}
|
|
|
-
|
|
|
-.imgText {
|
|
|
- float: left;
|
|
|
- margin-left: 20px;
|
|
|
-}
|
|
|
-</style>
|
|
|
+<style lang="scss">
|
|
|
+ /* 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
