抽奖加密

public/dailyDrawCarousel.html

@@ -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;
@@ -51,13 +52,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;
@@ -72,6 +76,7 @@
       left: 8%;
       top: 22%;
     }
+
     .recordBtn {
       cursor: pointer;
       position: absolute;
@@ -89,9 +94,10 @@
     }
 
     .recordBtn>img {
-        width: 80px;
-        height: auto;
+      width: 80px;
+      height: auto;
     }
+
     .container {
       overflow: hidden;
       width: 500px;
@@ -158,15 +164,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;
@@ -195,36 +203,26 @@
       </div>
       <div class="btn" @click="start"></div>
     </div>
-    <el-dialog
-      v-model="dialogVisible"
-      title="抽奖规则"
-      width="70%"
-      center
-    >
+    <el-dialog v-model="dialogVisible" title="抽奖规则" width="70%" center>
       <div style="max-height: 400px;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>
@@ -246,13 +244,13 @@
   createApp({
     setup() {
       const state = reactive({
-        recordList:[],
-        dialogRecordList:false,
-        dialogVisible:false,
-        rule:'',
+        recordList: [],
+        dialogRecordList: false,
+        dialogVisible: false,
+        rule: '',
         token: '',
         actId: '',
-        keyStr:'qwerasdfzxcvtyui',
+        keyStr: 'qwerasdfzxcvtyui',
         prizeList: [
         ], // 后台配置的奖品数据
         isRunning: false, // 是否正在抽奖
@@ -297,8 +295,8 @@
           `
         }
       })
-     
-      onBeforeMount(()=>{
+
+      onBeforeMount(() => {
         window.addEventListener('message', function (e) {
           // console.log("接收值：", e.data)
           state.token = e.data.token;
@@ -308,9 +306,9 @@
           ElementPlus.ElLoading.service().close();
         })
       })
-      
+
       onMounted(() => {
-       
+
         prizeWrap.value.style = `${bgColor.value} transform: rotate(-${rotateAngle.value / 2}deg)`;
       })
 
@@ -337,40 +335,40 @@
         }
       };
       function encryptECB(word) {
-          var keyHex = CryptoJS.enc.Utf8.parse(state.token)
-          var plaintText = word
-          var encryptedData = CryptoJS.AES.encrypt(
+        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
+            mode: CryptoJS.mode.ECB,
+            padding: CryptoJS.pad.Pkcs7
           })
-          return encryptedData.toString();
+        return encryptedData.toString();
       };
       // 大转盘抽奖按钮
       async function starDraw() {
         let postData = {
-            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',
-            });
-          }  
-        
+          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',
+          });
+        }
+
       };
 
       //抽奖记录
@@ -390,26 +388,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
@@ -421,8 +419,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,
@@ -461,10 +459,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;
       }
@@ -483,7 +481,7 @@
           // const prizeId = getRandomNum()
           // console.log('中奖ID>>>', prizeId, state.prizeList[prizeId])
           // state.prizeId = prizeId
-          
+
         }
       }
 
@@ -506,24 +504,24 @@
           ${bgColor.value}
           transform: rotate(${totalRunAngle.value - state.baseRunAngle}deg);
         `
-        if(state.prizeList[state.prizeId].prizeType=='10'){
+        if (state.prizeList[state.prizeId].prizeType == '10') {
           ElementPlus.ElMessageBox.alert("恭喜，您中了" + state.prizeList[state.prizeId].prizeName + "," + "可在“个人中心”我的礼品券中查看，在礼品兑换中兑换相应物品。", {
-            showClose:false,
-            center:true,
+            showClose: false,
+            center: true,
             confirmButtonText: '确定',
           })
           window.parent.getUserInfo();
-        }else if(state.prizeList[state.prizeId].prizeType=='20'){
+        } else if (state.prizeList[state.prizeId].prizeType == '20') {
           ElementPlus.ElMessageBox.alert("恭喜，您中了" + state.prizeList[state.prizeId].prizeName + "！", {
-            showClose:false,
-            center:true,
+            showClose: false,
+            center: true,
             confirmButtonText: '确定',
           })
           window.parent.getUserInfo();
-        }else{
+        } else {
           ElementPlus.ElMessageBox.alert("很遗憾，您未中奖。", {
-            showClose:false,
-            center:true,
+            showClose: false,
+            center: true,
             confirmButtonText: '确认',
           })
           window.parent.getUserInfo();
@@ -542,4 +540,5 @@
     }
   }).use(ElementPlus).mount('#app')
 </script>
+
 </html>

public/monthlyDrawCarousel.html

@@ -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>

src/utils/request.js

@@ -2,7 +2,7 @@ import axios from 'axios'
 import { Message, MessageBox } from 'element-ui'
 import { getToken } from '@/utils/auth'
 
-let prodBaseURL = 'https://xiaoyou.dgtis.com/admin';//正式地址
+let prodBaseURL = 'https://malltest.dgtis.com/admin';//正式地址
 
 // let prodBaseURL = 'https://malltest.dgtis.com/admin';//阿里云地址