193 lines
4.1 KiB
Vue
193 lines
4.1 KiB
Vue
<template>
|
|
<up-navbar
|
|
title="预约记录"
|
|
bgColor="#00aa7f"
|
|
:autoBack="true"
|
|
leftIconColor="#fff"
|
|
titleStyle="color:#fff"
|
|
:placeholder="true"
|
|
/>
|
|
<view class="content">
|
|
<view class="tabct">
|
|
<up-tabs
|
|
:list="statelist"
|
|
:scrollable="false"
|
|
@click="tabshand"
|
|
lineColor="#00aa00"
|
|
/>
|
|
</view>
|
|
<view class="lisct">
|
|
<view v-for="n in list" :key="n.orderNo" class="list">
|
|
<view class="zoddu">
|
|
<view>
|
|
<view>换电站：</view>
|
|
<view>{{n.stationName}}</view>
|
|
</view>
|
|
<view>
|
|
<view>车牌号：</view>
|
|
<view>{{n.plateNum}}</view>
|
|
</view>
|
|
<view>
|
|
<view>手机号：</view>
|
|
<view>{{n.phone}}</view>
|
|
</view>
|
|
<view>
|
|
<view>预约时间：</view>
|
|
<view style="font-size: 30rpx;">{{ytime(n.swapDay,n.swapDuration)}}</view>
|
|
</view>
|
|
</view>
|
|
<view v-if="n.status == 1" @tap="cancel(n.pkId)" class="qxyy" style="background: #00aa00;">取消预约</view>
|
|
<view v-else-if="n.status == 2" class="qxyy">已使用</view>
|
|
<view v-else-if="n.status == 3" class="qxyy">已取消</view>
|
|
<view v-else class="qxyy">已过期</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<up-empty v-if="list.length == 0" mode="list" text="暂无预约记录" />
|
|
<up-loadmore v-else :status="status" color="#c0c4cc" lineColor="#c0c4cc" />
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref,reactive } from 'vue'
|
|
import { getyylist,cancelrese } from '@/utils/service'
|
|
import { onShow,onReachBottom } from '@dcloudio/uni-app'
|
|
|
|
onShow(() => {
|
|
pageNo.value = 1
|
|
list.value.splice(0)
|
|
getlist()
|
|
})
|
|
|
|
|
|
//预约状态
|
|
const statelist = reactive([
|
|
{ name: '全部', status:'1'},
|
|
{ name: '已使用', status:'2' },
|
|
{ name: '已取消', status:'3' },
|
|
{ name: '已过期', status:'4'}
|
|
])
|
|
|
|
let status = ref('nomore') //loadmore loading
|
|
|
|
let list = ref<any[]>([])
|
|
let pageNo = ref(1)
|
|
let stanum = ref('')
|
|
//点击tabs
|
|
function tabshand(n:any){
|
|
pageNo.value = 1
|
|
list.value.splice(0)
|
|
stanum.value = n.status
|
|
getlist()
|
|
}
|
|
function getlist() {
|
|
let qsobj = {
|
|
ucode:uni.getStorageSync('wxuid'),
|
|
pageSize:30,
|
|
pageNo:pageNo.value
|
|
}
|
|
if(stanum.value){
|
|
qsobj = Object.assign(qsobj,{status:stanum.value})
|
|
}
|
|
status.value = 'loading'
|
|
getyylist(qsobj).then((rps:any) => {
|
|
if(rps.data.total > 0){
|
|
list.value = [...list.value,...rps.data.records]
|
|
if(list.value.length == rps.data.total){
|
|
status.value = 'nomore'
|
|
}else{
|
|
status.value = 'loadmore'
|
|
pageNo.value++
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
|
|
function cancel(id:string) {
|
|
uni.showModal({
|
|
title: '温馨提示',
|
|
content: '确定取消?',
|
|
success(res){
|
|
if(res.confirm){
|
|
cancelrese(id).then(() => {
|
|
uni.showToast({
|
|
title: '取消成功',
|
|
duration: 2000
|
|
})
|
|
setTimeout(()=>{
|
|
getlist()
|
|
},2000)
|
|
})
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
//预约时间
|
|
function ytime(n:string,v?:string){
|
|
return `${n.substring(0,4)}年${n.substring(4,6)}月${n.substring(6,8)}日 ${v?v:''}`
|
|
}
|
|
|
|
onReachBottom(() => {
|
|
if(status.value == 'loadmore'){
|
|
getlist()
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page{
|
|
background: #f4f4f4;
|
|
}
|
|
.content{
|
|
padding-bottom: 30rpx;
|
|
.tabct{
|
|
position: fixed;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding-bottom: 10rpx;
|
|
background: #fff;
|
|
}
|
|
.lisct{
|
|
padding-top: 130rpx;
|
|
.list{
|
|
margin:0 25rpx 40rpx;
|
|
//padding: 25rpx;
|
|
border-radius: 20rpx;
|
|
box-shadow: 0 0 10px 2px rgba(190, 190, 190, 0.5);
|
|
background: #fff;
|
|
.zoddu{
|
|
padding: 25rpx;
|
|
//margin-bottom: 30rpx;
|
|
//padding-top: 20rpx;
|
|
//border-top: 1px dashed #ccc;
|
|
>view{
|
|
display: flex;
|
|
padding-bottom: 20rpx;
|
|
justify-content: space-between;
|
|
>view:last-child{
|
|
color: #7a7a7a;
|
|
}
|
|
}
|
|
>view:last-child{
|
|
padding-bottom: 0;
|
|
}
|
|
}
|
|
.qxyy{
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
border-radius: 0 0 20rpx 20rpx;
|
|
color: #fff;
|
|
text-align: center;
|
|
background: #ccc;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.hdbzcont{
|
|
box-sizing: border-box;
|
|
width: 85vw;
|
|
padding: 30rpx;
|
|
background: #fff;
|
|
}
|
|
</style> |