From 73cf25e586cb7693dcfc26aef172f37372d45eed Mon Sep 17 00:00:00 2001 From: qingfeng1121 Date: Mon, 19 Jan 2026 11:35:50 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E5=88=86=E9=A1=B5?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=92=8C=E5=9C=B0=E5=9D=80=E9=80=89=E6=8B=A9?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=EF=BC=8C=E4=BC=98=E5=8C=96=E6=A0=B7=E5=BC=8F?= =?UTF-8?q?=E5=92=8C=E7=B1=BB=E5=9E=8B=E5=AE=9A=E4=B9=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit refactor: 重构路由配置，移除订单页面路由 style: 统一使用CSS变量替换硬编码颜色值 docs: 添加前端数据需求分析文档 fix: 修复登录页面记住我功能，更新用户信息页面链接 perf: 优化搜索组件动画效果和响应式设计 chore: 更新TypeScript类型定义，添加订单和地址相关类型 --- Api.text | 278 +++++ src/App.vue | 1 + src/Component/business/SettlementLite.vue | 927 +++++++++++++++++ src/Component/common/Address.vue | 379 +++++++ src/Component/common/Search.vue | 444 ++++++++ src/Component/common/page.vue | 63 ++ src/Route/route.ts | 6 - src/Util/Type.ts | 46 +- src/Views/Cart.vue | 278 ++--- src/Views/Chat.vue | 100 +- src/Views/Login.vue | 44 +- src/Views/User/UpdataAddress.vue | 446 ++++++++ src/Views/User/User.vue | 1125 +++++++++++++++++++-- src/Views/User/Userinfo.vue | 7 +- src/Views/footer.vue | 16 +- src/Views/herde.vue | 87 +- src/Views/main.vue | 118 +-- src/Views/product/productdetil.vue | 669 +++++++++++- src/Views/product/productmodal.vue | 4 +- tsconfig.app.json | 2 +- 20 files changed, 4618 insertions(+), 422 deletions(-) create mode 100644 Api.text create mode 100644 src/Component/business/SettlementLite.vue create mode 100644 src/Component/common/Address.vue create mode 100644 src/Component/common/Search.vue create mode 100644 src/Component/common/page.vue create mode 100644 src/Views/User/UpdataAddress.vue diff --git a/Api.text b/Api.text new file mode 100644 index 0000000..2288a9a --- /dev/null +++ b/Api.text @@ -0,0 +1,278 @@ +# 前端数据需求分析 + +## 组件数据需求 + +### 1. Address.vue (地址选择组件) +- 数据需求：省市区级联选择数据 +- 数据结构： + ``` + address { + province: string, // 省份名称 + city: string, // 城市名称 + district: string // 区县名称 + } + ``` + +### 2. Search.vue (搜索组件) +- 数据需求：搜索关键词、搜索类型、搜索历史 +- 数据结构： + ``` + search { + keyword: string, // 搜索关键词 + type: string, // 搜索类型（如"宝贝"、"店铺"） + history: string[] // 搜索历史记录 + } + ``` + +### 3. page.vue (分页组件) +- 数据需求：总页数 +- 数据结构： + ``` + pagination { + totalPages: number // 总页数 + } + ``` + +## 页面数据需求 + +### 1. Login.vue (登录页面) +- 数据需求：用户登录信息 +- 数据结构： + ``` + login { + username: string, // 用户名 + password: string, // 密码 + rememberMe: boolean // 是否记住密码 + } + ``` + +### 2. Userinfo.vue (用户信息页面) +- 数据需求：用户信息、订单状态数量 +- 数据结构： + ``` + user { + id: number, // 用户ID + username: string, // 用户名 + avatar: string, // 头像URL + level: number, // 用户等级 + followCount: number, // 关注数 + fansCount: number, // 粉丝数 + collectionCount: number, // 收藏数 + couponCount: number, // 红包数 + discountCount: number, // 优惠券数 + taoCoin: number, // 淘币数 + points: number // 积分 + } + orderCounts { + pending_payment: number, // 待付款 + pending_shipment: number, // 待发货 + pending_receipt: number, // 待收货 + pending_review: number, // 待评价 + completed: number // 已完成 + } + ``` + +### 3. productdetil.vue (商品详情页面) +- 数据需求：商品信息、商品图片、商品型号、评论、推荐商品 +- 数据结构： + ``` + product { + id: number, // 商品ID + title: string, // 商品标题 + images: string[], // 商品图片URL + price: number, // 价格 + originalPrice: number, // 原价 + models: [ // 商品型号 + { + id: string, + name: string, + price: string, + originalPrice: string, + img: string + } + ], + description: string, // 商品描述 + features: string[], // 商品特点 + specs: [ // 商品参数 + { + category: string, // 参数类别 + value: string // 参数值 + } + ], + reviews: [ // 用户评论 + { + id: number, + reviewerName: string, // 评论者姓名 + rating: number, // 评分 + time: string, // 评论时间 + content: string, // 评论内容 + images: string[] // 评论图片 + } + ], + recommendations: [ // 推荐商品 + { + id: number, + name: string, // 商品名称 + price: number, // 价格 + rating: number, // 评分 + image: string // 商品图片 + } + ] + } + ``` + +### 4. SettlementLite.vue (结算页面) +- 数据需求：地址列表、默认地址、商品信息、价格计算 +- 数据结构： + ``` + address { + id: number, // 地址ID + name: string, // 收货人姓名 + phone: string, // 联系电话 + province: string, // 省份 + city: string, // 城市 + district: string, // 区县 + detail: string, // 详细地址 + isDefault: boolean // 是否默认地址 + }[] + order { + products: [ // 订单商品 + { + id: number, // 商品ID + name: string, // 商品名称 + price: number, // 商品价格 + quantity: number, // 购买数量 + image: string // 商品图片 + } + ], + totalPrice: number, // 总价格 + shippingFee: number, // 运费 + finalPrice: number // 最终价格 + } + ``` + +### 5. User/UpdataAddress.vue (地址修改页面) +- 数据需求：地址信息 +- 数据结构： + ``` + address { + id: number, // 地址ID + name: string, // 收货人姓名 + phone: string, // 联系电话 + province: string, // 省份 + city: string, // 城市 + district: string, // 区县 + detail: string, // 详细地址 + isDefault: boolean // 是否默认地址 + } + ``` + +### 6. User/User.vue (用户中心页面) +- 数据需求：用户信息、订单列表、地址列表、收藏列表 +- 数据结构： + ``` + user { + id: number, // 用户ID + username: string, // 用户名 + avatar: string // 头像URL + } + orders { + id: number, // 订单ID + status: string, // 订单状态 + totalPrice: number, // 订单总价 + createTime: string, // 创建时间 + products: [ // 订单商品 + { + id: number, + name: string, + price: number, + quantity: number, + image: string + } + ] + }[] + addresses: address[] // 地址列表，结构同SettlementLite.vue + collections: [ // 收藏列表 + { + id: number, // 收藏ID + productId: number, // 商品ID + productName: string, // 商品名称 + productPrice: number, // 商品价格 + productImage: string // 商品图片 + } + ] + ``` + +### 7. Cart.vue (购物车页面) +- 数据需求：购物车商品列表 +- 数据结构： + ``` + cart { + items: [ // 购物车商品 + { + id: number, // 商品ID + name: string, // 商品名称 + price: number, // 商品价格 + quantity: number, // 购买数量 + image: string, // 商品图片 + selected: boolean // 是否选中 + } + ], + totalPrice: number, // 总价格 + selectedCount: number // 选中数量 + } + ``` + +### 8. product/productList.vue (商品列表页面) +- 数据需求：商品列表、分页信息 +- 数据结构： + ``` + products { + items: [ // 商品列表 + { + id: number, // 商品ID + name: string, // 商品名称 + price: number, // 商品价格 + originalPrice: number, // 原价 + image: string, // 商品图片 + rating: number, // 评分 + sales: number // 销量 + } + ], + total: number, // 总商品数 + page: number, // 当前页码 + pageSize: number, // 每页数量 + totalPages: number // 总页数 + } + ``` + +### 9. Home.vue (首页) +- 数据需求：轮播图、推荐商品、分类信息 +- 数据结构： + ``` + home { + banners: [ // 轮播图 + { + id: number, + image: string, // 轮播图图片 + link: string // 跳转链接 + } + ], + recommendedProducts: [ // 推荐商品 + { + id: number, + name: string, + price: number, + image: string, + rating: number + } + ], + categories: [ // 商品分类 + { + id: number, + name: string, // 分类名称 + icon: string // 分类图标 + } + ] + } + ``` \ No newline at end of file diff --git a/src/App.vue b/src/App.vue index 543fa48..191f89a 100644 --- a/src/App.vue +++ b/src/App.vue @@ -8,5 +8,6 @@ import { RouterView } from "vue-router"; import Herde from "@/Views/Herde.vue"; import './Style/App.css' + diff --git a/src/Component/business/SettlementLite.vue b/src/Component/business/SettlementLite.vue new file mode 100644 index 0000000..8b42584 --- /dev/null +++ b/src/Component/business/SettlementLite.vue @@ -0,0 +1,927 @@ + + + + + + diff --git a/src/Component/common/Address.vue b/src/Component/common/Address.vue new file mode 100644 index 0000000..347e34d --- /dev/null +++ b/src/Component/common/Address.vue @@ -0,0 +1,379 @@ + + + + + + + \ No newline at end of file diff --git a/src/Component/common/Search.vue b/src/Component/common/Search.vue new file mode 100644 index 0000000..61699eb --- /dev/null +++ b/src/Component/common/Search.vue @@ -0,0 +1,444 @@ + + + + + + \ No newline at end of file diff --git a/src/Component/common/page.vue b/src/Component/common/page.vue new file mode 100644 index 0000000..1c61db7 --- /dev/null +++ b/src/Component/common/page.vue @@ -0,0 +1,63 @@ + + + + + + diff --git a/src/Route/route.ts b/src/Route/route.ts index 513b5a2..5bc6d46 100644 --- a/src/Route/route.ts +++ b/src/Route/route.ts @@ -6,7 +6,6 @@ import Login from '../Views/Login.vue' import Search from '../Views/Search.vue' import ProductDetail from '../Views/product/productdetil.vue' import Cart from '../Views/Cart.vue' -import Order from '../Views/Order.vue' import User from '../Views/User/User.vue' import Chat from '../Views/Chat.vue' @@ -38,11 +37,6 @@ const routes = [ name: 'cart', component: Cart }, - { - path: '/order', - name: 'order', - component: Order - }, { path: '/user', name: 'user', diff --git a/src/Util/Type.ts b/src/Util/Type.ts index 0377ffe..6b5fa30 100644 --- a/src/Util/Type.ts +++ b/src/Util/Type.ts @@ -25,19 +25,31 @@ export type Cart = { // 商品类型 export type Product = { id: string - name: string - price: string - img: string - model: string + name: string; // 商品名称 + description: string; // 商品描述 + price: number; // 商品价格 + quantity: number; // 商品数量 + image: string; // 商品图片 + model: string; // 商品型号 } - -// 订单详情类型 +// 订单商品类型 +export type OrderProduct = { + productId: string | number // 商品 ID + quantity: number // 商品数量 + // 其他待补充字段，如型号、颜色等 +} +// 订单类型 export type OrderDetail = { - id: string - name: string - price: string - img: string - count: number + id: string // 订单 ID + shopName: string // 店铺名称 + receiverName: string // 收货人 + orderId: string // 订单 ID + createTime: string // 创建时间 + status: string // 订单状态 + statusText: string // 订单状态文本 + totalAmount: number // 订单总金额 + paymentMethod: string // 支付方式 + goods: Product[] // 商品列表 } // 注册类型 export type Register = { @@ -49,4 +61,16 @@ export type Register = { export type Login = { username: string password: string + rememberMe: boolean +} +// 地址类型 +export type Address = { + id: number; // 修改时有 ID，新增时无 + name: string; // 收货人 + phone: string; // 手机号 + province: string; // 省 + city: string; // 市 + district: string; // 区 + detail: string; // 详细地址（街道、门牌号等） + isDefault: boolean; // 是否默认地址 } \ No newline at end of file diff --git a/src/Views/Cart.vue b/src/Views/Cart.vue index f663363..0a69433 100644 --- a/src/Views/Cart.vue +++ b/src/Views/Cart.vue @@ -580,17 +580,17 @@ const removeItem = (id: number) => { } .cart-item-model { - font-size: 16px; - padding: 18px 32px; - color: #666; - border-radius: 18px; + font-size: var(--font-size-base); + padding: var(--spacing-lg) var(--spacing-xl); + color: var(--text-secondary); + border-radius: var(--border-radius-lg); cursor: pointer; - transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); + transition: all var(--transition-transform); position: relative; overflow: hidden; - background: linear-gradient(135deg, #fafafa 0%, #ffffff 100%); - border: 2px solid #f0f0f0; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); + background: linear-gradient(135deg, var(--bg-light) 0%, var(--card-bg) 100%); + border: 2px solid var(--border-color); + box-shadow: var(--shadow-md); font-weight: 500; } @@ -601,8 +601,8 @@ const removeItem = (id: number) => { left: -100%; width: 100%; height: 100%; - background: linear-gradient(90deg, transparent, rgba(255, 80, 0, 0.15), transparent); - transition: left 0.6s ease; + background: linear-gradient(90deg, transparent, rgba(var(--primary-light-rgb), 0.15), transparent); + transition: left var(--transition-slow); z-index: 0; } @@ -613,18 +613,18 @@ const removeItem = (id: number) => { left: 0; right: 0; bottom: 0; - background: linear-gradient(135deg, rgba(255, 80, 0, 0.08) 0%, rgba(255, 80, 0, 0.04) 100%); + background: linear-gradient(135deg, rgba(var(--primary-light-rgb), 0.08) 0%, rgba(var(--primary-light-rgb), 0.04) 100%); opacity: 0; - transition: opacity 0.4s ease; + transition: opacity var(--transition-transform); z-index: -1; - border-radius: 18px; + border-radius: var(--border-radius-lg); } .cart-item-model:hover { - border: 2px dashed #ff5000; - color: #ff5000; + border: 2px dashed var(--primary-color); + color: var(--primary-color); transform: translateY(-5px) scale(1.05); - box-shadow: 0 10px 24px rgba(255, 80, 0, 0.2); + box-shadow: 0 10px 24px rgba(var(--primary-light-rgb), 0.2); } .cart-item-model:hover::before { @@ -659,13 +659,13 @@ const removeItem = (id: number) => { width: 200px; display: flex; flex-direction: column; - gap: 16px; - padding: 15px; - background: linear-gradient(135deg, #fafafa 0%, #ffffff 100%); - border-radius: 20px; - border: 2px solid #f0f0f0; - transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); + gap: var(--spacing-md); + padding: var(--spacing-md); + background: linear-gradient(135deg, var(--bg-light) 0%, var(--card-bg) 100%); + border-radius: var(--border-radius-xl); + border: 2px solid var(--border-color); + transition: all var(--transition-transform); + box-shadow: var(--shadow-md); position: relative; } @@ -676,16 +676,16 @@ const removeItem = (id: number) => { left: -2px; right: -2px; bottom: -2px; - border-radius: 20px; - background: linear-gradient(135deg, #ff5000, #ff8500, #ff5000); + border-radius: var(--border-radius-xl); + background: linear-gradient(135deg, var(--primary-color), var(--primary-hover), var(--primary-color)); z-index: -1; opacity: 0; - transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); + transition: opacity var(--transition-transform); } .cart-item:hover .cart-item-price { - border-color: #ff5000; - box-shadow: 0 10px 30px rgba(255, 80, 0, 0.2); + border-color: var(--primary-color); + box-shadow: 0 10px 30px rgba(var(--primary-light-rgb), 0.2); transform: translateY(-4px); } @@ -718,25 +718,25 @@ const removeItem = (id: number) => { } .price-label { - font-size: 14px; - color: #666; + font-size: var(--font-size-sm); + color: var(--text-secondary); font-weight: 600; - background: linear-gradient(135deg, #fff5f5 0%, #fff0f0 100%); - padding: 8px 20px; - border-radius: 20px; + background: linear-gradient(135deg, var(--bg-primary-light) 0%, var(--bg-primary-lighter) 100%); + padding: var(--spacing-xs) var(--spacing-lg); + border-radius: var(--border-radius-xl); align-self: flex-start; - border: 1px solid #ffece5; - transition: all 0.3s ease; - box-shadow: 0 3px 12px rgba(255, 80, 0, 0.1); + border: 1px solid var(--border-color); + transition: all var(--transition-normal); + box-shadow: 0 3px 12px rgba(var(--primary-light-rgb), 0.1); position: relative; z-index: 1; } .cart-item:hover .price-label { - background: linear-gradient(135deg, #ff5000 0%, #ff6b00 100%); + background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%); color: #ffffff; - border-color: #ff5000; - box-shadow: 0 6px 20px rgba(255, 80, 0, 0.35); + border-color: var(--primary-color); + box-shadow: 0 6px 20px rgba(var(--primary-light-rgb), 0.35); transform: scale(1.08); animation: label-pulse 0.6s ease; } @@ -751,10 +751,10 @@ const removeItem = (id: number) => { } .price-symbol { - font-size: 16px; - color: #ff5000; + font-size: var(--font-size-base); + color: var(--primary-color); font-weight: 600; - transition: all 0.3s ease; + transition: all var(--transition-normal); } .cart-item:hover .price-symbol { @@ -762,42 +762,42 @@ const removeItem = (id: number) => { } .price-value { - font-size: 26px; - color: #ff5000; + font-size: var(--font-size-2xl); + color: var(--primary-color); font-weight: 700; line-height: 1; - transition: all 0.3s ease; + transition: all var(--transition-normal); position: relative; - text-shadow: 0 2px 4px rgba(255, 80, 0, 0.2); + text-shadow: 0 2px 4px rgba(var(--primary-light-rgb), 0.2); } .cart-item:hover .price-value { transform: scale(1.05); - text-shadow: 0 4px 8px rgba(255, 80, 0, 0.35); + text-shadow: 0 4px 8px rgba(var(--primary-light-rgb), 0.35); } .original-price .price-symbol { - font-size: 13px; - color: #999; + font-size: var(--font-size-xs); + color: var(--text-tertiary); } .original-price .price-value { - font-size: 16px; - color: #999; + font-size: var(--font-size-base); + color: var(--text-tertiary); text-decoration: line-through; text-shadow: none; } .discount-badge { - background: linear-gradient(135deg, #ff5000 0%, #ff6b00 100%); + background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%); color: #ffffff; - font-size: 11px; + font-size: var(--font-size-xs); font-weight: 600; - padding: 4px 12px; - border-radius: 12px; - margin-left: 6px; - box-shadow: 0 3px 6px rgba(255, 80, 0, 0.25); - transition: all 0.3s ease; + padding: var(--spacing-xs) var(--spacing-sm); + border-radius: var(--border-radius-sm); + margin-left: var(--spacing-xs); + box-shadow: 0 3px 6px rgba(var(--primary-light-rgb), 0.25); + transition: all var(--transition-normal); position: relative; overflow: hidden; } @@ -1006,12 +1006,12 @@ const removeItem = (id: number) => { .cart-item-quantity { display: flex; align-items: center; - gap: 12px; - background: linear-gradient(135deg, #fafafa 0%, #ffffff 100%); - padding: 10px 20px; - border-radius: 32px; - border: 2px solid #f0f0f0; - transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); + gap: var(--spacing-sm); + background: linear-gradient(135deg, var(--bg-light) 0%, var(--card-bg) 100%); + padding: var(--spacing-sm) var(--spacing-lg); + border-radius: var(--border-radius-2xl); + border: 2px solid var(--border-color); + transition: all var(--transition-transform); position: relative; overflow: hidden; } @@ -1023,13 +1023,13 @@ const removeItem = (id: number) => { left: -100%; width: 100%; height: 100%; - background: linear-gradient(90deg, transparent, rgba(255, 80, 0, 0.08), transparent); - transition: left 0.6s ease; + background: linear-gradient(90deg, transparent, rgba(var(--primary-light-rgb), 0.08), transparent); + transition: left var(--transition-slow); } .cart-item:hover .cart-item-quantity { - border-color: #ff5000; - box-shadow: 0 6px 16px rgba(255, 80, 0, 0.15); + border-color: var(--primary-color); + box-shadow: 0 6px 16px rgba(var(--primary-light-rgb), 0.15); transform: translateY(-2px); } @@ -1040,14 +1040,14 @@ const removeItem = (id: number) => { .quantity-btn { width: 40px; height: 40px; - border: 2px solid #f0f0f0; - background: linear-gradient(135deg, #ffffff 0%, #f8f8f8 100%); - border-radius: 50%; + border: 2px solid var(--border-color); + background: linear-gradient(135deg, var(--card-bg) 0%, var(--bg-light) 100%); + border-radius: var(--border-radius-full); cursor: pointer; font-size: 22px; font-weight: 700; - color: #666; - transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); + color: var(--text-secondary); + transition: all var(--transition-transform); display: flex; align-items: center; justify-content: center; @@ -1063,9 +1063,9 @@ const removeItem = (id: number) => { left: 50%; width: 0; height: 0; - background: linear-gradient(135deg, #ff5000 0%, #ff7300 100%); - border-radius: 50%; - transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); + background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%); + border-radius: var(--border-radius-full); + transition: all var(--transition-transform); transform: translate(-50%, -50%); z-index: 0; } @@ -1076,10 +1076,10 @@ const removeItem = (id: number) => { } .quantity-btn:hover { - border-color: #ff5000; + border-color: var(--primary-color); color: #ffffff; transform: scale(1.15); - box-shadow: 0 6px 16px rgba(255, 80, 0, 0.35); + box-shadow: 0 6px 16px rgba(var(--primary-light-rgb), 0.35); } .quantity-btn:active { @@ -1124,22 +1124,22 @@ const removeItem = (id: number) => { width: 80px; height: 40px; text-align: center; - border: 2px solid #f0f0f0; - border-radius: 12px; - font-size: 18px; - color: #333; + border: 2px solid var(--border-color); + border-radius: var(--border-radius-md); + font-size: var(--font-size-lg); + color: var(--text-primary); font-weight: 600; - transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); - background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%); + transition: all var(--transition-transform); + background: linear-gradient(135deg, var(--card-bg) 0%, var(--bg-light) 100%); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05); } .quantity-input:focus { outline: none; - border-color: #ff5000; - box-shadow: 0 0 0 4px rgba(255, 80, 0, 0.2), inset 0 2px 4px rgba(0, 0, 0, 0.08); + border-color: var(--primary-color); + box-shadow: 0 0 0 4px rgba(var(--primary-light-rgb), 0.2), inset 0 2px 4px rgba(0, 0, 0, 0.08); transform: scale(1.1); - background: linear-gradient(135deg, #ffffff 0%, #fff5f5 100%); + background: linear-gradient(135deg, var(--card-bg) 0%, var(--bg-primary-light) 100%); } .quantity-input::-webkit-inner-spin-button, @@ -1174,28 +1174,28 @@ const removeItem = (id: number) => { width: 160px; display: flex; flex-direction: column; - gap: 16px; + gap: var(--spacing-md); align-items: center; - padding: 10px 0; + padding: var(--spacing-sm) 0; } .cart-action-btn { display: flex; align-items: center; - gap: 10px; - padding: 12px 30px; - border-radius: 32px; - font-size: 15px; + gap: var(--spacing-sm); + padding: var(--spacing-sm) var(--spacing-xl); + border-radius: var(--border-radius-2xl); + font-size: var(--font-size-base); font-weight: 600; cursor: pointer; - transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); + transition: all var(--transition-transform); border: 2px solid transparent; position: relative; overflow: hidden; text-decoration: none; min-width: 120px; justify-content: center; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); + box-shadow: var(--shadow-sm); } .cart-action-btn::before { @@ -1205,8 +1205,8 @@ const removeItem = (id: number) => { left: 50%; width: 0; height: 0; - border-radius: 50%; - transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); + border-radius: var(--border-radius-full); + transition: all var(--transition-slow); transform: translate(-50%, -50%); z-index: 0; } @@ -1218,7 +1218,7 @@ const removeItem = (id: number) => { .cart-action-btn:hover { transform: translateY(-3px) scale(1.05); - box-shadow: 0 8px 24px rgba(255, 80, 0, 0.25); + box-shadow: 0 8px 24px rgba(var(--primary-light-rgb), 0.25); } .cart-action-btn:active { @@ -1242,43 +1242,43 @@ const removeItem = (id: number) => { } .delete-btn { - background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%); - border-color: #ff4d4f; - color: #ff4d4f; + background: linear-gradient(135deg, var(--card-bg) 0%, var(--bg-light) 100%); + border-color: var(--error-color); + color: var(--error-color); } .delete-btn::before { - background: linear-gradient(135deg, #ff4d4f 0%, #ff7875 100%); + background: linear-gradient(135deg, var(--error-color) 0%, #ff7875 100%); } .delete-btn:hover { color: #ffffff; - border-color: #ff4d4f; + border-color: var(--error-color); } .favorite-btn { - background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%); - border-color: #ff5000; - color: #ff5000; + background: linear-gradient(135deg, var(--card-bg) 0%, var(--bg-light) 100%); + border-color: var(--primary-color); + color: var(--primary-color); } .favorite-btn::before { - background: linear-gradient(135deg, #ff5000 0%, #ff7300 100%); + background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%); } .favorite-btn:hover { color: #ffffff; - border-color: #ff5000; + border-color: var(--primary-color); } .favorite-btn.favorited { - background: linear-gradient(135deg, #ff5000 0%, #ff7300 100%); + background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%); color: #ffffff; - border-color: #ff5000; + border-color: var(--primary-color); } .favorite-btn.favorited:hover { - background: linear-gradient(135deg, #ff7300 0%, #ff5000 100%); + background: linear-gradient(135deg, var(--primary-hover) 0%, var(--primary-color) 100%); } .favorite-btn.favorited i::before { @@ -1290,9 +1290,9 @@ const removeItem = (id: number) => { display: flex; justify-content: space-between; align-items: center; - padding: 25px 40px; - border-top: 2px solid #f0f0f0; - background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%); + padding: var(--spacing-lg) var(--spacing-xxl); + border-top: 2px solid var(--border-color); + background: linear-gradient(135deg, var(--card-bg) 0%, var(--bg-light) 100%); position: sticky; bottom: 0; z-index: 100; @@ -1301,77 +1301,77 @@ const removeItem = (id: number) => { .footer-left { display: flex; align-items: center; - gap: 30px; + gap: var(--spacing-xl); } .select-all { display: flex; align-items: center; - gap: 8px; + gap: var(--spacing-xs); cursor: pointer; - font-size: 14px; - color: #666; - transition: all 0.3s ease; + font-size: var(--font-size-sm); + color: var(--text-secondary); + transition: all var(--transition-normal); } .select-all:hover { - color: #ff5000; + color: var(--primary-color); } .selected-count { - font-size: 14px; - color: #666; + font-size: var(--font-size-sm); + color: var(--text-secondary); } .count { - font-size: 18px; + font-size: var(--font-size-lg); font-weight: 700; - color: #ff5000; + color: var(--primary-color); } .footer-right { display: flex; align-items: center; - gap: 30px; + gap: var(--spacing-xl); } .total-price { display: flex; align-items: baseline; - gap: 5px; + gap: var(--spacing-xs); } .total-label { - font-size: 16px; - color: #666; + font-size: var(--font-size-base); + color: var(--text-secondary); font-weight: 500; } .total-symbol { - font-size: 20px; - color: #ff5000; + font-size: var(--font-size-lg); + color: var(--primary-color); font-weight: 600; } .total-value { - font-size: 32px; - color: #ff5000; + font-size: var(--font-size-3xl); + color: var(--primary-color); font-weight: 700; } .checkout-btn { - padding: 12px 40px; - font-size: 16px; + padding: var(--spacing-sm) var(--spacing-xxl); + font-size: var(--font-size-base); font-weight: 600; - border-radius: 24px; - background: linear-gradient(135deg, #ff5000 0%, #ff6b00 100%); + border-radius: var(--border-radius-xl); + background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%); border: none; - box-shadow: 0 4px 12px rgba(255, 80, 0, 0.3); - transition: all 0.3s ease; + box-shadow: 0 4px 12px rgba(var(--primary-light-rgb), 0.3); + transition: all var(--transition-normal); } .checkout-btn:hover { transform: translateY(-2px); - box-shadow: 0 6px 20px rgba(255, 80, 0, 0.4); + box-shadow: 0 6px 20px rgba(var(--primary-light-rgb), 0.4); } \ No newline at end of file diff --git a/src/Views/Chat.vue b/src/Views/Chat.vue index 614d09c..90536d4 100644 --- a/src/Views/Chat.vue +++ b/src/Views/Chat.vue @@ -467,52 +467,52 @@ const sendMessage = () => { display: flex; align-items: center; width: 100%; - padding: 10px; - border-bottom: 1px solid #e0e0e0; + padding: var(--spacing-sm); + border-bottom: 1px solid var(--border-color); } .chat-user-info h3 { margin: 0 0 2px; - font-size: 16px; + font-size: var(--font-size-base); font-weight: 600; - color: #333333; + color: var(--text-primary); } .user-status { - font-size: 12px; - color: #4caf50; + font-size: var(--font-size-xs); + color: var(--success-color); margin: 0; } .chat-actions { display: flex; - gap: 10px; + gap: var(--spacing-sm); } .action-btn { width: 36px; height: 36px; - border-radius: 50%; - background-color: #f0f0f0; + border-radius: var(--border-radius-full); + background-color: var(--bg-light); border: none; cursor: pointer; - font-size: 16px; + font-size: var(--font-size-base); display: flex; align-items: center; justify-content: center; - transition: all 0.3s ease; + transition: all var(--transition-normal); } .action-btn:hover { - background-color: #e0e0e0; + background-color: var(--border-color); } /* 聊天历史 */ .chat-history { flex: 1; - padding: 20px; + padding: var(--spacing-xl); overflow-y: auto; - background-color: #f5f5f5; + background-color: var(--bg-color); background-image: url('?prompt=chat%20background%20pattern%20subtle%20light&image_size=landscape_16_9'); background-size: cover; background-position: center; @@ -520,7 +520,7 @@ const sendMessage = () => { .chat-message { display: flex; - margin-bottom: 15px; + margin-bottom: var(--spacing-md); align-items: flex-end; } @@ -530,7 +530,7 @@ const sendMessage = () => { .chat-message.sent .user-avatar { margin-right: 0; - margin-left: 10px; + margin-left: var(--spacing-sm); } .message-content { @@ -544,55 +544,55 @@ const sendMessage = () => { } .message-text { - padding: 10px 15px; - border-radius: 18px; + padding: var(--spacing-sm) var(--spacing-md); + border-radius: var(--message-radius); margin-bottom: 4px; line-height: 1.4; } .chat-message.received .message-text { - background-color: #ffffff; + background-color: var(--card-bg); border-bottom-left-radius: 4px; } .chat-message.sent .message-text { - background-color: #ff5000; + background-color: var(--primary-color); color: #ffffff; border-bottom-right-radius: 4px; } .message-time { - font-size: 11px; - color: #999999; + font-size: var(--font-size-xs); + color: var(--text-tertiary); } /* 消息输入区 */ .chat-input-area { - background-color: #f5f5f5; - padding: 15px 20px; - border-top: 1px solid #e0e0e0; - border-radius: 0 0 10px 0; + background-color: var(--bg-color); + padding: var(--spacing-md) var(--spacing-xl); + border-top: 1px solid var(--border-color); + border-radius: 0 0 var(--border-radius-lg) 0; display: flex; align-items: center; - gap: 10px; + gap: var(--spacing-sm); } .input-container { flex: 1; display: flex; align-items: center; - background-color: #f0f0f0; - border-radius: 24px; - padding: 8px 15px; - gap: 10px; + background-color: var(--bg-light); + border-radius: var(--border-radius-xl); + padding: var(--spacing-xs) var(--spacing-md); + gap: var(--spacing-sm); } .input-btn { background: none; border: none; - font-size: 16px; + font-size: var(--font-size-base); cursor: pointer; - padding: 4px; + padding: var(--spacing-xs); } .message-input { @@ -600,29 +600,29 @@ const sendMessage = () => { border: none; background: none; outline: none; - font-size: 14px; - color: #333333; + font-size: var(--font-size-sm); + color: var(--text-primary); min-width: 0; } .message-input::placeholder { - color: #999999; + color: var(--text-tertiary); } .send-btn { - padding: 8px 20px; - background-color: #ff5000; + padding: var(--spacing-xs) var(--spacing-xl); + background-color: var(--primary-color); color: #ffffff; border: none; - border-radius: 20px; + border-radius: var(--border-radius-xl); cursor: pointer; - font-size: 14px; + font-size: var(--font-size-sm); font-weight: 600; - transition: all 0.3s ease; + transition: all var(--transition-normal); } .send-btn:hover { - background-color: #ff6a00; + background-color: var(--primary-hover); } /* 空状态 */ @@ -632,29 +632,29 @@ const sendMessage = () => { flex-direction: column; align-items: center; justify-content: center; - background-color: #f5f5f5; - padding: 40px; + background-color: var(--bg-color); + padding: var(--spacing-xxl); text-align: center; } .empty-state img { width: 120px; height: 120px; - margin-bottom: 20px; + margin-bottom: var(--spacing-xl); opacity: 0.6; } .empty-state h3 { - margin: 0 0 10px; - font-size: 18px; + margin: 0 0 var(--spacing-md); + font-size: var(--font-size-lg); font-weight: 600; - color: #333333; + color: var(--text-primary); } .empty-state p { margin: 0; - font-size: 14px; - color: #999999; + font-size: var(--font-size-sm); + color: var(--text-tertiary); } /* 响应式设计 */ diff --git a/src/Views/Login.vue b/src/Views/Login.vue index 206a114..540af85 100644 --- a/src/Views/Login.vue +++ b/src/Views/Login.vue @@ -24,12 +24,20 @@
{{ errorMessage }}
+ +
+ +
+ - +

