feat: Async loading midjourney job for mobile MidJourney page

api/handler/payment_handler.go

@@ -478,7 +478,7 @@ func (h *PaymentHandler) notify(orderNo string, tradeNo string) error {
 			Amount:    power,
 			Balance:   user.Power,
 			Mark:      types.PowerAdd,
-			Model:     "",
+			Model:     order.PayWay,
 			Remark:    fmt.Sprintf("%s，金额：%f，订单号：%s", opt, order.Amount, order.OrderNo),
 			CreatedAt: time.Now(),
 		})

web/src/views/mobile/ImageMj.vue

@@ -144,7 +144,16 @@
                    image-size="80"
                    description="暂无记录"
         />
-        <van-grid :gutter="10" :column-num="2" v-else>
+
+        <van-list v-else
+                  v-model:error="error"
+                  v-model:loading="loading"
+                  :finished="finished"
+                  error-text="请求失败，点击重新加载"
+                  finished-text="没有更多了"
+                  @load="onLoad"
+        >
+          <van-grid :gutter="10" :column-num="2">
             <van-grid-item v-for="item in finishedJobs">
               <div class="job-item">
                 <van-image
@@ -188,6 +197,8 @@
               </div>
             </van-grid-item>
           </van-grid>
+        </van-list>
+
       </div>
 
     </div>
@@ -195,7 +206,7 @@
 </template>
 
 <script setup>
-import {onMounted, ref} from "vue";
+import {nextTick, onMounted, ref} from "vue";
 import {
   showConfirmDialog,
   showFailToast,
@@ -261,8 +272,8 @@ onMounted(() => {
     imgCalls.value = user['img_calls']
     userId.value = user.id
 
-    fetchRunningJobs(userId.value)
-    fetchFinishJobs(userId.value)
+    fetchRunningJobs()
+    fetchFinishJobs(1)
     connect()
 
   }).catch(() => {
@@ -336,9 +347,15 @@ const fetchRunningJobs = (userId) => {
   })
 }
 
-const fetchFinishJobs = (userId) => {
+const loading = ref(false)
+const finished = ref(false)
+const error = ref(false)
+const page = ref(0)
+const pageSize = ref(10)
+const fetchFinishJobs = (page) => {
+  loading.value = true
   // 获取已完成的任务
-  httpGet(`/api/mj/jobs?status=1&user_id=${userId}`).then(res => {
+  httpGet(`/api/mj/jobs?status=1&page=${page}&page_size=${pageSize.value}`).then(res => {
     const jobs = res.data
     for (let i = 0; i < jobs.length; i++) {
       if (jobs[i]['use_proxy']) {
@@ -355,12 +372,27 @@ const fetchFinishJobs = (userId) => {
         jobs[i]['can_opt'] = true
       }
     }
+    if (jobs.length < pageSize.value) {
+      finished.value = true
+    }
+    if (page === 1) {
       finishedJobs.value = jobs
+    } else {
+      finishedJobs.value = finishedJobs.value.concat(jobs)
+    }
+    nextTick(() => loading.value = false)
   }).catch(e => {
-    ElMessage.error("获取任务失败：" + e.message)
+    loading.value = false
+    error.value = true
+    showFailToast("获取任务失败：" + e.message)
   })
 }
 
+const onLoad = () => {
+  page.value += 1
+  fetchFinishJobs(page.value)
+};
+
 // 切换图片比例
 const changeRate = (item) => {
   params.value.rate = item.value