当前位置：首页 > news >正文

基于Android 开发完成的购物商城App--前后端分离项目

news 来源：原创 2025/6/10 9:24:53

一、项目演示

二、项目简介

三、设计详情（部分)

Android前端--登录注册

Android前端--商品详情页

Android前端--订单详情

Android前端--我的页面

WEB后端--首页

WEB后端--商品管理

WEB后端--订单管理

四、项目源码

一、项目演示

基于Android 开发完成的购物商城App--前后端分离项目

二、项目简介

使用软件

Android Studio、MySQL、Navicat、IDEA

使用语言

JAVA、VUE2

数据库

MySQL

注释量

中文注释量90%以上

项目页面

请自行观看视频演示

关键技术点

采用前后端分离技术完成该购物商城系统

前端：Android、web管理员(Vue)...

后端：SpringBoot+MyBatisX...

三、设计详情（部分)

Android前端--登录注册

1. 注册功能实现

- 提供用户信息填写界面(用户名、密码、手机号、邮箱、地址、性别)

- 支持头像上传功能(从相册选择图片并裁剪为圆形)

- 表单验证确保所有必填字段不为空

- 图片上传成功后调用用户注册接口

- 注册成功后自动关闭注册页面

2. 登录功能实现

- 提供手机号和密码输入框

- 实现"记住密码"功能(使用SharedPreferences存储)

- 登录时验证手机号和密码是否匹配

- 登录成功后跳转到主界面(MainActivity)

- 提供注册页面跳转链接

3. 数据存储

- 使用SharedPreferences存储登录凭证

- 登录成功后存储用户手机号到"User"共享首选项

- "记住密码"功能可选择性保存手机号和密码

4. 网络请求

- 使用Retrofit进行网络请求

- 图片上传和用户注册分开处理

- 对网络请求结果进行成功/失败处理

- 提供友好的错误提示

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:background="#fff"tools:context=".ui.LoginActivity"><ImageViewandroid:id="@+id/imageView2"android:layout_width="200dp"android:layout_height="200dp"android:layout_marginTop="50dp"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toTopOf="parent"app:srcCompat="@drawable/logo" /><LinearLayoutandroid:id="@+id/linearLayout"android:layout_width="0dp"android:layout_height="wrap_content"android:layout_marginStart="24dp"android:layout_marginTop="50dp"android:layout_marginEnd="24dp"android:orientation="vertical"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toBottomOf="@+id/imageView2"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center|left"android:orientation="horizontal"><TextViewandroid:id="@+id/textView2"android:layout_width="70dp"android:layout_height="wrap_content"android:gravity="center"android:text="手机号："android:textColor="#000"android:textSize="16sp"android:textStyle="normal" /><EditTextandroid:id="@+id/et_phone"android:layout_width="match_parent"android:layout_height="40dp"android:layout_marginLeft="4dp"android:background="#fff"android:ems="10"android:hint="请输入用户手机号"android:inputType="textPersonName"android:textSize="14sp" /></LinearLayout><Viewandroid:id="@+id/view"android:layout_width="match_parent"android:layout_height="1dp"android:layout_marginTop="10dp"android:layout_marginBottom="10dp"android:background="#ccc" /><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center|left"android:orientation="horizontal"><TextViewandroid:id="@+id/textView3"android:layout_width="70dp"android:layout_height="wrap_content"android:gravity="center"android:text="密     码："android:textColor="#000"android:textSize="16sp"android:textStyle="normal" /><EditTextandroid:id="@+id/et_password"android:layout_width="wrap_content"android:layout_height="40dp"android:layout_marginLeft="4dp"android:layout_weight="1"android:background="#fff"android:ems="10"android:hint="请输入用户密码"android:inputType="textPassword"android:textSize="14sp" /></LinearLayout><Viewandroid:id="@+id/view2"android:layout_width="match_parent"android:layout_height="1dp"android:layout_marginTop="10dp"android:layout_marginBottom="10dp"android:background="#ccc" /><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginTop="10dp"android:orientation="horizontal"><CheckBoxandroid:id="@+id/cb_rember"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="记住账号密码" /><TextViewandroid:id="@+id/tv_register"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_weight="1"android:gravity="center|right"android:text="还没有账号？立即注册！"android:textColor="#000" /></LinearLayout></LinearLayout><Buttonandroid:id="@+id/btn_login"android:layout_width="0dp"android:layout_height="wrap_content"android:background="@drawable/button"android:text="立 即 登 录"android:textColor="#fff"android:textSize="18sp"android:textStyle="bold"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintEnd_toEndOf="@+id/linearLayout"app:layout_constraintStart_toStartOf="@+id/linearLayout"app:layout_constraintTop_toBottomOf="@+id/linearLayout" />
</androidx.constraintlayout.widget.ConstraintLayout>

