gate-mini-program/packagePage/pages/ctrllist/ctrllist.vue

<template>
	<view class="container">
		<view class="tui-searchbox">
			<view class="tui-search-input" @tap="search">
				<icon type="search" size='15' color='#999'></icon>
				<text class="tui-search-text">搜索</text>
			</view>
		</view>
		<tui-list-view>
			<block v-for="(item,index) in records" :key="item.id">
				<tui-list-cell :lineLeft="false">
					<view class="tui-item-box">
						<view class="tui-msg-box" @tap="showDetail(item.id)">
							<image :src="apiHost+'/miniapp/static/wsapp/nav2.png'" class="tui-msg-pic" mode="widthFix"></image>
							<view class="tui-msg-item">
								<view class="tui-msg-name">{{item.name}}</view>
								<view class="tui-msg-content">{{item.addr}}</view>
							</view>
						</view>
						<view class="tui-msg-right">
							<!-- <uni-tag :type="tagType" :text="tagName" style="border:none;padding:10rpx 20rpx;color:#000;"></uni-tag> -->
							<view class="tui-msg-time">{{item.last_time}}</view>
							<tui-button margin="20rpx 20rpx 26rpx 0" type="danger" plain shape="circle" width="120rpx" height="60rpx" :size="24" @click="detail(item.id)" v-if="role_id==2" style="display: block;">参数设定</tui-button>
							<tui-button margin="20rpx 20rpx 26rpx 0" type="danger" plain shape="circle" width="120rpx" height="60rpx" :size="24" @click="detail(item.id)" v-else style="display: none;">参数设定</tui-button>
							<!-- <tui-badge v-if="item.status=='安装中'" type="primary" class="tui-badge">{{item.status}}</tui-badge>
							<tui-badge v-else type="green" class="tui-badge">{{item.status}}</tui-badge> -->
						</view>
					</view>
				</tui-list-cell>
				<view style="height:20rpx"></view>
			</block>
		</tui-list-view>
	</view>
</template>

<script>
	import myapp from '@/common/js/myapp.js'
	export default {
		data() {
			return {
				apiHost: myapp.apiHost,
				showloadmore: false,
				shownomore: false,
				curId: 0,
				tagType: 'primary',
				tagName:'调控',
				records: [],
				currentTab: 0,
				role_id: ''
			}
		},
		onShow: function() {			
			let user = myapp.checkLogin()
			uni.setStorageSync('lastPagePath', '/packagePage/pages/ctrllist/ctrllist')		
			let info = uni.getStorageSync('user')
			this.role_id = info.role_id
			let that = this;
			// 场站基本信息
			myapp.request('/?c=overview&a=getTerminalDeviceInfoByToken',function(res) {
				that.records = res.data.data
			},{token:user.token})
		},
		methods: {
			showDetail: function(index) {
				uni.navigateTo({
					url:'/packagePage/pages/ctrldevice/ctrldevice?id=' + index
				})
			},
			detail: function(index){
				uni.navigateTo({
					url:'/packagePage/pages/config/config?id=' + index
				})
			}
		}
	}
</script>

<style>
	@import '../../../static/style/thorui.css';
	
	page {
		background-color: #F5F6FA;
	}	
	.tui-badge1 {
		font-size: 24rpx;
		line-height: 24rpx;
		height: 36rpx;
		min-width: 36rpx;
		padding: 0 10rpx;
		box-sizing: border-box;
		border-radius: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 10;
	}
	.textleft, .textright {
		color: #949494;
		font-size: 20rpx;
		margin-bottom: 20rpx;
	}
	.textleft {
		float:left;
	}
	.textright {
		float:right;
	}
	
	.textleftright {
		border-top:3px solid #F5F6FA;
	}
	
	.tui-default {
		padding: 30rpx 10rpx 40rpx 10rpx;
	}
	
	.tui-item-box {
		width: 100%;
		display: flex;
		align-items: center;
		padding-bottom: 20rpx;
		padding-top: 20rpx;
	}
	
	.tui-msg-box {
		display: flex;
		align-items: center;
	}
	
	.tui-msg-item {
		max-width: 500rpx;
		min-height: 80rpx;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	.tui-msg-pic {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		display: block;
		margin-right: 24rpx;
		flex-shrink: 0;
	}	
	
	.tui-msg-name {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 30rpx;
		line-height: 1;
		color: #262b3a;
	}

	.tui-msg-content {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 24rpx;
		line-height: 1;
		color: #9397a4;
	}
	
	.tui-msg-content1 {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 28rpx;
		font-weight: 600;
		line-height: 1;
		color: #00be00;
	}
	
	.tui-msg-right {
		max-width: 120rpx;
		height: 88rpx;
		margin-left: auto;
		text-align: right;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
		margin-right:30rpx;
	}
	
	.uni-tag--primary {
		background-color:#ADDEFF !important;
		border:none !important;
		color:#000 !important;
	}
	
	.uni-tag--success {
		background-color:#ADFFB5 !important;
		border:none !important;
		color:#000 !important;
	}
	
	.tui-msg-time {
		width: 100%;
		font-size: 20rpx;
		line-height: 24rpx;
		color: #9397a4;
	}
	
	.tui-searchbox {
		width: 100%;
		height: 100rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.tui-search-input {
		width: 100%;
		height: 72rpx;
		background: #fafafa;
		border-radius: 36rpx;
		font-size: 30rpx;
		color: #A8ABB8;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tui-search-text {
		padding-left: 16rpx;
	}
</style>