修改字符串截取

src/utils/common.js

@@ -0,0 +1,66 @@
+// 封装与app之间的通信
+var api = {}
+
+
+api.packageFun = function (funName, fun = function () { }, data = {}) {
+  var JWrandom = this.fullClose(10000, 99999)
+  data.JWrandom = JWrandom
+  try {
+    if (data.platform == 2) { // app apicloud
+      window.api.sendEvent({
+        name: funName,
+        extra: {
+          data: data
+        }
+      })
+    } else if (data.platform == 3) { // ios
+      let params = {
+        name: funName,
+        extra: {
+          data: data
+        }
+      }
+      window.webkit.messageHandlers.getTouJiaoData.postMessage(JSON.stringify(params))
+    } else if (data.platform == 4) { // 安卓
+      let params = {
+        name: funName,
+        extra: {
+          data: data
+        }
+      }
+      window.android.getTouJiaoData(JSON.stringify(params))
+    } else if (data.platform == 5) {  // uniapp
+      let params = {
+        name: funName,
+        extra: {
+          data: data
+        }
+      }
+      window.uni.postMessage({
+        data: {
+          val: JSON.stringify(params)
+        }
+      });
+    }
+  }
+  catch (e) {
+    console.log(e)
+  }
+
+  window[funName + JWrandom] = fun
+  try {
+    window.parent[funName + JWrandom] = fun
+  } catch (error) {
+
+  }
+}
+
+//获取随机数
+api.fullClose = function (n, m) {
+  var result = Math.random() * (m + 1 - n) + n;
+  while (result > m) {
+    result = Math.random() * (m + 1 - n) + n;
+  }
+  return parseInt(result);
+}
+export default api

src/views/wealth/goldenWheel.vue

@@ -21,7 +21,7 @@
     <!-- 转盘区域 -->
     <div class="wheel-section">
       <div class="wheel-wrapper">
-        <!-- 转盘图片尺寸：333x333 -->
+        <!-- 转盘图片尺寸：333x333 - 初始旋转22.5度 -->
         <img 
           :src="wheelImg" 
           class="wheel-img" 
@@ -30,10 +30,10 @@
           alt="财富金轮"
           ref="wheel"
         >
-        <!-- 指针图片尺寸：137x137 -->
-        <img :src="pointerImg" class="pointer-img" alt="指针">
+        <!-- 指针图片尺寸：137x137 - 初始旋转22.5度 -->
+        <img :src="pointerImg" class="pointer-img" alt="指针" style="transform: translate(-50%, -50%) rotate(-19deg);">
         <!-- 指针盖图片尺寸：104x106 -->
-        <img :src="pointerCoverImg" class="pointer-cover-img" alt="指针盖">
+        <img :src="pointerCoverImg" class="pointer-cover-img" alt="指针盖" style="transform: translate(-50%, -50%) rotate(-25deg);">
       </div>
     </div>
     
@@ -128,6 +128,7 @@
 </template>
 
 <script>
