更新商城
This commit is contained in:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user