From 4e30937b541b528bc530bc8b00beadf6ff6b1265 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A7=8B=E4=BA=8E=E5=88=9D=E8=A7=81?= <752204717@qq.com>
Date: Thu, 26 Dec 2024 15:28:44 +0800
Subject: [PATCH] tijiao

---
 public/index.html                             |   5 +-
 .../pendingPayment/PayPalButton.vue           | 114 +++++++++---------
 .../page/components/pendingPayment/index.vue  |   2 +-
 3 files changed, 60 insertions(+), 61 deletions(-)

diff --git a/public/index.html b/public/index.html
index 19e20f2..7a05f02 100644
--- a/public/index.html
+++ b/public/index.html
@@ -16,10 +16,7 @@
     <!-- built files will be auto injected -->
   </body><script src="<%=BASE_URL %>/tinymce/tinymce.min.js"></script>
 
-  <script
-  src="https://www.paypal.com/sdk/js?client-id=Ab8SeEuhkLGp6Fts9V3Cti0UcXQhITRWZkiHDM3U1fDY9YrrRc5IOcYHPfV6qROhmh0hvgysqrfOCSUr"></script>
-
-
+  
 
 </html>
 
diff --git a/src/components/page/components/pendingPayment/PayPalButton.vue b/src/components/page/components/pendingPayment/PayPalButton.vue
index 85503a2..c7e1788 100644
--- a/src/components/page/components/pendingPayment/PayPalButton.vue
+++ b/src/components/page/components/pendingPayment/PayPalButton.vue
@@ -1,63 +1,65 @@
 <template>
     <div>
-      <paypal-checkout
-        :client="paypalClient"
-        :amount="amount"
-        :currency="currency"
-        @success="onPaymentSuccess"
-        @error="onPaymentError"
-      >
-        <template #default="{ onClick }">
-          <button @click="onClick">Pay with PayPal</button>
-        </template>
-      </paypal-checkout>
+        <PayPal
+           
+            currency="USD"
+            :client="paypal"
+            :amount="amount"
+            :env="env"
+            
+            :on-success="onPaymentSuccess"
+            :on-error="onPaymentError"
+        >
+        </PayPal>
     </div>
-  </template>
-   
-  <script>
-  import PaypalCheckout from 'vue-paypal-checkout';
-   
-  export default {
-    name: 'PayPalButton',
-    components: {
-      PaypalCheckout
-    },
+</template>
+
+<script>
+import PayPal from 'vue-paypal-checkout';
+export default {
     data() {
-      return {
-        // PayPal Client ID
-        paypalClient: {
-          sandbox: 'Ab8SeEuhkLGp6Fts9V3Cti0UcXQhITRWZkiHDM3U1fDY9YrrRc5IOcYHPfV6qROhmh0hvgysqrfOCSUr',  // Replace with your sandbox client ID
-          production: 'Ab8SeEuhkLGp6Fts9V3Cti0UcXQhITRWZkiHDM3U1fDY9YrrRc5IOcYHPfV6qROhmh0hvgysqrfOCSUr'  // Replace with your production client ID
-        },
-        amount: '10.00', // Amount to be paid
-        currency: 'USD'  // Currency
-      };
+        return {
+            paypal: {
+                sandbox: 'Ab8SeEuhkLGp6Fts9V3Cti0UcXQhITRWZkiHDM3U1fDY9YrrRc5IOcYHPfV6qROhmh0hvgysqrfOCSUr',
+                production: 'Ad-9iuPrN9U8zQxfcog7QweDSJsDY6ns2I5WaPjuuN_4ToE5LEGASm09j9x7VC0fbQkTmnpFtrZYpHEE'
+            },
+            // myItems: [
+            //     {
+            //         name: 'hat',
+
+            //         quantity: '1',
+            //         price: '5',
+            //         currency: 'USD'
+            //     },
+            //     {
+            //         name: 'handbag',
+            //         // description: "Black handbag.",
+            //         quantity: '1',
+            //         price: '5',
+            //         currency: 'USD'
+            //     }
+            // ],
+            amount: '9.99', // Amount to be paid
+            env: 'sandbox'
+        };
+    },
+    components: {
+        PayPal
     },
     methods: {
-      onPaymentSuccess(payment) {
-        console.log('Payment successful!', payment);
-        // Handle successful payment here
-        this.$emit('payment-success', payment);
-      },
-      onPaymentError(error) {
-        console.error('Payment error:', error);
-        // Handle payment error here
-        this.$emit('payment-error', error);
-      }
+        onPaymentSuccess(payment) {
+          alert(payment)
+            console.log('Payment successful!', payment);
+            // Handle successful payment here
+            this.$emit('payment-success', payment);
+        },
+        onPaymentError(error) {
+            console.error('Payment error:', error);
+            // Handle payment error here
+            this.$emit('payment-error', error);
+        }
     }
-  };
-  </script>
-   
-  <style scoped>
-  button {
-    padding: 10px 20px;
-    background-color: #0070ba;
-    color: white;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
-  }
-  button:hover {
-    background-color: #005b9a;
-  }
-  </style>
\ No newline at end of file
+};
+</script>
+
+<style scoped></style>
diff --git a/src/components/page/components/pendingPayment/index.vue b/src/components/page/components/pendingPayment/index.vue
index bf2ebb1..e4237fc 100644
--- a/src/components/page/components/pendingPayment/index.vue
+++ b/src/components/page/components/pendingPayment/index.vue
@@ -16,7 +16,7 @@
                   
     <PayPalButton @payment-success="handlePaymentSuccess" @payment-error="handlePaymentError" />
 
-                    <el-button @click="payArticle(scope.row)" plain type="danger" size="mini">{{ $t('pendingPayment.payment') }}</el-button>
+                    <!-- <el-button @click="payArticle(scope.row)" plain type="danger" size="mini">{{ $t('pendingPayment.payment') }}</el-button> -->
                 </template>
             </el-table-column>
         </el-table>