r

src/views/Pay/child_cpn/PayInfo.vue

@@ -65,14 +65,16 @@
     <!-- 支付按钮 -->
     <div
       class="row-center-center fc-f fs-36 ff-pp fw-5"
-      style="margin-top: 0.66rem"
+      style="margin-top: 0.66rem; position: relative"
     >
       <div
         ref="payBtn"
         class="pay-btn row-center-center"
         @click.once="_payment"
       >
-        立即支付
+        <div>立即支付</div>
+
+        <div v-if="loading" class="loading"></div>
       </div>
     </div>
 
@@ -101,6 +103,7 @@ export default {
       cash: 0,
       originalPrice: "139",
       baseInfo: [],
+      loading: false,
     };
   },
 
@@ -139,6 +142,8 @@ export default {
 
     // 支付
     async _payment() {
+      this.$refs.payBtn.style.opacity = "0.5";
+      this.loading = true;
       const h5LogsObj = JSON.parse(decodeURI(utils.getCookie("h5LogsObj")));
       let link = decodeURI(utils.getCookie("link"));
 
@@ -181,6 +186,8 @@ export default {
         outTradeNo: orderId,
         totalFee: 1,
       }).then((res) => {
+        this.$refs.payBtn.style.opacity = "1";
+        this.loading = false;
         let mwebUrl = res.result.data.wakeup.mwebUrl;
         let tempUrl = window.location.href;
         tempUrl = tempUrl.replace("pay", "result");
@@ -292,4 +299,23 @@ export default {
   padding: 0.16rem;
   line-height: 0.4rem;
 }
+
+.loading {
+  width: 0.2rem;
+  height: 0.2rem;
+  margin-left: 0.2rem;
+  border-radius: 50%;
+  border-top: 0.05rem solid #1f9fff;
+  border-left: 0.05rem solid #1f9fff;
+  animation: rotate 0.8s infinite linear;
+}
+
+@keyframes rotate {
+  0% {
+    transform: rotate(0);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
 </style>
\ No newline at end of file