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.car }}</view>
				<view class="text-black text-bold ">车牌号：{{ item.code }}</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: [
					{
						name: '姓名',
						tel: '电话',
						car: '车型',
						code: '车牌号'
					},
					{
						name: '姓名',
						tel: '电话',
						car: '车型',
						code: '车牌号'
					}
				]
			}
		};
	},
	onLoad() {},
	methods: {
		// 换绑
		onClick(item){
			Dialog.confirm({title:"提示",message:"确定换绑该设备？"}).then(()=>console.log(item)).catch(()=>false)
		},
		// 添加设备
		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>