car_net_wxapp/wx/pages/information/index.vue

<template>
	<view class="information">
		<!-- header -->
		<cu-custom bgColor="bg-gradual-blue" isBack><view slot="content">设备信息</view></cu-custom>
		<!-- section -->
		<view v-for="(item, index) in value.value" :key="index" class="bg-white  padding-top-sm radius margin-lr margin-top">
			<view class="padding-sm">
				<view class="padding-bottom-sm text-black text-bold ">{{ item.name }}：{{ item.tel }}</view>
				<view class="padding-bottom-sm text-black text-bold ">车型：{{ item.model }}</view>
				<view class="text-black text-bold ">车牌号：{{ item.number }}</view>
			</view>
			<button style="border-radius: 0 0 6rpx 6rpx;" @click="onClick(item)" class="cu-btn block bg-green  padding-tb-sm">换绑</button>
		</view>
		<van-empty v-if="value.value.length == 0 && value.no_more" description="暂无设备" />
		<view v-else :class="!value.no_more && value.pageCount <= value.totalPage ? 'cu-load bg-grey loading margin-top' : 'cu-load bg-grey over margin-top'"></view>
		<!-- footer -->
		<view class="footer">
			<view class="footer-concent cu-bar tabbar bg-white">
				<view class="action text-green"></view>
				<view class="action text-gray"></view>
				<view class="action text-gray add-action">
					<button @click="addClick" class="cu-btn cuIcon-add bg-green shadow"></button>
					添加
				</view>
				<view class="action text-gray"></view>
				<view class="action text-gray"></view>
			</view>
		</view>
		<!-- 功能工具 -->
		<van-dialog id="van-dialog" />
	</view>
</template>

<script>
import Dialog from '@/wxcomponents/vant/dist/dialog/dialog';
export default {
	data() {
		return {
			value: {
				no_more: false, //没有更多
				pageCount: 1,
				totalPage: 1,
				value: []
			}
		};
	},
	onShow() {
		this.value = {
			no_more: false, //没有更多
			pageCount: 1,
			totalPage: 1,
			value: []
		};
		this.request();
	},
	// 页面上拉触底事件
	onReachBottom: function() {
		this.request();
	},
	methods: {
		// 请求
		async request() {
			var { pageCount, totalPage, no_more, value } = JSON.parse(JSON.stringify(this.value));
			if (pageCount > totalPage) return false;
			var res = await this.$global.request({
				url: '/customer/vehicle/',
				method: 'get',
				header: {
					'Content-Type': 'application/x-www-form-urlencoded',
					Authorization: uni.getStorageSync('token')
				},
				data: { page: pageCount, limit: 20 }
			});
			pageCount++;
			totalPage = res.totalPage;
			if (pageCount > totalPage) no_more = true;
			value = value.concat(res.data);
			this.value = { pageCount, totalPage, no_more, value };
		},

		// 换绑
		onClick(item) {
			Dialog.confirm({ title: '提示', message: '确定换绑该设备？' })
				.then(() => this.vehicleChange(item))
				.catch(() => false);
		},
		// 换绑请求
		async vehicleChange(item) {
			uni.navigateTo({
				url: `/pages/binding/index?value=${JSON.stringify(item)}`
			});
		},
		// 添加设备
		addClick() {
			uni.navigateTo({
				url: '/pages/binding/index'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.information {
	.footer {
		height: calc(150rpx + env(safe-area-inset-bottom));
		.footer-concent {
			position: fixed;
			z-index: 9999;
			bottom: 0;
			left: 0;
			width: 100%;
		}
	}
}
</style>