|
@@ -7,6 +7,9 @@
|
|
|
<title>转盘抽奖</title>
|
|
|
<link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css" />
|
|
|
<style>
|
|
|
+ .el-overlay {
|
|
|
+ background-color:rgba(0, 0, 0, 0.8);
|
|
|
+ }
|
|
|
::-webkit-scrollbar {
|
|
|
width: 6px;
|
|
|
height: 6px;
|
|
@@ -42,7 +45,8 @@
|
|
|
}
|
|
|
|
|
|
#app {
|
|
|
- background: url('https://xiaoyou.dgtis.com/images/image/2023/08/16/obnd1td7k6c65ehxciz6.png') no-repeat;
|
|
|
+ /* background: url('https://xiaoyou.dgtis.com/images/image/2023/09/12/5opx47olb1unf4po3vxt.png') no-repeat; */
|
|
|
+ background: url('https://xiaoyou.dgtis.com/images/image/2023/09/19/y5epqefrpodtfzyw0qd9.png') no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
width: 640px;
|
|
|
height: 680px;
|
|
@@ -67,14 +71,23 @@
|
|
|
align-items: center;
|
|
|
font-size: 14px;
|
|
|
font-weight: 600;
|
|
|
- left: 10%;
|
|
|
- top: 15%;
|
|
|
+ left: 8%;
|
|
|
+ top: 22%;
|
|
|
}
|
|
|
.recordBtn {
|
|
|
- cursor: pointer;
|
|
|
- position: absolute;
|
|
|
- right: 10%;
|
|
|
- top: 12%;
|
|
|
+ cursor: pointer;
|
|
|
+ position: absolute;
|
|
|
+ width: 50px;
|
|
|
+ height: 50px;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 50%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 600;
|
|
|
+ right: 8%;
|
|
|
+ top: 22%;
|
|
|
}
|
|
|
|
|
|
.recordBtn>img {
|
|
@@ -87,7 +100,7 @@
|
|
|
height: 500px;
|
|
|
margin: 0 auto;
|
|
|
position: relative;
|
|
|
- top: 23%;
|
|
|
+ top: 22%;
|
|
|
}
|
|
|
|
|
|
.prize-list {
|
|
@@ -123,18 +136,18 @@
|
|
|
|
|
|
.btn {
|
|
|
width: 80px;
|
|
|
- height: 80px;
|
|
|
- background: url('https://xiaoyou.dgtis.com/images/image/2023/08/15/wwn4p7lua9t5h0rx8tlz.png') no-repeat center / 100% 100%;
|
|
|
+ height: 110px;
|
|
|
+ background: url('https://xiaoyou.dgtis.com/images/image/2023/09/12/xvtwunkntyc65fngc9pb.png') no-repeat center / 100% 100%;
|
|
|
position: absolute;
|
|
|
left: 0;
|
|
|
right: 0;
|
|
|
- top: 0;
|
|
|
+ top: -5%;
|
|
|
bottom: 0;
|
|
|
margin: auto;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
|
|
|
- .btn::before {
|
|
|
+ /* .btn::before {
|
|
|
content: "";
|
|
|
width: 41px;
|
|
|
height: 39px;
|
|
@@ -144,9 +157,9 @@
|
|
|
right: 0;
|
|
|
top: -30px;
|
|
|
margin: auto;
|
|
|
- /* -webkit-transform: rotate(-5deg);
|
|
|
- transform: rotate(-5deg); */
|
|
|
- }
|
|
|
+ -webkit-transform: rotate(-5deg);
|
|
|
+ transform: rotate(-5deg);
|
|
|
+ } */
|
|
|
.recordListBox{
|
|
|
max-height: 200px;
|
|
|
overflow: auto;
|
|
@@ -161,11 +174,6 @@
|
|
|
align-items: center;
|
|
|
margin: 10px 0;
|
|
|
}
|
|
|
- .recordItem .prise .recordItem .priseTime{
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
</style>
|
|
|
</head>
|
|
|
|
|
@@ -175,8 +183,11 @@
|
|
|
抽奖<br>规则
|
|
|
</div>
|
|
|
<div class="recordBtn" @click="showRecordList">
|
|
|
- <img src="https://xiaoyou.dgtis.com/images/image/2023/09/06/lt1vbg426idwq725ysdm.png" alt="抽奖记录">
|
|
|
+ 获奖<br>名单
|
|
|
</div>
|
|
|
+ <!-- <div class="recordBtn" @click="showRecordList">
|
|
|
+ <img src="https://xiaoyou.dgtis.com/images/image/2023/09/06/lt1vbg426idwq725ysdm.png" alt="抽奖记录">
|
|
|
+ </div> -->
|
|
|
<div class="container">
|
|
|
<div class="prize-list" ref="prizeWrap" :style="bgColor">
|
|
|
<div class="prize-item" v-for="(item, index) in prizeList" :style="prizeStyle(index)">
|
|
@@ -189,31 +200,31 @@
|
|
|
<el-dialog
|
|
|
v-model="dialogVisible"
|
|
|
title="抽奖规则"
|
|
|
- width="50%"
|
|
|
+ width="80%"
|
|
|
center
|
|
|
>
|
|
|
<div style="max-height: 200px;overflow: auto;" v-html="rule"></div>
|
|
|
</el-dialog>
|
|
|
<el-dialog
|
|
|
v-model="dialogRecordList"
|
|
|
- title="抽奖记录"
|
|
|
- width="50%"
|
|
|
+ title="获奖名单"
|
|
|
+ width="80%"
|
|
|
center
|
|
|
>
|
|
|
<div class="recordListBox">
|
|
|
<div class="recordItem title">
|
|
|
- <div class="prise">获奖时间</div>
|
|
|
- <div class="priseTime">奖品</div>
|
|
|
+ <div style="width: 30%;text-align: center;">姓名</div>
|
|
|
+ <div style="width: 30%;text-align: center;">奖品</div>
|
|
|
+ <div style="width: 40%;text-align: center;">获奖时间</div>
|
|
|
</div>
|
|
|
<el-empty description="暂无数据" v-if="recordList.length==0" :image-size="20"></el-empty>
|
|
|
<div class="recordItem" v-for="(item, index) in recordList">
|
|
|
- <div class="prise">{{item.createTime}}</div>
|
|
|
- <div class="priseTime">{{item.prizeName}}</div>
|
|
|
+ <div style="width: 30%;text-align: center;">{{item.userName}}</div>
|
|
|
+ <div style="width: 30%;text-align: center;">{{item.prizeName}}</div>
|
|
|
+ <div style="width: 40%;text-align: center;">{{item.createTime}}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
- </div>
|
|
|
-
|
|
|
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
|
|
<script src="https://unpkg.com/element-plus"></script>
|
|
|
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.1.0/jquery.js"></script>
|
|
@@ -321,9 +332,9 @@
|
|
|
console.log("接收值:", e.data)
|
|
|
state.token = e.data.token;
|
|
|
state.actId = e.data.actId;
|
|
|
- // ElementPlus.ElLoading.service();
|
|
|
+ ElementPlus.ElLoading.service();
|
|
|
getTurntableInfo();
|
|
|
- // ElementPlus.ElLoading.service().close();
|
|
|
+ ElementPlus.ElLoading.service().close();
|
|
|
})
|
|
|
})
|
|
|
|
|
@@ -378,13 +389,32 @@
|
|
|
};
|
|
|
|
|
|
//抽奖记录
|
|
|
+ // async function getRecordList() {
|
|
|
+ // const postData = {
|
|
|
+ // actId: state.actId,
|
|
|
+ // };
|
|
|
+ // let res = await httpAjax('get', '/mall-prize/prize/user/list', postData);
|
|
|
+ // if (res.errno === 0) {
|
|
|
+ // console.log('抽奖记录',res.data);
|
|
|
+ // state.recordList = res.data;
|
|
|
+ // } else {
|
|
|
+ // state.isRunning = false;
|
|
|
+ // ElementPlus.ElMessage({
|
|
|
+ // showClose: true,
|
|
|
+ // message: res.errmsg,
|
|
|
+ // type: 'error',
|
|
|
+ // });
|
|
|
+ // }
|
|
|
+
|
|
|
+ // };
|
|
|
+
|
|
|
+ //获奖名单
|
|
|
async function getRecordList() {
|
|
|
const postData = {
|
|
|
actId: state.actId,
|
|
|
};
|
|
|
- let res = await httpAjax('get', '/mall-prize/prize/user/list', postData);
|
|
|
+ let res = await httpAjax('get', '/mall-prize/prize/winners', postData);
|
|
|
if (res.errno === 0) {
|
|
|
- console.log('抽奖记录',res.data);
|
|
|
state.recordList = res.data;
|
|
|
} else {
|
|
|
state.isRunning = false;
|
|
@@ -493,11 +523,31 @@
|
|
|
transform: rotate(${totalRunAngle.value - state.baseRunAngle}deg);
|
|
|
`
|
|
|
if(state.prizeList[state.prizeId].prizeType!='40'){
|
|
|
- ElementPlus.ElMessage({
|
|
|
- showClose: true,
|
|
|
- message: "恭喜抽中了" + state.prizeList[state.prizeId].prizeName + "," + "请到个人中心查看。",
|
|
|
- type: 'success',
|
|
|
+ ElementPlus.ElMessageBox.alert("恭喜,您中了" + state.prizeList[state.prizeId].prizeName + "," + "可在“个人中心”我的礼品券中查看,在礼品兑换中兑换相应物品。", {
|
|
|
+ showClose:false,
|
|
|
+ center:true,
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ })
|
|
|
+ // ElementPlus.ElMessage({
|
|
|
+ // offset:window.screen.height / 2,
|
|
|
+ // duration:3000,
|
|
|
+ // showClose: true,
|
|
|
+ // message: "恭喜,您中了" + state.prizeList[state.prizeId].prizeName + "," + "可在“个人中心”我的礼品券中查看,在礼品兑换中兑换响应物品。",
|
|
|
+ // type: 'success',
|
|
|
+ // })
|
|
|
+ }else{
|
|
|
+ ElementPlus.ElMessageBox.alert("很遗憾,您未中奖。", {
|
|
|
+ showClose:false,
|
|
|
+ center:true,
|
|
|
+ confirmButtonText: '确认',
|
|
|
})
|
|
|
+ // ElementPlus.ElMessage({
|
|
|
+ // offset:window.screen.height / 4,
|
|
|
+ // duration:10000,
|
|
|
+ // showClose: true,
|
|
|
+ // message: "很遗憾,您未中奖。",
|
|
|
+ // type: 'error',
|
|
|
+ // })
|
|
|
}
|
|
|
}
|
|
|
|