feat(cp排行榜): 碎片不足显示弹窗

src/stores/couple.js

@@ -2,6 +2,8 @@ import { defineStore } from 'pinia'
 
 export const useCoupleStore = defineStore('couple', {
   state: () => ({
+    fragmentNotEnoughShow: false, //碎片不足
+
     helpShow: false, //帮助展示
 
     topRewardShow: false, // 前三名奖励展示

src/views/Ranking/Couple/GamePlay/components/exchange.vue

@@ -93,6 +93,8 @@ const getImgName = (filename) => {
 }
 
 const {
+  debris, // 碎片
+  fragmentNotEnoughShow, // 碎片不足弹窗
   exchangeConfirmShow, // 兑换确认弹窗
   exchangeItem, // 当前兑换的物品
 } = storeToRefs(coupleStore)
@@ -113,6 +115,12 @@ const getActivityResource = async () => {
 
 // 用碎片兑换资源
 const exchangeGoods = async (goods) => {
+  // 碎片不足提示
+  if (debris.value < JSON.parse(goods.rule.jsonData).need_fragments) {
+    fragmentNotEnoughShow.value = true
+    return
+  }
+
   exchangeItem.value = {
     userId: getUserId(),
     propsGroupId: goods.rule.id,

src/views/Ranking/Couple/index.vue

@@ -944,11 +944,15 @@
                   border: 2px solid #fff;
                   background: linear-gradient(
                     264deg,
-                    rgba(220, 228, 255, 0.4) 10.17%,
+                    rgba(255, 220, 220, 0.4) 10.17%,
-                    rgba(151, 176, 255, 0.4) 60.22%,
+                    rgba(255, 151, 151, 0.4) 60.22%,
-                    rgba(220, 228, 255, 0.4) 103.12%
+                    rgba(255, 220, 220, 0.4) 103.12%
                   );
-                  box-shadow: 0 2.542px 5.084px 0 rgba(151, 176, 255, 0.15);
+                  box-shadow:
+                    0 36.858px 13.981px 0 rgba(255, 106, 106, 0.02),
+                    0 20.335px 12.71px 0 rgba(255, 106, 106, 0.08),
+                    0 8.897px 8.897px 0 rgba(255, 106, 106, 0.13),
+                    0 2.542px 5.084px 0 rgba(255, 106, 106, 0.15);
                   backdrop-filter: blur(4.5px);
 
                   display: flex;
@@ -1004,11 +1008,15 @@
                   border: 2px solid #fff;
                   background: linear-gradient(
                     264deg,
-                    rgba(220, 228, 255, 0.4) 10.17%,
+                    rgba(255, 220, 220, 0.4) 10.17%,
-                    rgba(151, 176, 255, 0.4) 60.22%,
+                    rgba(255, 151, 151, 0.4) 60.22%,
-                    rgba(220, 228, 255, 0.4) 103.12%
+                    rgba(255, 220, 220, 0.4) 103.12%
                   );
-                  box-shadow: 0 2.542px 5.084px 0 rgba(151, 176, 255, 0.15);
+                  box-shadow:
+                    0 36.858px 13.981px 0 rgba(255, 106, 106, 0.02),
+                    0 20.335px 12.71px 0 rgba(255, 106, 106, 0.08),
+                    0 8.897px 8.897px 0 rgba(255, 106, 106, 0.13),
+                    0 2.542px 5.084px 0 rgba(255, 106, 106, 0.15);
                   backdrop-filter: blur(4.5px);
 
                   display: flex;
@@ -1186,6 +1194,32 @@
             />
           </itemCenter>
         </div>
+
+        <!-- 碎片不足提示 -->
+        <div
+          v-show="fragmentNotEnoughShow"
+          style="position: fixed; top: 50vh; display: flex; justify-content: center; width: 100vw"
+          @click.stop
+        >
+          <div
+            style="
+              width: 60vw;
+              padding: 2vw;
+
+              display: flex;
+              justify-content: center;
+              align-items: center;
+
+              border-radius: 8px;
+              background: rgba(255, 255, 255, 0.4);
+              backdrop-filter: blur(32px);
+            "
+          >
+            <div style="font-size: 0.8em; font-weight: 700; color: #fff">
+              You don't have enough pieces
+            </div>
+          </div>
+        </div>
       </maskLayer>
     </div>
   </div>
@@ -1234,6 +1268,8 @@ const route = useRoute()
 const coupleStore = useCoupleStore()
 
 const {
+  fragmentNotEnoughShow, // 碎片不足提示
+
   helpShow, // 帮助弹窗
 
   topRewardShow, // 前三名奖励展示
@@ -1351,6 +1387,7 @@ const isPublic = ref(false) // 是否公开
 const confirmShow = ref(false) // 二次确认发送弹窗
 const maskLayerShow = computed(() => {
   return (
+    fragmentNotEnoughShow.value ||
     helpShow.value ||
     topRewardShow.value ||
     lastLetterShow.value ||
@@ -1397,6 +1434,7 @@ const showPopup = (type) => {
 
 // 关闭弹窗
 const closedPopup = () => {
+  fragmentNotEnoughShow.value = false
   helpShow.value = false
   topRewardShow.value = false
   lastLetterShow.value = false