|
|
<template>
|
|
|
|
|
|
<view class="orderBox" v-if="orderShow==true">
|
|
|
<view class="select padding-lr-sm margin-top-sm margin-bottom-xs" @click="getMouth">
|
|
|
<view class="padding-lr-xs flex">
|
|
|
{{chooseDay}}
|
|
|
<view class="padding-lr-xs">
|
|
|
<text class="lg text-gray cuIcon-unfold "></text>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<u-datetime-picker v-model="chooseValue" mode="year-month" :show="timeShow" @confirm="confirm"
|
|
|
@cancel="cancel" :immediateChange='true'>
|
|
|
</u-datetime-picker>
|
|
|
</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.sn}}</view>
|
|
|
<!-- <view class="">
|
|
|
<view
|
|
|
:class="{'payState' : item.payStatus== 1 ,'non-payment' : item.payStatus== 0,'refunded': item.payStatus== 2}">
|
|
|
{{['未付款','已付款','付款失败'][item.payStatus === '' ? '--' : item.payStatus] }}
|
|
|
</view>
|
|
|
</view> -->
|
|
|
</view>
|
|
|
<view>
|
|
|
<view class="payMoney padding-lr-sm padding-bottom-sm">
|
|
|
<view class="margin-top-sm" style="font-size: 20rpx">{{$t('index.License_number')}}：{{item.vehicleNo ? item.vehicleNo : '--'}}
|
|
|
</view>
|
|
|
<view class="margin-top-sm" style="font-size: 20rpx">{{$t('index.Power_change_time')}}：{{item.swapEndTime}}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view v-if="orderShow==false || 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';
|
|
|
import { useI18n } from 'vue-i18n'//zz
|
|
|
const { t } = useI18n()//zz
|
|
|
const detailBack = useCounterStore()
|
|
|
|
|
|
const orderShow = ref(true) //判断是否登录展示订单
|
|
|
const orderData = reactive({ //请求的订单列表
|
|
|
orderList: [{
|
|
|
orderNo: 0,
|
|
|
payStatus: 0,
|
|
|
staSwapRecord: {
|
|
|
cn: 0
|
|
|
},
|
|
|
totalFee: 0,
|
|
|
createTime: 0
|
|
|
}],
|
|
|
orderAskIng: []
|
|
|
})
|
|
|
const page = ref(1) //触底加载增加的页数
|
|
|
const totalPages = ref() //总页数，用于判断是否加载完
|
|
|
const chooseValue = ref(Date.now());
|
|
|
const timeShow = ref(false)
|
|
|
const chooseDay = ref()
|
|
|
onShow(async () => {
|
|
|
// orderShow.value = logIn.isLogin //有无数据展示判断
|
|
|
// if (detailBack.value == true) {
|
|
|
// chooseDay.value = await getDay(0)//获取当前时间年月
|
|
|
// getOrder(0, chooseDay.value)
|
|
|
// } else {
|
|
|
// console.log(chooseValue._rawValue,'chooseValue._rawValue.');
|
|
|
// chooseValue._rawValue=chooseValue._value=Date.now()
|
|
|
// console.log(chooseValue,chooseValue.value,'llllllllllll',chooseValue._rawValue)
|
|
|
|
|
|
// }
|
|
|
|
|
|
})
|
|
|
onTabItemTap(async (e) => {
|
|
|
console.log(e);
|
|
|
if (e.index == 1) {
|
|
|
if (!uni.getStorageSync("userInfo")) {
|
|
|
uni.showToast({
|
|
|
title: t('index.login_first'),
|
|
|
duration: 2000,
|
|
|
icon: 'error'
|
|
|
});
|
|
|
return;
|
|
|
} else {
|
|
|
// chooseDay.value = await getDay(0)
|
|
|
page.value = 1
|
|
|
// getOrder(0, chooseDay.value)
|
|
|
uni.pageScrollTo({
|
|
|
scrollTop: 0, // 滚动到页面的目标位置 这个是滚动到顶部, 0
|
|
|
duration: 0 // 滚动动画的时长
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
onLoad(async () => {
|
|
|
chooseDay.value = await getDay(0) + '-01' //获取当前时间年月
|
|
|
if (!uni.getStorageSync("userInfo")) {
|
|
|
uni.showToast({
|
|
|
title: t('index.login_first'),
|
|
|
duration: 2000,
|
|
|
icon: 'error'
|
|
|
});
|
|
|
return;
|
|
|
} else {
|
|
|
getOrder()
|
|
|
}
|
|
|
|
|
|
})
|
|
|
onUnload(() => {
|
|
|
// console.log('销毁');
|
|
|
})
|
|
|
onHide(async () => {
|
|
|
// detailBack.value = false
|
|
|
// page.value = 1
|
|
|
// console.log('隐藏');
|
|
|
})
|
|
|
onPullDownRefresh(async () => {
|
|
|
// chooseDay.value = await getDay(0)
|
|
|
page.value = 1
|
|
|
// getOrder(0, chooseDay.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, chooseDay.value)
|
|
|
orderData.orderList = orderData.orderList.concat(orderData.orderAskIng)
|
|
|
} else {
|
|
|
uni.$u.toast(t('index.No_more'));
|
|
|
}
|
|
|
})
|
|
|
const getOrder = async (type, data) => {
|
|
|
let dates = {
|
|
|
customerId: uni.getStorageSync("userInfo").id,
|
|
|
time: chooseDay.value
|
|
|
}
|
|
|
console.log(dates);
|
|
|
await uni.$request({
|
|
|
url: config.baseUrl + 'api/SwapOrder/AppSwapOrder',
|
|
|
data: dates,
|
|
|
method: 'POST'
|
|
|
}).then(res => {
|
|
|
// console.log(res, '==========>');
|
|
|
// if (type == 1) {
|
|
|
// orderData.orderAskIng = res.data.data.data //触底加载的列表
|
|
|
// } else {
|
|
|
// orderData.orderList = res.data.data.data //渲染的列表
|
|
|
// }
|
|
|
orderData.orderList = res.data.data.rows //渲染的列表
|
|
|
totalPages.value = res.data.data.toTal //总页数
|
|
|
}).catch((err) => {
|
|
|
uni.showToast({
|
|
|
title: t('index.Order_loading_failed'),
|
|
|
duration: 2000,
|
|
|
icon: 'error'
|
|
|
});
|
|
|
})
|
|
|
}
|
|
|
const confirm = () => {
|
|
|
// chooseDay.value = new Date(chooseValue.value)
|
|
|
setTimeout(() => {
|
|
|
let n = new Date(chooseValue._rawValue)
|
|
|
let year = n.getFullYear()
|
|
|
let month = n.getMonth() + 1
|
|
|
// let day = m.getDay()
|
|
|
// console.log('month: ', month, toString.call(month));
|
|
|
month = month < 10 ? ('0' + month) : month
|
|
|
let res = year + '-' + month + '-01'
|
|
|
chooseDay.value = res
|
|
|
timeShow.value = false
|
|
|
page.value = 1 //点击查询页面请求第一页
|
|
|
getOrder(0, res)
|
|
|
}, 500)
|
|
|
}
|
|
|
const cancel = () => {
|
|
|
timeShow.value = false
|
|
|
}
|
|
|
const getMouth = () => {
|
|
|
timeShow.value = true
|
|
|
}
|
|
|
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) => {
|
|
|
uni.navigateTo({
|
|
|
url: './detailInf/detailInf?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 {
|
|
|
color: #F23E2C;
|
|
|
border: 1px solid #F23E2C;
|
|
|
padding: 4rpx 16rpx;
|
|
|
border-radius: 8px;
|
|
|
font-size: 28rpx;
|
|
|
}
|
|
|
|
|
|
.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> |
