76 lines
2.8 KiB
PHP
76 lines
2.8 KiB
PHP
<?php
|
|
|
|
include './head.php';
|
|
|
|
?>
|
|
|
|
<div id="main" class="mdui-card mdui-list" style="padding:0px">
|
|
|
|
|
|
<div class="mdui-progress">
|
|
<div class="mdui-progress-indeterminate"></div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<script>
|
|
// 定义一个函数用来获取产品数据并生成HTML
|
|
function fetchProducts() {
|
|
// 使用fetch API从API端点获取数据
|
|
fetch('./get_my_products.fx')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
const productList = document.getElementById('main');
|
|
|
|
productList.innerHTML = "";
|
|
// 遍历每个产品对象并生成HTML
|
|
for (const id in data) {
|
|
if (data.hasOwnProperty(id)) {
|
|
const product = data[id];
|
|
const name = product.name || '未知产品';
|
|
const status = product.status || '未知状态';
|
|
|
|
// 根据status选择颜色
|
|
let colorClass;
|
|
switch (status) {
|
|
case '已激活':
|
|
colorClass = 'mdui-color-blue';
|
|
break;
|
|
case '待开通':
|
|
colorClass = 'mdui-color-yellow';
|
|
break;
|
|
case '已到期':
|
|
colorClass = 'mdui-color-red';
|
|
break;
|
|
default:
|
|
colorClass = 'mdui-color-grey';
|
|
break;
|
|
}
|
|
|
|
// 创建每个产品的HTML结构
|
|
const productItem = `
|
|
<a href="./show_product.fx?id=${id}" class="mdui-list-item mdui-ripple">
|
|
<i class="mdui-list-item-avatar ${colorClass} mdui-icon material-icons mdui-text-color-white">dns</i>
|
|
<div class="mdui-list-item-content">
|
|
<div class="mdui-list-item-title">${name}</div>
|
|
<div class="mdui-list-item-text">${id}</div>
|
|
</div>
|
|
<i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-grey-400">assistant_photo</i>
|
|
</a>
|
|
`;
|
|
|
|
// 将生成的HTML插入到列表中
|
|
productList.innerHTML += productItem;
|
|
}
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('获取产品数据时出错:', error);
|
|
});
|
|
}
|
|
|
|
// 页面加载完毕后获取产品数据
|
|
document.addEventListener('DOMContentLoaded', fetchProducts);
|
|
</script>
|