BiKing/pages/content/diagnose.vue

<template>
	<view>
		<headContent statusBarBg="#191A2E" bgColor="#191A2E">

			<template #left>
				<reverse-back iconColor="#fff" />
			</template>
			<template #content>
				<view class="haed-title">
					用户辅助诊断页面...
				</view>
			</template>
		</headContent>
		<view class="page-info" style="background-color: #191A2E;">
			<image class="info-logo" src="@/static/images/logo_01.png" mode="aspectFit"></image>
			<view class="info-name">
				App检测工具
			</view>
			<view class="info-text">
				*此页面仅用于定位您的浏览器和网络信息，不涉及您的隐私信息，请放心使用
			</view>
		</view>
		<view class="system-info">
			<view class="system-title">
				基础信息检测
			</view>
			<view class="system-item">
				<text class="item-lable">设备信息</text>
				<text class="item-val">{{ SystemInfo.ua }}</text>
			</view>
			<view class="system-item">
				<text class="item-lable">操作系统</text>
				<text class="item-val">{{ SystemInfo.system }}</text>
			</view>
			<view class="system-item">
				<text class="item-lable">当前语言</text>
				<text class="item-val">{{ SystemInfo.osLanguage || SystemInfo.language }}</text>
			</view>
			<view class="system-item">
				<text class="item-lable">使用浏览器</text>
				<text class="item-val">{{ SystemInfo.browserName }} 浏览器宽：{{ SystemInfo.windowWidth  * SystemInfo.devicePixelRatio }} 浏览器高：{{ SystemInfo.windowHeight * SystemInfo.devicePixelRatio }}</text>
			</view>
			<view class="system-item">
				<text class="item-lable">手机信息</text>
				<text class="item-val">手机型号：{{ SystemInfo.deviceBrand }} {{ SystemInfo.deviceModel }}</text>
				<text class="item-val">App版本号：{{ SystemInfo.appWgtVersion }}</text>
			</view>
			<view class="system-item">
				<text class="item-lable">用户ip</text>
				<text class="item-val">0.0.0.0</text>
			</view>
			<view class="system-item">
				<text class="item-lable">用户所在地</text>
				<text class="item-val">unknown</text>
			</view>
			<view class="system-item">
				<text class="item-lable">网络运营商</text>
				<text class="item-val">unknown</text>
			</view>
			<view class="system-item">
				<text class="item-lable">App API响应速度</text>
				<text class="item-val">app_t<text class="val"> 229ms·状态：(成功)·</text></text>
				<text class="item-val">app_a<text class="val"> 351ms·状态：(成功)·</text></text>
				<text class="item-val">app_c<text class="val"> 363ms·状态：(成功)·</text></text>
			</view>
			<view class="system-item">
				<text class="item-lable">App域名切换链路</text>
				<text class="item-val waring">如果当前链路访问速度较慢，可尝试手动切换链路</text>
				<view class="switch-btn">
					当前访问：链路2
				</view>
			</view>
		</view>
		

		
	</view>
</template>

<script>
	export default {
		name: 'diagnose',
		data() {
			return {
				SystemInfo:{}
			};
		},
		mounted() {
			uni.getSystemInfo({
				success: res => {
					this.SystemInfo = res
					console.log('设备信息 1 ， ', res)
				}
			});
		}
	}
</script>

<style lang="scss" scoped>
	$padding-lr: 40rpx;

	.haed-title {
		color: #fff !important;
	}

	.page-info {
		width: 100%;
		padding: 60rpx $padding-lr;

		.info-logo {
			width:  212rpx;
			height:66rpx;
		}

		.info-name {
			width: 200rpx;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			font-size: 24rpx;
			color: #fff;
			border-radius: 0 30rpx 0 30rpx;
			background-color: rgba(255, 255, 255, 0.2);
			margin: 30rpx 0 60rpx;
		}

		.info-text {
			color: rgba(255, 255, 255, 0.6);
			font-size: 22rpx;
		}
	}


	// <view class="system-info">
	// 	<view class="system-title">
	// 		基础信息检测
	// 	</view>
	// </view>
	.system-info {
		width: 100%;
		padding: 60rpx $padding-lr;

		.system-title {
			font-size: 38rpx;
			font-weight: bold;
			line-height: 1.3;
			padding-left: 7px;
			border-left: 3px solid $Theme-Color;
		}
		.system-item{
			padding-top: 60rpx;
			.item-lable{
				display: block;
				font-size: 26rpx;
				padding-bottom:20rpx;
			}
			.item-val{ 
				display: block;
				font-size: 20rpx;
				color: #939191;
			}
			.val{
				color: $Theme-Color;
			}
			.waring{
				color: red;
			}
			.switch-btn{
				margin-top: 28rpx;
				display: inline-block;
				padding: 30rpx 20rpx;
				font-size: 28rpx;
				color: #fff;
				border-radius: 8rpx;
				background-color: $Theme-Color;
			}
		}
		// <view class="system-item">
		// 	<text class="item-lable">设备信息</text>
		// 	<text class="item-val">zh</text>
		// </view>
		
		
		
	}
</style>