You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
395 lines
9.2 KiB
395 lines
9.2 KiB
<template>
|
|
<view class="orderBox">
|
|
<view class="select padding-lr-sm margin-top-sm margin-bottom-xs">
|
|
<view class="padding-lr-xs flex">
|
|
订单状态:
|
|
|
|
<picker @change="bindPickerChange" :value="picker_array_index" :range="picker_array">
|
|
<view class="uni-input">{{picker_array[picker_array_index]}}</view>
|
|
</picker>
|
|
<view class="padding-lr-xs">
|
|
<text class="lg text-gray cuIcon-unfold "></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view>
|
|
<view class="cu-card" v-for="(item,index) in orderData.orderList" :key="item.id"
|
|
v-if="orderData.orderList!=null">
|
|
<view class="cu-item shadow" @click="goDetail(item)">
|
|
<view>
|
|
<view class="flex solid-bottom padding-sm justify-between flex-wrap">
|
|
<view class="orderNumber">{{item.stationName}}</view>
|
|
<view class="">
|
|
|
|
<view class="refunded refunded_0" v-if="item.orderStatus == 0">
|
|
初始化
|
|
</view>
|
|
<view class="refunded refunded_1" v-if="item.orderStatus == 1">
|
|
充电中
|
|
</view>
|
|
<view class="refunded refunded_3" v-if="item.orderStatus == 2">
|
|
启动充电失败
|
|
</view>
|
|
<view class="refunded refunded_2" v-if="item.orderStatus == 3">
|
|
结束充电
|
|
</view>
|
|
<view class="refunded refunded_1" v-if="item.orderStatus == 4">
|
|
待支付
|
|
</view>
|
|
<view class="refunded refunded_2" v-if="item.orderStatus == 5">
|
|
(已完成)支付完成
|
|
</view>
|
|
<view class="refunded refunded_3" v-if="item.orderStatus == 6">
|
|
支付失败
|
|
</view>
|
|
<view class="refunded refunded_4" v-if="item.orderStatus == 7">
|
|
已退款
|
|
</view>
|
|
<view class="refunded refunded_5" v-if="item.orderStatus == 8">
|
|
已挂起
|
|
</view>
|
|
<view class="refunded refunded_6" v-if="item.orderStatus == 9">
|
|
已关闭
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view>
|
|
<view class="payMoney padding-lr-sm padding-bottom-sm">
|
|
<view class="margin-top-sm" style="font-weight: bold; color: #000;">
|
|
{{item.vehicleNo?item.vehicleNo:'--'}}
|
|
</view>
|
|
<view class=" center_order">
|
|
<view class="margin-top-sm">充电开始时间：{{item.startTime}}</view>
|
|
<view class="margin-top-sm">充电结束时间：{{item.endTime}}</view>
|
|
<view class="margin-top-sm">电量：{{item.totalElectricity}} kw·h</view>
|
|
</view>
|
|
|
|
<view class="margin-top-sm" style="display: flex;">
|
|
本次付款金额：
|
|
<view style="color: #f0610e;">{{item.totalFee?item.totalFee / 100:'0'}}</view>
|
|
元
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</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 {
|
|
globalStore
|
|
} from '../../../stores/globalData.js';
|
|
const logIn = globalStore()
|
|
|
|
import {
|
|
useCounterStore
|
|
} from '@/stores/counter.js';
|
|
const detailBack = useCounterStore()
|
|
const picker_array_index = ref(5)
|
|
const picker_array = ref(['充电中', '待支付', '(已完成)支付完成', '结束充电', '已退款', '全部'])
|
|
const orderData = reactive({ //请求的订单列表
|
|
orderList: [],
|
|
orderAskIng: []
|
|
})
|
|
const page = ref(1) //触底加载增加的页数
|
|
const totalPages = ref() //总页数，用于判断是否加载完
|
|
const chooseValue = ref(Date.now());
|
|
const timeShow = ref(false)
|
|
const chooseDay = ref()
|
|
onShow(async () => {
|
|
page.value = 1
|
|
getOrder(0, 99)
|
|
})
|
|
onTabItemTap(async (e) => {
|
|
// console.log(e);
|
|
if (e.index == 1) {
|
|
if (!uni.getStorageSync("userInfo")) {
|
|
uni.showToast({
|
|
title: '请先完成登录',
|
|
duration: 2000,
|
|
icon: 'error'
|
|
});
|
|
return;
|
|
} else {
|
|
// chooseDay.value = await getDay(0)
|
|
page.value = 1
|
|
getOrder(0, picker_array_index.value)
|
|
uni.pageScrollTo({
|
|
scrollTop: 0, // 滚动到页面的目标位置 这个是滚动到顶部, 0
|
|
duration: 0 // 滚动动画的时长
|
|
})
|
|
}
|
|
}
|
|
})
|
|
onLoad(async () => {
|
|
// chooseDay.value = await getDay(0) //获取当前时间年月
|
|
// if (!uni.getStorageSync("userInfo")) {
|
|
// uni.showToast({
|
|
// title: '请先完成登录',
|
|
// duration: 2000,
|
|
// icon: 'error'
|
|
// });
|
|
// return;
|
|
// } else {
|
|
// getOrder(0, picker_array_index.value)
|
|
// }
|
|
|
|
})
|
|
onUnload(() => {
|
|
// console.log('销毁');
|
|
})
|
|
onHide(async () => {
|
|
// detailBack.value = false
|
|
// page.value = 1
|
|
// console.log('隐藏');
|
|
})
|
|
const bindPickerChange = (data) => {
|
|
// console.log(data, 'data');
|
|
picker_array_index.value = data.detail.value
|
|
if (data.detail.value == '0') {
|
|
getOrder(0, 1)
|
|
} else if (data.detail.value == '1') {
|
|
getOrder(0, 4)
|
|
} else if (data.detail.value == '2') {
|
|
getOrder(0, 5)
|
|
} else if (data.detail.value == '3') {
|
|
getOrder(0, 3)
|
|
} else if (data.detail.value == '4') {
|
|
getOrder(0, 7)
|
|
} else {
|
|
getOrder(0, 99)
|
|
}
|
|
// picker_array_index.value = data.detail.value
|
|
// getOrder(0, data.detail.value)
|
|
}
|
|
|
|
onPullDownRefresh(async () => {
|
|
// chooseDay.value = await getDay(0)
|
|
page.value = 1
|
|
getOrder(0, picker_array_index.value)
|
|
setTimeout(function() {
|
|
uni.stopPullDownRefresh();
|
|
}, 2000);
|
|
})
|
|
onReachBottom(async () => {
|
|
// console.log(totalPages.value, 'totalPages.value');
|
|
if (page.value < totalPages.value) {
|
|
page.value += 1
|
|
await getOrder(1, picker_array_index.value)
|
|
orderData.orderList = orderData.orderList.concat(orderData.orderAskIng)
|
|
} else {
|
|
uni.$u.toast('没有更多啦');
|
|
}
|
|
})
|
|
const getOrder = async (type, data) => {
|
|
let config_url = ''
|
|
if (uni.getStorageSync("version") == '个人版') {
|
|
config_url = 1
|
|
} else {
|
|
config_url = 2
|
|
}
|
|
let params = {
|
|
pageNo: page.value,
|
|
pageSize: 10,
|
|
orderType: config_url,
|
|
orderStatus: [data]
|
|
}
|
|
if (data == 99) {
|
|
// delete params.orderStatus
|
|
params.orderStatus = [1, 3, 4, 5, 7]
|
|
}
|
|
|
|
await uni.$request({
|
|
url: config.baseUrl + 'app-api/cloud/outCharge/queryListByUserId',
|
|
method: 'POST',
|
|
data: params
|
|
}).then(res => {
|
|
// console.log(res, '==========>');
|
|
if (type == 1) {
|
|
orderData.orderAskIng = res.data.data.list //触底加载的列表
|
|
} else {
|
|
orderData.orderList = res.data.data.list //渲染的列表
|
|
}
|
|
// console.log(orderData.orderList);
|
|
totalPages.value = res.data.data.total //总页数
|
|
}).catch((err) => {
|
|
uni.showToast({
|
|
title: '订单加载失败',
|
|
duration: 2000,
|
|
icon: 'error'
|
|
});
|
|
})
|
|
}
|
|
|
|
const getDay = (day) => {
|
|
var today = new Date();
|
|
var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
|
|
today.setTime(targetday_milliseconds);
|
|
var tYear = today.getFullYear();
|
|
var tMonth = today.getMonth();
|
|
var tDate = today.getDate();
|
|
tMonth = doHandleMonth(tMonth + 1);
|
|
tDate = doHandleMonth(tDate);
|
|
// return tYear + "-" + tMonth + "-" + tDate;
|
|
return tYear + "-" + tMonth;
|
|
}
|
|
const doHandleMonth = (month) => {
|
|
var m = month;
|
|
if (month.toString().length == 1) {
|
|
m = "0" + month;
|
|
}
|
|
return m;
|
|
}
|
|
const goDetail = (e) => {
|
|
if (e.orderStatus == 1) {
|
|
uni.navigateTo({
|
|
url: './detailInf/detailInf?details=' + JSON.stringify(e)
|
|
})
|
|
} else {
|
|
uni.navigateTo({
|
|
url: './detailInf/detail?details=' + JSON.stringify(e)
|
|
})
|
|
}
|
|
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.orderBox {
|
|
width: 100%;
|
|
background: #F7F8FA;
|
|
}
|
|
|
|
.select {
|
|
height: 40rpx;
|
|
font-size: 28rpx;
|
|
color: #171717;
|
|
background: #F7F8FA;
|
|
}
|
|
|
|
.payState {
|
|
padding: 4rpx 16rpx;
|
|
border: 1px solid #4C91FF;
|
|
border-radius: 8px;
|
|
color: #4C91FF;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.center_order {
|
|
margin: 20rpx;
|
|
background: #f4f5f6;
|
|
padding: 20rpx;
|
|
box-sizing: border-box;
|
|
border-radius: 15px;
|
|
font-size: 13px;
|
|
|
|
>view:first-child {
|
|
margin-top: unset;
|
|
}
|
|
}
|
|
|
|
.payMoney {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.orderNumber {
|
|
font-weight: 500;
|
|
line-height: 50rpx;
|
|
}
|
|
|
|
.nonePage {
|
|
width: 100%;
|
|
height: calc(100vh - 70rpx);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.non-payment {
|
|
color: #FF7B0E;
|
|
border: 1px solid #FF7B0E;
|
|
padding: 4rpx 16rpx;
|
|
border-radius: 8px;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.refunded {
|
|
padding: 4rpx 16rpx;
|
|
border-radius: 8px;
|
|
font-size: 22rpx;
|
|
}
|
|
|
|
.refunded_0 {
|
|
color: #06efef;
|
|
border: 1px solid #06efef;
|
|
}
|
|
|
|
.refunded_1 {
|
|
color: #00aaff;
|
|
border: 1px solid #00aaff;
|
|
}
|
|
|
|
.refunded_2 {
|
|
color: #00aa00;
|
|
border: 1px solid #00aa00;
|
|
}
|
|
|
|
.refunded_3 {
|
|
color: #aa0000;
|
|
border: 1px solid #aa0000;
|
|
}
|
|
|
|
.refunded_4 {
|
|
color: #ffff00;
|
|
border: 1px solid #ffff00;
|
|
}
|
|
|
|
.refunded_5 {
|
|
color: #55557f;
|
|
border: 1px solid #55557f;
|
|
}
|
|
|
|
.refunded_6 {
|
|
color: #aaaa7f;
|
|
border: 1px solid #aaaa7f;
|
|
}
|
|
|
|
.noneBg {
|
|
width: 336rpx;
|
|
height: 452rpx;
|
|
background: url('../../../static/order/order.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.cu-card>.cu-item {
|
|
margin: 0 30rpx 30rpx 30rpx;
|
|
}
|
|
</style>
|
|
<style lang="scss">
|
|
page {
|
|
background-color: #F7F8FA;
|
|
}
|
|
</style> |