|
|
@@ -1,74 +1,229 @@
|
|
|
<template>
|
|
|
- <div >
|
|
|
- <el-container class="bgDiv">
|
|
|
- <el-header style="height:150px">Header</el-header>
|
|
|
- <el-container>
|
|
|
- <el-aside width="550px" style="text-align:left">
|
|
|
- <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:350px" 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:350px" 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>
|
|
|
- </el-aside>
|
|
|
- <el-main>
|
|
|
- <div style="text-align:center;margin-bottom:30px" >中奖名单</div>
|
|
|
- <div style="width:100%">
|
|
|
- <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>
|
|
|
- </el-main>
|
|
|
- </el-container>
|
|
|
- </el-container>
|
|
|
- </div>
|
|
|
+ <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 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>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-main>
|
|
|
+ </el-container>
|
|
|
+ </el-container>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
@@ -76,98 +231,127 @@ import startLotteryApi from "@/api/business/startLottery";
|
|
|
|
|
|
export default {
|
|
|
data() {
|
|
|
- return{
|
|
|
- submitting:false,
|
|
|
- formModel:{},
|
|
|
- activityList:[],
|
|
|
- awardInfoList:[],
|
|
|
- }
|
|
|
+ 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;
|
|
|
- }
|
|
|
+ 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){
|
|
|
+ handleChange(val) {
|
|
|
var self = this;
|
|
|
var formData = new FormData();
|
|
|
-
|
|
|
+
|
|
|
formData.append("activityId", val);
|
|
|
|
|
|
- self.awardInfoList=[];
|
|
|
+ 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;
|
|
|
- }
|
|
|
+ startLotteryApi.findByActivityId(formData).then(function(response) {
|
|
|
+ var jsonData = response.data;
|
|
|
+ if (jsonData.result) {
|
|
|
+ if (jsonData.data != null && jsonData.data != "") {
|
|
|
+ self.awardInfoList = jsonData.data;
|
|
|
}
|
|
|
+ }
|
|
|
});
|
|
|
},
|
|
|
- handleSubmit(){
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
+ handleSubmit() {},
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
<style>
|
|
|
-.bgDiv{
|
|
|
- background-image:url('../../public/bg2.jpg');
|
|
|
- background-size: 100% auto; /* 这会让图片在水平方向上铺满，垂直方向上保持原始比例 */
|
|
|
- background-repeat: repeat-x; /* 这会在水平方向上平铺 */
|
|
|
- color:#ffffff
|
|
|
+/* 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;
|
|
|
}
|
|
|
- .el-header, .el-footer {
|
|
|
- text-align: center;
|
|
|
- line-height: 60px;
|
|
|
- }
|
|
|
-
|
|
|
- .el-aside {
|
|
|
- text-align: center;
|
|
|
- padding:10px
|
|
|
- }
|
|
|
-
|
|
|
- .el-main {
|
|
|
- height:500px;
|
|
|
- overflow:auto;
|
|
|
- text-align: left;
|
|
|
- padding:50px
|
|
|
- }
|
|
|
-
|
|
|
- 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>
|
yanliming
