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.
380 lines
8.9 KiB
380 lines
8.9 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>
|
|
</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.orderNo}}</view>
|
|
<view class="">
|
|
<!-- <view
|
|
:class="{'refunded' : item.status== 1 ,'non-payment' : item.status== 0,'payState': item.status== 2}">
|
|
{{['--', '预约成功','预约取消','预约失败','换电成功','换电失败','换电中','预约过期'][item.status === '' ? '--' : item.status] }}
|
|
</view> -->
|
|
<view class="refunded refunded_2" v-if="item.status == 1">
|
|
预约成功
|
|
</view>
|
|
<view class="refunded refunded_5" v-if="item.status == 2">
|
|
预约取消
|
|
</view>
|
|
<view class="refunded refunded_3" v-if="item.status == 3">
|
|
预约失败
|
|
</view>
|
|
<view class="refunded refunded_2" v-if="item.status == 4">
|
|
换电成功
|
|
</view>
|
|
<view class="refunded refunded_3" v-if="item.status == 5">
|
|
换电失败
|
|
</view>
|
|
<view class="refunded refunded_0" v-if="item.status == 6">
|
|
换电中
|
|
</view>
|
|
<view class="refunded refunded_6" v-if="item.status == 7">
|
|
预约过期
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view>
|
|
<view class="payMoney padding-lr-sm padding-bottom-sm">
|
|
<view class="margin-top-sm">预约电池锁仓仓号：{{item.binNos?item.binNos:'--'}}
|
|
</view>
|
|
<view class="margin-top-sm">预约数量：{{item.batnum?item.batnum:'0'}}块</view>
|
|
<view class="margin-top-sm">预约时间：{{item.startTime}}</view>
|
|
<view class="margin-top-sm">预约到期时间：{{item.endTime}}</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 () => {
|
|
// getOrder(0, picker_array_index.value)
|
|
// getcarinfo()
|
|
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 () => {
|
|
page.value = 1
|
|
if (!uni.getStorageSync("userInfo")) {
|
|
uni.showToast({
|
|
title: '请先完成登录',
|
|
duration: 2000,
|
|
icon: 'error'
|
|
});
|
|
return;
|
|
} else {
|
|
getOrder(0, picker_array_index.value)
|
|
}
|
|
|
|
})
|
|
const handle_goaddform = () => {
|
|
uni.navigateTo({
|
|
url: '/pages/order/appointorder/addform/addform'
|
|
})
|
|
}
|
|
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/amt-order/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: '/pages/order/appointorder/detailInf/detailInf?details=' + JSON.stringify(e)
|
|
})
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.orderBox {
|
|
width: 100%;
|
|
background: #F7F8FA;
|
|
}
|
|
|
|
.select {
|
|
height: 80rpx;
|
|
font-size: 28rpx;
|
|
color: #171717;
|
|
background: #F7F8FA;
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
}
|
|
|
|
.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;
|
|
font-size: 24rpx;
|
|
}
|
|
.add_order_cls {
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
right: 30rpx;
|
|
.btn_item {
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
</style>
|
|
<style lang="scss">
|
|
page {
|
|
background-color: #F7F8FA;
|
|
}
|
|
</style> |