739 lines
15 KiB
Plaintext
739 lines
15 KiB
Plaintext
<!-- 结算页面 -->
|
||
<template>
|
||
<view class="checkout-page">
|
||
<!-- 顶部栏 -->
|
||
<view class="checkout-header">
|
||
<text class="back-btn" @click="goBack">‹</text>
|
||
<text class="header-title">订单结算</text>
|
||
</view>
|
||
|
||
<scroll-view class="checkout-content" scroll-y>
|
||
<!-- 收货地址 -->
|
||
<view class="address-section" @click="selectAddress">
|
||
<view v-if="selectedAddress" class="address-info">
|
||
<view class="address-header">
|
||
<text class="recipient">{{ selectedAddress.recipient_name }}</text>
|
||
<text class="phone">{{ selectedAddress.phone }}</text>
|
||
<view v-if="selectedAddress.is_default" class="default-tag">
|
||
<text class="tag-text">默认</text>
|
||
</view>
|
||
</view>
|
||
<text class="address-detail">{{ getFullAddress(selectedAddress) }}</text>
|
||
</view>
|
||
<view v-else class="no-address">
|
||
<text class="no-address-text">请选择收货地址</text>
|
||
<text class="no-address-arrow">›</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 商品列表 -->
|
||
<view class="products-section">
|
||
<view v-for="item in checkoutItems" :key="item.id" class="product-item">
|
||
<image class="product-image" :src="item.product_image" />
|
||
<view class="product-info">
|
||
<text class="product-name">{{ item.product_name }}</text>
|
||
<text v-if="item.sku_specifications" class="product-spec">{{ getSpecText(item.sku_specifications) }}</text>
|
||
<view class="product-bottom">
|
||
<text class="product-price">¥{{ item.price }}</text>
|
||
<text class="product-quantity">×{{ item.quantity }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 配送方式 -->
|
||
<view class="delivery-section">
|
||
<text class="section-title">配送方式</text>
|
||
<view class="delivery-options">
|
||
<view v-for="option in deliveryOptions"
|
||
:key="option.id"
|
||
:class="['delivery-option', { selected: selectedDelivery === option.id }]"
|
||
@click="selectDelivery(option)">
|
||
<text class="option-name">{{ option.name }}</text>
|
||
<text class="option-price">¥{{ option.price }}</text>
|
||
<text v-if="selectedDelivery === option.id" class="option-selected">✓</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 优惠券 -->
|
||
<view class="coupon-section" @click="selectCoupon">
|
||
<text class="section-title">优惠券</text>
|
||
<view class="coupon-info">
|
||
<text v-if="selectedCoupon" class="coupon-selected">{{ selectedCoupon.template?.name || '优惠券' }}</text>
|
||
<text v-else class="coupon-placeholder">选择优惠券</text>
|
||
<text class="coupon-arrow">›</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 买家留言 -->
|
||
<view class="remark-section">
|
||
<text class="section-title">买家留言</text>
|
||
<textarea class="remark-input"
|
||
v-model="remark"
|
||
placeholder="选填，请先和商家协商一致"
|
||
maxlength="100" />
|
||
</view>
|
||
|
||
<!-- 价格明细 -->
|
||
<view class="price-section">
|
||
<text class="section-title">价格明细</text>
|
||
<view class="price-detail">
|
||
<view class="price-row">
|
||
<text class="price-label">商品总价</text>
|
||
<text class="price-value">¥{{ totalAmount.toFixed(2) }}</text>
|
||
</view>
|
||
<view class="price-row">
|
||
<text class="price-label">运费</text>
|
||
<text class="price-value">+¥{{ deliveryFee.toFixed(2) }}</text>
|
||
</view>
|
||
<view v-if="discountAmount > 0" class="price-row">
|
||
<text class="price-label">优惠减免</text>
|
||
<text class="price-value discount">-¥{{ discountAmount.toFixed(2) }}</text>
|
||
</view>
|
||
<view class="price-row total">
|
||
<text class="price-label">应付金额</text>
|
||
<text class="price-value total-price">¥{{ actualAmount.toFixed(2) }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
|
||
<!-- 底部结算栏 -->
|
||
<view class="bottom-bar">
|
||
<view class="price-summary">
|
||
<text class="summary-label">合计:</text>
|
||
<text class="summary-price">¥{{ actualAmount.toFixed(2) }}</text>
|
||
</view>
|
||
<button class="submit-btn" @click="submitOrder">提交订单</button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="uts">
|
||
import { ref, onMounted, computed } from 'vue'
|
||
import supa from '@/components/supadb/aksupainstance.uts'
|
||
|
||
type CheckoutItemType = {
|
||
id: string
|
||
product_id: string
|
||
sku_id: string
|
||
product_name: string
|
||
product_image: string
|
||
sku_specifications: any
|
||
price: number
|
||
quantity: number
|
||
}
|
||
|
||
type DeliveryOptionType = {
|
||
id: string
|
||
name: string
|
||
price: number
|
||
description: string
|
||
}
|
||
|
||
type UserCouponType = {
|
||
id: string
|
||
template: {
|
||
name: string
|
||
discount_value: number
|
||
min_order_amount: number
|
||
} | null
|
||
}
|
||
|
||
const checkoutItems = ref<Array<CheckoutItemType>>([])
|
||
const selectedAddress = ref<any>(null)
|
||
const deliveryOptions = ref<Array<DeliveryOptionType>>([
|
||
{ id: 'standard', name: '快递配送', price: 8.00, description: '1-3天送达' },
|
||
{ id: 'express', name: '加急配送', price: 15.00, description: '当天送达' }
|
||
])
|
||
const selectedDelivery = ref<string>('standard')
|
||
const selectedCoupon = ref<UserCouponType | null>(null)
|
||
const remark = ref<string>('')
|
||
|
||
// 计算属性
|
||
const totalAmount = computed(() => {
|
||
return checkoutItems.value.reduce((sum, item) =>
|
||
sum + (item.price * item.quantity), 0)
|
||
})
|
||
|
||
const deliveryFee = computed(() => {
|
||
const option = deliveryOptions.value.find(opt => opt.id === selectedDelivery.value)
|
||
return option?.price || 0
|
||
})
|
||
|
||
const discountAmount = computed(() => {
|
||
if (!selectedCoupon.value || !selectedCoupon.value.template) return 0
|
||
|
||
const coupon = selectedCoupon.value.template
|
||
if (totalAmount.value < coupon.min_order_amount) return 0
|
||
|
||
// 简单处理：假设都是满减券
|
||
return coupon.discount_value
|
||
})
|
||
|
||
const actualAmount = computed(() => {
|
||
let amount = totalAmount.value + deliveryFee.value - discountAmount.value
|
||
return amount > 0 ? amount : 0
|
||
})
|
||
|
||
// 生命周期
|
||
onMounted(() => {
|
||
loadCheckoutData()
|
||
})
|
||
|
||
// 加载结算数据
|
||
const loadCheckoutData = () => {
|
||
// 从上一页获取数据
|
||
const eventChannel = uni.getEventChannel()
|
||
if (eventChannel) {
|
||
eventChannel.on('acceptData', (data: any) => {
|
||
checkoutItems.value = data.selectedItems || []
|
||
loadDefaultAddress()
|
||
})
|
||
}
|
||
}
|
||
|
||
// 加载默认地址
|
||
const loadDefaultAddress = async () => {
|
||
const userId = getCurrentUserId()
|
||
if (!userId) return
|
||
|
||
try {
|
||
const { data, error } = await supa
|
||
.from('user_addresses')
|
||
.select('*')
|
||
.eq('user_id', userId)
|
||
.eq('is_default', true)
|
||
.single()
|
||
|
||
if (error !== null) {
|
||
console.error('加载默认地址失败:', error)
|
||
return
|
||
}
|
||
|
||
selectedAddress.value = data
|
||
} catch (err) {
|
||
console.error('加载默认地址异常:', err)
|
||
}
|
||
}
|
||
|
||
// 获取当前用户ID
|
||
const getCurrentUserId = (): string => {
|
||
const userStore = uni.getStorageSync('userInfo')
|
||
return userStore?.id || ''
|
||
}
|
||
|
||
// 获取完整地址
|
||
const getFullAddress = (address: any): string => {
|
||
return `${address.province}${address.city}${address.district}${address.detail}`
|
||
}
|
||
|
||
// 获取规格文本
|
||
const getSpecText = (specs: any): string => {
|
||
if (!specs) return ''
|
||
if (typeof specs === 'object') {
|
||
return Object.keys(specs)
|
||
.map(key => `${key}: ${specs[key]}`)
|
||
.join('; ')
|
||
}
|
||
return String(specs)
|
||
}
|
||
|
||
// 选择地址
|
||
const selectAddress = () => {
|
||
uni.navigateTo({
|
||
url: '/pages/mall/consumer/address',
|
||
events: {
|
||
addressSelected: (address: any) => {
|
||
selectedAddress.value = address
|
||
}
|
||
}
|
||
})
|
||
}
|
||
|
||
// 选择配送方式
|
||
const selectDelivery = (option: DeliveryOptionType) => {
|
||
selectedDelivery.value = option.id
|
||
}
|
||
|
||
// 选择优惠券
|
||
const selectCoupon = () => {
|
||
uni.navigateTo({
|
||
url: '/pages/mall/consumer/coupons',
|
||
success: (res) => {
|
||
res.eventChannel.emit('setSelectMode', { selectMode: true })
|
||
}
|
||
})
|
||
|
||
// 监听优惠券选择
|
||
uni.$on('couponSelected', (coupon: any) => {
|
||
selectedCoupon.value = coupon
|
||
uni.$off('couponSelected')
|
||
})
|
||
}
|
||
|
||
// 提交订单
|
||
const submitOrder = async () => {
|
||
if (!selectedAddress.value) {
|
||
uni.showToast({
|
||
title: '请选择收货地址',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
|
||
const userId = getCurrentUserId()
|
||
if (!userId) {
|
||
uni.showToast({
|
||
title: '用户信息错误',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
|
||
// 生成订单号
|
||
const orderNo = generateOrderNo()
|
||
|
||
const orderData = {
|
||
order_no: orderNo,
|
||
user_id: userId,
|
||
merchant_id: 'default', // 这里需要根据商品确定商家
|
||
status: 1, // 待支付
|
||
total_amount: totalAmount.value,
|
||
discount_amount: discountAmount.value,
|
||
delivery_fee: deliveryFee.value,
|
||
actual_amount: actualAmount.value,
|
||
payment_method: 0, // 待选择
|
||
payment_status: 0,
|
||
delivery_address: selectedAddress.value,
|
||
remark: remark.value,
|
||
created_at: new Date().toISOString()
|
||
}
|
||
|
||
try {
|
||
// 创建订单
|
||
const { data: order, error: orderError } = await supa
|
||
.from('orders')
|
||
.insert(orderData)
|
||
.select()
|
||
.single()
|
||
|
||
if (orderError !== null) {
|
||
throw orderError
|
||
}
|
||
|
||
// 创建订单商品项
|
||
const orderItems = checkoutItems.value.map(item => ({
|
||
order_id: order.id,
|
||
product_id: item.product_id,
|
||
sku_id: item.sku_id,
|
||
product_name: item.product_name,
|
||
sku_specifications: item.sku_specifications,
|
||
price: item.price,
|
||
quantity: item.quantity,
|
||
total_amount: item.price * item.quantity
|
||
}))
|
||
|
||
const { error: itemsError } = await supa
|
||
.from('order_items')
|
||
.insert(orderItems)
|
||
|
||
if (itemsError !== null) {
|
||
throw itemsError
|
||
}
|
||
|
||
// 使用优惠券
|
||
if (selectedCoupon.value) {
|
||
const { error: couponError } = await supa
|
||
.from('user_coupons')
|
||
.update({
|
||
status: 2, // 已使用
|
||
used_at: new Date().toISOString()
|
||
})
|
||
.eq('id', selectedCoupon.value.id)
|
||
|
||
if (couponError !== null) {
|
||
console.error('更新优惠券状态失败:', couponError)
|
||
}
|
||
}
|
||
|
||
// 清空购物车
|
||
await clearShoppingCart()
|
||
|
||
// 跳转到支付页面
|
||
uni.navigateTo({
|
||
url: `/pages/mall/consumer/payment?orderId=${order.id}&amount=${actualAmount.value}`
|
||
})
|
||
|
||
} catch (err) {
|
||
console.error('创建订单失败:', err)
|
||
uni.showToast({
|
||
title: '订单创建失败',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
}
|
||
|
||
// 生成订单号
|
||
const generateOrderNo = (): string => {
|
||
const date = new Date()
|
||
const year = date.getFullYear()
|
||
const month = (date.getMonth() + 1).toString().padStart(2, '0')
|
||
const day = date.getDate().toString().padStart(2, '0')
|
||
const random = Math.random().toString().slice(2, 8)
|
||
return `ORD${year}${month}${day}${random}`
|
||
}
|
||
|
||
// 清空购物车
|
||
const clearShoppingCart = async () => {
|
||
const userId = getCurrentUserId()
|
||
if (!userId) return
|
||
|
||
const productIds = checkoutItems.value.map(item => item.product_id)
|
||
|
||
try {
|
||
const { error } = await supa
|
||
.from('shopping_cart')
|
||
.delete()
|
||
.eq('user_id', userId)
|
||
.in('product_id', productIds)
|
||
|
||
if (error !== null) {
|
||
console.error('清空购物车失败:', error)
|
||
}
|
||
} catch (err) {
|
||
console.error('清空购物车异常:', err)
|
||
}
|
||
}
|
||
|
||
// 返回
|
||
const goBack = () => {
|
||
uni.navigateBack()
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.checkout-page {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100vh;
|
||
background-color: #f5f5f5;
|
||
}
|
||
|
||
.checkout-header {
|
||
background-color: #ffffff;
|
||
padding: 15px;
|
||
display: flex;
|
||
align-items: center;
|
||
border-bottom: 1px solid #e5e5e5;
|
||
}
|
||
|
||
.back-btn {
|
||
font-size: 24px;
|
||
color: #333333;
|
||
padding: 5px;
|
||
margin-right: 15px;
|
||
}
|
||
|
||
.header-title {
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
color: #333333;
|
||
}
|
||
|
||
.checkout-content {
|
||
flex: 1;
|
||
}
|
||
|
||
.address-section {
|
||
background-color: #ffffff;
|
||
margin-bottom: 10px;
|
||
padding: 20px 15px;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.address-info {
|
||
flex: 1;
|
||
}
|
||
|
||
.address-header {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.recipient {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
color: #333333;
|
||
margin-right: 15px;
|
||
}
|
||
|
||
.phone {
|
||
font-size: 14px;
|
||
color: #666666;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.default-tag {
|
||
background-color: #ff4757;
|
||
padding: 2px 8px;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.tag-text {
|
||
color: #ffffff;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.address-detail {
|
||
font-size: 14px;
|
||
color: #333333;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.no-address {
|
||
flex: 1;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.no-address-text {
|
||
font-size: 16px;
|
||
color: #999999;
|
||
}
|
||
|
||
.no-address-arrow {
|
||
color: #999999;
|
||
font-size: 18px;
|
||
}
|
||
|
||
.products-section {
|
||
background-color: #ffffff;
|
||
margin-bottom: 10px;
|
||
padding: 0 15px;
|
||
}
|
||
|
||
.product-item {
|
||
display: flex;
|
||
padding: 15px 0;
|
||
border-bottom: 1px solid #f5f5f5;
|
||
}
|
||
|
||
.product-item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.product-image {
|
||
width: 80px;
|
||
height: 80px;
|
||
border-radius: 5px;
|
||
margin-right: 15px;
|
||
}
|
||
|
||
.product-info {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.product-name {
|
||
font-size: 14px;
|
||
color: #333333;
|
||
line-height: 1.4;
|
||
margin-bottom: 5px;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.product-spec {
|
||
font-size: 12px;
|
||
color: #999999;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.product-bottom {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.product-price {
|
||
font-size: 16px;
|
||
color: #ff4757;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.product-quantity {
|
||
font-size: 14px;
|
||
color: #666666;
|
||
}
|
||
|
||
.delivery-section,
|
||
.coupon-section,
|
||
.remark-section,
|
||
.price-section {
|
||
background-color: #ffffff;
|
||
margin-bottom: 10px;
|
||
padding: 15px;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
color: #333333;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.delivery-options {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
}
|
||
|
||
.delivery-option {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 15px;
|
||
border: 1px solid #e5e5e5;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.delivery-option.selected {
|
||
border-color: #007aff;
|
||
background-color: #f0f8ff;
|
||
}
|
||
|
||
.option-name {
|
||
font-size: 14px;
|
||
color: #333333;
|
||
}
|
||
|
||
.option-price {
|
||
font-size: 14px;
|
||
color: #ff4757;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.option-selected {
|
||
color: #007aff;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.coupon-info {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 15px;
|
||
border: 1px solid #e5e5e5;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.coupon-selected {
|
||
font-size: 14px;
|
||
color: #007aff;
|
||
}
|
||
|
||
.coupon-placeholder {
|
||
font-size: 14px;
|
||
color: #999999;
|
||
}
|
||
|
||
.coupon-arrow {
|
||
color: #999999;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.remark-input {
|
||
width: 100%;
|
||
min-height: 40px;
|
||
padding: 10px;
|
||
border: 1px solid #e5e5e5;
|
||
border-radius: 8px;
|
||
font-size: 14px;
|
||
color: #333333;
|
||
}
|
||
|
||
.price-detail {
|
||
padding: 15px;
|
||
background-color: #f8f9fa;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.price-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 8px 0;
|
||
}
|
||
|
||
.price-row.total {
|
||
border-top: 1px solid #e5e5e5;
|
||
margin-top: 8px;
|
||
padding-top: 15px;
|
||
}
|
||
|
||
.price-label {
|
||
font-size: 14px;
|
||
color: #666666;
|
||
}
|
||
|
||
.price-value {
|
||
font-size: 14px;
|
||
color: #333333;
|
||
}
|
||
|
||
.price-value.discount {
|
||
color: #4caf50;
|
||
}
|
||
|
||
.price-value.total-price {
|
||
font-size: 18px;
|
||
color: #ff4757;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.bottom-bar {
|
||
background-color: #ffffff;
|
||
padding: 15px;
|
||
border-top: 1px solid #e5e5e5;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.price-summary {
|
||
display: flex;
|
||
align-items: baseline;
|
||
}
|
||
|
||
.summary-label {
|
||
font-size: 14px;
|
||
color: #333333;
|
||
margin-right: 5px;
|
||
}
|
||
|
||
.summary-price {
|
||
font-size: 20px;
|
||
color: #ff4757;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.submit-btn {
|
||
background-color: #007aff;
|
||
color: #ffffff;
|
||
padding: 0 40px;
|
||
height: 45px;
|
||
border-radius: 22.5px;
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
border: none;
|
||
}
|
||
</style> |