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.

357 lines
8.3 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">车牌号:{{item.vehicleNo?item.vehicleNo:'--'}}
</view>
<view class="margin-top-sm">付款金额:{{item.actualPay?item.actualPay / 100:'0'}}元</view>
<!-- <view class="margin-top-sm">交易时间:{{item.orderTime}}</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(10)
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, picker_array_index.value)
})
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
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 == 10) {
delete params.orderStatus
}
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;
}
.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>