祈福成功页面以及随喜弹窗2.0

components/donate-modal/donate-modal.vue

@@ -6,24 +6,28 @@
         <text class="modal-title">{{ title }}</text>
         <image class="modal-icon" :src="CommonEnum.LotusMeditation" mode="aspectFit" />
       </view>
-      
+
       <!-- 输入区域 -->
       <view class="input-section">
-        <input 
-          class="amount-input" 
-          :placeholder="placeholder" 
+        <input
+          class="amount-input"
+          :placeholder="placeholder"
           v-model="localAmount"
           type="number"
-          :disabled="isRandomAmount"
         />
         <view class="random-option" @click="toggleRandomAmount">
-          <view class="radio-button" :class="{ 'checked': isRandomAmount }">
-            <image v-if="isRandomAmount" class="radio-icon" :src="CommonEnum.Refresh" mode="aspectFit" />
+          <view class="radio-button"  >
+            <image
+              class="radio-icon"
+              :src="CommonEnum.Refresh"
+              mode="aspectFit"
+
+            />
           </view>
           <text class="option-text">{{ randomText }}</text>
         </view>
       </view>
-      
+
       <!-- 确认按钮 -->
       <view class="confirm-button" @click="handleConfirm">
         <text class="button-text">{{ confirmText }}</text>
@@ -72,15 +76,13 @@ export default {
   data() {
     return {
       CommonEnum,
-      localAmount: '',
-      isRandomAmount: false
+      localAmount: ''
     }
   },
   watch: {
     visible(newVal) {
       if (newVal) {
         this.localAmount = this.defaultAmount;
-        this.isRandomAmount = false;
       }
     },
     defaultAmount(newVal) {
@@ -94,29 +96,28 @@ export default {
     handleClose() {
       this.$emit('close');
     },
-    
+
     // 切换随机金额选项
     toggleRandomAmount() {
-      this.isRandomAmount = !this.isRandomAmount;
-      if (this.isRandomAmount) {
-        this.localAmount = '';
-      }
+      const randomAmount = Math.floor(Math.random() * 89); // 0-88的随机数
+      this.localAmount = randomAmount.toString();
+      console.log('生成随机金额:', this.localAmount);
     },
-    
+
     // 确认操作
     handleConfirm() {
-      if (!this.localAmount && !this.isRandomAmount) {
+      if (!this.localAmount) {
         uni.showToast({
-          title: '请输入金额或选择随缘',
+          title: '请输入金额或点击随缘生成随机金额',
           icon: 'none'
         });
         return;
       }
-      
+
       // 触发确认事件
       this.$emit('confirm', {
         amount: this.localAmount,
-        isRandom: this.isRandomAmount
+        isRandom: false
       });
     }
   }
@@ -124,6 +125,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+
+
 .donate-modal {
   position: fixed;
   top: 0;
@@ -138,15 +141,23 @@ export default {
 }
 
 .modal-content {
-  background-color: #FFFFFF;
+  position: fixed;
+  background-color: #FFFBF5;
   border-radius: 20rpx;
   padding: 40rpx;
-  width: 80%;
-  max-width: 600rpx;
+  width: 610rpx;
+  height: 386rpx;
   display: flex;
   flex-direction: column;
-  align-items: center;
+  margin-top: 20rpx;
   box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.3);
+  .modal-icon {
+    position: absolute;
+    top: 28rpx;
+    right: 28rpx;
+    width: 180rpx;
+    height: 162rpx;
+  }
 }
 
 .modal-header {
@@ -156,18 +167,17 @@ export default {
   width: 100%;
   margin-bottom: 30rpx;
   padding-bottom: 20rpx;
-  border-bottom: 2rpx solid #F0EBE0;
-  
+
   .modal-title {
+    width: 80rpx;
+    height: 54rpx;
+    font-weight: 500;
     font-size: 40rpx;
-    font-weight: bold;
     color: #695347;
+    line-height: 54rpx;
   }
-  
-  .modal-icon {
-    width: 60rpx;
-    height: 60rpx;
-  }
+
+
 }
 
 .input-section {
@@ -176,46 +186,41 @@ export default {
   display: flex;
   align-items: center;
   gap: 20rpx;
-  
+
   .amount-input {
     flex: 1;
-    height: 100rpx;
-    background-color: #F5F0E7;
-    border: 2rpx solid #E0D7C9;
-    border-radius: 10rpx;
-    padding: 0 20rpx;
+    padding: 0 32rpx;
     font-size: 36rpx;
     color: #695347;
-    text-align: right;
+    width: 384rpx;
+    height: 72rpx;
+    border-radius: 10rpx 10rpx 10rpx 10rpx;
+    border: 1rpx solid #695347;
   }
-  
+
   .random-option {
     display: flex;
     align-items: center;
-    gap: 10rpx;
-    cursor: pointer;
-    
+    padding: 20rpx 0;
+    border-radius: 40rpx;
+    background: #FFF8F0;
+
+    &:active {
+      background: rgba(191, 116, 4, 0.1);
+    }
+
     .radio-button {
-      width: 40rpx;
-      height: 40rpx;
-      border: 2rpx solid #E0D7C9;
+      padding: 20rpx;
       border-radius: 50%;
       display: flex;
       justify-content: center;
       align-items: center;
-      background-color: #F5F0E7;
-      
-      &.checked {
-        border-color: #8B2E2E;
-        background-color: #8B2E2E;
-      }
-      
       .radio-icon {
-        width: 24rpx;
-        height: 24rpx;
+        width: 40rpx;
+        height: 40rpx;
       }
     }
-    
+
     .option-text {
       font-size: 32rpx;
       color: #695347;
@@ -224,25 +229,27 @@ export default {
 }
 
 .confirm-button {
-  width: 100%;
-  height: 100rpx;
-  background-color: #8B2E2E;
-  border-radius: 50rpx;
   display: flex;
   justify-content: center;
   align-items: center;
-  box-shadow: 0 8rpx 20rpx rgba(139, 46, 46, 0.3);
   transition: all 0.3s ease;
-  
+  width: 308rpx;
+  height: 66rpx;
+  background: #C7A26D;
+  box-shadow: 2rpx 2rpx 2rpx 0rpx rgba(0,0,0,0.3);
+  border-radius: 43rpx 43rpx 43rpx 43rpx;
+  border: 2rpx solid #E3D4BA;
+  margin: 0 auto; /* 添加这行来居中 */
+
   &:active {
     background-color: #7A2A2A;
     transform: scale(0.98);
   }
-  
+
   .button-text {
     color: #FFFFFF;
     font-size: 36rpx;
     font-weight: bold;
   }
 }
-</style> 
+</style>

pages/pray/praySuccess.vue

@@ -47,7 +47,7 @@ export default {
     return {
       CommonEnum,
       loading: false,
-      showDonate: false
+      showDonate: true
     }
   },
   onLoad() {