|
|
@@ -0,0 +1,342 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <ujp-navbar title="预约充电">
|
|
|
+
|
|
|
+ </ujp-navbar>
|
|
|
+
|
|
|
+ <view class="carNone" v-if="appointmentList.length == 0">
|
|
|
+ <img src="@/assets/static/img/暂无数据-缺省页.png" alt="">
|
|
|
+ <p>暂无预约</p>
|
|
|
+ </view>
|
|
|
+ <view class="reservation-items" v-for="(item,index) in appointmentList" :key="item.id" >
|
|
|
+ <view class="station-name ellipsis">
|
|
|
+ {{item.stationName}}/{{item.deviceName}}
|
|
|
+ <view class=" btn" :class="{
|
|
|
+ 'toBe-confirmed':item.status==0,
|
|
|
+ 'confirmed':item.status==1
|
|
|
+ }" >{{item.statusN}}</view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="details-items">
|
|
|
+
|
|
|
+ <view class="items">
|
|
|
+ <view class="items-name">
|
|
|
+ 预约启动时间
|
|
|
+ </view>
|
|
|
+ <view class="items-content">
|
|
|
+ {{item.startTime}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="items">
|
|
|
+ <view class="items-name">
|
|
|
+ 创建时间
|
|
|
+ </view>
|
|
|
+ <view class="items-content">
|
|
|
+ {{item.createTime}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="button" v-if="item.status == '0'">
|
|
|
+ <u-button class="cancel" shape="circle" @click="refuseClick(item,item.status)">取消预约</u-button>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <u-divider v-if="appointmentList.length == recordsTotal && recordsTotal != 0" style="margin-top: 10px;background-color: #F2F4F4;">已经到底了</u-divider>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import * as API from '@/apis/apointment.js'
|
|
|
+
|
|
|
+ import {
|
|
|
+ hourDistanceArr,
|
|
|
+ currentTimeStamp,
|
|
|
+ parseUnixTime
|
|
|
+ } from '@/utils'
|
|
|
+
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ screenShow: false,
|
|
|
+ navBarHeight:44,
|
|
|
+ statusList: [
|
|
|
+ {id:"",name:"全部预约单"},
|
|
|
+ {id:"1",name:"已确认"},
|
|
|
+ {id:"0",name:"待确认"},
|
|
|
+ {id:"2",name:"已完成"},
|
|
|
+ {id:"3",name:"已取消"},
|
|
|
+ {id:"4",name:"已拒绝"},
|
|
|
+ {id:"9",name:"已过期"},
|
|
|
+ ],
|
|
|
+ statusClass: '',
|
|
|
+ pageIndex: 1,
|
|
|
+ recordsTotal: 0,
|
|
|
+ appointmentList: [],
|
|
|
+ status: '',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ this.getAppointmentList(true);
|
|
|
+ },
|
|
|
+ onReachBottom() {
|
|
|
+ if (this.appointmentList.length < this.recordsTotal) {
|
|
|
+ this.myLoadmore();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ statusClick(index,item) {
|
|
|
+ this.statusClass = index;
|
|
|
+ this.screenShow = false;
|
|
|
+ this.status = item.id;
|
|
|
+ this.getAppointmentList(true);
|
|
|
+ },
|
|
|
+ screenClick() {
|
|
|
+ this.screenShow = !this.screenShow;
|
|
|
+ },
|
|
|
+ getAppointmentList(bl) {
|
|
|
+ uni.showLoading({
|
|
|
+ title: "加载中",
|
|
|
+ mask: true,
|
|
|
+ })
|
|
|
+ if (bl) {
|
|
|
+ this.appointmentList = [];
|
|
|
+ this.pageIndex = 1;
|
|
|
+ }
|
|
|
+ API.timingList({
|
|
|
+ pageIndex: this.pageIndex,
|
|
|
+ status: this.status
|
|
|
+ }).then((res) => {
|
|
|
+ uni.hideLoading();
|
|
|
+ this.appointmentList = [
|
|
|
+ ...this.appointmentList,
|
|
|
+ ...res.data.data
|
|
|
+ ];
|
|
|
+ this.recordsTotal = res.data.recordsTotal;
|
|
|
+
|
|
|
+ var list = res.data.data;
|
|
|
+ for (let i = 0; i < list.length; i++) {
|
|
|
+ if(list[i].status == '0') {
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }).catch(error => {
|
|
|
+ uni.showToast({
|
|
|
+ title: error,
|
|
|
+ icon: "none"
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ myLoadmore() {
|
|
|
+ this.pageIndex += 1;
|
|
|
+ this.getAppointmentList()
|
|
|
+ },
|
|
|
+ confirmrefuse(item){
|
|
|
+ uni.showLoading({
|
|
|
+ title: "加载中",
|
|
|
+ mask: true,
|
|
|
+ })
|
|
|
+ API.deleteTiming({
|
|
|
+ id: item.id,
|
|
|
+ status: '3'
|
|
|
+ }).then((res) => {
|
|
|
+ uni.hideLoading();
|
|
|
+ this.getAppointmentList(true);
|
|
|
+ }).catch(error => {
|
|
|
+ uni.showToast({
|
|
|
+ title: error,
|
|
|
+ icon: "none"
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ refuseClick(item,status) {
|
|
|
+ uni.showModal({
|
|
|
+ title:"提示",
|
|
|
+ content: "请确认是否取消预约充电",
|
|
|
+
|
|
|
+ success: (res1) => {
|
|
|
+ if (res1.confirm) {
|
|
|
+ this.confirmrefuse(item)
|
|
|
+ } else if (res1.cancel) {
|
|
|
+ //('用户点击取消');
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .carNone{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ img{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ p{
|
|
|
+ margin-top: -60px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .preference {
|
|
|
+ background-color: #ffffff;
|
|
|
+ left: 0rpx;
|
|
|
+ position: fixed
|
|
|
+
|
|
|
+ }
|
|
|
+ .preference_group_item {
|
|
|
+ padding: 15rpx;
|
|
|
+ text-align: center;
|
|
|
+ color: #777777;
|
|
|
+ }
|
|
|
+ .active {
|
|
|
+ color: #00B962;
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+ .preference_group {
|
|
|
+ padding-bottom: 20rpx;
|
|
|
+ }
|
|
|
+ .content-s{
|
|
|
+ height: 240px;
|
|
|
+ overflow-y:scroll;
|
|
|
+ }
|
|
|
+ page {
|
|
|
+ padding-bottom: 155px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .screen {
|
|
|
+ margin-left: 85.3%;
|
|
|
+ color: rgba(119, 119, 119, 100);
|
|
|
+ font-size: 12px
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ width: 60px;
|
|
|
+ height: 24px;
|
|
|
+ line-height: 20px;
|
|
|
+ border-radius: 4px;
|
|
|
+ background-color: rgba(255, 255, 255, 100);
|
|
|
+ font-size: 14px;
|
|
|
+ text-align: center;
|
|
|
+ float: right;
|
|
|
+ margin-right: 24px;
|
|
|
+ margin-top: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 待确认按钮
|
|
|
+ .toBe-confirmed {
|
|
|
+
|
|
|
+ color: rgba(78, 141, 246, 100);
|
|
|
+ border: 1px solid rgba(78, 141, 246, 100);
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ // 已确认按钮
|
|
|
+ .confirmed {
|
|
|
+ border: 1px solid rgba(0, 185, 98, 100);
|
|
|
+ color: rgba(0, 185, 98, 100);
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ // 已取消按钮
|
|
|
+ .canceled {
|
|
|
+ border: 1px solid rgba(153, 153, 153, 100);
|
|
|
+ color: rgba(153, 153, 153, 100);
|
|
|
+ ;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 已过期按钮
|
|
|
+ .have-expired {
|
|
|
+ color: rgba(162, 169, 181, 100);
|
|
|
+ border: 1px solid rgba(162, 169, 181, 100);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 已拒绝
|
|
|
+ .refused {
|
|
|
+ color: rgba(255, 79, 63, 100);
|
|
|
+ border: 1px solid rgba(255, 79, 63, 100);
|
|
|
+ }
|
|
|
+
|
|
|
+ .reservation-items {
|
|
|
+ width: 100%;
|
|
|
+ background-color: #fff;
|
|
|
+ padding-left: 14px;
|
|
|
+ margin-bottom: 12px;
|
|
|
+
|
|
|
+ .station-name {
|
|
|
+ line-height: 48px;
|
|
|
+ color: rgba(16, 16, 16, 100);
|
|
|
+ font-size: 20px
|
|
|
+ }
|
|
|
+ .ellipsis{
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ .details-items {
|
|
|
+ border: 1px solid rgba(238, 242, 240, 100);
|
|
|
+ border-left: none;
|
|
|
+ padding-bottom: 13px;
|
|
|
+
|
|
|
+ .items {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 12px 14px 0px 0;
|
|
|
+ line-height: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/.u-alert-tips--bg--warning-light {
|
|
|
+ background-color: #fff !important;
|
|
|
+ border: none;
|
|
|
+ margin-top: 12px;
|
|
|
+ padding: 8px 0;
|
|
|
+
|
|
|
+ .u-alert-desc {
|
|
|
+ color: #ff7300;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .button {
|
|
|
+ height: 56px;
|
|
|
+ padding: 12px 0;
|
|
|
+
|
|
|
+ /deep/.u-btn {
|
|
|
+ width: 100px;
|
|
|
+ height: 32px;
|
|
|
+ line-height: 23px;
|
|
|
+ background-color: rgba(255, 255, 255, 100);
|
|
|
+ color: rgba(153, 153, 153, 100);
|
|
|
+ font-size: 16px;
|
|
|
+ text-align: center;
|
|
|
+ float: right;
|
|
|
+ margin-right: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .navigation,
|
|
|
+ .start {
|
|
|
+
|
|
|
+ color: rgba(0, 185, 98, 100);
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .check {
|
|
|
+ color: rgba(153, 153, 153, 100);
|
|
|
+ }
|
|
|
+
|
|
|
+ .canc {
|
|
|
+ color: rgba(153, 153, 153, 100);
|
|
|
+ }
|
|
|
+
|
|
|
+ .rebook {
|
|
|
+ color: rgba(0, 185, 98, 100);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
zhengkaixin