+import api from '@/utils/common.js'
 import { permissionApi, lotteryApi } from '@/api/goldenWheel'
 
 export default {
@@ -138,9 +139,9 @@ export default {
       historyImg: 'https://d31zlh4on95l9h.cloudfront.net/images/aed693de6beb9faae015fd0628c4f052.png',
       ruleImg: 'https://d31zlh4on95l9h.cloudfront.net/images/9a3f7680b29e31b60151cf562c0d43cb.png',
       titleImg: 'https://d31zlh4on95l9h.cloudfront.net/images/a87d19806fed47b7fdf18d4b5dd70e65.png',
-      wheelImg: 'https://d31zlh4on95l9h.cloudfront.net/images/d925f375c9ef15a751500ae130d91fe5.png',
-      pointerImg: 'https://d31zlh4on95l9h.cloudfront.net/images/9c09631c202b78cc06b8935c17431dac.png',
-      pointerCoverImg: 'https://d31zlh4on95l9h.cloudfront.net/images/536c171c263990b12f1cc0a6e511b5e7.png',
+      wheelImg: 'https://d31zlh4on95l9h.cloudfront.net/images/caaf77a490be46c56ae824d2d9aa72f4.png',
+      pointerImg: 'https://d31zlh4on95l9h.cloudfront.net/images/72cda5c3b13823aa6ca87a3065fe2197.png',
+      pointerCoverImg: 'https://d31zlh4on95l9h.cloudfront.net/images/19f2ea90e2560330089214e88eff04b5.png',
       remainingBgImg: 'https://d31zlh4on95l9h.cloudfront.net/images/a43f0c383d55fc56b34768f039a401a8.png',
       spinBtnImg: 'https://d31zlh4on95l9h.cloudfront.net/images/11b749e0fd4b08238980b74c6e80b2e6.png',
       disabledSpinBtnImg: 'https://d31zlh4on95l9h.cloudfront.net/images/9b7383c1f80bb32a279791879947791a.png',
@@ -160,7 +161,7 @@ export default {
       showNoTimesModal: false,
       showRuleModal: false,
       isFirstVisit: true,
-      currentRotation: 0,
+      currentRotation: -23.5, // 初始旋转-22.5度
       noTimesTimer: null,
       prizeMessage: '',
       prizeAmount: '',
@@ -251,36 +252,61 @@ export default {
       });
     },
     
-    // 调用抽奖API获取奖品信息
-    fetchPrizeInfo() {
+   // 调用抽奖API获取奖品信息
+   async fetchPrizeInfo() {
       if (!this.token) {
         console.error('Token为空，无法调用抽奖API');
-        return Promise.resolve(false);
+        return false;
       }
       
-      return lotteryApi({ token: this.token }).then(res => {
+      try {
+        // 调用抽奖API
+        const res = await lotteryApi({ token: this.token });
+        
         if(res.code === 200){
           // 解析API返回的字符串数据
           const prizeData = res.data;
-          // 假设返回格式为 "恭喜您获得卡券 2"
-          const parts = prizeData.split(' ');
-          this.prizeMessage = parts.slice(0, -1).join(' '); // 获取除最后一部分外的所有部分
-          this.prizeAmount = parts[parts.length - 1]; // 获取最后一部分作为奖品数量       
+          
+          // 关键修改：按照第一个空格分割字符串
+          const firstSpaceIndex = prizeData.indexOf(' ');
+          
+          if (firstSpaceIndex !== -1) {
+            // 第一个空格前面的部分作为prizeMessage
+            this.prizeMessage = prizeData.substring(0, firstSpaceIndex);
+            // 第一个空格后面的部分作为prizeAmount
+            this.prizeAmount = prizeData.substring(firstSpaceIndex + 1);
+          } else {
+            // 如果没有空格，整个字符串作为prizeMessage，prizeAmount为空
+            this.prizeMessage = prizeData;
+            this.prizeAmount = '';
+          }
+          
+          // 抽奖API执行完成后，查询最新的剩余次数
+          await this.fetchWheelInfo();
+          
           return true;
         } else {
           console.error('抽奖API返回错误:', res.msg);
           // 设置默认值
           this.prizeMessage = '抽奖失败';
           this.prizeAmount = '请重试';
+          
+          // 即使抽奖失败，也查询最新的剩余次数
+          await this.fetchWheelInfo();
+          
           return false;
         }
-      }).catch(error => {
+      } catch (error) {
         console.error('抽奖API调用失败:', error);
         // 设置默认值
         this.prizeMessage = '网络错误';
         this.prizeAmount = '请重试';
+        
+        // 即使抽奖失败，也查询最新的剩余次数
+        await this.fetchWheelInfo();
+        
         return false;
-      });
+      }
     },
     
     // 处理转动
@@ -289,9 +315,6 @@ export default {
       
       // 先查询剩余次数
       try {
-        // 重新获取最新剩余次数
-        await this.fetchWheelInfo();
-        
         if (this.remainingTimes <= 0) {
           this.showNoTimesModal = true;
           
@@ -308,7 +331,7 @@ export default {
         // 有剩余次数，开始抽奖
         this.isSpinning = true;
         
-        // 开始旋转动画
+        // 开始旋转动画（从当前-22.5度位置开始旋转）
         const newRotation = this.currentRotation + 1440;
         this.currentRotation = newRotation;
         
@@ -430,7 +453,7 @@ export default {
 <style scoped>
 .wheel-container {
   min-height: 100vh;
-  background-image: url('https://d31zlh4on95l9h.cloudfront.net/images/aec2d399d578ab0a97d72bc8628433bb.png');
+  background-image: url('https://d31zlh4on95l9h.cloudfront.net/images/ec8f801bf97306aa16155498f831fa68.png');
   background-size: cover;
   background-position: bottom center;
   padding: 15px;
@@ -511,7 +534,7 @@ export default {
   will-change: transform;
   transition: transform 0.3s ease-out;
   backface-visibility: hidden;
-  transform: translateZ(0);
+  transform: translateZ(0) rotate(-22.5deg); /* 初始旋转-22.5度 */
 }
 
 .wheel-img.spinning {
@@ -522,21 +545,21 @@ export default {
 
 @keyframes optimal-spin {
   0% {
-    transform: rotate(0deg);
+    transform: rotate(-22.5deg); /* 从-22.5度开始旋转 */
   }
   100% {
-    transform: rotate(1440deg);
+    transform: rotate(1417.5deg); /* 1440 - 22.5 = 1417.5度 */
   }
 }
 
-/* 指针样式 */
+/* 指针样式 - 初始旋转-22.5度 */
 .pointer-img {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 137px;
   height: 137px;
-  transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%) rotate(-22.5deg);
   z-index: 2;
 }