ddcWechat/pages/rent/store/carList.vue

<template>
	<view :style="colorStyle">
		<view class="my-order">
			<view class="nav acea-row row-around">
				<view class="item" :class="onAll ==-1 ? 'on' : ''" @click="statusClick(-1)">
					<view>{{$t(`全部`)}}</view>
				</view>
				<view class="item" :class="available == 0 ? 'on' : ''" @click="statusClick(0)">
					<view>{{$t(`欠费`)}}</view>
				</view>
				<view class="item" :class="available == 1 ? 'on' : ''" @click="statusClick(1)">
					<view>{{$t(`正常`)}}</view>
				</view>
				<view class="item" :class="binding == 0 ? 'on' : ''" @click="statusClick(2)">
					<view>{{$t(`未绑定`)}}</view>
				</view>
				<view class="item" :class="binding == 1 ? 'on' : ''" @click="statusClick(3)">
					<view>{{$t(`已绑定`)}}</view>
				</view>
			</view>
			<view class='search acea-row row-between-wrapper'>
				<view class='input acea-row row-between-wrapper'>
					<text class='iconfont icon-sousuo'></text>
					<input type='text' v-model='searchKey' @confirm="inputConfirm" focus :placeholder='$t(`姓名/手机号/车辆编号`)'
						placeholder-class='placeholder' @input="setValue"></input>
				</view>
				<view class='bnt' @tap='searchBut'>{{$t(`搜索`)}}</view>
			</view>
			<view class="list">
				<view class="item" v-for="(item,ind) in orderList">
					<view class="acea-row">
						<image class="img" src="../static/cart.png" mode="scaleToFill"></image>
						<view class="title line2">
							{{item.machine_name}}
						</view>
					</view>
					<view class="machine ">
						<view class="acea-row row-between">
							<view class="it">
								当前位置：{{item.address?item.address:'未定位'}}
							</view>
							<view class="status">
								电量：{{item.residue}}%
							</view>
						</view>
					</view>
					<view class="machine acea-row row-between-wrapper">

						<view class="acea-row row-left">
							<view class="it">
								编号：
							</view>
							<view class="code">
								{{item.machine_no}}

							</view>
						</view>
						<view class="acea-row row-rightss" v-if="item.plate_number">
							<view class="it">
								车牌号：
							</view>
							<view class="code">
								{{item.plate_number}}
							</view>
						</view>
						<view class="acea-row row-rightss" v-if="item.plate_number">
							<view class="font-color-blue" v-if="item.relevance_id">
								已绑定
							</view>
							<view class="font-color-white" v-if="!item.relevance_id">
								未绑定
							</view>
						</view>
					</view>
					<view v-if="item.is_available==0" class="text_red tip ">
						欠费
					</view>
					<!-- <view v-if="item.is_available==1" class="text_blue tip">
						正常
					</view> -->
					<view v-if="item.is_available==1" class="text_greed tip">
						正常
					</view>
				</view>
			</view>
			<view class="loadingicon acea-row row-center-wrapper font-color-white" v-if="orderList.length > 0">
				<text class="loading iconfont icon-jiazai" :hidden="loading == false"></text>
				{{ loadTitle }}
			</view>
			<view v-if="orderList.length == 0">
				<emptyPage v-if="!loading" :title="$t(`暂无订单`)"></emptyPage>
				<view class="loadingicon acea-row row-center-wrapper">
					<text class="loading iconfont icon-jiazai font-color-white" :hidden="loading == false"></text>
				</view>
			</view>
		</view>
		<!-- #ifndef MP -->
		<home></home>
		<!-- #endif -->
	</view>
</template>

<script>
	import {
		postStoreCarCode,
	} from '@/api/rent.js';
	import home from '@/components/home';
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from 'vuex';
	import emptyPage from '@/components/emptyPage.vue';
	import colors from '@/mixins/color.js';
	export default {
		components: {
			home,
			emptyPage,
		},
		mixins: [colors],
		data() {
			return {
				searchKey: '',
				onAll: -1, //是否全部
				available: -1, //是否欠费
				binding: -1, //是否绑定车辆
				loading: false, //是否加载中
				loadend: false, //是否加载完毕
				loadTitle: this.$t(`加载更多`), //提示语
				orderList: [], //订单数组
				orderData: {}, //订单详细统计
				page: 1,
				limit: 20,
				pay_close: false,
				pay_order_id: '',
				totalPrice: '0',
				// 保存当前订单数据
				actionOrder: {},
				payLoding: false, //判断是否支付中
			};
		},
		computed: mapGetters(['isLogin']),
		onShow() {
			if (this.isLogin) {
				this.page = 1;
				this.orderList = []
				this.loadend = false;
				this.getRentOrder();
			} else {
				toLogin();
			}
		},
		methods: {
			// 回车查询
			inputConfirm: function(event) {
				if (event.detail.value) {
					uni.hideKeyboard();
					this.searchBut(event.detail.value);
				}
			},
			// 查询
			searchBut() {
				this.loadend = false;
				this.page = 1;
				this.orderList = [];
				uni.showLoading({
					title: this.$t(`正在搜索中`)
				});
				this.getRentOrder();
				uni.hideLoading();
			},
			// 设置查询值
			setValue: function(event) {
				this.$set(this, 'searchKey', event.detail.value);
			},
			/**
			 * 切换类型
			 */
			statusClick: function(status) {
				if (status == 2 || status == 3) {
					if ((status == 2 && this.binding == 0) || (status == 3 && this.binding == 1)) {
						return;
					}
					if (status == 2) {
						this.binding = 0;
					} else
					if (status == 3) {
						this.binding = 1;
					}
				}
				if (status == 0 || status == 1) {
					if (status == this.available) {
						return;
					}
					this.available = status;
				}
				if (status == -1) {
					if (status == this.onAll) {
						return;
					} else {
						this.onAll = status;
						this.binding = -1;
						this.available = -1;
					}
				} else {
					this.onAll = 1;
				}
				this.loadend = false;
				this.page = 1;
				this.$set(this, 'orderList', []);
				this.getRentOrder();
			},
			/**
			 * 获取订单列表
			 */
			getRentOrder: function() {
				let that = this;
				if (that.loadend) return;
				if (that.loading) return;
				that.loading = true;
				that.loadTitle = that.$t(`加载更多`);
				postStoreCarCode({
						is_available: that.available,
						binding: that.binding,
						page: that.page,
						limit: that.limit,
						key: that.searchKey
					})
					.then(res => {
						let list = res.data || [];
						let loadend = list.length < that.limit;
						that.orderList = that.$util.SplitArray(list, that.orderList);
						that.$set(that, 'orderList', that.orderList);
						that.loadend = loadend;
						that.loading = false;
						that.loadTitle = loadend ? that.$t(`没有更多内容啦~`) : that.$t(`加载更多`);
						that.page = that.page + 1;
					})
					.catch(err => {
						that.loading = false;
						that.loadTitle = that.$t(`加载更多`);
					});
			},
		},
		onReachBottom: function() {
			this.getRentOrder();
		},
		// 滚动监听
		onPageScroll(e) {
			// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
			uni.$emit('scroll');
		},
	};
