feat: 九宫格完成

pages/other_package/nine-grid/components/ResultModal.vue

@@ -2,10 +2,16 @@
   <!-- 中奖结果弹窗 -->
   <view class="result-modal" v-if="visible">
     <view class="modal-content">
-      <text class="result-title">恭喜您获得</text>
-      <image :src="prize.img" class="result-img" mode="widthFix" :alt="prize.name || '奖品图片'"></image>
-      <text class="result-desc">{{ prize.name || '未知奖品' }}</text>
-      <button class="confirm-btn" @click="$emit('close')">确定</button>
+      <view class="modal-content-result">
+        <view v-for="item in prize" class="modal-content-result-item">
+          <view class="par-value">
+            <text v-if="item.type === 'redpacket'" class="moeny">¥ </text>{{ item.parValue }}
+          </view>
+          <view class="prize-name">{{ item.prizeName }}</view>
+        </view>
+      </view>
+      <view class="close" @click="jumpGetFun"> </view>
+      <view class="confirm-btn" @click="jumpGetFun">立即领取</view>
     </view>
   </view>
 </template>
@@ -20,10 +26,20 @@ export default {
     },
     // 中奖奖品信息
     prize: {
-      type: Object,
-      default: () => ({})
+      type: Array,
+      default: () => ([
+
+      ])
     }
-  }
+  },
+  methods: {
+    jumpGetFun(item) {
+      this.$emit('close')
+      // uni.navigateTo({
+      //   url: '/pages/other_package/get_prize/get_prize?id=' + item.id,
+      // })
+    },
+  },
 }
 </script>
 
@@ -42,63 +58,69 @@ export default {
 }
 
 .modal-content {
-  width: 500rpx;
-  background-color: #fff;
-  border-radius: 20rpx;
-  padding: 40rpx;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  /* 添加弹窗动画 */
-  animation: popup 0.3s ease-out;
-}
+  width: 650rpx;
+  height: 1000rpx;
 
-@keyframes popup {
-  0% {
-    transform: scale(0.8);
-    opacity: 0;
+  background: url('https://cex-pub.s3.ap-southeast-1.amazonaws.com/static/lottery-pop.png') no-repeat center center;
+  background-size: 100% auto;
+  position: relative;
+
+  .confirm-btn {
+    width: 436rpx;
+    height: 76rpx;
+    background: linear-gradient(180deg, #FFE361 0%, #FF7B21 70%, #FFB931 91%, #FFB245 100%);
+    box-shadow: inset 0px 0 24rpx 0px rgba(255, 255, 255, 0.5);
+    border-radius: 38rpx;
+    font-weight: 500;
+    font-size: 32rpx;
+    color: #FFFFFF;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    bottom: 230rpx;
+    left: 50%;
+    transform: translateX(-50%);
   }
 
-  100% {
-    transform: scale(1);
-    opacity: 1;
+  .modal-content-result {
+    position: absolute;
+    bottom: 450rpx;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 420rpx;
+    display: flex;
+    justify-content: space-around;
+
+    .modal-content-result-item {
+
+      .par-value {
+        font-weight: bold;
+        font-size: 42rpx;
+        color: #D0010D;
+        text-align: center;
+
+        .moeny {
+          font-size: 28rpx;
+        }
+      }
+
+      .prize-name {
+        font-size: 36rpx;
+        color: #000000;
+        text-align: center;
+        margin-top: 15rpx;
+      }
+    }
   }
-}
 
-.result-title {
-  font-size: 36rpx;
-  color: #e63946;
-  font-weight: bold;
-  margin-bottom: 30rpx;
-}
+  .close {
+    width: 120rpx;
+    height: 120rpx;
+    position: absolute;
+    top: 130rpx;
+    right: 40rpx;
+  }
 
-.result-img {
-  width: 150rpx;
-  height: 150rpx;
-  margin-bottom: 30rpx;
-  object-fit: contain;
-}
-
-.result-desc {
-  font-size: 32rpx;
-  color: #333;
-  margin-bottom: 40rpx;
-  font-weight: bold;
-}
-
-.confirm-btn {
-  width: 300rpx;
-  height: 80rpx;
-  line-height: 80rpx;
-  background-color: #e63946;
-  color: #fff;
-  border-radius: 40rpx;
-  font-size: 32rpx;
-  border: none;
-  transition: background-color 0.2s;
-}
-
-.confirm-btn:active {
-  background-color: #c72c3a;
 }
 </style>