AiToyCXWx/components/deviceBox/index.vue

<template>
	<div class="l_box box">
		<div class="l_top adfacjb">
			<!-- <div class="lt_l">{{item.alias||item.board||''}}</div> -->
			<div class="lt_l">{{ item.id || '' }}</div>
			<div class="lt_r adfac">
				<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/06/03/8a203ba4-2e9e-4379-89ec-dc7fc9caa3d4.png" v-if="item.state === 1"></image>
				<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/06/03/5ed3a1fc-9a05-4f13-8449-fd3183b00355.png" v-else-if="item.state === 0"></image>
				<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/06/03/c6d13477-ae1d-4f52-b835-3411a57fc4d7.png" v-if="item.state === 1"></image>
				<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/06/03/e26bd236-46db-4283-a1f7-9dd3b4f8ef33.png" v-else-if="item.state === 0"></image>
				<div class="ltr_zt" :class="{ zx: item.state === 1, lx: item.state === 0 }">{{ item.state === 1 ? '在线' : '离线' }}</div>
			</div>
		</div>
		<div class="l_content">
			<div class="lc_role adfac">
				<image class="lcr_l" :src="item.agent.avatar || 'https://transcend.ringzle.com/xiaozhi-app/profile/2025/06/03/b755d53e-c307-4a59-ac2a-2690c326f980.png'"></image>
				<div class="lcr_r">
					<p>{{ item.agent.agentName || '' }}</p>
					<div class="text">角色模板：{{ item.roleModelName || '' }}</div>
					<div class="text">绑定时间：{{ item.createDate || '' }}</div>
				</div>
			</div>
			<div class="lc_info" v-if="showInfo">
				<u--text :lines="3" :text="item.agent.systemPrompt || ''" size="24rpx" color="#7C8592" lineHeight="40rpx"></u--text>
			</div>
			<div class="lc_btns adfac">
				<!-- <div class="lcb_pre" @tap="editRole(item)">角色编辑</div> -->
				<div class="lcb_pre" @tap="dislogRecord(item)">对话记录</div>
				<div class="lcb_pre" @tap="changeWifi(item)">配置网络</div>
				<div class="lcb_pre" @tap="unbindDevice(item)">解绑设备</div>
			</div>
		</div>
	</div>
</template>

<script>
var xBlufi = require('@/utils/blufi/xBlufi.js');
export default {
	props: {
		item: {
			typeof: Object
		},
		showInfo: {
			typeof: Boolean,
			default: false
		}
	},
	data() {
		return {
			isBluetoothOpen: false,
			connectedId: '',
		};
	},
	methods: {
		dislogRecord(item) {
			uni.navigateTo({
				url: `/pagesHome/dialogRecord?agentId=${item.agentId}&deviceId=${item.id}`
			});
		},
		editRole(item) {
			this.$emit('editRole');
			uni.navigateTo({
				url: `/pagesRole/addRole?agentId=${item.agentId}&deviceId=${item.id}`
			});
		},
		changeWifi(item) {
			uni.navigateTo({
				url: '/pagesMy/wifiSearch'
			});
		},
		unbindDevice(item) {
			uni.showModal({
				title: '温馨提示',
				content: '确定要解绑该设备吗？',
				success: (res) => {
					if (res.confirm) {
						this.$api
							.post('/device/unbind', {
								deviceId: item.id
							})
							.then(async (res) => {
								if (res.data.code !== 0) return this.$showToast(res.data.msg);
								this.$showToast('解绑成功');
								xBlufi.notifyConnectBle({
									isStart: false,
									deviceId: item.id,
								});
								xBlufi.listenDeviceMsgEvent(false, this.funListenDeviceMsgEvent);
								this.connectedId = item.id;
								console.log(this.connectedId, 'this.connectedId');
								const ready = await this.ensureBtReady();
								console.log(ready, 'ready');
								if (!ready) return;
								await this.closeBluetooth();

								setTimeout(() => {
									this.$emit('unbindSuccess');
								}, 1000);
							});
					}
				}
			});
		},
		ensureBtReady() {
			return new Promise((resolve) => {
				uni.openBluetoothAdapter({
					success: () => {
						this.isBluetoothOpen = true;
						resolve(true);
					},
					fail: (err) => {
						// 已初始化时不算错误
						if (err.errMsg && err.errMsg.includes('already opened')) {
							this.isBluetoothOpen = true;
							resolve(true);
							return;
						}
						if (err.errMsg && err.errMsg.includes('fail')) {
							this.$showModal('请先到系统设置中打开蓝牙');
						}
						resolve(false);
					}
				});
			});
		},
		closeBluetooth() {
			// 2.1 断开设备
			if (this.connectedId) {
				uni.closeBLEConnection({
					deviceId: this.connectedId,
					success: () => {
						console.log('断开连接成功');
					},
					fail: () => {
						/* 已断开或其它异常不用提示 */
					}
				});
				this.connectedId = '';
			}

			// 2.2 关闭适配器
			if (this.isBluetoothOpen) {
				uni.closeBluetoothAdapter({
					success: () => {
						console.log('关闭蓝牙适配器成功');
					},
					fail: () => {
						/* 同样可吞掉 */
					}
				});
				this.isBluetoothOpen = false;
			}
		},
		funListenDeviceMsgEvent: function (options) {
			let that = this;
			switch (options.type) {
				case xBlufi.XBLUFI_TYPE.TYPE_STATUS_CONNECTED:
					that.connected = options.result;
					if (!options.result) {
						console.log(options, 'options:关闭蓝牙');
					}
					break;
			}
		}
	}
};
</script>

