cloud_admin_app/pagesCenter/billingPage/billingOrder/billingOrder.vue

134 lines
2.7 KiB

<template>
<view class="main-page">
<view>
<view>
<view class="content-list" v-for="(item,index) in orderData.orderList" :key="item.id">
<view>
<view class="station-name">{{item.stationName}}</view>
<view class="station-time">{{item.createTime}}</view>
</view>
<view class="">
<view class="orders-price">¥{{item.trRealAmt}}</view>
<view class="price-type">换电消费</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script setup>
import config from '@/common/config/config.js';
import {
reactive,
ref,
} from "vue";
import {
onLoad,
onShow,
onReachBottom,
onUnload,
onHide,
onTabItemTap,
onPullDownRefresh
} from "@dcloudio/uni-app";
//
const orderData = reactive({ //请求的订单列表
orderList: [],
orderAskIng: []
})
const page = ref(1) //触底加载增加的页数
const totalPages = ref() //总页数,用于判断是否加载完
const idKey=ref()
onLoad((option)=>{
idKey.value=option.id
console.log(option,'option');
})
onShow( async () => {
page.value = 1
await getOrder(0)
})
onReachBottom(async () => {
if (page.value < totalPages.value) {
page.value += 1
await getOrder(1)
orderData.orderList = orderData.orderList.concat(orderData.orderAskIng)
} else {
uni.$u.toast('没有更多啦');
}
})
const getOrder = async (type) => {
await uni.$request({
url: config.wxUrl_pay + 'pay/invoice/orderDetail?pageNo=' +
page.value + "&pageSize=" + 10+ "&invoiceId=" + idKey.value
}).then(res => {
console.log(res, '==========>444');
if (type == 1) {
orderData.orderAskIng = res.data.data.data //触底加载的列表
} else {
orderData.orderList = res.data.data.data //渲染的列表
}
totalPages.value = res.data.data.totalPage //总页数
}).catch((err) => {
uni.showToast({
title: '加载失败',
duration: 2000,
icon: 'error'
});
})
}
</script>
<style lang='less' scoped>
.main-page {
/* background: #F5F7FA; */
position: relative;
}
.content-list {
padding: 32rpx;
display: flex;
justify-content: space-between;
background: #FFFFFF;
box-shadow: -2px 2px 8px 0px #7AA7D026;
margin: 16rpx 0;
}
.station-name {
color: #171717;
font-size: 28rpx;
font-weight: 400;
height: 40rpx;
line-height: 40rpx;
}
.station-time {
font-size: 20rpx;
font-weight: 400;
color: #808080;
margin-top: 8rpx;
}
.orders-price {
color: #4C91FF;
font-size: 32rpx;
font-weight: 400;
text-align: right;
height: 40rpx;
line-height: 40rpx;
}
.price-type {
font-size: 20rpx;
font-weight: 400;
color: #585858;
text-align: right;
margin-top: 8rpx;
}
</style>
<style lang="less">
page {
background-color: #F2F6F7;
}
</style>