206 lines
4.4 KiB
Vue
206 lines
4.4 KiB
Vue
<template>
|
||
<view class="order">
|
||
<z-paging ref="paging" v-model="dataList" use-page-scroll @query="queryList">
|
||
<view>
|
||
<statusBar />
|
||
<view class="p30">
|
||
<view class="order_header">
|
||
<view
|
||
class="order_header_view"
|
||
@click="chanStatus(item.type)"
|
||
v-for="(item, index) in status_list"
|
||
:key="index"
|
||
:class="status == item.type ? 'order_header_active' : ''"
|
||
>
|
||
{{ item.name }}
|
||
<view class="order_header_xian" v-if="item.type == status"></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="p30">
|
||
<view class="order_list" v-for="(item, index) in dataList" :key="index" @click="toLink(item)">
|
||
<view class="order_list_header">订单编号：{{ item.orderNo }}</view>
|
||
<view class="order_list_view">
|
||
<view>充电时间</view>
|
||
<view>{{ item.startTime }}</view>
|
||
</view>
|
||
<view class="order_list_view">
|
||
<view>结束时间</view>
|
||
<view>{{ item.endTime }}</view>
|
||
</view>
|
||
<view class="order_list_view">
|
||
<view>充电电量</view>
|
||
<view>{{ item.useDegree }}度</view>
|
||
</view>
|
||
<view class="order_list_view">
|
||
<view>服务费</view>
|
||
<view>{{ item.serviceAmount }}元</view>
|
||
</view>
|
||
<view class="order_list_view">
|
||
<view>电费</view>
|
||
<view>{{ item.electricityAmount }}元</view>
|
||
</view>
|
||
<view class="order_list_view">
|
||
<view>预付金额</view>
|
||
<view>{{ item.preAmount }}元</view>
|
||
</view>
|
||
<view class="order_list_total">实付金额：{{ item.actuallyAmount }}元</view>
|
||
</view>
|
||
</view>
|
||
</z-paging>
|
||
<view style="height: 180rpx"></view>
|
||
<cc-myTabbar :tabBarShow="3"></cc-myTabbar>
|
||
<!-- <tabbar path="/pages/order/order"></tabbar> -->
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, reactive } from 'vue';
|
||
import { onPullDownRefresh, onPageScroll, onReachBottom, onLoad } from '@dcloudio/uni-app';
|
||
import { ordersList } from '@/api/api.js';
|
||
|
||
const paging = ref(null);
|
||
let dataList = ref([]);
|
||
|
||
let list = ref([]);
|
||
let status = ref(1);
|
||
let status_list = ref([
|
||
{
|
||
name: '全部',
|
||
type: ''
|
||
},
|
||
{
|
||
name: '进行中',
|
||
type: 1
|
||
},
|
||
{
|
||
name: '已完成',
|
||
type: 2
|
||
},
|
||
{
|
||
name: '待支付',
|
||
type: 3
|
||
}
|
||
]);
|
||
|
||
let chanStatus = (e) => {
|
||
status.value = e;
|
||
paging.value.reload();
|
||
};
|
||
|
||
onLoad(async () => {
|
||
// #ifndef MP-WEIXIN
|
||
uni.hideTabBar();
|
||
// #endif
|
||
});
|
||
|
||
let toLink = (e) => {
|
||
// 1-订单初始化;2-启动充电中;3-正在充电;4-充电结束中;5:交易记录确认;-1-启动失败;-2-启动超时
|
||
if (e.status == 2 || e.status == 3 || e.status == 4) {
|
||
uni.navigateTo({
|
||
url: `/pageOrder/recharge/recharge?transactionNo=${e.transactionNo}&type=order`
|
||
});
|
||
}
|
||
};
|
||
|
||
|
||
let isPagingRefNotFound = () => {
|
||
return !paging.value;
|
||
};
|
||
|
||
onPullDownRefresh(() => {
|
||
if (isPagingRefNotFound()) return;
|
||
paging.value.reload().catch(() => {});
|
||
});
|
||
|
||
onPageScroll((e) => {
|
||
if (isPagingRefNotFound()) return;
|
||
paging.value.updatePageScrollTop(e.scrollTop);
|
||
e.scrollTop < 10 && paging.value.doChatRecordLoadMore();
|
||
});
|
||
|
||
onReachBottom(() => {
|
||
if (isPagingRefNotFound()) return;
|
||
paging.value.pageReachBottom();
|
||
});
|
||
|
||
const upChange = (e) => {
|
||
console.log(dataFrom);
|
||
paging.value.reload();
|
||
};
|
||
|
||
const queryList = (pageNo, pageSize) => {
|
||
const params = {
|
||
current: pageNo,
|
||
pageSize: pageSize,
|
||
type: status.value
|
||
};
|
||
|
||
ordersList(params)
|
||
.then((res) => {
|
||
paging.value.complete(res);
|
||
})
|
||
.catch((res) => {
|
||
paging.value.complete(false);
|
||
});
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.order {
|
||
&_header {
|
||
@include flex($space: space-between);
|
||
font-weight: bold;
|
||
font-size: 36rpx;
|
||
color: #232323;
|
||
border-bottom: 4rpx solid #e9ecf2;
|
||
&_view {
|
||
padding: 15rpx 0;
|
||
position: relative;
|
||
view {
|
||
position: absolute;
|
||
left: calc(50% - 49rpx);
|
||
bottom: -4rpx;
|
||
width: 98rpx;
|
||
height: 8rpx;
|
||
background: #4879e6;
|
||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||
}
|
||
}
|
||
&_active {
|
||
color: #4879e6;
|
||
}
|
||
}
|
||
|
||
&_list {
|
||
padding: 25rpx;
|
||
background: #ffffff;
|
||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||
margin-top: 30rpx;
|
||
&_header {
|
||
font-weight: bold;
|
||
font-size: 26rpx;
|
||
color: #4879e6;
|
||
padding-bottom: 20rpx;
|
||
border-bottom: 2rpx solid #ebebeb;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
&_view {
|
||
@include flex($space: space-between);
|
||
font-weight: 400;
|
||
font-size: 26rpx;
|
||
color: #232323;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
&_total {
|
||
flex: 1;
|
||
text-align: right;
|
||
font-weight: bold;
|
||
font-size: 40rpx;
|
||
color: #4879e6;
|
||
}
|
||
}
|
||
}
|
||
</style>
|