<template>
	<view class="network-status" v-if="!isConnected">
		<view class="network-tip">
			<text>当前无网络连接</text>
		</view>
	</view>
</template>

<script>
export default {
	name: 'network-status',
	data() {
		return {
			isConnected: true
		}
	},
	created() {
		// 监听网络状态变化
		uni.onNetworkStatusChange((res) => {
			this.isConnected = res.isConnected
		})
		// 初始检查网络状态
		this.checkNetwork()
	},
	methods: {
		checkNetwork() {
			uni.getNetworkType({
				success: (res) => {
					this.isConnected = res.networkType !== 'none'
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.network-status {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 9999;
	
	.network-tip {
		background-color: #ff4d4f;
		color: #fff;
		text-align: center;
		padding: 10rpx 0;
		font-size: 28rpx;
	}
}
</style> 