321 lines
7.8 KiB
Vue
321 lines
7.8 KiB
Vue
<template>
|
||
<view class="container">
|
||
<view class="header">
|
||
<text class="title">公共方法使用示例</text>
|
||
</view>
|
||
|
||
<view class="content">
|
||
<!-- 日期处理示例 -->
|
||
<view class="section">
|
||
<text class="section-title">日期处理</text>
|
||
<view class="example-item">
|
||
<text class="label">当前日期：</text>
|
||
<text class="value">{{ currentDate }}</text>
|
||
</view>
|
||
<view class="example-item">
|
||
<text class="label">格式化日期：</text>
|
||
<text class="value">{{ formattedDate }}</text>
|
||
</view>
|
||
<view class="example-item">
|
||
<text class="label">相对时间：</text>
|
||
<text class="value">{{ relativeDate }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 数字处理示例 -->
|
||
<view class="section">
|
||
<text class="section-title">数字处理</text>
|
||
<view class="example-item">
|
||
<text class="label">千分位格式化：</text>
|
||
<text class="value">{{ formattedNumber }}</text>
|
||
</view>
|
||
<view class="example-item">
|
||
<text class="label">金额格式化：</text>
|
||
<text class="value">{{ formattedMoney }}</text>
|
||
</view>
|
||
<view class="example-item">
|
||
<text class="label">随机数：</text>
|
||
<text class="value">{{ randomNumber }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 字符串处理示例 -->
|
||
<view class="section">
|
||
<text class="section-title">字符串处理</text>
|
||
<view class="example-item">
|
||
<text class="label">UUID：</text>
|
||
<text class="value">{{ uuid }}</text>
|
||
</view>
|
||
<view class="example-item">
|
||
<text class="label">手机号脱敏：</text>
|
||
<text class="value">{{ maskedPhone }}</text>
|
||
</view>
|
||
<view class="example-item">
|
||
<text class="label">字符串截断：</text>
|
||
<text class="value">{{ truncatedString }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- UI工具示例 -->
|
||
<view class="section">
|
||
<text class="section-title">UI工具</text>
|
||
<view class="button-group">
|
||
<button class="button success" @click="showSuccess">成功提示</button>
|
||
<button class="button error" @click="showError">错误提示</button>
|
||
<button class="button loading" @click="showLoading">加载提示</button>
|
||
<button class="button confirm" @click="showConfirm">确认对话框</button>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 设备信息示例 -->
|
||
<view class="section">
|
||
<text class="section-title">设备信息</text>
|
||
<view class="example-item">
|
||
<text class="label">状态栏高度：</text>
|
||
<text class="value">{{ statusBarHeight }}</text>
|
||
</view>
|
||
<view class="example-item">
|
||
<text class="label">设备平台：</text>
|
||
<text class="value">{{ devicePlatform }}</text>
|
||
</view>
|
||
<view class="example-item">
|
||
<text class="label">网络状态：</text>
|
||
<text class="value">{{ networkStatus }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 屏幕尺寸示例 -->
|
||
<view class="section">
|
||
<text class="section-title">屏幕尺寸</text>
|
||
<view class="example-item">
|
||
<text class="label">屏幕宽度：</text>
|
||
<text class="value">{{ screenWidth }}</text>
|
||
</view>
|
||
<view class="example-item">
|
||
<text class="label">屏幕高度：</text>
|
||
<text class="value">{{ screenHeight }}</text>
|
||
</view>
|
||
<view class="example-item">
|
||
<text class="label">窗口宽度：</text>
|
||
<text class="value">{{ windowWidth }}</text>
|
||
</view>
|
||
<view class="example-item">
|
||
<text class="label">窗口高度：</text>
|
||
<text class="value">{{ windowHeight }}</text>
|
||
</view>
|
||
<view class="button-group">
|
||
<button class="button loading" @click="loadScreenSize">获取屏幕尺寸</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted } from 'vue';
|
||
import { dateUtil, numberUtil, stringUtil, deviceUtil, networkUtil, uiUtil } from '@/utils/common';
|
||
|
||
// 日期处理示例数据
|
||
const currentDate = ref('');
|
||
const formattedDate = ref('');
|
||
const relativeDate = ref('');
|
||
|
||
// 数字处理示例数据
|
||
const formattedNumber = ref('');
|
||
const formattedMoney = ref('');
|
||
const randomNumber = ref(0);
|
||
|
||
// 字符串处理示例数据
|
||
const uuid = ref('');
|
||
const maskedPhone = ref('');
|
||
const truncatedString = ref('');
|
||
|
||
// 设备信息示例数据
|
||
const statusBarHeight = ref(0);
|
||
const devicePlatform = ref('');
|
||
const networkStatus = ref('');
|
||
|
||
// 屏幕尺寸示例数据
|
||
const screenWidth = ref(0);
|
||
const screenHeight = ref(0);
|
||
const windowWidth = ref(0);
|
||
const windowHeight = ref(0);
|
||
|
||
// 页面加载时初始化示例数据
|
||
onMounted(async () => {
|
||
// 日期处理示例
|
||
currentDate.value = dateUtil.now();
|
||
const testDate = new Date('2025-12-25 10:30:00');
|
||
formattedDate.value = dateUtil.format(testDate, 'YYYY年MM月DD日 HH时mm分ss秒');
|
||
relativeDate.value = dateUtil.relative(testDate);
|
||
|
||
// 数字处理示例
|
||
formattedNumber.value = numberUtil.format(1234567.89);
|
||
formattedMoney.value = numberUtil.formatMoney(98765.4321);
|
||
randomNumber.value = numberUtil.random(1, 100);
|
||
|
||
// 字符串处理示例
|
||
uuid.value = stringUtil.uuid();
|
||
maskedPhone.value = stringUtil.maskPhone('13812345678');
|
||
truncatedString.value = stringUtil.truncate('这是一个很长的字符串，用于测试字符串截断功能', 20);
|
||
|
||
// 设备信息示例
|
||
await loadDeviceInfo();
|
||
|
||
// 网络状态示例
|
||
await loadNetworkStatus();
|
||
});
|
||
|
||
// 加载设备信息
|
||
async function loadDeviceInfo() {
|
||
try {
|
||
const systemInfo = await deviceUtil.getSystemInfo();
|
||
statusBarHeight.value = systemInfo.statusBarHeight || 0;
|
||
devicePlatform.value = systemInfo.platform || '未知';
|
||
} catch (error) {
|
||
console.error('获取设备信息失败:', error);
|
||
}
|
||
}
|
||
|
||
// 加载网络状态
|
||
async function loadNetworkStatus() {
|
||
try {
|
||
const isConnected = await networkUtil.isConnected();
|
||
networkStatus.value = isConnected ? '已连接' : '未连接';
|
||
} catch (error) {
|
||
console.error('获取网络状态失败:', error);
|
||
}
|
||
}
|
||
|
||
// UI工具示例方法
|
||
function showSuccess() {
|
||
uiUtil.showSuccess('操作成功');
|
||
}
|
||
|
||
function showError() {
|
||
uiUtil.showError('操作失败，请重试');
|
||
}
|
||
|
||
function showLoading() {
|
||
uiUtil.showLoading('加载中...');
|
||
// 模拟加载完成
|
||
setTimeout(() => {
|
||
uiUtil.hideLoading();
|
||
}, 2000);
|
||
}
|
||
|
||
function showConfirm() {
|
||
uiUtil.showConfirm('确认操作', '您确定要执行此操作吗？', () => {
|
||
uiUtil.showSuccess('确认成功');
|
||
}, () => {
|
||
uiUtil.showError('已取消操作');
|
||
});
|
||
}
|
||
|
||
// 屏幕尺寸示例方法
|
||
async function loadScreenSize() {
|
||
try {
|
||
const screenSize = await deviceUtil.getScreenSize();
|
||
screenWidth.value = screenSize.width;
|
||
screenHeight.value = screenSize.height;
|
||
windowWidth.value = screenSize.windowWidth;
|
||
windowHeight.value = screenSize.windowHeight;
|
||
} catch (error) {
|
||
console.error('获取屏幕尺寸失败:', error);
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less">
|
||
.container {
|
||
min-height: 100vh;
|
||
background-color: #f5f5f5;
|
||
padding-bottom: 20px;
|
||
}
|
||
|
||
.header {
|
||
padding: 20px;
|
||
background-color: #007aff;
|
||
text-align: center;
|
||
}
|
||
|
||
.title {
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
color: #fff;
|
||
}
|
||
|
||
.content {
|
||
padding: 15px;
|
||
}
|
||
|
||
.section {
|
||
background-color: #fff;
|
||
border-radius: 8px;
|
||
padding: 15px;
|
||
margin-bottom: 15px;
|
||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
margin-bottom: 15px;
|
||
color: #333;
|
||
}
|
||
|
||
.example-item {
|
||
margin-bottom: 10px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 8px 0;
|
||
}
|
||
|
||
.label {
|
||
font-size: 14px;
|
||
color: #666;
|
||
}
|
||
|
||
.value {
|
||
font-size: 14px;
|
||
color: #333;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.button-group {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
}
|
||
|
||
.button {
|
||
padding: 12px;
|
||
border-radius: 6px;
|
||
font-size: 16px;
|
||
color: #fff;
|
||
border: none;
|
||
cursor: pointer;
|
||
transition: opacity 0.2s;
|
||
|
||
&.success {
|
||
background-color: #4cd964;
|
||
}
|
||
|
||
&.error {
|
||
background-color: #ff3b30;
|
||
}
|
||
|
||
&.loading {
|
||
background-color: #007aff;
|
||
}
|
||
|
||
&.confirm {
|
||
background-color: #5856d6;
|
||
}
|
||
|
||
&:active {
|
||
opacity: 0.8;
|
||
}
|
||
}
|
||
</style> |