代码优化

public/monthlyDrawCarousel.html

@@ -224,345 +224,314 @@
       </div>
     </div>
   </el-dialog>
-  <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: [
-            // {
-            //   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)
+  </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 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 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,`
-          }
+      // 计算绘制转盘背景
+      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 `
-            background: conic-gradient(${colorVal.slice(0, -1)});
+            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(()=>{
+        debugger
+        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();
         })
-        // 每个奖品布局
-        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%;
-            `
-          }
-        })
+      })
+      
+      onMounted(() => {
        
-        onBeforeMount(()=>{
-          debugger
-          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)`;
-        })
+        prizeWrap.value.style = `${bgColor.value} transform: rotate(-${rotateAngle.value / 2}deg)`;
+      })
 
-        onUnmounted(() => {
-          prizeWrap.value.removeEventListener('transitionend', stopRun)
-        })
+      onUnmounted(() => {
+        prizeWrap.value.removeEventListener('transitionend', stopRun)
+      })
 
-        // 获取大转盘信息
-        async function getTurntableInfo() {
-          debugger
-          const postData = {
+      // 获取大转盘信息
+      async function getTurntableInfo() {
+        debugger
+        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('get', '/mall-prize/prize/info', postData)
+          let res = await httpAjax('post', '/mall-prize/prize', getFormData(postData));
           if (res.errno === 0) {
-            console.log('获取大转盘信息',res.data);
-            state.prizeList = res.data.pool;
-            state.rule = res.data.content;
+            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 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/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',
+            });
+          }  
+        
+      };
 
-        //获奖名单
-        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;
+      // 简单封装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: res.errmsg,
+                message: '网络错误，请稍后再试！',
                 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;
+      }
 
-        // 处理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 = () => {
+        debugger
+        // 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 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 = () => {
-          debugger
+      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: '已无抽奖次数！',
-          //   type: 'warning',
+          //   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
-          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>
-</body>
 
+      return {
+        ...toRefs(state),
+        bgColor,
+        prizeStyle,
+        prizeWrap,
+        start,
+        showRules,
+        showRecordList
+      }
+    }
+  }).use(ElementPlus).mount('#app')
+</script>
 </html>