修改充值倒计时弹窗

pagesme/goldCoin/recharge.vue

@@ -31,6 +31,37 @@
     <view class="bottom">
       <button class="btn" :loading="loading" @click="submitorder">立即充值</button>
     </view>
+
+    <view class="dialog_box" v-if="show">
+      <view class="bg"></view>
+      <view class="dialog_content">
+        <view class="bag">
+          <image class="pop-bgc" :src="baseUrl + '/common/home-pop-bg.png'"></image>
+          <view class="divss">
+            <view class="namne">提示</view>
+            <view class="namnes">充值成功，请等待倒计时结束确认是否到账</view>
+            <u-count-down
+                :time="60000"
+                format="mm:ss"
+                :auto-start="true"
+                @finish="finish"
+                @change="updateTimeData"
+            >
+              <view class="time">
+                <view class="time__custom">
+                  <text class="time__custom__item">{{ showMinutes }}</text>
+                </view>
+                <text class="time__doc">:</text>
+                <view class="time__custom">
+                  <text class="time__custom__item">{{ showSeconds }}</text>
+                </view>
+              </view>
+            </u-count-down>
+            <view class="button" v-if="timeFinish" @click="confirm">确认</view>
+          </view>
+        </view>
+      </view>
+    </view>
   </view>
 </template>
 <script>
@@ -61,6 +92,24 @@ export default {
       memberId:null,//会员id
       coinCount:100,//金币数量
       payMoney:100,//支付金额
+      //图片路径
+      baseUrl: this.$IMG_URL,
+      timeData: {           // 时间数据对象
+        minutes: '00',
+        seconds: '00'
+      },
+      show:false,
+      timeFinish: false,
+    }
+  },
+  computed: {
+    // 格式化分钟显示（补零）
+    showMinutes() {
+      return String(this.timeData.minutes).padStart(2, '0')
+    },
+    // 格式化秒数显示（补零）
+    showSeconds() {
+      return String(this.timeData.seconds).padStart(2, '0')
     }
   },
   onLoad(option) {
@@ -104,8 +153,6 @@ export default {
               activityId: 0
             }
             pay(payquery).then(res => {
-              console.log("支付参数", res)
-              console.log("测试支付", res.data.errMsg)
               if (res.data.errMsg === 'OK') {
                 if (!res.data.data.nonceStr) {
                   uni.showToast({
@@ -133,7 +180,6 @@ export default {
                       })
                     },
                     fail(e) {
-                      console.log("支付失败", e)
                       uni.showToast({
                         title: '支付已取消',
                         icon: 'none'
@@ -153,10 +199,7 @@ export default {
               }
             })
           } else {
-            uni.showToast({
-              title: '充值成功！',
-              icon: 'success'
-            })
+            this.show = true
           }
         } else if(res.data.code !== 200){
           uni.showToast({
@@ -171,6 +214,16 @@ export default {
       uni.navigateTo({
         url: '/pagesme/goldCoin/consumeRecord'
       });
+    },
+    updateTimeData(time) {
+      this.timeData = time
+    },
+    finish(){
+      this.timeFinish = true
+      this.getCoinBalance()
+    },
+    confirm(){
+      this.show = false
     }
   }
 }
@@ -275,4 +328,166 @@ export default {
     border: none;
   }
 }
+
+.dialog_box {
+  position: fixed;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 999;
+
+  .bg {
+    position: fixed;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 1;
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+
+  .dialog_content {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    z-index: 10;
+    text-align: center;
+
+    .title {
+      font-size: 50rpx;
+      color: #fff;
+      margin: 40rpx auto;
+    }
+
+    .bag {
+      position: relative;
+      width: 500rpx;
+      height: 562rpx;
+      background: #ffffff;
+      border-radius: 24rpx 24rpx 24rpx 24rpx;
+      opacity: 1;
+      overflow: hidden;
+      margin-left: 125rpx;
+      margin-top: 40%;
+
+      // 关闭按钮样式
+      .close-button {
+        position: absolute;
+        top: 20rpx;
+        right: 20rpx;
+        width: 40rpx;
+        height: 40rpx;
+        line-height: 40rpx;
+        text-align: center;
+        font-size: 40rpx;
+        font-weight: bold;
+        color: #999999;
+        cursor: pointer;
+        z-index: 10;
+
+        &:active {
+          color: #666666; // 点击时颜色变化
+        }
+      }
+
+      .divss {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+
+        .namne {
+          color: rgba(45, 49, 50, 0.8);
+          font-weight: 400;
+          font-size: 40rpx;
+          font-family: 'PingFang SC-Heavy, PingFang SC';
+          width: 100%;
+          height: 56rpx;
+          line-height: 56rpx;
+          margin-top: 66rpx;
+          text-align: center;
+        }
+
+        .button {
+          width: 392rpx;
+          height: 84rpx;
+          background: linear-gradient(86deg, #c2d2f9 0%, #c5c2f3 100%);
+          border-radius: 42rpx;
+
+          font-size: 28rpx;
+          font-family: 'PingFang SC-Regular, PingFang SC';
+          font-weight: 400;
+          color: #415c9e;
+          line-height: 84rpx;
+          text-align: center;
+          margin: 0 auto;
+          margin-top: 100rpx;
+        }
+
+        .namnes {
+          width: 364rpx;
+          height: 96rpx;
+          font-size: 28rpx;
+          font-family: 'PingFang SC-Regular, PingFang SC';
+          font-weight: 400;
+          color: #4a4a4a;
+          line-height: 48rpx;
+          margin: 0 auto;
+          margin-top: 80rpx;
+          text-align: center;
+        }
+      }
+
+      .pop-bgc {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        // z-index: -1;
+      }
+
+    }
+  }
+}
+
+.time {
+  @include flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 8px;
+
+  &__custom {
+    margin-top: 4px;
+    width: 22px;
+    height: 22px;
+    background-color: $u-primary;
+    border-radius: 4px;
+    /* #ifndef APP-NVUE */
+    display: flex;
+    /* #endif */
+    justify-content: center;
+    align-items: center;
+
+    &__item {
+      color: #fff;
+      font-size: 12px;
+      text-align: center;
+    }
+  }
+
+  &__doc {
+    color: $u-primary;
+    padding: 0px 4px;
+  }
+
+  &__item {
+    color: #606266;
+    font-size: 15px;
+    margin-right: 4px;
+  }
+}
 </style>