235 lines
10 KiB
HTML
235 lines
10 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}个人中心 - 太白购物商城{% endblock %}
|
|
|
|
{% block head %}
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/profile.css') }}">
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="row">
|
|
<!-- 侧边栏 -->
|
|
<div class="col-md-3">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5><i class="bi bi-person-circle"></i> 个人中心</h5>
|
|
</div>
|
|
<div class="list-group list-group-flush">
|
|
<a href="{{ url_for('user.profile') }}" class="list-group-item list-group-item-action active">
|
|
<i class="bi bi-person"></i> 基本信息
|
|
</a>
|
|
<a href="{{ url_for('user.orders') }}" class="list-group-item list-group-item-action">
|
|
<i class="bi bi-bag"></i> 我的订单
|
|
</a>
|
|
<a href="{{ url_for('address.index') }}" class="list-group-item list-group-item-action">
|
|
<i class="bi bi-geo-alt"></i> 收货地址
|
|
</a>
|
|
<a href="#" class="list-group-item list-group-item-action">
|
|
<i class="bi bi-heart"></i> 我的收藏
|
|
</a>
|
|
<a href="#" class="list-group-item list-group-item-action">
|
|
<i class="bi bi-clock-history"></i> 浏览历史
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 主要内容 -->
|
|
<div class="col-md-9">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5><i class="bi bi-person"></i> 基本信息</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-8">
|
|
<table class="table table-borderless">
|
|
<tr>
|
|
<td width="120"><strong>用户名：</strong></td>
|
|
<td>{{ user.username }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>昵称：</strong></td>
|
|
<td>{{ user.nickname or '未设置' }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>手机号：</strong></td>
|
|
<td>{{ user.phone or '未绑定' }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>邮箱：</strong></td>
|
|
<td>{{ user.email or '未绑定' }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>性别：</strong></td>
|
|
<td>
|
|
{% if user.gender == 1 %}男
|
|
{% elif user.gender == 2 %}女
|
|
{% else %}未设置
|
|
{% endif %}
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>注册时间：</strong></td>
|
|
<td>{{ user.created_at.strftime('%Y-%m-%d %H:%M:%S') if user.created_at else '未知' }}</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<div class="mt-3">
|
|
<button class="btn btn-primary me-2">
|
|
<i class="bi bi-pencil"></i> 编辑资料
|
|
</button>
|
|
<button class="btn btn-outline-secondary">
|
|
<i class="bi bi-key"></i> 修改密码
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-4 text-center">
|
|
<div class="mb-3">
|
|
<div class="avatar-upload">
|
|
{% if user.avatar_url %}
|
|
<img src="{{ user.avatar_url }}" alt="头像" class="avatar-preview" id="avatarPreview">
|
|
{% else %}
|
|
<div class="avatar-placeholder" id="avatarPlaceholder">
|
|
<i class="bi bi-person display-4 text-muted"></i>
|
|
</div>
|
|
{% endif %}
|
|
<div class="upload-overlay" onclick="triggerFileInput()">
|
|
<i class="bi bi-camera text-white fs-3"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 隐藏的文件输入 -->
|
|
<input type="file" id="avatarInput" accept="image/*" style="display: none;" onchange="handleFileSelect(event)">
|
|
|
|
<!-- 上传进度 -->
|
|
<div class="upload-progress" id="uploadProgress">
|
|
<div class="progress">
|
|
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%"></div>
|
|
</div>
|
|
<small class="text-muted">上传中...</small>
|
|
</div>
|
|
|
|
<button class="btn btn-outline-primary btn-sm" onclick="triggerFileInput()">
|
|
<i class="bi bi-camera"></i> 更换头像
|
|
</button>
|
|
<div class="mt-2">
|
|
<small class="text-muted">支持 JPG、PNG 格式，大小不超过 2MB</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 快捷操作 -->
|
|
<div class="row mt-4">
|
|
<div class="col-md-3 mb-3">
|
|
<div class="card text-center">
|
|
<div class="card-body">
|
|
<i class="bi bi-bag display-4 text-primary mb-2"></i>
|
|
<h6 class="card-title">我的订单</h6>
|
|
<small class="text-muted">查看所有订单</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-3 mb-3">
|
|
<div class="card text-center">
|
|
<div class="card-body">
|
|
<i class="bi bi-cart display-4 text-success mb-2"></i>
|
|
<h6 class="card-title">购物车</h6>
|
|
<small class="text-muted">查看购物车</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-3 mb-3">
|
|
<div class="card text-center">
|
|
<div class="card-body">
|
|
<i class="bi bi-heart display-4 text-danger mb-2"></i>
|
|
<h6 class="card-title">我的收藏</h6>
|
|
<small class="text-muted">收藏的商品</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-3 mb-3">
|
|
<div class="card text-center">
|
|
<div class="card-body">
|
|
<i class="bi bi-geo-alt display-4 text-warning mb-2"></i>
|
|
<h6 class="card-title">收货地址</h6>
|
|
<small class="text-muted">管理收货地址</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 重新设计的图片预览模态框 -->
|
|
<div class="modal fade image-preview-modal" id="imagePreviewModal" tabindex="-1">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content">
|
|
<div class="modal-header border-0 pb-0">
|
|
<h5 class="modal-title">
|
|
<i class="bi bi-image text-primary"></i> 头像预览
|
|
</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="preview-container">
|
|
<div class="preview-image-wrapper">
|
|
<img src="" alt="预览图片" class="preview-image" id="previewImage">
|
|
</div>
|
|
|
|
<div class="preview-info">
|
|
<div class="mb-2">
|
|
<i class="bi bi-info-circle text-primary"></i>
|
|
<strong>图片信息</strong>
|
|
</div>
|
|
<div class="preview-stats">
|
|
<div class="stat-item">
|
|
<div class="stat-value" id="imageWidth">-</div>
|
|
<div class="stat-label">宽度(px)</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-value" id="imageHeight">-</div>
|
|
<div class="stat-label">高度(px)</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-value" id="imageSize">-</div>
|
|
<div class="stat-label">大小</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-value" id="imageType">-</div>
|
|
<div class="stat-label">格式</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-3">
|
|
<small class="text-muted">
|
|
<i class="bi bi-check-circle text-success"></i>
|
|
图片将被自动调整为合适的头像尺寸
|
|
</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer border-0 pt-0">
|
|
<button type="button" class="btn btn-light" data-bs-dismiss="modal">
|
|
<i class="bi bi-x-circle"></i> 取消
|
|
</button>
|
|
<button type="button" class="btn btn-primary" onclick="confirmUpload()">
|
|
<i class="bi bi-upload"></i> 确认上传
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script src="{{ url_for('static', filename='js/profile.js') }}"></script>
|
|
{% endblock %}
|