158 lines
4.2 KiB
Vue
158 lines
4.2 KiB
Vue
<template>
|
||
<z-paging ref="paging" v-model="bookList" auto-show-back-to-top class="my-book-page" @query="rechargeList"
|
||
:default-page-size="10">
|
||
<template #top>
|
||
<!-- 自定义导航栏 -->
|
||
<nav-bar :title="$t('user.consumptionRecord')"></nav-bar>
|
||
</template>
|
||
<view style="padding: 20rpx;background-color:#FFF3CD">
|
||
<text style="font-size: 26rpx; color: #FFA500;">{{goBuyTitle}}</text>
|
||
</view>
|
||
<view class="recharge-record" v-if="(bookList && bookList.length > 0)">
|
||
<view class="go-gecharge" @click="goRecharge">
|
||
<view>{{$t('order.recharge')}}</view>
|
||
<view><wd-icon name="arrow-right" size="16px" color="#fff" /></view>
|
||
</view>
|
||
<view class="title">{{$t('order.rechargeConsumptionList')}}</view>
|
||
<view class="recharge-record-block" v-for="(item, index) in bookList" :key="index">
|
||
<view class="recharge-record-block-row">{{item.orderType}}<text
|
||
:class="item.orderType !== '充值' ? 'text1' : 'text2'">{{item.orderType !== '充值' ? '' : '+'}}{{item.changeAmount}}</text>
|
||
</view>
|
||
<view class="recharge-record-block-row_">{{item.productName}}</view>
|
||
<view class="recharge-record-block-row_">{{$t('user.orderSn')}}：{{item.payNo}}<wd-icon name="file-copy"
|
||
size="14px" color="#65A1FA" style="margin-left: 10rpx;" @click="copyToClipboard()"></wd-icon>
|
||
</view>
|
||
<view class="time">{{item.createTime}}</view>
|
||
</view>
|
||
</view>
|
||
</z-paging>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref } from 'vue'
|
||
import { useI18n } from 'vue-i18n'
|
||
import { useUserStore } from '@/stores/user'
|
||
import { getTransactionDetailsList } from '@/api/modules/user'
|
||
import { copyToClipboard } from '@/utils/index'
|
||
|
||
const { t } = useI18n()
|
||
const paging = ref<any>()
|
||
const userStore = useUserStore()
|
||
|
||
// 数据状态
|
||
const bookList = ref([])
|
||
const loading = ref(false)
|
||
const firstLoad = ref(true)
|
||
const goBuyTitle = ref('"【天医币】仅为我平台支付使用币种，仅为了方便用户支付使用。【天医币】可以用于在我平台支付书籍或课程使用。【天医币】这个名称是为适应我们平台的定位属性，所起名称。与区块链虚拟货币无任何关系。"')
|
||
|
||
// 充值记录列表
|
||
async function rechargeList(pageNo : number, pageSize : number) {
|
||
const userId = userStore.userInfo.id
|
||
loading.value = true
|
||
try {
|
||
const res = await getTransactionDetailsList(pageNo, pageSize, userId)
|
||
console.log(res, 'res');
|
||
paging.value.complete(res.transactionDetailsList.records)
|
||
} catch (error) {
|
||
paging.value.complete(false)
|
||
console.error('Failed to load book list:', error)
|
||
} finally {
|
||
firstLoad.value = false
|
||
loading.value = false
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 跳转充值页面
|
||
*/
|
||
const goRecharge = () => {
|
||
uni.navigateTo({
|
||
url: '/pages/user/recharge/index'
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.my-book-page {
|
||
background: #f7faf9;
|
||
min-height: 100vh;
|
||
|
||
.recharge-record {
|
||
background: #fff;
|
||
border-radius: 15rpx;
|
||
overflow: hidden;
|
||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
||
// padding: 20rpx;
|
||
margin: 20rpx;
|
||
|
||
.go-gecharge {
|
||
//height: 100rpx;
|
||
background: linear-gradient(to right, #007bff, #17a2b8);
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
color: #fff;
|
||
padding: 20rpx;
|
||
margin-bottom: 20rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center
|
||
}
|
||
|
||
.title {
|
||
font-size: 30rpx;
|
||
padding-left: 20rpx;
|
||
margin-bottom: 30rpx;
|
||
color: #007bff;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.recharge-record-block {
|
||
border-bottom: 1px solid #e0e0e0;
|
||
padding: 20rpx;
|
||
|
||
.recharge-record-block-row_ {
|
||
font-size: 24rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.time {
|
||
font-size: 22rpx;
|
||
}
|
||
|
||
.recharge-record-block-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 20rpx;
|
||
|
||
.text1 {
|
||
color: #ff0000;
|
||
}
|
||
|
||
.text2 {
|
||
color: #228B22;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.empty-state {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding-top: 200rpx;
|
||
|
||
image {
|
||
width: 400rpx;
|
||
height: 300rpx;
|
||
margin-bottom: 40rpx;
|
||
}
|
||
|
||
.empty-text {
|
||
font-size: 28rpx;
|
||
color: #999;
|
||
margin-bottom: 50rpx;
|
||
}
|
||
}
|
||
</style> |