Android前端--商品详情页

1. 商品详情展示

- 显示商品图片(使用Glide加载并设置占位图)

- 展示商品名称、分类、描述、价格等信息

- 原价显示删除线效果

- 显示商品详细描述(若无则显示"暂无详细描述")

2. 用户交互功能

- 返回按钮实现页面关闭

- "加入购物车"按钮功能

- "立即购买"按钮跳转支付页面

- 未登录用户提示登录

3. 购物车功能

- 通过SharedPreferences获取当前用户信息

- 根据手机号查询用户ID

- 调用购物车接口添加商品

- 处理商品已存在购物车的情况

- 提供友好的操作反馈提示

4. 网络请求处理

- 使用Retrofit进行商品详情查询

- 异步获取用户信息

- 购物车添加商品请求

- 统一的错误处理机制

- 加载状态提示

package com.example.mall.ui;import android.content.Context;
import android.content.Intent;
import android.content.SharedPreferences;
import android.graphics.Paint;
import android.os.Bundle;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;import androidx.appcompat.app.AppCompatActivity;import com.bumptech.glide.Glide;
import com.example.mall.Interface.cart.CartApiService;
import com.example.mall.Interface.cart.CartData;
import com.example.mall.Interface.user.UserApiService;
import com.example.mall.Interface.user.UserData;
import com.example.mall.Interface.user.UserResponse;
import com.example.mall.Interface.product.ProductApiService;
import com.example.mall.Interface.product.ProductData;
import com.example.mall.Interface.product.ProductResponse;
import com.example.mall.R;
import com.example.mall.utils.ApiClient;
import com.example.mall.utils.ApiServiceManager;import java.util.Map;import retrofit2.Call;
import retrofit2.Callback;
import retrofit2.Response;public class ProductDetailActivity extends AppCompatActivity {// 界面控件声明private ImageView productImage;private TextView productName;private TextView productCategory;private TextView productDescription;private TextView productPrice;private TextView productOriginalPrice;private TextView productDetail;private Button btnAddToCart;private Button btnBuyNow;private ImageView imgBack;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_product_detail);initView(); // 初始化界面控件loadProductDetail(); // 加载商品详情back(); // 返回按钮点击事件}// 返回按钮点击事件处理private void back() {imgBack.setOnClickListener(v -> finish());}// 初始化界面控件private void initView() {productImage = findViewById(R.id.product_image);productName = findViewById(R.id.product_name);productCategory = findViewById(R.id.product_category);productDescription = findViewById(R.id.product_description);productPrice = findViewById(R.id.product_price);productOriginalPrice = findViewById(R.id.product_original_price);productDetail = findViewById(R.id.product_detail);btnAddToCart = findViewById(R.id.btn_add_to_cart);btnBuyNow = findViewById(R.id.btn_buy_now);imgBack = findViewById(R.id.img_back);}// 加载商品详情数据private void loadProductDetail() {int productId = getIntent().getIntExtra("productId", -1);if (productId == -1) {showError("商品信息错误");return;}ProductApiService service = ApiServiceManager.getProductService();Call<ProductResponse> call = service.getProductDetailById(productId);call.enqueue(new Callback<ProductResponse>() {@Overridepublic void onResponse(Call<ProductResponse> call, Response<ProductResponse> response) {if (response.isSuccessful() && response.body() != null) {ProductResponse productResponse = response.body();if (productResponse.getCode() == 200 && productResponse.getData() != null && !productResponse.getData().isEmpty()) {displayProductDetail(productResponse.getData().get(0));} else {showError(productResponse != null ? productResponse.getMsg() : "商品信息获取失败");}} else {showError("请求失败，状态码: " + response.code());}}@Overridepublic void onFailure(Call<ProductResponse> call, Throwable t) {showError("网络错误: " + t.getMessage());}});}// 显示商品详情信息private void displayProductDetail(ProductData product) {Glide.with(this).load(ApiClient.BASE_URL + product.getImage()).placeholder(R.mipmap.ic_launcher).into(productImage);productName.setText(product.getName());productCategory.setText("分类: " + product.getCategory());productDescription.setText(product.getDescription());productPrice.setText("¥" + product.getPrice());productOriginalPrice.setPaintFlags(productOriginalPrice.getPaintFlags() | Paint.STRIKE_THRU_TEXT_FLAG);productDetail.setText(product.getDetail() != null ? product.getDetail() : "暂无详细描述");btnAddToCart.setOnClickListener(v -> addToCart(product));btnBuyNow.setOnClickListener(v -> buyNow(product));}// 添加到购物车功能private void addToCart(ProductData product) {// 直接从SharedPreferences获取手机号SharedPreferences sharedPreferences = getSharedPreferences("User", Context.MODE_PRIVATE);String phone = sharedPreferences.getString("phone", "");if (phone.isEmpty()) {Toast.makeText(this, "请先登录", Toast.LENGTH_SHORT).show();return;}// 显示加载提示Toast.makeText(this, "正在添加到购物车...", Toast.LENGTH_SHORT).show();// 根据手机号获取用户信息getUserByPhone(phone, new UserCallback() {@Overridepublic void onSuccess(UserData user) {if (user != null && user.getId() != null) {addToCartWithUserId(product, user.getId());} else {Toast.makeText(ProductDetailActivity.this, "获取用户信息失败", Toast.LENGTH_SHORT).show();}}@Overridepublic void onFailure(String errorMsg) {Toast.makeText(ProductDetailActivity.this, errorMsg, Toast.LENGTH_SHORT).show();}});}// 根据手机号获取用户信息private void getUserByPhone(String phone, UserCallback callback) {UserApiService userService = ApiServiceManager.getUserService();Call<UserResponse> call = userService.getUserByPhone(phone);call.enqueue(new Callback<UserResponse>() {@Overridepublic void onResponse(Call<UserResponse> call, Response<UserResponse> response) {if (response.isSuccessful() && response.body() != null) {UserResponse userResponse = response.body();if (userResponse.getCode() == 200 && userResponse.getData() != null) {callback.onSuccess(userResponse.getData());} else {callback.onFailure(userResponse != null ? userResponse.getMsg() : "获取用户信息失败");}} else {callback.onFailure("请求失败，状态码: " + response.code());}}@Overridepublic void onFailure(Call<UserResponse> call, Throwable t) {callback.onFailure("网络错误: " + t.getMessage());}});}// 使用用户ID添加到购物车private void addToCartWithUserId(ProductData product, Integer userId) {CartData cartData = new CartData();cartData.setUserId(userId);cartData.setProductId(product.getId());cartData.setQuantity(1); // 默认数量为1CartApiService cartService = ApiServiceManager.getCartService();Call<Map<String, Object>> call = cartService.addCart(cartData);call.enqueue(new Callback<Map<String, Object>>() {@Overridepublic void onResponse(Call<Map<String, Object>> call, Response<Map<String, Object>> response) {if (response.isSuccessful() && response.body() != null) {Map<String, Object> result = response.body();try {Number codeNumber = (Number) result.get("code");int code = codeNumber != null ? codeNumber.intValue() : -1;String message = result.containsKey("msg") ? String.valueOf(result.get("msg")) : "";if (code == 200) {// 成功添加到购物车Toast.makeText(ProductDetailActivity.this,"已添加 " + product.getName() + " 到购物车", Toast.LENGTH_SHORT).show();} else if (message.contains("Duplicate entry")) {// 商品已存在购物车中，静默处理或显示友好提示// 选项1：静默处理，不显示任何提示// 选项2：显示友好提示（根据您的需求选择）Toast.makeText(ProductDetailActivity.this,product.getName() + " 已在购物车中", Toast.LENGTH_SHORT).show();} else {// 其他错误情况Toast.makeText(ProductDetailActivity.this,message.isEmpty() ? "操作失败" : message, Toast.LENGTH_SHORT).show();}} catch (Exception e) {Toast.makeText(ProductDetailActivity.this,"处理响应数据出错", Toast.LENGTH_SHORT).show();e.printStackTrace();}} else {Toast.makeText(ProductDetailActivity.this,"请求失败，状态码: " + response.code(), Toast.LENGTH_SHORT).show();}}@Overridepublic void onFailure(Call<Map<String, Object>> call, Throwable t) {Toast.makeText(ProductDetailActivity.this,"网络错误: " + t.getMessage(), Toast.LENGTH_SHORT).show();}});}private void buyNow(ProductData product) {// 直接从SharedPreferences获取手机号SharedPreferences sharedPreferences = getSharedPreferences("User", Context.MODE_PRIVATE);String phone = sharedPreferences.getString("phone", "");if (phone.isEmpty()) {Toast.makeText(this, "请先登录", Toast.LENGTH_SHORT).show();return;}// 跳转到支付页面Intent intent = new Intent(this, PaymentActivity.class);intent.putExtra("product", product);startActivity(intent);}// 显示错误信息并关闭页面private void showError(String message) {Toast.makeText(this, message, Toast.LENGTH_SHORT).show();finish();}// 用户回调接口private interface UserCallback {void onSuccess(UserData user);void onFailure(String errorMsg);}
}

