feat: 初次提交我的项目代码
This commit is contained in:
739
pages/mall/consumer/checkout.uvue
Normal file
739
pages/mall/consumer/checkout.uvue
Normal file
@@ -0,0 +1,739 @@
|
||||
<!-- 结算页面 -->
|
||||
<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>
|
||||
Reference in New Issue
Block a user