ProAdvanced/pages/personal-page/more/more.vue

<template>
	<view>
		<uni-nav-bar id="nav-bar" status-bar="true" @clickLeft="onBack()" title="我的设备" color="#000000" fixed="true" :border="false">
			<view slot="left">
				<view class=" flex align-center margin-left">
					<image class="p-left-arrow" src="../../../static/p-left-arrow.png"></image>
				</view>
			</view>

		</uni-nav-bar>
		<view class="card-view text-center">
			<view class="plan-w" style="margin-top: 34px;">
				<view class="plan-w-child">
					<image src="../../../static/moreBg.png"></image>
				</view>
			</view>
			<view class="plan-Tip flex justify-center align-center">
				<view class="plan-Tip-child make-text-bPurple flex align-center justify-between">
					<view class="flex" style="margin-left: 80rpx;">
						<image style="width:48rpx;height: 48rpx;" src="../../../static/wifi_on.png"></image>
						<view class="padding-left text-16px">在线设备</view>
					</view>
					<view class=" text-16px" style="margin-right: 80rpx;">{{cIndex==-1?0:1}} 台</view>
				</view>
			</view>
			<view class="button-fav" @tap="onNavToDevices">
				<image style="width: 72rpx;height: 72rpx; margin-right: 12rpx;" src="../../../static/add_w.png"></image>
				添加设备
			</view>
		</view>

		<!-- 添加设备部分 -->
		<view class="card-view">
			<view class="text-left padding margin-xs">
				<text class="text-black text-bold ">我的设备</text>
			</view>
			<!-- @tap="onDevice(item,$event)" -->
			<view class="container-device">
				<view class="width-device flex align-center " v-for="(item,index) in BLEDeviceList" :key="index" 
				 :data-index="index">

					<!-- 	<view style="position: relative; height: 100%;">
						<image src="/static/deviceBg.png" class="data-png-64" mode="aspectFit"></image>
						<image src="/static/trampolineS.png" class="data-png-add" mode="aspectFit"></image>
					</view>

					<view class="flex-sub text-center">
						<image src="/static/wifi_on.png" class="data-png-32" mode="aspectFit"></image>
						<view class="text-gray">{{item.cname}}</view>
					</view>

					<view style="position: absolute;right: 0;top: 0;" @tap.stop="onCloseDevice(item,$event)" :data-index="index">
						<image src="/static/d_on.png" class="data-png-26" mode="aspectFit"></image>
					</view> -->

					<view style="position: relative; height: 100%;">
						<image :src="index == cIndex ? '/static/deviceBg.png' : '/static/deviceBg_off.png'" class="data-png-64" mode="aspectFit"></image>
						<image src="/static/trampolineS.png" class="data-png-add" mode="aspectFit"></image>
					</view>

					<view class="flex-sub text-center">
						<image :src="index == cIndex ? '/static/wifi_on.png' : '/static/wifi_off.png'" class="data-png-32" mode="aspectFit"></image>
						<view class="text-gray">{{ item.cname }}</view>
					</view>
					<!-- @tap.stop="onCloseDevice(item, $event)" :data-index="index" -->
					<!-- <view style="position: absolute;right: 0;top: 0;" >
						<image :src="index == cIndex ? '/static/d_on.png' : '/static/d_off.png'" class="data-png-26" mode="aspectFit"></image>
					</view> -->

				</view>

			</view>


		</view>


	</view>

</template>

<script>
	import config from '../../../common/config.js'
	import date from '../../../util/util-js/date.js'
	import reqUtil from '../../../util/util-js/requstUtil.js'

	import picker from "@/components/slambb-picker/slambb-picker.vue";
	import pickerData from '@/components/slambb-picker/picker.js';
	import {
		mapState
	} from 'vuex'
	export default {
		computed: mapState(['planData', 'BLEDeviceList']),
		components: {
			picker,

		},
		data() {
			return {
				cIndex: -1
			}
		},
		onShow() {


		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			console.log(option);
			this.cIndex = option.index;
		},
		methods: {
			onNavToDevices() {
				uni.navigateTo({
					url: '../devices/devices?newsid=' + 11,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			onBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			onCloseDevice(item, e) {
				//如果不是连接状态，则删除
				if (e.currentTarget.dataset.index != this.cIndex) {
					uni.showModal({
						title: '设备状态',
						content: '是否删除设备',
						ConfirmColor: '#A488DC',
						success: res => {
							if (res.confirm) {
								// this.$store.state.BLEDeviceList.splice(e.currentTarget.dataset.index, 1)
								this.$store.commit('deleteBLEDevice', e.currentTarget.dataset.index);
							}
						}
					});
					return;
				}
				uni.showModal({
					title: '设备状态',
					content: '是否关闭设备绑定',
					/**
					 * 如果需要强制，不显示取消按钮
					 */
					showCancel: true,
					ConfirmColor: '#A488DC',
					success: res => {
						if (res.confirm) {
							// this.$store.state.BLEDeviceList.splice(e.currentTarget.dataset.index, 1)
							// this.$store.commit('deleteBLEDevice', e.currentTarget.dataset.index);
							BLE.closeBLEConnection(item.deviceId);
							if (this.cIndex == e.currentTarget.dataset.index) {
								this.cIndex = -1;
							}
						}
					}
				});
			}
		}
	}
</script>

<style>
	.plan-w {
		position: relative;
		/* width: 464rpx; */
		height: 464rpx;
	}


	.plan-w-child {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		width: 488rpx;
		height: 372rpx;

		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}



	.plan-Tip {
		height: 90rpx;
		/* margin: 60rpx 0; */
		margin-bottom: 60rpx;
	}

	.plan-Tip-child {
		background-color: #f5f5ff;
		border-radius: 20px;
		width: 614rpx;
		height: 90rpx;
		/* margin-top: 60rpx; */

	}

	.button-fav {
		background-color: rgba(153, 150, 252, 255);
		color: #FFFFFF;
		/* border-radius: 10px; */
		/* width: 184rpx; */
		height: 122rpx;
		display: flex;
		justify-content: center;
		text-align: center;
		align-items: center;
		font-size: 17px;
	}


	.data-png-add {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		width: 34px;
		height: 37px;
	}
</style>