268 lines
8.2 KiB
HTML
268 lines
8.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Fuxsto Host V5 - Dashboard</title>
|
|
<script src="https://cdn.fss.fuxsto.cn/d/ajax/libs/eruda/eruda.js"></script>
|
|
<script>eruda.init();</script>
|
|
|
|
<link rel="stylesheet" href="app.css">
|
|
<link rel="stylesheet" href="https://cdn.fss.fuxsto.cn/d/element-plus@2.9.4/dist/index.css" />
|
|
</head>
|
|
|
|
<body class="container">
|
|
|
|
<div id="app">
|
|
|
|
<transition name="ldo">
|
|
|
|
|
|
|
|
<div class="md" v-if="ld">
|
|
<div class="loader min"></div>
|
|
</div>
|
|
|
|
</transition>
|
|
|
|
|
|
|
|
|
|
<transition name="fade-blur">
|
|
|
|
<!-- 用户中心 -->
|
|
<div
|
|
class="min"
|
|
v-if="UserInfo && page == 'home'"
|
|
>
|
|
<!-- 用户卡片 -->
|
|
<div class="user-card">
|
|
<div class="user-card-header">
|
|
<div class="user-card-avatar">
|
|
<img
|
|
width="100%"
|
|
class="avatar-image"
|
|
:src="userlogo"
|
|
alt="头像"
|
|
>
|
|
</div>
|
|
|
|
<div class="user-card-info">
|
|
<div class="user-card-name">
|
|
{{ UserInfo.username }}
|
|
</div>
|
|
<div class="user-card-role">
|
|
{{ UserInfo.id }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="user-card-stats">
|
|
<div class="user-card-stat">
|
|
<div class="user-card-stat-value">
|
|
{{ UserInfo.balance }}
|
|
</div>
|
|
<div class="user-card-stat-label">
|
|
余额
|
|
</div>
|
|
</div>
|
|
|
|
<div class="user-card-stat">
|
|
<div class="user-card-stat-value">
|
|
{{ UserInfo.score }}
|
|
</div>
|
|
<div class="user-card-stat-label">
|
|
积分
|
|
</div>
|
|
</div>
|
|
|
|
<div class="user-card-stat">
|
|
<div class="user-card-stat-value">
|
|
{{ UserInfo.status }}
|
|
</div>
|
|
<div class="user-card-stat-label">
|
|
状态
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="quick-actions">
|
|
<button
|
|
@click="this.page = 'goods';this.viewcart()"
|
|
class="action-button">
|
|
<svg viewBox="0 0 24 24">
|
|
<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
|
|
</svg>
|
|
<span>创建业务</span>
|
|
</button>
|
|
|
|
<button
|
|
class="action-button"
|
|
@click="this.page = 'purchase';this.getpurchases()"
|
|
>
|
|
<svg viewBox="0 0 24 24">
|
|
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/>
|
|
</svg>
|
|
<span>我的业务</span>
|
|
</button>
|
|
|
|
<button class="action-button">
|
|
<svg viewBox="0 0 24 24">
|
|
<path d="M12 6v3l4-4-4-4v3c-4.42 0-8 3.58-8 8 0 1.57.46 3.03 1.24 4.26L6.7 14.8c-.45-.83-.7-1.79-.7-2.8 0-3.31 2.69-6 6-6zm6.76 1.74L17.3 9.2c.44.84.7 1.79.7 2.8 0 3.31-2.69 6-6 6v-3l-4 4 4 4v-3c4.42 0 8-3.58 8-8 0-1.57-.46-3.03-1.24-4.26z"/>
|
|
</svg>
|
|
<span>系统设置</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div v-if="UserInfo && page !='home'">
|
|
|
|
|
|
<div class="min" style="display: grid; gap: 12px;">
|
|
<div style="display: flex; align-items: center; gap: 12px;">
|
|
<div style="background: rgba(41, 98, 255, 0.1); border-radius: 99px; padding: 0px;">
|
|
|
|
|
|
<button @click="page = 'home';getinfo()" class="button">
|
|
<div class="button-box">
|
|
<span class="button-elem">
|
|
<svg viewBox="0 0 46 40" xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M46 20.038c0-.7-.3-1.5-.8-2.1l-16-17c-1.1-1-3.2-1.4-4.4-.3-1.2 1.1-1.2 3.3 0 4.4l11.3 11.9H3c-1.7 0-3 1.3-3 3s1.3 3 3 3h33.1l-11.3 11.9c-1 1-1.2 3.3 0 4.4 1.2 1.1 3.3.8 4.4-.3l16-17c.5-.5.8-1.1.8-1.9z"
|
|
></path>
|
|
</svg>
|
|
</span>
|
|
<span class="button-elem">
|
|
<svg viewBox="0 0 46 40">
|
|
<path
|
|
d="M46 20.038c0-.7-.3-1.5-.8-2.1l-16-17c-1.1-1-3.2-1.4-4.4-.3-1.2 1.1-1.2 3.3 0 4.4l11.3 11.9H3c-1.7 0-3 1.3-3 3s1.3 3 3 3h33.1l-11.3 11.9c-1 1-1.2 3.3 0 4.4 1.2 1.1 3.3.8 4.4-.3l16-17c.5-.5.8-1.1.8-1.9z"
|
|
></path>
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
</button>
|
|
|
|
|
|
</div>
|
|
<div>
|
|
<div>返回</div>
|
|
<div style="font-size: 12px; color: var(--mdui-text-secondary);">Go to home</div>
|
|
</div>
|
|
</div>
|
|
|
|
<br>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 业务页面 -->
|
|
<div v-if="page == 'purchase'">
|
|
|
|
<div
|
|
class="min"
|
|
v-if="purchases"
|
|
>
|
|
<div
|
|
v-for="m in purchases"
|
|
class="card"
|
|
>
|
|
<div class="header">
|
|
<div class="icon-wrapper">
|
|
<svg
|
|
class="icon"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
>
|
|
<path
|
|
d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
|
|
<div class="title-group">
|
|
<h2 class="title">
|
|
{{ m.name }}
|
|
</h2>
|
|
<div class="status">
|
|
<svg
|
|
width="12"
|
|
height="12"
|
|
viewBox="0 0 24 24"
|
|
fill="currentColor"
|
|
>
|
|
<circle cx="12" cy="12" r="10"/>
|
|
</svg>
|
|
{{ m.status }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="detail-grid">
|
|
<div class="detail-item">
|
|
<span class="label">业务ID</span>
|
|
<span class="value">
|
|
{{ m.purchase_id }}
|
|
</span>
|
|
</div>
|
|
|
|
<div class="detail-item">
|
|
<span class="label">到期时间</span>
|
|
<span class="value">
|
|
<svg
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
>
|
|
<circle cx="12" cy="12" r="10"/>
|
|
<path d="M12 6V12L16 14"/>
|
|
</svg>
|
|
{{ m.expiry_time }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 产品页面 -->
|
|
<div class="min" v-if="page == 'goods' && cart">
|
|
|
|
{{ cart }}
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</transition>
|
|
</div>
|
|
|
|
<!-- 依赖库 -->
|
|
|
|
<script src="https://cdn.fss.fuxsto.cn/d/axios@1.7.9/dist/axios.min.js"></script>
|
|
<script src="https://cdn.fss.fuxsto.cn/d/vue@3.5.13/dist/vue.global.prod.js"></script>
|
|
|
|
<script src="https://cdn.fss.fuxsto.cn/d/element-plus@2.9.4/dist/index.full.js"></script>
|
|
<script src="msg.js"></script>
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|