Android前端--订单详情

1. 订单信息展示

- 显示订单号、商品名称、描述和详情

- 展示商品数量、单价和总金额

- 加载并显示商品图片(使用Glide)

- 显示订单创建时间和完成时间(如有)

2. 物流与支付信息

- 展示收货人姓名、联系电话和详细地址

- 显示支付方式

- 显示用户备注信息(若无则显示"无")

3. 订单状态处理

- 显示当前订单状态

- 对"已完成"状态特殊标记(红色文字)

- 动态处理完成时间显示(有则显示，无则隐藏)

4. 交互功能

- 提供返回按钮(点击关闭当前页面)

- 处理空订单数据情况(直接关闭页面)

Android前端--我的页面

1. 用户信息展示

- 显示用户头像(使用Glide加载并裁剪为圆形)

- 展示用户名

- 从SharedPreferences获取当前登录用户手机号

- 通过手机号查询并显示完整用户信息

2. 功能导航

- 个人信息管理(跳转InformationActivity)

- 修改密码(跳转ModifyPasswordActivity)

- 我的订单(跳转OrderActivity)

- 关于我们(跳转AboutActivity)

- 使用Map结构管理布局与Activity映射关系

3. 用户退出功能

- 提供退出登录按钮

- 点击后跳转回登录页面(LoginActivity)

