humitureApp/pages/device/device.vue

<template>
	<view @touchstart="refreshStart" @touchmove="refreshMove" @touchend="refreshEnd">
		<refresh ref="refresh" @isRefresh='isRefresh'></refresh>
		
		<mSearch :mode="2" button="inside" @search="search($event)" backgroundColor="#0081ff"></mSearch>
		<nav-tab style="margin-top: -10upx;" textFlex :tab-list="tabList" :tabCur="tabCur" @change="tabChange" tab-class="text-center text-white bg-blue " select-class="text-white"></nav-tab>
		
		<view class="cu-list menu-avatar margin-top">
			<view class="cu-item arrow">
				<view class="cu-avatar round lg" style="background-image:url(/static/humiture.png);"></view>
				<view class="content padding-tb-sm">
					<view>
						<text class="text-xl margin-left-xs">设备1</text> 
					</view>
					<view class="flex">
						<text class="flex-sub iconfont icon-wendu text-blue text-xs margin-left-xs">10&#8451;</text>
						<text class="flex-sub iconfont icon-shidu text-blue text-xs ">12%</text>
					</view>
				</view>
				<view class="action">
					<view class="text-grey text-xs">2019-08-01 22:20:09</view>
				</view>
			</view>
		</view>
		
		<view class="content">
			<uni-list v-for="(item,index) in deviceList" :key="index">
				<uni-list-item
					:title="item.deviceNickName"
					:note="item.deviceName"
					show-extra-icon
					:extra-icon="getExtraIcon(item.deviceStatus)"
					@click="handleClickItem(item)"
				></uni-list-item>
			</uni-list>
		</view>

		<uni-fab :pattern="pattern" :content="content" horizontal="right" vertical="bottom" direction="vertical" @trigger="trigger"></uni-fab>
	</view>
</template>

<script>
import refresh from '@/components/refresh/refresh.vue';
import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
import mSearch from '@/components/mehaotian-search/mehaotian-search.vue';
import navTab from '@/components/wuc-tab/wuc-tab.vue';
import uniList from '@/components/uni-list/uni-list.vue';
import uniListItem from '@/components/uni-list-item/uni-list-item.vue';
import uniFab from '@/components/uni-fab/uni-fab.vue';
import { getDeviceList } from '@/api/device.js'; 
export default {
	components: {
		refresh,
		uniNavBar,
		mSearch,
		navTab,
		uniList,
		uniListItem,
		uniFab
	},
	data() {
		return {
			tabCur: 0,
			tabList: [{ name: '网关' }, { name: '终端' }],
			deviceList: [],
			pattern: {
                color: '#7A7E83',
                backgroundColor: '#fff',
                selectedColor: '#007AFF',
                buttonColor:"#007AFF"
            },
			content: [
                {
                    iconPath: '/static/gateway.png',
                    selectedIconPath: '/static/gateway.png',
                    text: '添加网关',
                    active: false
                },
                {
                    iconPath: '/static/dtu.png',
                    selectedIconPath: '/static/dtu.png',
                    text: '添加终端',
                    active: false
                }
            ]
		};
	},
	onLoad(e){
		if(e.data !== undefined){
			this.tabChange(e.data);
		}else{
			this.fetchDeviceList();
		}
	
	},
	methods: {
		getExtraIcon(active){
			let color = '#e6e6e6';
			if(active === 1){
				color = '#4cd964';
			}
			return { color: color, size: '22', type: 'circle-filled'}
		},
		fetchDeviceList(){
			getDeviceList().then(response => {
				this.deviceList = []
				if(response.data.list && response.data.list.length > 0){
					response.data.list.forEach(item => {
						if(this.tabCur === 0 && item.isGateway === 1){
							this.deviceList.push(item)
						}else if(this.tabCur === 1 && item.isGateway === 0){
							
							this.deviceList.push(item)
						}
					})
				}
			})
		},
		refreshStart(e) {
			this.$refs.refresh.refreshStart(e);
		},
		refreshMove(e){
			this.$refs.refresh.refreshMove(e);
		},
		refreshEnd(e) {
			this.$refs.refresh.refreshEnd(e);
		},
		isRefresh(){
			setTimeout(() => {
				this.fetchDeviceList()
				uni.showToast({
				icon: 'success',
				title: '刷新成功'
				})
				this.$refs.refresh.endAfter() //刷新结束调用
			}, 1000)
		},
		search(val) {
			let tempList = [];
			this.deviceList.forEach((item) => {
				if(item.id.indexOf(val) !== -1){
					tempList.push(item);
				}
			})
			this.deviceList = tempList;
		},
		tabChange(index) {
			this.tabCur = index;
			this.fetchDeviceList()
		},
		handleClickItem(item){
			uni.navigateTo({
				url: `detail/index?productId=${item.productId}&deviceName=${item.deviceName}`
			})
		},
		trigger(e) {
            console.log(e);
            this.content[e.index].active = !e.item.active;
            uni.showModal({
                title: '提示',
                content: `您${this.content[e.index].active?'选中了':'取消了'}${e.item.text}`,
                success: function(res) {
                    if (res.confirm) {
                        console.log('用户点击确定');
                    } else if (res.cancel) {
                        console.log('用户点击取消');
                    }
                }
            });
        }
	}
};
</script>

<style>
	.content {
		margin-top: 10upx;
		width: 100%;
	}
</style>