ddcWechat/pages/rent/control/authList.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.car.machine_name}}
				</view>
			</view>
			<view class="machine ">
				<view class="acea-row row-between">
					<view class="it">
						当前位置：{{item.car.address?item.car.address:'未定位'}}
					</view>
					<view class="status">
						电量：{{item.car.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.car.machine_no}}

					</view>
				</view>
				<view class="acea-row row-rightss" v-if="item.plate_number">
					<view class="it">
						车牌号：
					</view>
					<view class="code">
						{{item.car.plate_number}}
					</view>
				</view>
			</view>
			<view class="machine acea-row row-between-wrapper" v-if="item.touser">
				<view class="acea-row row-left">
					<view class="it">
						姓名：
					</view>
					<view>
						{{item.touser.nickname}}
					</view>
				</view>
				<view class="acea-row row-left">
					<view class="it">
						电话：
					</view>
					<view>
						{{item.touser.phone}}
					</view>
				</view>
				<view class="acea-row row-left">
					<view class="it">
						备注：
					</view>
					<view>
						{{item.nickname}}
					</view>
				</view>
			</view>
			<view class="machine acea-row row-between-wrapper">
				<view class="acea-row row-right shrink-no">
					<view class="it">
						到期：
					</view>
					<view>
						{{item.end_time}}
					</view>
				</view>
				<view @click="outAuth(item.id,ind)" class="acea-row row-right shrink-no">
					<view class="btn">
						撤销授权
					</view>
				</view>
			</view>
			<view v-if="item.car.status==0" class="text_red tip ">
				关锁
			</view>
			<view v-if="item.car.status==1" class="text_blue tip">
				开锁
			</view>
			<view v-if="item.car.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 font-color-white" :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 font-color-white" :hidden="loading == false"></text>
			</view>
		</view>
		<navigator :url="`./auth?id=`+id">
			<button class='modifyBnt acea-row row-middle row-center'>
				<text>
					{{$t(`新增授权`)}}
				</text>
			</button>
		</navigator>
	</view>
</template>

<script>
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		getOneinfo,
		deleteCarAuth
	} 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,
				id: '',
			};
		},
		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: {
			// 撤销授权
			outAuth(id, ind) {
				const that = this;
				uni.showLoading({
					title: '申请撤销授权中',
					mask: true
				});
				deleteCarAuth({
					id
				}).then((res) => {
					uni.hideLoading()
					uni.showToast({
						title: '撤销授权成功'
					});
					that.list.splice(ind, 1)
				}).catch((res) => {
					uni.hideLoading()
				})
			},
			// 授权列表
			getList: function() {
				let that = this;
				if (that.loadend) return;
				if (that.loading) return;
				that.loading = true;
				that.loadTitle = that.$t(`加载更多`);
				getOneinfo({
						id: that.id,
						type: 'auth',
						page: that.page,
						limit: that.limit
					})
					.then(res => {
						let list = res.data.list || [];
						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;
			}

			.shrink-no {
				flex-shrink: 0;
			}

			.btn {
				color: #FFF;
				background-color: $uni-color-primary;
				line-height: 1;
				padding: 10rpx 20rpx;
				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);
		padding-bottom: 150rpx;
	}

	.modifyBnt {
		position: fixed;
		bottom: 30rpx;
		left: 30rpx;
		// border: 2px solid #FFF;
		font-size: 32rpx;
		color: #fff;
		width: 690rpx;
		height: 90rpx;
		border-radius: 50rpx;
		text-align: center;
		background-color: var(--view-bntColor);
	}
</style>