<style scoped lang="less">
.box {
	position: relative;
	width: calc(100% - 60rpx);
	background: #ffffff;
	box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0, 0, 0, 0.04);
	border-radius: 32rpx;
	border: 1rpx solid #d9f159;
	box-sizing: border-box;
}

.l_box {
	width: 100%;
	padding: 49rpx 30rpx 40rpx;
	margin-top: 20rpx;

	.l_top {
		.lt_l {
			font-family: PingFang-SC, PingFang-SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #111111;
			line-height: 40rpx;
		}

		.lt_r {
			image {
				width: 42rpx;
				height: 42rpx;
				margin-right: 34rpx;
			}

			.ltr_zt {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				line-height: 37rpx;
				padding-left: 22rpx;
				position: relative;

				&::before {
					content: '';
					width: 12rpx;
					height: 12rpx;
					border-radius: 50%;
					position: absolute;
					left: 0;
					top: 50%;
					margin-top: -6rpx;
				}

				&.zx {
					color: #1b50ff;

					&::before {
						background: #1b50ff;
					}
				}

				&.lx {
					color: #c7c7c7;

					&::before {
						background: #c7c7c7;
					}
				}
			}
		}
	}

	.l_content {
		border-top: 1rpx solid #e2e2e2;
		margin-top: 37rpx;
		padding-top: 36rpx;
		overflow: hidden;

		.lc_role {
			.lcr_l {
				width: 148rpx;
				height: 148rpx;
				border-radius: 50%;
			}

			.lcr_r {
				width: calc(100% - 148rpx);
				padding-left: 30rpx;
				box-sizing: border-box;

				p {
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 32rpx;
					color: #111111;
					line-height: 32rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				.text {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #7c8592;
					line-height: 24rpx;
					margin-top: 24rpx;
				}
			}
		}

		.lc_info {
			margin-top: 36rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #7c8592;
			line-height: 40rpx;
		}

		.lc_btns {
			margin-top: 62rpx;
			margin-left: -1rpx;
			overflow: hidden;

			.lcb_pre {
				width: calc(100% / 3);
				height: 37rpx;
				border-left: 1rpx solid #72832b;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 26rpx;
				color: #72832b;
				line-height: 37rpx;
				text-align: center;
			}
		}
	}
}
</style>