更新商城
This commit is contained in:
@@ -162,68 +162,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 购物车悬浮按钮 -->
|
||||
<div class="cart-fab" @click="showCart = true">
|
||||
<el-badge :value="cartCount" :hidden="cartCount === 0">
|
||||
<el-icon size="24"><ShoppingCart /></el-icon>
|
||||
</el-badge>
|
||||
</div>
|
||||
|
||||
<!-- 购物车抽屉 -->
|
||||
<el-drawer
|
||||
v-model="showCart"
|
||||
title="购物车"
|
||||
direction="rtl"
|
||||
size="80%"
|
||||
>
|
||||
<div class="cart-content">
|
||||
<div v-if="cartItems.length === 0" class="empty-cart">
|
||||
<el-icon size="60"><ShoppingCart /></el-icon>
|
||||
<p>购物车是空的</p>
|
||||
</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" />
|
||||
<div class="item-info">
|
||||
<h4>{{ item.name }}</h4>
|
||||
<p class="item-price">
|
||||
<el-icon><Coin /></el-icon>
|
||||
{{ item.points }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="item-actions">
|
||||
<el-input-number
|
||||
v-model="item.quantity"
|
||||
:min="1"
|
||||
:max="item.stock"
|
||||
size="small"
|
||||
@change="updateCartItem(item)"
|
||||
/>
|
||||
<el-button
|
||||
type="danger"
|
||||
size="small"
|
||||
@click="removeFromCart(item.id)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cart-footer">
|
||||
<div class="total-points">
|
||||
总计：<el-icon><Coin /></el-icon>{{ totalPoints }}
|
||||
</div>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="large"
|
||||
@click="checkout"
|
||||
:disabled="totalPoints > userPoints"
|
||||
>
|
||||
{{ totalPoints > userPoints ? '积分不足' : '立即兑换' }}
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -237,8 +176,7 @@ import {
|
||||
Coin,
|
||||
Search,
|
||||
ArrowDown,
|
||||
Box,
|
||||
ShoppingCart
|
||||
Box
|
||||
} from '@element-plus/icons-vue'
|
||||
import api from '@/utils/api'
|
||||
import { debounce } from 'lodash-es'
|
||||
@@ -256,8 +194,7 @@ const sortBy = ref('default')
|
||||
const products = ref([])
|
||||
const page = ref(1)
|
||||
const hasMore = ref(true)
|
||||
const showCart = ref(false)
|
||||
const cartItems = ref([])
|
||||
|
||||
|
||||
// 用户积分
|
||||
const userPoints = ref(0)
|
||||
@@ -328,13 +265,7 @@ const sortText = computed(() => {
|
||||
return sortMap[sortBy.value]
|
||||
})
|
||||
|
||||
const cartCount = computed(() => {
|
||||
return cartItems.value.reduce((sum, item) => sum + item.quantity, 0)
|
||||
})
|
||||
|
||||
const totalPoints = computed(() => {
|
||||
return cartItems.value.reduce((sum, item) => sum + (item.points * item.quantity), 0)
|
||||
})
|
||||
|
||||
// 方法
|
||||
const selectCategory = (categoryId) => {
|
||||
@@ -353,76 +284,6 @@ const goToProduct = (productId) => {
|
||||
router.push(`/productsummary/${productId}`)
|
||||
}
|
||||
|
||||
const addToCart = (product) => {
|
||||
const existingItem = cartItems.value.find(item => item.id === product.id)
|
||||
|
||||
if (existingItem) {
|
||||
if (existingItem.quantity < product.stock) {
|
||||
existingItem.quantity++
|
||||
ElMessage.success('已添加到购物车')
|
||||
} else {
|
||||
ElMessage.warning('库存不足')
|
||||
}
|
||||
} else {
|
||||
cartItems.value.push({
|
||||
...product,
|
||||
quantity: 1
|
||||
})
|
||||
ElMessage.success('已添加到购物车')
|
||||
}
|
||||
}
|
||||
|
||||
const updateCartItem = (item) => {
|
||||
// 数量更新逻辑
|
||||
}
|
||||
|
||||
const removeFromCart = (productId) => {
|
||||
const index = cartItems.value.findIndex(item => item.id === productId)
|
||||
if (index > -1) {
|
||||
cartItems.value.splice(index, 1)
|
||||
ElMessage.success('已从购物车移除')
|
||||
}
|
||||
}
|
||||
|
||||
const checkout = async () => {
|
||||
try {
|
||||
await ElMessageBox.confirm(
|
||||
`确定要花费 ${totalPoints.value} 积分兑换这些商品吗？`,
|
||||
'确认兑换',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}
|
||||
)
|
||||
|
||||
const orderData = {
|
||||
items: cartItems.value.map(item => ({
|
||||
productId: item.id,
|
||||
quantity: item.quantity,
|
||||
points: item.points
|
||||
})),
|
||||
totalPoints: totalPoints.value
|
||||
}
|
||||
|
||||
await api.post('/orders', orderData)
|
||||
|
||||
// 清空购物车
|
||||
cartItems.value = []
|
||||
showCart.value = false
|
||||
|
||||
// 更新用户积分
|
||||
userPoints.value -= totalPoints.value
|
||||
|
||||
ElMessage.success('兑换成功！')
|
||||
router.push('/orders')
|
||||
} catch (error) {
|
||||
if (error !== 'cancel') {
|
||||
ElMessage.error('兑换失败，请重试')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const getProducts = async (isLoadMore = false) => {
|
||||
try {
|
||||
if (!isLoadMore) {
|
||||
@@ -763,95 +624,7 @@ onMounted(() => {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.cart-fab {
|
||||
position: fixed;
|
||||
bottom: 80px;
|
||||
right: 20px;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
background: #409eff;
|
||||
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;
|
||||
}
|
||||
|
||||
.cart-content {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.empty-cart {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.cart-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 16px 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.item-image {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 8px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.item-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.item-info h4 {
|
||||
margin: 0 0 4px 0;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.item-price {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
color: #ff6b35;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.item-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.cart-footer {
|
||||
margin-top: auto;
|
||||
padding: 20px 0;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
.total-points {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #ff6b35;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 480px) {
|
||||
|
||||
Reference in New Issue
Block a user