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.
376 lines
9.1 KiB
376 lines
9.1 KiB
<template>
|
|
<!-- v-if="orderShow==true" -->
|
|
<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>
|
|
|
|
<!-- <u-datetime-picker v-model="chooseValue" mode="year-month" :show="timeShow" @confirm="confirm"
|
|
@cancel="cancel" :immediateChange='true'>
|
|
</u-datetime-picker> -->
|
|
<!-- <uv-action-sheet ref="actionSheet" :actions="actionSheetlist" title="" :closeOnClickOverlay="false"
|
|
:closeOnClickAction="false" </uv-action-sheet> -->
|
|
|
|
</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.stationNo}}</view>
|
|
<view class="">
|
|
<view class="refunded refunded_0" v-if="item.payStatus == 0">
|
|
待确认
|
|
</view>
|
|
<view class="refunded refunded_1" v-if="item.payStatus == 1">
|
|
待支付
|
|
</view>
|
|
<view class="refunded refunded_2" v-if="item.payStatus == 2">
|
|
已完成
|
|
</view>
|
|
<view class="refunded refunded_3" v-if="item.payStatus == 3">
|
|
支付失败
|
|
</view>
|
|
<view class="refunded refunded_4" v-if="item.payStatus == 4">
|
|
已退款
|
|
</view>
|
|
<view class="refunded refunded_5" v-if="item.payStatus == 5">
|
|
已挂起
|
|
</view>
|
|
<view class="refunded refunded_6" v-if="item.payStatus == 6">
|
|
已关闭
|
|
</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(7)
|
|
const picker_array = ref(['待确认', '待支付',
|
|
'已完成',
|
|
'支付失败',
|
|
'已退款',
|
|
'已挂起',
|
|
'已关闭',
|
|
'全部'
|
|
])
|
|
const orderShow = 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 () => {
|
|
orderShow.value = logIn.isLogin //有无数据展示判断
|
|
// if (detailBack.value == true) {
|
|
// chooseDay.value = await getDay(0)//获取当前时间年月
|
|
// page.value = 1 //点击查询页面请求第一页
|
|
// getOrder(0, picker_array_index.value)
|
|
// } else {
|
|
// console.log(chooseValue._rawValue,'chooseValue._rawValue.');
|
|
// chooseValue._rawValue=chooseValue._value=Date.now()
|
|
// console.log(chooseValue,chooseValue.value,'llllllllllll',chooseValue._rawValue)
|
|
|
|
// }
|
|
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 params = {
|
|
pageNo: page.value,
|
|
pageSize: 10,
|
|
payStatus: data
|
|
}
|
|
if (data == 7) {
|
|
delete params.payStatus
|
|
}
|
|
await uni.$request({
|
|
url: config.baseUrl + 'app-api/cloud/swapOrder/page',
|
|
method: 'GET',
|
|
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 confirm = () => {
|
|
setTimeout(() => {
|
|
let n = new Date(chooseValue._rawValue)
|
|
let year = n.getFullYear()
|
|
let month = n.getMonth() + 1
|
|
console.log('month: ', month, toString.call(month));
|
|
month = month < 10 ? ('0' + month) : month
|
|
let res = year + '-' + month
|
|
chooseDay.value = res
|
|
timeShow.value = false
|
|
page.value = 1 //点击查询页面请求第一页
|
|
getOrder(0, res)
|
|
}, 500)
|
|
}
|
|
const cancel = () => {
|
|
timeShow.value = false
|
|
}
|
|
const actionSheet = ref(null)
|
|
const getMouth = () => {
|
|
console.log('1');
|
|
// timeShow.value = true
|
|
actionSheet.value.open()
|
|
}
|
|
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 {
|
|
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> |