update

src/api/cert.ts

@@ -1,5 +1,10 @@
 import axios from 'axios';
 
+export interface QueryParams {
+    pageNum: number;
+    pageSize: number;
+}
+
 export interface ModelData {
     modelName: string;
     modelPrice: number;
@@ -16,9 +21,40 @@ export interface IndexData {
     pushUrl: string;
 }
 
+export interface OrderData {
+    orderNo : string;
+    paymentPrice : number;
+    isPay : string;
+    createTime : string;
+    paymentWay : string;
+}
+
+export interface DataTable {
+    total: number;
+    rows: any[];
+}
+
+export interface PayRreturn {
+    payUrl: string;
+    aoid: string;
+}
 
 // 获取首页信息
 export function getCertIndex() {
     return axios.get<IndexData>('/cert/index');
 }
-  
+  
+// 用户订单列表
+export function currentUserListOrder(query: QueryParams) {
+    return axios.get<DataTable>('/cert/order/user/list');
+}
+
+// 支付
+export function payment(newOrder: OrderData) {
+    return axios.post<PayRreturn>('/order/payment', newOrder);
+}
+
+// 支付状态刷新
+export function refreshStatus(orderNo: string) {
+    return axios.post(`/order/payment/${orderNo}`);
+}

src/views/api2gpt/pay/index.vue

@@ -1,61 +1,162 @@
 <template>
     <div class="container">
-     pay
+      <a-spin style="width: 100%">
+        <a-card :style="{ width: '500px', marginBottom: '20px' }">
+          <div
+            :style="{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+            }"
+          >
+          <span>充值 ：
+          <a-input-number  v-model="paymentPrice" :style="{width:'200px'}" :default-value="10" :step="1" :precision="1" mode="button" :min="0.1" :max="100" class="input-demo" /></span>
+          <a-button type="primary" @click="handlePayment" :loading="loading">
+            <template #icon>
+              <icon-alipay-circle />
+            </template>
+            <!-- Use the default slot to avoid extra spaces -->
+            <template #default>充值</template>
+          </a-button>
+          </div>
+        </a-card>
+        <a-card
+        class="general-card"
+        :header-style="{ paddingBottom: '0' }"
+        :body-style="{ padding: '17px 20px 21px 20px' }"
+        >
+        <template #title>
+            充值历史
+        </template>
+        <template #extra>
+          <a-button @click="flash">
+              <template #icon>
+                <icon-refresh />
+              </template>
+              刷新
+          </a-button>
+        </template>
+          <a-table :columns="columns" :data="data" :pagination="pages"></a-table>
+        </a-card>
+      </a-spin>
     </div>
+    <a-modal :visible="open" @ok="open = false" @cancel="open = false" okText="确定" cancelText="" unmountOnClose>
+      <template #title>
+        请使用支付宝扫码充值
+      </template>
+      <div>
+        <center>等待用户扫码中</center>
+        <center>
+          <img :src="'https://xorpay.com/qr?data='+payUrl" alt="" width="300" />
+        </center>
+        <center>
+          <img src="@/assets/images/alipay-logo.jpg" alt="" width="120" />
+        </center>
+        <center>
+          <span>扫码后如支付完成点击确认按钮即可查看已完成订单</span>
+        </center>
+    </div>
+    </a-modal>
   </template>
-  
   <script lang="ts" setup>
-   
-  </script>
-  
-  <script lang="ts">
-    export default {
-      name: 'Pay',
-    };
-  </script>
-  
-  <style scoped lang="less">
-    .container {
-      padding: 0 20px 20px 20px;
+   import { ref } from 'vue';
+   import { currentUserListOrder,payment } from '@/api/cert'
+   import type { OrderData } from '@/api/cert'
+   import { Message } from '@arco-design/web-vue';
+   import useLoading from '@/hooks/loading';
+
+   const { loading, setLoading } = useLoading();
+   const paymentPrice = ref(10);
+   const open = ref(false);
+   const payUrl = ref('');
+   const aoid = ref('');
+    const columns = ref([
+      {
+        title: '订单号',
+        dataIndex: 'orderNo',
+      },
+      {
+        title: '金额',
+        dataIndex: 'paymentPrice',
+      },
+      {
+        title: '是否支付',
+        dataIndex: 'isPay',
+      },
+      {
+        title: '支付方式',
+        dataIndex: 'paymentWay',
+      },
+      {
+        title: '创建时间',
+        dataIndex: 'createTime',
+      },
+    ]);
+    const data = ref();
+    const pages = ref({
+      pageNum: 1,
+      pageSize: 10
+    })
+    const Init = async () => {
+      const res = await currentUserListOrder(pages.value)
+      data.value = res.data.rows as OrderData[];
     }
-  
-    .content {
-      display: flex;
-      margin-top: 12px;
-  
-      &-left {
-        flex: 1;
-        margin-right: 16px;
-        overflow: hidden;
-        // background-color: var(--color-bg-2);
-  
-        :deep(.arco-tabs-nav-tab) {
-          margin-left: 16px;
-        }
-      }
-  
-      &-right {
-        width: 332px;
-      }
-  
-      .tab-pane-wrapper {
-        padding: 0 16px 16px 16px;
-      }
+
+    const flash = async () => {
+      await Init();
+      Message.success('刷新成功');
     }
-  </style>
-  
-  <style lang="less" scoped>
-    .mobile {
-      .content {
-        display: block;
-        &-left {
-          margin-right: 0;
-          margin-bottom: 16px;
-        }
-        &-right {
-          width: 100%;
-        }
+
+    // 发起支付
+    const handlePayment =  async () => {
+      if (loading.value) return;
+      setLoading(true);
+      const order = {
+        paymentPrice: paymentPrice.value,
+        paymentWay: "alipay"
+      } as OrderData;
+      try {
+        const res = await payment(order);
+        payUrl.value = res.data.info.qr;
+        aoid.value = res.data.aoid;
+        open.value = true;
+      } catch (err) {
+        Message.error((err as Error).message);
+      } finally {
+        setLoading(false);
       }
     }
+
+    Init()
+</script>
+
+<script lang="ts">
+export default {
+  name: 'Pay',
+};
+</script> 
+  <style scoped lang="less">
+  .container {
+    background-color: var(--color-fill-2);
+    padding: 16px 20px;
+    padding-bottom: 0;
+    display: flex;
+  }
+  .general-card {
+    min-height: 395px;
+  }
+  :deep(.arco-table-tr) {
+    height: 44px;
+    .arco-typography {
+      margin-bottom: 0;
+    }
+  }
+  .increases-cell {
+    display: flex;
+    align-items: center;
+    span {
+      margin-right: 4px;
+    }
+  }
   </style>