|
|
@@ -1,532 +0,0 @@
|
|
|
-<!DOCTYPE html>
|
|
|
-<html lang="en">
|
|
|
-
|
|
|
-<head>
|
|
|
- <meta charset="UTF-8">
|
|
|
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
- <title>转盘抽奖</title>
|
|
|
- <style>
|
|
|
- .el-overlay {
|
|
|
- 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);
|
|
|
-}
|
|
|
-
|
|
|
- * {
|
|
|
- margin: 0;
|
|
|
- padding: 0;
|
|
|
- box-sizing: border-box;
|
|
|
- }
|
|
|
-
|
|
|
- #app {
|
|
|
- background: url('https://xiaoyou.dgtis.com/images/image/2023/12/22/0s0xlnhasds6lsotuv36.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;
|
|
|
- margin: 0 auto;
|
|
|
- margin-top: 20px;
|
|
|
- }
|
|
|
- .el-dialog__body{
|
|
|
- padding-top: 0px !important;
|
|
|
- }
|
|
|
- [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;
|
|
|
- right: 8%;
|
|
|
- top: 25%;
|
|
|
- }
|
|
|
- .recordBtn {
|
|
|
- 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 {
|
|
|
- width: 80px;
|
|
|
- height: auto;
|
|
|
- }
|
|
|
- .container {
|
|
|
- overflow: hidden;
|
|
|
- width: 500px;
|
|
|
- height: 500px;
|
|
|
- margin: 0 auto;
|
|
|
- position: relative;
|
|
|
- top: 22%;
|
|
|
- }
|
|
|
-
|
|
|
- .prize-list {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- border-radius: 50%;
|
|
|
- border: 10px solid #98d3fc;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
-
|
|
|
- .prize-item {
|
|
|
- /*border: 2px solid red;*/
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- top: -10px;
|
|
|
- margin: auto;
|
|
|
- }
|
|
|
-
|
|
|
- .prize-item img {
|
|
|
- width: 35%;
|
|
|
- /* height: 25%; */
|
|
|
- margin: 35px auto 10px;
|
|
|
- display: block;
|
|
|
- }
|
|
|
-
|
|
|
- .prize-item p {
|
|
|
- color: #fff;
|
|
|
- font-size: 12px;
|
|
|
- text-align: center;
|
|
|
- line-height: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .btn {
|
|
|
- width: 80px;
|
|
|
- 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: -5%;
|
|
|
- bottom: 0;
|
|
|
- margin: auto;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
-
|
|
|
- /* .btn::before {
|
|
|
- content: "";
|
|
|
- width: 41px;
|
|
|
- height: 39px;
|
|
|
- background: url('https://xiaoyou.dgtis.com/images/image/2023/08/15/2vac6uuqd3gpbl35l8e1.png') no-repeat center / 100% 100%;
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- top: -30px;
|
|
|
- margin: auto;
|
|
|
- -webkit-transform: rotate(-5deg);
|
|
|
- transform: rotate(-5deg);
|
|
|
- } */
|
|
|
- .recordListBox{
|
|
|
- max-height: 200px;
|
|
|
- overflow: auto;
|
|
|
- }
|
|
|
- .title{
|
|
|
- font-size: 15px;
|
|
|
- font-weight: 600;
|
|
|
- }
|
|
|
- .recordItem{
|
|
|
- display: flex;
|
|
|
- justify-content: space-around;
|
|
|
- align-items: center;
|
|
|
- margin: 10px 0;
|
|
|
- }
|
|
|
- </style>
|
|
|
-</head>
|
|
|
-
|
|
|
-<body>
|
|
|
- <div id="app" v-cloak class="app">
|
|
|
- <div class="rules" @click="showRules">
|
|
|
- 抽奖<br>规则
|
|
|
- </div>
|
|
|
- <!-- <div class="recordBtn" @click="showRecordList">
|
|
|
- 获奖<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)">
|
|
|
- <img :src="item.imgUrl" alt="">
|
|
|
- <p>{{ item.prizeName }}</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="btn" @click="start"></div>
|
|
|
- </div>
|
|
|
- <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>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-dialog>
|
|
|
- </div>
|
|
|
-</body>
|
|
|
- <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.global.js"></script>
|
|
|
- <link href="https://cdn.bootcdn.net/ajax/libs/element-plus/2.3.12/index.css" rel="stylesheet">
|
|
|
- <script src="https://cdn.bootcdn.net/ajax/libs/element-plus/2.3.12/index.full.js"></script>
|
|
|
- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.1.0/jquery.js"></script>
|
|
|
- <script>
|
|
|
- const {
|
|
|
- createApp,
|
|
|
- onBeforeMount,
|
|
|
- onMounted,
|
|
|
- onUnmounted,
|
|
|
- ref,
|
|
|
- reactive,
|
|
|
- toRefs,
|
|
|
- computed,
|
|
|
- nextTick
|
|
|
- } = Vue
|
|
|
- createApp({
|
|
|
- setup() {
|
|
|
- const state = reactive({
|
|
|
- recordList:[],
|
|
|
- dialogRecordList:false,
|
|
|
- dialogVisible:false,
|
|
|
- rule:'',
|
|
|
- token: '',
|
|
|
- actId: '',
|
|
|
- prizeList: [ ], // 后台配置的奖品数据
|
|
|
- isRunning: false, // 是否正在抽奖
|
|
|
- baseRunAngle: 360 * 5, // 总共转动角度 至少5圈
|
|
|
- prizeId: 0, // 中奖id
|
|
|
- })
|
|
|
- const prizeWrap = ref(null)
|
|
|
-
|
|
|
-
|
|
|
- // 平均每个奖品角度
|
|
|
- const rotateAngle = computed(() => {
|
|
|
- const _degree = 360 / state.prizeList.length
|
|
|
- return _degree
|
|
|
- })
|
|
|
-
|
|
|
- // 要执行总角度数
|
|
|
- const totalRunAngle = computed(() => {
|
|
|
- return state.baseRunAngle + 360 - state.prizeId * rotateAngle.value - rotateAngle.value / 2
|
|
|
- })
|
|
|
-
|
|
|
- // 计算绘制转盘背景
|
|
|
- const bgColor = computed(() => {
|
|
|
- const _len = state.prizeList.length
|
|
|
- const colorList = ['#5352b3', '#363589']
|
|
|
- let colorVal = ''
|
|
|
- for (let i = 0; i < _len; i++) {
|
|
|
- colorVal += `${colorList[i % 2]} ${rotateAngle.value * i}deg ${rotateAngle.value * (i + 1)}deg,`
|
|
|
- }
|
|
|
- return `
|
|
|
- background: conic-gradient(${colorVal.slice(0, -1)});
|
|
|
- `
|
|
|
- })
|
|
|
- // 每个奖品布局
|
|
|
- const prizeStyle = computed(() => {
|
|
|
- const _degree = rotateAngle.value
|
|
|
- return (i) => {
|
|
|
- return `
|
|
|
- width: ${2 * 250 * Math.sin(_degree / 2 * Math.PI / 180)}px;
|
|
|
- height: 250px;
|
|
|
- transform: rotate(${_degree * i + _degree / 2}deg);
|
|
|
- transform-origin: 50% 100%;
|
|
|
- `
|
|
|
- }
|
|
|
- })
|
|
|
-
|
|
|
- onBeforeMount(()=>{
|
|
|
- window.addEventListener('message', function (e) {
|
|
|
- console.log("接收值：", e.data)
|
|
|
- state.token = e.data.token;
|
|
|
- state.actId = e.data.actId;
|
|
|
- ElementPlus.ElLoading.service();
|
|
|
- getTurntableInfo();
|
|
|
- ElementPlus.ElLoading.service().close();
|
|
|
- })
|
|
|
- })
|
|
|
-
|
|
|
- onMounted(() => {
|
|
|
-
|
|
|
- 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;
|
|
|
- state.rule = res.data.content;
|
|
|
- } 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 {
|
|
|
- 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);
|
|
|
- // 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/winners', postData);
|
|
|
- if (res.errno === 0) {
|
|
|
- state.recordList = res.data;
|
|
|
- } else {
|
|
|
- state.isRunning = false;
|
|
|
- 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/admin" + url,//测试环境
|
|
|
- url:"https://xiaoyou.dgtis.com/admin"+ 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 showRules = () =>{
|
|
|
- state.dialogVisible = true;
|
|
|
- }
|
|
|
- const showRecordList = () =>{
|
|
|
- getRecordList();
|
|
|
- state.dialogRecordList = true;
|
|
|
- }
|
|
|
- const start = () => {
|
|
|
- // ElementPlus.ElMessage({
|
|
|
- // showClose: true,
|
|
|
- // message: '已无抽奖次数！',
|
|
|
- // type: 'warning',
|
|
|
- // })
|
|
|
- // return
|
|
|
- if (!state.isRunning) {
|
|
|
- state.isRunning = true;
|
|
|
- starDraw();
|
|
|
- // console.log('开始抽奖，后台请求中奖奖品')
|
|
|
- // // 请求返回的奖品编号 这里使用随机数
|
|
|
- // const prizeId = getRandomNum()
|
|
|
- // console.log('中奖ID>>>', prizeId, state.prizeList[prizeId])
|
|
|
- // state.prizeId = prizeId
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- const startRun = () => {
|
|
|
- console.log(state.isRunning, totalRunAngle.value)
|
|
|
- // 设置动效
|
|
|
- prizeWrap.value.style = `
|
|
|
- ${bgColor.value}
|
|
|
- transform: rotate(${totalRunAngle.value}deg);
|
|
|
- transition: all 4s ease;
|
|
|
- `
|
|
|
- // 监听transition动效停止事件
|
|
|
- prizeWrap.value.addEventListener('transitionend', stopRun)
|
|
|
- }
|
|
|
-
|
|
|
- const stopRun = (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'){
|
|
|
- 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',
|
|
|
- // })
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- return {
|
|
|
- ...toRefs(state),
|
|
|
- bgColor,
|
|
|
- prizeStyle,
|
|
|
- prizeWrap,
|
|
|
- start,
|
|
|
- showRules,
|
|
|
- showRecordList
|
|
|
- }
|
|
|
- }
|
|
|
- }).use(ElementPlus).mount('#app')
|
|
|
- </script>
|
|
|
-</html>
|
