余额明细

api/sign.js

@@ -146,3 +146,16 @@ export const getCouponPage = (params) => {
     }
   })
 }
+
+// 获得钱包充值记录分页
+export const getUserWalletRechargePage = async (params) => {
+  return request({
+    url: '/app-api/pay/wallet-recharge/page',
+    method: 'GET',
+    params,
+    custom: {
+      showLoading: false,
+      auth: true
+    }
+  })
+}

pages.json

@@ -89,6 +89,12 @@
 					"style": {
 						"navigationBarTitleText": "我的优惠券"
 					}
+				},
+				{
+					"path": "balance/index",
+					"style": {
+						"navigationBarTitleText": "我的余额"
+					}
 				}
 			]
 		},

pages/index/welfare.vue

@@ -290,6 +290,10 @@ async function handleGetTmpUsed () {
 }
 
 async function loadingMore () {
+  if (more.value === 'noMore') {
+    return
+  }
+  more.value = 'loading'
   pageInfo.value.pageNo++
   getAllCouponPage()
 }

pagesA/balance/index.vue

@@ -1,13 +1,128 @@
 <template>
-  <view>
-    <view>余额</view>
-  </view>
+  <layout-page>
+    <scroll-view class="scrollBox defaultBgc" scroll-y="true" @scrolltolower="loadingMore">
+      <view class="panel">
+        <view>
+          <uni-icons color="#f30" type="icon-renminbi1688" size="16" custom-prefix="iconfont"></uni-icons>
+          <text class="text">{{ balance.balance > 0 ? (balance?.balance / 100.0).toFixed(2) : 0 }}</text>
+        </view>
+        <view>
+          <button class="btn">充值</button>
+        </view>
+      </view>
+      <view class="list">
+        <uni-list border-full>
+          <uni-list-item
+            v-for="item in items"
+            :key="item.id"
+            :title="item._payPrice"
+            :note="item._payTime"
+            :rightText="item.payChannelName"
+          />
+        </uni-list>
+      </view>
+    </scroll-view>
+  </layout-page>
 </template>
 <!-- balance 余额 -->
 <script setup>
+import { ref } from 'vue'
+import {
+  getAccountBalance,
+  getUserWalletRechargePage
+} from '@/api/sign'
+import { timesTampChange } from '@/utils/date'
 
+const balance = ref({})
+
+const items = ref([])
+const pageInfo = ref({
+  pageNo: 1,
+  pageSize: 20
+})
+const total = ref(0)
+const more = ref('more')
+
+getBalance()
+getList()
+// 获取积分余额
+async function getBalance() {
+  const { data } = await getAccountBalance()
+  if (!data) {
+    return
+  }
+  balance.value = data
+}
+
+async function getList () {
+  try {
+    const { data } = await getUserWalletRechargePage(pageInfo.value)
+    if (!data || !data.list || !data.list.length) {
+      if (pageInfo.value.pageNo === 1) {
+        return
+      }
+      pageInfo.value.pageNo--
+      more.value = 'more'
+      return
+    }
+    items.value.push(...data.list.map(e => {
+      return {
+        ...e,
+        _payPrice: (e.payPrice / 100.0).toFixed(2),
+        _payTime: timesTampChange(e.payTime)
+      }
+    }))
+    total.value = +data.total
+    more.value = total.value === items.value.length ? 'noMore' : 'more'
+  } catch (error) {
+    if (pageInfo.value.pageNo === 1) {
+      return
+    }
+    pageInfo.value.pageNo--
+    more.value = 'more'
+  }
+}
+function loadingMore () {
+  if (more.value === 'noMore') {
+    return
+  }
+  more.value = 'loading'
+  pageInfo.value.pageNo++
+  getList()
+}
 </script>
 
 <style lang="scss" scoped>
+.scrollBox {
+  width: 100vw;
+  padding: 20rpx;
+  box-sizing: border-box;
+  .panel {
+    width: 100%;
+    padding: 20rpx;
+    margin-bottom: 20rpx;
+    box-sizing: border-box;
+    background: #FFF;
+    display: flex;
+    justify-content: space-between;
+    .text {
+      color: #F30;
+      font-size: 54rpx;
 
+    }
+    .btn {
+      width: 180rpx;
+      height: 60rpx;
+      line-height: 60rpx;
+      font-size: 28rpx;
+      text-align: center;
+      background: #00897B;
+      color: #FFF;
+      border-radius: 30rpx;
+    }
+  }
+  .list {
+    padding: 20rpx;
+  }
+}
 </style>

pagesA/coupon/index.vue

@@ -105,6 +105,15 @@ function handleTo (status) {
     }  
 });  
 }
+
+function loadingMore () {
+  if (more.value === 'noMore') {
+    return
+  }
+  more.value = 'loading'
+  pageInfo.value.pageNo++
+  getMyCoupon()
+}
 </script>
 
 <style lang="scss" scoped>