4. 数据加载与处理

- 使用Retrofit异步获取用户数据

- 处理网络请求成功/失败情况

- 显示友好的错误提示

- 检查Fragment是否已附加到Activity

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:background="#F6F6F6"tools:context=".ui.fragment.MineFragment"><LinearLayoutandroid:id="@+id/linearLayout6"android:layout_width="0dp"android:layout_height="wrap_content"android:background="@drawable/gradient_bg"android:gravity="center"android:orientation="vertical"android:padding="30dp"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toTopOf="parent"><ImageViewandroid:id="@+id/ivAvatar"android:layout_width="130dp"android:layout_height="130dp"android:src="@drawable/avatar" /><TextViewandroid:id="@+id/tv_name"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginTop="10dp"android:gravity="center"android:textColor="#fff"android:textSize="18sp"android:textStyle="bold" /></LinearLayout><LinearLayoutandroid:id="@+id/linearLayout7"android:layout_width="0dp"android:layout_height="wrap_content"android:layout_marginTop="8dp"android:background="#fff"android:orientation="vertical"android:padding="10dp"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toBottomOf="@+id/linearLayout6"><LinearLayoutandroid:id="@+id/ll_information"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="horizontal"><TextViewandroid:id="@+id/textView61"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_weight="1"android:text="个人信息" /><ImageViewandroid:id="@+id/imageView41"android:layout_width="20dp"android:layout_height="20dp"android:src="@drawable/right" /></LinearLayout><Viewandroid:id="@+id/view4"android:layout_width="match_parent"android:layout_height="1dp"android:layout_marginTop="10dp"android:layout_marginBottom="10dp"android:background="#DDDDDD" /><LinearLayoutandroid:id="@+id/ll_modify_password"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="horizontal"><TextViewandroid:id="@+id/textView612"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_weight="1"android:text="修改密码" /><ImageViewandroid:id="@+id/imageView24"android:layout_width="20dp"android:layout_height="20dp"android:src="@drawable/right" /></LinearLayout></LinearLayout><TextViewandroid:id="@+id/textView8"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginBottom="16dp"android:text="购物商城 V 1.0.0"android:textColor="#616161"android:textSize="14sp"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintStart_toStartOf="@+id/linearLayout7" /><LinearLayoutandroid:id="@+id/linearLayou6t7"android:layout_width="0dp"android:layout_height="wrap_content"android:layout_marginTop="16dp"android:background="#fff"android:orientation="vertical"android:padding="10dp"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toBottomOf="@+id/linearLayout7"><LinearLayoutandroid:id="@+id/ll_MyOrder"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="horizontal"><TextViewandroid:id="@+id/textView63"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_weight="1"android:text="我的订单" /><ImageViewandroid:id="@+id/imageView44"android:layout_width="20dp"android:layout_height="20dp"android:src="@drawable/right" /></LinearLayout><Viewandroid:id="@+id/view13"android:layout_width="match_parent"android:layout_height="1dp"android:layout_marginTop="10dp"android:layout_marginBottom="10dp"android:background="#DDDDDD" /><LinearLayoutandroid:id="@+id/ll_about"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="horizontal"><TextViewandroid:id="@+id/textView6"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_weight="1"android:text="关于APP" /><ImageViewandroid:id="@+id/imageView4"android:layout_width="20dp"android:layout_height="20dp"android:src="@drawable/right" /></LinearLayout></LinearLayout><Buttonandroid:id="@+id/btn_quit"android:layout_width="0dp"android:layout_height="40dp"android:layout_marginStart="16dp"android:layout_marginEnd="16dp"android:background="@drawable/button"android:text="退 出 登 录"android:textColor="#fff"android:textSize="18sp"android:textStyle="bold"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toBottomOf="@+id/linearLayou6t7" />
</androidx.constraintlayout.widget.ConstraintLayout>