还没有账号？ 立即注册 @@ -51,7 +59,8 @@ const router = useRouter() const loginform = ref({ username: '', - password: '' + password: '', + rememberMe: false }) const errorMessage = ref('') @@ -140,6 +149,37 @@ const login = async () => { box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15); } +/* 记住我复选框样式 */ +.remember-me { + display: flex; + align-items: center; + margin: 15px 0; +} + +.checkbox-label { + display: flex; + align-items: center; + cursor: pointer; + user-select: none; +} + +.checkbox-input { + margin-right: 8px; + width: 16px; + height: 16px; + cursor: pointer; +} + +.checkbox-text { + font-size: 14px; + color: rgba(255, 255, 255, 0.8); + cursor: pointer; +} + +.checkbox-text:hover { + color: #fff; +} + /* 登录头部 */ .login-header { text-align: center; diff --git a/src/Views/User/UpdataAddress.vue b/src/Views/User/UpdataAddress.vue new file mode 100644 index 0000000..d37467b --- /dev/null +++ b/src/Views/User/UpdataAddress.vue @@ -0,0 +1,446 @@ + + + + + diff --git a/src/Views/User/User.vue b/src/Views/User/User.vue index b30379c..3963565 100644 --- a/src/Views/User/User.vue +++ b/src/Views/User/User.vue @@ -5,10 +5,10 @@

- 用户头像 + 用户头像
@@ -29,6 +29,15 @@ 收藏 +
  • + + 关注 +
    • + +
  • + + 我的卡卷包 +
  • 客服 @@ -37,6 +46,7 @@ 帮助中心
    • +
    @@ -79,7 +89,7 @@
    - +
    @@ -115,83 +125,275 @@
    - + + +
    +
    +

    我的订单

    +
    +
    +
    +
    + +
    +
    待付款
    +
    {{ orderCounts.pending_payment }}
    +
    +
    +
    + +
    +
    待发货
    +
    {{ orderCounts.pending_shipment }}
    +
    +
    +
    + +
    +
    待收货
    +
    {{ orderCounts.pending_receipt }}
    +
    +
    +
    + +
    +
    待评价
    +
    {{ orderCounts.pending_review }}
    +
    +
    +
    + +
    +
    已完成
    +
    +
    +
    + + +
    + +
    +
    +

    购物相关

    +
    +
    +
    +
    + +
    +
    购物车
    +
    +
    +
    + +
    +
    收藏夹
    +
    +
    +
    + +
    +
    浏览历史
    +
    +
    +
    + +
    +
    关注店铺
    +
    +
    +
    + + +
    +
    +

    优惠相关

    +
    +
    +
    +
    + +
    +
    红包
    +
    {{ user.couponCount }}
    +
    +
    +
    + +
    +
    优惠券
    +
    {{ user.discountCount }}
    +
    +
    +
    + +
    +
    淘币
    +
    {{ user.taoCoin }}
    +
    +
    +
    + +
    +
    积分
    +
    {{ user.points }}
    +
    +
    +
    + + +
    +
    +

    账户相关

    +
    +
    +
    +
    + +
    +
    账户设置
    +
    +
    +
    + +
    +
    收货地址
    +
    +
    +
    + +
    +
    客服中心
    +
    +
    +
    + +
    +
    帮助中心
    +
    +
    +
    +
    - +

    地址管理

    - +
    -
    +
    - 张三 - 138****8888 - 默认 + {{ addressItem.name }} + {{ addressItem.phone }} + 默认
    - 北京市朝阳区建国路88号SOHO现代城A座2801室 + {{ addressItem.province }}{{ addressItem.city }}{{ addressItem.district }}{{ addressItem.detail }}
    - - + +
    -
    -
    - 李四 - 139****9999 -
    -
    - 上海市浦东新区陆家嘴环路1000号汇丰银行大厦35楼 -
    -
    - - -
    + +
    +

    暂无地址，请添加新地址

    - +

    我的订单

    - - - - - - +
    + + + + + + +
    +
    + + +
    -
    +
    +
    - 2024-01-01 10:00:00 - 已完成 +
    + 下单时间：{{ order.createTime }} + 订单编号：{{ order.orderId }} + {{ order.shopName }} +
    + {{ order.statusText }}
    +
    - 商品图片 +
    + +
    -

    商品名称

    -

    商品描述

    -
    ¥99.99
    +

    {{ order.goods.name }}

    +

    {{ order.goods.description }}

    +
    +
    x{{ order.goods.quantity }}
    +
    {{ order.receiverName }}
    +
    + + ¥{{ order.totalAmount.toFixed(2) }} + +
    {{ order.paymentMethod === 'online' ? '线上支付' : '到付' }}
    +
    +
    {{ order.statusText }}
    +
    + + + + + + + +
    -
    - 共1件商品 合计：¥99.99 - -
    +
    + +
    + +
    + +
    +

    暂无订单

    - +
    @@ -203,7 +405,9 @@
    - 收藏商品 + 收藏商品

    商品名称

    商品描述

    @@ -212,7 +416,9 @@
    - 收藏商品 + 收藏商品

    商品名称

    商品描述

    @@ -222,7 +428,40 @@
    - + +
    +
    +

    关注店铺

    + +
    + +
    @@ -255,7 +494,7 @@
    - +
    @@ -296,26 +535,56 @@