326 lines
7.7 KiB
Vue
326 lines
7.7 KiB
Vue
<template>
|
||
<view>
|
||
<nav-bar title="关于本机" bgColor="#F2F1F6">
|
||
<template v-slot:left>
|
||
<image class="back-icon" src="/static/image/common/iphone-back.png" style="width: 86rpx;height: 86rpx;"
|
||
@click="back">
|
||
</image>
|
||
</template>
|
||
</nav-bar>
|
||
|
||
<view class="info-container">
|
||
<block v-for="(group, groupIndex) in listData" :key="groupIndex">
|
||
<!-- Group Header (Optional) -->
|
||
<view v-if="group.groupTitle" class="group-header">
|
||
<text class="header-text">{{ group.groupTitle }}</text>
|
||
</view>
|
||
|
||
<!-- Group Items -->
|
||
<view class="info-group">
|
||
<view class="info-item" v-for="(item, itemIndex) in group.items" :key="item.id"
|
||
:class="{ 'no-border': itemIndex === group.items.length - 1 }"
|
||
@click="handleEdit(groupIndex, itemIndex)">
|
||
<text class="item-label">{{ item.label }}</text>
|
||
<view class="item-value-box">
|
||
<text class="item-value" v-if="item.value !== undefined">{{ item.value }}</text>
|
||
<!-- <view class="chevron"></view> -->
|
||
<image class="chevron" v-if="item.hasArrow"
|
||
src="/static/image/common/about-iphone-right.png">
|
||
</image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
|
||
<!-- Custom Modal -->
|
||
<view class="custom-modal-mask" v-if="isModalVisible" @click="closeModal">
|
||
<view class="custom-modal" @click.stop>
|
||
<view class="modal-header">
|
||
<text class="modal-title">{{ modalTitle }}</text>
|
||
</view>
|
||
<view class="modal-body">
|
||
<input class="modal-input" v-model="modalInputValue" :placeholder="modalPlaceholder"
|
||
cursor-spacing="20" />
|
||
</view>
|
||
<view class="modal-footer">
|
||
<view class="modal-btn cancel-btn" @click="closeModal">取消</view>
|
||
<view class="modal-btn confirm-btn" @click="confirmModal">确定</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted } from 'vue';
|
||
import { util } from '@/utils/common.js'
|
||
|
||
const CACHE_KEY = 'about_iphone_data';
|
||
|
||
const defaultData = [
|
||
{
|
||
groupTitle: '',
|
||
items: [
|
||
{ id: 'name', label: '名称', value: '胡英俊的iPhone', hasArrow: true },
|
||
{ id: 'iosVersion', label: 'iOS版本', value: '26.4.2', hasArrow: true },
|
||
{ id: 'modelName', label: '型号名称', value: 'iPhone 17 Pro Max', hasArrow: false },
|
||
{ id: 'modelNumber', label: '型号', value: 'MG8W4CH/A', hasArrow: false },
|
||
{ id: 'serialNumber', label: '序列号', value: 'J5YQ2R5F8R', hasArrow: false }
|
||
]
|
||
},
|
||
{
|
||
groupTitle: '',
|
||
items: [
|
||
{ id: 'warranty', label: '有限保修', value: '到期日期：2026/12/13', hasArrow: true }
|
||
]
|
||
},
|
||
{
|
||
groupTitle: '',
|
||
items: [
|
||
{ id: 'songs', label: '歌曲', value: '0', hasArrow: false },
|
||
{ id: 'videos', label: '视频', value: '456', hasArrow: false },
|
||
{ id: 'photos', label: '照片', value: '6,568', hasArrow: false },
|
||
{ id: 'apps', label: '应用程序', value: '64', hasArrow: false },
|
||
{ id: 'capacity', label: '总容量', value: '2 TB', hasArrow: false },
|
||
{ id: 'available', label: '可用容量', value: '1.56 TB', hasArrow: false }
|
||
]
|
||
},
|
||
{
|
||
groupTitle: '',
|
||
items: [
|
||
{ id: 'wifi', label: '无线局域网地址', value: '87:5F:4D:48:DF:36', hasArrow: false },
|
||
{ id: 'bluetooth', label: '蓝牙', value: '87:5F:4D:2B:DF:68', hasArrow: false },
|
||
{ id: 'firmware', label: '调制解调器固件', value: '1.55.25', hasArrow: false },
|
||
{ id: 'seid', label: 'SEID', value: '', hasArrow: true },
|
||
{ id: 'carrierLock', label: '运营商锁', value: '无SIM卡限制', hasArrow: false }
|
||
]
|
||
},
|
||
{
|
||
groupTitle: '主号',
|
||
items: [
|
||
{ id: 'primaryNetwork', label: '网络', value: '中国移动全球通', hasArrow: false },
|
||
{ id: 'primaryCarrier', label: '运营商', value: '中国移动 69.0', hasArrow: false },
|
||
{ id: 'primaryIMEI', label: 'IMEI', value: '35 756481 6466451 3', hasArrow: false },
|
||
{ id: 'primaryICCID', label: 'ICCID', value: '45632144856512347896', hasArrow: false }
|
||
]
|
||
},
|
||
{
|
||
groupTitle: '个人',
|
||
items: [
|
||
{ id: 'personalNetwork', label: '网络', value: '中国电信', hasArrow: false },
|
||
{ id: 'personalCarrier', label: '运营商', value: '中国电信 69.0', hasArrow: false },
|
||
{ id: 'personalIMEI', label: 'IMEI', value: '35 756481 6466451 3', hasArrow: false },
|
||
{ id: 'personalICCID', label: 'ICCID', value: '45632144856512347896', hasArrow: false }
|
||
]
|
||
},
|
||
{
|
||
groupTitle: '',
|
||
items: [
|
||
{ id: 'trustSettings', label: '证书信任设置', value: '', hasArrow: true }
|
||
]
|
||
}
|
||
];
|
||
|
||
const listData = ref([]);
|
||
|
||
onMounted(() => {
|
||
const cached = uni.getStorageSync(CACHE_KEY);
|
||
if (cached) {
|
||
try {
|
||
listData.value = JSON.parse(cached);
|
||
} catch (e) {
|
||
listData.value = JSON.parse(JSON.stringify(defaultData));
|
||
}
|
||
} else {
|
||
listData.value = JSON.parse(JSON.stringify(defaultData));
|
||
}
|
||
});
|
||
|
||
const back = () => {
|
||
uni.navigateBack();
|
||
};
|
||
|
||
const isModalVisible = ref(false);
|
||
const modalTitle = ref('');
|
||
const modalPlaceholder = ref('');
|
||
const modalInputValue = ref('');
|
||
let currentEditGroupIndex = -1;
|
||
let currentEditItemIndex = -1;
|
||
|
||
const handleEdit = (groupIndex, itemIndex) => {
|
||
const item = listData.value[groupIndex].items[itemIndex];
|
||
|
||
currentEditGroupIndex = groupIndex;
|
||
currentEditItemIndex = itemIndex;
|
||
modalTitle.value = `修改${item.label}`;
|
||
modalPlaceholder.value = `请输入新的${item.label}`;
|
||
modalInputValue.value = item.value || '';
|
||
isModalVisible.value = true;
|
||
};
|
||
|
||
const closeModal = () => {
|
||
isModalVisible.value = false;
|
||
};
|
||
|
||
const confirmModal = () => {
|
||
if (currentEditGroupIndex !== -1 && currentEditItemIndex !== -1) {
|
||
listData.value[currentEditGroupIndex].items[currentEditItemIndex].value = modalInputValue.value;
|
||
uni.setStorageSync(CACHE_KEY, JSON.stringify(listData.value));
|
||
}
|
||
isModalVisible.value = false;
|
||
};
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
::v-deep .nav-box {
|
||
height: auto !important;
|
||
}
|
||
|
||
::v-deep .nav-bar-title {
|
||
font-size: 32rpx !important;
|
||
}
|
||
|
||
::v-deep .uni-navbar__header {
|
||
height: auto !important;
|
||
padding: 10rpx 26rpx;
|
||
}
|
||
|
||
.back-icon {
|
||
box-shadow: 0rpx 0rpx 20rpx 0rpx #E1E1E6;
|
||
border: 2rpx solid #FFFFFF;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.info-container {
|
||
padding: 30rpx;
|
||
padding-bottom: 60rpx;
|
||
}
|
||
|
||
.info-group {
|
||
background-color: #FFFFFF;
|
||
border-radius: 48rpx;
|
||
margin-bottom: 64rpx;
|
||
}
|
||
|
||
.info-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-left: 30rpx;
|
||
margin-right: 30rpx;
|
||
border-bottom: 0.5px solid #E4E4E4;
|
||
line-height: 32rpx;
|
||
height: 100rpx;
|
||
}
|
||
|
||
.info-item.no-border {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.item-label {
|
||
font-size: 32rpx;
|
||
color: #1A1A1A;
|
||
}
|
||
|
||
.item-value-box {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.item-value {
|
||
font-size: 32rpx;
|
||
color: #8A8A8A;
|
||
font-weight: 400;
|
||
}
|
||
|
||
.chevron {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
margin-left: 12rpx;
|
||
}
|
||
|
||
.group-header {
|
||
padding: 0 0 10rpx 30rpx;
|
||
}
|
||
|
||
.header-text {
|
||
font-size: 28rpx;
|
||
color: #8A8A8D;
|
||
}
|
||
|
||
.custom-modal-mask {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background-color: rgba(0, 0, 0, 0.4);
|
||
z-index: 999;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.custom-modal {
|
||
width: 600rpx;
|
||
background-color: #FFFFFF;
|
||
border-radius: 48rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.modal-header {
|
||
padding: 40rpx 30rpx 30rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.modal-title {
|
||
font-size: 34rpx;
|
||
color: #1A1A1A;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.modal-body {
|
||
padding: 0 40rpx 40rpx;
|
||
}
|
||
|
||
.modal-input {
|
||
background-color: #F2F1F6;
|
||
height: 80rpx;
|
||
border-radius: 20rpx;
|
||
padding: 0 20rpx;
|
||
font-size: 32rpx;
|
||
color: #1A1A1A;
|
||
}
|
||
|
||
.modal-footer {
|
||
display: flex;
|
||
border-top: 0.5px solid #E4E4E4;
|
||
height: 100rpx;
|
||
}
|
||
|
||
.modal-btn {
|
||
flex: 1;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 32rpx;
|
||
}
|
||
|
||
.cancel-btn {
|
||
color: #8A8A8A;
|
||
border-right: 0.5px solid #E4E4E4;
|
||
}
|
||
|
||
.confirm-btn {
|
||
color: #007AFF;
|
||
font-weight: 500;
|
||
}
|
||
</style>
|
||
<style>
|
||
page {
|
||
background-color: #F2F1F6;
|
||
}
|
||
</style> |