ddcWechat/pages/rent/mycar/index.vue

<template>
	<view class="listbox" :style="colorStyle">
		<view class="item" v-for="(item,ind) in list">
			<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>
			<view v-if="item.status==0" class="text_red tip ">
				关锁
			</view>
			<view v-if="item.status==1" class="text_blue tip">
				开锁
			</view>
			<view v-if="item.status==2" class="text_greed tip">
				解锁
			</view>
		</view>
		<view class="loadingicon acea-row row-center-wrapper font-color-white" v-if="list.length > 0">
			<text class="loading iconfont icon-jiazai " :hidden="loading == false"></text>
			{{ loadTitle }}
		</view>
		<view v-if="list.length == 0">
			<emptyPage v-if="!loading" :title="$t(`暂无车辆`)"></emptyPage>
			<view class="loadingicon acea-row row-center-wrapper">
				<text class="loading iconfont icon-jiazai" :hidden="loading == false"></text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		getMyCar,
	} from '@/api/rent.js';
	import {
		mapGetters
	} from "vuex";
	import colors from '@/mixins/color.js';
	import emptyPage from '@/components/emptyPage.vue';
	export default {
		mixins: [colors],
		components: {
			emptyPage,
		},
		data() {
			return {
				loading: false, //是否加载中
				loadend: false, //是否加载完毕
				loadTitle: this.$t(`加载更多`), //提示语
				list: [],
				page: 1,
				limit: 20,
			};
		},
		computed: mapGetters(['isLogin']),
		watch: {
			isLogin: {
				handler: function(newV, oldV) {
					if (newV) {
						this.getList();
					}
				},
				deep: true
			}
		},
		onLoad(options) {
			this.id = options.id
			if (this.isLogin) {
				this.getList();
			} else {
				toLogin();
			}
		},
		methods: {
			getList: function() {
				let that = this;
				if (that.loadend) return;
				if (that.loading) return;
				that.loading = true;
				that.loadTitle = that.$t(`加载更多`);
				getMyCar({
						page: that.page,
						limit: that.limit
					})
					.then(res => {
						let list = res.data || [];
						let loadend = list.length < that.limit;
						that.list = that.$util.SplitArray(list, that.list);
						that.$set(that, 'list', that.list);
						that.loadend = loadend;
						that.loading = false;
						that.loadTitle = loadend ? that.$t(`没有更多内容啦~`) : that.$t(`加载更多`);
						that.page = that.page + 1;
						console.log(that.list);
					})
					.catch(err => {
						that.loading = false;
						that.loadTitle = that.$t(`加载更多`);
					});
			},
		},
		onReachBottom: function() {
			this.getList();
		},
		// 滚动监听
		onPageScroll(e) {
			// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
			uni.$emit('scroll');
		},
	}
</script>

<style scoped lang="scss">
	.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);
			}
		}
	}

	.listbox {
		padding: 30rpx;
		min-height: 100vh;
		background-color: var(--view-theme);
	}
</style>