</script>

<style scoped lang="scss">
	.list {
		padding: 30rpx;
		padding-top: 206rpx;

		.item {
			position: relative;
			background-color: var(--view-theme-16);
			padding: 30rpx;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
			overflow: hidden;

			.title {
				font-weight: bold;
				font-size: $uni-font-size-lg;
				color: #fff;
				padding-left: 10rpx;
			}

			.machine {
				font-size: $uni-font-size-sm;
				color: #999999;
				margin-top: 20rpx;

				.code {
					color: var(--view-priceColor);
					background-color: rgba(#75EFFA, 0.2);
					padding: 5rpx 10rpx;
					border-radius: 10rpx;
				}
			}

			.img {
				width: 40rpx;
				height: 40rpx;
			}

			.tip {
				position: absolute;
				top: 0;
				right: 0;
				padding: 5rpx 20rpx;
				font-size: 20rpx;
				border-bottom-left-radius: 10rpx;

				&.text_greed {
					color: #49D8A8;
					background-color: rgba(#49D8A8, 0.2);
				}

				&.text_red {
					color: rgba(254, 92, 45, 1);
					background-color: rgba(rgba(254, 92, 45, 1), 0.2);
				}

				&.text_blue {
					color: #1db0fc;
					background-color: rgba(#1db0fc, 0.2);
				}
			}
		}
	}

	.my-order {
		background-color: var(--view-theme);
		min-height: 100vh;

		.search {
			position: fixed;
			top: 80rpx;
			left: 0rpx;
			z-index: 999;
			padding-top: 30rpx;
			padding-bottom: 30rpx;
			padding-left: 30rpx;
			background-color: var(--view-theme);
			.bnt {
				width: 120rpx;
				text-align: center;
				height: 66rpx;
				line-height: 66rpx;
				font-size: 30rpx;
				color: #FFFFFF;
			}

			.input {
				width: 598rpx;
				background-color: #f7f7f7;
				border-radius: 33rpx;
				padding: 0 35rpx;
				box-sizing: border-box;
				height: 66rpx;

				input {
					width: 472rpx;
					font-size: 28rpx;
				}

				.placeholder {
					color: #999;
				}

				.iconfont {
					color: #555;
					font-size: 35rpx;
				}
			}
		}

		.header {
			height: 260rpx;
			padding: 0 30rpx;

			.picTxt {
				height: 190rpx;

				.text {
					color: rgba(255, 255, 255, 0.8);
					font-size: 26rpx;
					font-family: 'Guildford Pro';

					.name {
						font-size: 34rpx;
						font-weight: bold;
						color: #fff;
						margin-bottom: 20rpx;
					}

				}

				.pictrue {
					width: 122rpx;
					height: 109rpx;

					image {
						width: 100%;
						height: 100%;
					}

				}
			}
		}

		.nav {
			background-color: var(--view-theme-16);
			width: 690rpx;
			height: 90rpx;
			border-radius: 6rpx;
			margin: 0 auto 0 auto;
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 9999;

			.item {
				text-align: center;
				font-size: 26rpx;
				color: #fff;
				width: 3rem;
				padding: 27rpx 0;
				border-bottom: 5rpx solid transparent;

				&.on {
					/* #ifdef H5 || MP */
					font-weight: bold;
					/* #endif */
					/* #ifdef APP-PLUS */
					color: #000;
					/* #endif */
					border-color: var(--view-priceColor);
				}
			}
		}

	}

	.noCart {
		margin-top: 171rpx;
		padding-top: 0.1rpx;

		.pictrue {
			width: 414rpx;
			height: 336rpx;
			margin: 78rpx auto 56rpx auto;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>