|
|
@@ -7,35 +7,36 @@
|
|
|
<title>转盘抽奖</title>
|
|
|
<style>
|
|
|
.el-overlay {
|
|
|
- background-color:rgba(0, 0, 0, 0.8);
|
|
|
+ background-color: rgba(0, 0, 0, 0.8);
|
|
|
+ }
|
|
|
+
|
|
|
+ ::-webkit-scrollbar {
|
|
|
+ width: 6px;
|
|
|
+ height: 6px;
|
|
|
+ }
|
|
|
+
|
|
|
+ ::-webkit-scrollbar-track {
|
|
|
+ width: 3px;
|
|
|
+ background: rgba(#101F1C, 0.1);
|
|
|
+ -webkit-border-radius: 2em;
|
|
|
+ -moz-border-radius: 2em;
|
|
|
+ border-radius: 2em;
|
|
|
+ }
|
|
|
+
|
|
|
+ ::-webkit-scrollbar-thumb {
|
|
|
+ background-color: rgba(144, 147, 153, .5);
|
|
|
+ background-clip: padding-box;
|
|
|
+ min-height: 28px;
|
|
|
+ -webkit-border-radius: 2em;
|
|
|
+ -moz-border-radius: 2em;
|
|
|
+ border-radius: 2em;
|
|
|
+ transition: background-color .3s;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ ::-webkit-scrollbar-thumb:hover {
|
|
|
+ background-color: rgba(144, 147, 153, .3);
|
|
|
}
|
|
|
-::-webkit-scrollbar {
|
|
|
- width: 6px;
|
|
|
- height: 6px;
|
|
|
-}
|
|
|
-
|
|
|
-::-webkit-scrollbar-track {
|
|
|
- width: 3px;
|
|
|
- background: rgba(#101F1C, 0.1);
|
|
|
- -webkit-border-radius: 2em;
|
|
|
- -moz-border-radius: 2em;
|
|
|
- border-radius: 2em;
|
|
|
-}
|
|
|
-
|
|
|
-::-webkit-scrollbar-thumb {
|
|
|
- background-color: rgba(144,147,153,.5);
|
|
|
- background-clip: padding-box;
|
|
|
- min-height: 28px;
|
|
|
- -webkit-border-radius: 2em;
|
|
|
- -moz-border-radius: 2em;
|
|
|
- border-radius: 2em;
|
|
|
- transition: background-color .3s;
|
|
|
- cursor: pointer;
|
|
|
-}
|
|
|
-
|
|
|
-::-webkit-scrollbar-thumb:hover {
|
|
|
- background-color: rgba(144,147,153,.3);
|
|
|
-}
|
|
|
|
|
|
* {
|
|
|
margin: 0;
|
|
|
@@ -52,13 +53,16 @@
|
|
|
margin: 0 auto;
|
|
|
margin-top: 20px;
|
|
|
}
|
|
|
- .el-dialog__body{
|
|
|
+
|
|
|
+ .el-dialog__body {
|
|
|
padding-top: 0px !important;
|
|
|
}
|
|
|
+
|
|
|
[v-cloak] {
|
|
|
display: none;
|
|
|
}
|
|
|
- .rules{
|
|
|
+
|
|
|
+ .rules {
|
|
|
cursor: pointer;
|
|
|
position: absolute;
|
|
|
width: 50px;
|
|
|
@@ -73,6 +77,7 @@
|
|
|
left: 8%;
|
|
|
top: 22%;
|
|
|
}
|
|
|
+
|
|
|
.recordBtn {
|
|
|
cursor: pointer;
|
|
|
position: absolute;
|
|
|
@@ -90,9 +95,10 @@
|
|
|
}
|
|
|
|
|
|
.recordBtn>img {
|
|
|
- width: 80px;
|
|
|
- height: auto;
|
|
|
+ width: 80px;
|
|
|
+ height: auto;
|
|
|
}
|
|
|
+
|
|
|
.container {
|
|
|
overflow: hidden;
|
|
|
width: 500px;
|
|
|
@@ -159,15 +165,17 @@
|
|
|
-webkit-transform: rotate(-5deg);
|
|
|
transform: rotate(-5deg);
|
|
|
} */
|
|
|
- .recordListBox{
|
|
|
+ .recordListBox {
|
|
|
max-height: 200px;
|
|
|
overflow: auto;
|
|
|
}
|
|
|
- .title{
|
|
|
+
|
|
|
+ .title {
|
|
|
font-size: 15px;
|
|
|
font-weight: 600;
|
|
|
}
|
|
|
- .recordItem{
|
|
|
+
|
|
|
+ .recordItem {
|
|
|
display: flex;
|
|
|
justify-content: space-around;
|
|
|
align-items: center;
|
|
|
@@ -196,37 +204,28 @@
|
|
|
</div>
|
|
|
<div class="btn" @click="start"></div>
|
|
|
</div>
|
|
|
- <el-dialog
|
|
|
- v-model="dialogVisible"
|
|
|
- title="抽奖规则"
|
|
|
- width="80%"
|
|
|
- center
|
|
|
- >
|
|
|
+ <el-dialog v-model="dialogVisible" title="抽奖规则" width="80%" center>
|
|
|
<div style="max-height: 200px;overflow: auto;" v-html="rule"></div>
|
|
|
</el-dialog>
|
|
|
- <el-dialog
|
|
|
- v-model="dialogRecordList"
|
|
|
- title="获奖名单"
|
|
|
- width="80%"
|
|
|
- center
|
|
|
- >
|
|
|
- <div class="recordListBox">
|
|
|
- <div class="recordItem title">
|
|
|
- <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 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>
|
|
|
+ <el-dialog v-model="dialogRecordList" title="获奖名单" width="80%" center>
|
|
|
+ <div class="recordListBox">
|
|
|
+ <div class="recordItem title">
|
|
|
+ <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 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>
|
|
|
- </div>
|
|
|
- </el-dialog>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
-
|
|
|
+
|
|
|
</body>
|
|
|
+<script src="./js/crypto-js.min.js"></script>
|
|
|
<script src="./js/vue.global.js"></script>
|
|
|
<link href="./css/index.css" rel="stylesheet">
|
|
|
<script src="./js/index.full.min.js"></script>
|
|
|
@@ -246,12 +245,13 @@
|
|
|
createApp({
|
|
|
setup() {
|
|
|
const state = reactive({
|
|
|
- recordList:[],
|
|
|
- dialogRecordList:false,
|
|
|
- dialogVisible:false,
|
|
|
- rule:'',
|
|
|
+ recordList: [],
|
|
|
+ dialogRecordList: false,
|
|
|
+ dialogVisible: false,
|
|
|
+ rule: '',
|
|
|
token: '',
|
|
|
actId: '',
|
|
|
+ keyStr: 'qwerasdfzxcvtyui',
|
|
|
prizeList: [
|
|
|
], // 后台配置的奖品数据
|
|
|
isRunning: false, // 是否正在抽奖
|
|
|
@@ -296,11 +296,11 @@
|
|
|
`
|
|
|
}
|
|
|
})
|
|
|
-
|
|
|
- onBeforeMount(()=>{
|
|
|
+
|
|
|
+ onBeforeMount(() => {
|
|
|
debugger
|
|
|
window.addEventListener('message', function (e) {
|
|
|
- console.log("接收值：", e.data)
|
|
|
+ // console.log("接收值：", e.data)
|
|
|
state.token = e.data.token;
|
|
|
state.actId = e.data.actId;
|
|
|
ElementPlus.ElLoading.service();
|
|
|
@@ -308,9 +308,9 @@
|
|
|
ElementPlus.ElLoading.service().close();
|
|
|
})
|
|
|
})
|
|
|
-
|
|
|
+
|
|
|
onMounted(() => {
|
|
|
-
|
|
|
+
|
|
|
prizeWrap.value.style = `${bgColor.value} transform: rotate(-${rotateAngle.value / 2}deg)`;
|
|
|
})
|
|
|
|
|
|
@@ -326,7 +326,7 @@
|
|
|
};
|
|
|
let res = await httpAjax('get', '/mall-prize/prize/info', postData)
|
|
|
if (res.errno === 0) {
|
|
|
- console.log('获取大转盘信息',res.data);
|
|
|
+ // console.log('获取大转盘信息',res.data);
|
|
|
state.prizeList = res.data.pool;
|
|
|
state.rule = res.data.content;
|
|
|
} else {
|
|
|
@@ -337,26 +337,41 @@
|
|
|
});
|
|
|
}
|
|
|
};
|
|
|
-
|
|
|
+ function encryptECB(word) {
|
|
|
+ var keyHex = CryptoJS.enc.Utf8.parse(state.keyStr)
|
|
|
+ var plaintText = word
|
|
|
+ var encryptedData = CryptoJS.AES.encrypt(
|
|
|
+ plaintText,
|
|
|
+ keyHex,
|
|
|
+ {
|
|
|
+ mode: CryptoJS.mode.ECB,
|
|
|
+ padding: CryptoJS.pad.Pkcs7
|
|
|
+ })
|
|
|
+ return encryptedData.toString();
|
|
|
+ };
|
|
|
// 大转盘抽奖按钮
|
|
|
async function starDraw() {
|
|
|
const postData = {
|
|
|
- actId: state.actId,
|
|
|
- };
|
|
|
- let res = await httpAjax('post', '/mall-prize/prize', getFormData(postData));
|
|
|
- if (res.errno === 0) {
|
|
|
- console.log('抽奖',res.data);
|
|
|
- state.prizeId = res.data.index;
|
|
|
- startRun();
|
|
|
- } else {
|
|
|
- state.isRunning = false;
|
|
|
- ElementPlus.ElMessage({
|
|
|
- showClose: true,
|
|
|
- message: res.errmsg,
|
|
|
- type: 'error',
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
+ actId: state.actId,
|
|
|
+ };
|
|
|
+ postData = JSON.stringify(postData)
|
|
|
+ postData = encryptECB(postData)
|
|
|
+ postData = postData.replace(/[\t\r\f\n\s]*/g, '');
|
|
|
+ // let res = await httpAjax('post', '/mall-prize/prize', getFormData(postData));
|
|
|
+ let res = await httpAjax('post', '/mall-prize/prize', postData);
|
|
|
+ if (res.errno === 0) {
|
|
|
+ // console.log('抽奖',res.data);
|
|
|
+ state.prizeId = res.data.index;
|
|
|
+ startRun();
|
|
|
+ } else {
|
|
|
+ state.isRunning = false;
|
|
|
+ ElementPlus.ElMessage({
|
|
|
+ showClose: true,
|
|
|
+ message: res.errmsg,
|
|
|
+ type: 'error',
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
};
|
|
|
|
|
|
//抽奖记录
|
|
|
@@ -376,26 +391,26 @@
|
|
|
// type: 'error',
|
|
|
// });
|
|
|
// }
|
|
|
-
|
|
|
+
|
|
|
// };
|
|
|
|
|
|
//获奖名单
|
|
|
async function getRecordList() {
|
|
|
const postData = {
|
|
|
- actId: state.actId,
|
|
|
- };
|
|
|
- let res = await httpAjax('get', '/mall-prize/prize/winners', postData);
|
|
|
- if (res.errno === 0) {
|
|
|
- state.recordList = res.data;
|
|
|
- } else {
|
|
|
- state.isRunning = false;
|
|
|
- ElementPlus.ElMessage({
|
|
|
- showClose: true,
|
|
|
- message: res.errmsg,
|
|
|
- type: 'error',
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
+ actId: state.actId,
|
|
|
+ };
|
|
|
+ let res = await httpAjax('get', '/mall-prize/prize/winners', postData);
|
|
|
+ if (res.errno === 0) {
|
|
|
+ state.recordList = res.data;
|
|
|
+ } else {
|
|
|
+ state.isRunning = false;
|
|
|
+ ElementPlus.ElMessage({
|
|
|
+ showClose: true,
|
|
|
+ message: res.errmsg,
|
|
|
+ type: 'error',
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
};
|
|
|
|
|
|
// 简单封装ajax
|
|
|
@@ -407,8 +422,8 @@
|
|
|
$.ajax({
|
|
|
type: type,
|
|
|
// url: 'http://192.168.100.208:9083/admin' + url, //本地
|
|
|
- // url: "http://47.103.79.143:9085/admin" + url,//测试环境
|
|
|
- url:"https://xiaoyou.dgtis.com/admin"+ url,//正式环境
|
|
|
+ url: "http://47.103.79.143:9085/admin" + url,//测试环境
|
|
|
+ // url: "https://xiaoyou.dgtis.com/admin" + url,//正式环境
|
|
|
data: data,
|
|
|
contentType: type === 'post' ? false : true,
|
|
|
processData: type === 'post' ? false : true,
|
|
|
@@ -447,10 +462,10 @@
|
|
|
const num = Math.floor(Math.random() * state.prizeList.length)
|
|
|
return num
|
|
|
}
|
|
|
- const showRules = () =>{
|
|
|
+ const showRules = () => {
|
|
|
state.dialogVisible = true;
|
|
|
}
|
|
|
- const showRecordList = () =>{
|
|
|
+ const showRecordList = () => {
|
|
|
getRecordList();
|
|
|
state.dialogRecordList = true;
|
|
|
}
|
|
|
@@ -470,12 +485,12 @@
|
|
|
// const prizeId = getRandomNum()
|
|
|
// console.log('中奖ID>>>', prizeId, state.prizeList[prizeId])
|
|
|
// state.prizeId = prizeId
|
|
|
-
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
|
|
|
const startRun = () => {
|
|
|
- console.log(state.isRunning, totalRunAngle.value)
|
|
|
+ // console.log(state.isRunning, totalRunAngle.value)
|
|
|
// 设置动效
|
|
|
prizeWrap.value.style = `
|
|
|
${bgColor.value}
|
|
|
@@ -487,16 +502,16 @@
|
|
|
}
|
|
|
|
|
|
const stopRun = (e) => {
|
|
|
- console.log(e)
|
|
|
+ // console.log(e)
|
|
|
state.isRunning = false
|
|
|
prizeWrap.value.style = `
|
|
|
${bgColor.value}
|
|
|
transform: rotate(${totalRunAngle.value - state.baseRunAngle}deg);
|
|
|
`
|
|
|
- if(state.prizeList[state.prizeId].prizeType!='40'){
|
|
|
+ if (state.prizeList[state.prizeId].prizeType != '40') {
|
|
|
ElementPlus.ElMessageBox.alert("恭喜，您中了" + state.prizeList[state.prizeId].prizeName + "," + "可在“个人中心”我的礼品券中查看，在礼品兑换中兑换相应物品。", {
|
|
|
- showClose:false,
|
|
|
- center:true,
|
|
|
+ showClose: false,
|
|
|
+ center: true,
|
|
|
confirmButtonText: '确定',
|
|
|
})
|
|
|
// ElementPlus.ElMessage({
|
|
|
@@ -506,10 +521,10 @@
|
|
|
// message: "恭喜，您中了" + state.prizeList[state.prizeId].prizeName + "," + "可在“个人中心”我的礼品券中查看，在礼品兑换中兑换响应物品。",
|
|
|
// type: 'success',
|
|
|
// })
|
|
|
- }else{
|
|
|
+ } else {
|
|
|
ElementPlus.ElMessageBox.alert("很遗憾，您未中奖。", {
|
|
|
- showClose:false,
|
|
|
- center:true,
|
|
|
+ showClose: false,
|
|
|
+ center: true,
|
|
|
confirmButtonText: '确认',
|
|
|
})
|
|
|
// ElementPlus.ElMessage({
|
|
|
@@ -534,4 +549,5 @@
|
|
|
}
|
|
|
}).use(ElementPlus).mount('#app')
|
|
|
</script>
|
|
|
+
|
|
|
</html>
|
