lottery-activity-portal/src/views/startLottery-zkx.vue

<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%;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 v-show="submitting" class=" lotteryRegion" :class="{
			lotteryResultsNum:lotteryResultsNum,
			lotteryProcess: !lotteryResultsNum
		}">
			<div class="l-title">中奖结果</div>
			<div class="l-title2">中奖结果</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>重新开始</el-button>
			</div>
		</div>

	</div>
</template>

<script>
	import startLotteryApi from "@/api/business/startLottery";

	export default {
		data() {
			return {
				submitting: true,

				lotteryResultsNum: true, //抽奖人数 多 or 少

				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 lang="scss">
	/* lotteryRegion */
	.lotteryRegion {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);

		width: 800px;
		height: 720px;

		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: 40px;
	}

	.l-title {
		font-size: 36px;
	}

	.l-title2 {
		font-size: 24px;

	}

	.l-results {
		margin-top: 72px;

	}

	.l-imgText {
		//margin: 0 32px 32px 0 ;
	}

	//大图
	.lotteryProcess {
		.l-imgText-img {
			width: 240px;
			height: 240px
		}

		.l-imgText-t {
			font-size: 28px;
			margin-top: 20px;
		}
	}

	//小图
	.lotteryResultsNum {
		.l-results {
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;
			height: 400px;
			overflow: hidden;
			overflow-y: auto;
		}

		.l-imgText-img {
			width: 100px;
			height: 100px;
		}

		.l-imgText-t {
			font-size: 18px;
		}

		.l-imgText {
			margin: 0 24px 24px 0;
		}
	}

	.l-button-group {
		margin-top: 70px;
	}

	/* 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>