diff --git a/src/views/choujiang/hxl-cj/cj.vue b/src/views/choujiang/hxl-cj/cj.vue index 4aaa254..aea345e 100644 --- a/src/views/choujiang/hxl-cj/cj.vue +++ b/src/views/choujiang/hxl-cj/cj.vue @@ -93,14 +93,9 @@
- < - {{ currentPage }} - > - - 共 - {{ totalPage }} - 页 - + < + {{ currentPage }}/{{ totalPage }} + >
@@ -121,8 +116,13 @@
-
- 开始抽奖 +
+
{{ cjText }}
+
+
+
+ {{ cjText }} +
@@ -311,20 +311,57 @@ const closeGetPrize = () => { }; const leftPage = async (item) => { - if (currentPage.value == 1) return; + if (currentPage.value == 1) { + return; + } + if (currentPage.value == totalPage.value) { + const rightPageBtn = document.getElementById("rightPage"); + rightPageBtn.style.cursor = "pointer"; + rightPageBtn.style.setProperty( + "background", + "linear-gradient(90deg, #ff9800 0%, #ff5722 100%)", + "important" + ); + } currentPage.value--; pageObj.value.pageNum = currentPage; let res = await getGetPrizeUserListApi(pageObj.value); getPrizeUserList.value = res.data.list; currentPage.value = res.data.pageNum; + + if (currentPage.value == 1) { + const leftPageBtn = document.getElementById("leftPage"); + leftPageBtn.style.cursor = "not-allowed"; + leftPageBtn.style.background = "#ccc"; + } }; const rightPage = async (item) => { - if (currentPage.value == totalPage.value) return; + if (currentPage.value == totalPage.value) { + return; + } + + if (currentPage.value == 1) { + const leftPageBtn = document.getElementById("leftPage"); + console.log("leftPageBtn", leftPageBtn); + leftPageBtn.style.cursor = "pointer"; + leftPageBtn.style.setProperty( + "background", + "linear-gradient(90deg, #ff9800 0%, #ff5722 100%)", + "important" + ); + } + currentPage.value++; pageObj.value.pageNum = currentPage; let res = await getGetPrizeUserListApi(pageObj.value); getPrizeUserList.value = res.data.list; currentPage.value = res.data.pageNum; + + if (currentPage.value == totalPage.value) { + const rightPageBtn = document.getElementById("rightPage"); + rightPageBtn.style.cursor = "not-allowed"; + rightPageBtn.style.background = "#ccc"; + } }; //揭示奖品 @@ -1034,6 +1071,8 @@ function resetCard(duration = 500) { }); } +const isBackApi = ref(false); +const cjText = ref("开始抽奖"); // 抽奖 const lotteryBtn = () => { // console.log("isLotting", isLotting); @@ -1052,6 +1091,10 @@ const lotteryBtn = () => { return; } + // lotteryRef.value.innerHTML = "结束抽奖"; + cjText.value = "结束抽奖"; + + isBackApi.value = true; // 播放worldcup音频 playWorldcupAudio(); @@ -1067,9 +1110,11 @@ const lotteryBtn = () => { .then((res) => { // API返回结果时赋值 getPrizeUsers.value = res.data.data || []; + isBackApi.value = false; console.log("API返回结果:", res.data.data); }) .catch((err) => { + isBackApi.value = false; console.error("API调用失败:", err); getPrizeUsers.value = []; }); @@ -1092,7 +1137,6 @@ const lotteryBtn = () => { */ const lottery = () => { - lotteryRef.value.innerHTML = "结束抽奖"; rotateBall().then(() => { // 将之前的记录置空 currentLuckys = []; @@ -1121,7 +1165,8 @@ const lottery = () => { }; const stopLottery = () => { - lotteryRef.value.innerHTML = "开始抽奖"; + // lotteryRef.value.innerHTML = "开始抽奖"; + cjText.value = "开始抽奖"; rotateObj.stop(); // 暂停worldcup音频 @@ -1234,7 +1279,6 @@ function onWindowResize() { onMounted(async () => { initAll(); - initMusicPlayer(); window.addEventListener("resize", onWindowResize, false); }); @@ -1314,26 +1358,6 @@ a { pointer-events: none; } -.rightPage { - width: 75px; - position: fixed; - transform: rotate(270deg); - top: 50%; - right: 15%; - display: none; - z-index: 999; -} - -.leftPage { - width: 75px; - position: fixed; - transform: rotate(90deg); - top: 50%; - left: 23%; - display: none; - z-index: 999; -} - .canvas-box { /* background-color: rgb(214, 0, 0); */ position: fixed; @@ -1386,6 +1410,10 @@ a { /* text-shadow: 0 0 1vh rgba(0, 255, 255, 0.95); */ } +button { + border: none; +} + .btn { background-image: url("../../../assets/img/抽奖按钮.png"); background-color: transparent; @@ -1399,6 +1427,7 @@ a { font-weight: bold; cursor: pointer; text-align: center; + padding-top: 5px; } .highlight { @@ -1650,11 +1679,33 @@ a { } .tableFoot { - color: black; + color: #e64f39; + display: flex; + gap: 10px; } -.tableTotalPage { - font-size: 10px; +.leftPage { + background-color: #ccc; + color: white; + cursor: not-allowed; + /* background: linear-gradient(90deg, #ff9800 0%, #ff5722 100%); */ + border-radius: 50%; + display: flex; + width: 35px; + height: 35px; + justify-content: center; + /* align-items: center; */ +} + +.rightPage { + color: white; + cursor: pointer; + background: linear-gradient(90deg, #ff9800 0%, #ff5722 100%); + border-radius: 50%; + display: flex; + width: 35px; + height: 35px; + justify-content: center; } .readyLook {