|
|
<template>
|
|
|
<view class="main-page">
|
|
|
<!-- <view class="message-box">您有一笔58.26元的换电订单未支付,请您尽快支付</view> -->
|
|
|
<view>
|
|
|
<view class="content-title">
|
|
|
<view class="content-name">
|
|
|
<view class="orders-line"></view>
|
|
|
<view>{{$t('index.Bill_details')}}</view>
|
|
|
</view>
|
|
|
<view>
|
|
|
<text class="invoice" @click="goInvoice">{{$t('index.Issue_invoice')}}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view>
|
|
|
<view class="content-list" v-for="(item,index) in orderData.orderList" :key="item.id">
|
|
|
<view>
|
|
|
<view class="station-name">{{item.stationName==null?'--':item.stationName}}</view>
|
|
|
<view class="station-time">{{item.createTime==null?'--':item.createTime}}</view>
|
|
|
</view>
|
|
|
<view class="orders-price">¥{{item.totalFee==null?'0':item.totalFee}}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- position bottom -->
|
|
|
<!-- <view class="footer-box">
|
|
|
<view>
|
|
|
<u-button color="#4C91FF" shape='circle' @click="www">查看未支付订单</u-button>
|
|
|
</view>
|
|
|
</view> -->
|
|
|
|
|
|
</view>
|
|
|
<view v-if="orderData.orderList == null || orderData.orderList.length == 0">
|
|
|
<view class="nonePage">
|
|
|
<view class="noneBg">
|
|
|
</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";
|
|
|
import { useI18n } from 'vue-i18n'//zz
|
|
|
const { t } = useI18n()//zz
|
|
|
//
|
|
|
const orderData = reactive({ //请求的订单列表
|
|
|
orderList: [
|
|
|
{
|
|
|
stationName: 0,
|
|
|
createTime: 0,
|
|
|
totalFee: 0
|
|
|
}
|
|
|
],
|
|
|
orderAskIng: []
|
|
|
})
|
|
|
const page = ref(1) //触底加载增加的页数
|
|
|
const totalPages = ref() //总页数,用于判断是否加载完
|
|
|
|
|
|
//
|
|
|
onShow(() => {
|
|
|
page.value = 1
|
|
|
// 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(t('index.No_more'));
|
|
|
}
|
|
|
})
|
|
|
|
|
|
|
|
|
//
|
|
|
const getOrder = async (type) => {
|
|
|
await uni.$request({
|
|
|
url: config.wxUrl_pay + 'app-rest/order/pageSwapOrder?page=' +
|
|
|
page.value + "&size=" + 10
|
|
|
}).then(res => {
|
|
|
console.log(res, '==========>');
|
|
|
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: t('index.Load_failure'),
|
|
|
duration: 2000,
|
|
|
icon: 'error'
|
|
|
});
|
|
|
})
|
|
|
}
|
|
|
const goInvoice = () => {
|
|
|
uni.navigateTo({
|
|
|
url: './issueInvoice/issueInvoice'
|
|
|
})
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang='less' scoped>
|
|
|
.main-page {
|
|
|
/* background: #F5F7FA; */
|
|
|
position: relative;
|
|
|
|
|
|
}
|
|
|
|
|
|
.message-box {
|
|
|
height: 72rpx;
|
|
|
line-height: 72rpx;
|
|
|
margin: 16rpx 32rpx;
|
|
|
background: #F5F7FA;
|
|
|
box-shadow: -2px 2px 8px 0px #7AA7D026;
|
|
|
font-size: 28rpx;
|
|
|
font-weight: 400;
|
|
|
text-align: center;
|
|
|
color: #4C91FF;
|
|
|
}
|
|
|
|
|
|
.orders-line {
|
|
|
width: 4rpx;
|
|
|
height: 28rpx;
|
|
|
margin-right: 8rpx;
|
|
|
border-left: 4rpx solid #4C91FF;
|
|
|
border-radius: 4rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
.content-title {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
margin: 16rpx 32rpx 24rpx 32rpx;
|
|
|
}
|
|
|
|
|
|
.content-name {
|
|
|
font-size: 32rpx;
|
|
|
font-weight: 400;
|
|
|
text-align: left;
|
|
|
color: #171717;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
}
|
|
|
|
|
|
.invoice {
|
|
|
font-size: 28rpx;
|
|
|
font-weight: 400;
|
|
|
text-align: right;
|
|
|
color: #4C91FF;
|
|
|
|
|
|
}
|
|
|
|
|
|
.content-list {
|
|
|
padding: 32rpx;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
background: #FFFFFF;
|
|
|
box-shadow: -2px 2px 8px 0px #7AA7D026;
|
|
|
margin-bottom: 16rpx;
|
|
|
}
|
|
|
|
|
|
.station-name {
|
|
|
color: #171717;
|
|
|
font-size: 28rpx;
|
|
|
font-weight: 400;
|
|
|
}
|
|
|
|
|
|
.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;
|
|
|
line-height: 76rpx;
|
|
|
}
|
|
|
|
|
|
.footer-box {
|
|
|
width: 100%;
|
|
|
position: fixed;
|
|
|
bottom: 0;
|
|
|
padding: 32rpx;
|
|
|
background-color: #fff;
|
|
|
border-top: 1px solid #eee;
|
|
|
|
|
|
/deep/.u-button {
|
|
|
height: 72rpx !important;
|
|
|
}
|
|
|
}
|
|
|
.nonePage {
|
|
|
width: 100%;
|
|
|
height: calc(100vh - 80rpx);
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
}
|
|
|
.noneBg {
|
|
|
width: 336rpx;
|
|
|
height: 452rpx;
|
|
|
background: url('@/static/user/none.png') no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
}
|
|
|
</style>
|
|
|
<style lang="less">
|
|
|
page {
|
|
|
background-color: #F2F6F7;
|
|
|
// padding-bottom: 120rpx;
|
|
|
}
|
|
|
</style> |