|
|
@@ -19,11 +19,27 @@
|
|
|
width: 720px;
|
|
|
height: 480px;
|
|
|
}
|
|
|
-
|
|
|
+ .el-dialog__body{
|
|
|
+ padding-top: 0px;
|
|
|
+ }
|
|
|
[v-cloak] {
|
|
|
display: none;
|
|
|
}
|
|
|
-
|
|
|
+ .rules{
|
|
|
+ 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;
|
|
|
+ left: 10%;
|
|
|
+ top: 15%;
|
|
|
+ }
|
|
|
.container {
|
|
|
overflow: hidden;
|
|
|
width: 352px;
|
|
|
@@ -95,6 +111,9 @@
|
|
|
|
|
|
<body>
|
|
|
<div id="app" v-cloak class="app">
|
|
|
+ <div class="rules" @click="showRules">
|
|
|
+ 抽奖<br>规则
|
|
|
+ </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)">
|
|
|
@@ -104,6 +123,13 @@
|
|
|
</div>
|
|
|
<div class="btn" @click="start"></div>
|
|
|
</div>
|
|
|
+ <el-dialog
|
|
|
+ v-model="dialogVisible"
|
|
|
+ title="抽奖规则"
|
|
|
+ width="50%"
|
|
|
+ >
|
|
|
+ <div v-html="rule"></div>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
|
|
|
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
|
|
@@ -124,6 +150,8 @@
|
|
|
createApp({
|
|
|
setup() {
|
|
|
const state = reactive({
|
|
|
+ dialogVisible:false,
|
|
|
+ rule:'',
|
|
|
token: '',
|
|
|
actId: '',
|
|
|
prizeList: [
|
|
|
@@ -209,7 +237,9 @@
|
|
|
console.log("接收值：", e.data)
|
|
|
state.token = e.data.token;
|
|
|
state.actId = e.data.actId;
|
|
|
+ // ElementPlus.ElLoading.service();
|
|
|
getTurntableInfo();
|
|
|
+ // ElementPlus.ElLoading.service().close();
|
|
|
})
|
|
|
})
|
|
|
|
|
|
@@ -232,6 +262,7 @@
|
|
|
if (res.errno === 0) {
|
|
|
console.log('获取大转盘信息',res.data);
|
|
|
state.prizeList = res.data.pool;
|
|
|
+ state.rule = res.data.content;
|
|
|
} else {
|
|
|
ElementPlus.ElMessage({
|
|
|
showClose: true,
|
|
|
@@ -310,7 +341,9 @@
|
|
|
const num = Math.floor(Math.random() * state.prizeList.length)
|
|
|
return num
|
|
|
}
|
|
|
-
|
|
|
+ const showRules = () =>{
|
|
|
+ state.dialogVisible = true;
|
|
|
+ }
|
|
|
const start = () => {
|
|
|
debugger
|
|
|
// ElementPlus.ElMessage({
|
|
|
@@ -363,7 +396,8 @@
|
|
|
bgColor,
|
|
|
prizeStyle,
|
|
|
prizeWrap,
|
|
|
- start
|
|
|
+ start,
|
|
|
+ showRules
|
|
|
}
|
|
|
}
|
|
|
}).use(ElementPlus).mount('#app')
|
