|
|
@@ -1,18 +1,19 @@
|
|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
+
|
|
|
<head>
|
|
|
- <meta charset="UTF-8">
|
|
|
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
- <title>转盘抽奖</title>
|
|
|
- <!-- <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/element-plus/dist/index.css"/> -->
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>转盘抽奖</title>
|
|
|
<link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
|
|
|
- <style>
|
|
|
- * {
|
|
|
- margin: 0;
|
|
|
- padding: 0;
|
|
|
- box-sizing: border-box;
|
|
|
+ <style>
|
|
|
+ * {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ box-sizing: border-box;
|
|
|
}
|
|
|
- #app{
|
|
|
+
|
|
|
+ #app {
|
|
|
background: url('https://xiaoyou.dgtis.com/images/image/2023/08/16/obnd1td7k6c65ehxciz6.png') no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
width: 720px;
|
|
|
@@ -22,43 +23,50 @@
|
|
|
align-items: flex-end;
|
|
|
padding-bottom: 20px;
|
|
|
}
|
|
|
- [v-cloak] {
|
|
|
- display: none;
|
|
|
- }
|
|
|
- .container {
|
|
|
+
|
|
|
+ [v-cloak] {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .container {
|
|
|
overflow: hidden;
|
|
|
- width: 352px;
|
|
|
- height: 352px;
|
|
|
- margin: 0 auto;
|
|
|
+ width: 352px;
|
|
|
+ height: 352px;
|
|
|
+ margin: 0 auto;
|
|
|
position: relative;
|
|
|
- }
|
|
|
+ }
|
|
|
+
|
|
|
.prize-list {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
border-radius: 50%;
|
|
|
- border: 10px solid #98d3fc;
|
|
|
+ border: 10px solid #98d3fc;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
- .prize-item {
|
|
|
- /*border: 2px solid red;*/
|
|
|
- position: absolute;
|
|
|
+
|
|
|
+ .prize-item {
|
|
|
+ /*border: 2px solid red;*/
|
|
|
+ position: absolute;
|
|
|
left: 0;
|
|
|
right: 0;
|
|
|
top: -10px;
|
|
|
margin: auto;
|
|
|
- }
|
|
|
- .prize-item img {
|
|
|
- width: 30%;
|
|
|
- height: 20%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .prize-item img {
|
|
|
+ width: 30%;
|
|
|
+ height: 20%;
|
|
|
margin: 40px auto 10px;
|
|
|
display: block;
|
|
|
- }
|
|
|
- .prize-item p {
|
|
|
- color: #fff;
|
|
|
- font-size: 12px;
|
|
|
- text-align: center;
|
|
|
- line-height: 20px;
|
|
|
- }
|
|
|
+ }
|
|
|
+
|
|
|
+ .prize-item p {
|
|
|
+ color: #fff;
|
|
|
+ font-size: 12px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
.btn {
|
|
|
width: 80px;
|
|
|
height: 80px;
|
|
|
@@ -71,6 +79,7 @@
|
|
|
margin: auto;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
+
|
|
|
.btn::before {
|
|
|
content: "";
|
|
|
width: 41px;
|
|
|
@@ -82,43 +91,79 @@
|
|
|
top: -30px;
|
|
|
margin: auto;
|
|
|
}
|
|
|
- </style>
|
|
|
+ </style>
|
|
|
</head>
|
|
|
+
|
|
|
<body>
|
|
|
- <div id="app" v-cloak class="app">
|
|
|
+ <div id="app" v-cloak class="app">
|
|
|
<div class="container">
|
|
|
- <div class="prize-list" ref="prizeWrap" :style="bgColor">
|
|
|
- <div class="prize-item" v-for="(item, index) in prizeList" :style="prizeStyle(index)">
|
|
|
- <img :src="item.pic" alt="">
|
|
|
- <p>{{ item.name }}</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="btn" @click="start"></div>
|
|
|
+ <div class="prize-list" ref="prizeWrap" :style="bgColor">
|
|
|
+ <div class="prize-item" v-for="(item, index) in prizeList" :style="prizeStyle(index)">
|
|
|
+ <img :src="item.imgUrl" alt="">
|
|
|
+ <p>{{ item.prizeName }}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="btn" @click="start"></div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
|
|
|
- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
|
|
- <!-- <script src="//cdn.jsdelivr.net/npm/element-plus"></script> -->
|
|
|
+ <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
|
|
<script src="//unpkg.com/element-plus"></script>
|
|
|
- <script>
|
|
|
- const { createApp, onMounted, onUnmounted, ref, reactive, toRefs, computed, nextTick } = Vue
|
|
|
- createApp({
|
|
|
- setup () {
|
|
|
- const state = reactive({
|
|
|
- prizeList: [
|
|
|
- { name: '手机', pic: 'https://xiaoyou.dgtis.com/images/image/2023/08/15/6b8jfssjhybfj572ybs3.jpg' },
|
|
|
- { name: '手表', pic: 'https://img1.baidu.com/it/u=2631716577,1296460670&fm=253&fmt=auto&app=120&f=JPEG' },
|
|
|
- { name: '苹果', pic: 'https://img2.baidu.com/it/u=2611478896,137965957&fm=253&fmt=auto&app=138&f=JPEG' },
|
|
|
- { name: '棒棒糖', pic: 'https://img2.baidu.com/it/u=576980037,1655121105&fm=253&fmt=auto&app=138&f=PNG' },
|
|
|
- { name: '娃娃', pic: 'https://img2.baidu.com/it/u=4075390137,3967712457&fm=253&fmt=auto&app=138&f=PNG' },
|
|
|
- { name: '木马', pic: 'https://img1.baidu.com/it/u=2434318933,2727681086&fm=253&fmt=auto&app=120&f=JPEG' },
|
|
|
- { name: '德芙', pic: 'https://img0.baidu.com/it/u=1378564582,2397555841&fm=253&fmt=auto&app=120&f=JPEG' },
|
|
|
- { name: '玫瑰', pic: 'https://img1.baidu.com/it/u=1125656938,422247900&fm=253&fmt=auto&app=120&f=JPEG' },
|
|
|
- ], // 后台配置的奖品数据
|
|
|
- isRunning: false, // 是否正在抽奖
|
|
|
- baseRunAngle: 360 * 5, // 总共转动角度 至少5圈
|
|
|
- prizeId: 0, // 中奖id
|
|
|
- })
|
|
|
+ <script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.1.0/jquery.js"></script>
|
|
|
+ <script>
|
|
|
+ const {
|
|
|
+ createApp,
|
|
|
+ onMounted,
|
|
|
+ onUnmounted,
|
|
|
+ ref,
|
|
|
+ reactive,
|
|
|
+ toRefs,
|
|
|
+ computed,
|
|
|
+ nextTick
|
|
|
+ } = Vue
|
|
|
+ createApp({
|
|
|
+ setup() {
|
|
|
+ const state = reactive({
|
|
|
+ token: '',
|
|
|
+ actId: '',
|
|
|
+ prizeList: [
|
|
|
+ // {
|
|
|
+ // prizeName: '手机',
|
|
|
+ // imgUrl: 'https://xiaoyou.dgtis.com/images/image/2023/08/15/6b8jfssjhybfj572ybs3.jpg'
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // prizeName: '手表',
|
|
|
+ // imgUrl: 'https://img1.baidu.com/it/u=2631716577,1296460670&fm=253&fmt=auto&app=120&f=JPEG'
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // prizeName: '苹果',
|
|
|
+ // imgUrl: 'https://img2.baidu.com/it/u=2611478896,137965957&fm=253&fmt=auto&app=138&f=JPEG'
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // prizeName: '棒棒糖',
|
|
|
+ // imgUrl: 'https://img2.baidu.com/it/u=576980037,1655121105&fm=253&fmt=auto&app=138&f=PNG'
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // prizeName: '娃娃',
|
|
|
+ // imgUrl: 'https://img2.baidu.com/it/u=4075390137,3967712457&fm=253&fmt=auto&app=138&f=PNG'
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // prizeName: '木马',
|
|
|
+ // imgUrl: 'https://img1.baidu.com/it/u=2434318933,2727681086&fm=253&fmt=auto&app=120&f=JPEG'
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // prizeName: '德芙',
|
|
|
+ // imgUrl: 'https://img0.baidu.com/it/u=1378564582,2397555841&fm=253&fmt=auto&app=120&f=JPEG'
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // prizeName: '玫瑰',
|
|
|
+ // imgUrl: 'https://img1.baidu.com/it/u=1125656938,422247900&fm=253&fmt=auto&app=120&f=JPEG'
|
|
|
+ // },
|
|
|
+ ], // 后台配置的奖品数据
|
|
|
+ isRunning: false, // 是否正在抽奖
|
|
|
+ baseRunAngle: 360 * 5, // 总共转动角度 至少5圈
|
|
|
+ prizeId: 0, // 中奖id
|
|
|
+ })
|
|
|
const prizeWrap = ref(null)
|
|
|
|
|
|
|
|
|
@@ -130,7 +175,7 @@
|
|
|
|
|
|
// 要执行总角度数
|
|
|
const totalRunAngle = computed(() => {
|
|
|
- return state.baseRunAngle + 360 - state.prizeId * rotateAngle.value - rotateAngle.value / 2
|
|
|
+ return state.baseRunAngle + 360 - state.prizeId * rotateAngle.value - rotateAngle.value / 2
|
|
|
})
|
|
|
|
|
|
// 计算绘制转盘背景
|
|
|
@@ -159,35 +204,125 @@
|
|
|
})
|
|
|
|
|
|
onMounted(() => {
|
|
|
- prizeWrap.value.style = `${bgColor.value} transform: rotate(-${rotateAngle.value / 2}deg)`
|
|
|
+ window.addEventListener('message', function (e) {
|
|
|
+ console.log("接收值：", e.data)
|
|
|
+ state.token = e.data.token;
|
|
|
+ state.actId = e.data.actId;
|
|
|
+ getTurntableInfo();
|
|
|
+ })
|
|
|
+ prizeWrap.value.style = `${bgColor.value} transform: rotate(-${rotateAngle.value / 2}deg)`;
|
|
|
})
|
|
|
|
|
|
onUnmounted(() => {
|
|
|
prizeWrap.value.removeEventListener('transitionend', stopRun)
|
|
|
})
|
|
|
|
|
|
+ // 获取大转盘信息
|
|
|
+ async function getTurntableInfo() {
|
|
|
+ const postData = {
|
|
|
+ actId: state.actId,
|
|
|
+ };
|
|
|
+ let res = await httpAjax('get', '/mall-prize/prize/info', postData)
|
|
|
+ if (res.errno === 0) {
|
|
|
+ console.log('获取大转盘信息',res.data);
|
|
|
+ state.prizeList = res.data.pool;
|
|
|
+ } else {
|
|
|
+ ElementPlus.ElMessage({
|
|
|
+ showClose: true,
|
|
|
+ message: res.errmsg,
|
|
|
+ type: 'error',
|
|
|
+ });
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ // 大转盘抽奖按钮
|
|
|
+ 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 {
|
|
|
+ ElementPlus.ElMessage({
|
|
|
+ showClose: true,
|
|
|
+ message: res.errmsg,
|
|
|
+ type: 'error',
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ };
|
|
|
+
|
|
|
+ // 简单封装ajax
|
|
|
+ const httpAjax = (type, url, data) => {
|
|
|
+ ajaxHeaders = {
|
|
|
+ "Authorization": state.token
|
|
|
+ }
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ $.ajax({
|
|
|
+ type: type,
|
|
|
+ url: 'http://192.168.100.208:9083/admin' + url, //本地
|
|
|
+ // url: "http://47.103.79.143:9085" + url,//测试环境
|
|
|
+ // url:"https://xiaoyou.dgtis.com"+ url,//正式环境
|
|
|
+ data: data,
|
|
|
+ contentType: type === 'post' ? false : true,
|
|
|
+ processData: type === 'post' ? false : true,
|
|
|
+ headers: ajaxHeaders,
|
|
|
+ success: function (res) {
|
|
|
+ if (res.errno == 503) {
|
|
|
+ window.location.href = 'https://dgt.dgtis.com/oneportal/login'
|
|
|
+ } else {
|
|
|
+ resolve(res);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ error: function (error) {
|
|
|
+ reject(error);
|
|
|
+ ElementPlus.ElMessage({
|
|
|
+ showClose: true,
|
|
|
+ message: '网络错误，请稍后再试！',
|
|
|
+ type: 'error',
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ // 处理formData数据格式
|
|
|
+ const getFormData = (datas) => {
|
|
|
+ let formData = new FormData();
|
|
|
+ for (let key in datas) {
|
|
|
+ formData.append(key, datas[key]);
|
|
|
+ }
|
|
|
+ return formData;
|
|
|
+ }
|
|
|
+
|
|
|
// 获取随机数
|
|
|
const getRandomNum = () => {
|
|
|
- const num = Math.floor(Math.random() * state.prizeList.length)
|
|
|
- return num
|
|
|
+ const num = Math.floor(Math.random() * state.prizeList.length)
|
|
|
+ return num
|
|
|
}
|
|
|
|
|
|
const start = () => {
|
|
|
+ debugger
|
|
|
// ElementPlus.ElMessage({
|
|
|
// showClose: true,
|
|
|
// message: '已无抽奖次数！',
|
|
|
// type: 'warning',
|
|
|
// })
|
|
|
// return
|
|
|
- if (!state.isRunning) {
|
|
|
- state.isRunning = true
|
|
|
- console.log('开始抽奖，后台请求中奖奖品')
|
|
|
- // 请求返回的奖品编号 这里使用随机数
|
|
|
- const prizeId = getRandomNum()
|
|
|
- console.log('中奖ID>>>', prizeId, state.prizeList[prizeId])
|
|
|
- state.prizeId = prizeId
|
|
|
- startRun()
|
|
|
- }
|
|
|
+ if (!state.isRunning) {
|
|
|
+ state.isRunning = true;
|
|
|
+ starDraw();
|
|
|
+ // console.log('开始抽奖，后台请求中奖奖品')
|
|
|
+ // // 请求返回的奖品编号 这里使用随机数
|
|
|
+ // const prizeId = getRandomNum()
|
|
|
+ // console.log('中奖ID>>>', prizeId, state.prizeList[prizeId])
|
|
|
+ // state.prizeId = prizeId
|
|
|
+
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
const startRun = () => {
|
|
|
@@ -205,27 +340,28 @@
|
|
|
const stopRun = (e) => {
|
|
|
console.log(e)
|
|
|
state.isRunning = false
|
|
|
- prizeWrap.value.style = `
|
|
|
+ prizeWrap.value.style = `
|
|
|
${bgColor.value}
|
|
|
transform: rotate(${totalRunAngle.value - state.baseRunAngle}deg);
|
|
|
`
|
|
|
|
|
|
ElementPlus.ElMessage({
|
|
|
showClose: true,
|
|
|
- message: "恭喜抽中" + state.prizeList[state.prizeId].name + "," + "请到个人中心查看。",
|
|
|
+ message: "恭喜抽中" + state.prizeList[state.prizeId].prizeName + "," + "请到个人中心查看。",
|
|
|
type: 'success',
|
|
|
})
|
|
|
}
|
|
|
|
|
|
return {
|
|
|
- ...toRefs(state),
|
|
|
+ ...toRefs(state),
|
|
|
bgColor,
|
|
|
prizeStyle,
|
|
|
prizeWrap,
|
|
|
- start
|
|
|
+ start
|
|
|
}
|
|
|
- }
|
|
|
- }).use(ElementPlus).mount('#app')
|
|
|
- </script>
|
|
|
+ }
|
|
|
+ }).use(ElementPlus).mount('#app')
|
|
|
+ </script>
|
|
|
</body>
|
|
|
+
|
|
|
</html>
|
