Compare commits
2 Commits
0c07d33bf9
...
73cf25e586
| Author | SHA1 | Date | |
|---|---|---|---|
|
73cf25e586 | ||
|
|
c287650fbb |
278
Api.text
Normal file
278
Api.text
Normal file
@@ -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 // 分类图标
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
@@ -8,5 +8,6 @@
|
||||
import { RouterView } from "vue-router";
|
||||
import Herde from "@/Views/Herde.vue";
|
||||
import './Style/App.css'
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
927
src/Component/business/SettlementLite.vue
Normal file
927
src/Component/business/SettlementLite.vue
Normal file
@@ -0,0 +1,927 @@
|
||||
<!-- 结算页 用于展示购物车中的商品信息 并确认结算 -->
|
||||
<template>
|
||||
<a-modal v-model:visible="visible" width="800px" @ok="afterClose" @cancel="cancel" class="settlement-modal"
|
||||
:footer-extra="null" :footer="null">
|
||||
<!-- 结算界面 左右结构 -->
|
||||
<div class="settlement-container">
|
||||
<!-- 左侧 结算列表 -->
|
||||
<div class="settlement-left">
|
||||
<!-- 地址信息 -->
|
||||
<div class="address-info">
|
||||
<div class="address-item" @click="showAddressModal = true">
|
||||
<div class="address-header">
|
||||
<span class="address-name">{{ selectedAddress.name }}</span>
|
||||
<span class="address-phone">{{ selectedAddress.phone }}</span>
|
||||
<span v-if="selectedAddress.isDefault" class="address-tag default">默认</span>
|
||||
</div>
|
||||
<div class="address-detail">
|
||||
{{ selectedAddress.province }}{{ selectedAddress.city }}{{ selectedAddress.district }}{{
|
||||
selectedAddress.detail }}
|
||||
</div>
|
||||
</div>
|
||||
<a-modal v-model:visible="showAddressModal" width="600px" @ok="afterCloseAddressModal"
|
||||
:after-close="afterCloseAddressModal" :footer-extra="null" :footer="null">
|
||||
<!-- 顶部导航 地址列表 添加地址 -->
|
||||
<div class="address-nav">
|
||||
<span class="nav-item" :class="{ active: activeAddressTab === 'list' }"
|
||||
@click="switchAddressTab('list')">
|
||||
地址列表
|
||||
</span>
|
||||
<span class="nav-item" :class="{ active: activeAddressTab === 'add' }"
|
||||
@click="switchAddressTab('add')">
|
||||
添加地址
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<!-- 地址列表 -->
|
||||
<div class="address-list" v-if="activeAddressTab === 'list'">
|
||||
<div class="address-item" :class="{ active: selectedAddress.id === address.id }"
|
||||
v-for="address in addresses" :key="address.id" @click="selectAddress(address)">
|
||||
<div class="address-header">
|
||||
<span class="address-name">{{ address.name }}</span>
|
||||
<span class="address-phone">{{ address.phone }}</span>
|
||||
<span v-if="address.isDefault" class="address-tag default">默认</span>
|
||||
</div>
|
||||
<div class="address-detail">
|
||||
{{ address.province }}{{ address.city }}{{ address.district }}{{ address.detail
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="addresses.length === 0" class="empty-address">
|
||||
<p>暂无地址，请添加新地址</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 添加地址表单 -->
|
||||
<div class="add-address-form" v-if="activeAddressTab === 'add'">
|
||||
<div class="form-item">
|
||||
<label>收货人</label>
|
||||
<input type="text" v-model="newAddressForm.name" placeholder="请输入收货人姓名">
|
||||
</div>
|
||||
|
||||
<div class="form-item">
|
||||
<label>手机号</label>
|
||||
<input type="tel" v-model="newAddressForm.phone" placeholder="请输入手机号码">
|
||||
</div>
|
||||
|
||||
<div class="form-item">
|
||||
<label>所在地区</label>
|
||||
<!-- 省份选择 -->
|
||||
<input type="text" :readonly="true" @click="showAddressComponent = true"
|
||||
v-model="address" placeholder="省市县">
|
||||
</div>
|
||||
<!-- 所在省份被选择后，显示城市选择器 -->
|
||||
<AddressComponent @address="handleAddressChange"
|
||||
v-model:visible="showAddressComponent" />
|
||||
|
||||
<div class="form-item">
|
||||
<label>详细地址</label>
|
||||
<textarea v-model="newAddressForm.detail" placeholder="请输入详细地址信息"
|
||||
rows="3"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="form-item checkbox-item">
|
||||
<label>
|
||||
<input type="checkbox" v-model="newAddressForm.isDefault">
|
||||
设为默认地址
|
||||
</label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
</div>
|
||||
<!-- 商品信息 -->
|
||||
<div class="settlement-section goods-section">
|
||||
<h3 class="section-title">商品信息</h3>
|
||||
<div class="goods-list">
|
||||
<div v-for="product in products" :key="product.id" class="goods-item">
|
||||
<div class="goods-image">
|
||||
<img :src="product.image" :alt="product.name">
|
||||
</div>
|
||||
<div class="goods-info">
|
||||
<h4 class="goods-name">{{ product.name }}</h4>
|
||||
<p class="goods-desc">{{ product.description }}</p>
|
||||
<div class="goods-price-quantity">
|
||||
<span class="goods-price">¥{{ product.price.toFixed(2) }}</span>
|
||||
<span class="goods-quantity">x{{ product.quantity }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 价格信息 -->
|
||||
<div class="settlement-section price-section">
|
||||
<h3 class="section-title">价格明细</h3>
|
||||
<div class="price-details">
|
||||
<div class="price-item">
|
||||
<span class="price-label">商品总价</span>
|
||||
<span class="price-value">¥{{ totalPrice.toFixed(2) }}</span>
|
||||
</div>
|
||||
<div class="price-item">
|
||||
<span class="price-label">运费</span>
|
||||
<span class="price-value">¥{{ shippingFee.toFixed(2) }}</span>
|
||||
</div>
|
||||
<div class="price-item discount">
|
||||
<span class="price-label">优惠</span>
|
||||
<span class="price-value discount">-¥{{ discountAmount.toFixed(2) }}</span>
|
||||
</div>
|
||||
<div class="price-item total">
|
||||
<span class="price-label">实付金额</span>
|
||||
<span class="price-value total">¥{{ actualPrice.toFixed(2) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 发票信息 -->
|
||||
<div class="settlement-section invoice-section">
|
||||
<h3 class="section-title">发票信息</h3>
|
||||
<div class="invoice-info">
|
||||
<div class="invoice-type">
|
||||
<label>
|
||||
<input type="radio" v-model="invoiceType" value="personal"> 个人发票
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" v-model="invoiceType" value="company"> 企业发票
|
||||
</label>
|
||||
</div>
|
||||
<div v-if="invoiceType === 'company'" class="company-info">
|
||||
<input type="text" v-model="companyName" placeholder="请输入企业名称">
|
||||
<input type="text" v-model="taxNumber" placeholder="请输入税号">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧 结算信息 -->
|
||||
<div class="settlement-right">
|
||||
<div class="payment-section">
|
||||
<h3 class="section-title">支付方式</h3>
|
||||
<div class="payment-methods">
|
||||
<div class="payment-item" :class="{ active: selectedPayment === 'balance' }"
|
||||
@click="selectedPayment = 'balance'">
|
||||
<div class="payment-icon balance-icon"></div>
|
||||
<span>余额支付</span>
|
||||
</div>
|
||||
<div class="payment-item" :class="{ active: selectedPayment === 'bank' }"
|
||||
@click="selectedPayment = 'bank'">
|
||||
<div class="payment-icon bank-icon"></div>
|
||||
<span>银行卡</span>
|
||||
</div>
|
||||
<div class="payment-item" :class="{ active: selectedPayment === 'wechat' }"
|
||||
@click="selectedPayment = 'wechat'">
|
||||
<div class="payment-icon wechat-icon"></div>
|
||||
<span>微信支付</span>
|
||||
</div>
|
||||
<div class="payment-item" :class="{ active: selectedPayment === 'alipay' }"
|
||||
@click="selectedPayment = 'alipay'">
|
||||
<div class="payment-icon alipay-icon"></div>
|
||||
<span>支付宝</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 最终价格 -->
|
||||
<div class="settlement-section final-price-section">
|
||||
<div class="settlement-footer">
|
||||
<div class="footer-price">
|
||||
<span class="footer-price-value">¥{{ actualPrice.toFixed(2) }}</span>
|
||||
<span class="footer-price-value discount">共减：¥{{ discountAmount.toFixed(2) }}</span>
|
||||
|
||||
</div>
|
||||
<div class="footer-buttons">
|
||||
<a-button type="primary" @click="submit" class="submit-btn">确认订单并支付</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch } from 'vue'
|
||||
import type { Address, Product } from '@/Util/Type'
|
||||
import AddressComponent from '@/Component/common/Address.vue';
|
||||
|
||||
// Props
|
||||
const props = defineProps({
|
||||
products: {
|
||||
type: Array as () => Product[],
|
||||
default: () => []
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['submit', 'update:visible'])
|
||||
|
||||
// 响应式数据
|
||||
const visible = ref(false)
|
||||
const addresses = ref<Address[]>([
|
||||
{
|
||||
id: 1,
|
||||
name: '张三',
|
||||
phone: '138****8888',
|
||||
province: '北京市',
|
||||
city: '北京市',
|
||||
district: '朝阳区',
|
||||
detail: '三里屯SOHO A座 2001室',
|
||||
isDefault: true
|
||||
},
|
||||
{
|
||||
|
||||
id: 1,
|
||||
name: '张三',
|
||||
phone: '138****8888',
|
||||
province: '北京市',
|
||||
city: '北京市',
|
||||
district: '朝阳区',
|
||||
detail: '三里屯SOHO A座 2001室',
|
||||
isDefault: false
|
||||
}
|
||||
|
||||
])
|
||||
|
||||
const invoiceType = ref('personal')
|
||||
const companyName = ref('')
|
||||
const taxNumber = ref('')
|
||||
const selectedPayment = ref('wechat')
|
||||
const orderRemark = ref('')
|
||||
// 地址弹窗显示状态
|
||||
const showAddressModal = ref(false)
|
||||
// 地址组件显示状态
|
||||
const showAddressComponent = ref(false)
|
||||
//省市区拼接
|
||||
const address = computed(() => {
|
||||
if (newAddressForm.value.province && newAddressForm.value.city && newAddressForm.value.district) {
|
||||
return newAddressForm.value.province + ' / ' + newAddressForm.value.city + ' / ' + newAddressForm.value.district
|
||||
}
|
||||
return ''
|
||||
})
|
||||
|
||||
|
||||
// 地址弹窗相关数据
|
||||
const activeAddressTab = ref('list') // 'list' 或 'add'
|
||||
const newAddressForm = ref({
|
||||
name: '',
|
||||
phone: '',
|
||||
province: '',
|
||||
city: '',
|
||||
district: '',
|
||||
detail: '',
|
||||
isDefault: false
|
||||
})
|
||||
|
||||
// 方法 选择isDefault为true的数据
|
||||
const selectedAddress = ref<Address>(addresses.value.find(addr => addr.isDefault) as Address)
|
||||
|
||||
// 地址组件选择地址后，更新表单数据
|
||||
const handleAddressChange = (address: Address) => {
|
||||
newAddressForm.value.province = address.province
|
||||
newAddressForm.value.city = address.city
|
||||
newAddressForm.value.district = address.district
|
||||
console.log('选择的地址:', address)
|
||||
}
|
||||
|
||||
const switchAddressTab = (tab: string) => {
|
||||
activeAddressTab.value = tab
|
||||
if (tab === 'add') {
|
||||
// 重置表单
|
||||
newAddressForm.value = {
|
||||
name: '',
|
||||
phone: '',
|
||||
province: '',
|
||||
city: '',
|
||||
district: '',
|
||||
detail: '',
|
||||
isDefault: false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const selectAddress = (address: Address) => {
|
||||
showAddressModal.value = false
|
||||
}
|
||||
|
||||
|
||||
const afterCloseAddressModal = () => {
|
||||
// 重置状态
|
||||
activeAddressTab.value = 'list'
|
||||
newAddressForm.value = {
|
||||
name: '',
|
||||
phone: '',
|
||||
province: '',
|
||||
city: '',
|
||||
district: '',
|
||||
detail: '',
|
||||
isDefault: false
|
||||
}
|
||||
|
||||
}
|
||||
// 计算属性
|
||||
const totalPrice = computed(() => {
|
||||
return props.products.reduce((sum, product) => sum + product.price * product.quantity, 0)
|
||||
})
|
||||
|
||||
const shippingFee = computed(() => {
|
||||
return totalPrice.value >= 99 ? 0 : 10
|
||||
})
|
||||
|
||||
const discountAmount = computed(() => {
|
||||
return Math.min(totalPrice.value * 0.1, 50)
|
||||
})
|
||||
|
||||
const actualPrice = computed(() => {
|
||||
return totalPrice.value + shippingFee.value - discountAmount.value
|
||||
})
|
||||
|
||||
|
||||
|
||||
const submit = () => {
|
||||
console.log('确认结算')
|
||||
console.log('选中的地址:', addresses.value)
|
||||
console.log('选中的支付方式:', selectedPayment.value)
|
||||
console.log('订单备注:', orderRemark.value)
|
||||
console.log('实付金额:', actualPrice.value)
|
||||
|
||||
// 发送结算事件
|
||||
emit('submit', {
|
||||
address: addresses.value,
|
||||
payment: selectedPayment.value,
|
||||
remark: orderRemark.value,
|
||||
totalAmount: actualPrice.value
|
||||
})
|
||||
|
||||
// 关闭弹窗
|
||||
emit('update:visible', false)
|
||||
}
|
||||
|
||||
const cancel = () => {
|
||||
emit('update:visible', false)
|
||||
}
|
||||
|
||||
const afterClose = () => {
|
||||
// 重置表单
|
||||
companyName.value = ''
|
||||
taxNumber.value = ''
|
||||
orderRemark.value = ''
|
||||
console.log('afterClose')
|
||||
console.log('visible.value:', visible.value)
|
||||
emit('update:visible', false)
|
||||
}
|
||||
|
||||
// 监听商品变化
|
||||
watch(() => props.products, (newProducts) => {
|
||||
if (newProducts.length > 0) {
|
||||
visible.value = true
|
||||
}
|
||||
}, { deep: true })
|
||||
|
||||
// 监听可见性变化
|
||||
watch(() => visible.value, (newVal) => {
|
||||
visible.value = newVal
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.settlement-modal {
|
||||
.ant-modal-content {
|
||||
border-radius: var(--border-radius-md);
|
||||
}
|
||||
|
||||
.ant-modal-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: var(--text-dark);
|
||||
}
|
||||
}
|
||||
|
||||
.settlement-container {
|
||||
display: flex;
|
||||
gap: var(--spacing-lg);
|
||||
background-color: var(--bg-white);
|
||||
}
|
||||
|
||||
/* 左侧结算列表 */
|
||||
.settlement-left {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
max-height: 550px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* 右侧结算信息 */
|
||||
.settlement-right {
|
||||
width: 350px;
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
/* 通用区块样式 */
|
||||
.settlement-section {
|
||||
margin: var(--spacing-md) 0;
|
||||
padding: var(--spacing-md);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--text-dark);
|
||||
margin: 0 0 var(--spacing-md);
|
||||
padding-bottom: var(--spacing-xs);
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
}
|
||||
|
||||
/* 地址区块 */
|
||||
.address-item {
|
||||
padding: var(--spacing-md);
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: var(--border-radius-sm);
|
||||
margin-bottom: var(--spacing-sm);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-normal) ease;
|
||||
}
|
||||
|
||||
.address-item:hover {
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 2px var(--primary-light);
|
||||
}
|
||||
|
||||
|
||||
.address-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-sm);
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.address-name {
|
||||
font-weight: 600;
|
||||
color: var(--text-dark);
|
||||
}
|
||||
|
||||
.address-phone {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.address-tag {
|
||||
padding: var(--spacing-xs) var(--spacing-sm);
|
||||
border-radius: var(--border-radius-full);
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.address-tag.default {
|
||||
background-color: var(--primary-color);
|
||||
color: var(--bg-white);
|
||||
}
|
||||
|
||||
.address-detail {
|
||||
color: var(--text-secondary);
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.add-address-btn {
|
||||
padding: var(--spacing-md);
|
||||
border: 1px dashed var(--border-light);
|
||||
border-radius: var(--border-radius-sm);
|
||||
text-align: center;
|
||||
color: var(--primary-color);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-normal) ease;
|
||||
}
|
||||
|
||||
.add-address-btn:hover {
|
||||
border-color: var(--primary-color);
|
||||
background-color: var(--primary-light);
|
||||
}
|
||||
|
||||
/* 地址弹窗样式 */
|
||||
.address-nav {
|
||||
display: flex;
|
||||
margin-bottom: var(--spacing-md);
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
padding: var(--spacing-sm) var(--spacing-md);
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
color: var(--text-secondary);
|
||||
border-bottom: 2px solid transparent;
|
||||
transition: all var(--transition-normal) ease;
|
||||
}
|
||||
|
||||
.nav-item:hover {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.nav-item.active {
|
||||
color: var(--primary-color);
|
||||
border-bottom-color: var(--primary-color);
|
||||
}
|
||||
|
||||
.address-list {
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.address-list .address-item {
|
||||
margin-bottom: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.empty-address {
|
||||
padding: var(--spacing-xl) 0;
|
||||
text-align: center;
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
/* 添加地址表单样式 */
|
||||
.add-address-form {
|
||||
padding: var(--spacing-sm) 0;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.form-item label {
|
||||
display: block;
|
||||
margin-bottom: var(--spacing-xs);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--text-dark);
|
||||
}
|
||||
|
||||
.form-item input[type="text"],
|
||||
.form-item input[type="tel"],
|
||||
.form-item select,
|
||||
.form-item textarea {
|
||||
width: 100%;
|
||||
padding: var(--spacing-sm);
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: var(--border-radius-sm);
|
||||
font-size: 14px;
|
||||
transition: all var(--transition-normal) ease;
|
||||
background-color: var(--bg-white);
|
||||
}
|
||||
|
||||
.form-item input[type="text"]:focus,
|
||||
.form-item input[type="tel"]:focus,
|
||||
.form-item select:focus,
|
||||
.form-item textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 2px var(--primary-light);
|
||||
}
|
||||
|
||||
|
||||
|
||||
.form-item.checkbox-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.form-item.checkbox-item label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-xs);
|
||||
cursor: pointer;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.form-item.checkbox-item input[type="checkbox"] {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
gap: var(--spacing-sm);
|
||||
justify-content: flex-end;
|
||||
margin-top: var(--spacing-lg);
|
||||
padding-top: var(--spacing-lg);
|
||||
border-top: 1px solid var(--border-light);
|
||||
}
|
||||
|
||||
.form-actions button {
|
||||
padding: var(--spacing-sm) var(--spacing-md);
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: var(--border-radius-sm);
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-normal) ease;
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
background-color: var(--bg-white);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.cancel-btn:hover {
|
||||
border-color: var(--primary-color);
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.save-btn {
|
||||
background-color: var(--primary-color);
|
||||
color: var(--bg-white);
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
|
||||
.save-btn:hover {
|
||||
background-color: var(--primary-hover);
|
||||
border-color: var(--primary-hover);
|
||||
}
|
||||
|
||||
/* 商品区块 */
|
||||
.goods-item {
|
||||
display: flex;
|
||||
gap: var(--spacing-md);
|
||||
padding: var(--spacing-md);
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: var(--border-radius-sm);
|
||||
margin-bottom: var(--spacing-sm);
|
||||
transition: all var(--transition-normal) ease;
|
||||
}
|
||||
|
||||
.goods-item:hover {
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.goods-image {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: var(--border-radius-sm);
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.goods-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.goods-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.goods-name {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--text-dark);
|
||||
margin: 0 0 var(--spacing-xs);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.goods-desc {
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
margin: 0 0 var(--spacing-xs);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.goods-price-quantity {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.goods-price {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--error-color);
|
||||
}
|
||||
|
||||
.goods-quantity {
|
||||
font-size: 14px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* 价格区块 */
|
||||
.price-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: var(--spacing-xs);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.price-label {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.price-value {
|
||||
color: var(--text-dark);
|
||||
}
|
||||
|
||||
.price-item.discount .price-value {
|
||||
color: var(--success-color);
|
||||
}
|
||||
|
||||
.price-item.total {
|
||||
margin-top: var(--spacing-sm);
|
||||
padding-top: var(--spacing-sm);
|
||||
border-top: 1px solid var(--border-light);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.price-item.total .price-value {
|
||||
color: var(--error-color);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* 发票区块 */
|
||||
.invoice-type {
|
||||
display: flex;
|
||||
gap: var(--spacing-lg);
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.invoice-type label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-xs);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.company-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.company-info input {
|
||||
padding: var(--spacing-xs) var(--spacing-sm);
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: var(--border-radius-sm);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.company-info input:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 2px var(--primary-light);
|
||||
}
|
||||
|
||||
/* 支付方式区块 */
|
||||
.payment-methods {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.payment-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-sm);
|
||||
padding: var(--spacing-md);
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: var(--border-radius-sm);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-normal) ease;
|
||||
}
|
||||
|
||||
.payment-item:hover {
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 2px var(--primary-light);
|
||||
}
|
||||
|
||||
.payment-item.active {
|
||||
border-color: var(--primary-color);
|
||||
background-color: var(--primary-light);
|
||||
}
|
||||
|
||||
.payment-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: var(--border-radius-sm);
|
||||
background-color: var(--bg-light);
|
||||
}
|
||||
|
||||
.balance-icon {
|
||||
background-color: var(--primary-color);
|
||||
}
|
||||
|
||||
.bank-icon {
|
||||
background-color: var(--info-color);
|
||||
}
|
||||
|
||||
.wechat-icon {
|
||||
background-color: var(--success-color);
|
||||
}
|
||||
|
||||
.alipay-icon {
|
||||
background-color: var(--warning-color);
|
||||
}
|
||||
|
||||
/* 订单备注区块 */
|
||||
.remark-section textarea {
|
||||
width: 100%;
|
||||
padding: var(--spacing-sm);
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: var(--border-radius-sm);
|
||||
font-size: 14px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.remark-section textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 2px var(--primary-light);
|
||||
}
|
||||
|
||||
/* 最终价格区块 */
|
||||
.final-price {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: var(--spacing-md);
|
||||
background-color: var(--bg-light);
|
||||
border-radius: var(--border-radius-sm);
|
||||
}
|
||||
|
||||
.final-price-label {
|
||||
font-weight: 600;
|
||||
color: var(--text-dark);
|
||||
}
|
||||
|
||||
.final-price-value {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: var(--error-color);
|
||||
}
|
||||
/* 最终价格区块样式 */
|
||||
.settlement-section.final-price-section {
|
||||
padding: 0;
|
||||
margin: 8px 0;
|
||||
position: absolute;
|
||||
bottom: var(--spacing-md);
|
||||
}
|
||||
/* 底部区块 */
|
||||
.settlement-footer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
padding: 0 25px;
|
||||
}
|
||||
|
||||
.footer-price {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.footer-price-value {
|
||||
margin-left: 10px;
|
||||
font-size: 34px;
|
||||
font-weight: 700;
|
||||
color: var(--error-color);
|
||||
}
|
||||
|
||||
.footer-price-value.discount {
|
||||
margin-left: 0;
|
||||
font-size: 18px;
|
||||
padding: var(--spacing-xs);
|
||||
color: var(--success-color);
|
||||
}
|
||||
|
||||
.footer-buttons {
|
||||
display: flex;
|
||||
gap: var(--spacing-sm);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
min-width: 300px;
|
||||
height: 48px;
|
||||
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.settlement-container {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.settlement-right {
|
||||
width: 100%;
|
||||
min-width: unset;
|
||||
}
|
||||
|
||||
.settlement-footer {
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-sm);
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.footer-buttons {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
379
src/Component/common/Address.vue
Normal file
379
src/Component/common/Address.vue
Normal file
@@ -0,0 +1,379 @@
|
||||
<!-- 地址组件 当visible为true时 才会显示类似于弹窗 省>市>县 只有选择前一个后一个选项才会显示 -->
|
||||
<!-- 省市县选择器 返回选中的省市县信息 -->
|
||||
<template>
|
||||
<a-modal :visible.sync="visible" title="选择地址" width="300px" :close-on-click-modal="false" :after-close="close" :footer-extra="null" :footer="null">
|
||||
<div class="address-form-content">
|
||||
<!-- 上下结构 -->
|
||||
<div class="form-tab">
|
||||
<!-- 选项卡 省>市>县只有选择前一个后一个选项才会显示 -->
|
||||
<div class="tab-item" :class="{ active: activeTab === 'province' }">
|
||||
省份
|
||||
</div>
|
||||
<div class="tab-item" :class="{ active: activeTab === 'city', disabled: !selectedProvince }">
|
||||
城市
|
||||
</div>
|
||||
<div class="tab-item" :class="{ active: activeTab === 'district', disabled: !selectedCity }">
|
||||
区县
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-content">
|
||||
<!-- 选项卡内容 根据选项卡显示不同的内容 -->
|
||||
<div v-if="activeTab === 'province'" class="tab-content">
|
||||
<div class="region-item" v-for="province in provinces" :key="province.value"
|
||||
@click="selectProvince(province)">
|
||||
{{ province.label }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else-if="activeTab === 'city'" class="tab-content">
|
||||
<div class="region-item" v-for="city in cities" :key="city.value" @click="selectCity(city)">
|
||||
{{ city.label }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else-if="activeTab === 'district'" class="tab-content">
|
||||
<div class="region-item" v-for="district in districts" :key="district.value"
|
||||
@click="selectDistrict(district)">
|
||||
{{ district.label }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
const emit = defineEmits(['update:visible', 'address'])
|
||||
|
||||
// 响应式数据
|
||||
const activeTab = ref('province')
|
||||
const selectedProvince = ref('')
|
||||
const selectedCity = ref('')
|
||||
const selectedDistrict = ref('')
|
||||
|
||||
// 省份数据
|
||||
const provinces = ref([
|
||||
{ value: '北京市', label: '北京市' },
|
||||
{ value: '上海市', label: '上海市' },
|
||||
{ value: '广东省', label: '广东省' },
|
||||
{ value: '江苏省', label: '江苏省' },
|
||||
{ value: '浙江省', label: '浙江省' },
|
||||
{ value: '四川省', label: '四川省' },
|
||||
{ value: '湖北省', label: '湖北省' },
|
||||
{ value: '湖南省', label: '湖南省' },
|
||||
{ value: '山东省', label: '山东省' },
|
||||
{ value: '河南省', label: '河南省' }
|
||||
])
|
||||
|
||||
// 城市数据（根据省份动态生成）
|
||||
const cities = computed(() => {
|
||||
const cityMap: Record<string, Array<{ value: string; label: string }>> = {
|
||||
'北京市': [{ value: '北京市', label: '北京市' }],
|
||||
'上海市': [{ value: '上海市', label: '上海市' }],
|
||||
'广东省': [
|
||||
{ value: '广州市', label: '广州市' },
|
||||
{ value: '深圳市', label: '深圳市' },
|
||||
{ value: '东莞市', label: '东莞市' },
|
||||
{ value: '佛山市', label: '佛山市' },
|
||||
{ value: '珠海市', label: '珠海市' }
|
||||
],
|
||||
'江苏省': [
|
||||
{ value: '南京市', label: '南京市' },
|
||||
{ value: '苏州市', label: '苏州市' },
|
||||
{ value: '无锡市', label: '无锡市' },
|
||||
{ value: '常州市', label: '常州市' },
|
||||
{ value: '南通市', label: '南通市' }
|
||||
],
|
||||
'浙江省': [
|
||||
{ value: '杭州市', label: '杭州市' },
|
||||
{ value: '宁波市', label: '宁波市' },
|
||||
{ value: '温州市', label: '温州市' },
|
||||
{ value: '嘉兴市', label: '嘉兴市' },
|
||||
{ value: '湖州市', label: '湖州市' }
|
||||
],
|
||||
'四川省': [
|
||||
{ value: '成都市', label: '成都市' },
|
||||
{ value: '绵阳市', label: '绵阳市' },
|
||||
{ value: '德阳市', label: '德阳市' },
|
||||
{ value: '自贡市', label: '自贡市' },
|
||||
{ value: '泸州市', label: '泸州市' }
|
||||
],
|
||||
'湖北省': [
|
||||
{ value: '武汉市', label: '武汉市' },
|
||||
{ value: '黄石市', label: '黄石市' },
|
||||
{ value: '十堰市', label: '十堰市' },
|
||||
{ value: '宜昌市', label: '宜昌市' },
|
||||
{ value: '襄阳市', label: '襄阳市' }
|
||||
],
|
||||
'湖南省': [
|
||||
{ value: '长沙市', label: '长沙市' },
|
||||
{ value: '株洲市', label: '株洲市' },
|
||||
{ value: '湘潭市', label: '湘潭市' },
|
||||
{ value: '衡阳市', label: '衡阳市' },
|
||||
{ value: '邵阳市', label: '邵阳市' }
|
||||
],
|
||||
'山东省': [
|
||||
{ value: '济南市', label: '济南市' },
|
||||
{ value: '青岛市', label: '青岛市' },
|
||||
{ value: '烟台市', label: '烟台市' },
|
||||
{ value: '潍坊市', label: '潍坊市' },
|
||||
{ value: '临沂市', label: '临沂市' }
|
||||
],
|
||||
'河南省': [
|
||||
{ value: '郑州市', label: '郑州市' },
|
||||
{ value: '开封市', label: '开封市' },
|
||||
{ value: '洛阳市', label: '洛阳市' },
|
||||
{ value: '平顶山市', label: '平顶山市' },
|
||||
{ value: '安阳市', label: '安阳市' }
|
||||
]
|
||||
}
|
||||
return cityMap[selectedProvince.value] || []
|
||||
})
|
||||
|
||||
// 区县数据（根据城市动态生成）
|
||||
const districts = computed(() => {
|
||||
const districtMap: Record<string, Array<{ value: string; label: string }>> = {
|
||||
'北京市': [
|
||||
{ value: '东城区', label: '东城区' },
|
||||
{ value: '西城区', label: '西城区' },
|
||||
{ value: '朝阳区', label: '朝阳区' },
|
||||
{ value: '海淀区', label: '海淀区' },
|
||||
{ value: '丰台区', label: '丰台区' }
|
||||
],
|
||||
'上海市': [
|
||||
{ value: '黄浦区', label: '黄浦区' },
|
||||
{ value: '徐汇区', label: '徐汇区' },
|
||||
{ value: '长宁区', label: '长宁区' },
|
||||
{ value: '静安区', label: '静安区' },
|
||||
{ value: '普陀区', label: '普陀区' }
|
||||
],
|
||||
'广州市': [
|
||||
{ value: '天河区', label: '天河区' },
|
||||
{ value: '越秀区', label: '越秀区' },
|
||||
{ value: '海珠区', label: '海珠区' },
|
||||
{ value: '荔湾区', label: '荔湾区' },
|
||||
{ value: '白云区', label: '白云区' }
|
||||
],
|
||||
'深圳市': [
|
||||
{ value: '福田区', label: '福田区' },
|
||||
{ value: '罗湖区', label: '罗湖区' },
|
||||
{ value: '南山区', label: '南山区' },
|
||||
{ value: '宝安区', label: '宝安区' },
|
||||
{ value: '龙岗区', label: '龙岗区' }
|
||||
],
|
||||
'南京市': [
|
||||
{ value: '玄武区', label: '玄武区' },
|
||||
{ value: '秦淮区', label: '秦淮区' },
|
||||
{ value: '建邺区', label: '建邺区' },
|
||||
{ value: '鼓楼区', label: '鼓楼区' },
|
||||
{ value: '浦口区', label: '浦口区' }
|
||||
],
|
||||
'苏州市': [
|
||||
{ value: '姑苏区', label: '姑苏区' },
|
||||
{ value: '虎丘区', label: '虎丘区' },
|
||||
{ value: '吴中区', label: '吴中区' },
|
||||
{ value: '相城区', label: '相城区' },
|
||||
{ value: '吴江区', label: '吴江区' }
|
||||
],
|
||||
'杭州市': [
|
||||
{ value: '上城区', label: '上城区' },
|
||||
{ value: '下城区', label: '下城区' },
|
||||
{ value: '江干区', label: '江干区' },
|
||||
{ value: '拱墅区', label: '拱墅区' },
|
||||
{ value: '西湖区', label: '西湖区' }
|
||||
],
|
||||
'宁波市': [
|
||||
{ value: '海曙区', label: '海曙区' },
|
||||
{ value: '江北区', label: '江北区' },
|
||||
{ value: '北仑区', label: '北仑区' },
|
||||
{ value: '镇海区', label: '镇海区' },
|
||||
{ value: '鄞州区', label: '鄞州区' }
|
||||
],
|
||||
'成都市': [
|
||||
{ value: '锦江区', label: '锦江区' },
|
||||
{ value: '青羊区', label: '青羊区' },
|
||||
{ value: '金牛区', label: '金牛区' },
|
||||
{ value: '武侯区', label: '武侯区' },
|
||||
{ value: '成华区', label: '成华区' }
|
||||
],
|
||||
'武汉市': [
|
||||
{ value: '江岸区', label: '江岸区' },
|
||||
{ value: '江汉区', label: '江汉区' },
|
||||
{ value: '硚口区', label: '硚口区' },
|
||||
{ value: '汉阳区', label: '汉阳区' },
|
||||
{ value: '武昌区', label: '武昌区' }
|
||||
],
|
||||
'长沙市': [
|
||||
{ value: '芙蓉区', label: '芙蓉区' },
|
||||
{ value: '天心区', label: '天心区' },
|
||||
{ value: '岳麓区', label: '岳麓区' },
|
||||
{ value: '开福区', label: '开福区' },
|
||||
{ value: '雨花区', label: '雨花区' }
|
||||
],
|
||||
'济南市': [
|
||||
{ value: '历下区', label: '历下区' },
|
||||
{ value: '市中区', label: '市中区' },
|
||||
{ value: '槐荫区', label: '槐荫区' },
|
||||
{ value: '天桥区', label: '天桥区' },
|
||||
{ value: '历城区', label: '历城区' }
|
||||
],
|
||||
'郑州市': [
|
||||
{ value: '中原区', label: '中原区' },
|
||||
{ value: '二七区', label: '二七区' },
|
||||
{ value: '管城回族区', label: '管城回族区' },
|
||||
{ value: '金水区', label: '金水区' },
|
||||
{ value: '上街区', label: '上街区' }
|
||||
]
|
||||
}
|
||||
return districtMap[selectedCity.value] || []
|
||||
})
|
||||
|
||||
// 方法
|
||||
const selectProvince = (province: { value: string; label: string }) => {
|
||||
selectedProvince.value = province.value
|
||||
selectedCity.value = ''
|
||||
selectedDistrict.value = ''
|
||||
activeTab.value = 'city'
|
||||
}
|
||||
|
||||
const selectCity = (city: { value: string; label: string }) => {
|
||||
selectedCity.value = city.value
|
||||
selectedDistrict.value = ''
|
||||
activeTab.value = 'district'
|
||||
}
|
||||
|
||||
const selectDistrict = (district: { value: string; label: string }) => {
|
||||
selectedDistrict.value = district.value
|
||||
// 完成选择，提交结果
|
||||
emit('address', {
|
||||
province: selectedProvince.value,
|
||||
city: selectedCity.value,
|
||||
district: selectedDistrict.value
|
||||
})
|
||||
close()
|
||||
}
|
||||
|
||||
const close = () => {
|
||||
// 重置状态
|
||||
activeTab.value = 'province'
|
||||
selectedProvince.value = ''
|
||||
selectedCity.value = ''
|
||||
selectedDistrict.value = ''
|
||||
emit('update:visible', false)
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.address-form-content {
|
||||
background-color: white;
|
||||
border-radius: 16px 16px 0 0;
|
||||
max-height: 80vh;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
color: #999;
|
||||
padding: 0;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.close-btn:hover {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.form-tab {
|
||||
display: flex;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
flex: 1;
|
||||
padding: 14px 0;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
border-bottom: 2px solid transparent;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.tab-item.active {
|
||||
color: #1890ff;
|
||||
border-bottom-color: #1890ff;
|
||||
}
|
||||
|
||||
.tab-item.disabled {
|
||||
color: #ccc;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.form-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.region-item {
|
||||
padding: 12px;
|
||||
text-align: center;
|
||||
border: 1px solid #e8e8e8;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.region-item:hover {
|
||||
border-color: #1890ff;
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.tab-content {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.tab-content {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.form-content {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.region-item {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
444
src/Component/common/Search.vue
Normal file
444
src/Component/common/Search.vue
Normal file
@@ -0,0 +1,444 @@
|
||||
<!-- 搜索组件 -->
|
||||
<template>
|
||||
<div class="search-component">
|
||||
<!-- 搜索类型选择 -->
|
||||
<div v-if="false" class="search-type-selector">
|
||||
<ul>
|
||||
<li class="search-type-item" :class="{ active: currentSearchType === '宝贝' }"
|
||||
@click="setSearchType('宝贝', $event)">
|
||||
宝贝
|
||||
</li>
|
||||
<li class="search-type-item" :class="{ active: currentSearchType === '店铺' }"
|
||||
@click="setSearchType('店铺', $event)">
|
||||
店铺
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- 搜索输入区域 -->
|
||||
<div class="search-input-wrapper">
|
||||
<div class="search-input-prefix">
|
||||
<i class="iconfont icon-sousuo prefix-icon"></i>
|
||||
</div>
|
||||
<Input v-model:value="searchValue" placeholder="商品昵称/商品编号/订单编号" style="width: 100%" @search="onSearch"
|
||||
@focus="onInputFocus" @blur="onInputBlur" class="custom-search-input" />
|
||||
<div class="search-input-suffix" v-if="searchValue">
|
||||
<i class="iconfont icon-guanbi" @click="clearSearch"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 搜索按钮 -->
|
||||
<div class="search-button-container" @click="onSearch()">
|
||||
<span class="search-button-text">搜索</span>
|
||||
<div class="search-button-icon">
|
||||
<i class="iconfont icon-sousuo"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 搜索历史记录 -->
|
||||
<div class="search-history-container" v-if="showHistory">
|
||||
<div class="search-history-header">
|
||||
<span class="history-title">搜索历史</span>
|
||||
<a class="clear-history" @click="clearHistory" href="javascript:void(0)">
|
||||
清空历史
|
||||
</a>
|
||||
</div>
|
||||
<div class="search-history-tags" v-if="historyList.length > 0">
|
||||
<Tag v-for="(item, index) in historyList" :key="index" class="history-tag"
|
||||
@click="onClickHistory(item)">
|
||||
{{ item }}
|
||||
</Tag>
|
||||
</div>
|
||||
<div class="no-history" v-else>
|
||||
暂无搜索历史
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { Input, Tag } from 'ant-design-vue'
|
||||
|
||||
const router = useRouter()
|
||||
const emit = defineEmits(['search'])
|
||||
// 搜索关键词
|
||||
const searchValue = ref('')
|
||||
// 控制历史记录显示状态
|
||||
const showHistory = ref(false)
|
||||
// 标志：是否正在清空历史记录
|
||||
const isClearingHistory = ref(false)
|
||||
// 当前搜索类型
|
||||
const currentSearchType = ref('宝贝')
|
||||
// 搜索历史记录
|
||||
const historyList = ref(['手机', '电脑', '耳机', '键盘', '鼠标'])
|
||||
|
||||
// 搜索事件
|
||||
const onSearch = (value?: string) => {
|
||||
const keyword = value || searchValue.value
|
||||
if (!keyword.trim()) return
|
||||
|
||||
console.log('搜索关键词:', keyword)
|
||||
console.log('搜索类型:', currentSearchType.value)
|
||||
|
||||
// 添加到历史记录
|
||||
// if (!historyList.value.includes(keyword)) {
|
||||
// historyList.value.unshift(keyword)
|
||||
// // 限制历史记录数量
|
||||
// if (historyList.value.length > 10) {
|
||||
// historyList.value.pop()
|
||||
// }
|
||||
// }
|
||||
|
||||
// 跳转到搜索结果页面
|
||||
// router.push({
|
||||
// name: 'search',
|
||||
// query: {
|
||||
// keyword: keyword,
|
||||
// type: currentSearchType.value
|
||||
// }
|
||||
// })
|
||||
emit('search', keyword)
|
||||
}
|
||||
|
||||
// 搜索框获得焦点
|
||||
const onInputFocus = () => {
|
||||
showHistory.value = true
|
||||
}
|
||||
|
||||
// 搜索框失去焦点
|
||||
const onInputBlur = () => {
|
||||
// 使用setTimeout确保点击历史记录的事件能先执行
|
||||
setTimeout(() => {
|
||||
// 如果正在清空历史记录，则不隐藏历史记录容器
|
||||
if (!isClearingHistory.value) {
|
||||
showHistory.value = false
|
||||
}
|
||||
}, 200)
|
||||
}
|
||||
|
||||
// 设置搜索类型
|
||||
const setSearchType = (type: string, event: MouseEvent) => {
|
||||
const typeItems = document.querySelectorAll('.search-type-item')
|
||||
// 找到当前活跃的元素
|
||||
const currentActiveItem = document.querySelector('.search-type-item.active')
|
||||
// 保存点击的元素引用
|
||||
const clickedTarget = event.currentTarget as HTMLElement
|
||||
|
||||
// 为当前活跃的元素添加消失动画
|
||||
if (currentActiveItem && currentActiveItem !== clickedTarget) {
|
||||
if (currentSearchType.value === '宝贝' && type === '店铺') {
|
||||
// 宝贝 -> 店铺：宝贝元素从左往右消失
|
||||
currentActiveItem.classList.add('animate-right-out')
|
||||
} else if (currentSearchType.value === '店铺' && type === '宝贝') {
|
||||
// 店铺 -> 宝贝：店铺元素从右往左消失
|
||||
currentActiveItem.classList.add('animate-left-out')
|
||||
}
|
||||
|
||||
// 等待消失动画完成后再继续
|
||||
setTimeout(() => {
|
||||
// 移除所有元素的类
|
||||
typeItems.forEach(item => {
|
||||
item.classList.remove('active', 'animate-left', 'animate-right', 'animate-left-out', 'animate-right-out')
|
||||
})
|
||||
|
||||
// 添加active类到点击的元素
|
||||
if (clickedTarget) {
|
||||
// 判断切换方向
|
||||
if (currentSearchType.value === '宝贝' && type === '店铺') {
|
||||
// 宝贝 -> 店铺：从左往右出现
|
||||
clickedTarget.classList.add('active', 'animate-right')
|
||||
} else if (currentSearchType.value === '店铺' && type === '宝贝') {
|
||||
// 店铺 -> 宝贝：从右往左出现
|
||||
clickedTarget.classList.add('active', 'animate-left')
|
||||
} else {
|
||||
// 默认动画
|
||||
clickedTarget.classList.add('active')
|
||||
}
|
||||
currentSearchType.value = type
|
||||
}
|
||||
console.log('搜索类型:', type)
|
||||
|
||||
}, 300)
|
||||
} else {
|
||||
// 如果点击的是当前活跃的元素，直接返回
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
// 清除搜索输入
|
||||
const clearSearch = () => {
|
||||
searchValue.value = ''
|
||||
console.log('已清除搜索输入')
|
||||
}
|
||||
|
||||
// 点击历史记录
|
||||
const onClickHistory = (item: string) => {
|
||||
searchValue.value = item
|
||||
onSearch(item)
|
||||
}
|
||||
|
||||
// 清空历史记录
|
||||
const clearHistory = () => {
|
||||
isClearingHistory.value = true
|
||||
historyList.value = []
|
||||
// 300ms后重置标志，确保onInputBlur的200ms延迟执行完毕
|
||||
setTimeout(() => {
|
||||
isClearingHistory.value = false
|
||||
}, 300)
|
||||
console.log('已清空搜索历史')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.search-component {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 搜索类型选择 */
|
||||
.search-type-selector {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.search-type-selector ul {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.search-type-item {
|
||||
padding: 8px 16px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
transition: all 0.3s ease;
|
||||
border-radius: var(--border-radius-md);
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.search-type-item:hover {
|
||||
background-color: var(--bg-light);
|
||||
}
|
||||
|
||||
.search-type-item.active {
|
||||
color: var(--primary-color);
|
||||
font-weight: 600;
|
||||
background-color: var(--primary-light);
|
||||
}
|
||||
|
||||
/* 动画效果 */
|
||||
.animate-left {
|
||||
animation: slideInLeft 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.animate-right {
|
||||
animation: slideInRight 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.animate-left-out {
|
||||
animation: slideOutLeft 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.animate-right-out {
|
||||
animation: slideOutRight 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes slideInLeft {
|
||||
from {
|
||||
transform: translateX(-20px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideInRight {
|
||||
from {
|
||||
transform: translateX(20px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideOutLeft {
|
||||
from {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateX(-20px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideOutRight {
|
||||
from {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateX(20px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 搜索输入区域 */
|
||||
.search-input-wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: var(--bg-white);
|
||||
border: 2px solid var(--border-light);
|
||||
border-right: none;
|
||||
border-radius: var(--border-radius-md) 0 0 var(--border-radius-md);
|
||||
padding: 0 12px 0 5px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.search-input-wrapper:focus-within {
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 2px var(--primary-light);
|
||||
}
|
||||
|
||||
.search-input-prefix {
|
||||
margin-right: 8px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.prefix-icon {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.custom-search-input {
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.custom-search-input:focus {
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.search-input-suffix {
|
||||
margin-left: 8px;
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.search-input-suffix:hover {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
/* 搜索按钮 */
|
||||
.search-button-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: var(--primary-color);
|
||||
color: var(--bg-white);
|
||||
border: none;
|
||||
border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0;
|
||||
padding: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.search-button-container:hover {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.search-button-text {
|
||||
}
|
||||
|
||||
.search-button-icon {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* 搜索历史记录 */
|
||||
.search-history-container {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: var(--bg-white);
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: var(--border-radius-md);
|
||||
box-shadow: var(--shadow-md);
|
||||
padding: 16px;
|
||||
margin-top: 4px;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.search-history-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.history-title {
|
||||
font-weight: 600;
|
||||
color: var(--text-dark);
|
||||
}
|
||||
|
||||
.clear-history {
|
||||
color: var(--text-secondary);
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.clear-history:hover {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.search-history-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.history-tag {
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.history-tag:hover {
|
||||
background-color: var(--primary-light) !important;
|
||||
color: var(--primary-color) !important;
|
||||
}
|
||||
|
||||
.no-history {
|
||||
text-align: center;
|
||||
color: var(--text-secondary);
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.search-type-selector {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.search-type-item {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.search-button-container {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
63
src/Component/common/page.vue
Normal file
63
src/Component/common/page.vue
Normal file
@@ -0,0 +1,63 @@
|
||||
<!-- 分页组件 -->
|
||||
<template>
|
||||
<div class="pagination">
|
||||
<ul>
|
||||
<li v-for="page in totalPages" :key="page">
|
||||
<a href="#" @click="changePage(page)">{{ page }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
totalPages: {
|
||||
type: Number,
|
||||
default: 1
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['changePage'])
|
||||
|
||||
const changePage = (page: number) => {
|
||||
emit('changePage', page)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.pagination {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: var(--spacing-md);
|
||||
}
|
||||
|
||||
.pagination ul {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.pagination ul li {
|
||||
margin: 0 var(--spacing-xs);
|
||||
}
|
||||
|
||||
.pagination ul li a {
|
||||
display: block;
|
||||
padding: var(--spacing-xs) var(--spacing-sm);
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: var(--border-radius);
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--primary-color);
|
||||
transition: all var(--transition-normal) ease;
|
||||
}
|
||||
|
||||
.pagination ul li a:hover {
|
||||
background-color: var(--primary-color);
|
||||
color: var(--text-color);
|
||||
}
|
||||
</style>
|
||||
@@ -6,7 +6,8 @@ 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'
|
||||
|
||||
|
||||
|
||||
@@ -37,10 +38,16 @@ const routes = [
|
||||
component: Cart
|
||||
},
|
||||
{
|
||||
path: '/order',
|
||||
name: 'order',
|
||||
component: Order
|
||||
path: '/user',
|
||||
name: 'user',
|
||||
component: User
|
||||
},
|
||||
{
|
||||
path: '/chat',
|
||||
name: 'chat',
|
||||
component: Chat
|
||||
},
|
||||
|
||||
]
|
||||
|
||||
const router = createRouter({
|
||||
|
||||
@@ -1,13 +1,112 @@
|
||||
/* 全局样式 */
|
||||
body {
|
||||
height: 100%;
|
||||
padding: 0 20px;
|
||||
padding: 0 var(--spacing-lg);
|
||||
background-color: var(--bg-color);
|
||||
font-family: var(--font-family);
|
||||
font-size: var(--font-size-base);
|
||||
color: var(--text-primary);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #000;
|
||||
font-size: 16px;
|
||||
color: var(--text-primary);
|
||||
font-size: var(--font-size-base);
|
||||
font-weight: bold;
|
||||
transition: all 0.3s ease-in-out;
|
||||
transition: all var(--transition-normal);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
:root {
|
||||
/* 主色调 */
|
||||
--primary-color: #ff5000;
|
||||
--primary-hover: #ff7a45;
|
||||
--primary-active: #ff3a00;
|
||||
--primary-light: rgba(255, 80, 0, 0.05);
|
||||
--primary-light-rgb: 255, 80, 0;
|
||||
|
||||
/* 辅助色 */
|
||||
--secondary-color: #1890ff;
|
||||
--secondary-hover: #40a9ff;
|
||||
--success-color: #52c41a;
|
||||
--success-light: #f6ffed;
|
||||
--warning-color: #faad14;
|
||||
--warning-light: #fff7e6;
|
||||
--error-color: #ff4d4f;
|
||||
--error-light: #fff2f0;
|
||||
|
||||
/* 登录按钮渐变色 */
|
||||
--login-gradient-start: #667eea;
|
||||
--login-gradient-end: #764ba2;
|
||||
|
||||
/* 中性色 */
|
||||
--bg-color: #f5f5f5;
|
||||
--bg-light: #fafafa;
|
||||
--bg-primary-light: #fff5f5;
|
||||
--bg-primary-lighter: #fff0f0;
|
||||
--bg-primary-lightest: #fff0e8;
|
||||
--card-bg: #ffffff;
|
||||
--text-primary: #333333;
|
||||
--text-dark: #2d3436;
|
||||
--text-secondary: #666666;
|
||||
--text-tertiary: #999999;
|
||||
--border-color: #e0e0e0;
|
||||
--border-light: #e8e8e8;
|
||||
|
||||
/* 字体 */
|
||||
--font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
--font-size-xs: 12px;
|
||||
--font-size-sm: 14px;
|
||||
--font-size-base: 16px;
|
||||
--font-size-lg: 18px;
|
||||
--font-size-xl: 20px;
|
||||
--font-size-2xl: 24px;
|
||||
--font-size-3xl: 32px;
|
||||
--font-size-4xl: 36px;
|
||||
|
||||
/* 间距 */
|
||||
--spacing-xs: 4px;
|
||||
--spacing-sm: 8px;
|
||||
--spacing-md: 16px;
|
||||
--spacing-lg: 24px;
|
||||
--spacing-xl: 32px;
|
||||
--spacing-xxl: 40px;
|
||||
|
||||
/* 圆角 */
|
||||
--border-radius-sm: 4px;
|
||||
--border-radius-md: 8px;
|
||||
--border-radius-lg: 12px;
|
||||
--border-radius-xl: 16px;
|
||||
--border-radius-2xl: 24px;
|
||||
--border-radius-3xl: 28px;
|
||||
--border-radius-full: 50%;
|
||||
|
||||
/* 阴影 */
|
||||
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
--shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
--shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12);
|
||||
--shadow-xl: 0 6px 20px rgba(0, 0, 0, 0.15);
|
||||
--shadow-2xl: 0 12px 32px rgba(0, 0, 0, 0.2);
|
||||
|
||||
/* 过渡 */
|
||||
--transition-fast: 0.2s ease;
|
||||
--transition-normal: 0.3s ease;
|
||||
--transition-slow: 0.5s ease;
|
||||
--transition-transform: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
|
||||
/* 搜索框相关 */
|
||||
--search-height: 52px;
|
||||
--search-radius: 28px;
|
||||
|
||||
/* 消息相关 */
|
||||
--message-radius: 18px;
|
||||
|
||||
/* 输入框相关 */
|
||||
--input-bg: #f9fafb;
|
||||
--input-error: #ef4444;
|
||||
--error-bg: #fee2e2;
|
||||
--error-text: #dc2626;
|
||||
}
|
||||
|
||||
@@ -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; // 是否默认地址
|
||||
}
|
||||
@@ -263,24 +263,24 @@ const removeItem = (id: number) => {
|
||||
#cart {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(135deg, #f5f5f5 0%, #fafafa 100%);
|
||||
padding: 20px;
|
||||
background: linear-gradient(135deg, var(--bg-color) 0%, var(--bg-light) 100%);
|
||||
padding: var(--spacing-md);
|
||||
}
|
||||
|
||||
.cart-container {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
|
||||
background: linear-gradient(135deg, var(--card-bg) 0%, var(--bg-light) 100%);
|
||||
border-radius: var(--border-radius-xl);
|
||||
box-shadow: var(--shadow-md);
|
||||
overflow: hidden;
|
||||
border: 1px solid #f0f0f0;
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.cart-header {
|
||||
padding: 20px 40px;
|
||||
border-bottom: 3px solid #f0f0f0;
|
||||
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
|
||||
padding: var(--spacing-md) var(--spacing-xxl);
|
||||
border-bottom: 3px solid var(--border-color);
|
||||
background: linear-gradient(135deg, var(--card-bg) 0%, var(--bg-light) 100%);
|
||||
display: block;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
@@ -294,7 +294,7 @@ const removeItem = (id: number) => {
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 80, 0, 0.05), transparent);
|
||||
background: linear-gradient(90deg, transparent, var(--primary-light), transparent);
|
||||
transition: left 0.6s ease;
|
||||
}
|
||||
|
||||
@@ -303,94 +303,94 @@ const removeItem = (id: number) => {
|
||||
}
|
||||
|
||||
.cart-title {
|
||||
font-size: 32px;
|
||||
font-size: var(--font-size-3xl);
|
||||
font-weight: 800;
|
||||
color: #2d3436;
|
||||
color: var(--text-dark);
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
gap: var(--spacing-md);
|
||||
position: relative;
|
||||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
transition: all var(--transition-transform);
|
||||
}
|
||||
|
||||
.cart-title:hover {
|
||||
color: #ff5000;
|
||||
transform: translateX(8px);
|
||||
text-shadow: 0 4px 8px rgba(255, 80, 0, 0.2);
|
||||
color: var(--primary-color);
|
||||
transform: translateX(var(--spacing-sm));
|
||||
text-shadow: 0 4px 8px rgba(var(--primary-light-rgb), 0.2);
|
||||
}
|
||||
|
||||
.cart-title i {
|
||||
font-size: 36px;
|
||||
color: #ff5000;
|
||||
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
font-size: var(--font-size-4xl);
|
||||
color: var(--primary-color);
|
||||
transition: all var(--transition-transform);
|
||||
}
|
||||
|
||||
.cart-title:hover i {
|
||||
transform: rotate(10deg) scale(1.2);
|
||||
filter: drop-shadow(0 2px 6px rgba(255, 80, 0, 0.3));
|
||||
filter: drop-shadow(0 2px 6px rgba(var(--primary-light-rgb), 0.3));
|
||||
}
|
||||
|
||||
.filter-buttons {
|
||||
margin-top: 20px;
|
||||
margin-top: var(--spacing-md);
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
gap: var(--spacing-md);
|
||||
position: relative;
|
||||
|
||||
}
|
||||
|
||||
.filter-btn {
|
||||
padding: 12px 36px;
|
||||
border-radius: 28px;
|
||||
font-size: 15px;
|
||||
padding: var(--spacing-sm) var(--spacing-xxl);
|
||||
border-radius: var(--border-radius-3xl);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: 600;
|
||||
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
border: 2px solid #e0e0e0;
|
||||
background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
transition: all var(--transition-transform);
|
||||
border: 2px solid var(--border-color);
|
||||
background: linear-gradient(135deg, var(--card-bg) 0%, var(--bg-light) 100%);
|
||||
box-shadow: var(--shadow-md);
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.filter-btn.active {
|
||||
background: linear-gradient(135deg, #ff5000 0%, #ff6b00 100%);
|
||||
border-color: #ff5000;
|
||||
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
|
||||
border-color: var(--primary-color);
|
||||
color: #ffffff;
|
||||
box-shadow: 0 6px 20px rgba(255, 80, 0, 0.35);
|
||||
box-shadow: 0 6px 20px rgba(var(--primary-light-rgb), 0.35);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.filter-btn:not(.active):hover {
|
||||
border-color: #ff5000;
|
||||
color: #ff5000;
|
||||
background: linear-gradient(135deg, #fff5f5 0%, #fff0f0 100%);
|
||||
box-shadow: 0 4px 16px rgba(255, 80, 0, 0.15);
|
||||
border-color: var(--primary-color);
|
||||
color: var(--primary-color);
|
||||
background: linear-gradient(135deg, var(--bg-primary-light) 0%, var(--bg-primary-lighter) 100%);
|
||||
box-shadow: 0 4px 16px rgba(var(--primary-light-rgb), 0.15);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.filter-btn:active {
|
||||
transform: translateY(0);
|
||||
box-shadow: 0 2px 8px rgba(255, 80, 0, 0.2);
|
||||
box-shadow: 0 2px 8px rgba(var(--primary-light-rgb), 0.2);
|
||||
}
|
||||
|
||||
.cart-list {
|
||||
padding: 20px 40px;
|
||||
padding: var(--spacing-md) var(--spacing-xxl);
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
.cart-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 15px;
|
||||
background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
|
||||
border-radius: 24px;
|
||||
margin-bottom: 30px;
|
||||
border: 2px solid #f5f5f5;
|
||||
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
|
||||
padding: var(--spacing-md);
|
||||
background: linear-gradient(135deg, var(--card-bg) 0%, var(--bg-light) 100%);
|
||||
border-radius: var(--border-radius-2xl);
|
||||
margin-bottom: var(--spacing-xl);
|
||||
border: 2px solid var(--border-color);
|
||||
transition: all var(--transition-transform);
|
||||
box-shadow: var(--shadow-md);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
gap: 30px;
|
||||
gap: var(--spacing-xl);
|
||||
animation: float 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@@ -406,55 +406,55 @@ const removeItem = (id: number) => {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
cursor: pointer;
|
||||
accent-color: #ff5000;
|
||||
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
accent-color: var(--primary-color);
|
||||
transition: all var(--transition-transform);
|
||||
position: relative;
|
||||
border-radius: 6px;
|
||||
background-color: #ffffff;
|
||||
border: 2px solid #e0e0e0;
|
||||
border-radius: var(--border-radius-md);
|
||||
background-color: var(--card-bg);
|
||||
border: 2px solid var(--border-color);
|
||||
}
|
||||
|
||||
.checkbox-input:hover {
|
||||
transform: scale(1.2);
|
||||
box-shadow: 0 0 0 10px rgba(255, 80, 0, 0.12);
|
||||
border-color: #ff5000;
|
||||
box-shadow: 0 0 0 10px rgba(var(--primary-light-rgb), 0.12);
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
|
||||
.checkbox-input:checked {
|
||||
box-shadow: 0 0 0 8px rgba(255, 80, 0, 0.25);
|
||||
border-color: #ff5000;
|
||||
box-shadow: 0 0 0 8px rgba(var(--primary-light-rgb), 0.25);
|
||||
border-color: var(--primary-color);
|
||||
animation: checkbox-pulse 0.4s ease;
|
||||
}
|
||||
|
||||
.checkbox-input:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 6px rgba(255, 80, 0, 0.2);
|
||||
border-color: #ff5000;
|
||||
box-shadow: 0 0 0 6px rgba(var(--primary-light-rgb), 0.2);
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
|
||||
@keyframes checkbox-pulse {
|
||||
0% {
|
||||
box-shadow: 0 0 0 4px rgba(255, 80, 0, 0.2);
|
||||
box-shadow: 0 0 0 4px rgba(var(--primary-light-rgb), 0.2);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 0 12px rgba(255, 80, 0, 0.1);
|
||||
box-shadow: 0 0 0 12px rgba(var(--primary-light-rgb), 0.1);
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 0 8px rgba(255, 80, 0, 0.25);
|
||||
box-shadow: 0 0 0 8px rgba(var(--primary-light-rgb), 0.25);
|
||||
}
|
||||
}
|
||||
|
||||
.cart-item-img-container {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border-radius: 20px;
|
||||
border-radius: var(--border-radius-xl);
|
||||
overflow: hidden;
|
||||
border: 3px solid #f0f0f0;
|
||||
border: 3px solid var(--border-color);
|
||||
flex-shrink: 0;
|
||||
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
transition: all var(--transition-transform);
|
||||
position: relative;
|
||||
background: linear-gradient(135deg, #fafafa 0%, #ffffff 100%);
|
||||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
|
||||
background: linear-gradient(135deg, var(--bg-light) 0%, var(--card-bg) 100%);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.cart-item-img-container::after {
|
||||
@@ -464,10 +464,10 @@ const removeItem = (id: number) => {
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-radius: 20px;
|
||||
border-radius: var(--border-radius-xl);
|
||||
border: 3px solid transparent;
|
||||
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
background: linear-gradient(135deg, rgba(255, 80, 0, 0.08) 0%, rgba(255, 80, 0, 0.03) 100%);
|
||||
transition: all var(--transition-transform);
|
||||
background: linear-gradient(135deg, rgba(var(--primary-light-rgb), 0.08) 0%, rgba(var(--primary-light-rgb), 0.03) 100%);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@@ -478,21 +478,21 @@ const removeItem = (id: number) => {
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: linear-gradient(45deg, transparent, rgba(255, 80, 0, 0.1), transparent);
|
||||
background: linear-gradient(45deg, transparent, rgba(var(--primary-light-rgb), 0.1), transparent);
|
||||
transform: rotate(45deg);
|
||||
transition: all 0.6s ease;
|
||||
transition: all var(--transition-slow);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.cart-item:hover .cart-item-img-container {
|
||||
border-color: #ff5000;
|
||||
border-color: var(--primary-color);
|
||||
transform: scale(1.1) translateY(-4px);
|
||||
box-shadow: 0 12px 32px rgba(255, 80, 0, 0.2);
|
||||
box-shadow: 0 12px 32px rgba(var(--primary-light-rgb), 0.2);
|
||||
}
|
||||
|
||||
.cart-item:hover .cart-item-img-container::after {
|
||||
border-color: #ff5000;
|
||||
box-shadow: 0 0 0 8px rgba(255, 80, 0, 0.2);
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 8px rgba(var(--primary-light-rgb), 0.2);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@@ -524,9 +524,9 @@ const removeItem = (id: number) => {
|
||||
}
|
||||
|
||||
.cart-item-name {
|
||||
font-size: 18px;
|
||||
font-size: var(--font-size-lg);
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
color: var(--text-primary);
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
/* 限制显示两行 */
|
||||
@@ -535,15 +535,15 @@ const removeItem = (id: number) => {
|
||||
-webkit-line-clamp: 5;
|
||||
-webkit-box-orient: vertical;
|
||||
line-height: 1.5;
|
||||
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
transition: all var(--transition-transform);
|
||||
position: relative;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.cart-item:hover .cart-item-name {
|
||||
color: #ff5000;
|
||||
transform: translateX(8px);
|
||||
text-shadow: 0 2px 6px rgba(255, 80, 0, 0.2);
|
||||
color: var(--primary-color);
|
||||
transform: translateX(var(--spacing-sm));
|
||||
text-shadow: 0 2px 6px rgba(var(--primary-light-rgb), 0.2);
|
||||
}
|
||||
|
||||
.cart-item-name::after {
|
||||
@@ -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);
|
||||
}
|
||||
</style>
|
||||
703
src/Views/Chat.vue
Normal file
703
src/Views/Chat.vue
Normal file
@@ -0,0 +1,703 @@
|
||||
<!-- 聊天界面 -->
|
||||
<template>
|
||||
<div>
|
||||
<div id="chat">
|
||||
<!-- 左右结构 左边聊天导航栏（用户1 用户2 用户3 等 从上到下分布 一个用户一个li标签） 右边聊天内容（根据导航栏切换） -->
|
||||
<div id="chat-nav">
|
||||
<div class="nav-header">
|
||||
<h2>消息</h2>
|
||||
<!-- 搜索框 -->
|
||||
<div class="search-container">
|
||||
<input type="text" placeholder="搜索用户" v-model="searchTerm" class="search-input">
|
||||
<i class="fas fa-search search-icon"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="user-list-container">
|
||||
<ul class="user-list">
|
||||
<li v-for="user in chatUsers" :key="user.id" :class="{ active: activeUserId === user.id }"
|
||||
@click="selectUser(user.id)">
|
||||
<div class="user-avatar">
|
||||
<img :src="user.avatar" :alt="user.name">
|
||||
</div>
|
||||
<div class="user-info">
|
||||
<div class="user-header">
|
||||
<span class="user-name">{{ user.name }}</span>
|
||||
<span class="message-time">{{ user.lastMessageTime }}</span>
|
||||
</div>
|
||||
<div class="user-last-message">
|
||||
{{ user.lastMessage }}
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="user.unreadCount > 0" class="unread-badge">
|
||||
{{ user.unreadCount }}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 右边聊天内容 -->
|
||||
<div id="chat-content">
|
||||
<!-- 聊天头部 -->
|
||||
<div v-if="activeUser" class="chat-header">
|
||||
<div class="chat-user-info">
|
||||
<div>
|
||||
<h3>{{ activeUser.name }}</h3>
|
||||
<p class="user-status">在线</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 聊天历史 -->
|
||||
<div v-if="activeUser" class="chat-history">
|
||||
<div v-for="(message, index) in messages" :key="index"
|
||||
:class="{ 'chat-message': true, 'sent': message.sender === 'me', 'received': message.sender !== 'me' }">
|
||||
<div v-if="message.sender !== 'me'" class="user-avatar small">
|
||||
<img :src="activeUser.avatar" :alt="activeUser.name">
|
||||
</div>
|
||||
<div class="message-content">
|
||||
<div class="message-text">{{ message.text }}</div>
|
||||
<div class="message-time">{{ message.time }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 消息输入区 -->
|
||||
<div v-if="activeUser" class="chat-input-area">
|
||||
<div class="input-container">
|
||||
<button class="input-btn">😊</button>
|
||||
<button class="input-btn">📎</button>
|
||||
<input type="text" v-model="newMessage" placeholder="输入消息..." class="message-input"
|
||||
@keyup.enter="sendMessage">
|
||||
<button class="input-btn">🎤</button>
|
||||
</div>
|
||||
<button class="send-btn" @click="sendMessage">发送</button>
|
||||
</div>
|
||||
<!-- 空状态 -->
|
||||
<div v-else class="empty-state">
|
||||
<img src="#" alt="选择聊天">
|
||||
<h3>选择一个聊天</h3>
|
||||
<p>开始与您的联系人聊天</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
// 搜索用户的关键词
|
||||
const searchTerm = ref('')
|
||||
|
||||
// 聊天用户数据
|
||||
const chatUsers = ref([
|
||||
{
|
||||
id: 1,
|
||||
name: '用户1',
|
||||
avatar: '?prompt=user%20avatar%20friendly%20smile&image_size=square',
|
||||
lastMessage: '你好，我想购买商品1',
|
||||
lastMessageTime: '10:00',
|
||||
unreadCount: 2
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '用户2',
|
||||
avatar: '?prompt=user%20avatar%20professional%20business&image_size=square',
|
||||
lastMessage: '订单什么时候发货？',
|
||||
lastMessageTime: '09:30',
|
||||
unreadCount: 0
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '用户3',
|
||||
avatar: '?prompt=user%20avatar%20casual%20young&image_size=square',
|
||||
lastMessage: '商品质量怎么样？',
|
||||
lastMessageTime: '昨天',
|
||||
unreadCount: 1
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '用户3',
|
||||
avatar: '?prompt=user%20avatar%20casual%20young&image_size=square',
|
||||
lastMessage: '商品质量怎么样？',
|
||||
lastMessageTime: '昨天',
|
||||
unreadCount: 1
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '用户3',
|
||||
avatar: '?prompt=user%20avatar%20casual%20young&image_size=square',
|
||||
lastMessage: '商品质量怎么样？',
|
||||
lastMessageTime: '昨天',
|
||||
unreadCount: 1
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '用户3',
|
||||
avatar: '?prompt=user%20avatar%20casual%20young&image_size=square',
|
||||
lastMessage: '商品质量怎么样？',
|
||||
lastMessageTime: '昨天',
|
||||
unreadCount: 1
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '用户3',
|
||||
avatar: '?prompt=user%20avatar%20casual%20young&image_size=square',
|
||||
lastMessage: '商品质量怎么样？',
|
||||
lastMessageTime: '昨天',
|
||||
unreadCount: 1
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '用户3',
|
||||
avatar: '?prompt=user%20avatar%20casual%20young&image_size=square',
|
||||
lastMessage: '商品质量怎么样？',
|
||||
lastMessageTime: '昨天',
|
||||
unreadCount: 1
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '用户3',
|
||||
avatar: '?prompt=user%20avatar%20casual%20young&image_size=square',
|
||||
lastMessage: '商品质量怎么样？',
|
||||
lastMessageTime: '昨天',
|
||||
unreadCount: 1
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '用户3',
|
||||
avatar: '?prompt=user%20avatar%20casual%20young&image_size=square',
|
||||
lastMessage: '商品质量怎么样？',
|
||||
lastMessageTime: '昨天',
|
||||
unreadCount: 1
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '用户3',
|
||||
avatar: '?prompt=user%20avatar%20casual%20young&image_size=square',
|
||||
lastMessage: '商品质量怎么样？',
|
||||
lastMessageTime: '昨天',
|
||||
unreadCount: 1
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '用户3',
|
||||
avatar: '?prompt=user%20avatar%20casual%20young&image_size=square',
|
||||
lastMessage: '商品质量怎么样？',
|
||||
lastMessageTime: '昨天',
|
||||
unreadCount: 1
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '用户3',
|
||||
avatar: '?prompt=user%20avatar%20casual%20young&image_size=square',
|
||||
lastMessage: '商品质量怎么样？',
|
||||
lastMessageTime: '昨天',
|
||||
unreadCount: 1
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '用户3',
|
||||
avatar: '?prompt=user%20avatar%20casual%20young&image_size=square',
|
||||
lastMessage: '商品质量怎么样？',
|
||||
lastMessageTime: '昨天',
|
||||
unreadCount: 1
|
||||
}
|
||||
])
|
||||
|
||||
// 消息数据
|
||||
const messages = ref([
|
||||
{
|
||||
sender: 'user1',
|
||||
text: '你好，我想购买商品1',
|
||||
time: '10:00'
|
||||
},
|
||||
{
|
||||
sender: 'me',
|
||||
text: '您好，欢迎咨询，请问有什么可以帮助您的？',
|
||||
time: '10:01'
|
||||
},
|
||||
{
|
||||
sender: 'user1',
|
||||
text: '商品1有货吗？',
|
||||
time: '10:02'
|
||||
}
|
||||
])
|
||||
|
||||
// 当前活跃用户ID
|
||||
const activeUserId = ref(1)
|
||||
|
||||
// 新消息
|
||||
const newMessage = ref('')
|
||||
|
||||
// 计算当前活跃用户
|
||||
const activeUser = computed(() => {
|
||||
return chatUsers.value.find(user => user.id === activeUserId.value)
|
||||
})
|
||||
|
||||
// 选择用户
|
||||
const selectUser = (userId: number) => {
|
||||
activeUserId.value = userId
|
||||
// 清除未读消息数
|
||||
const user = chatUsers.value.find(user => user.id === userId)
|
||||
if (user) {
|
||||
user.unreadCount = 0
|
||||
}
|
||||
}
|
||||
|
||||
// 发送消息
|
||||
const sendMessage = () => {
|
||||
if (newMessage.value.trim()) {
|
||||
messages.value.push({
|
||||
sender: 'me',
|
||||
text: newMessage.value,
|
||||
time: new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
|
||||
})
|
||||
// 更新最后一条消息
|
||||
if (activeUser.value) {
|
||||
activeUser.value.lastMessage = newMessage.value
|
||||
activeUser.value.lastMessageTime = new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
|
||||
}
|
||||
// 清空输入框
|
||||
newMessage.value = ''
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#chat {
|
||||
background-color: var(--bg-color);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
border-radius: var(--border-radius-lg);
|
||||
padding: var(--spacing-xl) 150px 0 150px;
|
||||
}
|
||||
|
||||
/* 左侧聊天导航栏 */
|
||||
#chat-nav {
|
||||
width: 320px;
|
||||
background-color: var(--bg-color);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
border-radius: var(--border-radius-lg) 0 0 var(--border-radius-lg);
|
||||
padding: var(--spacing-sm) 0 0 var(--spacing-sm);
|
||||
border: 1px solid var(--border-color);
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.nav-header {
|
||||
padding: var(--spacing-md);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav-header h2 {
|
||||
margin: 0;
|
||||
font-size: var(--font-size-lg);
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.search-container {
|
||||
margin-top: var(--spacing-sm);
|
||||
padding: var(--spacing-sm) var(--spacing-md);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: var(--border-radius-xl);
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
border: none;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
font-size: var(--font-size-base);
|
||||
color: var(--text-tertiary);
|
||||
margin-left: var(--spacing-sm);
|
||||
}
|
||||
|
||||
|
||||
|
||||
.user-list-container {
|
||||
background-color: var(--card-bg);
|
||||
overflow-x: auto;
|
||||
max-height: 50vh;
|
||||
}
|
||||
|
||||
.new-chat-btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: var(--border-radius-full);
|
||||
background-color: var(--primary-color);
|
||||
color: #ffffff;
|
||||
border: none;
|
||||
font-size: var(--font-size-lg);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all var(--transition-normal);
|
||||
}
|
||||
|
||||
.new-chat-btn:hover {
|
||||
background-color: var(--primary-hover);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
#chat-nav .user-list-container ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#chat-nav .user-list-container li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: var(--spacing-md) var(--spacing-md);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-normal);
|
||||
}
|
||||
|
||||
#chat-nav .user-list-container li:hover {
|
||||
background-color: var(--bg-color);
|
||||
border-radius: var(--border-radius-sm);
|
||||
}
|
||||
|
||||
#chat-nav .user-list-container li.active {
|
||||
background-color: var(--bg-primary-lightest);
|
||||
border-radius: var(--border-radius-sm);
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: var(--border-radius-full);
|
||||
overflow: hidden;
|
||||
margin-right: var(--spacing-md);
|
||||
flex-shrink: 0;
|
||||
border-radius: var(--border-radius-lg);
|
||||
}
|
||||
|
||||
.user-avatar img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.user-avatar.small {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
margin-right: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.user-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.user-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.user-name {
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.message-time {
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
.user-last-message {
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--text-secondary);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.unread-badge {
|
||||
background-color: var(--primary-color);
|
||||
color: #ffffff;
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: 600;
|
||||
padding: 2px 8px;
|
||||
border-radius: var(--border-radius-xl);
|
||||
min-width: 20px;
|
||||
text-align: center;
|
||||
margin-left: var(--spacing-sm);
|
||||
}
|
||||
|
||||
/* 右侧聊天内容 */
|
||||
#chat-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: var(--bg-color);
|
||||
border-radius: 0 var(--border-radius-lg) var(--border-radius-lg) 0;
|
||||
border: 1px solid var(--border-color);
|
||||
border-left: none;
|
||||
|
||||
}
|
||||
|
||||
/* 聊天头部 */
|
||||
.chat-header {
|
||||
background-color: var(--bg-color);
|
||||
padding: var(--spacing-md) var(--spacing-md);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-radius: 0 var(--border-radius-lg) 0 0;
|
||||
|
||||
}
|
||||
|
||||
.chat-user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: var(--spacing-sm);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.chat-user-info h3 {
|
||||
margin: 0 0 2px;
|
||||
font-size: var(--font-size-base);
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.user-status {
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--success-color);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.chat-actions {
|
||||
display: flex;
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: var(--border-radius-full);
|
||||
background-color: var(--bg-light);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: var(--font-size-base);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all var(--transition-normal);
|
||||
}
|
||||
|
||||
.action-btn:hover {
|
||||
background-color: var(--border-color);
|
||||
}
|
||||
|
||||
/* 聊天历史 */
|
||||
.chat-history {
|
||||
flex: 1;
|
||||
padding: var(--spacing-xl);
|
||||
overflow-y: auto;
|
||||
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;
|
||||
}
|
||||
|
||||
.chat-message {
|
||||
display: flex;
|
||||
margin-bottom: var(--spacing-md);
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.chat-message.sent {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.chat-message.sent .user-avatar {
|
||||
margin-right: 0;
|
||||
margin-left: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.message-content {
|
||||
max-width: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.chat-message.sent .message-content {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.message-text {
|
||||
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: var(--card-bg);
|
||||
border-bottom-left-radius: 4px;
|
||||
}
|
||||
|
||||
.chat-message.sent .message-text {
|
||||
background-color: var(--primary-color);
|
||||
color: #ffffff;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
|
||||
.message-time {
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
/* 消息输入区 */
|
||||
.chat-input-area {
|
||||
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: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
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: var(--font-size-base);
|
||||
cursor: pointer;
|
||||
padding: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.message-input {
|
||||
flex: 1;
|
||||
border: none;
|
||||
background: none;
|
||||
outline: none;
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--text-primary);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.message-input::placeholder {
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
.send-btn {
|
||||
padding: var(--spacing-xs) var(--spacing-xl);
|
||||
background-color: var(--primary-color);
|
||||
color: #ffffff;
|
||||
border: none;
|
||||
border-radius: var(--border-radius-xl);
|
||||
cursor: pointer;
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: 600;
|
||||
transition: all var(--transition-normal);
|
||||
}
|
||||
|
||||
.send-btn:hover {
|
||||
background-color: var(--primary-hover);
|
||||
}
|
||||
|
||||
/* 空状态 */
|
||||
.empty-state {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: var(--bg-color);
|
||||
padding: var(--spacing-xxl);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.empty-state img {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
margin-bottom: var(--spacing-xl);
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.empty-state h3 {
|
||||
margin: 0 0 var(--spacing-md);
|
||||
font-size: var(--font-size-lg);
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.empty-state p {
|
||||
margin: 0;
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
#chat-nav {
|
||||
width: 280px;
|
||||
}
|
||||
|
||||
.chat-history {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.message-content {
|
||||
max-width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
#chat-nav {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 100;
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
#chat-nav.active {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
#chat-content {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.chat-header {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.chat-input-area {
|
||||
padding: 10px 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -24,12 +24,20 @@
|
||||
<div v-if="errorMessage" class="error-message">
|
||||
{{ errorMessage }}
|
||||
</div>
|
||||
<!-- 记住我 如果用户登录成功，记住用户信息，5天内无需重新登录 -->
|
||||
<div class="form-group remember-me">
|
||||
<label class="checkbox-label">
|
||||
<input type="checkbox" v-model="loginform.rememberMe" class="checkbox-input">
|
||||
<span class="checkbox-text">记住我</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- 登录按钮 -->
|
||||
<button type="submit" class="login-button" :disabled="isLoading">
|
||||
<span v-if="isLoading" class="loading-spinner"></span>
|
||||
{{ isLoading ? '登录中...' : '登录' }}
|
||||
</button>
|
||||
|
||||
<!-- 注册链接 -->
|
||||
<div class="login-footer">
|
||||
<p class="register-link">
|
||||
还没有账号？ <a href="#" @click.prevent="router.push({ name: 'register' })">立即注册</a>
|
||||
@@ -51,7 +59,8 @@ const router = useRouter()
|
||||
|
||||
const loginform = ref<Login>({
|
||||
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;
|
||||
|
||||
446
src/Views/User/UpdataAddress.vue
Normal file
446
src/Views/User/UpdataAddress.vue
Normal file
@@ -0,0 +1,446 @@
|
||||
<!-- 更新地址弹窗 上下结构 上方有一个输入框可以识别地址更新到下方 下方有可以更新地址信息（省份、城市、区县、详细地址） -->
|
||||
<!-- 父组件会传递一个地址对象 子组件需要根据这个地址对象更新弹窗的地址信息 -->
|
||||
<template>
|
||||
<a-modal :open="visible" title="更新地址" :footer="null" width="500px">
|
||||
<div class="modal-content">
|
||||
<!-- 地址识别输入框 -->
|
||||
<div class="form-group">
|
||||
<label for="address-input">地址识别</label>
|
||||
<a-input v-model:value="addressInput" placeholder="请输入完整地址，系统会自动识别省份、城市、区县"
|
||||
@change="handleAddressRecognition" />
|
||||
<div v-if="recognitionError" class="error-message">{{ recognitionError }}</div>
|
||||
</div>
|
||||
|
||||
<!-- 地址信息表单 -->
|
||||
<div class="form-group">
|
||||
<label for="province">省份 <span class="required">*</span></label>
|
||||
<a-select v-model:value="form.province" :options="provinceOptions" placeholder="请选择省份"
|
||||
@change="handleProvinceChange" />
|
||||
<div v-if="errors.province" class="error-message">{{ errors.province }}</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="city">城市 <span class="required">*</span></label>
|
||||
<a-select v-model:value="form.city" :options="cityOptions" placeholder="请选择城市"
|
||||
@change="handleCityChange" />
|
||||
<div v-if="errors.city" class="error-message">{{ errors.city }}</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="district">区县 <span class="required">*</span></label>
|
||||
<a-select v-model:value="form.district" :options="districtOptions" placeholder="请选择区县" />
|
||||
<div v-if="errors.district" class="error-message">{{ errors.district }}</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="detailAddress">详细地址 <span class="required">*</span></label>
|
||||
<a-input v-model:value="form.detail" placeholder="请输入详细地址（街道、楼栋、门牌号等）" :rows="3" type="textarea" />
|
||||
<div v-if="errors.detail" class="error-message">{{ errors.detail }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a-button @click="handleCancel">取消</a-button>
|
||||
<a-button type="primary" @click="handleOk">确认更新</a-button>
|
||||
</div>
|
||||
</a-modal>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, watch, computed } from 'vue'
|
||||
import type { Address } from '@/Util/Type'
|
||||
const props = defineProps({
|
||||
// 设置弹窗显示状态控制
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// 传递的地址对象
|
||||
address: {
|
||||
type: Object as () => Address,
|
||||
default: () => ({
|
||||
name: '',
|
||||
phone: '',
|
||||
province: '',
|
||||
city: '',
|
||||
district: '',
|
||||
detail: '',
|
||||
isDefault: false
|
||||
}) as Address,
|
||||
}
|
||||
})
|
||||
// 定义事件
|
||||
const emit = defineEmits(['update:visible', 'update:updateaddress'])
|
||||
// 弹窗显示状态控制
|
||||
const visible = ref(props.visible)
|
||||
// 表单数据
|
||||
const form = ref<Address>({
|
||||
id:props.address.id ,
|
||||
name: props.address.name,
|
||||
phone: props.address.phone,
|
||||
province: props.address.province,
|
||||
city: props.address.city,
|
||||
district: props.address.district,
|
||||
detail: props.address.detail,
|
||||
isDefault: props.address.isDefault
|
||||
})
|
||||
|
||||
// 地址识别输入框
|
||||
const addressInput = ref('')
|
||||
const recognitionError = ref('')
|
||||
|
||||
// 表单验证错误
|
||||
const errors = ref({
|
||||
name: '',
|
||||
phone: '',
|
||||
province: '',
|
||||
city: '',
|
||||
district: '',
|
||||
detail: '',
|
||||
isDefault: ''
|
||||
})
|
||||
|
||||
// 定义类型
|
||||
interface Data {
|
||||
[key: string]: { label: string; value: string }[] | undefined;
|
||||
}
|
||||
// 城市选项（根据省份动态生成）
|
||||
const cityOptions = ref<any[]>([])
|
||||
|
||||
// 区县选项（根据城市动态生成）
|
||||
const districtOptions = ref<any[]>([])
|
||||
|
||||
// 省份选项
|
||||
const provinceOptions = ref([
|
||||
{ label: '北京市', value: '北京市' },
|
||||
{ label: '上海市', value: '上海市' },
|
||||
{ label: '广东省', value: '广东省' },
|
||||
{ label: '浙江省', value: '浙江省' },
|
||||
{ label: '江苏省', value: '江苏省' },
|
||||
{ label: '四川省', value: '四川省' },
|
||||
{ label: '湖北省', value: '湖北省' },
|
||||
{ label: '湖南省', value: '湖南省' },
|
||||
{ label: '山东省', value: '山东省' },
|
||||
{ label: '河南省', value: '河南省' }
|
||||
])
|
||||
|
||||
// 城市数据
|
||||
const cityData: Data = {
|
||||
'北京市': [{ label: '北京市', value: '北京市' }],
|
||||
'上海市': [{ label: '上海市', value: '上海市' }],
|
||||
'广东省': [
|
||||
{ label: '广州市', value: '广州市' },
|
||||
{ label: '深圳市', value: '深圳市' },
|
||||
{ label: '东莞市', value: '东莞市' },
|
||||
{ label: '佛山市', value: '佛山市' }
|
||||
],
|
||||
'浙江省': [
|
||||
{ label: '杭州市', value: '杭州市' },
|
||||
{ label: '宁波市', value: '宁波市' },
|
||||
{ label: '温州市', value: '温州市' },
|
||||
{ label: '嘉兴市', value: '嘉兴市' }
|
||||
],
|
||||
'江苏省': [
|
||||
{ label: '南京市', value: '南京市' },
|
||||
{ label: '苏州市', value: '苏州市' },
|
||||
{ label: '无锡市', value: '无锡市' },
|
||||
{ label: '常州市', value: '常州市' }
|
||||
]
|
||||
}
|
||||
|
||||
// 区县数据
|
||||
const districtData: Data = {
|
||||
'北京市-北京市': [
|
||||
{ label: '东城区', value: '东城区' },
|
||||
{ label: '西城区', value: '西城区' },
|
||||
{ label: '朝阳区', value: '朝阳区' },
|
||||
{ label: '海淀区', value: '海淀区' },
|
||||
{ label: '丰台区', value: '丰台区' },
|
||||
{ label: '石景山区', value: '石景山区' },
|
||||
{ label: '门头沟区', value: '门头沟区' },
|
||||
{ label: '房山区', value: '房山区' },
|
||||
{ label: '通州区', value: '通州区' },
|
||||
{ label: '顺义区', value: '顺义区' }
|
||||
],
|
||||
'上海市-上海市': [
|
||||
{ label: '黄浦区', value: '黄浦区' },
|
||||
{ label: '徐汇区', value: '徐汇区' },
|
||||
{ label: '长宁区', value: '长宁区' },
|
||||
{ label: '静安区', value: '静安区' },
|
||||
{ label: '普陀区', value: '普陀区' },
|
||||
{ label: '虹口区', value: '虹口区' },
|
||||
{ label: '杨浦区', value: '杨浦区' },
|
||||
{ label: '浦东新区', value: '浦东新区' }
|
||||
],
|
||||
'广东省-广州市': [
|
||||
{ label: '越秀区', value: '越秀区' },
|
||||
{ label: '海珠区', value: '海珠区' },
|
||||
{ label: '荔湾区', value: '荔湾区' },
|
||||
{ label: '天河区', value: '天河区' },
|
||||
{ label: '白云区', value: '白云区' },
|
||||
{ label: '黄埔区', value: '黄埔区' },
|
||||
{ label: '番禺区', value: '番禺区' },
|
||||
{ label: '花都区', value: '花都区' }
|
||||
],
|
||||
'浙江省-杭州市': [
|
||||
{ label: '上城区', value: '上城区' },
|
||||
{ label: '下城区', value: '下城区' },
|
||||
{ label: '江干区', value: '江干区' },
|
||||
{ label: '拱墅区', value: '拱墅区' },
|
||||
{ label: '西湖区', value: '西湖区' },
|
||||
{ label: '滨江区', value: '滨江区' },
|
||||
{ label: '萧山区', value: '萧山区' },
|
||||
{ label: '余杭区', value: '余杭区' }
|
||||
]
|
||||
}
|
||||
|
||||
// 监听 address 变化 用于更新弹窗的地址信息
|
||||
watch(() => props.address, (newVal) => {
|
||||
if (newVal) {
|
||||
form.value = { ...newVal }
|
||||
// 更新城市和区县选项
|
||||
handleProvinceChange(newVal.province)
|
||||
if (newVal.city) {
|
||||
handleCityChange(newVal.city)
|
||||
}
|
||||
}
|
||||
}, { deep: true })
|
||||
// 监听 visible 变化 用于更新弹窗的显示状态
|
||||
watch(() => props.visible, (newVal) => {
|
||||
visible.value = newVal
|
||||
})
|
||||
// 监听弹窗关闭事件
|
||||
watch(() => props.visible, (newVal) => {
|
||||
if (!newVal) {
|
||||
// 重置表单
|
||||
form.value = {
|
||||
id:0,
|
||||
name: '',
|
||||
phone: '',
|
||||
province: '',
|
||||
city: '',
|
||||
district: '',
|
||||
detail: '',
|
||||
isDefault: false
|
||||
}
|
||||
addressInput.value = ''
|
||||
recognitionError.value = ''
|
||||
errors.value = {
|
||||
name: '',
|
||||
phone: '',
|
||||
province: '',
|
||||
city: '',
|
||||
district: '',
|
||||
detail: '',
|
||||
isDefault: ''
|
||||
}
|
||||
cityOptions.value = []
|
||||
districtOptions.value = []
|
||||
}
|
||||
})
|
||||
|
||||
// 地址识别处理
|
||||
const handleAddressRecognition = () => {
|
||||
if (!addressInput.value) {
|
||||
recognitionError.value = ''
|
||||
return
|
||||
}
|
||||
|
||||
// 简单的地址识别逻辑（实际项目中可以使用更复杂的算法或API）
|
||||
const address = addressInput.value
|
||||
let province = ''
|
||||
let city = ''
|
||||
let district = ''
|
||||
let detail = ''
|
||||
|
||||
// 识别省份
|
||||
const provinces = provinceOptions.value.map(p => p.value)
|
||||
for (const p of provinces) {
|
||||
if (address.includes(p)) {
|
||||
province = p
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
// 识别城市
|
||||
// if (province && (cityData as Record<string, { label: string; value: string }[]>)[province]) {
|
||||
// const cities = cityData[province].map((c: { value: any }) => c.value)
|
||||
// for (const c of cities) {
|
||||
// if (address.includes(c)) {
|
||||
// city = c
|
||||
// break
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// 识别区县
|
||||
// if (province && city && districtData[`${province}-${city}`]) {
|
||||
// const districts = districtData[`${province}-${city}`].map((d: { value: any }) => d.value)
|
||||
// for (const d of districts) {
|
||||
// if (address.includes(d)) {
|
||||
// district = d
|
||||
// break
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// 提取详细地址
|
||||
if (province && city && district) {
|
||||
detail = address.replace(province, '').replace(city, '').replace(district, '').trim()
|
||||
} else if (province && city) {
|
||||
detail = address.replace(province, '').replace(city, '').trim()
|
||||
} else if (province) {
|
||||
detail = address.replace(province, '').trim()
|
||||
} else {
|
||||
detail = address
|
||||
}
|
||||
|
||||
// 更新表单
|
||||
if (province) {
|
||||
form.value.province = province
|
||||
handleProvinceChange(province)
|
||||
if (city) {
|
||||
form.value.city = city
|
||||
handleCityChange(city)
|
||||
if (district) {
|
||||
form.value.district = district
|
||||
}
|
||||
}
|
||||
form.value.detail = detail
|
||||
recognitionError.value = ''
|
||||
} else {
|
||||
recognitionError.value = '未能识别出省份，请手动选择'
|
||||
}
|
||||
}
|
||||
|
||||
// 省份变化处理
|
||||
const handleProvinceChange = (province: string) => {
|
||||
form.value.province = province
|
||||
form.value.city = ''
|
||||
form.value.district = ''
|
||||
|
||||
// 更新城市选项
|
||||
if (province && cityData[province]) {
|
||||
cityOptions.value = cityData[province]
|
||||
} else {
|
||||
cityOptions.value = []
|
||||
}
|
||||
districtOptions.value = []
|
||||
|
||||
// 清除验证错误
|
||||
errors.value.province = ''
|
||||
errors.value.city = ''
|
||||
errors.value.district = ''
|
||||
}
|
||||
|
||||
// 城市变化处理
|
||||
const handleCityChange = (city: string) => {
|
||||
form.value.city = city
|
||||
form.value.district = ''
|
||||
|
||||
// 更新区县选项
|
||||
if (form.value.province && city && districtData[`${form.value.province}-${city}`]) {
|
||||
districtOptions.value = districtData[`${form.value.province}-${city}`] ?? []
|
||||
} else {
|
||||
districtOptions.value = []
|
||||
}
|
||||
|
||||
// 清除验证错误
|
||||
errors.value.city = ''
|
||||
errors.value.district = ''
|
||||
}
|
||||
|
||||
// 表单验证
|
||||
const validateForm = (): boolean => {
|
||||
let isValid = true
|
||||
|
||||
// 重置错误信息
|
||||
errors.value = {
|
||||
name: '',
|
||||
phone: '',
|
||||
province: '',
|
||||
city: '',
|
||||
district: '',
|
||||
detail: '',
|
||||
isDefault: ''
|
||||
}
|
||||
|
||||
// 验证省份
|
||||
if (!form.value.province) {
|
||||
errors.value.province = '请选择省份'
|
||||
isValid = false
|
||||
}
|
||||
|
||||
// 验证城市
|
||||
if (!form.value.city) {
|
||||
errors.value.city = '请选择城市'
|
||||
isValid = false
|
||||
}
|
||||
|
||||
// 验证区县
|
||||
if (!form.value.district) {
|
||||
errors.value.district = '请选择区县'
|
||||
isValid = false
|
||||
}
|
||||
|
||||
// 验证详细地址
|
||||
if (!form.value.detail) {
|
||||
errors.value.detail = '请输入详细地址'
|
||||
isValid = false
|
||||
} else if (form.value.detail.length < 5) {
|
||||
errors.value.detail = '详细地址至少需要5个字符'
|
||||
isValid = false
|
||||
}
|
||||
|
||||
return isValid
|
||||
}
|
||||
|
||||
// 点击确认按钮 触发事件 用于更新父组件的 address
|
||||
const handleOk = () => {
|
||||
// 表单验证
|
||||
if (!validateForm()) {
|
||||
return
|
||||
}
|
||||
emit('update:updateaddress', form.value)
|
||||
emit('update:visible', false)
|
||||
}
|
||||
|
||||
// 点击取消按钮
|
||||
const handleCancel = () => {
|
||||
emit('update:visible', false)
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.modal-content {
|
||||
padding: var(--spacing-md);
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: var(--spacing-sm);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.required {
|
||||
color: var(--error-color, #ff4d4f);
|
||||
}
|
||||
|
||||
.error-message {
|
||||
color: var(--error-color, #ff4d4f);
|
||||
font-size: 12px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: var(--spacing-sm);
|
||||
padding: var(--spacing-md);
|
||||
border-top: 1px solid var(--border-light, #e8e8e8);
|
||||
margin-top: var(--spacing-lg);
|
||||
}
|
||||
|
||||
/* 为textarea添加最小高度 */
|
||||
:deep(.ant-input-textarea) {
|
||||
min-height: 80px;
|
||||
}
|
||||
</style>
|
||||
2320
src/Views/User/User.vue
Normal file
2320
src/Views/User/User.vue
Normal file
File diff suppressed because it is too large
Load Diff
@@ -2,28 +2,901 @@
|
||||
<!-- 布局 从上到下 user信息：用户头像 用户名 -->
|
||||
<template>
|
||||
<div class="user-info">
|
||||
<!-- 用户信息头部 -->
|
||||
<div class="user-info-top">
|
||||
<div class="user-avatar-wrapper">
|
||||
<div class="user-avatar">
|
||||
<!-- <img :src="user.avatar" alt="用户头像"> -->
|
||||
<img :src="user.avatar" alt="用户头像" class="avatar-img">
|
||||
<span class="avatar-edit-badge">编辑</span>
|
||||
</div>
|
||||
<!-- <span class="user-online-indicator"></span> -->
|
||||
<div class="user-name">
|
||||
<div>用户名：</div>
|
||||
<div>关注店铺 收货地址</div>
|
||||
<span class="name-text">{{ user.username }}</span>
|
||||
<span class="user-level">Lv.{{ user.level }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="user-info-main">
|
||||
<div>
|
||||
购物信息 ：购物车 待收货 代发货 待付款
|
||||
<div class="user-name-section">
|
||||
<div class="user-stats">
|
||||
<div class="stat-item">
|
||||
<span class="stat-value">{{ user.followCount }}</span>
|
||||
<span class="stat-label">关注</span>
|
||||
</div>
|
||||
<div>
|
||||
订单信息 ：已完成 待评价 待付款 待发货
|
||||
<div class="stat-divider"></div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-value">{{ user.fansCount }}</span>
|
||||
<span class="stat-label">粉丝</span>
|
||||
</div>
|
||||
<div class="stat-divider"></div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-value">{{ user.collectionCount }}</span>
|
||||
<span class="stat-label">收藏</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="user-actions">
|
||||
<a href="/user?nav=address" class="action-link">收货地址</a>
|
||||
<a href="/user?nav=follow" class="action-link">关注店铺</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 订单状态卡片 -->
|
||||
<div class="order-status-card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">我的订单</h3>
|
||||
<!-- <a href="/user/orders" class="card-more">查看全部 <SettingOutlined style="transform: rotate(90deg);" /></a> -->
|
||||
</div>
|
||||
<div class="order-status-grid">
|
||||
<div class="status-item" @click="navigateToOrder('pending_payment')">
|
||||
<div class="status-icon">
|
||||
<CreditCardOutlined />
|
||||
</div>
|
||||
<div class="status-label">待付款</div>
|
||||
<div class="status-badge" v-if="orderCounts.pending_payment > 0">{{ orderCounts.pending_payment }}</div>
|
||||
</div>
|
||||
<div class="status-item" @click="navigateToOrder('pending_shipment')">
|
||||
<div class="status-icon">
|
||||
<LoadingOutlined />
|
||||
</div>
|
||||
<div class="status-label">待发货</div>
|
||||
<div class="status-badge" v-if="orderCounts.pending_shipment > 0">{{ orderCounts.pending_shipment }}</div>
|
||||
</div>
|
||||
<div class="status-item" @click="navigateToOrder('pending_receipt')">
|
||||
<div class="status-icon">
|
||||
<CarOutlined />
|
||||
</div>
|
||||
<div class="status-label">待收货</div>
|
||||
<div class="status-badge" v-if="orderCounts.pending_receipt > 0">{{ orderCounts.pending_receipt }}</div>
|
||||
</div>
|
||||
<div class="status-item" @click="navigateToOrder('pending_review')">
|
||||
<div class="status-icon">
|
||||
<SolutionOutlined />
|
||||
</div>
|
||||
<div class="status-label">待评价</div>
|
||||
<div class="status-badge" v-if="orderCounts.pending_review > 0">{{ orderCounts.pending_review }}</div>
|
||||
</div>
|
||||
<div class="status-item" @click="navigateToOrder('completed')">
|
||||
<div class="status-icon">
|
||||
<CheckOutlined />
|
||||
</div>
|
||||
<div class="status-label">已完成</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 功能菜单网格 -->
|
||||
<div class="user-function-grid">
|
||||
<!-- 购物相关 -->
|
||||
<div class="function-card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">购物相关</h3>
|
||||
</div>
|
||||
<div class="function-grid">
|
||||
<div class="function-item" @click="navigateTo('/cart')">
|
||||
<div class="function-icon">
|
||||
<ShoppingCartOutlined />
|
||||
</div>
|
||||
<div class="function-label">购物车</div>
|
||||
</div>
|
||||
<div class="function-item" @click="navigateTo('/user/wishlist')">
|
||||
<div class="function-icon">
|
||||
<HeartOutlined />
|
||||
</div>
|
||||
<div class="function-label">收藏夹</div>
|
||||
</div>
|
||||
<div class="function-item" @click="navigateTo('/user/history')">
|
||||
<div class="function-icon">
|
||||
<HistoryOutlined />
|
||||
</div>
|
||||
<div class="function-label">浏览历史</div>
|
||||
</div>
|
||||
<div class="function-item" @click="navigateTo('/user/followed_shops')">
|
||||
<div class="function-icon">
|
||||
<ShopOutlined />
|
||||
</div>
|
||||
<div class="function-label">关注店铺</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 优惠相关 -->
|
||||
<div class="function-card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">优惠相关</h3>
|
||||
</div>
|
||||
<div class="function-grid">
|
||||
<div class="function-item" @click="navigateTo('/user/coupons')">
|
||||
<div class="function-icon">
|
||||
<GiftOutlined />
|
||||
</div>
|
||||
<div class="function-label">红包</div>
|
||||
<div class="function-badge" v-if="user.couponCount > 0">{{ user.couponCount }}</div>
|
||||
</div>
|
||||
<div class="function-item" @click="navigateTo('/user/discounts')">
|
||||
<div class="function-icon">
|
||||
<TagOutlined />
|
||||
</div>
|
||||
<div class="function-label">优惠券</div>
|
||||
<div class="function-badge" v-if="user.discountCount > 0">{{ user.discountCount }}</div>
|
||||
</div>
|
||||
<div class="function-item" @click="navigateTo('/user/tao_coin')">
|
||||
<div class="function-icon">
|
||||
<GoldOutlined />
|
||||
</div>
|
||||
<div class="function-label">淘币</div>
|
||||
<div class="function-value">{{ user.taoCoin }}</div>
|
||||
</div>
|
||||
<div class="function-item" @click="navigateTo('/user/points')">
|
||||
<div class="function-icon">
|
||||
<TrophyOutlined />
|
||||
</div>
|
||||
<div class="function-label">积分</div>
|
||||
<div class="function-value">{{ user.points }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 账户相关 -->
|
||||
<div class="function-card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">账户相关</h3>
|
||||
</div>
|
||||
<div class="function-grid">
|
||||
<div class="function-item" @click="navigateTo('/user/profile')">
|
||||
<div class="function-icon">
|
||||
<SettingOutlined />
|
||||
</div>
|
||||
<div class="function-label">账户设置</div>
|
||||
</div>
|
||||
<div class="function-item" @click="navigateTo('/user/address')">
|
||||
<div class="function-icon">
|
||||
<EnvironmentOutlined />
|
||||
</div>
|
||||
<div class="function-label">收货地址</div>
|
||||
</div>
|
||||
<div class="function-item" @click="navigateTo('/user/customer_service')">
|
||||
<div class="function-icon">
|
||||
<CustomerServiceOutlined />
|
||||
</div>
|
||||
<div class="function-label">客服中心</div>
|
||||
</div>
|
||||
<div class="function-item" @click="navigateTo('/user/help')">
|
||||
<div class="function-icon">
|
||||
<QuestionCircleOutlined />
|
||||
</div>
|
||||
<div class="function-label">帮助中心</div>
|
||||
</div>
|
||||
<div>
|
||||
优惠 ：红包 优惠卷 淘币
|
||||
</div>
|
||||
<div>
|
||||
足迹信息 ： 已买完 收藏夹 购买过的店 足迹信息
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { ShoppingCartOutlined, HeartOutlined, HistoryOutlined, ShopOutlined, GiftOutlined, GoldOutlined, TrophyOutlined, SettingOutlined, EnvironmentOutlined, CustomerServiceOutlined, QuestionCircleOutlined, CreditCardOutlined, CarOutlined, LoadingOutlined, CheckOutlined, SolutionOutlined, TagOutlined } from '@ant-design/icons-vue'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
// 用户信息
|
||||
const user = ref({
|
||||
username: '用户名',
|
||||
avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=user123',
|
||||
level: 3,
|
||||
followCount: 12,
|
||||
fansCount: 8,
|
||||
collectionCount: 25,
|
||||
couponCount: 3,
|
||||
discountCount: 5,
|
||||
taoCoin: 1280,
|
||||
points: 560
|
||||
})
|
||||
|
||||
// 订单状态数量
|
||||
const orderCounts = ref({
|
||||
pending_payment: 2,
|
||||
pending_shipment: 1,
|
||||
pending_receipt: 3,
|
||||
pending_review: 0,
|
||||
completed: 0
|
||||
})
|
||||
|
||||
// 导航到指定页面
|
||||
const navigateTo = (path: string) => {
|
||||
// 根据路径跳转到User.vue中对应的导航项
|
||||
if (path === '/user/address') {
|
||||
router.push({ path: '/user', query: { nav: 'address' } })
|
||||
} else if (path === '/user/wishlist' || path === '/user/favorite') {
|
||||
router.push({ path: '/user', query: { nav: 'favorite' } })
|
||||
} else if (path === '/user/customer_service') {
|
||||
router.push({ path: '/user', query: { nav: 'customerService' } })
|
||||
} else if (path === '/user/help') {
|
||||
router.push({ path: '/user', query: { nav: 'help' } })
|
||||
} else if (path === '/user/profile' || path === '/user/settings') {
|
||||
router.push({ path: '/user', query: { nav: 'userInfo' } })
|
||||
} else {
|
||||
// 其他路径保持不变
|
||||
router.push(path)
|
||||
}
|
||||
}
|
||||
|
||||
// 导航到订单页面并带上状态参数
|
||||
const navigateToOrder = (status: string) => {
|
||||
router.push({
|
||||
path: '/user',
|
||||
query: {
|
||||
nav: 'order',
|
||||
status: status
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.user-info {
|
||||
margin: 0 auto;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 用户信息头部 */
|
||||
.user-info-top {
|
||||
align-items: center;
|
||||
background: linear-gradient(135deg, #ff6b6b 0%, #4ecdc4 50%, #45b7d1 100%);
|
||||
border-radius: 16px;
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
color: #ffffff;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.user-info-top::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(45deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.user-avatar-wrapper {
|
||||
display: flex;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
position: relative;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
border: 4px solid rgba(255, 255, 255, 0.3);
|
||||
transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.user-avatar:hover {
|
||||
transform: scale(1.1) rotate(360deg);
|
||||
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
|
||||
border-color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.avatar-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.avatar-edit-badge {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
color: #ffffff;
|
||||
font-size: 6px;
|
||||
padding: 4px 0;
|
||||
text-align: center;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.user-online-indicator {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
background-color: #52c41a;
|
||||
border: 3px solid rgba(255, 255, 255, 0.3);
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 2px 8px rgba(82, 196, 26, 0.4);
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
.user-name-section {
|
||||
padding: 0 12px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8px 12px;
|
||||
border-radius: 16px;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.name-text {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.user-level {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
padding: 4px 12px;
|
||||
border-radius: 16px;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.user-stats {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-right: 24px;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 12px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.stat-divider {
|
||||
width: 1px;
|
||||
height: 30px;
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
margin: 0 16px;
|
||||
}
|
||||
|
||||
.user-actions {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.action-link {
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
padding: 6px 16px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
border-radius: 20px;
|
||||
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.action-link:hover {
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
transform: translateY(-2px) scale(1.05);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
||||
backdrop-filter: blur(15px);
|
||||
}
|
||||
|
||||
/* 订单状态卡片 */
|
||||
.order-status-card {
|
||||
background-color: #ffffff;
|
||||
border-radius: 12px;
|
||||
padding: 10px;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
|
||||
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
border: 1px solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.order-status-card:hover {
|
||||
transform: translateY(-2px);
|
||||
border-color: rgba(255, 107, 107, 0.2);
|
||||
}
|
||||
|
||||
.order-status-card .card-header {
|
||||
background: linear-gradient(90deg, #ff9ff3 0%, #feca57 100%);
|
||||
color: white;
|
||||
padding: 12px 16px;
|
||||
border-radius: 8px 8px 0 0;
|
||||
margin: -10px -10px 5px -10px;
|
||||
}
|
||||
|
||||
.order-status-card .card-title {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.order-status-card .card-more {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.order-status-card .card-more:hover {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.card-more {
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.card-more:hover {
|
||||
color: #ff5000;
|
||||
}
|
||||
|
||||
.order-status-grid {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.status-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
padding: 16px 4px;
|
||||
border-radius: 8px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.status-item:hover {
|
||||
background-color: #f8f9fa;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.status-icon {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border-radius: 50%;
|
||||
background-color: #f0f2f5;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 8px;
|
||||
font-size: 24px;
|
||||
color: #666666;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.status-item:hover .status-icon {
|
||||
background-color: rgba(255, 107, 107, 0.1);
|
||||
color: #ff6b6b;
|
||||
transform: scale(1.1) rotate(5deg);
|
||||
box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
|
||||
}
|
||||
|
||||
.status-label {
|
||||
font-size: 8px;
|
||||
color: #333333;
|
||||
margin-bottom: 4px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.status-item:hover .status-label {
|
||||
color: #ff6b6b;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
background-color: #ff4d4f;
|
||||
color: #ffffff;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
padding: 2px 8px;
|
||||
border-radius: 10px;
|
||||
min-width: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 功能菜单网格 */
|
||||
.user-function-grid {
|
||||
position: absolute;
|
||||
left: -300%;
|
||||
top: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 16px;
|
||||
background-color: #ffffff;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
|
||||
z-index: 10;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: all 1s ease;
|
||||
}
|
||||
|
||||
.user-info:hover .user-function-grid {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
left: -215%;
|
||||
}
|
||||
|
||||
.function-card {
|
||||
background-color: #ffffff;
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
|
||||
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
border: 1px solid rgba(0, 0, 0, 0.05);
|
||||
width: 160px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* 调整user-info的宽度，确保左侧有足够空间显示功能菜单 */
|
||||
.user-info {
|
||||
width: 100%;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
/* 调整功能网格布局，使其在窄列中更紧凑 */
|
||||
.function-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.function-card:hover {
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
|
||||
transform: translateY(-2px);
|
||||
border-color: rgba(255, 107, 107, 0.2);
|
||||
}
|
||||
|
||||
/* 功能卡片头部公共样式 */
|
||||
.function-card .card-header {
|
||||
color: white;
|
||||
padding: 12px 16px;
|
||||
border-radius: 8px 8px 0 0;
|
||||
margin: -16px -16px 16px -16px;
|
||||
}
|
||||
|
||||
.function-card .card-title {
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* 购物相关卡片 */
|
||||
.function-card:nth-child(1) .card-header {
|
||||
background: linear-gradient(90deg, #ff6b6b 0%, #ff8e53 100%);
|
||||
}
|
||||
|
||||
/* 优惠相关卡片 */
|
||||
.function-card:nth-child(2) .card-header {
|
||||
background: linear-gradient(90deg, #4ecdc4 0%, #45b7d1 100%);
|
||||
}
|
||||
|
||||
/* 账户相关卡片 */
|
||||
.function-card:nth-child(3) .card-header {
|
||||
background: linear-gradient(90deg, #96ceb4 0%, #feca57 100%);
|
||||
}
|
||||
|
||||
.function-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
padding: 12px 4px;
|
||||
border-radius: 8px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.function-item:hover {
|
||||
background-color: #f8f9fa;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.function-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background-color: #f0f2f5;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 6px;
|
||||
font-size: 20px;
|
||||
color: #666666;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.function-item:hover .function-icon {
|
||||
background-color: rgba(78, 205, 196, 0.1);
|
||||
color: #4ecdc4;
|
||||
transform: scale(1.1) rotate(5deg);
|
||||
box-shadow: 0 4px 12px rgba(78, 205, 196, 0.3);
|
||||
}
|
||||
|
||||
.function-label {
|
||||
font-size: 12px;
|
||||
color: #333333;
|
||||
margin-bottom: 2px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.function-item:hover .function-label {
|
||||
color: #4ecdc4;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.function-badge {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
background-color: #ff4d4f;
|
||||
color: #ffffff;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
padding: 2px 8px;
|
||||
border-radius: 10px;
|
||||
min-width: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.function-value {
|
||||
font-size: 12px;
|
||||
color: #ff5000;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* 动画效果 */
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
box-shadow: 0 0 0 0 rgba(82, 196, 26, 0.7);
|
||||
}
|
||||
70% {
|
||||
box-shadow: 0 0 0 10px rgba(82, 196, 26, 0);
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 0 0 rgba(82, 196, 26, 0);
|
||||
}
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.user-info {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.user-info-top {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.user-avatar-wrapper {
|
||||
margin-right: 0;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.user-stats {
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.user-actions {
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.order-status-grid {
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.status-item {
|
||||
padding: 12px 4px;
|
||||
}
|
||||
|
||||
.status-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.status-label {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.user-function-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.function-grid {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.function-item {
|
||||
padding: 12px 4px;
|
||||
}
|
||||
|
||||
.function-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.function-label {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* 调整卡片头部样式 */
|
||||
.function-card .card-header {
|
||||
padding: 10px 12px;
|
||||
margin: -16px -16px 16px -16px;
|
||||
}
|
||||
|
||||
.function-card {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.order-status-card {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.order-status-card .card-header {
|
||||
padding: 10px 12px;
|
||||
margin: -16px -16px 16px -16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.user-info-top {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.name-text {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.user-stats {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.order-status-grid {
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.status-item {
|
||||
padding: 8px 2px;
|
||||
}
|
||||
|
||||
.status-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.status-label {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.function-grid {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.function-item {
|
||||
padding: 8px 2px;
|
||||
}
|
||||
|
||||
.function-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.function-label {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
.order-status-grid {
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
}
|
||||
|
||||
.status-item {
|
||||
padding: 6px 2px;
|
||||
}
|
||||
|
||||
.status-icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.function-grid {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
|
||||
.function-item {
|
||||
padding: 6px 2px;
|
||||
}
|
||||
|
||||
.function-icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -6,7 +6,19 @@
|
||||
</div>
|
||||
<div id="footer-copyright">
|
||||
<!-- 版权信息 -->
|
||||
<h2>Copyright @ 2023 淘淘王</h2>
|
||||
<div class="copyright-content">
|
||||
<p class="copyright-text">© 2026 TaoTaoWang. 保留所有权利</p>
|
||||
<div class="copyright-links">
|
||||
<a href="/about">关于我们</a>
|
||||
<span class="copyright-separator">|</span>
|
||||
<a href="/privacy">隐私政策</a>
|
||||
<span class="copyright-separator">|</span>
|
||||
<a href="/terms">服务条款</a>
|
||||
<span class="copyright-separator">|</span>
|
||||
<a href="/contact">联系我们</a>
|
||||
</div>
|
||||
<p class="copyright-icp">京ICP备12345678号-1 | 京公网安备11010502030123号</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -59,14 +71,84 @@ const productLists = ref([
|
||||
<style scoped>
|
||||
#footer {
|
||||
width: 100%;
|
||||
padding: 0 20px;
|
||||
padding: 0 var(--spacing-md);
|
||||
}
|
||||
h1 {
|
||||
color: #42b983;
|
||||
color: var(--success-color);
|
||||
}
|
||||
|
||||
#footer-contact {
|
||||
/* 高度根据内容自适应 */
|
||||
height: initial;
|
||||
}
|
||||
|
||||
/* 版权信息样式 */
|
||||
#footer-copyright {
|
||||
background-color: var(--bg-light);
|
||||
padding: var(--spacing-md) 0;
|
||||
border-top: 1px solid var(--border-light);
|
||||
margin-top: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.copyright-content {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.copyright-text {
|
||||
margin: 0 0 var(--spacing-sm) 0;
|
||||
font-weight: 500;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.copyright-links {
|
||||
margin: 0 0 var(--spacing-sm) 0;
|
||||
}
|
||||
|
||||
.copyright-links a {
|
||||
color: var(--text-secondary);
|
||||
text-decoration: none;
|
||||
margin: 0 var(--spacing-sm);
|
||||
transition: color var(--transition-normal);
|
||||
}
|
||||
|
||||
.copyright-links a:hover {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.copyright-separator {
|
||||
color: var(--text-tertiary);
|
||||
margin: 0 var(--spacing-xs);
|
||||
}
|
||||
|
||||
.copyright-icp {
|
||||
margin: 0;
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
/* 响应式调整 */
|
||||
@media (max-width: 768px) {
|
||||
.copyright-content {
|
||||
padding: 0 var(--spacing-xl);
|
||||
}
|
||||
|
||||
.copyright-links {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.copyright-links a {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.copyright-separator {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,24 +1,47 @@
|
||||
<template>
|
||||
<div id="header">
|
||||
<div id="header" v-if="booleanHeader">
|
||||
<div id="header-profile">
|
||||
<div id="header-profile-left">
|
||||
<!-- 用户信息悬浮菜单 -->
|
||||
<Dropdown :menu="{ items: userMenu }" trigger="hover">
|
||||
<div class="user-info-container">
|
||||
<Avatar size="large" src="https://api.dicebear.com/7.x/avataaars/svg?seed=user123" />
|
||||
<div class="user-avatar-wrapper">
|
||||
<Avatar size="large" src="https://api.dicebear.com/7.x/avataaars/svg?seed=user123" class="user-avatar" />
|
||||
<span class="user-online-indicator"></span>
|
||||
</div>
|
||||
<div class="user-info-text">
|
||||
<span class="user-name">用户名</span>
|
||||
<span class="user-level">Lv.3</span>
|
||||
</div>
|
||||
<span class="user-arrow">▼</span>
|
||||
</div>
|
||||
<template #overlay>
|
||||
<div class="user-info-menu">
|
||||
<div class="user-info-menu-item">
|
||||
<a href="javascript:;">1st menu item</a>
|
||||
</div>
|
||||
<div class="user-info-menu-item">
|
||||
<a href="javascript:;">2nd menu item</a>
|
||||
</div>
|
||||
<div class="user-info-menu-item">
|
||||
<a href="javascript:;">3rd menu item</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Dropdown>
|
||||
</div>
|
||||
<div id="header-profile-right">
|
||||
<!-- 右侧功能菜单 -->
|
||||
<Dropdown :menu="{ items: rightMenu }" trigger="hover">
|
||||
<Button type="text">更多</Button>
|
||||
<Button type="text" class="header-more-btn">更多 <i class="iconfont icon-zhankaishouqi"></i></Button>
|
||||
</Dropdown>
|
||||
<a href="/">首页</a>
|
||||
<Button type="primary" @click="router.push('/cart')">购物车</Button>
|
||||
<Button type="primary" @click="router.push('/order')">订单</Button>
|
||||
<a href="/" class="header-nav-link">首页</a>
|
||||
<Button type="primary" @click="router.push('/cart')" class="header-cart-btn">
|
||||
<i class="iconfont icon-gouwuche"></i> 购物车
|
||||
</Button>
|
||||
<Button type="primary" @click="router.push('/order')" class="header-order-btn">
|
||||
<i class="iconfont icon-dingdan"></i> 订单
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<Row id="header-nav-row" v-if="booleanSearch">
|
||||
@@ -31,8 +54,8 @@
|
||||
<!-- 搜索类型选择 -->
|
||||
<div class="search-type-selector">
|
||||
<ul>
|
||||
<li class="search-type-item active" @click="setSearchType('宝贝')">宝贝</li>
|
||||
<li class="search-type-item" @click="setSearchType('店铺')">店铺</li>
|
||||
<li class="search-type-item active" @click="setSearchType('宝贝', $event)">宝贝</li>
|
||||
<li class="search-type-item" @click="setSearchType('店铺', $event)">店铺</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -41,15 +64,8 @@
|
||||
<div class="search-input-prefix">
|
||||
<i class="iconfont icon-sousuo prefix-icon"></i>
|
||||
</div>
|
||||
<Input
|
||||
v-model:value="searchValue"
|
||||
placeholder="请输入搜索关键词"
|
||||
style="width: 100%"
|
||||
@search="onSearch"
|
||||
@focus="onInputFocus"
|
||||
@blur="onInputBlur"
|
||||
class="custom-search-input"
|
||||
/>
|
||||
<Input v-model:value="searchValue" placeholder="请输入搜索关键词" style="width: 100%" @search="onSearch"
|
||||
@focus="onInputFocus" @blur="onInputBlur" class="custom-search-input" />
|
||||
<div class="search-input-suffix" v-if="searchValue">
|
||||
<i class="iconfont icon-guanbi" @click="clearSearch"></i>
|
||||
</div>
|
||||
@@ -90,9 +106,10 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { ref, watch } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { Button, Col, Row, Space, Dropdown, Avatar, Menu, Divider, Tag } from 'ant-design-vue';
|
||||
import Input from 'ant-design-vue/es/input';
|
||||
const router = useRouter()
|
||||
// 定义搜索框绑定的变量
|
||||
const searchValue = ref('')
|
||||
@@ -100,21 +117,25 @@ const searchValue = ref('')
|
||||
const showHistory = ref(false)
|
||||
// 标志：是否正在清空历史记录
|
||||
const isClearingHistory = ref(false)
|
||||
// 标志：是否在搜索界面
|
||||
// 控制搜索框是否显示
|
||||
const booleanSearch = ref(true)
|
||||
// 路由事件
|
||||
router.beforeEach((to, from, next) => {
|
||||
if (to.name === 'search' && to.query.keyword) {
|
||||
searchValue.value = to.query.keyword as string
|
||||
// 控制Header是否显示
|
||||
const booleanHeader = ref(true)
|
||||
// 监听路由变化 当路由变化时 更新搜索框的显示状态
|
||||
watch(() => router.currentRoute.value.name, (newName) => {
|
||||
// 如果是搜索页面 则更新查询参数
|
||||
if (newName === 'search') {
|
||||
searchValue.value = router.currentRoute.value.query.keyword as string
|
||||
}
|
||||
console.log(to.name)
|
||||
// 如果在商品页面 隐藏搜索框
|
||||
if (to.name === 'productDetail') {
|
||||
booleanSearch.value = false
|
||||
} else {
|
||||
// 如果是商品页面 则显示搜索框
|
||||
if (newName === 'productDetail' || newName === 'chat') {
|
||||
booleanSearch.value = true
|
||||
}
|
||||
next()
|
||||
// 如果在登录页面 则隐藏搜索框
|
||||
if (newName === 'login') {
|
||||
booleanHeader.value = false
|
||||
}
|
||||
console.log(newName)
|
||||
})
|
||||
// 定义搜索框的搜索事件
|
||||
const onSearch = (value: string) => {
|
||||
@@ -173,15 +194,56 @@ const onInputBlur = () => {
|
||||
}, 200)
|
||||
}
|
||||
|
||||
// 当前搜索类型
|
||||
const currentSearchType = ref('宝贝')
|
||||
|
||||
// 设置搜索类型
|
||||
const setSearchType = (type: string) => {
|
||||
const setSearchType = (type: string, event: MouseEvent) => {
|
||||
const typeItems = document.querySelectorAll('.search-type-item')
|
||||
// 找到当前活跃的元素
|
||||
const currentActiveItem = document.querySelector('.search-type-item.active')
|
||||
// 保存点击的元素引用
|
||||
const clickedTarget = event.currentTarget as HTMLElement
|
||||
|
||||
// 为当前活跃的元素添加消失动画
|
||||
if (currentActiveItem && currentActiveItem !== clickedTarget) {
|
||||
if (currentSearchType.value === '宝贝' && type === '店铺') {
|
||||
// 宝贝 -> 店铺：宝贝元素从左往右消失
|
||||
currentActiveItem.classList.add('animate-right-out')
|
||||
} else if (currentSearchType.value === '店铺' && type === '宝贝') {
|
||||
// 店铺 -> 宝贝：店铺元素从右往左消失
|
||||
currentActiveItem.classList.add('animate-left-out')
|
||||
}
|
||||
|
||||
// 等待消失动画完成后再继续
|
||||
setTimeout(() => {
|
||||
// 移除所有元素的类
|
||||
typeItems.forEach(item => {
|
||||
item.classList.remove('active')
|
||||
item.classList.remove('active', 'animate-left', 'animate-right', 'animate-left-out', 'animate-right-out')
|
||||
})
|
||||
|
||||
// 添加active类到点击的元素
|
||||
// event?.currentTarget?.classList.add('active')
|
||||
if (clickedTarget) {
|
||||
// 判断切换方向
|
||||
if (currentSearchType.value === '宝贝' && type === '店铺') {
|
||||
// 宝贝 -> 店铺：从左往右出现
|
||||
clickedTarget.classList.add('active', 'animate-right')
|
||||
} else if (currentSearchType.value === '店铺' && type === '宝贝') {
|
||||
// 店铺 -> 宝贝：从右往左出现
|
||||
clickedTarget.classList.add('active', 'animate-left')
|
||||
} else {
|
||||
// 默认动画
|
||||
clickedTarget.classList.add('active')
|
||||
}
|
||||
currentSearchType.value = type
|
||||
}
|
||||
console.log('搜索类型:', type)
|
||||
|
||||
}, 300)
|
||||
} else {
|
||||
// 如果点击的是当前活跃的元素，直接返回
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
// 清除搜索输入
|
||||
@@ -226,9 +288,7 @@ const rightMenu = [
|
||||
<style scoped>
|
||||
#header {
|
||||
width: 100%;
|
||||
background-color: #ffffff;
|
||||
padding: 10px 20px;
|
||||
/* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
|
||||
padding: var(--spacing-sm) var(--spacing-md);
|
||||
position: relative;
|
||||
z-index: 1000;
|
||||
}
|
||||
@@ -242,7 +302,6 @@ const rightMenu = [
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
#header-profile-left {
|
||||
@@ -255,38 +314,317 @@ const rightMenu = [
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
/* 用户信息容器样式 */
|
||||
.user-info-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 12px;
|
||||
border-radius: 20px;
|
||||
gap: var(--spacing-md);
|
||||
padding: var(--spacing-sm) var(--spacing-md);
|
||||
border-radius: var(--border-radius-3xl);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
transition: all var(--transition-transform);
|
||||
}
|
||||
|
||||
.user-info-container:hover {
|
||||
background-color: #f0f2f5;
|
||||
background-color: var(--bg-light);
|
||||
box-shadow: var(--shadow-md);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* 用户头像区域 */
|
||||
.user-avatar-wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
border: 2px solid #ffffff;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
}
|
||||
|
||||
.user-info-container:hover .user-avatar {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.user-online-indicator {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: var(--success-color);
|
||||
border: 2px solid var(--card-bg);
|
||||
border-radius: var(--border-radius-full);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
box-shadow: 0 0 0 0 rgba(82, 196, 26, 0.7);
|
||||
}
|
||||
|
||||
70% {
|
||||
box-shadow: 0 0 0 10px rgba(82, 196, 26, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
box-shadow: 0 0 0 0 rgba(82, 196, 26, 0);
|
||||
}
|
||||
}
|
||||
|
||||
/* 用户信息文本区域 */
|
||||
.user-info-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
font-size: 14px;
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.user-level {
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
color: var(--warning-color);
|
||||
background-color: #fff7e6;
|
||||
padding: 1px 6px;
|
||||
border-radius: var(--border-radius-xl);
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.user-arrow {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
transition: transform 0.3s ease;
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--text-tertiary);
|
||||
transition: transform var(--transition-transform);
|
||||
}
|
||||
|
||||
.user-info-container:hover .user-arrow {
|
||||
transform: rotate(180deg);
|
||||
transform: rotate(180deg) scale(1.1);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
/* 用户信息菜单样式 */
|
||||
.user-info-menu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: var(--spacing-md);
|
||||
border-radius: var(--border-radius-lg);
|
||||
box-shadow: var(--shadow-lg);
|
||||
width: 100%;
|
||||
z-index: 1000;
|
||||
transition: all var(--transition-transform);
|
||||
background-color: var(--card-bg);
|
||||
}
|
||||
|
||||
.user-info-menu-item {
|
||||
padding: var(--spacing-sm) var(--spacing-md);
|
||||
border-radius: var(--border-radius-2xl);
|
||||
transition: all var(--transition-transform);
|
||||
}
|
||||
|
||||
.user-info-menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.user-info-menu-item:hover {
|
||||
background-color: var(--bg-color);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* 右侧功能菜单样式 */
|
||||
.header-more-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-xs);
|
||||
padding: var(--spacing-xs) var(--spacing-md);
|
||||
border-radius: var(--border-radius-2xl);
|
||||
transition: all var(--transition-transform);
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.header-more-btn:hover {
|
||||
background-color: var(--bg-color);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.header-nav-link {
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: 500;
|
||||
color: var(--text-secondary);
|
||||
text-decoration: none;
|
||||
padding: var(--spacing-xs) var(--spacing-md);
|
||||
border-radius: var(--border-radius-2xl);
|
||||
transition: all var(--transition-transform);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.header-nav-link:hover {
|
||||
color: var(--primary-color);
|
||||
background-color: var(--bg-primary-lightest);
|
||||
}
|
||||
|
||||
.header-nav-link::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 2px;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
background-color: var(--primary-color);
|
||||
border-radius: 1px;
|
||||
transition: all var(--transition-transform);
|
||||
}
|
||||
|
||||
.header-nav-link:hover::after {
|
||||
width: 80%;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
/* 购物车和订单按钮样式 */
|
||||
.header-cart-btn,
|
||||
.header-order-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-xs);
|
||||
padding: var(--spacing-sm) var(--spacing-md);
|
||||
border-radius: var(--border-radius-3xl);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: 500;
|
||||
transition: all var(--transition-transform);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.header-cart-btn {
|
||||
background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
|
||||
border: none;
|
||||
}
|
||||
|
||||
.header-order-btn {
|
||||
background: linear-gradient(135deg, var(--secondary-color), var(--secondary-hover));
|
||||
border: none;
|
||||
}
|
||||
|
||||
.header-cart-btn:hover,
|
||||
.header-order-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.header-cart-btn:active,
|
||||
.header-order-btn:active {
|
||||
transform: translateY(0);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.header-cart-btn::before,
|
||||
.header-order-btn::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
|
||||
transform: rotate(45deg);
|
||||
animation: shine 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes shine {
|
||||
0% {
|
||||
transform: rotate(45deg) translateX(-100%) translateY(-100%);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(45deg) translateX(100%) translateY(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
#header-profile {
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.user-info-container {
|
||||
gap: 8px;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.user-level {
|
||||
font-size: 11px;
|
||||
padding: 1px 4px;
|
||||
}
|
||||
|
||||
#header-profile-right {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.header-nav-link {
|
||||
font-size: 13px;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
|
||||
.header-cart-btn,
|
||||
.header-order-btn {
|
||||
padding: 6px 12px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.header-cart-btn i,
|
||||
.header-order-btn i,
|
||||
.header-more-btn i {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.user-info-text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.user-info-container {
|
||||
padding: 6px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.header-nav-link {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.header-cart-btn span,
|
||||
.header-order-btn span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.header-cart-btn,
|
||||
.header-order-btn {
|
||||
padding: 8px;
|
||||
border-radius: 50%;
|
||||
min-width: unset;
|
||||
}
|
||||
}
|
||||
|
||||
/* Logo样式 */
|
||||
@@ -311,7 +649,7 @@ const rightMenu = [
|
||||
align-items: flex-start;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 700px;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@@ -394,22 +732,83 @@ const rightMenu = [
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 8px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
left: -10%;
|
||||
width: 120%;
|
||||
height: 2px;
|
||||
background-color: #ff5000;
|
||||
border-radius: 1px;
|
||||
animation: slideIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
/* 从左往右动画 */
|
||||
.search-type-item.animate-right::after {
|
||||
animation: slideInRight 0.3s ease-out;
|
||||
}
|
||||
|
||||
/* 从右往左动画 */
|
||||
.search-type-item.animate-left::after {
|
||||
animation: slideInLeft 0.3s ease-out;
|
||||
}
|
||||
|
||||
/* 从左往右消失动画 */
|
||||
.search-type-item.animate-right-out::after {
|
||||
animation: slideOutRight 0.3s ease-out;
|
||||
}
|
||||
|
||||
/* 从右往左消失动画 */
|
||||
.search-type-item.animate-left-out::after {
|
||||
animation: slideOutLeft 0.3s ease-out;
|
||||
}
|
||||
|
||||
/* 搜索类型选择器从左往右动画 */
|
||||
@keyframes slideInRight {
|
||||
from {
|
||||
width: 0;
|
||||
left: 50%;
|
||||
left: -10%;
|
||||
}
|
||||
|
||||
to {
|
||||
width: 120%;
|
||||
left: -10%;
|
||||
}
|
||||
}
|
||||
|
||||
/* 搜索类型选择器从右往左动画 */
|
||||
@keyframes slideInLeft {
|
||||
from {
|
||||
width: 0;
|
||||
left: 120%;
|
||||
|
||||
}
|
||||
|
||||
to {
|
||||
width: 120%;
|
||||
left: -10%;
|
||||
}
|
||||
}
|
||||
|
||||
/* 从左往右消失动画 */
|
||||
@keyframes slideOutRight {
|
||||
from {
|
||||
width: 120%;
|
||||
left: -10%;
|
||||
}
|
||||
|
||||
to {
|
||||
width: 0;
|
||||
left: 200%;
|
||||
}
|
||||
}
|
||||
|
||||
/* 从右往左消失动画 */
|
||||
@keyframes slideOutLeft {
|
||||
from {
|
||||
width: 100%;
|
||||
left: 0;
|
||||
right: -10%;
|
||||
}
|
||||
|
||||
to {
|
||||
width: 0%;
|
||||
right: -200%;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -442,15 +841,17 @@ const rightMenu = [
|
||||
font-size: 16px;
|
||||
min-height: 52px;
|
||||
height: 52px;
|
||||
padding: 0 50px 0 48px;
|
||||
padding: 0 25px 0 15px;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
background-color: transparent;
|
||||
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.5px;
|
||||
box-sizing: border-box; /* 关键！ */
|
||||
outline: none; /* 避免默认焦点轮廓 */
|
||||
box-sizing: border-box;
|
||||
/* 关键！ */
|
||||
outline: none;
|
||||
/* 避免默认焦点轮廓 */
|
||||
}
|
||||
|
||||
/* 可选：焦点状态 */
|
||||
@@ -499,6 +900,7 @@ const rightMenu = [
|
||||
opacity: 0;
|
||||
transform: translateY(-50%) scale(0.8);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(-50%) scale(1);
|
||||
@@ -517,8 +919,7 @@ const rightMenu = [
|
||||
|
||||
/* 搜索按钮 */
|
||||
.search-button-container {
|
||||
margin-right: 1px;
|
||||
padding: 15.5px;
|
||||
padding: 16.5px 30px;
|
||||
height: 100%;
|
||||
background: linear-gradient(135deg, #ff5000, #ff8c00);
|
||||
color: #ffffff;
|
||||
|
||||
@@ -83,11 +83,11 @@ const adList = [
|
||||
<style scoped>
|
||||
#main {
|
||||
width: 100%;
|
||||
padding: 0 20px;
|
||||
padding: 0 var(--spacing-md);
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #42b983;
|
||||
color: var(--success-color);
|
||||
}
|
||||
|
||||
#main-header {
|
||||
@@ -95,8 +95,8 @@ h1 {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
padding: 16px 0;
|
||||
gap: var(--spacing-md);
|
||||
padding: var(--spacing-md) 0;
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
@@ -104,41 +104,41 @@ h1 {
|
||||
#main-header .ant-btn {
|
||||
width: 120px;
|
||||
height: 45px;
|
||||
font-size: 14px;
|
||||
font-size: var(--font-size-sm);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
border-radius: 8px;
|
||||
border-radius: var(--border-radius-md);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
#main-header .ant-btn-primary {
|
||||
background-color: #1890ff;
|
||||
border-color: #1890ff;
|
||||
transition: all 0.3s ease;
|
||||
background-color: var(--secondary-color);
|
||||
border-color: var(--secondary-color);
|
||||
transition: all var(--transition-normal);
|
||||
}
|
||||
|
||||
#main-header .ant-btn-primary:hover {
|
||||
background-color: #40a9ff;
|
||||
border-color: #40a9ff;
|
||||
background-color: var(--secondary-hover);
|
||||
border-color: var(--secondary-hover);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
|
||||
}
|
||||
/* 商品分类样式 */
|
||||
.main-content-col-top {
|
||||
padding: 20px;
|
||||
background-color: #ffffff;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
||||
padding: var(--spacing-md);
|
||||
background-color: var(--card-bg);
|
||||
border-radius: var(--border-radius-lg);
|
||||
box-shadow: var(--shadow-lg);
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
transition: all var(--transition-transform);
|
||||
}
|
||||
|
||||
.main-content-col-top:hover {
|
||||
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
|
||||
box-shadow: var(--shadow-xl);
|
||||
}
|
||||
|
||||
|
||||
@@ -161,36 +161,35 @@ h1 {
|
||||
}
|
||||
|
||||
.main-content-col-top li {
|
||||
margin-bottom: 12px;
|
||||
padding: 8px;
|
||||
border-radius: 8px;
|
||||
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
margin-bottom: var(--spacing-sm);
|
||||
padding: var(--spacing-sm);
|
||||
border-radius: var(--border-radius-md);
|
||||
transition: all var(--transition-transform);
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/* 分类详情样式 */
|
||||
.main-content-col-top li:hover {
|
||||
background-color: #fff5f5;
|
||||
transform: translateX(8px);
|
||||
box-shadow: 0 2px 8px rgba(255, 80, 0, 0.1);
|
||||
background-color: var(--bg-primary-light);
|
||||
transform: translateX(var(--spacing-sm));
|
||||
box-shadow: 0 2px 8px rgba(var(--primary-light-rgb), 0.1);
|
||||
}
|
||||
|
||||
/* 分类项样式 */
|
||||
.category-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
gap: var(--spacing-xs);
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
border-radius: var(--border-radius-md);
|
||||
transition: all var(--transition-transform);
|
||||
}
|
||||
|
||||
.category-item:hover {
|
||||
/* .category-item:hover {
|
||||
background-color: rgba(255, 80, 0, 0.05);
|
||||
}
|
||||
} */
|
||||
|
||||
/* 分类详情样式 */
|
||||
.category-detail {
|
||||
@@ -199,17 +198,17 @@ h1 {
|
||||
top: -60px;
|
||||
width: 600px;
|
||||
height: 400px;
|
||||
background-color: #ffffff;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
|
||||
padding: 20px;
|
||||
margin-left: 10px;
|
||||
background-color: var(--card-bg);
|
||||
border-radius: var(--border-radius-lg);
|
||||
box-shadow: var(--shadow-xl);
|
||||
padding: var(--spacing-md);
|
||||
margin-left: var(--spacing-sm);
|
||||
z-index: 9999;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform: translateX(-20px);
|
||||
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
border: 2px solid #f0f0f0;
|
||||
transition: all var(--transition-transform);
|
||||
border: 2px solid var(--border-color);
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
@@ -229,16 +228,16 @@ h1 {
|
||||
.category-detail-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
transition: all 0.2s ease;
|
||||
gap: var(--spacing-sm);
|
||||
padding: var(--spacing-sm) 0;
|
||||
border-bottom: 1px solid var(--bg-light);
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.category-detail-item:hover {
|
||||
background-color: #f9f9f9;
|
||||
padding-left: 8px;
|
||||
border-radius: 4px;
|
||||
background-color: var(--bg-light);
|
||||
padding-left: var(--spacing-xs);
|
||||
border-radius: var(--border-radius-sm);
|
||||
}
|
||||
|
||||
.category-detail-item:last-child {
|
||||
@@ -246,16 +245,16 @@ h1 {
|
||||
}
|
||||
|
||||
.category-detail-item a {
|
||||
color: #333;
|
||||
color: var(--text-primary);
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: 500;
|
||||
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
transition: all var(--transition-transform);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.category-detail-item a:hover {
|
||||
color: #ff5000;
|
||||
color: var(--primary-color);
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
@@ -266,8 +265,8 @@ h1 {
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 1px;
|
||||
background-color: #ff5000;
|
||||
transition: width 0.3s ease;
|
||||
background-color: var(--primary-color);
|
||||
transition: width var(--transition-normal);
|
||||
}
|
||||
|
||||
.category-detail-item a:hover::after {
|
||||
@@ -275,103 +274,104 @@ h1 {
|
||||
}
|
||||
|
||||
.category-detail-item span {
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
transition: color 0.3s ease;
|
||||
color: var(--text-tertiary);
|
||||
font-size: var(--font-size-sm);
|
||||
transition: color var(--transition-normal);
|
||||
}
|
||||
|
||||
.main-content-col-top .iconfont {
|
||||
font-size: 22px;
|
||||
color: #ff5000;
|
||||
color: var(--primary-color);
|
||||
flex-shrink: 0;
|
||||
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
transition: all var(--transition-transform);
|
||||
}
|
||||
|
||||
.main-content-col-top li:hover .iconfont {
|
||||
transform: scale(1.1) rotate(5deg);
|
||||
color: #ff5000;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.main-content-col-top a {
|
||||
text-decoration: none;
|
||||
color: #333;
|
||||
color: var(--text-primary);
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
transition: all var(--transition-transform);
|
||||
position: relative;
|
||||
border-radius: 4px;
|
||||
border-radius: var(--border-radius-sm);
|
||||
}
|
||||
|
||||
.main-content-col-top a:hover {
|
||||
color: #ff5000;
|
||||
background-color: rgba(255, 80, 0, 0.1);
|
||||
color: var(--primary-color);
|
||||
background-color: var(--primary-light);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.main-content-col-top span {
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
transition: color 0.3s ease;
|
||||
color: var(--text-tertiary);
|
||||
font-size: var(--font-size-sm);
|
||||
transition: color var(--transition-normal);
|
||||
}
|
||||
|
||||
.main-content-col-top li:hover span {
|
||||
color: #ff5000;
|
||||
color: var(--primary-color);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* 主内容区域样式 */
|
||||
#main-content {
|
||||
margin-top: 20px;
|
||||
gap: 32px;
|
||||
margin-top: var(--spacing-xl);
|
||||
gap: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.main-content-col-center{
|
||||
background-color: #ffffff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
background-color: var(--card-bg);
|
||||
border-radius: var(--border-radius-md);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.main-content-col-center h2{
|
||||
font-size: 18px;
|
||||
font-size: var(--font-size-lg);
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
color: var(--text-primary);
|
||||
margin: 0;
|
||||
padding: 16px;
|
||||
background-color: #fafafa;
|
||||
border-radius: 6px;
|
||||
padding: var(--spacing-md);
|
||||
background-color: var(--bg-light);
|
||||
border-radius: var(--border-radius-sm);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#main-content-ad,
|
||||
#main-content-hot-goods {
|
||||
padding: 0 20px;
|
||||
margin-bottom: 16px;
|
||||
padding: 0 var(--spacing-xl);
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
#main-content-ad .ant-col,
|
||||
#main-content-hot-goods .ant-col {
|
||||
background-color: #fafafa;
|
||||
border-radius: 8px;
|
||||
transition: all 0.3s ease;
|
||||
background-color: var(--bg-light);
|
||||
border-radius: var(--border-radius-md);
|
||||
transition: all var(--transition-normal);
|
||||
}
|
||||
|
||||
#main-content-ad .ant-col:hover,
|
||||
#main-content-hot-goods .ant-col:hover {
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
box-shadow: var(--shadow-lg);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
/* 轮播广告样式 */
|
||||
#carousel-container {
|
||||
width: 100%;
|
||||
border-radius: 8px;
|
||||
height: 100%;
|
||||
border-radius: var(--border-radius-md);
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.carousel-item {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -379,7 +379,7 @@ h1 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.5s ease;
|
||||
transition: transform var(--transition-slow);
|
||||
}
|
||||
|
||||
.carousel-item:hover .carousel-image {
|
||||
@@ -391,22 +391,22 @@ h1 {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
padding: var(--spacing-xl);
|
||||
background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
|
||||
color: #ffffff;
|
||||
font-size: 24px;
|
||||
font-size: var(--font-size-2xl);
|
||||
font-weight: 600;
|
||||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.ant-carousel .slick-dots {
|
||||
bottom: 20px;
|
||||
bottom: var(--spacing-xl);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.ant-carousel .slick-dots li button {
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
border-radius: 50%;
|
||||
border-radius: var(--border-radius-full);
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
@@ -419,20 +419,5 @@ h1 {
|
||||
|
||||
/* 个人信息样式 */
|
||||
.main-content-col-bottom {
|
||||
padding: 20px;
|
||||
background-color: #ffffff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.main-content-col-bottom h2 {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin: 0;
|
||||
padding: 16px;
|
||||
background-color: #fafafa;
|
||||
border-radius: 6px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
@@ -40,7 +40,7 @@
|
||||
</div>
|
||||
<div class="tab-container">
|
||||
<div class="tab-header">
|
||||
<a-anchor direction="horizontal" :items="tabs" class="tab-item" />
|
||||
<a-anchor direction="horizontal" :bounds="150" :getCurrentAnchor="activeTab" :setAnchor="setActiveTab" :items="tabs" class="tab-item" />
|
||||
</div>
|
||||
<div class="tab-content">
|
||||
<!-- 评论 -->
|
||||
@@ -52,7 +52,74 @@
|
||||
<div class="reviews-content">
|
||||
<!-- 评论内容 -->
|
||||
<h3>用户评论</h3>
|
||||
<!-- 更多评论... -->
|
||||
<!-- 评论统计 -->
|
||||
<div class="reviews-stats">
|
||||
<div class="reviews-rating">
|
||||
<span class="rating-label">综合评分：</span>
|
||||
<span class="rating-value">4.8</span>
|
||||
<div class="rating-stars">
|
||||
<i class="iconfont icon-star"></i>
|
||||
<i class="iconfont icon-star"></i>
|
||||
<i class="iconfont icon-star"></i>
|
||||
<i class="iconfont icon-star"></i>
|
||||
<i class="iconfont icon-star-half"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="reviews-count">共 128 条评论</div>
|
||||
</div>
|
||||
<!-- 评论列表 -->
|
||||
<div class="reviews-list">
|
||||
<div class="review-item">
|
||||
<div class="review-header">
|
||||
<span class="reviewer-name">用户123</span>
|
||||
<div class="review-rating">
|
||||
<i class="iconfont icon-star"></i>
|
||||
<i class="iconfont icon-star"></i>
|
||||
<i class="iconfont icon-star"></i>
|
||||
<i class="iconfont icon-star"></i>
|
||||
<i class="iconfont icon-star"></i>
|
||||
</div>
|
||||
<span class="review-time">2026-01-15</span>
|
||||
</div>
|
||||
<div class="review-content">投影仪质量很好，画面清晰，操作简单，物流也很快，非常满意的一次购物！</div>
|
||||
<div class="review-images">
|
||||
<!-- <img src="https://neeko-copilot.bytedance.net/api/text2image?prompt=projector%20in%20office%20room&size=800x600" alt="评论图片" width="100">
|
||||
<img src="https://neeko-copilot.bytedance.net/api/text2image?prompt=projector%20screen%20display&size=800x600" alt="评论图片" width="100"> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="review-item">
|
||||
<div class="review-header">
|
||||
<span class="reviewer-name">科技达人</span>
|
||||
<div class="review-rating">
|
||||
<i class="iconfont icon-star"></i>
|
||||
<i class="iconfont icon-star"></i>
|
||||
<i class="iconfont icon-star"></i>
|
||||
<i class="iconfont icon-star"></i>
|
||||
<i class="iconfont icon-star"></i>
|
||||
</div>
|
||||
<span class="review-time">2026-01-10</span>
|
||||
</div>
|
||||
<div class="review-content">亮度很高，白天也能看清楚，音响效果也不错，接口丰富，值得购买。</div>
|
||||
</div>
|
||||
<div class="review-item">
|
||||
<div class="review-header">
|
||||
<span class="reviewer-name">办公室采购</span>
|
||||
<div class="review-rating">
|
||||
<i class="iconfont icon-star"></i>
|
||||
<i class="iconfont icon-star"></i>
|
||||
<i class="iconfont icon-star"></i>
|
||||
<i class="iconfont icon-star"></i>
|
||||
<i class="iconfont icon-star-o"></i>
|
||||
</div>
|
||||
<span class="review-time">2026-01-05</span>
|
||||
</div>
|
||||
<div class="review-content">性价比很高，适合办公室使用，客服态度也很好，有问必答。</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 查看更多评论 -->
|
||||
<div class="reviews-more">
|
||||
<a href="#" class="btn btn-secondary">查看更多评论</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 文图详情 -->
|
||||
@@ -61,6 +128,30 @@
|
||||
文图详情
|
||||
<a href="#description"></a>
|
||||
</h2>
|
||||
<div class="description-content">
|
||||
<div class="product-intro">
|
||||
<h3>产品介绍</h3>
|
||||
<p>BenQ 明基投影仪采用先进的DLP投影技术，提供清晰锐利的画面效果。无论是商务会议、教育培训还是家庭娱乐，都能满足您的需求。</p>
|
||||
</div>
|
||||
<div class="product-features">
|
||||
<h3>产品特点</h3>
|
||||
<ul>
|
||||
<li>1080P全高清分辨率，画质清晰细腻</li>
|
||||
<li>3500ANSI流明高亮度，白天也能清晰观看</li>
|
||||
<li>智能系统，支持无线投屏</li>
|
||||
<li>多种接口，满足不同设备连接需求</li>
|
||||
<li>长寿命灯泡，节能环保</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="product-images">
|
||||
<h3>产品展示</h3>
|
||||
<div class="image-gallery">
|
||||
<!-- <img src="https://neeko-copilot.bytedance.net/api/text2image?prompt=modern%20projector%20front%20view&size=1024x768" alt="投影仪正面" class="gallery-image">
|
||||
<img src="https://neeko-copilot.bytedance.net/api/text2image?prompt=projector%20rear%20view%20with%20ports&size=1024x768" alt="投影仪背面" class="gallery-image">
|
||||
<img src="https://neeko-copilot.bytedance.net/api/text2image?prompt=projector%20in%20meeting%20room&size=1024x768" alt="会议室使用场景" class="gallery-image"> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 参数信息 -->
|
||||
<div id="specs">
|
||||
@@ -68,6 +159,62 @@
|
||||
参数信息
|
||||
<a href="#specs"></a>
|
||||
</h2>
|
||||
<div class="specs-content">
|
||||
<table class="specs-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>参数类别</th>
|
||||
<th>参数值</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>投影技术</td>
|
||||
<td>DLP</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>分辨率</td>
|
||||
<td>1920 x 1080 (1080P)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>亮度</td>
|
||||
<td>3500 ANSI流明</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>对比度</td>
|
||||
<td>15000:1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>投影尺寸</td>
|
||||
<td>30-300英寸</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>投影距离</td>
|
||||
<td>1.0-10.0米</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>灯泡寿命</td>
|
||||
<td>正常模式：4000小时，经济模式：6000小时</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>接口</td>
|
||||
<td>HDMI x 2, VGA x 1, USB x 2, Audio x 1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>功耗</td>
|
||||
<td>正常模式：280W，经济模式：200W</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>尺寸</td>
|
||||
<td>310 x 220 x 100 mm</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>重量</td>
|
||||
<td>2.8 kg</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 本店推荐 -->
|
||||
<div id="recommendations">
|
||||
@@ -75,11 +222,83 @@
|
||||
本店推荐
|
||||
<a href="#recommendations"></a>
|
||||
</h2>
|
||||
<div class="recommendations-content">
|
||||
<div class="recommended-products">
|
||||
<div class="recommended-product">
|
||||
<div class="product-image">
|
||||
<!-- <img src="https://neeko-copilot.bytedance.net/api/text2image?prompt=mini%20portable%20projector&size=800x800" alt="迷你投影仪"> -->
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<h4 class="product-name">BenQ 明基 迷你便携投影仪</h4>
|
||||
<div class="product-price">¥2999</div>
|
||||
<div class="product-rating">
|
||||
<i class="iconfont icon-star"></i>
|
||||
<i class="iconfont icon-star"></i>
|
||||
<i class="iconfont icon-star"></i>
|
||||
<i class="iconfont icon-star"></i>
|
||||
<i class="iconfont icon-star-half"></i>
|
||||
<span>(45)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="recommended-product">
|
||||
<div class="product-image">
|
||||
<!-- <img src="https://neeko-copilot.bytedance.net/api/text2image?prompt=4k%20ultra%20hd%20projector&size=800x800" alt="4K投影仪"> -->
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<h4 class="product-name">BenQ 明基 4K超高清投影仪</h4>
|
||||
<div class="product-price">¥8999</div>
|
||||
<div class="product-rating">
|
||||
<i class="iconfont icon-star"></i>
|
||||
<i class="iconfont icon-star"></i>
|
||||
<i class="iconfont icon-star"></i>
|
||||
<i class="iconfont icon-star"></i>
|
||||
<i class="iconfont icon-star"></i>
|
||||
<span>(28)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="recommended-product">
|
||||
<div class="product-image">
|
||||
<!-- <img src="https://neeko-copilot.bytedance.net/api/text2image?prompt=projector%20screen%20white&size=800x800" alt="投影幕布"> -->
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<h4 class="product-name">100英寸投影幕布</h4>
|
||||
<div class="product-price">¥599</div>
|
||||
<div class="product-rating">
|
||||
<i class="iconfont icon-star"></i>
|
||||
<i class="iconfont icon-star"></i>
|
||||
<i class="iconfont icon-star"></i>
|
||||
<i class="iconfont icon-star"></i>
|
||||
<i class="iconfont icon-star-o"></i>
|
||||
<span>(67)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="recommended-product">
|
||||
<div class="product-image">
|
||||
<!-- <img src="https://neeko-copilot.bytedance.net/api/text2image?prompt=projector%20mount%20ceiling&size=800x800" alt="投影仪吊架"> -->
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<h4 class="product-name">投影仪吊架</h4>
|
||||
<div class="product-price">¥199</div>
|
||||
<div class="product-rating">
|
||||
<i class="iconfont icon-star"></i>
|
||||
<i class="iconfont icon-star"></i>
|
||||
<i class="iconfont icon-star"></i>
|
||||
<i class="iconfont icon-star"></i>
|
||||
<i class="iconfont icon-star-half"></i>
|
||||
<span>(32)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 右侧内容 -->
|
||||
<div class="right-panel" >
|
||||
<div class="product-info">
|
||||
<h1 class="product-title">BenQ 明基投影仪 商务办公会议培训用 1080P高清智能投影机</h1>
|
||||
@@ -124,6 +343,13 @@
|
||||
<div class="model-name">{{ model.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 数量 -->
|
||||
<div class="quantity-selector">
|
||||
<div class="quantity-label">数量</div>
|
||||
<div class="quantity-input">
|
||||
<a-input-number v-model:value="formOrderProduct.quantity" :min="1" :max="10" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -139,13 +365,16 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<SettlementLite ref="settlementLite" v-model:visible="visible" />
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
import SettlementLite from '../../Component/business/SettlementLite.vue'
|
||||
import type { OrderProduct } from '@/Util/Type';
|
||||
const router = useRouter()
|
||||
const productId = ref(router.currentRoute.value.params.productId)
|
||||
const visible = ref(false)
|
||||
|
||||
const currentIndex = ref(0)
|
||||
const images = ref([
|
||||
@@ -161,7 +390,11 @@ const currentImage = computed(() => images.value[currentIndex.value])
|
||||
const selectImage = (index: number) => {
|
||||
currentIndex.value = index
|
||||
}
|
||||
|
||||
// 提交表单 商品基础信息 型号 数量
|
||||
const formOrderProduct = ref<OrderProduct>({
|
||||
productId: 0,
|
||||
quantity: 1,
|
||||
})
|
||||
const selectedModel = ref('x500')
|
||||
const models = ref([
|
||||
{ id: 'x500', name: 'X500', price: '999', originalPrice: '1999', img: '/0.png' },
|
||||
@@ -175,6 +408,9 @@ const selectModel = (id: string) => {
|
||||
const selectedModelInfo = computed(() => models.value.find(model => model.id === selectedModel.value))
|
||||
|
||||
const activeTab = ref('reviews')
|
||||
const setActiveTab = (tab: string) => {
|
||||
activeTab.value = tab
|
||||
}
|
||||
const tabs = ref([
|
||||
{
|
||||
key: 'reviews',
|
||||
@@ -209,24 +445,37 @@ const collectProduct = () => {
|
||||
}
|
||||
|
||||
const addToCart = () => {
|
||||
// visible.value = true
|
||||
console.log('加入购物车')
|
||||
}
|
||||
|
||||
const buyProduct = () => {
|
||||
visible.value = true
|
||||
console.log('领券购买')
|
||||
}
|
||||
// 屏幕滚动 超过300px 右侧内容根据屏幕固定位置
|
||||
window.addEventListener('scroll', () => {
|
||||
const scrollTop = window.scrollY;
|
||||
const rightPanel = document.querySelector('.right-panel') as HTMLElement;
|
||||
console.log("scrollTop:", scrollTop)
|
||||
console.log("rightPanel:", rightPanel)
|
||||
|
||||
if (scrollTop > 150) {
|
||||
rightPanel.classList.add('fixed');
|
||||
} else {
|
||||
rightPanel.classList.remove('fixed');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<style scoped>
|
||||
#product-detail {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
background-color: #f5f5f5;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.product-detail-container {
|
||||
display: flex;
|
||||
border-radius: 16px;
|
||||
margin-bottom: 20px;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
|
||||
@@ -235,7 +484,7 @@ const buyProduct = () => {
|
||||
}
|
||||
|
||||
.left-panel {
|
||||
width: 50%;
|
||||
width: 761px;
|
||||
padding: 25px;
|
||||
border-right: 1px solid #f0f0f0;
|
||||
overflow-y: auto;
|
||||
@@ -270,7 +519,7 @@ const buyProduct = () => {
|
||||
|
||||
.shop-info-detail {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
top: 50px;
|
||||
left: 0;
|
||||
background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
|
||||
border: 1px solid #f0f0f0;
|
||||
@@ -297,6 +546,7 @@ const buyProduct = () => {
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.shop-btn-group {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
@@ -346,6 +596,7 @@ const buyProduct = () => {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transition: all 0.3s ease;
|
||||
height: 500px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@@ -354,7 +605,7 @@ const buyProduct = () => {
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
overflow-y: auto;
|
||||
max-height: 400px;
|
||||
max-height: 500px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
@@ -388,12 +639,15 @@ const buyProduct = () => {
|
||||
.right-panel {
|
||||
flex: 1;
|
||||
padding: 35px;
|
||||
overflow-y: auto;
|
||||
overflow-x: auto;
|
||||
background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
|
||||
}
|
||||
|
||||
.right-panel.fixed {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 24px;
|
||||
}
|
||||
.product-info {
|
||||
width: 765px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 25px;
|
||||
@@ -486,6 +740,7 @@ const buyProduct = () => {
|
||||
.selection-container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* 切换视图 */
|
||||
.view-switch {
|
||||
/* 靠右对齐 */
|
||||
@@ -500,7 +755,9 @@ const buyProduct = () => {
|
||||
.view-switch:hover {
|
||||
color: #ff5000;
|
||||
}
|
||||
.model-options-small, .model-options-big {
|
||||
|
||||
.model-options-small,
|
||||
.model-options-big {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
flex-wrap: wrap;
|
||||
@@ -530,21 +787,25 @@ const buyProduct = () => {
|
||||
box-shadow: 0 4px 16px rgba(255, 80, 0, 0.25);
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
.model-image {
|
||||
border-radius: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.model-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 8px 8px 0 0;
|
||||
}
|
||||
|
||||
.model-name {
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.model-small-item {
|
||||
text-align: left;
|
||||
border-radius: 8px;
|
||||
@@ -552,6 +813,7 @@ const buyProduct = () => {
|
||||
transition: all 0.3s ease;
|
||||
background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
|
||||
}
|
||||
|
||||
.model-small-item img {
|
||||
margin: 5px;
|
||||
height: 30px;
|
||||
@@ -578,48 +840,52 @@ const buyProduct = () => {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
|
||||
.action-buttons {
|
||||
width: 400px;
|
||||
height: 48px;
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.btn-cart,
|
||||
.btn-buy {
|
||||
text-align: center;
|
||||
width: 200px;
|
||||
line-height: 48px;
|
||||
flex: 1;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
border-radius: 24px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.btn-cart {
|
||||
width: 100px;
|
||||
border-radius: 24px 0 0 24px;
|
||||
background: linear-gradient(135deg, #ffffff 0%, #fff5f5 100%);
|
||||
color: #ff5000;
|
||||
border: 2px solid #ff5000;
|
||||
}
|
||||
|
||||
.btn-cart:hover {
|
||||
.btn-buy {
|
||||
width: 300px;
|
||||
border-radius: 0 24px 24px 0;
|
||||
background: linear-gradient(135deg, #ff5000 0%, #ff6b00 100%);
|
||||
color: #ffffff;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(255, 80, 0, 0.3);
|
||||
}
|
||||
|
||||
.btn-buy {
|
||||
.btn-cart:hover {
|
||||
width: 300px;
|
||||
background: linear-gradient(135deg, #ff5000 0%, #ff6b00 100%);
|
||||
color: #ffffff;
|
||||
box-shadow: 0 4px 12px rgba(255, 80, 0, 0.3);
|
||||
}
|
||||
|
||||
.btn-cart:hover .btn-buy {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.btn-buy:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(255, 80, 0, 0.4);
|
||||
}
|
||||
|
||||
@@ -671,38 +937,54 @@ const buyProduct = () => {
|
||||
.tab-header {
|
||||
display: flex;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
.tab-header .ant-anchor-link-title a {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
padding: 18px 35px;
|
||||
font-size: 16px;
|
||||
font-size: 20px;
|
||||
color: #666;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
position: relative;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.tab-item:hover {
|
||||
color: #ff5000;
|
||||
background-color: #fff5f5;
|
||||
border-bottom: 3px solid transparent;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.tab-item.active {
|
||||
color: #ff5000;
|
||||
font-weight: 600;
|
||||
background-color: #fff5f5;
|
||||
box-shadow: 0 2px 12px rgba(255, 80, 0, 0.15);
|
||||
}
|
||||
|
||||
.tab-item.active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -2px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 10%;
|
||||
right: 10%;
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg, #ff5000 0%, #ff6b00 100%);
|
||||
box-shadow: 0 2px 8px rgba(255, 80, 0, 0.3);
|
||||
box-shadow: 0 2px 12px rgba(255, 80, 0, 0.4);
|
||||
border-radius: 3px 3px 0 0;
|
||||
animation: tabSlideIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
@keyframes tabSlideIn {
|
||||
from {
|
||||
left: 50%;
|
||||
right: 50%;
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
left: 10%;
|
||||
right: 10%;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
@@ -748,6 +1030,313 @@ const buyProduct = () => {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* 评论部分样式 */
|
||||
.reviews-stats {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 15px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.reviews-rating {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.rating-label {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.rating-value {
|
||||
font-size: 20px;
|
||||
color: #ff5000;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.rating-stars {
|
||||
color: #ffc107;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.reviews-count {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.reviews-list {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.review-item {
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.review-item:hover {
|
||||
background-color: #fafafa;
|
||||
transform: translateX(5px);
|
||||
}
|
||||
|
||||
.review-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.reviewer-name {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.review-time {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.review-content {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.review-images {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.review-images img {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
object-fit: cover;
|
||||
border-radius: 4px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.review-images img:hover {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.reviews-more {
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
display: inline-block;
|
||||
padding: 10px 24px;
|
||||
border: 1px solid #ff5000;
|
||||
border-radius: 20px;
|
||||
font-size: 14px;
|
||||
color: #ff5000;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: linear-gradient(135deg, #ff5000 0%, #ff6b00 100%);
|
||||
color: #ffffff;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(255, 80, 0, 0.3);
|
||||
}
|
||||
|
||||
/* 文图详情部分样式 */
|
||||
.description-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.product-intro h3,
|
||||
.product-features h3,
|
||||
.product-images h3 {
|
||||
font-size: 18px;
|
||||
color: #333;
|
||||
margin: 0 0 15px 0;
|
||||
font-weight: 600;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 2px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.product-intro p {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.product-features ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.product-features li {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
line-height: 1.8;
|
||||
position: relative;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.product-features li::before {
|
||||
content: '•';
|
||||
color: #ff5000;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.image-gallery {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.gallery-image {
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
height: auto;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.gallery-image:hover {
|
||||
transform: scale(1.02);
|
||||
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
/* 参数信息部分样式 */
|
||||
.specs-content {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.specs-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.specs-table th,
|
||||
.specs-table td {
|
||||
padding: 12px 15px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.specs-table th {
|
||||
background-color: #fafafa;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.specs-table td {
|
||||
color: #666;
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.specs-table tr:hover {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
/* 本店推荐部分样式 */
|
||||
.recommendations-content {
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.recommended-products {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.recommended-product {
|
||||
background-color: #fafafa;
|
||||
border-radius: 8px;
|
||||
padding: 15px;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.recommended-product:hover {
|
||||
background-color: #ffffff;
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.recommended-product .product-image {
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
overflow: hidden;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.recommended-product .product-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.recommended-product:hover .product-image img {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.recommended-product .product-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.recommended-product .product-name {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
line-height: 1.4;
|
||||
height: 40px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.recommended-product .product-price {
|
||||
font-size: 16px;
|
||||
color: #ff5000;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.recommended-product .product-rating {
|
||||
font-size: 12px;
|
||||
color: #ffc107;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.recommended-product .product-rating span {
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.params-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<div class="product-modal-container">
|
||||
<div class="product-modal-right">
|
||||
<div class="product-modal-img">
|
||||
<img :src="currentProduct.img" alt="产品图片" class="product-modal-image">
|
||||
<img :src="currentProduct.image" alt="产品图片" class="product-modal-image">
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-modal-left">
|
||||
@@ -21,7 +21,7 @@
|
||||
<div v-for="item in currentItems" :key="item.id" class="model-item"
|
||||
:class="{ active: currentProduct.id === item.id }" @click="selectProduct(item)">
|
||||
<div class="model-img">
|
||||
<img :src="item.img" alt="型号图片" class="model-image">
|
||||
<img :src="item.image" alt="型号图片" class="model-image">
|
||||
</div>
|
||||
<div class="model-name">{{ item.model }}</div>
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"extends": "@vue/tsconfig/tsconfig.dom.json",
|
||||
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
|
||||
"include": ["env.d.ts", "src/**/*", "src/**/*.vue", "../admin_frontend/src/shims-vue.d.ts"],
|
||||
"exclude": ["src/**/__tests__/*"],
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||
|
||||
Reference in New Issue
Block a user