1426 lines
49 KiB
JavaScript
1426 lines
49 KiB
JavaScript
|
// Checkout Page JavaScript - 完全重写版本
|
|||
|
|
|
|||
|
|
// 全局状态
|
|||
|
|
const checkoutState = {
|
|||
|
|
cartItems: [], // 购物车商品
|
|||
|
|
addresses: [], // 用户地址列表
|
|||
|
|
selectedAddress: null, // 选中的地址
|
|||
|
|
coupons: [], // 可用优惠券
|
|||
|
|
selectedCoupon: null, // 选中的优惠券
|
|||
|
|
orderNotes: '', // 订单备注
|
|||
|
|
checkoutType: 'cart', // 结算类型：'cart'(购物车) 或 'buynow'(立即购买)
|
|||
|
|
paymentMethod: 'wechat', // 支付方式：'wechat'(微信) 或 'alipay'(支付宝)
|
|||
|
|
paymentTimer: null, // 支付轮询定时器
|
|||
|
|
countdownTimer: null, // 倒计时定时器
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
$(document).ready(function() {
|
|||
|
|
initCheckoutPage();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
function initCheckoutPage() {
|
|||
|
|
const pageStartTime = Date.now();
|
|||
|
|
console.log('\n=== 结算页面加载开始 ===');
|
|||
|
|
|
|||
|
|
// 检查结算类型
|
|||
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|||
|
|
const type = urlParams.get('type');
|
|||
|
|
const productId = urlParams.get('product_id');
|
|||
|
|
const skuId = urlParams.get('sku_id');
|
|||
|
|
const quantity = urlParams.get('quantity');
|
|||
|
|
|
|||
|
|
// 绑定事件（立即绑定，不等待数据加载）
|
|||
|
|
bindCheckoutEvents();
|
|||
|
|
|
|||
|
|
// 并行加载所有数据，提升页面加载速度
|
|||
|
|
console.log('🚀 开始并行加载所有数据...');
|
|||
|
|
console.log('⏱️ 请求开始时间:', new Date().toLocaleTimeString());
|
|||
|
|
|
|||
|
|
let dataPromise;
|
|||
|
|
if (type === 'buynow' && productId) {
|
|||
|
|
// 立即购买模式
|
|||
|
|
checkoutState.checkoutType = 'buynow';
|
|||
|
|
console.log(' [1/3] 发起商品详情 API 请求...');
|
|||
|
|
dataPromise = loadBuyNowProduct(productId, skuId, quantity);
|
|||
|
|
} else {
|
|||
|
|
// 购物车结算模式
|
|||
|
|
checkoutState.checkoutType = 'cart';
|
|||
|
|
console.log(' [1/3] 发起购物车 API 请求...');
|
|||
|
|
dataPromise = loadCartItems();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 并行加载地址和商品数据
|
|||
|
|
console.log(' [2/3] 发起地址 API 请求...');
|
|||
|
|
const addressPromise = loadAddresses();
|
|||
|
|
console.log(' [3/3] 所有并行请求已发起！');
|
|||
|
|
console.log('⏱️ 请求发起时间:', new Date().toLocaleTimeString());
|
|||
|
|
|
|||
|
|
// 等待主要数据加载完成（地址和商品）
|
|||
|
|
Promise.all([addressPromise, dataPromise])
|
|||
|
|
.then(() => {
|
|||
|
|
const pageLoadTime = Date.now() - pageStartTime;
|
|||
|
|
console.log(`\n✅ 页面主要内容加载完成`);
|
|||
|
|
console.log(` 总耗时: ${pageLoadTime}ms`);
|
|||
|
|
console.log(` 完成时间: ${new Date().toLocaleTimeString()}`);
|
|||
|
|
console.log(` 说明: 由于地址和商品并行加载，总耗时 ≈ max(地址耗时, 商品耗时)\n`);
|
|||
|
|
|
|||
|
|
// 异步加载优惠券（不阻塞页面显示）
|
|||
|
|
// 使用 setTimeout 让页面先渲染，然后再加载优惠券
|
|||
|
|
setTimeout(() => {
|
|||
|
|
loadCoupons();
|
|||
|
|
}, 0);
|
|||
|
|
})
|
|||
|
|
.catch(error => {
|
|||
|
|
const pageLoadTime = Date.now() - pageStartTime;
|
|||
|
|
console.error(`❌ 页面加载失败 (耗时: ${pageLoadTime}ms):`, error);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 加载立即购买的商品
|
|||
|
|
function loadBuyNowProduct(productId, skuId, quantity) {
|
|||
|
|
const startTime = Date.now();
|
|||
|
|
console.log(' → 商品详情 API: 请求中...');
|
|||
|
|
|
|||
|
|
// 显示加载状态
|
|||
|
|
$('#goodsList').html(`
|
|||
|
|
<div style="text-align: center; padding: 40px 20px; color: var(--text-light);">
|
|||
|
|
<div class="spinner" style="margin: 0 auto 16px;"></div>
|
|||
|
|
<p>加载中...</p>
|
|||
|
|
</div>
|
|||
|
|
`);
|
|||
|
|
|
|||
|
|
// 返回 Promise
|
|||
|
|
return API.get(`/products/${productId}`)
|
|||
|
|
.then(data => {
|
|||
|
|
const loadTime = Date.now() - startTime;
|
|||
|
|
console.log(` ✓ 商品详情 API: 完成 (耗时: ${loadTime}ms)`);
|
|||
|
|
console.log(' 商品:', data.data?.name || data.name || '未知');
|
|||
|
|
|
|||
|
|
// 支持多种数据格式
|
|||
|
|
const product = data.data || data;
|
|||
|
|
|
|||
|
|
// 构建购买商品数据
|
|||
|
|
const item = {
|
|||
|
|
product_id: parseInt(productId),
|
|||
|
|
product: product,
|
|||
|
|
quantity: parseInt(quantity) || 1,
|
|||
|
|
selected: true
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 如果指定了SKU
|
|||
|
|
if (skuId) {
|
|||
|
|
const sku = product.skus?.find(s => s.id == skuId || s.sku_id == skuId);
|
|||
|
|
if (sku) {
|
|||
|
|
item.sku_id = parseInt(skuId);
|
|||
|
|
item.sku = sku;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
checkoutState.cartItems = [item];
|
|||
|
|
renderGoodsList([item]);
|
|||
|
|
updatePriceSummary();
|
|||
|
|
})
|
|||
|
|
.catch(error => {
|
|||
|
|
const loadTime = Date.now() - startTime;
|
|||
|
|
console.error(` ✗ 商品详情 API: 失败 (耗时: ${loadTime}ms)`, error.message);
|
|||
|
|
Toast.error('加载商品失败');
|
|||
|
|
showEmptyCart();
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 加载购物车商品
|
|||
|
|
function loadCartItems() {
|
|||
|
|
const startTime = Date.now();
|
|||
|
|
console.log(' → 购物车 API: 请求中...');
|
|||
|
|
|
|||
|
|
// 显示加载状态
|
|||
|
|
$('#goodsList').html(`
|
|||
|
|
<div style="text-align: center; padding: 40px 20px; color: var(--text-light);">
|
|||
|
|
<div class="spinner" style="margin: 0 auto 16px;"></div>
|
|||
|
|
<p>加载中...</p>
|
|||
|
|
</div>
|
|||
|
|
`);
|
|||
|
|
|
|||
|
|
// 返回 Promise
|
|||
|
|
return API.get('/cart')
|
|||
|
|
.then(data => {
|
|||
|
|
const loadTime = Date.now() - startTime;
|
|||
|
|
console.log(` ✓ 购物车 API: 完成 (耗时: ${loadTime}ms)`);
|
|||
|
|
console.log(` 商品数: ${data.items?.length || 0}`);
|
|||
|
|
console.log(` 总金额: ${data.total || '0'}`);
|
|||
|
|
|
|||
|
|
// 支持多种数据格式
|
|||
|
|
let items = [];
|
|||
|
|
if (Array.isArray(data)) {
|
|||
|
|
// 直接返回数组
|
|||
|
|
items = data;
|
|||
|
|
} else if (data.data) {
|
|||
|
|
// 数据在 data.data 中
|
|||
|
|
if (Array.isArray(data.data)) {
|
|||
|
|
items = data.data;
|
|||
|
|
} else if (data.data.items) {
|
|||
|
|
items = data.data.items;
|
|||
|
|
} else if (data.data.list) {
|
|||
|
|
items = data.data.list;
|
|||
|
|
}
|
|||
|
|
} else if (data.items) {
|
|||
|
|
// 数据在 data.items 中
|
|||
|
|
items = data.items;
|
|||
|
|
} else if (data.list) {
|
|||
|
|
// 数据在 data.list 中
|
|||
|
|
items = data.list;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
console.log('解析到的商品列表:', items);
|
|||
|
|
|
|||
|
|
checkoutState.cartItems = items;
|
|||
|
|
|
|||
|
|
if (items.length === 0) {
|
|||
|
|
showEmptyCart();
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
renderGoodsList(items);
|
|||
|
|
updatePriceSummary();
|
|||
|
|
})
|
|||
|
|
.catch(error => {
|
|||
|
|
const loadTime = Date.now() - startTime;
|
|||
|
|
console.error(` ✗ 购物车 API: 失败 (耗时: ${loadTime}ms)`, error.message);
|
|||
|
|
Toast.error('加载商品失败');
|
|||
|
|
showEmptyCart();
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 显示空购物车
|
|||
|
|
function showEmptyCart() {
|
|||
|
|
$('#goodsList').html(`
|
|||
|
|
<div style="text-align: center; padding: 60px 20px; color: var(--text-light);">
|
|||
|
|
<p style="font-size: 16px; margin-bottom: 20px;">购物车是空的</p>
|
|||
|
|
<a href="index.html" class="btn btn-primary">
|
|||
|
|
去逛逛
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
`);
|
|||
|
|
$('#payNowBtn').prop('disabled', true);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 渲染商品列表
|
|||
|
|
function renderGoodsList(items) {
|
|||
|
|
const goodsHtml = items.map(item => {
|
|||
|
|
// 字段映射 - 支持多种格式（嵌套结构优先）
|
|||
|
|
const productName = item.product_name || item.productName || item.name || item.title ||
|
|||
|
|
item.goods_name ||
|
|||
|
|
(item.product && (item.product.name || item.product.title)) ||
|
|||
|
|
'未知商品';
|
|||
|
|
|
|||
|
|
// SKU 规格名称提取（支持多种格式）
|
|||
|
|
let skuName = item.sku_name || item.skuName || item.specs || item.spec || '';
|
|||
|
|
|
|||
|
|
// 处理 spec_values 对象格式
|
|||
|
|
if (!skuName && item.sku && item.sku.spec_values) {
|
|||
|
|
const specValues = item.sku.spec_values;
|
|||
|
|
if (typeof specValues === 'object' && specValues !== null) {
|
|||
|
|
// 将对象转换为 "key:value" 格式，如 "颜色:红色 尺寸:XL"
|
|||
|
|
skuName = Object.entries(specValues)
|
|||
|
|
.map(([key, value]) => `${key}:${value}`)
|
|||
|
|
.join(' ');
|
|||
|
|
} else if (typeof specValues === 'string') {
|
|||
|
|
skuName = specValues;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 价格提取（优先从嵌套的 product 或 sku 对象中获取）
|
|||
|
|
const price = parseInt(
|
|||
|
|
item.price ||
|
|||
|
|
item.sale_price ||
|
|||
|
|
item.salePrice ||
|
|||
|
|
(item.sku && item.sku.price) ||
|
|||
|
|
(item.product && item.product.price) ||
|
|||
|
|
0
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
const quantity = item.quantity || item.num || item.count || 1;
|
|||
|
|
|
|||
|
|
// 图片提取（支持嵌套的 product.main_image）
|
|||
|
|
const image = item.image || item.thumb || item.main_image || item.mainImage || item.pic ||
|
|||
|
|
(item.product && item.product.main_image) ||
|
|||
|
|
'https://via.placeholder.com/80';
|
|||
|
|
|
|||
|
|
console.log('商品数据:', {
|
|||
|
|
原始数据: item,
|
|||
|
|
解析结果: { productName, skuName, price, quantity, image }
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
return `
|
|||
|
|
<div class="goods-item">
|
|||
|
|
<img src="${image}" alt="${productName}" class="goods-image">
|
|||
|
|
<div class="goods-info">
|
|||
|
|
<div class="goods-title">${productName}</div>
|
|||
|
|
${skuName ? `<div class="goods-specs">${skuName}</div>` : ''}
|
|||
|
|
</div>
|
|||
|
|
<div class="goods-right">
|
|||
|
|
<div class="goods-price">￥${PriceUtils.fenToYuan(price).toFixed(2)}</div>
|
|||
|
|
<div class="goods-quantity">x${quantity}</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
}).join('');
|
|||
|
|
|
|||
|
|
$('#goodsList').html(goodsHtml);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 加载用户地址
|
|||
|
|
function loadAddresses() {
|
|||
|
|
const startTime = Date.now();
|
|||
|
|
console.log(' → 地址 API: 请求中...');
|
|||
|
|
|
|||
|
|
// 返回 Promise
|
|||
|
|
return API.get('/addresses')
|
|||
|
|
.then(data => {
|
|||
|
|
const loadTime = Date.now() - startTime;
|
|||
|
|
console.log(` ✓ 地址 API: 完成 (耗时: ${loadTime}ms)`);
|
|||
|
|
|
|||
|
|
// 支持多种数据格式
|
|||
|
|
let addresses = [];
|
|||
|
|
if (Array.isArray(data)) {
|
|||
|
|
// 直接返回数组
|
|||
|
|
addresses = data;
|
|||
|
|
} else if (data.data) {
|
|||
|
|
// 数据在 data.data 中
|
|||
|
|
addresses = Array.isArray(data.data) ? data.data : (data.data.list || []);
|
|||
|
|
} else if (data.list) {
|
|||
|
|
// 数据在 data.list 中
|
|||
|
|
addresses = data.list;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
console.log(' 地址数: ' + addresses.length);
|
|||
|
|
|
|||
|
|
checkoutState.addresses = addresses;
|
|||
|
|
|
|||
|
|
if (addresses.length > 0) {
|
|||
|
|
// 查找默认地址
|
|||
|
|
const defaultAddress = addresses.find(addr => addr.is_default || addr.isDefault);
|
|||
|
|
checkoutState.selectedAddress = defaultAddress || addresses[0];
|
|||
|
|
|
|||
|
|
console.log(' 选中地址:', checkoutState.selectedAddress.name || '无名称');
|
|||
|
|
|
|||
|
|
renderSelectedAddress(checkoutState.selectedAddress);
|
|||
|
|
} else {
|
|||
|
|
console.log(' 没有可用地址');
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
.catch(error => {
|
|||
|
|
const loadTime = Date.now() - startTime;
|
|||
|
|
console.error(` ✗ 地址 API: 失败 (耗时: ${loadTime}ms)`, error.message);
|
|||
|
|
// 非登录用户或没有地址时不显示错误
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 渲染选中的地址
|
|||
|
|
function renderSelectedAddress(address) {
|
|||
|
|
if (!address) {
|
|||
|
|
$('#noAddress').show();
|
|||
|
|
$('#addressInfo').hide();
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
$('#noAddress').hide();
|
|||
|
|
$('#addressInfo').show();
|
|||
|
|
|
|||
|
|
// 字段映射 - 支持多种格式
|
|||
|
|
const name = address.receiver_name || address.name || '';
|
|||
|
|
const phone = address.receiver_phone || address.phone || '';
|
|||
|
|
const province = address.province_name || address.provinceName || address.province || '';
|
|||
|
|
const city = address.city_name || address.cityName || address.city || '';
|
|||
|
|
const district = address.district_name || address.districtName || address.district || '';
|
|||
|
|
const detail = address.detail_address || address.detailAddress || address.detail || '';
|
|||
|
|
const isDefault = address.is_default || address.isDefault;
|
|||
|
|
const tag = address.address_tag || address.addressTag || (isDefault ? '默认' : '');
|
|||
|
|
|
|||
|
|
$('#addressName').text(name);
|
|||
|
|
$('#addressPhone').text(phone);
|
|||
|
|
$('#addressDetail').text(`${province} ${city} ${district} ${detail}`);
|
|||
|
|
|
|||
|
|
if (tag) {
|
|||
|
|
$('#addressTag').text(tag).show();
|
|||
|
|
} else {
|
|||
|
|
$('#addressTag').hide();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 加载优惠券
|
|||
|
|
function loadCoupons() {
|
|||
|
|
const startTime = Date.now();
|
|||
|
|
console.log('\n🎫 加载优惠券（异步，不阻塞页面）...');
|
|||
|
|
|
|||
|
|
// 计算总价（支持嵌套结构）
|
|||
|
|
const totalAmount = checkoutState.cartItems.reduce((sum, item) => {
|
|||
|
|
const price = parseInt(
|
|||
|
|
item.price ||
|
|||
|
|
item.sale_price ||
|
|||
|
|
item.salePrice ||
|
|||
|
|
(item.sku && item.sku.price) ||
|
|||
|
|
(item.product && item.product.price) ||
|
|||
|
|
0
|
|||
|
|
);
|
|||
|
|
const quantity = item.quantity || 1;
|
|||
|
|
return sum + (price * quantity);
|
|||
|
|
}, 0);
|
|||
|
|
|
|||
|
|
console.log(' 订单总额（分）:', totalAmount);
|
|||
|
|
|
|||
|
|
// 如果订单金额为0，不加载优惠券
|
|||
|
|
if (totalAmount <= 0) {
|
|||
|
|
console.log(' 订单金额为0，跳过加载优惠券\n');
|
|||
|
|
checkoutState.coupons = [];
|
|||
|
|
updateCouponDisplay();
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 使用订单可用优惠券 API，添加超时控制
|
|||
|
|
const timeoutPromise = new Promise((_, reject) => {
|
|||
|
|
setTimeout(() => reject(new Error('请求超时')), 5000); // 5秒超时
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const apiPromise = API.get('/coupons/order/available', {
|
|||
|
|
order_amount: totalAmount
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
Promise.race([apiPromise, timeoutPromise])
|
|||
|
|
.then(data => {
|
|||
|
|
const loadTime = Date.now() - startTime;
|
|||
|
|
console.log(` ✓ 优惠券 API: 完成 (耗时: ${loadTime}ms)\n`);
|
|||
|
|
|
|||
|
|
// 检查数据是否为空
|
|||
|
|
if (!data) {
|
|||
|
|
console.warn(' ⚠️ 优惠券 API 返回空数据\n');
|
|||
|
|
checkoutState.coupons = [];
|
|||
|
|
updateCouponDisplay();
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 支持多种数据格式
|
|||
|
|
let coupons = [];
|
|||
|
|
if (Array.isArray(data)) {
|
|||
|
|
coupons = data;
|
|||
|
|
} else if (data.data) {
|
|||
|
|
coupons = Array.isArray(data.data) ? data.data : (data.data.list || data.data.coupons || []);
|
|||
|
|
} else if (data.list) {
|
|||
|
|
coupons = data.list;
|
|||
|
|
} else if (data.coupons) {
|
|||
|
|
coupons = data.coupons;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
console.log(' 优惠券数量:', coupons.length, '\n');
|
|||
|
|
checkoutState.coupons = coupons;
|
|||
|
|
|
|||
|
|
// 更新优惠券显示
|
|||
|
|
updateCouponDisplay();
|
|||
|
|
})
|
|||
|
|
.catch(error => {
|
|||
|
|
const loadTime = Date.now() - startTime;
|
|||
|
|
console.error(` ✗ 优惠券 API: 失败 (耗时: ${loadTime}ms)`, error.message);
|
|||
|
|
console.log(' 优惠券加载失败不影响结算，继续使用\n');
|
|||
|
|
// 优惠券加载失败不影响结算流程，只是没有优惠券可用
|
|||
|
|
checkoutState.coupons = [];
|
|||
|
|
updateCouponDisplay();
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 更新优惠券显示
|
|||
|
|
function updateCouponDisplay() {
|
|||
|
|
const availableCount = checkoutState.coupons.length;
|
|||
|
|
|
|||
|
|
if (checkoutState.selectedCoupon) {
|
|||
|
|
const discount = parseInt(checkoutState.selectedCoupon.discount_amount || 0);
|
|||
|
|
$('#couponText').text(`-￥${PriceUtils.fenToYuan(discount).toFixed(2)}`);
|
|||
|
|
} else if (availableCount > 0) {
|
|||
|
|
$('#couponText').text(`${availableCount}张可用`);
|
|||
|
|
} else {
|
|||
|
|
$('#couponText').text('暂无可用优惠券');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 更新价格汇总
|
|||
|
|
function updatePriceSummary() {
|
|||
|
|
// 计算商品总额（支持嵌套结构）
|
|||
|
|
const subtotal = checkoutState.cartItems.reduce((sum, item) => {
|
|||
|
|
const price = parseInt(
|
|||
|
|
item.price ||
|
|||
|
|
item.sale_price ||
|
|||
|
|
item.salePrice ||
|
|||
|
|
(item.sku && item.sku.price) ||
|
|||
|
|
(item.product && item.product.price) ||
|
|||
|
|
0
|
|||
|
|
);
|
|||
|
|
const quantity = item.quantity || 1;
|
|||
|
|
return sum + (price * quantity);
|
|||
|
|
}, 0);
|
|||
|
|
|
|||
|
|
// 运费（满一定金额免运费）
|
|||
|
|
const shippingFee = subtotal >= 5900 ? 0 : 0; // 满 59 元免运费
|
|||
|
|
|
|||
|
|
// 活动优惠（从商品信息中获取）
|
|||
|
|
const promotionAmount = 0; // TODO: 从 API 获取
|
|||
|
|
|
|||
|
|
// 优惠券优惠
|
|||
|
|
const couponAmount = checkoutState.selectedCoupon ?
|
|||
|
|
parseInt(checkoutState.selectedCoupon.discount_amount || 0) : 0;
|
|||
|
|
|
|||
|
|
// 应付总额
|
|||
|
|
const totalAmount = subtotal + shippingFee - promotionAmount - couponAmount;
|
|||
|
|
|
|||
|
|
// 更新显示
|
|||
|
|
$('#subtotalAmount').text(`￥${PriceUtils.fenToYuan(subtotal).toFixed(2)}`);
|
|||
|
|
|
|||
|
|
if (shippingFee > 0) {
|
|||
|
|
$('#shippingAmount').text(`￥${PriceUtils.fenToYuan(shippingFee).toFixed(2)}`);
|
|||
|
|
} else {
|
|||
|
|
$('#shippingAmount').text('免运费');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (promotionAmount > 0) {
|
|||
|
|
$('#promotionRow').show();
|
|||
|
|
$('#promotionAmount').text(`-￥${PriceUtils.fenToYuan(promotionAmount).toFixed(2)}`);
|
|||
|
|
} else {
|
|||
|
|
$('#promotionRow').hide();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (couponAmount > 0) {
|
|||
|
|
$('#couponRow').show();
|
|||
|
|
$('#couponAmount').text(`-￥${PriceUtils.fenToYuan(couponAmount).toFixed(2)}`);
|
|||
|
|
} else {
|
|||
|
|
$('#couponRow').hide();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
$('#totalAmount').text(`￥${PriceUtils.fenToYuan(totalAmount).toFixed(2)}`);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 绑定事件
|
|||
|
|
function bindCheckoutEvents() {
|
|||
|
|
// 选择地址按钮
|
|||
|
|
$('#selectAddressBtn, #changeAddressBtn').on('click', function() {
|
|||
|
|
showAddressModal();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 编辑选中的地址
|
|||
|
|
$('#editSelectedAddressBtn').on('click', function() {
|
|||
|
|
if (checkoutState.selectedAddress) {
|
|||
|
|
editAddress(checkoutState.selectedAddress);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 关闭地址弹窗
|
|||
|
|
$('#closeAddressModal').on('click', function() {
|
|||
|
|
hideAddressModal();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 选择优惠券
|
|||
|
|
$('#couponSelector').on('click', function() {
|
|||
|
|
if (checkoutState.coupons.length === 0) {
|
|||
|
|
Toast.info('暂无可用优惠券');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
showCouponModal();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 关闭优惠券弹窗
|
|||
|
|
$('#closeCouponModal').on('click', function() {
|
|||
|
|
hideCouponModal();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 确认优惠券
|
|||
|
|
$('#confirmCouponBtn').on('click', function() {
|
|||
|
|
hideCouponModal();
|
|||
|
|
updatePriceSummary();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 新增地址按钮
|
|||
|
|
$('#addAddressBtn').on('click', function() {
|
|||
|
|
hideAddressModal();
|
|||
|
|
showAddAddressModal();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 关闭新增地址弹窗
|
|||
|
|
$('#closeAddAddressModal, #cancelAddAddressBtn').on('click', function() {
|
|||
|
|
hideAddAddressModal();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 保存地址
|
|||
|
|
$('#saveAddressBtn').on('click', function() {
|
|||
|
|
saveNewAddress();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 提交订单
|
|||
|
|
$('#payNowBtn').on('click', function(e) {
|
|||
|
|
e.preventDefault();
|
|||
|
|
submitOrder();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 选择支付方式
|
|||
|
|
$('.payment-method:not(.disabled)').on('click', function() {
|
|||
|
|
$('.payment-method').removeClass('active');
|
|||
|
|
$(this).addClass('active');
|
|||
|
|
checkoutState.paymentMethod = $(this).data('payment');
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 关闭支付弹窗
|
|||
|
|
$('#closePaymentModal').on('click', function() {
|
|||
|
|
hidePaymentModal();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 点击弹窗背景关闭
|
|||
|
|
$('.modal').on('click', function(e) {
|
|||
|
|
if ($(e.target).hasClass('modal')) {
|
|||
|
|
$(this).removeClass('show');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 显示地址选择弹窗
|
|||
|
|
function showAddressModal() {
|
|||
|
|
renderAddressList();
|
|||
|
|
$('#addressModal').addClass('show');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function hideAddressModal() {
|
|||
|
|
$('#addressModal').removeClass('show');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 渲染地址列表
|
|||
|
|
function renderAddressList() {
|
|||
|
|
if (checkoutState.addresses.length === 0) {
|
|||
|
|
$('#addressList').html(`
|
|||
|
|
<div style="text-align: center; padding: 40px 20px; color: var(--text-light);">
|
|||
|
|
<p>暂无收货地址</p>
|
|||
|
|
</div>
|
|||
|
|
`);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const addressHtml = checkoutState.addresses.map(address => {
|
|||
|
|
// 字段映射 - 支持多种格式
|
|||
|
|
const name = address.receiver_name || address.name || '';
|
|||
|
|
const phone = address.receiver_phone || address.phone || '';
|
|||
|
|
const province = address.province_name || address.provinceName || address.province || '';
|
|||
|
|
const city = address.city_name || address.cityName || address.city || '';
|
|||
|
|
const district = address.district_name || address.districtName || address.district || '';
|
|||
|
|
const detail = address.detail_address || address.detailAddress || address.detail || '';
|
|||
|
|
const isDefault = address.is_default || address.isDefault;
|
|||
|
|
const addressId = address.id || address.address_id || address.addressId;
|
|||
|
|
const isSelected = checkoutState.selectedAddress &&
|
|||
|
|
(checkoutState.selectedAddress.id === addressId ||
|
|||
|
|
checkoutState.selectedAddress.address_id === addressId ||
|
|||
|
|
checkoutState.selectedAddress.addressId === addressId);
|
|||
|
|
|
|||
|
|
return `
|
|||
|
|
<div class="address-item ${isSelected ? 'selected' : ''}" data-address-id="${addressId}">
|
|||
|
|
<div class="address-content">
|
|||
|
|
<div class="address-header">
|
|||
|
|
<div class="address-user">
|
|||
|
|
<span class="user-name">${name}</span>
|
|||
|
|
<span class="user-phone">${phone}</span>
|
|||
|
|
</div>
|
|||
|
|
${isDefault ? '<span class="tag tag-default">默认</span>' : ''}
|
|||
|
|
</div>
|
|||
|
|
<div class="address-detail">${province} ${city} ${district} ${detail}</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="address-operations">
|
|||
|
|
<button class="btn-icon-action btn-edit-address" data-address-id="${addressId}" title="编辑" onclick="event.stopPropagation()">
|
|||
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|||
|
|
<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
|
|||
|
|
<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
|
|||
|
|
</svg>
|
|||
|
|
</button>
|
|||
|
|
<button class="btn-icon-action btn-delete-address" data-address-id="${addressId}" title="删除" onclick="event.stopPropagation()">
|
|||
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|||
|
|
<polyline points="3 6 5 6 21 6"></polyline>
|
|||
|
|
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
|
|||
|
|
</svg>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
${isSelected ? '<div class="address-selected-icon">✓</div>' : ''}
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
}).join('');
|
|||
|
|
|
|||
|
|
$('#addressList').html(addressHtml);
|
|||
|
|
|
|||
|
|
// 绑定地址选择事件
|
|||
|
|
$('.address-item').on('click', function() {
|
|||
|
|
const addressId = $(this).data('address-id');
|
|||
|
|
const address = checkoutState.addresses.find(addr =>
|
|||
|
|
(addr.id == addressId || addr.address_id == addressId || addr.addressId == addressId)
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
if (address) {
|
|||
|
|
checkoutState.selectedAddress = address;
|
|||
|
|
renderSelectedAddress(address);
|
|||
|
|
hideAddressModal();
|
|||
|
|
|
|||
|
|
// 重新加载优惠券（地址可能影响可用优惠券）
|
|||
|
|
loadCoupons();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 绑定编辑按钮事件
|
|||
|
|
$('.btn-edit-address').on('click', function(e) {
|
|||
|
|
e.stopPropagation();
|
|||
|
|
const addressId = $(this).data('address-id');
|
|||
|
|
const address = checkoutState.addresses.find(addr =>
|
|||
|
|
(addr.id == addressId || addr.address_id == addressId || addr.addressId == addressId)
|
|||
|
|
);
|
|||
|
|
if (address) {
|
|||
|
|
editAddress(address);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 绑定删除按钮事件
|
|||
|
|
$('.btn-delete-address').on('click', function(e) {
|
|||
|
|
e.stopPropagation();
|
|||
|
|
const addressId = $(this).data('address-id');
|
|||
|
|
deleteAddress(addressId);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 显示优惠券选择弹窗
|
|||
|
|
function showCouponModal() {
|
|||
|
|
renderCouponList();
|
|||
|
|
$('#couponModal').addClass('show');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function hideCouponModal() {
|
|||
|
|
$('#couponModal').removeClass('show');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 渲染优惠券列表
|
|||
|
|
function renderCouponList() {
|
|||
|
|
if (checkoutState.coupons.length === 0) {
|
|||
|
|
$('#couponList').html(`
|
|||
|
|
<div style="text-align: center; padding: 40px 20px; color: var(--text-light);">
|
|||
|
|
<p>暂无可用优惠券</p>
|
|||
|
|
</div>
|
|||
|
|
`);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const couponHtml = checkoutState.coupons.map(coupon => {
|
|||
|
|
const name = coupon.coupon_name || coupon.name || '优惠券';
|
|||
|
|
const discount = parseInt(coupon.discount_amount || 0);
|
|||
|
|
const minAmount = parseInt(coupon.min_amount || 0);
|
|||
|
|
const isSelected = checkoutState.selectedCoupon &&
|
|||
|
|
checkoutState.selectedCoupon.coupon_id === coupon.coupon_id;
|
|||
|
|
|
|||
|
|
return `
|
|||
|
|
<div class="coupon-item ${isSelected ? 'selected' : ''}" data-coupon-id="${coupon.coupon_id}">
|
|||
|
|
<div class="coupon-left">
|
|||
|
|
<div class="coupon-discount">￥${PriceUtils.fenToYuan(discount).toFixed(0)}</div>
|
|||
|
|
<div class="coupon-condition">
|
|||
|
|
${minAmount > 0 ? `满￥${PriceUtils.fenToYuan(minAmount).toFixed(0)}可用` : '无门槛'}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="coupon-right">
|
|||
|
|
<div class="coupon-name">${name}</div>
|
|||
|
|
<div class="coupon-validity">
|
|||
|
|
${formatCouponDate(coupon.start_time, coupon.end_time)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
${isSelected ? '<div class="coupon-selected-icon">✓</div>' : ''}
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
}).join('');
|
|||
|
|
|
|||
|
|
// 添加“不使用优惠券”选项
|
|||
|
|
const noCouponHtml = `
|
|||
|
|
<div class="coupon-item ${!checkoutState.selectedCoupon ? 'selected' : ''}" data-coupon-id="">
|
|||
|
|
<div class="coupon-left">
|
|||
|
|
<div class="coupon-discount" style="font-size: 16px;">不使用</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="coupon-right">
|
|||
|
|
<div class="coupon-name">不使用优惠券</div>
|
|||
|
|
</div>
|
|||
|
|
${!checkoutState.selectedCoupon ? '<div class="coupon-selected-icon">✓</div>' : ''}
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
|
|||
|
|
$('#couponList').html(noCouponHtml + couponHtml);
|
|||
|
|
|
|||
|
|
// 绑定优惠券选择事件
|
|||
|
|
$('.coupon-item').on('click', function() {
|
|||
|
|
const couponId = $(this).data('coupon-id');
|
|||
|
|
|
|||
|
|
if (couponId) {
|
|||
|
|
const coupon = checkoutState.coupons.find(c => c.coupon_id === couponId);
|
|||
|
|
checkoutState.selectedCoupon = coupon || null;
|
|||
|
|
} else {
|
|||
|
|
checkoutState.selectedCoupon = null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 重新渲染列表显示选中状态
|
|||
|
|
renderCouponList();
|
|||
|
|
|
|||
|
|
// 更新优惠券显示
|
|||
|
|
updateCouponDisplay();
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 格式化优惠券日期
|
|||
|
|
function formatCouponDate(startTime, endTime) {
|
|||
|
|
if (!endTime) return '';
|
|||
|
|
|
|||
|
|
const end = new Date(endTime);
|
|||
|
|
return `有效期至 ${end.getFullYear()}-${String(end.getMonth() + 1).padStart(2, '0')}-${String(end.getDate()).padStart(2, '0')}`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 显示新增地址弹窗
|
|||
|
|
function showAddAddressModal() {
|
|||
|
|
// 清空表单
|
|||
|
|
$('#addAddressForm')[0].reset();
|
|||
|
|
|
|||
|
|
// 初始化省份选择器
|
|||
|
|
initProvinceSelector();
|
|||
|
|
|
|||
|
|
// 禁用城市和区县选择器
|
|||
|
|
$('#newAddressCity').prop('disabled', true).html('<option value="">请选择城市</option>');
|
|||
|
|
$('#newAddressDistrict').prop('disabled', true).html('<option value="">请选择区县</option>');
|
|||
|
|
|
|||
|
|
// 绑定级联事件
|
|||
|
|
bindRegionCascade();
|
|||
|
|
|
|||
|
|
// 绑定字数统计
|
|||
|
|
bindCharCount();
|
|||
|
|
|
|||
|
|
$('#addAddressModal').addClass('show');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function hideAddAddressModal() {
|
|||
|
|
$('#addAddressModal').removeClass('show');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 初始化省份选择器
|
|||
|
|
function initProvinceSelector() {
|
|||
|
|
const provinceSelect = $('#newAddressProvince');
|
|||
|
|
provinceSelect.html('<option value="">请选择省份</option>');
|
|||
|
|
|
|||
|
|
ChinaRegions.provinces.forEach(province => {
|
|||
|
|
provinceSelect.append(`<option value="${province.code}" data-name="${province.name}">${province.name}</option>`);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 绑定级联事件
|
|||
|
|
function bindRegionCascade() {
|
|||
|
|
// 省份变化
|
|||
|
|
$('#newAddressProvince').off('change').on('change', function() {
|
|||
|
|
const provinceCode = $(this).val();
|
|||
|
|
const citySelect = $('#newAddressCity');
|
|||
|
|
const districtSelect = $('#newAddressDistrict');
|
|||
|
|
|
|||
|
|
if (provinceCode) {
|
|||
|
|
const cities = ChinaRegions.getCities(provinceCode);
|
|||
|
|
citySelect.html('<option value="">请选择城市</option>');
|
|||
|
|
|
|||
|
|
cities.forEach(city => {
|
|||
|
|
citySelect.append(`<option value="${city.code}" data-name="${city.name}">${city.name}</option>`);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
citySelect.prop('disabled', false);
|
|||
|
|
districtSelect.html('<option value="">请选择区县</option>').prop('disabled', true);
|
|||
|
|
} else {
|
|||
|
|
citySelect.html('<option value="">请选择城市</option>').prop('disabled', true);
|
|||
|
|
districtSelect.html('<option value="">请选择区县</option>').prop('disabled', true);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 城市变化
|
|||
|
|
$('#newAddressCity').off('change').on('change', function() {
|
|||
|
|
const cityCode = $(this).val();
|
|||
|
|
const districtSelect = $('#newAddressDistrict');
|
|||
|
|
|
|||
|
|
if (cityCode) {
|
|||
|
|
const districts = ChinaRegions.getDistricts(cityCode);
|
|||
|
|
districtSelect.html('<option value="">请选择区县</option>');
|
|||
|
|
|
|||
|
|
if (districts.length > 0) {
|
|||
|
|
districts.forEach(district => {
|
|||
|
|
districtSelect.append(`<option value="${district.code}" data-name="${district.name}">${district.name}</option>`);
|
|||
|
|
});
|
|||
|
|
districtSelect.prop('disabled', false);
|
|||
|
|
} else {
|
|||
|
|
// 没有区县数据时，也启用选择器，但显示提示
|
|||
|
|
districtSelect.html('<option value="000000">市辖区</option>');
|
|||
|
|
districtSelect.prop('disabled', false);
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
districtSelect.html('<option value="">请选择区县</option>').prop('disabled', true);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 绑定字数统计
|
|||
|
|
function bindCharCount() {
|
|||
|
|
$('#newAddressDetail').off('input').on('input', function() {
|
|||
|
|
const length = $(this).val().length;
|
|||
|
|
$('#detailCharCount').text(length);
|
|||
|
|
|
|||
|
|
if (length > 100) {
|
|||
|
|
$(this).val($(this).val().substring(0, 100));
|
|||
|
|
$('#detailCharCount').text(100);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 保存新地址
|
|||
|
|
function saveNewAddress() {
|
|||
|
|
const name = $('#newAddressName').val().trim();
|
|||
|
|
const phone = $('#newAddressPhone').val().trim();
|
|||
|
|
const provinceSelect = $('#newAddressProvince');
|
|||
|
|
const citySelect = $('#newAddressCity');
|
|||
|
|
const districtSelect = $('#newAddressDistrict');
|
|||
|
|
|
|||
|
|
const provinceCode = provinceSelect.val();
|
|||
|
|
const provinceName = provinceSelect.find('option:selected').data('name') || provinceSelect.find('option:selected').text();
|
|||
|
|
const cityCode = citySelect.val();
|
|||
|
|
const cityName = citySelect.find('option:selected').data('name') || citySelect.find('option:selected').text();
|
|||
|
|
const districtCode = districtSelect.val();
|
|||
|
|
const districtName = districtSelect.find('option:selected').data('name') || districtSelect.find('option:selected').text();
|
|||
|
|
|
|||
|
|
const detail = $('#newAddressDetail').val().trim();
|
|||
|
|
const isDefault = $('#newAddressIsDefault').is(':checked');
|
|||
|
|
|
|||
|
|
// 验证
|
|||
|
|
if (!name) {
|
|||
|
|
Toast.error('请输入收货人姓名');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (!phone) {
|
|||
|
|
Toast.error('请输入联系电话');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 验证手机号格式
|
|||
|
|
const phoneRegex = /^1[3-9]\d{9}$/;
|
|||
|
|
if (!phoneRegex.test(phone)) {
|
|||
|
|
Toast.error('请输入11位有效的手机号');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (!provinceCode || !cityCode || !districtCode) {
|
|||
|
|
Toast.error('请选择完整的所在地区');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (!detail) {
|
|||
|
|
Toast.error('请输入详细地址');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (detail.length < 5) {
|
|||
|
|
Toast.error('详细地址至少需要5个字符');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 调用 API 保存地址
|
|||
|
|
API.post('/users/addresses', {
|
|||
|
|
name: name,
|
|||
|
|
phone: phone,
|
|||
|
|
province: provinceName,
|
|||
|
|
city: cityName,
|
|||
|
|
district: districtName,
|
|||
|
|
detail: detail,
|
|||
|
|
is_default: isDefault ? 1 : 0
|
|||
|
|
})
|
|||
|
|
.then(data => {
|
|||
|
|
Toast.success('地址保存成功');
|
|||
|
|
hideAddAddressModal();
|
|||
|
|
|
|||
|
|
// 重新加载地址列表
|
|||
|
|
loadAddresses();
|
|||
|
|
})
|
|||
|
|
.catch(error => {
|
|||
|
|
console.error('保存地址失败:', error);
|
|||
|
|
Toast.error(error.message || '保存失败');
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 提交订单
|
|||
|
|
function submitOrder() {
|
|||
|
|
// 验证
|
|||
|
|
if (!checkoutState.selectedAddress) {
|
|||
|
|
Toast.error('请选择收货地址');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (checkoutState.cartItems.length === 0) {
|
|||
|
|
Toast.error('购物车是空的');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 获取订单备注
|
|||
|
|
checkoutState.orderNotes = $('#orderNotes').val().trim();
|
|||
|
|
|
|||
|
|
// 显示加载状态
|
|||
|
|
const payBtn = $('#payNowBtn');
|
|||
|
|
const originalText = payBtn.html();
|
|||
|
|
payBtn.prop('disabled', true).html('<span>提交中...</span>');
|
|||
|
|
|
|||
|
|
// 获取地址ID - 支持多种字段名，转换为数字类型
|
|||
|
|
const addressId = parseInt(
|
|||
|
|
checkoutState.selectedAddress.id ||
|
|||
|
|
checkoutState.selectedAddress.address_id ||
|
|||
|
|
checkoutState.selectedAddress.addressId
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
// 构造订单数据
|
|||
|
|
const orderData = {
|
|||
|
|
address_id: addressId, // 确保是数字类型
|
|||
|
|
coupon_id: checkoutState.selectedCoupon ? parseInt(checkoutState.selectedCoupon.coupon_id) : null,
|
|||
|
|
remark: checkoutState.orderNotes,
|
|||
|
|
items: checkoutState.cartItems.map(item => ({
|
|||
|
|
product_id: parseInt(item.product_id),
|
|||
|
|
sku_id: item.sku_id ? parseInt(item.sku_id) : null,
|
|||
|
|
quantity: parseInt(item.quantity)
|
|||
|
|
}))
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
console.log('订单数据:', orderData);
|
|||
|
|
console.log('结算类型:', checkoutState.checkoutType);
|
|||
|
|
|
|||
|
|
// 调用创建订单 API
|
|||
|
|
API.post('/orders', orderData)
|
|||
|
|
.then(data => {
|
|||
|
|
console.log('订单创建成功:', data);
|
|||
|
|
|
|||
|
|
const orderId = data.data?.order_id || data.order_id || data.data?.orderId || data.orderId;
|
|||
|
|
|
|||
|
|
Toast.success('订单创建成功！');
|
|||
|
|
|
|||
|
|
// 恢复按钮状态
|
|||
|
|
payBtn.prop('disabled', false).html(originalText);
|
|||
|
|
|
|||
|
|
// 清空购物车（后端已清空）
|
|||
|
|
if (window.cart && window.cart.updateCartCount) {
|
|||
|
|
window.cart.updateCartCount();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 根据支付方式处理
|
|||
|
|
if (checkoutState.paymentMethod === 'wechat' && orderId) {
|
|||
|
|
// 微信支付，展示二维码
|
|||
|
|
showWechatPayment(orderId);
|
|||
|
|
} else {
|
|||
|
|
// 其他支付方式或无订单ID，跳转到订单详情
|
|||
|
|
setTimeout(() => {
|
|||
|
|
if (orderId) {
|
|||
|
|
window.location.href = `order-detail.html?id=${orderId}`;
|
|||
|
|
} else {
|
|||
|
|
window.location.href = 'user-center.html#orders';
|
|||
|
|
}
|
|||
|
|
}, 1000);
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
.catch(error => {
|
|||
|
|
console.error('订单创建失败:', error);
|
|||
|
|
Toast.error(error.message || '订单创建失败');
|
|||
|
|
|
|||
|
|
// 恢复按钮状态
|
|||
|
|
payBtn.prop('disabled', false).html(originalText);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 编辑地址
|
|||
|
|
function editAddress(address) {
|
|||
|
|
// 隐藏地址选择弹窗
|
|||
|
|
hideAddressModal();
|
|||
|
|
|
|||
|
|
// 填充表单数据
|
|||
|
|
const name = address.receiver_name || address.name || '';
|
|||
|
|
const phone = address.receiver_phone || address.phone || '';
|
|||
|
|
const province = address.province_name || address.provinceName || address.province || '';
|
|||
|
|
const city = address.city_name || address.cityName || address.city || '';
|
|||
|
|
const district = address.district_name || address.districtName || address.district || '';
|
|||
|
|
const detail = address.detail_address || address.detailAddress || address.detail || '';
|
|||
|
|
const isDefault = address.is_default || address.isDefault;
|
|||
|
|
const addressId = address.id || address.address_id || address.addressId;
|
|||
|
|
|
|||
|
|
$('#newAddressName').val(name);
|
|||
|
|
$('#newAddressPhone').val(phone);
|
|||
|
|
$('#newAddressDetail').val(detail);
|
|||
|
|
$('#newAddressIsDefault').prop('checked', isDefault);
|
|||
|
|
|
|||
|
|
// 初始化省份选择器
|
|||
|
|
initProvinceSelector();
|
|||
|
|
|
|||
|
|
// 绑定级联事件
|
|||
|
|
bindRegionCascade();
|
|||
|
|
|
|||
|
|
// 绑定字数统计
|
|||
|
|
bindCharCount();
|
|||
|
|
|
|||
|
|
// 更新字数显示
|
|||
|
|
$('#detailCharCount').text(detail.length);
|
|||
|
|
|
|||
|
|
// TODO: 需要根据省市区名称反查 code，然后设置选中
|
|||
|
|
// 这里简化处理，直接根据名称匹配
|
|||
|
|
setTimeout(() => {
|
|||
|
|
// 设置省份
|
|||
|
|
const provinceOption = $('#newAddressProvince option').filter(function() {
|
|||
|
|
return $(this).data('name') === province || $(this).text() === province;
|
|||
|
|
});
|
|||
|
|
if (provinceOption.length > 0) {
|
|||
|
|
$('#newAddressProvince').val(provinceOption.val()).trigger('change');
|
|||
|
|
|
|||
|
|
// 等待城市加载后设置
|
|||
|
|
setTimeout(() => {
|
|||
|
|
const cityOption = $('#newAddressCity option').filter(function() {
|
|||
|
|
return $(this).data('name') === city || $(this).text() === city;
|
|||
|
|
});
|
|||
|
|
if (cityOption.length > 0) {
|
|||
|
|
$('#newAddressCity').val(cityOption.val()).trigger('change');
|
|||
|
|
|
|||
|
|
// 等待区县加载后设置
|
|||
|
|
setTimeout(() => {
|
|||
|
|
const districtOption = $('#newAddressDistrict option').filter(function() {
|
|||
|
|
return $(this).data('name') === district || $(this).text() === district;
|
|||
|
|
});
|
|||
|
|
if (districtOption.length > 0) {
|
|||
|
|
$('#newAddressDistrict').val(districtOption.val());
|
|||
|
|
}
|
|||
|
|
}, 100);
|
|||
|
|
}
|
|||
|
|
}, 100);
|
|||
|
|
}
|
|||
|
|
}, 100);
|
|||
|
|
|
|||
|
|
// 修改按钮文字和事件
|
|||
|
|
$('#saveAddressBtn').text('保存修改').off('click').on('click', function() {
|
|||
|
|
updateAddress(addressId);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 显示弹窗
|
|||
|
|
$('#addAddressModal').addClass('show');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 更新地址
|
|||
|
|
function updateAddress(addressId) {
|
|||
|
|
const name = $('#newAddressName').val().trim();
|
|||
|
|
const phone = $('#newAddressPhone').val().trim();
|
|||
|
|
const provinceSelect = $('#newAddressProvince');
|
|||
|
|
const citySelect = $('#newAddressCity');
|
|||
|
|
const districtSelect = $('#newAddressDistrict');
|
|||
|
|
|
|||
|
|
const provinceCode = provinceSelect.val();
|
|||
|
|
const provinceName = provinceSelect.find('option:selected').data('name') || provinceSelect.find('option:selected').text();
|
|||
|
|
const cityCode = citySelect.val();
|
|||
|
|
const cityName = citySelect.find('option:selected').data('name') || citySelect.find('option:selected').text();
|
|||
|
|
const districtCode = districtSelect.val();
|
|||
|
|
const districtName = districtSelect.find('option:selected').data('name') || districtSelect.find('option:selected').text();
|
|||
|
|
|
|||
|
|
const detail = $('#newAddressDetail').val().trim();
|
|||
|
|
const isDefault = $('#newAddressIsDefault').is(':checked');
|
|||
|
|
|
|||
|
|
// 验证
|
|||
|
|
if (!name) {
|
|||
|
|
Toast.error('请输入收货人姓名');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (!phone) {
|
|||
|
|
Toast.error('请输入联系电话');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 验证手机号格式
|
|||
|
|
const phoneRegex = /^1[3-9]\d{9}$/;
|
|||
|
|
if (!phoneRegex.test(phone)) {
|
|||
|
|
Toast.error('请输入11位有效的手机号');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (!provinceCode || !cityCode || !districtCode) {
|
|||
|
|
Toast.error('请选择完整的所在地区');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (!detail) {
|
|||
|
|
Toast.error('请输入详细地址');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (detail.length < 5) {
|
|||
|
|
Toast.error('详细地址至少需要5个字符');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 调用 API 更新地址
|
|||
|
|
API.put(`/users/addresses/${addressId}`, {
|
|||
|
|
name: name,
|
|||
|
|
phone: phone,
|
|||
|
|
province: provinceName,
|
|||
|
|
city: cityName,
|
|||
|
|
district: districtName,
|
|||
|
|
detail: detail,
|
|||
|
|
is_default: isDefault ? 1 : 0
|
|||
|
|
})
|
|||
|
|
.then(data => {
|
|||
|
|
Toast.success('地址更新成功');
|
|||
|
|
hideAddAddressModal();
|
|||
|
|
|
|||
|
|
// 恢复按钮为新增模式
|
|||
|
|
$('#saveAddressBtn').text('保存').off('click').on('click', function() {
|
|||
|
|
saveNewAddress();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 重新加载地址列表
|
|||
|
|
loadAddresses();
|
|||
|
|
})
|
|||
|
|
.catch(error => {
|
|||
|
|
console.error('更新地址失败:', error);
|
|||
|
|
Toast.error(error.message || '更新失败');
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 删除地址
|
|||
|
|
function deleteAddress(addressId) {
|
|||
|
|
Toast.confirm({
|
|||
|
|
title: '确认删除',
|
|||
|
|
message: '确定要删除这个地址吗？',
|
|||
|
|
confirmText: '删除',
|
|||
|
|
cancelText: '取消',
|
|||
|
|
confirmColor: '#ff6b6b'
|
|||
|
|
}).then(confirmed => {
|
|||
|
|
if (confirmed) {
|
|||
|
|
API.delete(`/users/addresses/${addressId}`)
|
|||
|
|
.then(() => {
|
|||
|
|
Toast.success('地址删除成功');
|
|||
|
|
|
|||
|
|
// 如果删除的是当前选中的地址，清空选中状态
|
|||
|
|
if (checkoutState.selectedAddress &&
|
|||
|
|
(checkoutState.selectedAddress.id == addressId ||
|
|||
|
|
checkoutState.selectedAddress.address_id == addressId ||
|
|||
|
|
checkoutState.selectedAddress.addressId == addressId)) {
|
|||
|
|
checkoutState.selectedAddress = null;
|
|||
|
|
$('#noAddress').show();
|
|||
|
|
$('#addressInfo').hide();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 重新加载地址列表
|
|||
|
|
loadAddresses();
|
|||
|
|
})
|
|||
|
|
.catch(error => {
|
|||
|
|
console.error('删除地址失败:', error);
|
|||
|
|
Toast.error(error.message || '删除失败');
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ===================== 支付相关 =====================
|
|||
|
|
|
|||
|
|
// 显示微信支付弹窗
|
|||
|
|
function showWechatPayment(orderId) {
|
|||
|
|
console.log('开始微信支付流程，订单ID:', orderId);
|
|||
|
|
|
|||
|
|
// 计算总金额
|
|||
|
|
const totalAmount = calculateTotalAmount();
|
|||
|
|
|
|||
|
|
// 显示支付金额
|
|||
|
|
$('#paymentAmount').text(`￥${PriceUtils.fenToYuan(totalAmount).toFixed(2)}`);
|
|||
|
|
|
|||
|
|
// 显示弹窗
|
|||
|
|
$('#paymentModal').addClass('show');
|
|||
|
|
|
|||
|
|
// 调用支付 API 获取二维码
|
|||
|
|
API.post(`/orders/${orderId}/pay`, {
|
|||
|
|
payment_method: 'wechat'
|
|||
|
|
})
|
|||
|
|
.then(data => {
|
|||
|
|
console.log('支付响应:', data);
|
|||
|
|
|
|||
|
|
// 支持多种数据格式
|
|||
|
|
const paymentData = data.data || data;
|
|||
|
|
const qrcodeUrl = paymentData.qrcode_url || paymentData.qrcodeUrl || paymentData.code_url || paymentData.codeUrl;
|
|||
|
|
|
|||
|
|
if (qrcodeUrl) {
|
|||
|
|
// 显示二维码
|
|||
|
|
displayQRCode(qrcodeUrl);
|
|||
|
|
|
|||
|
|
// 开始轮询支付状态
|
|||
|
|
startPaymentPolling(orderId);
|
|||
|
|
|
|||
|
|
// 开始倒计时（5分钟）
|
|||
|
|
startCountdown(300);
|
|||
|
|
} else {
|
|||
|
|
Toast.error('获取支付二维码失败');
|
|||
|
|
hidePaymentModal();
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
.catch(error => {
|
|||
|
|
console.error('创建支付失败:', error);
|
|||
|
|
Toast.error(error.message || '创建支付失败');
|
|||
|
|
hidePaymentModal();
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 显示二维码
|
|||
|
|
function displayQRCode(url) {
|
|||
|
|
// 替换 loading 为二维码图片
|
|||
|
|
$('#qrcodeContainer').html(`
|
|||
|
|
<img src="${url}" alt="微信支付二维码" />
|
|||
|
|
`);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 开始轮询支付状态
|
|||
|
|
function startPaymentPolling(orderId) {
|
|||
|
|
// 清除之前的定时器
|
|||
|
|
if (checkoutState.paymentTimer) {
|
|||
|
|
clearInterval(checkoutState.paymentTimer);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 每 2 秒查询一次
|
|||
|
|
checkoutState.paymentTimer = setInterval(() => {
|
|||
|
|
checkPaymentStatus(orderId);
|
|||
|
|
}, 2000);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 检查支付状态
|
|||
|
|
function checkPaymentStatus(orderId) {
|
|||
|
|
API.get(`/orders/${orderId}/payment/status`)
|
|||
|
|
.then(data => {
|
|||
|
|
const status = data.data?.status || data.status;
|
|||
|
|
|
|||
|
|
console.log('支付状态:', status);
|
|||
|
|
|
|||
|
|
if (status === 'paid' || status === 'success') {
|
|||
|
|
// 支付成功
|
|||
|
|
handlePaymentSuccess(orderId);
|
|||
|
|
} else if (status === 'failed' || status === 'cancelled') {
|
|||
|
|
// 支付失败
|
|||
|
|
handlePaymentFailure();
|
|||
|
|
}
|
|||
|
|
// 其他状态继续轮询
|
|||
|
|
})
|
|||
|
|
.catch(error => {
|
|||
|
|
console.error('查询支付状态失败:', error);
|
|||
|
|
// 继续轮询，不中断
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 支付成功处理
|
|||
|
|
function handlePaymentSuccess(orderId) {
|
|||
|
|
// 停止轮询
|
|||
|
|
clearInterval(checkoutState.paymentTimer);
|
|||
|
|
clearInterval(checkoutState.countdownTimer);
|
|||
|
|
|
|||
|
|
// 显示成功消息
|
|||
|
|
Toast.success('支付成功！');
|
|||
|
|
|
|||
|
|
// 关闭弹窗
|
|||
|
|
hidePaymentModal();
|
|||
|
|
|
|||
|
|
// 跳转到订单详情
|
|||
|
|
setTimeout(() => {
|
|||
|
|
window.location.href = `order-detail.html?id=${orderId}`;
|
|||
|
|
}, 1000);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 支付失败处理
|
|||
|
|
function handlePaymentFailure() {
|
|||
|
|
// 停止轮询
|
|||
|
|
clearInterval(checkoutState.paymentTimer);
|
|||
|
|
clearInterval(checkoutState.countdownTimer);
|
|||
|
|
|
|||
|
|
// 显示失败消息
|
|||
|
|
Toast.error('支付失败，请重试');
|
|||
|
|
|
|||
|
|
// 关闭弹窗
|
|||
|
|
hidePaymentModal();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 开始倒计时
|
|||
|
|
function startCountdown(seconds) {
|
|||
|
|
// 清除之前的定时器
|
|||
|
|
if (checkoutState.countdownTimer) {
|
|||
|
|
clearInterval(checkoutState.countdownTimer);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
let remainingSeconds = seconds;
|
|||
|
|
|
|||
|
|
// 更新显示
|
|||
|
|
updateCountdownDisplay(remainingSeconds);
|
|||
|
|
|
|||
|
|
// 每秒更新
|
|||
|
|
checkoutState.countdownTimer = setInterval(() => {
|
|||
|
|
remainingSeconds--;
|
|||
|
|
|
|||
|
|
if (remainingSeconds <= 0) {
|
|||
|
|
// 倒计时结束
|
|||
|
|
clearInterval(checkoutState.countdownTimer);
|
|||
|
|
clearInterval(checkoutState.paymentTimer);
|
|||
|
|
|
|||
|
|
Toast.warning('二维码已过期，请重新生成');
|
|||
|
|
hidePaymentModal();
|
|||
|
|
} else {
|
|||
|
|
updateCountdownDisplay(remainingSeconds);
|
|||
|
|
}
|
|||
|
|
}, 1000);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 更新倒计时显示
|
|||
|
|
function updateCountdownDisplay(seconds) {
|
|||
|
|
const minutes = Math.floor(seconds / 60);
|
|||
|
|
const secs = seconds % 60;
|
|||
|
|
$('#countdownTime').text(`${minutes}:${String(secs).padStart(2, '0')}`);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 隐藏支付弹窗
|
|||
|
|
function hidePaymentModal() {
|
|||
|
|
// 清除定时器
|
|||
|
|
if (checkoutState.paymentTimer) {
|
|||
|
|
clearInterval(checkoutState.paymentTimer);
|
|||
|
|
checkoutState.paymentTimer = null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (checkoutState.countdownTimer) {
|
|||
|
|
clearInterval(checkoutState.countdownTimer);
|
|||
|
|
checkoutState.countdownTimer = null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 关闭弹窗
|
|||
|
|
$('#paymentModal').removeClass('show');
|
|||
|
|
|
|||
|
|
// 重置二维码区域
|
|||
|
|
$('#qrcodeContainer').html(`
|
|||
|
|
<div class="qrcode-loading">
|
|||
|
|
<div class="spinner"></div>
|
|||
|
|
<p>正在生成二维码...</p>
|
|||
|
|
</div>
|
|||
|
|
`);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 计算总金额
|
|||
|
|
function calculateTotalAmount() {
|
|||
|
|
// 计算商品总额
|
|||
|
|
const subtotal = checkoutState.cartItems.reduce((sum, item) => {
|
|||
|
|
const price = parseInt(
|
|||
|
|
item.price ||
|
|||
|
|
item.sale_price ||
|
|||
|
|
item.salePrice ||
|
|||
|
|
(item.sku && item.sku.price) ||
|
|||
|
|
(item.product && item.product.price) ||
|
|||
|
|
0
|
|||
|
|
);
|
|||
|
|
const quantity = item.quantity || 1;
|
|||
|
|
return sum + (price * quantity);
|
|||
|
|
}, 0);
|
|||
|
|
|
|||
|
|
// 运费
|
|||
|
|
const shippingFee = subtotal >= 5900 ? 0 : 0;
|
|||
|
|
|
|||
|
|
// 优惠券优惠
|
|||
|
|
const couponAmount = checkoutState.selectedCoupon ?
|
|||
|
|
parseInt(checkoutState.selectedCoupon.discount_amount || 0) : 0;
|
|||
|
|
|
|||
|
|
// 总金额
|
|||
|
|
return subtotal + shippingFee - couponAmount;
|
|||
|
|
}
|