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.
302 lines
6.5 KiB
302 lines
6.5 KiB
<template>
|
|
|
|
<view class="orderBox">
|
|
<view>
|
|
<view class="cu-card" v-for="(item,index) in orderData.orderList" :key="item.id">
|
|
<view class="cu-item shadow">
|
|
<view>
|
|
<view class="flex justify-between flex-wrap">
|
|
<view class="orderNumber">{{item.stationName}}</view>
|
|
<view class="" >
|
|
<view v-if="item.status == 1"
|
|
:class="{'payState' : item.auditStatus== 1 ,'non-payment' : item.auditStatus== 0,'refunded': item.auditStatus== 2}">
|
|
{{['待审核','审核通过','审核驳回'][item.auditStatus === '' ? '--' : item.auditStatus] }}
|
|
</view>
|
|
<view class="cancelState" v-else>
|
|
预约取消
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view>
|
|
<view class="payMoney ">
|
|
<view class=" order-time ">预约时间:{{item.startTime.substr(0,16).replace(/-/g, '.')}} - {{item.endTime.substr(0,16).replace(/-/g, '.')}}
|
|
</view>
|
|
<view class="flex justify-between ">
|
|
<view class="">发起时间:{{item.createTime}}</view>
|
|
<view class="flex details">
|
|
<view class="cancel-order" @click="cancelOrder(item.id)" v-if=" item.status== 1 && item.auditStatus==0 && item.expired==false">
|
|
取消预约</view>
|
|
<view @click="goDetail(item.stationNo,item.id,item.status,item.expired,item.auditStatus)">查看详情</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<u-modal :show="cancelShow" title="取消预约" :showCancelButton="true" @confirm="orderConfirm" @cancel="orderCancel"
|
|
confirmText="确定">
|
|
<view class="cancel-inf">是否取消本次换电预约</view>
|
|
</u-modal>
|
|
</view>
|
|
<!-- <view v-if="orderShow==false || 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,
|
|
onPullDownRefresh
|
|
} from "@dcloudio/uni-app";
|
|
import {
|
|
globalStore
|
|
} from '../../stores/globalData.js';
|
|
const logIn = globalStore()
|
|
|
|
const orderShow = ref(true) //判断是否登录展示订单
|
|
const orderData = reactive({ //请求的订单列表
|
|
orderList: [
|
|
{
|
|
stationName: '测试数据',
|
|
status: 1,
|
|
auditStatus: 1,
|
|
startTime: '2024/07/24',
|
|
endTime: '2024/07/24',
|
|
createTime: '2024/07/24',
|
|
id: 1,
|
|
expired: false,
|
|
stationNo: "02022"
|
|
}
|
|
],
|
|
orderAskIng: []
|
|
})
|
|
const page = ref(1) //触底加载增加的页数
|
|
const totalPages = ref() //总页数，用于判断是否加载完
|
|
|
|
|
|
const cancelShow = ref(false)
|
|
const orderId = ref()
|
|
|
|
|
|
onShow(async () => {
|
|
orderShow.value = logIn.isLogin //是否登录 有无数据展示判断
|
|
page.value = 1
|
|
// getOrder(0)
|
|
})
|
|
|
|
onLoad(async () => {
|
|
|
|
})
|
|
onUnload(() => {
|
|
// console.log('销毁');
|
|
})
|
|
onHide(async () => {
|
|
|
|
})
|
|
|
|
onReachBottom(async () => {
|
|
// console.log(totalPages.value, 'totalPages.value');
|
|
if (page.value < totalPages.value) {
|
|
page.value += 1
|
|
// await getOrder(1)
|
|
// orderData.orderList = orderData.orderList.concat(orderData.orderAskIng)
|
|
} else {
|
|
uni.$u.toast('没有更多啦');
|
|
}
|
|
})
|
|
onPullDownRefresh(async () => {
|
|
orderShow.value = logIn.isLogin
|
|
page.value = 1
|
|
// getOrder(0)
|
|
setTimeout(function() {
|
|
uni.stopPullDownRefresh();
|
|
}, 2000);
|
|
})
|
|
const goDetail = (station,orderId,status,expired,auditStatus) => {
|
|
let flag;
|
|
if(status!= 0 && expired==false && auditStatus==0){
|
|
flag=true
|
|
}else{
|
|
flag=false
|
|
}
|
|
|
|
uni.navigateTo({
|
|
url: '../../pages/index/stationDetails/stationDetails?station=' + JSON.stringify(station)+
|
|
'&appointment=' + JSON.parse(1)+'&appointmentId=' + JSON.stringify(orderId)+'&appointmentFlag=' + JSON.stringify(flag)
|
|
})
|
|
|
|
}
|
|
const getOrder = async (type) => {
|
|
let pageData = {
|
|
pageSize: 10,
|
|
pageNum: page.value
|
|
}
|
|
await uni.$request({
|
|
url: config.wxUrl_baseinfo + 'app-rest/stationReservation/pageFromApp',
|
|
method: 'POST',
|
|
data: pageData
|
|
}).then(res => {
|
|
if (type == 1) {
|
|
orderData.orderAskIng = res.data.data.list //触底加载的列表
|
|
} else {
|
|
orderData.orderList = res.data.data.list //渲染的列表
|
|
}
|
|
totalPages.value = res.data.data.pages //总页数
|
|
}).catch((err) => {
|
|
uni.showToast({
|
|
title: '列表加载失败',
|
|
duration: 2000,
|
|
icon: 'error'
|
|
});
|
|
})
|
|
}
|
|
const orderConfirm = () => {
|
|
cancelShow.value = false
|
|
let data = {
|
|
status: 0,
|
|
id: orderId.value
|
|
}
|
|
uni.$request({
|
|
url: config.wxUrl_baseinfo +
|
|
"app-rest/stationReservation/update",
|
|
method: 'POST',
|
|
data: data,
|
|
}).then(res => {
|
|
console.log(res, 'nnnnn');
|
|
uni.$u.toast(res.data.msg)
|
|
page.value = 1
|
|
// getOrder(0)
|
|
}).catch(err => {
|
|
// uni.$u.toast(err.data.msg)
|
|
})
|
|
}
|
|
|
|
const cancelOrder = (data) => {
|
|
cancelShow.value = true
|
|
orderId.value = data
|
|
}
|
|
const orderCancel = () => {
|
|
cancelShow.value = false
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.orderBox {
|
|
width: 100%;
|
|
background: #F7F8FA;
|
|
}
|
|
|
|
.select {
|
|
height: 40rpx;
|
|
font-size: 28rpx;
|
|
color: #171717;
|
|
background: #F7F8FA;
|
|
}
|
|
|
|
.payState {
|
|
padding: 8rpx 16rpx;
|
|
border: 1px solid #4C91FF;
|
|
border-radius: 4px;
|
|
color: #4C91FF;
|
|
font-size: 20rpx;
|
|
}
|
|
.cancelState{
|
|
padding: 8rpx 16rpx;
|
|
border: 1px solid #26C3C0;
|
|
border-radius: 4px;
|
|
color: #26C3C0;
|
|
font-size: 20rpx;
|
|
}
|
|
.payMoney {
|
|
display: flex;
|
|
flex-direction: column;
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
color: #666666;
|
|
margin-top: 24rpx;
|
|
}
|
|
|
|
.orderNumber {
|
|
font-size: 36rpx;
|
|
font-weight: 400;
|
|
color: #333333;
|
|
}
|
|
|
|
.order-time {
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
.nonePage {
|
|
width: 100%;
|
|
height: calc(100vh - 70rpx);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.non-payment {
|
|
color: #FF7B0E;
|
|
border: 1px solid #FF7B0E;
|
|
padding: 8rpx 16rpx;
|
|
border-radius: 4px;
|
|
font-size: 20rpx;
|
|
}
|
|
|
|
.refunded {
|
|
color: #F2634F;
|
|
border: 1px solid #F2634F;
|
|
padding: 8rpx 16rpx;
|
|
border-radius: 4px;
|
|
font-size: 20rpx;
|
|
}
|
|
|
|
.noneBg {
|
|
width: 336rpx;
|
|
height: 452rpx;
|
|
background: url('../../static/order/subscribe.svg') no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.cu-card>.cu-item {
|
|
margin: 0 0rpx 24rpx 0rpx;
|
|
padding: 24rpx;
|
|
box-shadow: -2px 2px 8px 0px #7AA7D026;
|
|
}
|
|
|
|
.details {
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
color: #4C91FF;
|
|
|
|
}
|
|
|
|
.cancel-order {
|
|
margin-right: 24rpx;
|
|
}
|
|
|
|
.cancel-inf {
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
color: #808080;
|
|
|
|
}
|
|
</style>
|
|
<style lang="scss">
|
|
page {
|
|
background-color: #F7F8FA;
|
|
}
|
|
</style> |