baozhida-logistics-app/components/x-bluetooth.vue

<template>
	<view>
		<view class="card_item_tooth" v-for="(item,index) in list" :key="index">
			<view class="card_wifi">
				<u-icon name="wifi" color="#2979ff" size="26"></u-icon>
				<view class="wifi_item_title">{{item.name}}</view>
			</view>
			<view style="display: flex;align-items: center;">
				<u-button style="margin-right: 10px;" size="small" type="warning" text="重连"
					@click="reconnection(item)" v-if="reconnectionFlag"></u-button>
				<u-button size="small" :type="btnType" :text="text" @click="connect(item)"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'x-bluetooth',
		props: {
			list: {
				type: Array,
				default () {
					return []
				}
			},
			text: {
				type: String,
				default () {
					return '连接'
				}
			},
			btnType: {
				type: String,
				default () {
					return 'primary'
				}
			},
			// 重新连接显示
			reconnectionFlag: {
				type: Boolean,
				default () {
					return false
				}
			}
		},
		data() {
			return {}
		},
		mounted() {},
		methods: {
			connect(value) {
				this.$emit('connect', value)
			},
			reconnection(event) {
				this.$emit('reconnection',event)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.card_item_tooth {
		padding: 20rpx 0rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.card_wifi {
		display: flex;
		align-items: center;
	}

	.wifi_item_title {
		font-size: 28rpx;
		margin-left: 16rpx;
	}
</style>