first

pages/quickMoney/components/PaymentSuccess.vue

@@ -0,0 +1,135 @@
+<template>
+  <uni-popup ref="popup" type="bottom" mask-background-color="rgba(0,0,0,0.5)" :safe-area="false">
+    <view class="pay-wrapper">
+      <view class="pay-header-wrapper">
+        <view class="pay-img">
+          <image src="/static/iconImg/icon-success.svg" mode="scaleToFill" />
+          <view class="pay-tips">支付成功</view>
+        </view>
+        <view class="pay-number">￥{{ cal.cert2Dollar(vdata.orderInfo.amount) }}</view>
+      </view>
+      <view class="time-out flex-center">
+        <text>{{ vdata.subTime }}S</text> 后自动返回
+      </view>
+			<view class="list-footer">
+				<view class="button-wrapper" style="border: none; background-color: transparent; backdrop-filter: none;">
+					<Button @tap="close">确认</Button>
+				</view>
+			</view>
+    </view>
+  </uni-popup>
+</template>
+
+<script setup>
+import { nextTick, onMounted, reactive, ref } from 'vue'
+import timer from '@/commons/utils/timer.js'
+import cal from '@/commons/utils/cal.js'
+
+const emit = defineEmits(['close'])
+
+const vdata = reactive({
+
+  orderInfo: { }, // 订单信息
+	
+  subTime: 5,
+  
+  isClosed: false, // 是否已经明确关闭，  避免点击按钮与定时同时触发。 
+  
+})
+const popup = ref(null)
+
+// 打开弹窗 val 收款金额
+const open = (orderInfo) => {
+	
+  // 订单信息	
+  vdata.orderInfo = orderInfo
+  
+  // 剩余时间重置
+  vdata.subTime = 5
+  
+  vdata.isClosed = false  
+  
+  popup.value.open()
+  
+  // nextTick 用作， 显示页面后再倒计时， 否则直接显示了 4s . 
+  nextTick(() => {
+	  
+	  //   执行递归函数 1秒 一次
+	  timer.startTimeoutTask(1, 5, (subTime) => {
+	  	 
+	  	// 第一个判断是task任务结束， 第二个判断是 手动关闭的判断。   
+	    if (subTime <= 0 || vdata.subTime <= 0) {
+	  		close()
+	  		return false;
+	  	}
+	  	
+	  	vdata.subTime = subTime
+	  	return true;
+	  })
+  })
+}
+
+const close = () => {
+ 	
+  if(vdata.isClosed){
+    return false;
+ }
+  emit('close') //回调函数 close 
+	 
+  vdata.isClosed = true
+	
+  popup.value.close()
+  vdata.subTime = 0 ; // 避免进入下一次task 
+}
+
+defineExpose({ open, close })
+</script>
+
+<style lang="scss" scoped>
+.pay-wrapper {
+  padding: 0.1rpx;
+  height: 100vh;
+  .pay-header-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto;
+    margin-top: 108rpx;
+    width: 670rpx;
+    height: 500rpx;
+    border-radius: $J-b-r32;
+    background-image: url('/static/bgImg/quik-bg-img.svg');
+    .pay-img {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      image {
+        width: 100rpx;
+        height: 100rpx;
+      }
+      .pay-tips {
+        margin-top: 10rpx;
+        margin-bottom: 50rpx;
+        color: #1abb51;
+        font-size: 36rpx;
+        font-weight: 500;
+      }
+    }
+    .pay-number {
+      font-size: 50rpx;
+      font-weight: 500;
+    }
+  }
+  .time-out {
+    margin-top: 30rpx;
+    color: rgba(255, 255, 255, 0.7);
+    font-size: 30rpx;
+    text {
+      margin-right: 15rpx;
+      color: #fff;
+    }
+  }
+}
+</style>