提交

src/routers/index.js

@@ -54,6 +54,11 @@ export const constantRoutes = [
     path: '/startLottery',
     component: () => import('@/views/startLottery')
   },
+ 
+  {
+    path: '/startLottery-zkx',
+    component: () => import('@/views/startLottery-zkx')
+  },
 ];
 
 // Array.prototype.push.apply(routes, caseRouters);
@@ -86,6 +91,8 @@ router.beforeEach((to, from, next) => {
     }
     else if(to.path === '/startLottery'){
       next();
+    }else if(to.path === '/startLottery-zkx'){
+      next();
     }
     else {
       next(`/login?redirect=${to.path}`);

src/views/startLottery-zkx.vue

@@ -0,0 +1,205 @@
+<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: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>
+					</div>
+				</el-main>
+			</el-container>
+		</el-container>
+	</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;
+					}
+				}
+			});
+		},
+		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;
+	}
+
+	.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>