更新商城
This commit is contained in:
@@ -264,10 +264,10 @@ const routes = [
|
||||
meta: { title: '地址管理', requiresAuth: true }
|
||||
},
|
||||
{
|
||||
path: '/payfailed',
|
||||
name: 'PayFailed',
|
||||
component: () => import('../views/PayFailed.vue'),
|
||||
meta: { title: '支付失败' },
|
||||
path: '/payloading',
|
||||
name: 'PayLoading',
|
||||
component: () => import('../views/PayLoading.vue'),
|
||||
meta: { title: '支付确认' },
|
||||
props: route => ({ cartId: route.query.cartId })
|
||||
},
|
||||
{
|
||||
|
||||
@@ -19,49 +19,7 @@
|
||||
</nav>
|
||||
|
||||
<div v-loading="loading" class="page-content">
|
||||
<!-- 收货地址 -->
|
||||
<div class="address-section">
|
||||
<div class="address-header">
|
||||
<el-icon><Location /></el-icon>
|
||||
<span class="address-label">收货地址</span>
|
||||
<el-button
|
||||
type="text"
|
||||
@click="goToAddressManage"
|
||||
class="manage-address-btn"
|
||||
>
|
||||
管理地址
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="address-content">
|
||||
<el-select
|
||||
v-model="selectedAddressId"
|
||||
placeholder="请选择收货地址"
|
||||
class="address-select"
|
||||
@change="handleAddressChange"
|
||||
>
|
||||
<el-option
|
||||
v-for="address in addresses"
|
||||
:key="address.id"
|
||||
:label="`${address.recipientName} ${address.recipientPhone} ${address.province}${address.city}${address.district}${address.detailAddress}`"
|
||||
:value="address.id"
|
||||
>
|
||||
<div class="address-option">
|
||||
<div class="address-info">
|
||||
<span class="recipient-info">{{ address.recipientName }} {{ address.recipientPhone }}</span>
|
||||
<el-tag v-if="address.isDefault" type="danger" size="small" class="default-tag">默认</el-tag>
|
||||
</div>
|
||||
<div class="address-detail">{{ address.province }}{{ address.city }}{{ address.district }}{{ address.detailAddress }}</div>
|
||||
</div>
|
||||
</el-option>
|
||||
</el-select>
|
||||
<div v-if="addresses.length === 0" class="no-address">
|
||||
<span class="no-address-text">暂无收货地址</span>
|
||||
<el-button type="text" @click="goToAddressManage" class="add-address-btn">
|
||||
立即添加
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 商品信息 -->
|
||||
<div class="product-section">
|
||||
@@ -159,7 +117,6 @@ import { ElMessage } from 'element-plus'
|
||||
import {
|
||||
ArrowLeft,
|
||||
Close,
|
||||
Location,
|
||||
Edit,
|
||||
Coin,
|
||||
ArrowRight
|
||||
@@ -175,9 +132,6 @@ const product = ref(null)
|
||||
const quantity = ref(1)
|
||||
const specGroups = ref({}) // 动态规格组
|
||||
const selectedSpecs = ref({}) // 选中的规格值
|
||||
const addresses = ref([])
|
||||
const selectedAddressId = ref('')
|
||||
const selectedAddress = ref(null)
|
||||
const orderNote = ref('')
|
||||
const showNoteEdit = ref(false)
|
||||
const availableSpecs = ref({}) // 存储每个规格选项的可选状态
|
||||
@@ -404,11 +358,6 @@ const handlePurchase = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
if (!selectedAddress.value) {
|
||||
ElMessage.error('请选择收货地址')
|
||||
return
|
||||
}
|
||||
|
||||
// 获取选中规格对应的规格规则ID
|
||||
const specificationId = getSelectedSpecificationId()
|
||||
if (!specificationId) {
|
||||
@@ -417,34 +366,31 @@ const handlePurchase = async () => {
|
||||
}
|
||||
|
||||
try {
|
||||
// 创建单独的购买订单
|
||||
const orderData = {
|
||||
productId: product.value.id, // 商品ID
|
||||
quantity: quantity.value, // 购买数量
|
||||
specificationId: specificationId, // 规格规则ID
|
||||
points: product.value.points, // 商品积分价格
|
||||
name: product.value.name, // 商品名称
|
||||
image: product.value.image, // 商品图片
|
||||
stock: product.value.stock, // 商品库存
|
||||
addressId: selectedAddress.value.id, // 收货地址ID
|
||||
orderNote: orderNote.value // 订单备注
|
||||
// 构建商品数据，直接跳转到Pay页面
|
||||
const purchaseData = {
|
||||
items: [{
|
||||
id: product.value.id,
|
||||
productId: product.value.id,
|
||||
name: product.value.name,
|
||||
image: product.value.image,
|
||||
points: product.value.points,
|
||||
quantity: quantity.value,
|
||||
specificationId: specificationId,
|
||||
specs: Object.keys(selectedSpecs.value).map(specName =>
|
||||
`${specName}: ${selectedSpecs.value[specName].name}`
|
||||
).join(', '),
|
||||
orderNote: orderNote.value
|
||||
}]
|
||||
}
|
||||
|
||||
const response = await api.post('/cart/buy-now', orderData)//立即购买
|
||||
|
||||
if (response.data.success) {
|
||||
const cartId = response.data.data.cartId
|
||||
|
||||
// 跳转到支付页面
|
||||
router.push({
|
||||
path: '/pay',
|
||||
query: {
|
||||
cartId: cartId
|
||||
}
|
||||
})
|
||||
} else {
|
||||
throw new Error(response.data.message || '创建订单失败')
|
||||
}
|
||||
// 跳转到Pay页面，传递商品数据
|
||||
router.push({
|
||||
path: '/pay',
|
||||
query: {
|
||||
from: 'buydetails',
|
||||
cartData: JSON.stringify(purchaseData)
|
||||
}
|
||||
})
|
||||
} catch (error) {
|
||||
ElMessage.error(error.message || '操作失败，请重试')
|
||||
}
|
||||
@@ -483,8 +429,8 @@ const handleAddToCart = async () => {
|
||||
|
||||
if (response.data.success) {
|
||||
ElMessage.success('商品已加入购物车！')
|
||||
// 可以选择返回上一页或跳转到购物车页面
|
||||
router.go(-1)
|
||||
// 成功添加后留在当前页面，让用户可以继续操作
|
||||
router.push('/cart')
|
||||
} else {
|
||||
throw new Error(response.data.message || '添加到购物车失败')
|
||||
}
|
||||
@@ -493,51 +439,7 @@ const handleAddToCart = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
// 获取用户地址列表
|
||||
const getAddressList = async () => {
|
||||
try {
|
||||
const response = await api.get('/addresses')
|
||||
console.log('获取地址列表响应:', response)
|
||||
if (response.data.success) {
|
||||
// 根据接口文档转换数据格式，与Address.vue保持一致
|
||||
const addressList = response.data.data || []
|
||||
addresses.value = addressList.map(addr => ({
|
||||
id: addr.id,
|
||||
recipientName: addr.receiver_name,
|
||||
recipientPhone: addr.receiver_phone,
|
||||
province: addr.province_name,
|
||||
city: addr.city_name,
|
||||
district: addr.district_name,
|
||||
detailAddress: addr.detailed_address,
|
||||
isDefault: addr.is_default,
|
||||
labelName: addr.label_name,
|
||||
labelColor: addr.label_color
|
||||
}))
|
||||
|
||||
// 如果有默认地址，自动选中
|
||||
const defaultAddress = addresses.value.find(addr => addr.isDefault)
|
||||
if (defaultAddress) {
|
||||
selectedAddressId.value = defaultAddress.id
|
||||
selectedAddress.value = defaultAddress
|
||||
}
|
||||
} else {
|
||||
throw new Error(response.data.message || '获取地址列表失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取地址列表失败:', error)
|
||||
ElMessage.error(error.message || '获取地址列表失败')
|
||||
}
|
||||
}
|
||||
|
||||
// 处理地址选择变化
|
||||
const handleAddressChange = (addressId) => {
|
||||
selectedAddress.value = addresses.value.find(addr => addr.id === addressId)
|
||||
}
|
||||
|
||||
// 跳转到地址管理页面
|
||||
const goToAddressManage = () => {
|
||||
router.push('/address')
|
||||
}
|
||||
|
||||
// 生命周期
|
||||
onMounted(() => {
|
||||
@@ -548,7 +450,6 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
getProductInfo() // 商品信息中已包含规格信息，无需单独获取颜色分类和尺寸
|
||||
getAddressList()
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -585,27 +486,7 @@ onMounted(() => {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.address-section {
|
||||
background: white;
|
||||
padding: 16px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.address-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.address-label {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.edit-icon {
|
||||
margin-left: auto;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -746,68 +627,7 @@ onMounted(() => {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.address-select {
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.manage-address-btn {
|
||||
color: #409eff;
|
||||
font-size: 14px;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.manage-address-btn:hover {
|
||||
color: #66b1ff;
|
||||
}
|
||||
|
||||
.address-option {
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.address-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.recipient-info {
|
||||
font-weight: 500;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.default-tag {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.address-detail {
|
||||
color: #606266;
|
||||
font-size: 12px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.no-address {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
color: #909399;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.no-address-text {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.add-address-btn {
|
||||
color: #409eff;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.add-address-btn:hover {
|
||||
color: #66b1ff;
|
||||
}
|
||||
|
||||
.note-input {
|
||||
flex: 1;
|
||||
|
||||
@@ -163,7 +163,9 @@ const selectedCount = computed(() => {
|
||||
|
||||
const totalPrice = computed(() => {
|
||||
return selectedItems.value.reduce((total, item) => {
|
||||
return total + (item.points * item.quantity)
|
||||
const points = parseFloat(item.product?.points_price) || 0
|
||||
const quantity = parseInt(item.quantity) || 0
|
||||
return total + (points * quantity)
|
||||
}, 0)
|
||||
})
|
||||
|
||||
@@ -177,6 +179,7 @@ const loadCartData = async () => {
|
||||
if (response.data.success) {
|
||||
cartItems.value = response.data.data.items.map(item => ({
|
||||
...item,
|
||||
quantity: parseInt(item.quantity) || 1,
|
||||
selected: false
|
||||
}))
|
||||
console.log(cartItems)
|
||||
@@ -285,30 +288,17 @@ const checkout = async () => {
|
||||
}
|
||||
|
||||
try {
|
||||
const cartData = {
|
||||
items: selectedItems.value.map(item => ({
|
||||
productId: item.productId || item.id,
|
||||
quantity: item.quantity,
|
||||
points: item.points,
|
||||
name: item.name,
|
||||
image: item.image,
|
||||
categoryId: item.categoryId,
|
||||
sizeId: item.sizeId
|
||||
}))
|
||||
}
|
||||
// 只发送选中商品的id数组
|
||||
const selectedIds = selectedItems.value.map(item => item.id)
|
||||
|
||||
const response = await api.post('/cart/checkout', cartData)
|
||||
// 向后端发送选中商品的id数组创建订单
|
||||
const response = await api.post('/order/create-from-cart', {
|
||||
cart_item_ids: selectedIds
|
||||
})
|
||||
|
||||
if (response.data.success) {
|
||||
const cartId = response.data.data.cartId
|
||||
|
||||
// 跳转到支付页面
|
||||
router.push({
|
||||
path: '/pay',
|
||||
query: {
|
||||
cartId: cartId
|
||||
}
|
||||
})
|
||||
// 直接跳转到支付页面，不传递任何参数
|
||||
router.push('/pay')
|
||||
} else {
|
||||
throw new Error(response.data.message || '创建订单失败')
|
||||
}
|
||||
@@ -326,48 +316,61 @@ onMounted(() => {
|
||||
<style scoped>
|
||||
.cart-page {
|
||||
min-height: 100vh;
|
||||
background-color: #f5f5f5;
|
||||
background: #f5f5f5;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
background: white;
|
||||
padding: 10px 15px;
|
||||
background: #ff6b35;
|
||||
padding: 12px 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
color: white;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.nav-left, .nav-right {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.nav-center {
|
||||
flex: 2;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.back-btn, .clear-btn {
|
||||
color: #666;
|
||||
color: white !important;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.clear-btn {
|
||||
color: #ff4757;
|
||||
.back-btn:hover, .clear-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.1) !important;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
flex: 1;
|
||||
padding: 10px;
|
||||
padding: 0;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.empty-cart {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 80px 20px;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
@@ -382,22 +385,26 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.empty-desc {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.go-shop-btn {
|
||||
background: linear-gradient(135deg, #ff6b35 0%, #ff4757 100%);
|
||||
border: none;
|
||||
padding: 12px 30px;
|
||||
border-radius: 25px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.cart-content {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cart-header {
|
||||
padding: 15px;
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -405,28 +412,24 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.select-all-checkbox {
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.item-count {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.cart-items {
|
||||
max-height: calc(100vh - 300px);
|
||||
overflow-y: auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.cart-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 15px;
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.cart-item:last-child {
|
||||
border-bottom: none;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.item-checkbox {
|
||||
@@ -437,8 +440,9 @@ onMounted(() => {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin-right: 12px;
|
||||
border-radius: 6px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.item-image img {
|
||||
@@ -454,14 +458,14 @@ onMounted(() => {
|
||||
|
||||
.item-name {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
margin-bottom: 8px;
|
||||
line-height: 1.4;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.item-details {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
gap: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
@@ -469,8 +473,8 @@ onMounted(() => {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
background: #f5f5f5;
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.item-price {
|
||||
@@ -478,54 +482,84 @@ onMounted(() => {
|
||||
align-items: center;
|
||||
color: #ff6b35;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.coin-icon {
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.price-value {
|
||||
font-size: 16px;
|
||||
color: #ff6b35;
|
||||
}
|
||||
|
||||
.item-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
align-items: flex-end;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.quantity-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.quantity-btn {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
padding: 0;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
background: #f5f5f5;
|
||||
color: #666;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.quantity-btn:hover {
|
||||
background: #e0e0e0;
|
||||
}
|
||||
|
||||
.quantity-btn:disabled {
|
||||
background: #f9f9f9;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.quantity {
|
||||
min-width: 30px;
|
||||
text-align: center;
|
||||
min-width: 36px;
|
||||
height: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 13px;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.remove-btn {
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
padding: 0;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.remove-btn:hover {
|
||||
color: #ff4757;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.bottom-bar {
|
||||
background: white;
|
||||
padding: 15px;
|
||||
padding: 16px;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-shadow: 0 -2px 4px rgba(0,0,0,0.1);
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.total-info {
|
||||
@@ -535,30 +569,39 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.selected-count {
|
||||
font-size: 12px;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.total-price {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.total-label {
|
||||
color: #333;
|
||||
margin-right: 4px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.total-value {
|
||||
color: #ff6b35;
|
||||
font-size: 18px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.checkout-btn {
|
||||
background: linear-gradient(135deg, #ff6b35 0%, #ff4757 100%);
|
||||
border: none;
|
||||
padding: 12px 24px;
|
||||
border-radius: 25px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.checkout-btn:disabled {
|
||||
background: #ddd;
|
||||
color: #999;
|
||||
}
|
||||
</style>
|
||||
@@ -103,6 +103,22 @@
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
<!-- 备案信息 -->
|
||||
<div class="icp-info">
|
||||
<div class="icp-item">
|
||||
<svg class="icp-icon" viewBox="0 0 1024 1024" width="16" height="16">
|
||||
<path d="M512 85.333333c-23.466667 0-42.666667 19.2-42.666667 42.666667v85.333333c0 23.466667 19.2 42.666667 42.666667 42.666667s42.666667-19.2 42.666667-42.666667V128c0-23.466667-19.2-42.666667-42.666667-42.666667z" fill="#909399"/>
|
||||
<path d="M512 256c-141.226667 0-256 114.773333-256 256 0 70.613333 28.586667 134.4 74.666667 180.48L512 874.666667l181.333333-182.186667C739.413333 646.4 768 582.613333 768 512c0-141.226667-114.773333-256-256-256z m0 341.333333c-47.146667 0-85.333333-38.186667-85.333333-85.333333s38.186667-85.333333 85.333333-85.333333 85.333333 38.186667 85.333333 85.333333-38.186667 85.333333-85.333333 85.333333z" fill="#909399"/>
|
||||
<path d="M170.666667 298.666667c-11.733333-20.48-37.546667-27.306667-58.026667-15.573334-20.48 11.733333-27.306667 37.546667-15.573333 58.026667l42.666666 74.24c11.733333 20.48 37.546667 27.306667 58.026667 15.573333 20.48-11.733333 27.306667-37.546667 15.573333-58.026666l-42.666666-74.24z" fill="#909399"/>
|
||||
<path d="M853.333333 298.666667l-42.666666 74.24c-11.733333 20.48-4.906667 46.293333 15.573333 58.026666 20.48 11.733333 46.293333 4.906667 58.026667-15.573333l42.666666-74.24c11.733333-20.48 4.906667-46.293333-15.573333-58.026667-20.48-11.733333-46.293333-4.906667-58.026667 15.573334z" fill="#909399"/>
|
||||
</svg>
|
||||
<a href="https://beian.miit.gov.cn/" target="_blank" class="icp-link">
|
||||
浙ICP备2025186895号
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 背景装饰 -->
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="nav-center">
|
||||
<h1 class="nav-title">确认支付</h1>
|
||||
<h1 class="nav-title">确认订单</h1>
|
||||
</div>
|
||||
<div class="nav-right">
|
||||
<!-- 占位元素，保持标题居中 -->
|
||||
@@ -20,26 +20,77 @@
|
||||
</nav>
|
||||
|
||||
<div v-loading="loading" class="page-content">
|
||||
<!-- 支付倒计时 -->
|
||||
<div class="countdown-section">
|
||||
<div class="countdown-header">
|
||||
<el-icon class="clock-icon"><Clock /></el-icon>
|
||||
<span class="countdown-label">支付剩余时间</span>
|
||||
<!-- 收货地址 -->
|
||||
<div class="address-section">
|
||||
<div class="address-header">
|
||||
<el-icon><Location /></el-icon>
|
||||
<span class="address-label">收货地址</span>
|
||||
<el-button
|
||||
type="text"
|
||||
@click="goToAddressManage"
|
||||
class="manage-address-btn"
|
||||
>
|
||||
管理地址
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="countdown-display">
|
||||
<div class="time-block">
|
||||
<span class="time-number">{{ formatTime(minutes) }}</span>
|
||||
<span class="time-label">分</span>
|
||||
</div>
|
||||
<div class="time-separator">:</div>
|
||||
<div class="time-block">
|
||||
<span class="time-number">{{ formatTime(seconds) }}</span>
|
||||
<span class="time-label">秒</span>
|
||||
<div class="address-content">
|
||||
<el-select
|
||||
v-model="selectedAddressId"
|
||||
placeholder="请选择收货地址"
|
||||
class="address-select"
|
||||
@change="handleAddressChange"
|
||||
>
|
||||
<el-option
|
||||
v-for="address in addresses"
|
||||
:key="address.id"
|
||||
:label="`${address.recipientName} ${address.recipientPhone} ${address.province}${address.city}${address.district}${address.detailAddress}`"
|
||||
:value="address.id"
|
||||
>
|
||||
<div class="address-option">
|
||||
<div class="address-info">
|
||||
<span class="recipient-info">{{ address.recipientName }} {{ address.recipientPhone }}</span>
|
||||
<el-tag v-if="address.isDefault" type="danger" size="small" class="default-tag">默认</el-tag>
|
||||
</div>
|
||||
<div class="address-detail">{{ address.province }}{{ address.city }}{{ address.district }}{{ address.detailAddress }}</div>
|
||||
</div>
|
||||
</el-option>
|
||||
</el-select>
|
||||
<div v-if="addresses.length === 0" class="no-address">
|
||||
<span class="no-address-text">暂无收货地址</span>
|
||||
<el-button type="text" @click="goToAddressManage" class="add-address-btn">
|
||||
立即添加
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="countdown-tip">
|
||||
<span v-if="timeLeft > 0">请在规定时间内完成支付</span>
|
||||
<span v-else class="timeout-text">支付超时，请重新下单</span>
|
||||
</div>
|
||||
|
||||
<!-- 订单商品信息 -->
|
||||
<div class="order-items-section">
|
||||
<div class="section-header">
|
||||
<span class="title">订单商品</span>
|
||||
</div>
|
||||
|
||||
<div class="items-list" v-if="paymentData.items && paymentData.items.length > 0">
|
||||
<div class="item-card" v-for="item in paymentData.items" :key="item.id">
|
||||
<div class="item-image">
|
||||
<img :src="item.image || '/default-product.png'" :alt="item.name" />
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<div class="item-name">{{ item.name }}</div>
|
||||
<div class="item-specs" v-if="item.specs">{{ item.specs }}</div>
|
||||
<div class="item-price-quantity">
|
||||
<span class="price">{{ item.points }}积分</span>
|
||||
<span class="quantity">x{{ item.quantity }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-total">
|
||||
{{ item.points * item.quantity }}积分
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="no-items" v-else>
|
||||
<p>暂无商品信息</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -123,33 +174,48 @@
|
||||
<div class="payment-options">
|
||||
<div
|
||||
class="payment-option"
|
||||
:class="{ active: selectedPaymentMethod === 'beans' }"
|
||||
:class="{
|
||||
active: selectedPaymentMethod === 'beans',
|
||||
disabled: !isPaymentMethodAvailable('beans')
|
||||
}"
|
||||
@click="selectPaymentMethod('beans')"
|
||||
>
|
||||
<img src="/imgs/profile/融豆.png" alt="融豆" class="payment-icon-img" />
|
||||
<div class="payment-info">
|
||||
<div class="payment-name">融豆支付</div>
|
||||
<div class="payment-desc">使用账户融豆进行支付</div>
|
||||
<div class="payment-desc">
|
||||
<span v-if="isPaymentMethodAvailable('beans')">使用账户融豆进行支付</span>
|
||||
<span v-else class="insufficient-balance">余额不足（当前：{{ userBalance.beans }}）</span>
|
||||
</div>
|
||||
</div>
|
||||
<el-icon class="check-icon" v-if="selectedPaymentMethod === 'beans'"><Check /></el-icon>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="payment-option"
|
||||
:class="{ active: selectedPaymentMethod === 'points' }"
|
||||
:class="{
|
||||
active: selectedPaymentMethod === 'points',
|
||||
disabled: !isPaymentMethodAvailable('points')
|
||||
}"
|
||||
@click="selectPaymentMethod('points')"
|
||||
>
|
||||
<el-icon class="payment-icon"><Coin /></el-icon>
|
||||
<div class="payment-info">
|
||||
<div class="payment-name">积分支付</div>
|
||||
<div class="payment-desc">使用账户积分进行支付</div>
|
||||
<div class="payment-desc">
|
||||
<span v-if="isPaymentMethodAvailable('points')">使用账户积分进行支付</span>
|
||||
<span v-else class="insufficient-balance">余额不足（当前：{{ userBalance.points }}）</span>
|
||||
</div>
|
||||
</div>
|
||||
<el-icon class="check-icon" v-if="selectedPaymentMethod === 'points'"><Check /></el-icon>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="payment-option"
|
||||
:class="{ active: selectedPaymentMethod === 'mixed' }"
|
||||
:class="{
|
||||
active: selectedPaymentMethod === 'mixed',
|
||||
disabled: !isPaymentMethodAvailable('mixed')
|
||||
}"
|
||||
@click="selectPaymentMethod('mixed')"
|
||||
>
|
||||
<div class="payment-icon-group">
|
||||
@@ -159,7 +225,10 @@
|
||||
</div>
|
||||
<div class="payment-info">
|
||||
<div class="payment-name">积分+融豆</div>
|
||||
<div class="payment-desc">使用积分和融豆组合支付</div>
|
||||
<div class="payment-desc">
|
||||
<span v-if="isPaymentMethodAvailable('mixed')">使用积分和融豆组合支付</span>
|
||||
<span v-else class="insufficient-balance">余额不足（当前：{{ userBalance.points + userBalance.beans }}）</span>
|
||||
</div>
|
||||
</div>
|
||||
<el-icon class="check-icon" v-if="selectedPaymentMethod === 'mixed'"><Check /></el-icon>
|
||||
</div>
|
||||
@@ -219,7 +288,7 @@ import { useRoute, useRouter } from 'vue-router'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import {
|
||||
ArrowLeft,
|
||||
Clock,
|
||||
Location,
|
||||
Coin,
|
||||
Orange,
|
||||
Check
|
||||
@@ -232,8 +301,6 @@ const router = useRouter()
|
||||
// 响应式数据
|
||||
const loading = ref(false)
|
||||
const paying = ref(false)
|
||||
const timeLeft = ref(0) // 从后端获取倒计时时间
|
||||
const timer = ref(null)
|
||||
const selectedPaymentMethod = ref('') // 当前选择的支付方式
|
||||
const paymentData = ref({
|
||||
totalAmount: 0,
|
||||
@@ -242,21 +309,37 @@ const paymentData = ref({
|
||||
cartId: null,
|
||||
items: [] // 添加商品列表
|
||||
})
|
||||
|
||||
// 计算属性
|
||||
const minutes = computed(() => Math.floor(timeLeft.value / 60))
|
||||
const seconds = computed(() => timeLeft.value % 60)
|
||||
// 用户余额数据
|
||||
const userBalance = ref({
|
||||
points: 0, // 用户积分
|
||||
beans: 0 // 用户融豆
|
||||
})
|
||||
// 地址相关数据
|
||||
const addresses = ref([])
|
||||
const selectedAddressId = ref('')
|
||||
const selectedAddress = ref(null)
|
||||
|
||||
// 方法
|
||||
const formatTime = (time) => {
|
||||
return time.toString().padStart(2, '0')
|
||||
}
|
||||
|
||||
const selectPaymentMethod = async (method) => {
|
||||
// 检查支付方式是否可用
|
||||
if (!isPaymentMethodAvailable(method)) {
|
||||
let message = ''
|
||||
if (method === 'beans') {
|
||||
message = `融豆余额不足，当前余额：${userBalance.value.beans}，需要：${paymentData.value.totalAmount}`
|
||||
} else if (method === 'points') {
|
||||
message = `积分余额不足，当前余额：${userBalance.value.points}，需要：${paymentData.value.totalAmount}`
|
||||
} else if (method === 'mixed') {
|
||||
message = `融豆和积分余额不足，当前余额：融豆${userBalance.value.beans} + 积分${userBalance.value.points} = ${userBalance.value.beans + userBalance.value.points}，需要：${paymentData.value.totalAmount}`
|
||||
}
|
||||
ElMessage.warning(message)
|
||||
return
|
||||
}
|
||||
|
||||
selectedPaymentMethod.value = method
|
||||
|
||||
// 当切换支付方式时，向后端获取对应的支付金额
|
||||
if (paymentData.value.cartId) {
|
||||
if (paymentData.value.orderId) {
|
||||
await fetchPaymentAmountByMethod(method)
|
||||
}
|
||||
}
|
||||
@@ -265,7 +348,7 @@ const selectPaymentMethod = async (method) => {
|
||||
const fetchPaymentAmountByMethod = async (paymentMethod) => {
|
||||
try {
|
||||
const response = await api.post('/payment/calculate', {
|
||||
cartId: paymentData.value.cartId,
|
||||
orderId: paymentData.value.orderId,
|
||||
paymentMethod: paymentMethod
|
||||
})
|
||||
|
||||
@@ -284,60 +367,115 @@ const fetchPaymentAmountByMethod = async (paymentMethod) => {
|
||||
}
|
||||
}
|
||||
|
||||
const startCountdown = () => {
|
||||
timer.value = setInterval(() => {
|
||||
if (timeLeft.value > 0) {
|
||||
timeLeft.value--
|
||||
// 获取用户地址列表
|
||||
const getAddressList = async () => {
|
||||
try {
|
||||
const response = await api.get('/addresses')
|
||||
console.log('获取地址列表响应:', response)
|
||||
if (response.data.success) {
|
||||
// 根据接口文档转换数据格式，与Address.vue保持一致
|
||||
const addressList = response.data.data || []
|
||||
addresses.value = addressList.map(addr => ({
|
||||
id: addr.id,
|
||||
recipientName: addr.receiver_name,
|
||||
recipientPhone: addr.receiver_phone,
|
||||
province: addr.province_name,
|
||||
city: addr.city_name,
|
||||
district: addr.district_name,
|
||||
detailAddress: addr.detailed_address,
|
||||
isDefault: addr.is_default,
|
||||
labelName: addr.label_name,
|
||||
labelColor: addr.label_color
|
||||
}))
|
||||
|
||||
// 如果有默认地址，自动选中
|
||||
const defaultAddress = addresses.value.find(addr => addr.isDefault)
|
||||
if (defaultAddress) {
|
||||
selectedAddressId.value = defaultAddress.id
|
||||
selectedAddress.value = defaultAddress
|
||||
}
|
||||
} else {
|
||||
clearInterval(timer.value)
|
||||
ElMessage.error('支付超时，请重新下单')
|
||||
throw new Error(response.data.message || '获取地址列表失败')
|
||||
}
|
||||
}, 1000)
|
||||
} catch (error) {
|
||||
console.error('获取地址列表失败:', error)
|
||||
ElMessage.error(error.message || '获取地址列表失败')
|
||||
}
|
||||
}
|
||||
|
||||
// 处理地址选择变化
|
||||
const handleAddressChange = (addressId) => {
|
||||
selectedAddress.value = addresses.value.find(addr => addr.id === addressId)
|
||||
}
|
||||
|
||||
// 跳转到地址管理页面
|
||||
const goToAddressManage = () => {
|
||||
router.push('/address')
|
||||
}
|
||||
|
||||
// 获取用户余额信息
|
||||
const fetchUserBalance = async () => {
|
||||
try {
|
||||
// 获取用户积分
|
||||
const pointsResponse = await api.get('/user/points')
|
||||
userBalance.value.points = pointsResponse.data?.currentPoints ?? pointsResponse.data?.points ?? 0
|
||||
|
||||
// 获取用户融豆（从用户资料接口获取）
|
||||
const profileResponse = await api.get('/user/profile')
|
||||
if (profileResponse.data.success && profileResponse.data.user) {
|
||||
userBalance.value.beans = parseFloat(profileResponse.data.user.balance) || 0
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取用户余额失败:', error)
|
||||
ElMessage.error('获取用户余额失败')
|
||||
userBalance.value = { points: 0, beans: 0 }
|
||||
}
|
||||
}
|
||||
|
||||
// 检查支付方式是否可用
|
||||
const isPaymentMethodAvailable = (method) => {
|
||||
const totalAmount = paymentData.value.totalAmount
|
||||
|
||||
switch (method) {
|
||||
case 'beans':
|
||||
return userBalance.value.beans >= totalAmount
|
||||
case 'points':
|
||||
return userBalance.value.points >= totalAmount
|
||||
case 'mixed':
|
||||
// 融豆和积分总和是否足够（1积分=1融豆）
|
||||
return (userBalance.value.beans + userBalance.value.points) >= totalAmount
|
||||
default:
|
||||
return true
|
||||
}
|
||||
}
|
||||
|
||||
const fetchPaymentData = async () => {
|
||||
try {
|
||||
loading.value = true
|
||||
const cartId = route.query.cartId
|
||||
|
||||
if (!cartId) {
|
||||
// 允许直接访问，使用默认数据
|
||||
ElMessage.warning('未指定购物车信息，使用默认支付数据')
|
||||
paymentData.value = {
|
||||
totalAmount: 0,
|
||||
pointsAmount: 0,
|
||||
beansAmount: 0,
|
||||
cartId: null,
|
||||
items: []
|
||||
}
|
||||
timeLeft.value = 900 // 默认15分钟
|
||||
startCountdown()
|
||||
loading.value = false
|
||||
return
|
||||
}
|
||||
// 先获取用户余额信息
|
||||
await fetchUserBalance()
|
||||
|
||||
// 获取地址列表
|
||||
await getAddressList()
|
||||
|
||||
// 从后端获取当前用户的待支付订单信息
|
||||
const response = await api.get('/order/pending-payment')
|
||||
|
||||
// 获取支付信息
|
||||
const response = await api.get(`/payment/info/${cartId}`)
|
||||
if (response.data.success) {
|
||||
const data = response.data.data
|
||||
paymentData.value = {
|
||||
totalAmount: data.totalAmount || 0,
|
||||
pointsAmount: data.pointsAmount || 0,
|
||||
beansAmount: data.beansAmount || 0,
|
||||
cartId: cartId,
|
||||
items: data.items || [] // 获取商品列表
|
||||
orderId: data.orderId || null,
|
||||
items: data.items || []
|
||||
}
|
||||
|
||||
// 设置倒计时时间（从后端获取，单位：秒）
|
||||
timeLeft.value = data.remainingTime || 900 // 默认15分钟
|
||||
|
||||
// 开始倒计时
|
||||
startCountdown()
|
||||
} else {
|
||||
throw new Error(response.data.message || '获取支付信息失败')
|
||||
throw new Error(response.data.message || '获取订单信息失败')
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error(error.message || '获取支付信息失败')
|
||||
ElMessage.error(error.message || '获取订单信息失败')
|
||||
router.go(-1)
|
||||
} finally {
|
||||
loading.value = false
|
||||
@@ -360,10 +498,10 @@ const handleGoBack = async () => {
|
||||
|
||||
// 用户确认放弃付款，先保存订单数据到后端，然后跳转到PayFailed页面
|
||||
try {
|
||||
if (paymentData.value.cartId) {
|
||||
if (paymentData.value.orderId) {
|
||||
// 将当前支付数据保存为失败订单
|
||||
await api.post('/order/save-failed', {
|
||||
cartId: paymentData.value.cartId,
|
||||
orderId: paymentData.value.orderId,
|
||||
orderData: {
|
||||
orderNumber: 'ORD' + Date.now(),
|
||||
createTime: new Date().toISOString(),
|
||||
@@ -379,9 +517,9 @@ const handleGoBack = async () => {
|
||||
console.error('保存失败订单数据失败:', error)
|
||||
}
|
||||
|
||||
// 跳转到PayFailed页面，传递cartId参数
|
||||
if (paymentData.value.cartId) {
|
||||
router.push(`/payfailed?cartId=${paymentData.value.cartId}`)
|
||||
// 跳转到PayFailed页面，传递orderId参数
|
||||
if (paymentData.value.orderId) {
|
||||
router.push(`/payfailed?orderId=${paymentData.value.orderId}`)
|
||||
} else {
|
||||
router.push(`/payfailed`)
|
||||
}
|
||||
@@ -405,6 +543,11 @@ const confirmPayment = async () => {
|
||||
return
|
||||
}
|
||||
|
||||
if (!selectedAddress.value) {
|
||||
ElMessage.error('请选择收货地址')
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
await ElMessageBox.confirm(
|
||||
`确定要支付 ¥${paymentData.value.totalAmount} 吗？`,
|
||||
@@ -418,46 +561,53 @@ const confirmPayment = async () => {
|
||||
|
||||
paying.value = true
|
||||
|
||||
// 构建支付数据
|
||||
const submitData = {
|
||||
cartId: paymentData.value.cartId,
|
||||
// 创建订单数据
|
||||
const orderData = {
|
||||
items: paymentData.value.items,
|
||||
paymentMethod: selectedPaymentMethod.value,
|
||||
totalAmount: paymentData.value.totalAmount
|
||||
totalAmount: paymentData.value.totalAmount,
|
||||
addressId: selectedAddress.value.id,
|
||||
address: {
|
||||
recipientName: selectedAddress.value.recipientName,
|
||||
recipientPhone: selectedAddress.value.recipientPhone,
|
||||
province: selectedAddress.value.province,
|
||||
city: selectedAddress.value.city,
|
||||
district: selectedAddress.value.district,
|
||||
detailAddress: selectedAddress.value.detailAddress
|
||||
}
|
||||
}
|
||||
|
||||
// 发送支付请求到后端
|
||||
const response = await api.post('/payment/confirm', submitData)
|
||||
// 向后端发送创建订单请求
|
||||
const response = await api.post('/orders/create', orderData)
|
||||
|
||||
if (response.data.success) {
|
||||
ElMessage.success('支付成功！')
|
||||
// 清除定时器
|
||||
if (timer.value) {
|
||||
clearInterval(timer.value)
|
||||
}
|
||||
// 跳转到订单页面
|
||||
router.push('/shop')
|
||||
ElMessage.success('订单创建成功！')
|
||||
|
||||
// 跳转到PayLoading页面，传递订单ID
|
||||
router.push({
|
||||
path: '/payloading',
|
||||
query: {
|
||||
orderId: response.data.data.orderId
|
||||
}
|
||||
})
|
||||
} else {
|
||||
throw new Error(response.data.message || '支付失败')
|
||||
throw new Error(response.data.message || '创建订单失败')
|
||||
}
|
||||
} catch (error) {
|
||||
if (error !== 'cancel') {
|
||||
ElMessage.error(error.message || '支付失败，请重试')
|
||||
ElMessage.error(error.message || '创建订单失败，请重试')
|
||||
}
|
||||
} finally {
|
||||
paying.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 生命周期
|
||||
// 页面初始化
|
||||
onMounted(() => {
|
||||
fetchPaymentData()
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
if (timer.value) {
|
||||
clearInterval(timer.value)
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@@ -783,11 +933,209 @@ onUnmounted(() => {
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.payment-option:hover:not(.disabled) {
|
||||
border-color: #ffae00;
|
||||
background: #fff7e6;
|
||||
}
|
||||
|
||||
.payment-option.active {
|
||||
border-color: #ffae00;
|
||||
background: #fff7e6;
|
||||
}
|
||||
|
||||
.payment-option.disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
background: #f5f5f5;
|
||||
border-color: #ddd;
|
||||
}
|
||||
|
||||
.payment-option.disabled:hover {
|
||||
border-color: #ddd;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.insufficient-balance {
|
||||
color: #ff4757;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* 地址选择样式 */
|
||||
.address-section {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.address-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.address-label {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.manage-address-btn {
|
||||
color: #409eff;
|
||||
font-size: 14px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.address-select {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.address-option {
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.address-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.recipient-info {
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.default-tag {
|
||||
background: #ff4757;
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.address-detail {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.no-address {
|
||||
text-align: center;
|
||||
padding: 40px 20px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.no-address-text {
|
||||
display: block;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.add-address-btn {
|
||||
color: #409eff;
|
||||
font-size: 14px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* 订单商品信息样式 */
|
||||
.order-items-section {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.section-header {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.section-header .title {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.order-items-section .items-list {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.order-items-section .item-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 16px 0;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.order-items-section .item-card:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.order-items-section .item-image {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin-right: 16px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.order-items-section .item-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.order-items-section .item-info {
|
||||
flex: 1;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.order-items-section .item-name {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
margin-bottom: 8px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.item-specs {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.item-price-quantity {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.item-price-quantity .price {
|
||||
color: #409eff;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.item-price-quantity .quantity {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.order-items-section .item-total {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #409eff;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.order-items-section .no-items {
|
||||
text-align: center;
|
||||
padding: 40px 20px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.payment-icon {
|
||||
color: #ffae00;
|
||||
font-size: 20px;
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="nav-center">
|
||||
<h1 class="nav-title">{{ orderExpired ? '交易关闭' : '继续付款' }}</h1>
|
||||
<h1 class="nav-title">订单详情</h1>
|
||||
</div>
|
||||
<div class="nav-right">
|
||||
<!-- 占位元素，保持标题居中 -->
|
||||
@@ -90,23 +90,15 @@
|
||||
</div>
|
||||
|
||||
<!-- 底部操作按钮 -->
|
||||
<div class="bottom-actions" v-if="!orderExpired">
|
||||
<div class="bottom-actions">
|
||||
<el-button
|
||||
size="large"
|
||||
class="cancel-btn"
|
||||
@click="cancelOrder"
|
||||
>
|
||||
取消订单
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="!orderExpired"
|
||||
type="primary"
|
||||
size="large"
|
||||
class="pay-btn"
|
||||
@click="continuePay"
|
||||
@click="confirmPayment"
|
||||
:loading="paying"
|
||||
>
|
||||
{{ paying ? '处理中...' : '继续付款' }}
|
||||
{{ paying ? '支付中...' : '确认付款' }}
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -128,7 +120,6 @@ const router = useRouter()
|
||||
// 响应式数据
|
||||
const loading = ref(false)
|
||||
const paying = ref(false)
|
||||
const orderExpired = ref(false) // 订单是否超时
|
||||
const orderData = ref({
|
||||
orderNumber: '', // 订单编号
|
||||
createTime: '', // 订单创建时间
|
||||
@@ -169,17 +160,17 @@ const formatAddress = (address) => {
|
||||
const fetchOrderData = async () => {
|
||||
try {
|
||||
loading.value = true
|
||||
const cartId = route.query.cartId
|
||||
console.log('cartId:', cartId)
|
||||
const orderId = route.query.orderId
|
||||
console.log('orderId:', orderId)
|
||||
|
||||
// 检查cartId是否有效
|
||||
if (!cartId || cartId === 'undefined' || cartId === 'null' || cartId === '???') {
|
||||
console.warn('cartId无效，使用默认订单数据')
|
||||
// 检查orderId是否有效
|
||||
if (!orderId || orderId === 'undefined' || orderId === 'null') {
|
||||
console.warn('orderId无效，使用默认订单数据')
|
||||
throw new Error('无效的订单ID')
|
||||
}
|
||||
|
||||
// 从后端获取失败订单信息
|
||||
const response = await api.get(`/order/failed/${cartId}`)
|
||||
// 从后端获取完整订单信息
|
||||
const response = await api.get(`/order/detail/${orderId}`)
|
||||
console.log('API响应:', response)
|
||||
if (response.data.success) {
|
||||
const data = response.data.data
|
||||
@@ -236,83 +227,36 @@ const fetchOrderData = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
const continuePay = async () => {
|
||||
const confirmPayment = async () => {
|
||||
try {
|
||||
paying.value = true
|
||||
|
||||
// 校验订单状态
|
||||
const cartId = route.query.cartId
|
||||
if (cartId) {
|
||||
const response = await api.get(`/order/status/${cartId}`)
|
||||
|
||||
if (response.data.success) {
|
||||
const orderStatus = response.data.data.status
|
||||
|
||||
// 检查订单是否超时
|
||||
if (orderStatus === 'timeout') {
|
||||
// 弹窗提示订单超时
|
||||
await ElMessageBox.alert(
|
||||
'很抱歉，该订单已超时，无法继续付款。',
|
||||
'订单超时提醒',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
type: 'warning'
|
||||
}
|
||||
)
|
||||
|
||||
// 设置订单超时状态
|
||||
orderExpired.value = true
|
||||
return
|
||||
}
|
||||
}
|
||||
const orderId = route.query.orderId
|
||||
if (!orderId) {
|
||||
ElMessage.error('订单ID无效')
|
||||
return
|
||||
}
|
||||
|
||||
// 跳转回支付页面
|
||||
if (cartId) {
|
||||
router.push(`/pay?cartId=${cartId}`)
|
||||
// 向后端发送支付确认请求
|
||||
const response = await api.post(`/order/pay/${orderId}`, {
|
||||
orderId: orderId,
|
||||
paymentMethod: 'online' // 可以根据需要调整支付方式
|
||||
})
|
||||
|
||||
if (response.data.success) {
|
||||
ElMessage.success('支付成功！')
|
||||
// 跳转到支付成功页面或订单列表
|
||||
router.push('/orders')
|
||||
} else {
|
||||
router.push('/pay')
|
||||
throw new Error(response.data.message || '支付失败')
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error(error.message || '检查订单状态失败')
|
||||
ElMessage.error(error.message || '支付处理失败')
|
||||
} finally {
|
||||
paying.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const cancelOrder = async () => {
|
||||
try {
|
||||
await ElMessageBox.confirm(
|
||||
'确定要取消这个订单吗？取消后将无法恢复。',
|
||||
'取消订单',
|
||||
{
|
||||
confirmButtonText: '确定取消',
|
||||
cancelButtonText: '我再想想',
|
||||
type: 'warning'
|
||||
}
|
||||
)
|
||||
|
||||
// 发送取消订单请求
|
||||
const cartId = route.query.cartId
|
||||
if (cartId) {
|
||||
const response = await api.post(`/order/cancel/${cartId}`)
|
||||
if (response.data.success) {
|
||||
ElMessage.success('订单已取消')
|
||||
orderExpired.value = true
|
||||
} else {
|
||||
throw new Error(response.data.message || '取消订单失败')
|
||||
}
|
||||
} else {
|
||||
ElMessage.success('订单已取消')
|
||||
orderExpired.value = true
|
||||
}
|
||||
} catch (error) {
|
||||
if (error !== 'cancel') {
|
||||
ElMessage.error(error.message || '取消订单失败')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 生命周期
|
||||
onMounted(() => {
|
||||
fetchOrderData()
|
||||
@@ -509,21 +453,10 @@ onMounted(() => {
|
||||
background: white;
|
||||
border-top: 1px solid #eee;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
flex: 1;
|
||||
height: 48px;
|
||||
border: 1px solid #ddd;
|
||||
color: #666;
|
||||
background: white;
|
||||
border-radius: 24px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.pay-btn {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
background: #ffae00;
|
||||
border: none;
|
||||
@@ -16,15 +16,7 @@
|
||||
<h1 class="nav-title">商品详情</h1>
|
||||
</div>
|
||||
<div class="nav-right">
|
||||
<el-button
|
||||
type="text"
|
||||
@click="showCart = true"
|
||||
class="cart-btn"
|
||||
>
|
||||
<el-badge :value="cartCount" :hidden="cartCount === 0">
|
||||
<el-icon><ShoppingCart /></el-icon>
|
||||
</el-badge>
|
||||
</el-button>
|
||||
<!-- 购物车按钮已移除 -->
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
@@ -237,118 +229,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 购物车抽屉 -->
|
||||
<el-drawer
|
||||
v-model="showCart"
|
||||
title="购物车"
|
||||
direction="rtl"
|
||||
size="80%"
|
||||
>
|
||||
<div class="cart-content">
|
||||
<!-- 加载状态 -->
|
||||
<div v-if="cartLoading" class="cart-loading">
|
||||
<el-icon class="is-loading"><Loading /></el-icon>
|
||||
<div>正在加载购物车数据...</div>
|
||||
</div>
|
||||
|
||||
<!-- 购物车为空 -->
|
||||
<div v-else-if="cartItems.length === 0" class="empty-cart">
|
||||
<el-icon class="empty-icon"><ShoppingCart /></el-icon>
|
||||
<p>购物车是空的</p>
|
||||
<p class="empty-tip">快去挑选心仪的商品吧~</p>
|
||||
</div>
|
||||
|
||||
<!-- 购物车商品列表 -->
|
||||
<div v-else class="cart-items">
|
||||
<div class="cart-header">
|
||||
<span>共 {{ cartTotalItems }} 件商品</span>
|
||||
<div class="cart-actions">
|
||||
<el-button type="text" @click="goToCartPage" class="manage-btn">
|
||||
管理
|
||||
</el-button>
|
||||
<el-button type="text" @click="clearCart" class="clear-btn">
|
||||
清空购物车
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cart-list">
|
||||
<div
|
||||
v-for="item in cartItems"
|
||||
:key="item.id"
|
||||
class="cart-item"
|
||||
>
|
||||
<div class="item-image">
|
||||
<img :src="item.image" :alt="item.name" />
|
||||
</div>
|
||||
|
||||
<div class="item-info">
|
||||
<h4 class="item-name">{{ item.name }}</h4>
|
||||
<div class="item-price">
|
||||
<el-icon><Coin /></el-icon>
|
||||
<span>{{ item.points }} 积分</span>
|
||||
</div>
|
||||
<div class="item-stock">库存：{{ item.stock }}</div>
|
||||
</div>
|
||||
|
||||
<div class="item-actions">
|
||||
<div class="quantity-control">
|
||||
<el-button
|
||||
size="small"
|
||||
@click="updateCartItemQuantity(item.id, item.quantity - 1)"
|
||||
:disabled="item.quantity <= 1"
|
||||
>
|
||||
-
|
||||
</el-button>
|
||||
<span class="quantity">{{ item.quantity }}</span>
|
||||
<el-button
|
||||
size="small"
|
||||
@click="updateCartItemQuantity(item.id, item.quantity + 1)"
|
||||
:disabled="item.quantity >= item.stock"
|
||||
>
|
||||
+
|
||||
</el-button>
|
||||
</div>
|
||||
<el-button
|
||||
type="text"
|
||||
@click="removeFromCart(item.id)"
|
||||
class="remove-btn"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 购物车底部 -->
|
||||
<div class="cart-footer">
|
||||
<div class="total-info">
|
||||
<div class="total-points">
|
||||
<span>总计：</span>
|
||||
<el-icon><Coin /></el-icon>
|
||||
<span class="points">{{ cartTotalPoints }}</span>
|
||||
<span>积分</span>
|
||||
</div>
|
||||
<div class="user-points">
|
||||
<span>我的积分：{{ userPoints }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkout-actions">
|
||||
<el-button
|
||||
type="primary"
|
||||
size="large"
|
||||
@click="checkoutCart"
|
||||
:disabled="cartTotalPoints > userPoints"
|
||||
class="checkout-btn"
|
||||
>
|
||||
{{ cartTotalPoints > userPoints ? '积分不足' : '立即结算' }}
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-drawer>
|
||||
<!-- 购物车抽屉已移除 -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -379,11 +260,8 @@ const product = ref(null)
|
||||
const quantity = ref(1)
|
||||
const reviews = ref([])
|
||||
const recommendedProducts = ref([])
|
||||
const showCart = ref(false)
|
||||
const cartLoading = ref(false)
|
||||
// showCart已移除
|
||||
const userPoints = ref(0)
|
||||
const cartItems = ref([])
|
||||
const cartCount = ref(0)
|
||||
const showDescription = ref(false)
|
||||
const showDetails = ref(false)
|
||||
const selectedCategory = ref(null)
|
||||
@@ -394,27 +272,7 @@ const totalPoints = computed(() => {
|
||||
return product.value ? product.value.points * quantity.value : 0
|
||||
})
|
||||
|
||||
// 购物车相关计算属性
|
||||
const cartTotalPoints = computed(() => {
|
||||
return cartItems.value.reduce((total, item) => total + (item.points * item.quantity), 0)
|
||||
})
|
||||
|
||||
const cartTotalItems = computed(() => {
|
||||
return cartItems.value.reduce((total, item) => total + item.quantity, 0)
|
||||
})
|
||||
|
||||
// 更新购物车计数
|
||||
watch(cartTotalItems, (newCount) => {
|
||||
cartCount.value = newCount
|
||||
}, { immediate: true })
|
||||
|
||||
// 监听购物车抽屉打开状态，打开时从后端加载数据
|
||||
watch(showCart, async (newValue) => {
|
||||
if (newValue) {
|
||||
// 购物车打开时从后端加载数据
|
||||
await loadCartFromBackend()
|
||||
}
|
||||
})
|
||||
// 购物车相关计算属性已移除
|
||||
|
||||
// 方法
|
||||
const getProductDetail = async () => {
|
||||
@@ -485,9 +343,6 @@ const addToCart = async () => {
|
||||
if (response.data.success) {
|
||||
ElMessage.success('商品已加入购物车！')
|
||||
|
||||
// 更新本地购物车数据
|
||||
await loadCartFromBackend()
|
||||
|
||||
// 重置选择状态
|
||||
quantity.value = 1
|
||||
selectedCategory.value = null
|
||||
@@ -500,142 +355,9 @@ const addToCart = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
// 购物车商品管理方法
|
||||
const updateCartItemQuantity = async (itemId, newQuantity) => {
|
||||
const item = cartItems.value.find(item => item.id === itemId)
|
||||
if (!item) return
|
||||
|
||||
if (newQuantity <= 0) {
|
||||
removeFromCart(itemId)
|
||||
return
|
||||
}
|
||||
|
||||
if (newQuantity > item.stock) {
|
||||
ElMessage.error(`库存不足，最多只能选择 ${item.stock} 个`)
|
||||
return
|
||||
}
|
||||
|
||||
item.quantity = newQuantity
|
||||
|
||||
// 同步购物车数据到后端
|
||||
await syncCartToBackend()
|
||||
}
|
||||
// 购物车商品管理方法已移除
|
||||
|
||||
const removeFromCart = async (itemId) => {
|
||||
const index = cartItems.value.findIndex(item => item.id === itemId)
|
||||
if (index !== -1) {
|
||||
const item = cartItems.value[index]
|
||||
cartItems.value.splice(index, 1)
|
||||
ElMessage.success(`已从购物车移除 ${item.name}`)
|
||||
|
||||
// 同步购物车数据到后端
|
||||
await syncCartToBackend()
|
||||
}
|
||||
}
|
||||
|
||||
const clearCart = () => {
|
||||
ElMessageBox.confirm(
|
||||
'确定要清空购物车吗？',
|
||||
'确认清空',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}
|
||||
).then(async () => {
|
||||
cartItems.value = []
|
||||
ElMessage.success('购物车已清空')
|
||||
|
||||
// 同步购物车数据到后端
|
||||
await syncCartToBackend()
|
||||
}).catch(() => {})
|
||||
}
|
||||
|
||||
// 购物车数据同步到后端
|
||||
const syncCartToBackend = async () => {
|
||||
try {
|
||||
const cartData = {
|
||||
items: cartItems.value.map(item => ({
|
||||
productId: item.id,
|
||||
quantity: item.quantity,
|
||||
points: item.points,
|
||||
name: item.name,
|
||||
image: item.image,
|
||||
stock: item.stock
|
||||
}))
|
||||
}
|
||||
await api.post('/cart/sync', cartData)
|
||||
} catch (error) {
|
||||
console.error('购物车同步失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 从后端读取购物车数据
|
||||
const loadCartFromBackend = async () => {
|
||||
cartLoading.value = true
|
||||
try {
|
||||
const response = await api.get('/cart')
|
||||
if (response.data && response.data.items) {
|
||||
cartItems.value = response.data.items
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('购物车数据加载失败:', error)
|
||||
ElMessage.error('购物车数据加载失败，请重试')
|
||||
// 如果加载失败，保持当前购物车状态
|
||||
} finally {
|
||||
cartLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 跳转到购物车管理页面
|
||||
const goToCartPage = () => {
|
||||
showCart.value = false
|
||||
router.push('/cart')
|
||||
}
|
||||
|
||||
// 购物车结算功能
|
||||
const checkoutCart = async () => {
|
||||
if (cartItems.value.length === 0) {
|
||||
ElMessage.error('购物车是空的')
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
// 创建购物车结算请求
|
||||
const cartData = {
|
||||
items: cartItems.value.map(item => ({
|
||||
productId: item.id || item.productId,
|
||||
quantity: item.quantity,
|
||||
points: item.points,
|
||||
name: item.name,
|
||||
image: item.image,
|
||||
categoryId: item.categoryId,
|
||||
sizeId: item.sizeId
|
||||
}))
|
||||
}
|
||||
|
||||
const response = await api.post('/cart/checkout', cartData)
|
||||
|
||||
if (response.data.success) {
|
||||
const cartId = response.data.data.cartId
|
||||
|
||||
// 跳转到支付页面
|
||||
router.push({
|
||||
path: '/pay',
|
||||
query: {
|
||||
cartId: cartId
|
||||
}
|
||||
})
|
||||
|
||||
// 关闭购物车弹窗
|
||||
showCart.value = false
|
||||
} else {
|
||||
throw new Error(response.data.message || '创建订单失败')
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error(error.message || '结算失败，请重试')
|
||||
}
|
||||
}
|
||||
// 购物车数据同步和结算方法已移除
|
||||
|
||||
const buyNow = async () => {
|
||||
if (!product.value) {
|
||||
@@ -1204,217 +926,5 @@ watch(
|
||||
}
|
||||
}
|
||||
|
||||
/* 购物车样式 */
|
||||
.cart-content {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.cart-loading {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 50%;
|
||||
color: #666;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.cart-loading .el-icon {
|
||||
font-size: 32px;
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.empty-cart {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 50%;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 64px;
|
||||
margin-bottom: 16px;
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
.empty-tip {
|
||||
font-size: 14px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.cart-items {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.cart-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16px 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.cart-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.manage-btn {
|
||||
color: #409eff;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.manage-btn:hover {
|
||||
color: #66b1ff;
|
||||
}
|
||||
|
||||
.clear-btn {
|
||||
color: #ff4757;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.cart-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 16px 0;
|
||||
}
|
||||
|
||||
.cart-item {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
padding: 16px 0;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
}
|
||||
|
||||
.cart-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.item-image {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.item-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.item-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.item-name {
|
||||
margin: 0 0 8px 0;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
line-height: 1.4;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
line-clamp: 2;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.item-price {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
color: #ff6b35;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.item-stock {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.item-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.quantity-control {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.quantity-control .el-button {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
padding: 0;
|
||||
min-height: 24px;
|
||||
}
|
||||
|
||||
.quantity {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
min-width: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.remove-btn {
|
||||
color: #ff4757;
|
||||
font-size: 12px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.cart-footer {
|
||||
border-top: 1px solid #eee;
|
||||
padding: 16px 0 0 0;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.total-info {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.total-points {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.total-points .points {
|
||||
color: #ff6b35;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.user-points {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.checkout-actions {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.checkout-btn {
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
}
|
||||
/* 购物车样式已移除 */
|
||||
</style>
|
||||
@@ -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