修改商城
This commit is contained in:
@@ -76,28 +76,7 @@
|
||||
</el-link>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="quick-login">
|
||||
<el-divider>快速登录</el-divider>
|
||||
<div class="demo-accounts">
|
||||
<el-button
|
||||
type="info"
|
||||
plain
|
||||
size="small"
|
||||
@click="quickLogin('admin')"
|
||||
>
|
||||
管理员账号
|
||||
</el-button>
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
size="small"
|
||||
@click="quickLogin('user')"
|
||||
>
|
||||
普通用户
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -196,20 +175,6 @@ const handleLogin = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
// 快速登录（演示用）
|
||||
const quickLogin = async (type) => {
|
||||
if (type === 'admin') {
|
||||
loginForm.username = 'admin'
|
||||
loginForm.password = 'admin123'
|
||||
} else {
|
||||
loginForm.username = 'user'
|
||||
loginForm.password = 'user123'
|
||||
}
|
||||
|
||||
// 清空验证码，让用户手动输入
|
||||
loginForm.captcha = ''
|
||||
ElMessage.info('请输入验证码后登录')
|
||||
}
|
||||
|
||||
// 忘记密码
|
||||
const showForgotPassword = () => {
|
||||
|
||||
@@ -43,7 +43,6 @@
|
||||
</div>
|
||||
<div class="user-info">
|
||||
<h2 class="username">{{ userInfo?.username }}</h2>
|
||||
<p class="user-email">{{ userInfo?.email }}</p>
|
||||
|
||||
<!-- 审核状态显示 -->
|
||||
<div class="audit-status">
|
||||
@@ -92,9 +91,7 @@
|
||||
<el-input v-model="form.nickname" placeholder="请输入昵称" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="邮箱" prop="email">
|
||||
<el-input v-model="form.email" placeholder="请输入邮箱" />
|
||||
</el-form-item>
|
||||
|
||||
|
||||
<el-form-item label="真实姓名" prop="realName">
|
||||
<el-input v-model="form.realName" placeholder="请输入真实姓名" />
|
||||
@@ -361,7 +358,7 @@ const userInfo = ref({
|
||||
id: '',
|
||||
username: '',
|
||||
nickname: '',
|
||||
email: '',
|
||||
|
||||
phone: '',
|
||||
realName: '',
|
||||
idCard: '',
|
||||
@@ -381,7 +378,7 @@ const userStats = ref({
|
||||
const form = reactive({
|
||||
username: '',
|
||||
nickname: '',
|
||||
email: '',
|
||||
|
||||
phone: '',
|
||||
realName: '',
|
||||
idCard: '',
|
||||
@@ -417,10 +414,7 @@ const rules = {
|
||||
{ required: true, message: '请输入用户名', trigger: 'blur' },
|
||||
{ min: 3, max: 20, message: '用户名长度在 3 到 20 个字符', trigger: 'blur' }
|
||||
],
|
||||
email: [
|
||||
{ required: true, message: '请输入邮箱', trigger: 'blur' },
|
||||
{ type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
|
||||
],
|
||||
|
||||
realName: [
|
||||
{ required: true, message: '请输入真实姓名', trigger: 'blur' },
|
||||
{ min: 2, max: 10, message: '真实姓名长度在 2 到 10 个字符', trigger: 'blur' }
|
||||
@@ -943,11 +937,7 @@ onMounted(() => {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.user-email {
|
||||
margin: 0 0 10px 0;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
|
||||
.audit-status {
|
||||
margin-bottom: 20px;
|
||||
|
||||
@@ -34,7 +34,8 @@
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="smsCode">
|
||||
<!-- 短信验证码组件 - 已注释 -->
|
||||
<!-- <el-form-item prop="smsCode">
|
||||
<div class="sms-code-group">
|
||||
<el-input
|
||||
v-model="registerForm.smsCode"
|
||||
@@ -55,7 +56,7 @@
|
||||
{{ smsCountdown > 0 ? `${smsCountdown}s后重发` : '发送验证码' }}
|
||||
</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form-item> -->
|
||||
|
||||
<el-form-item prop="registrationCode">
|
||||
<el-input
|
||||
@@ -191,17 +192,17 @@ const registerForm = reactive({
|
||||
password: '',
|
||||
confirmPassword: '',
|
||||
captcha: '',
|
||||
smsCode: '',
|
||||
// smsCode: '', // 短信验证码字段 - 已注释
|
||||
agreement: false
|
||||
})
|
||||
|
||||
// 短信验证码相关状态
|
||||
const sendingSMS = ref(false)
|
||||
const smsCountdown = ref(0)
|
||||
const canSendSMS = computed(() => {
|
||||
const phoneRegex = /^1[3-9]\d{9}$/
|
||||
return phoneRegex.test(registerForm.phone)
|
||||
})
|
||||
// 短信验证码相关状态 - 已注释
|
||||
// const sendingSMS = ref(false)
|
||||
// const smsCountdown = ref(0)
|
||||
// const canSendSMS = computed(() => {
|
||||
// const phoneRegex = /^1[3-9]\d{9}$/
|
||||
// return phoneRegex.test(registerForm.phone)
|
||||
// })
|
||||
|
||||
// 自定义验证函数
|
||||
const validateUsername = (rule, value, callback) => {
|
||||
@@ -263,12 +264,14 @@ const registerRules = {
|
||||
],
|
||||
registrationCode: [
|
||||
{ required: true, message: '请输入激活码', trigger: 'blur' },
|
||||
{ min: 6, message: '激活码长度不能少于6位', trigger: 'blur' }
|
||||
],
|
||||
smsCode: [
|
||||
{ required: true, message: '请输入短信验证码', trigger: 'blur' },
|
||||
{ pattern: /^\d{6}$/, message: '短信验证码为6位数字', trigger: 'blur' }
|
||||
{ len: 6, message: '激活码长度为6位', trigger: 'blur' },
|
||||
{ pattern: /^[A-Z0-9]{6}$/, message: '激活码只能包含大写字母和数字', trigger: 'blur' }
|
||||
],
|
||||
// 短信验证码验证规则 - 已注释
|
||||
// smsCode: [
|
||||
// { required: true, message: '请输入短信验证码', trigger: 'blur' },
|
||||
// { pattern: /^\d{6}$/, message: '短信验证码为6位数字', trigger: 'blur' }
|
||||
// ],
|
||||
|
||||
password: [{ validator: validatePassword, trigger: 'blur' }],
|
||||
confirmPassword: [{ validator: validateConfirmPassword, trigger: 'blur' }],
|
||||
@@ -279,52 +282,52 @@ const registerRules = {
|
||||
agreement: [{ validator: validateAgreement, trigger: 'change' }]
|
||||
}
|
||||
|
||||
// 发送短信验证码
|
||||
const sendSMSCode = async () => {
|
||||
if (!canSendSMS.value || sendingSMS.value || smsCountdown.value > 0) {
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
sendingSMS.value = true
|
||||
|
||||
const response = await fetch('/api/sms/send', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
phone: registerForm.phone
|
||||
})
|
||||
})
|
||||
|
||||
const result = await response.json()
|
||||
|
||||
if (result.success) {
|
||||
ElMessage.success('验证码发送成功，请查收短信')
|
||||
// 开始倒计时
|
||||
startCountdown()
|
||||
} else {
|
||||
ElMessage.error(result.message || '发送失败，请重试')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('发送短信验证码失败:', error)
|
||||
ElMessage.error('发送失败，请检查网络连接')
|
||||
} finally {
|
||||
sendingSMS.value = false
|
||||
}
|
||||
}
|
||||
// 发送短信验证码 - 已注释
|
||||
// const sendSMSCode = async () => {
|
||||
// if (!canSendSMS.value || sendingSMS.value || smsCountdown.value > 0) {
|
||||
// return
|
||||
// }
|
||||
//
|
||||
// try {
|
||||
// sendingSMS.value = true
|
||||
//
|
||||
// const response = await fetch('/api/sms/send', {
|
||||
// method: 'POST',
|
||||
// headers: {
|
||||
// 'Content-Type': 'application/json'
|
||||
// },
|
||||
// body: JSON.stringify({
|
||||
// phone: registerForm.phone
|
||||
// })
|
||||
// })
|
||||
//
|
||||
// const result = await response.json()
|
||||
//
|
||||
// if (result.success) {
|
||||
// ElMessage.success('验证码发送成功，请查收短信')
|
||||
// // 开始倒计时
|
||||
// startCountdown()
|
||||
// } else {
|
||||
// ElMessage.error(result.message || '发送失败，请重试')
|
||||
// }
|
||||
// } catch (error) {
|
||||
// console.error('发送短信验证码失败:', error)
|
||||
// ElMessage.error('发送失败，请检查网络连接')
|
||||
// } finally {
|
||||
// sendingSMS.value = false
|
||||
// }
|
||||
// }
|
||||
|
||||
// 开始倒计时
|
||||
const startCountdown = () => {
|
||||
smsCountdown.value = 60
|
||||
const timer = setInterval(() => {
|
||||
smsCountdown.value--
|
||||
if (smsCountdown.value <= 0) {
|
||||
clearInterval(timer)
|
||||
}
|
||||
}, 1000)
|
||||
}
|
||||
// 开始倒计时 - 已注释
|
||||
// const startCountdown = () => {
|
||||
// smsCountdown.value = 60
|
||||
// const timer = setInterval(() => {
|
||||
// smsCountdown.value--
|
||||
// if (smsCountdown.value <= 0) {
|
||||
// clearInterval(timer)
|
||||
// }
|
||||
// }, 1000)
|
||||
// }
|
||||
|
||||
// 处理注册
|
||||
const handleRegister = async () => {
|
||||
@@ -351,7 +354,7 @@ const handleRegister = async () => {
|
||||
phone: registerForm.phone,
|
||||
registrationCode: registerForm.registrationCode,
|
||||
password: registerForm.password,
|
||||
smsCode: registerForm.smsCode,
|
||||
// smsCode: registerForm.smsCode, // 短信验证码 - 已注释
|
||||
captchaId: captchaInfo.captchaId,
|
||||
captchaText: captchaInfo.captchaText
|
||||
}
|
||||
|
||||
@@ -76,7 +76,7 @@
|
||||
@click="goToProduct(product.id)"
|
||||
>
|
||||
<div class="product-image">
|
||||
<img :src="product.image" :alt="product.name" />
|
||||
<img :src="getImageUrl(product.image)" :alt="product.name" />
|
||||
<div v-if="product.discount" class="discount-badge">
|
||||
{{ product.discount }}折
|
||||
</div>
|
||||
@@ -138,6 +138,9 @@
|
||||
title="购物车"
|
||||
direction="rtl"
|
||||
size="80%"
|
||||
:z-index="10000"
|
||||
:modal="true"
|
||||
:append-to-body="true"
|
||||
>
|
||||
<div class="cart-content">
|
||||
<div v-if="cartItems.length === 0" class="empty-cart">
|
||||
@@ -146,7 +149,7 @@
|
||||
</div>
|
||||
<div v-else>
|
||||
<div v-for="item in cartItems" :key="item.id" class="cart-item">
|
||||
<img :src="item.image" :alt="item.name" class="item-image" />
|
||||
<img :src="getImageUrl(item.image)" :alt="item.name" class="item-image" />
|
||||
<div class="item-info">
|
||||
<h4>{{ item.name }}</h4>
|
||||
<p class="item-price">
|
||||
@@ -205,6 +208,7 @@ import {
|
||||
} from '@element-plus/icons-vue'
|
||||
import api from '@/utils/api'
|
||||
import { debounce } from 'lodash-es'
|
||||
import { getImageUrl } from '@/config'
|
||||
|
||||
const router = useRouter()
|
||||
const userStore = useUserStore()
|
||||
@@ -237,6 +241,11 @@ const categories = ref([
|
||||
|
||||
// 计算属性
|
||||
const filteredProducts = computed(() => {
|
||||
// 安全检查：确保products.value是数组
|
||||
if (!products.value || !Array.isArray(products.value)) {
|
||||
return []
|
||||
}
|
||||
|
||||
let result = products.value
|
||||
|
||||
// 分类筛选
|
||||
@@ -247,21 +256,21 @@ const filteredProducts = computed(() => {
|
||||
// 搜索筛选
|
||||
if (searchKeyword.value) {
|
||||
result = result.filter(p =>
|
||||
p.name.toLowerCase().includes(searchKeyword.value.toLowerCase()) ||
|
||||
p.description.toLowerCase().includes(searchKeyword.value.toLowerCase())
|
||||
p.name && p.name.toLowerCase().includes(searchKeyword.value.toLowerCase()) ||
|
||||
p.description && p.description.toLowerCase().includes(searchKeyword.value.toLowerCase())
|
||||
)
|
||||
}
|
||||
|
||||
// 排序
|
||||
switch (sortBy.value) {
|
||||
case 'price_asc':
|
||||
result.sort((a, b) => a.points - b.points)
|
||||
result.sort((a, b) => (a.points || 0) - (b.points || 0))
|
||||
break
|
||||
case 'price_desc':
|
||||
result.sort((a, b) => b.points - a.points)
|
||||
result.sort((a, b) => (b.points || 0) - (a.points || 0))
|
||||
break
|
||||
case 'sales':
|
||||
result.sort((a, b) => b.sales - a.sales)
|
||||
result.sort((a, b) => (b.sales || 0) - (a.sales || 0))
|
||||
break
|
||||
}
|
||||
|
||||
@@ -279,11 +288,19 @@ const sortText = computed(() => {
|
||||
})
|
||||
|
||||
const cartCount = computed(() => {
|
||||
return cartItems.value.reduce((sum, item) => sum + item.quantity, 0)
|
||||
// 安全检查：确保cartItems.value是数组
|
||||
if (!cartItems.value || !Array.isArray(cartItems.value)) {
|
||||
return 0
|
||||
}
|
||||
return cartItems.value.reduce((sum, item) => sum + (item.quantity || 0), 0)
|
||||
})
|
||||
|
||||
const totalPoints = computed(() => {
|
||||
return cartItems.value.reduce((sum, item) => sum + (item.points * item.quantity), 0)
|
||||
// 安全检查：确保cartItems.value是数组
|
||||
if (!cartItems.value || !Array.isArray(cartItems.value)) {
|
||||
return 0
|
||||
}
|
||||
return cartItems.value.reduce((sum, item) => sum + ((item.points || 0) * (item.quantity || 0)), 0)
|
||||
})
|
||||
|
||||
// 方法
|
||||
@@ -382,7 +399,7 @@ const getProducts = async (isLoadMore = false) => {
|
||||
loadingMore.value = true
|
||||
}
|
||||
|
||||
const response = await api.get('/products', {
|
||||
const {data} = await api.get('/products', {
|
||||
params: {
|
||||
page: page.value,
|
||||
limit: 20,
|
||||
@@ -392,16 +409,28 @@ const getProducts = async (isLoadMore = false) => {
|
||||
}
|
||||
})
|
||||
|
||||
// 确保响应数据是有效的数组
|
||||
const responseProducts = data.data?.products || []
|
||||
|
||||
if (isLoadMore) {
|
||||
products.value.push(...response.data.products)
|
||||
// 确保products.value是数组
|
||||
if (!Array.isArray(products.value)) {
|
||||
products.value = []
|
||||
}
|
||||
products.value.push(...responseProducts)
|
||||
} else {
|
||||
products.value = response.data.products
|
||||
products.value = responseProducts
|
||||
}
|
||||
|
||||
hasMore.value = response.data.hasMore
|
||||
hasMore.value = data.data?.hasMore || false
|
||||
page.value++
|
||||
} catch (error) {
|
||||
console.error('获取商品列表失败:', error)
|
||||
ElMessage.error('获取商品列表失败')
|
||||
// 确保products.value始终是数组
|
||||
if (!isLoadMore && (!products.value || !Array.isArray(products.value))) {
|
||||
products.value = []
|
||||
}
|
||||
} finally {
|
||||
loading.value = false
|
||||
loadingMore.value = false
|
||||
@@ -415,13 +444,18 @@ const loadMore = () => {
|
||||
const getUserPoints = async () => {
|
||||
try {
|
||||
const response = await api.get('/user/points')
|
||||
userPoints.value = response.data.points
|
||||
userPoints.value = response.data.points || 0
|
||||
} catch (error) {
|
||||
console.error('获取用户积分失败:', error)
|
||||
userPoints.value = 0
|
||||
}
|
||||
}
|
||||
|
||||
const truncateText = (text, maxLength) => {
|
||||
// 安全检查：确保text是字符串
|
||||
if (!text || typeof text !== 'string') {
|
||||
return ''
|
||||
}
|
||||
if (text.length <= maxLength) return text
|
||||
return text.substring(0, maxLength) + '...'
|
||||
}
|
||||
@@ -436,7 +470,33 @@ onMounted(() => {
|
||||
<style scoped>
|
||||
.shop-page {
|
||||
min-height: 100vh;
|
||||
background-color: #f5f5f5;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
background-attachment: fixed;
|
||||
padding-bottom: 80px;
|
||||
position: relative;
|
||||
/* 移动端优化 */
|
||||
-webkit-overflow-scrolling: touch;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.shop-page::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background:
|
||||
radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
|
||||
radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
|
||||
radial-gradient(circle at 40% 40%, rgba(120, 119, 198, 0.2) 0%, transparent 50%);
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.shop-page > * {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
@@ -445,11 +505,13 @@ onMounted(() => {
|
||||
justify-content: space-between;
|
||||
padding: 0 16px;
|
||||
height: 56px;
|
||||
background: white;
|
||||
border-bottom: 1px solid #eee;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(20px);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.nav-left,
|
||||
@@ -471,14 +533,21 @@ onMounted(() => {
|
||||
.nav-title {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
font-weight: 800;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.search-section {
|
||||
padding: 16px;
|
||||
background: white;
|
||||
border-bottom: 1px solid #eee;
|
||||
padding: 20px;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
backdrop-filter: blur(10px);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
||||
margin: 20px 16px 0 16px;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.search-input {
|
||||
@@ -486,9 +555,14 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.category-section {
|
||||
background: white;
|
||||
padding: 16px 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
backdrop-filter: blur(10px);
|
||||
padding: 20px 0;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
||||
margin: 0 16px;
|
||||
border-radius: 16px;
|
||||
margin-top: 16px;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.category-list {
|
||||
@@ -502,21 +576,33 @@ onMounted(() => {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 8px 12px;
|
||||
border-radius: 8px;
|
||||
gap: 6px;
|
||||
padding: 12px 16px;
|
||||
border-radius: 16px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
min-width: 60px;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
min-width: 70px;
|
||||
background: rgba(248, 250, 252, 0.8);
|
||||
border: 2px solid transparent;
|
||||
/* 移动端触摸优化 */
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
touch-action: manipulation;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.category-item:hover {
|
||||
background: #f0f9ff;
|
||||
background: rgba(139, 92, 246, 0.1);
|
||||
border-color: rgba(139, 92, 246, 0.3);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 15px rgba(139, 92, 246, 0.2);
|
||||
}
|
||||
|
||||
.category-item.active {
|
||||
background: #409eff;
|
||||
background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
|
||||
color: white;
|
||||
border-color: rgba(255, 255, 255, 0.3);
|
||||
box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
.category-item span {
|
||||
@@ -524,7 +610,12 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.products-section {
|
||||
padding: 16px;
|
||||
padding: 20px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
backdrop-filter: blur(10px);
|
||||
margin: 20px;
|
||||
border-radius: 20px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.section-header {
|
||||
@@ -557,98 +648,183 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.product-card {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.9) 100%);
|
||||
backdrop-filter: blur(20px);
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 8px 32px rgba(139, 92, 246, 0.15);
|
||||
border: 1px solid rgba(139, 92, 246, 0.2);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
position: relative;
|
||||
/* 移动端触摸优化 */
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
.product-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, rgba(124, 58, 237, 0.06) 100%);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.product-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
|
||||
transform: translateY(-8px) scale(1.02);
|
||||
box-shadow: 0 16px 48px rgba(139, 92, 246, 0.25);
|
||||
border-color: rgba(139, 92, 246, 0.4);
|
||||
}
|
||||
|
||||
.product-card:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.product-card:active {
|
||||
transform: translateY(-4px) scale(1.01);
|
||||
transition: all 0.1s;
|
||||
}
|
||||
|
||||
.product-image {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
height: 140px;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(45deg, #f1f5f9 0%, #e2e8f0 100%);
|
||||
}
|
||||
|
||||
.product-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.product-card:hover .product-image img {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.discount-badge {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
background: #ff4757;
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
background: linear-gradient(135deg, #ff6b6b 0%, #ff5252 100%);
|
||||
color: white;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
padding: 4px 8px;
|
||||
border-radius: 12px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.product-info {
|
||||
padding: 12px;
|
||||
padding: 16px;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
backdrop-filter: blur(15px);
|
||||
}
|
||||
|
||||
.product-name {
|
||||
margin: 0 0 4px 0;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
margin: 0 0 6px 0;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
line-height: 1.4;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.product-desc {
|
||||
margin: 0 0 8px 0;
|
||||
margin: 0 0 12px 0;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
line-height: 1.4;
|
||||
color: #64748b;
|
||||
line-height: 1.5;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.product-price {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.current-price {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
color: #ff6b35;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
gap: 4px;
|
||||
color: #f59e0b;
|
||||
font-weight: 700;
|
||||
font-size: 17px;
|
||||
background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.original-price {
|
||||
color: #999;
|
||||
color: #94a3b8;
|
||||
font-size: 12px;
|
||||
text-decoration: line-through;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.product-stats {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
font-size: 11px;
|
||||
color: #64748b;
|
||||
margin-bottom: 8px;
|
||||
background: rgba(139, 92, 246, 0.08);
|
||||
padding: 6px 10px;
|
||||
border-radius: 8px;
|
||||
backdrop-filter: blur(5px);
|
||||
border: 1px solid rgba(139, 92, 246, 0.1);
|
||||
}
|
||||
|
||||
.product-actions {
|
||||
padding: 0 12px 12px;
|
||||
padding: 0 16px 16px;
|
||||
}
|
||||
|
||||
.product-actions .el-button {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
border-radius: 12px;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
|
||||
border: none;
|
||||
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.product-actions .el-button:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
|
||||
background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
|
||||
}
|
||||
|
||||
.product-actions .el-button:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.product-actions .el-button:disabled {
|
||||
background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
|
||||
color: #64748b;
|
||||
box-shadow: none;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
@@ -665,18 +841,67 @@ onMounted(() => {
|
||||
.cart-fab {
|
||||
position: fixed;
|
||||
bottom: 80px;
|
||||
right: 20px;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
background: #409eff;
|
||||
right: 40px;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 4px 12px rgba(64, 158, 255, 0.4);
|
||||
z-index: 1000;
|
||||
box-shadow: 0 8px 25px rgba(139, 92, 246, 0.4);
|
||||
z-index: 9999;
|
||||
/* 移动端触摸优化 */
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
touch-action: manipulation;
|
||||
user-select: none;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 2px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.cart-badge {
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
right: -6px;
|
||||
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
|
||||
border: 2px solid white;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4), 0 0 0 0 rgba(239, 68, 68, 0.7);
|
||||
}
|
||||
70% {
|
||||
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4), 0 0 0 10px rgba(239, 68, 68, 0);
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4), 0 0 0 0 rgba(239, 68, 68, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.cart-fab:hover {
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 12px 35px rgba(139, 92, 246, 0.5);
|
||||
background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
|
||||
}
|
||||
|
||||
.cart-fab:active {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
|
||||
}
|
||||
|
||||
.cart-content {
|
||||
@@ -752,23 +977,276 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 480px) {
|
||||
@media (max-width: 768px) {
|
||||
.navbar {
|
||||
padding: 0 12px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.back-btn,
|
||||
.points-btn {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.search-section {
|
||||
padding: 16px;
|
||||
margin: 16px 12px 0 12px;
|
||||
}
|
||||
|
||||
.category-section {
|
||||
padding: 12px 0;
|
||||
margin: 12px;
|
||||
}
|
||||
|
||||
.category-list {
|
||||
padding: 0 12px;
|
||||
gap: 12px;
|
||||
overflow-x: auto;
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
|
||||
.category-list::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.category-item {
|
||||
min-width: 60px;
|
||||
padding: 8px 14px;
|
||||
}
|
||||
|
||||
.category-item span {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.products-section {
|
||||
padding: 16px;
|
||||
margin: 16px 12px;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.section-header h3 {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.sort-btn {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.products-grid {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.product-card {
|
||||
display: flex;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.product-card:hover {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.product-image {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.product-info {
|
||||
flex: 1;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.product-name {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.product-desc {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.current-price {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.cart-fab {
|
||||
bottom: 70px;
|
||||
right: 16px;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.navbar {
|
||||
padding: 0 10px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.search-section {
|
||||
margin: 12px 8px 0 8px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.category-section {
|
||||
margin: 8px;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
.products-section {
|
||||
margin: 12px 8px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.products-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.product-card {
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.product-image {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.product-info {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.product-name {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.product-desc {
|
||||
font-size: 10px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.current-price {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.product-stats {
|
||||
font-size: 10px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.product-actions {
|
||||
padding: 0 10px 10px;
|
||||
}
|
||||
|
||||
.product-actions .el-button {
|
||||
font-size: 12px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.cart-fab {
|
||||
bottom: 60px;
|
||||
right: 12px;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
}
|
||||
|
||||
.cart-item {
|
||||
padding: 12px 0;
|
||||
}
|
||||
|
||||
.item-image {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.item-info h4 {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.item-price {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.total-points {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 360px) {
|
||||
.navbar {
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.search-section {
|
||||
margin: 8px 6px 0 6px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.category-section {
|
||||
margin: 6px;
|
||||
padding: 6px 10px;
|
||||
}
|
||||
|
||||
.products-section {
|
||||
margin: 8px 6px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.category-list {
|
||||
padding: 0 8px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.category-item {
|
||||
min-width: 50px;
|
||||
padding: 6px 10px;
|
||||
}
|
||||
|
||||
.products-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.product-card {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.product-image {
|
||||
height: 85px;
|
||||
}
|
||||
|
||||
.product-info {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.product-name {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.current-price {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.product-actions {
|
||||
padding: 0 8px 8px;
|
||||
}
|
||||
|
||||
.product-actions .el-button {
|
||||
height: 32px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.cart-fab {
|
||||
right: 8px;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user