<template>
|
<div class="container mx-auto px-4 py-8">
|
<div class="bg-white rounded-lg shadow">
|
<!-- 订单头部 -->
|
<div class="p-4 border-b">
|
<h1 class="text-xl font-medium">确认订单</h1>
|
</div>
|
|
<!-- 收货地址 -->
|
<div class="p-4 border-b">
|
<div class="flex justify-between items-center mb-4">
|
<h2 class="text-lg">收货地址</h2>
|
<el-button type="primary" link @click="showAddressDialog = true">
|
{{ selectedAddress ? '修改地址' : '添加地址' }}
|
</el-button>
|
</div>
|
|
<div v-if="selectedAddress" class="bg-gray-50 p-4 rounded">
|
<div class="flex justify-between">
|
<div>
|
<span class="font-medium">{{ selectedAddress.name }}</span>
|
<span class="ml-4 text-gray-600">{{ selectedAddress.phone }}</span>
|
</div>
|
<el-tag size="small" v-if="selectedAddress.isDefault">默认地址</el-tag>
|
</div>
|
<div class="mt-2 text-gray-600">{{ selectedAddress.address }}</div>
|
</div>
|
<el-empty v-else description="请添加收货地址" />
|
</div>
|
|
<!-- 商品列表 -->
|
<div class="p-4 border-b">
|
<h2 class="text-lg mb-4">商品清单</h2>
|
<div class="space-y-4">
|
<div v-for="item in selectedItems" :key="item.addID" class="flex items-center">
|
<el-image :src="item.image" class="w-20 h-20 object-cover rounded" />
|
<div class="flex-1 ml-4">
|
<div class="text-sm">{{ item.name }}</div>
|
<div class="text-gray-500 text-sm mt-1">数量：{{ item.quantity }}</div>
|
</div>
|
<div class="text-red-500">¥{{ (item.price * item.quantity).toFixed(2) }}</div>
|
</div>
|
</div>
|
</div>
|
|
<!-- 订单信息 -->
|
<div class="p-4 border-b">
|
<h2 class="text-lg mb-4">订单信息</h2>
|
<el-form :model="orderForm" label-width="100px">
|
<el-form-item label="支付方式">
|
<el-radio-group v-model="orderForm.paymentMethod">
|
<el-radio label="wechat">微信支付</el-radio>
|
<el-radio label="alipay">支付宝</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="备注">
|
<el-input v-model="orderForm.remark" type="textarea" placeholder="请输入订单备注" />
|
</el-form-item>
|
</el-form>
|
</div>
|
|
<!-- 订单金额 -->
|
<div class="p-4">
|
<div class="flex justify-end items-center">
|
<div class="text-gray-500">
|
共 <span class="text-red-500">{{ totalQuantity }}</span> 件商品，
|
总计：<span class="text-red-500 text-xl font-medium">¥{{ totalAmount.toFixed(2) }}</span>
|
</div>
|
<el-button type="primary" class="ml-4" @click="submitOrder" :loading="submitting">
|
提交订单
|
</el-button>
|
</div>
|
</div>
|
</div>
|
|
<!-- 地址选择对话框 -->
|
<el-dialog v-model="showAddressDialog" title="选择收货地址" width="600px">
|
<div class="space-y-4">
|
<div v-for="address in addressList" :key="address.id"
|
class="p-4 border rounded cursor-pointer hover:border-primary"
|
:class="{ 'border-primary': selectedAddress?.id === address.id }"
|
@click="selectAddress(address)"
|
>
|
<div class="flex justify-between">
|
<div>
|
<span class="font-medium">{{ address.name }}</span>
|
<span class="ml-4 text-gray-600">{{ address.phone }}</span>
|
</div>
|
<el-tag size="small" v-if="address.isDefault">默认地址</el-tag>
|
</div>
|
<div class="mt-2 text-gray-600">{{ address.address }}</div>
|
</div>
|
</div>
|
<template #footer>
|
<el-button @click="showAddressDialog = false">取消</el-button>
|
<el-button type="primary" @click="addNewAddress">新增地址</el-button>
|
</template>
|
</el-dialog>
|
|
<!-- 新增地址对话框 -->
|
<el-dialog v-model="showNewAddressDialog" title="新增收货地址" width="500px">
|
<el-form :model="newAddress" :rules="addressRules" ref="addressFormRef" label-width="100px">
|
<el-form-item label="收货人" prop="name">
|
<el-input v-model="newAddress.name" placeholder="请输入收货人姓名" />
|
</el-form-item>
|
<el-form-item label="手机号码" prop="phone">
|
<el-input v-model="newAddress.phone" placeholder="请输入手机号码" />
|
</el-form-item>
|
<el-form-item label="详细地址" prop="address">
|
<el-input v-model="newAddress.address" type="textarea" placeholder="请输入详细地址" />
|
</el-form-item>
|
<el-form-item>
|
<el-checkbox v-model="newAddress.isDefault">设为默认地址</el-checkbox>
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<el-button @click="showNewAddressDialog = false">取消</el-button>
|
<el-button type="primary" @click="saveAddress">保存</el-button>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { ref, computed } from 'vue';
|
import { useRouter } from 'vue-router';
|
import { ElMessage } from 'element-plus';
|
import { useCartStore } from '@/stores/useCartStore';
|
|
const router = useRouter();
|
const cartStore = useCartStore();
|
|
// 选中的商品
|
const selectedItems = computed(() => {
|
if(cartStore.items.length == 0)return []
|
return cartStore.items.filter(item => item.selected);
|
});
|
|
// 总数量
|
const totalQuantity = computed(() => {
|
return selectedItems.value.reduce((sum, item) => sum + item.quantity, 0);
|
});
|
|
// 总金额
|
const totalAmount = computed(() => {
|
return selectedItems.value.reduce((sum, item) => sum + item.price * item.quantity, 0);
|
});
|
|
// 订单表单
|
const orderForm = ref({
|
paymentMethod: 'wechat',
|
remark: ''
|
});
|
|
// 地址相关
|
const showAddressDialog = ref(false);
|
const showNewAddressDialog = ref(false);
|
const selectedAddress = ref(null);
|
const addressList = ref([
|
{
|
id: 1,
|
name: '张三',
|
phone: '13800138000',
|
address: '上海市浦东新区陆家嘴',
|
isDefault: true
|
}
|
]);
|
|
// 新增地址表单
|
const addressFormRef = ref();
|
const newAddress = ref({
|
name: '',
|
phone: '',
|
address: '',
|
isDefault: false
|
});
|
|
// 地址验证规则
|
const addressRules = {
|
name: [{ required: true, message: '请输入收货人姓名', trigger: 'blur' }],
|
phone: [
|
{ required: true, message: '请输入手机号码', trigger: 'blur' },
|
{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
|
],
|
address: [{ required: true, message: '请输入详细地址', trigger: 'blur' }]
|
};
|
|
// 选择地址
|
const selectAddress = (address) => {
|
selectedAddress.value = address;
|
showAddressDialog.value = false;
|
};
|
|
// 添加新地址
|
const addNewAddress = () => {
|
showAddressDialog.value = false;
|
showNewAddressDialog.value = true;
|
};
|
|
// 保存地址
|
const saveAddress = async () => {
|
if (!addressFormRef.value) return;
|
|
await addressFormRef.value.validate((valid, fields) => {
|
if (valid) {
|
const address = {
|
id: Date.now(),
|
...newAddress.value
|
};
|
|
if (address.isDefault) {
|
addressList.value.forEach(item => item.isDefault = false);
|
}
|
|
addressList.value.push(address);
|
selectedAddress.value = address;
|
showNewAddressDialog.value = false;
|
|
// 重置表单
|
newAddress.value = {
|
name: '',
|
phone: '',
|
address: '',
|
isDefault: false
|
};
|
|
ElMessage.success('地址添加成功');
|
}
|
});
|
};
|
|
// 提交订单
|
const submitting = ref(false);
|
const submitOrder = async () => {
|
if (!selectedAddress.value) {
|
ElMessage.warning('请选择收货地址');
|
return;
|
}
|
|
submitting.value = true;
|
try {
|
// 这里添加提交订单的逻辑
|
await new Promise(resolve => setTimeout(resolve, 1000));
|
|
// 清空已选商品
|
const remainingItems = cartStore.cartItems.filter(item => !item.selected);
|
cartStore.setCartItems(remainingItems);
|
|
ElMessage.success('订单提交成功');
|
router.push('/payment');
|
} finally {
|
submitting.value = false;
|
}
|
};
|
</script>
|