WEB后端--首页

1. 整体布局

采用Element UI组件构建的响应式后台管理系统首页，包含统计卡片、快捷操作按钮和图表展示区域。

2. 核心功能

- 顶部展示欢迎信息和操作指引

- 4个统计卡片展示用户、商品、订单和购物车总数

- 快捷操作按钮可快速跳转到添加用户、商品、订单和查看购物车页面

- 3个数据图表展示商品分类分布、订单状态分布和用户订单数量排名

3. 数据获取

- 通过API接口获取统计数据

- 使用分页和非分页接口获取完整数据用于图表展示

- 统计数据包括用户总数、商品总数、订单总数和购物车总数

4. 图表展示

- 使用ECharts库实现数据可视化

- 包含饼图展示商品分类分布

- 柱状图展示订单状态分布

- 柱状图展示用户订单数量排名(前10)

<template><div class="dashboard"><h2>欢迎使用商城后台管理系统</h2><p>请从左侧菜单选择您要操作的功能</p><el-row :gutter="20" class="statistics"><el-col :span="6"><el-card shadow="hover" class="stat-card"><div class="stat-content"><i class="el-icon-user stat-icon user-icon"></i><div class="stat-info"><div class="stat-title">用户总数</div><div class="stat-value">{{ userCount }}</div></div></div></el-card></el-col><el-col :span="6"><el-card shadow="hover" class="stat-card"><div class="stat-content"><i class="el-icon-goods stat-icon product-icon"></i><div class="stat-info"><div class="stat-title">商品总数</div><div class="stat-value">{{ productCount }}</div></div></div></el-card></el-col><el-col :span="6"><el-card shadow="hover" class="stat-card"><div class="stat-content"><i class="el-icon-s-order stat-icon order-icon"></i><div class="stat-info"><div class="stat-title">订单总数</div><div class="stat-value">{{ orderCount }}</div></div></div></el-card></el-col><el-col :span="6"><el-card shadow="hover" class="stat-card"><div class="stat-content"><i class="el-icon-shopping-cart-2 stat-icon cart-icon"></i><div class="stat-info"><div class="stat-title">购物车总数</div><div class="stat-value">{{ cartCount }}</div></div></div></el-card></el-col></el-row><el-card class="quick-actions"><div slot="header" class="clearfix"><span>快捷操作</span></div><el-row :gutter="20"><el-col :span="6"><el-button type="primary" icon="el-icon-plus" @click="goToUserAdd">添加用户</el-button></el-col><el-col :span="6"><el-button type="success" icon="el-icon-plus" @click="goToProductAdd">添加商品</el-button></el-col><el-col :span="6"><el-button type="warning" icon="el-icon-plus" @click="goToOrderAdd">添加订单</el-button></el-col><el-col :span="6"><el-button type="info" icon="el-icon-shopping-cart" @click="goToCart">查看购物车</el-button></el-col></el-row></el-card><!-- 基于现有API的图表展示 --><el-row :gutter="20" class="chart-row"><el-col :span="12"><el-card shadow="hover" class="chart-card"><div slot="header" class="chart-header"><span>商品分类分布</span></div><div id="productCategoryChart" style="width: 100%; height: 300px;"></div></el-card></el-col><el-col :span="12"><el-card shadow="hover" class="chart-card"><div slot="header" class="chart-header"><span>订单状态分布</span></div><div id="orderStatusChart" style="width: 100%; height: 300px;"></div></el-card></el-col></el-row><el-row :gutter="20" class="chart-row"><el-col :span="24"><el-card shadow="hover" class="chart-card"><div slot="header" class="chart-header"><span>用户订单数量（前10）</span></div><div id="userOrderChart" style="width: 100%; height: 350px;"></div></el-card></el-col></el-row></div>
</template>goToUserAdd() {this.$router.push('/user')},goToProductAdd() {this.$router.push('/product')},goToOrderAdd() {this.$router.push('/orders')},goToCart() {this.$router.push('/cart')}}
}
</script><style scoped>
.dashboard {background: white;padding: 40px;border-radius: 12px;box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);text-align: center;min-height: calc(100vh - 160px);
}.dashboard h2 {font-size: 24px;color: #333;margin-bottom: 12px;
}.dashboard p {font-size: 16px;color: #666;margin-bottom: 30px;
}.statistics {margin-bottom: 30px;
}.stat-card {border-radius: 8px;cursor: pointer;transition: all 0.3s;
}.stat-card:hover {transform: translateY(-5px);box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}.stat-content {display: flex;align-items: center;padding: 10px;
}.stat-icon {font-size: 40px;margin-right: 20px;padding: 15px;border-radius: 50%;color: white;
}.user-icon {background-color: #409EFF;
}.product-icon {background-color: #67C23A;
}.order-icon {background-color: #E6A23C;
}.cart-icon {background-color: #F56C6C;
}.stat-info {text-align: left;
}.stat-title {font-size: 14px;color: #999;margin-bottom: 5px;
}.stat-value {font-size: 24px;font-weight: bold;color: #333;
}.quick-actions {margin-top: 30px;border-radius: 8px;
}.quick-actions .el-button {width: 100%;padding: 15px 0;
}/* 调整列间距 */
.statistics .el-col {margin-bottom: 20px;
}/* 图表样式 */
.chart-row {margin-top: 30px;
}.chart-card {border-radius: 8px;margin-bottom: 20px;
}.chart-header {font-weight: bold;font-size: 16px;color: #333;text-align: left;padding: 10px 15px;
}#userOrderChart,
#productCategoryChart,
#orderStatusChart {transition: all 0.5s;
}
</style>