consumer模块完成度95%,安卓端大部分页面能正常获取数据,页面样式显示基本正常,逐渐完善;消费者端的积分、余额、评价、优惠券等小模块正在完善
This commit is contained in:
783
pages/mall/consumer/chat copy.uvue
Normal file
783
pages/mall/consumer/chat copy.uvue
Normal file
@@ -0,0 +1,783 @@
|
||||
<!-- pages/mall/consumer/chat.uvue -->
|
||||
<template>
|
||||
<view class="chat-page">
|
||||
<!-- 聊天头部 -->
|
||||
<view class="chat-header" :style="{ paddingTop: navPaddingTop }">
|
||||
<view class="header-back" @click="goBack">
|
||||
<text class="back-icon">‹</text>
|
||||
</view>
|
||||
<view class="header-info">
|
||||
<text class="chat-title">{{ headerTitle }}</text>
|
||||
<text class="chat-status">在线</text>
|
||||
</view>
|
||||
<view class="header-actions">
|
||||
<text class="action-icon" @click="showMoreActions">⋮</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 聊天内容 -->
|
||||
<scroll-view
|
||||
scroll-y="true"
|
||||
class="chat-content"
|
||||
:scroll-into-view="scrollToView"
|
||||
:scroll-with-animation="false"
|
||||
:show-scrollbar="false"
|
||||
upper-threshold="100"
|
||||
@scrolltoupper="onScrollToUpper"
|
||||
>
|
||||
<!-- 聊天消息列表 -->
|
||||
<view class="chat-messages">
|
||||
<!-- 系统消息 -->
|
||||
<view class="message-item system">
|
||||
<text class="system-text">客服 小美 已接入,请描述您的问题</text>
|
||||
</view>
|
||||
|
||||
<!-- 时间分割线 -->
|
||||
<view class="time-divider">
|
||||
<text class="time-text">今天 14:30</text>
|
||||
</view>
|
||||
|
||||
<!-- 消息项 -->
|
||||
<view
|
||||
v-for="message in messages"
|
||||
:key="message.id"
|
||||
:class="['message-item', message.type]"
|
||||
:id="message.viewId"
|
||||
>
|
||||
<!-- 对方消息 -->
|
||||
<view v-if="message.type === 'received'" class="message-wrapper">
|
||||
<image
|
||||
class="avatar"
|
||||
:src="merchantAvatar"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
<view class="message-content-wrapper">
|
||||
<text class="sender-name">{{ headerTitle }}</text>
|
||||
<view class="message-bubble">
|
||||
<text class="message-text">{{ message.content }}</text>
|
||||
<text class="message-time">{{ message.time }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 我的消息 -->
|
||||
<view v-else class="message-wrapper me">
|
||||
<view class="message-content-wrapper">
|
||||
<view class="message-bubble me">
|
||||
<text class="message-text">{{ message.content }}</text>
|
||||
<text class="message-time">{{ message.time }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<image
|
||||
class="avatar me"
|
||||
src="/static/default-avatar.png"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 聊天输入区 -->
|
||||
<view class="chat-input">
|
||||
<view class="input-tools">
|
||||
<text class="tool-icon" @click="showEmojiPicker">😊</text>
|
||||
<text class="tool-icon" @click="showImagePicker">📷</text>
|
||||
<text class="tool-icon" @click="showMoreTools">➕</text>
|
||||
</view>
|
||||
|
||||
<view class="input-wrapper">
|
||||
<input
|
||||
class="message-input"
|
||||
v-model="inputMessage"
|
||||
placeholder="请输入消息..."
|
||||
:focus="inputFocus"
|
||||
@confirm="sendMessage"
|
||||
confirm-type="send"
|
||||
/>
|
||||
<button
|
||||
class="send-button"
|
||||
:class="{ active: inputMessage.trim() }"
|
||||
@click="sendMessage"
|
||||
>
|
||||
发送
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 表情选择器 -->
|
||||
<scroll-view v-if="showEmoji" class="emoji-picker" direction="vertical">
|
||||
<view class="emoji-category">
|
||||
<text
|
||||
v-for="emoji in emojiList"
|
||||
:key="emoji"
|
||||
class="emoji-item"
|
||||
@click="insertEmoji(emoji)"
|
||||
>
|
||||
{{ emoji }}
|
||||
</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="uts">
|
||||
import { ref, reactive, onMounted, onUnmounted, nextTick } from 'vue'
|
||||
import { supabaseService, type ChatMessage } from '@/utils/supabaseService.uts'
|
||||
import supa from '@/components/supadb/aksupainstance.uts'
|
||||
import type { AkSupaRealtimeChannel } from '@/components/supadb/aksupa.uts'
|
||||
import { getCurrentUser } from '@/utils/store.uts'
|
||||
|
||||
type UiChatMessage = {
|
||||
id: string
|
||||
viewId: string
|
||||
type: string
|
||||
content: string
|
||||
time: string
|
||||
}
|
||||
|
||||
// 响应式数据
|
||||
const messages = ref<UiChatMessage[]>([])
|
||||
const inputMessage = ref<string>('')
|
||||
const inputFocus = ref<boolean>(false)
|
||||
const showEmoji = ref<boolean>(false)
|
||||
const scrollToView = ref<string>('')
|
||||
const currentUserId = ref<string>('')
|
||||
const merchantId = ref<string>('') // 商家ID
|
||||
const headerTitle = ref<string>('在线客服')
|
||||
const merchantAvatar = ref<string>('/static/default-shop.png') // 商家头像
|
||||
const navPaddingTop = ref<string>('30px') // 默认值,包含状态栏高度+原有内边距
|
||||
const isInitialLoading = ref<boolean>(true)
|
||||
let realtimeChannel: AkSupaRealtimeChannel | null = null
|
||||
|
||||
// 模拟表情列表
|
||||
const emojiList = ['😊', '😂', '🤣', '😍', '😘', '🥰', '😭', '😡', '👍', '👏', '🙏', '🎉', '❤️', '🔥', '⭐']
|
||||
|
||||
function scrollToBottom() : void {
|
||||
if (messages.value.length === 0) return
|
||||
|
||||
// 获取最后一条消息的 ID
|
||||
const lastMsg = messages.value[messages.value.length - 1]
|
||||
const targetId = 'msg-' + lastMsg.id
|
||||
|
||||
// 关键点:在 UVue 安卓端,直接连续赋值可能被合并。
|
||||
// 我们先清除 ID,然后在下一帧赋值,确保 scroll-view 监听到变化。
|
||||
scrollToView.value = ''
|
||||
|
||||
// 增加多次尝试,确保在 DOM 彻底完成渲染(包含由于高度计算引起的多次排版)后定位。
|
||||
setTimeout(() => {
|
||||
scrollToView.value = targetId
|
||||
console.log('[scrollToBottom] 发起第一次滚动定位:', targetId)
|
||||
|
||||
// 二次校准:针对长消息或图片导致的高度变化
|
||||
setTimeout(() => {
|
||||
scrollToView.value = ''
|
||||
setTimeout(() => {
|
||||
scrollToView.value = targetId
|
||||
console.log('[scrollToBottom] 二次校准完成:', targetId)
|
||||
}, 50)
|
||||
}, 100)
|
||||
}, 300)
|
||||
}
|
||||
|
||||
function getCurrentTime(): string {
|
||||
const now = new Date()
|
||||
const hours = now.getHours().toString().padStart(2, '0')
|
||||
const minutes = now.getMinutes().toString().padStart(2, '0')
|
||||
return `${hours}:${minutes}`
|
||||
}
|
||||
|
||||
function setupRealtimeSubscription(): void {
|
||||
console.log('开始建立聊天实时订阅...')
|
||||
console.log('当前用户ID:', currentUserId.value, '商家ID:', merchantId.value)
|
||||
|
||||
realtimeChannel = supa.channel('chat-messages-' + Date.now().toString())
|
||||
.on('postgres_changes', {
|
||||
event: 'INSERT',
|
||||
schema: 'public',
|
||||
table: 'ml_chat_messages'
|
||||
}, (payload: any) => {
|
||||
console.log('=== 收到实时订阅回调 ===')
|
||||
const payloadObj = (payload instanceof UTSJSONObject) ? (payload as UTSJSONObject) : (JSON.parse(JSON.stringify(payload ?? {})) as UTSJSONObject)
|
||||
const newMsgAny = payloadObj.get('new')
|
||||
if (newMsgAny == null) {
|
||||
console.log('newMsgAny 为空,跳过')
|
||||
return
|
||||
}
|
||||
const newMsg = (newMsgAny instanceof UTSJSONObject) ? (newMsgAny as UTSJSONObject) : (JSON.parse(JSON.stringify(newMsgAny)) as UTSJSONObject)
|
||||
console.log('收到新消息:', newMsg)
|
||||
|
||||
const senderId = newMsg.getString('sender_id') ?? ''
|
||||
const receiverId = newMsg.getString('receiver_id') ?? ''
|
||||
const msgId = newMsg.getString('id') ?? ''
|
||||
const content = newMsg.getString('content') ?? ''
|
||||
|
||||
console.log('=== 消息详情 ===')
|
||||
console.log('消息ID:', msgId)
|
||||
console.log('发送者ID:', senderId)
|
||||
console.log('接收者ID:', receiverId)
|
||||
console.log('当前用户ID:', currentUserId.value)
|
||||
console.log('商家ID:', merchantId.value)
|
||||
console.log('消息内容:', content)
|
||||
|
||||
// 检查消息是否已经在列表中(避免重复)
|
||||
for (let i = 0; i < messages.value.length; i++) {
|
||||
if (messages.value[i].id == msgId) {
|
||||
console.log('消息已存在,跳过')
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
// 判断消息类型
|
||||
const isMyMessage = (senderId == currentUserId.value)
|
||||
const isForMe = (receiverId == currentUserId.value)
|
||||
const isRelatedToCurrentChat = (senderId == merchantId.value || receiverId == merchantId.value)
|
||||
|
||||
console.log('=== 条件判断 ===')
|
||||
console.log('isMyMessage:', isMyMessage)
|
||||
console.log('isForMe:', isForMe)
|
||||
console.log('isRelatedToCurrentChat:', isRelatedToCurrentChat)
|
||||
|
||||
// 如果消息与当前聊天无关,跳过
|
||||
if (!isRelatedToCurrentChat) {
|
||||
console.log('消息与当前聊天无关,跳过')
|
||||
return
|
||||
}
|
||||
|
||||
// 如果是自己发送的消息,或者是发给自己的消息,都显示
|
||||
if (isMyMessage || isForMe) {
|
||||
const createdAt = newMsg.getString('created_at') ?? new Date().toISOString()
|
||||
const date = new Date(createdAt)
|
||||
const timeStr = `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`
|
||||
|
||||
// 生成安全的 viewId
|
||||
const safeViewId = 'msg_' + msgId.replace(/[^a-zA-Z0-9]/g, '_')
|
||||
|
||||
const incomingMsg: UiChatMessage = {
|
||||
id: msgId,
|
||||
viewId: safeViewId,
|
||||
type: isMyMessage ? 'sent' : 'received',
|
||||
content: content,
|
||||
time: timeStr
|
||||
}
|
||||
|
||||
console.log('=== 添加新消息到列表 ===')
|
||||
console.log('消息类型:', incomingMsg.type)
|
||||
console.log('消息内容:', incomingMsg.content)
|
||||
messages.value.push(incomingMsg)
|
||||
scrollToBottom()
|
||||
} else {
|
||||
console.log('条件不满足,不添加消息')
|
||||
}
|
||||
})
|
||||
.subscribe((status: string, err: any | null) => {
|
||||
console.log('订阅状态:', status)
|
||||
if (err != null) {
|
||||
console.log('订阅错误:', err)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
async function loadChatHistory(): Promise<void> {
|
||||
let rawMsgs : ChatMessage[] = []
|
||||
|
||||
if (merchantId.value != '') {
|
||||
rawMsgs = await supabaseService.getChatMessages(merchantId.value)
|
||||
} else {
|
||||
console.warn("No merchant ID provided for chat")
|
||||
return
|
||||
}
|
||||
|
||||
// 确保时间顺序是升序(旧的在前,新的在后)
|
||||
// Supabase 返回的消息如果是降序,我们需要 reverse 过来显示
|
||||
const sortedRawMsgs = rawMsgs.sort((a, b) => {
|
||||
const timeA = new Date(a.created_at ?? '').getTime()
|
||||
const timeB = new Date(b.created_at ?? '').getTime()
|
||||
return timeA - timeB
|
||||
})
|
||||
|
||||
const uiMessages : UiChatMessage[] = []
|
||||
for (let i = 0; i < sortedRawMsgs.length; i++) {
|
||||
const m = sortedRawMsgs[i]
|
||||
const date = new Date(m.created_at ?? new Date().toISOString())
|
||||
const timeStr = `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`
|
||||
|
||||
const sender = m.sender_id ?? ''
|
||||
const msgType = (currentUserId.value != '' && sender == currentUserId.value) ? 'sent' : 'received'
|
||||
const rawId = (m.id ?? '').toString()
|
||||
const msgId = rawId != '' ? rawId : Date.now().toString() + i.toString()
|
||||
const safeViewId = 'msg_' + msgId.replace(/[^a-zA-Z0-9]/g, '_')
|
||||
|
||||
const uiMsg : UiChatMessage = {
|
||||
id: msgId,
|
||||
viewId: safeViewId,
|
||||
type: msgType,
|
||||
content: m.content ?? '',
|
||||
time: timeStr
|
||||
}
|
||||
uiMessages.push(uiMsg)
|
||||
}
|
||||
messages.value = uiMessages
|
||||
|
||||
if (isInitialLoading.value) {
|
||||
// 增加一点初始化延迟,等待 scroll-view 渲染就绪
|
||||
setTimeout(() => {
|
||||
scrollToBottom()
|
||||
isInitialLoading.value = false
|
||||
}, 500)
|
||||
}
|
||||
}
|
||||
|
||||
function onScrollToUpper(e: any): void {
|
||||
console.log('[onScrollToUpper] 触发加载历史记录')
|
||||
}
|
||||
|
||||
async function loadMerchantInfo(): Promise<void> {
|
||||
if (merchantId.value == '') return
|
||||
|
||||
try {
|
||||
const response = await supa
|
||||
.from('ml_shops')
|
||||
.select('shop_logo, shop_name')
|
||||
.eq('merchant_id', merchantId.value)
|
||||
.limit(1)
|
||||
.execute()
|
||||
|
||||
if (response.error != null) {
|
||||
console.error('[loadMerchantInfo] 获取商家信息失败:', response.error)
|
||||
return
|
||||
}
|
||||
|
||||
const rawData = response.data
|
||||
if (rawData == null) return
|
||||
|
||||
const rawList = rawData as any[]
|
||||
if (rawList.length == 0) return
|
||||
|
||||
const shopData = rawList[0]
|
||||
const shopObj = JSON.parse(JSON.stringify(shopData)) as UTSJSONObject
|
||||
|
||||
const logo = shopObj.getString('shop_logo')
|
||||
if (logo != null && logo != '') {
|
||||
merchantAvatar.value = logo
|
||||
}
|
||||
|
||||
const name = shopObj.getString('shop_name')
|
||||
if (name != null && name != '' && headerTitle.value == '在线客服') {
|
||||
headerTitle.value = name
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('[loadMerchantInfo] 获取商家信息异常:', e)
|
||||
}
|
||||
}
|
||||
|
||||
// 生命周期
|
||||
onLoad((options: any) => {
|
||||
// 动态获取状态栏高度
|
||||
const sysInfo = uni.getSystemInfoSync()
|
||||
const statusBarH = sysInfo.statusBarHeight
|
||||
// 状态栏高度 + 10px 原有顶部内边距
|
||||
navPaddingTop.value = (statusBarH + 10) + 'px'
|
||||
|
||||
const optObj = (options instanceof UTSJSONObject) ? (options as UTSJSONObject) : (JSON.parse(JSON.stringify(options ?? {})) as UTSJSONObject)
|
||||
const mid = optObj.getString('merchantId') ?? ''
|
||||
if (mid !== '') {
|
||||
merchantId.value = mid
|
||||
}
|
||||
const mname = optObj.getString('merchantName') ?? ''
|
||||
if (mname !== '') {
|
||||
headerTitle.value = mname
|
||||
}
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
supabaseService.ensureSession().then((uid) => {
|
||||
if (uid != null) {
|
||||
currentUserId.value = uid
|
||||
} else {
|
||||
getCurrentUser().then((user) => {
|
||||
if (user != null) {
|
||||
currentUserId.value = user.id ?? ''
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
loadMerchantInfo()
|
||||
loadChatHistory()
|
||||
setupRealtimeSubscription()
|
||||
})
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
if (realtimeChannel != null) {
|
||||
supa.removeChannel(realtimeChannel!!)
|
||||
}
|
||||
})
|
||||
|
||||
const sendMessage = async () => {
|
||||
const content = inputMessage.value.trim()
|
||||
if (content == '') return
|
||||
|
||||
// 清空输入框
|
||||
inputMessage.value = ''
|
||||
|
||||
// 发送到 Supabase
|
||||
if (merchantId.value != '') {
|
||||
console.log('[sendMessage] 开始发送消息到:', merchantId.value)
|
||||
const success = await supabaseService.sendMessage(merchantId.value, content)
|
||||
console.log('[sendMessage] 发送结果:', success)
|
||||
if (!success) {
|
||||
uni.showToast({
|
||||
title: '发送失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
// 不需要手动添加消息,等待实时订阅推送
|
||||
}
|
||||
}
|
||||
|
||||
// 模拟客服回复 (已禁用,改用 Realtime)
|
||||
/*
|
||||
const simulateCustomerReply = async () => {
|
||||
// ...
|
||||
}
|
||||
*/
|
||||
|
||||
/* 移除不再使用的 simulateCustomerReply 和 addReceivedMessage */
|
||||
|
||||
// 插入表情
|
||||
function insertEmoji(emoji: string): void {
|
||||
inputMessage.value += emoji
|
||||
inputFocus.value = true
|
||||
}
|
||||
|
||||
// 显示表情选择器
|
||||
function showEmojiPicker(): void {
|
||||
showEmoji.value = !showEmoji.value
|
||||
}
|
||||
|
||||
// 显示图片选择器
|
||||
function showImagePicker(): void {
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
success: (res) => {
|
||||
console.log('选择图片:', res.tempFilePaths)
|
||||
// 这里可以处理图片上传
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 显示更多工具
|
||||
function showMoreTools(): void {
|
||||
uni.showActionSheet({
|
||||
itemList: ['发送位置', '发送文件', '发送语音'],
|
||||
success: (res) => {
|
||||
console.log('选择工具:', res.tapIndex)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 显示更多操作
|
||||
function showMoreActions(): void {
|
||||
uni.showActionSheet({
|
||||
itemList: ['投诉客服', '结束对话', '清除记录'],
|
||||
success: (res) => {
|
||||
switch (res.tapIndex) {
|
||||
case 0:
|
||||
uni.navigateTo({ url: '/pages/mall/consumer/complaint' })
|
||||
break
|
||||
case 1:
|
||||
uni.showModal({
|
||||
title: '确认结束',
|
||||
content: '确定要结束本次对话吗?',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.navigateBack()
|
||||
}
|
||||
}
|
||||
})
|
||||
break
|
||||
case 2:
|
||||
uni.showModal({
|
||||
title: '确认清除',
|
||||
content: '确定要清除聊天记录吗?',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
messages.value = []
|
||||
}
|
||||
}
|
||||
})
|
||||
break
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 返回
|
||||
const goBack = () => {
|
||||
uni.navigateBack()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.chat-page {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background-color: #f5f5f5;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 聊天头部 */
|
||||
.chat-header {
|
||||
background-color: white;
|
||||
padding: 10px 15px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #eee;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.header-back {
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.back-icon {
|
||||
font-size: 24px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.header-info {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.chat-title {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.chat-status {
|
||||
font-size: 12px;
|
||||
color: #34c759;
|
||||
}
|
||||
|
||||
.header-actions .action-icon {
|
||||
font-size: 20px;
|
||||
color: #333;
|
||||
width: 40px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* 聊天内容区 */
|
||||
.chat-content {
|
||||
flex: 1;
|
||||
height: 0;
|
||||
padding: 10px;
|
||||
padding-bottom: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.chat-messages {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
|
||||
/* 系统消息 */
|
||||
.message-item.system {
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.system-text {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
background-color: #f0f0f0;
|
||||
padding: 5px 15px;
|
||||
border-radius: 15px;
|
||||
|
||||
}
|
||||
|
||||
/* 时间分割线 */
|
||||
.time-divider {
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.time-text {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
background-color: #f0f0f0;
|
||||
padding: 3px 10px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
/* 消息项 */
|
||||
.message-wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.message-wrapper.me {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 20px;
|
||||
margin-right: 10px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.avatar.me {
|
||||
margin-right: 0;
|
||||
margin-left: 10px;
|
||||
/* order: 2; removed for uni-app-x */
|
||||
}
|
||||
|
||||
.message-content-wrapper {
|
||||
max-width: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.message-bubble {
|
||||
background-color: white;
|
||||
padding: 10px 15px;
|
||||
border-radius: 12px;
|
||||
position: relative;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
||||
align-self: flex-start; /* 关键:根据内容宽度自适应,不撑满 */
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.message-bubble.me {
|
||||
background-color: #95ec69;
|
||||
align-self: flex-end; /* 关键:靠右对齐且宽度自适应 */
|
||||
border-top-right-radius: 2px;
|
||||
}
|
||||
|
||||
.message-bubble:not(.me) {
|
||||
border-top-left-radius: 2px;
|
||||
}
|
||||
|
||||
.sender-name {
|
||||
font-size: 11px;
|
||||
color: #999;
|
||||
margin-bottom: 2px;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.message-text {
|
||||
font-size: 15px;
|
||||
color: #333;
|
||||
line-height: 1.4;
|
||||
margin-bottom: 5px;
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.message-time {
|
||||
font-size: 11px;
|
||||
color: #999;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* 聊天输入区 */
|
||||
.chat-input {
|
||||
background-color: white;
|
||||
border-top: 1px solid #eee;
|
||||
padding: 10px 15px;
|
||||
padding-bottom: 20px;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.input-tools {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.tool-icon {
|
||||
font-size: 20px;
|
||||
margin-right: 15px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.input-wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.message-input {
|
||||
flex: 1;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 20px;
|
||||
padding: 10px 15px;
|
||||
font-size: 15px;
|
||||
margin-right: 10px;
|
||||
min-height: 40px;
|
||||
max-height: 100px;
|
||||
}
|
||||
|
||||
.send-button {
|
||||
background-color: #ccc;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 20px;
|
||||
padding: 8px 20px;
|
||||
font-size: 14px;
|
||||
min-width: 60px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.send-button.active {
|
||||
background-color: #ff5000;
|
||||
}
|
||||
|
||||
/* 表情选择器 */
|
||||
.emoji-picker {
|
||||
background-color: white;
|
||||
border-top: 1px solid #eee;
|
||||
padding: 10px;
|
||||
height: 200px;
|
||||
position: fixed;
|
||||
bottom: 80px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.emoji-category {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.emoji-item {
|
||||
font-size: 24px;
|
||||
padding: 8px;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* 响应式适配 removed for strict uv-app-x compliance */
|
||||
</style>
|
||||
@@ -17,10 +17,13 @@
|
||||
|
||||
<!-- 聊天内容 -->
|
||||
<scroll-view
|
||||
scroll-y
|
||||
scroll-y="true"
|
||||
class="chat-content"
|
||||
:scroll-into-view="scrollToView"
|
||||
scroll-with-animation
|
||||
:scroll-with-animation="false"
|
||||
:show-scrollbar="false"
|
||||
upper-threshold="100"
|
||||
@scrolltoupper="onScrollToUpper"
|
||||
>
|
||||
<!-- 聊天消息列表 -->
|
||||
<view class="chat-messages">
|
||||
@@ -39,13 +42,13 @@
|
||||
v-for="message in messages"
|
||||
:key="message.id"
|
||||
:class="['message-item', message.type]"
|
||||
:id="'msg-' + message.id"
|
||||
:id="message.viewId"
|
||||
>
|
||||
<!-- 对方消息 -->
|
||||
<view v-if="message.type === 'received'" class="message-wrapper">
|
||||
<image
|
||||
class="avatar"
|
||||
src="/static/icons/shop-default.png"
|
||||
:src="merchantAvatar"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
<view class="message-content-wrapper">
|
||||
@@ -67,7 +70,7 @@
|
||||
</view>
|
||||
<image
|
||||
class="avatar me"
|
||||
src="/static/avatar-default.png"
|
||||
src="/static/default-avatar.png"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
</view>
|
||||
@@ -127,6 +130,7 @@ import { getCurrentUser } from '@/utils/store.uts'
|
||||
|
||||
type UiChatMessage = {
|
||||
id: string
|
||||
viewId: string
|
||||
type: string
|
||||
content: string
|
||||
time: string
|
||||
@@ -141,19 +145,39 @@ const scrollToView = ref<string>('')
|
||||
const currentUserId = ref<string>('')
|
||||
const merchantId = ref<string>('') // 商家ID
|
||||
const headerTitle = ref<string>('在线客服')
|
||||
const merchantAvatar = ref<string>('/static/default-shop.png') // 商家头像
|
||||
const navPaddingTop = ref<string>('30px') // 默认值,包含状态栏高度+原有内边距
|
||||
const isInitialLoading = ref<boolean>(true)
|
||||
let realtimeChannel: AkSupaRealtimeChannel | null = null
|
||||
|
||||
// 模拟表情列表
|
||||
const emojiList = ['😊', '😂', '🤣', '😍', '😘', '🥰', '😭', '😡', '👍', '👏', '🙏', '🎉', '❤️', '🔥', '⭐']
|
||||
|
||||
function scrollToBottom(): void {
|
||||
nextTick(() => {
|
||||
if (messages.value.length > 0) {
|
||||
const lastMsgId = messages.value[messages.value.length - 1].id
|
||||
scrollToView.value = 'msg-' + lastMsgId
|
||||
}
|
||||
})
|
||||
function scrollToBottom() : void {
|
||||
if (messages.value.length === 0) return
|
||||
|
||||
// 获取最后一条消息的 ID
|
||||
const lastMsg = messages.value[messages.value.length - 1]
|
||||
const targetId = 'msg-' + lastMsg.id
|
||||
|
||||
// 关键点:在 UVue 安卓端,直接连续赋值可能被合并。
|
||||
// 我们先清除 ID,然后在下一帧赋值,确保 scroll-view 监听到变化。
|
||||
scrollToView.value = ''
|
||||
|
||||
// 增加多次尝试,确保在 DOM 彻底完成渲染(包含由于高度计算引起的多次排版)后定位。
|
||||
setTimeout(() => {
|
||||
scrollToView.value = targetId
|
||||
console.log('[scrollToBottom] 发起第一次滚动定位:', targetId)
|
||||
|
||||
// 二次校准:针对长消息或图片导致的高度变化
|
||||
setTimeout(() => {
|
||||
scrollToView.value = ''
|
||||
setTimeout(() => {
|
||||
scrollToView.value = targetId
|
||||
console.log('[scrollToBottom] 二次校准完成:', targetId)
|
||||
}, 50)
|
||||
}, 100)
|
||||
}, 300)
|
||||
}
|
||||
|
||||
function getCurrentTime(): string {
|
||||
@@ -167,14 +191,12 @@ function setupRealtimeSubscription(): void {
|
||||
console.log('开始建立聊天实时订阅...')
|
||||
console.log('当前用户ID:', currentUserId.value, '商家ID:', merchantId.value)
|
||||
|
||||
const filter = ({
|
||||
event: 'INSERT',
|
||||
schema: 'public',
|
||||
table: 'ml_chat_messages'
|
||||
} as UTSJSONObject)
|
||||
|
||||
realtimeChannel = supa.channel('public:ml_chat_messages')
|
||||
.on('postgres_changes', filter, (payload: any) => {
|
||||
realtimeChannel = supa.channel('chat-messages-' + Date.now().toString())
|
||||
.on('postgres_changes', {
|
||||
event: 'INSERT',
|
||||
schema: 'public',
|
||||
table: 'ml_chat_messages'
|
||||
}, (payload: any) => {
|
||||
console.log('=== 收到实时订阅回调 ===')
|
||||
const payloadObj = (payload instanceof UTSJSONObject) ? (payload as UTSJSONObject) : (JSON.parse(JSON.stringify(payload ?? {})) as UTSJSONObject)
|
||||
const newMsgAny = payloadObj.get('new')
|
||||
@@ -228,8 +250,12 @@ function setupRealtimeSubscription(): void {
|
||||
const date = new Date(createdAt)
|
||||
const timeStr = `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`
|
||||
|
||||
// 生成安全的 viewId
|
||||
const safeViewId = 'msg_' + msgId.replace(/[^a-zA-Z0-9]/g, '_')
|
||||
|
||||
const incomingMsg: UiChatMessage = {
|
||||
id: msgId,
|
||||
viewId: safeViewId,
|
||||
type: isMyMessage ? 'sent' : 'received',
|
||||
content: content,
|
||||
time: timeStr
|
||||
@@ -253,40 +279,96 @@ function setupRealtimeSubscription(): void {
|
||||
}
|
||||
|
||||
async function loadChatHistory(): Promise<void> {
|
||||
let rawMsgs: ChatMessage[] = []
|
||||
let rawMsgs : ChatMessage[] = []
|
||||
|
||||
if (merchantId.value != '') {
|
||||
rawMsgs = await supabaseService.getChatMessages(merchantId.value)
|
||||
} else {
|
||||
console.warn("No merchant ID provided for chat")
|
||||
return
|
||||
}
|
||||
if (merchantId.value != '') {
|
||||
rawMsgs = await supabaseService.getChatMessages(merchantId.value)
|
||||
} else {
|
||||
console.warn("No merchant ID provided for chat")
|
||||
return
|
||||
}
|
||||
|
||||
// 使用 for 循环替代 map
|
||||
const uiMessages: UiChatMessage[] = []
|
||||
for (let i = rawMsgs.length - 1; i >= 0; i--) {
|
||||
const m = rawMsgs[i]
|
||||
const date = new Date(m.created_at ?? new Date().toISOString())
|
||||
const timeStr = `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`
|
||||
// 确保时间顺序是升序(旧的在前,新的在后)
|
||||
// Supabase 返回的消息如果是降序,我们需要 reverse 过来显示
|
||||
const sortedRawMsgs = rawMsgs.sort((a, b) => {
|
||||
const timeA = new Date(a.created_at ?? '').getTime()
|
||||
const timeB = new Date(b.created_at ?? '').getTime()
|
||||
return timeA - timeB
|
||||
})
|
||||
|
||||
const sender = m.sender_id ?? ''
|
||||
const msgType = (currentUserId.value != '' && sender == currentUserId.value) ? 'sent' : 'received'
|
||||
const rawId = (m.id ?? '').toString()
|
||||
const msgId = rawId != '' ? rawId : Date.now().toString() + i.toString()
|
||||
const uiMessages : UiChatMessage[] = []
|
||||
for (let i = 0; i < sortedRawMsgs.length; i++) {
|
||||
const m = sortedRawMsgs[i]
|
||||
const date = new Date(m.created_at ?? new Date().toISOString())
|
||||
const timeStr = `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`
|
||||
|
||||
const sender = m.sender_id ?? ''
|
||||
const msgType = (currentUserId.value != '' && sender == currentUserId.value) ? 'sent' : 'received'
|
||||
const rawId = (m.id ?? '').toString()
|
||||
const msgId = rawId != '' ? rawId : Date.now().toString() + i.toString()
|
||||
const safeViewId = 'msg_' + msgId.replace(/[^a-zA-Z0-9]/g, '_')
|
||||
|
||||
const uiMsg : UiChatMessage = {
|
||||
id: msgId,
|
||||
viewId: safeViewId,
|
||||
type: msgType,
|
||||
content: m.content ?? '',
|
||||
time: timeStr
|
||||
}
|
||||
uiMessages.push(uiMsg)
|
||||
}
|
||||
messages.value = uiMessages
|
||||
|
||||
if (isInitialLoading.value) {
|
||||
// 增加一点初始化延迟,等待 scroll-view 渲染就绪
|
||||
setTimeout(() => {
|
||||
scrollToBottom()
|
||||
isInitialLoading.value = false
|
||||
}, 500)
|
||||
}
|
||||
}
|
||||
|
||||
function onScrollToUpper(e: any): void {
|
||||
console.log('[onScrollToUpper] 触发加载历史记录')
|
||||
}
|
||||
|
||||
async function loadMerchantInfo(): Promise<void> {
|
||||
if (merchantId.value == '') return
|
||||
|
||||
try {
|
||||
const response = await supa
|
||||
.from('ml_shops')
|
||||
.select('shop_logo, shop_name')
|
||||
.eq('merchant_id', merchantId.value)
|
||||
.limit(1)
|
||||
.execute()
|
||||
|
||||
const uiMsg: UiChatMessage = {
|
||||
id: msgId,
|
||||
type: msgType,
|
||||
content: m.content ?? '',
|
||||
time: timeStr
|
||||
if (response.error != null) {
|
||||
console.error('[loadMerchantInfo] 获取商家信息失败:', response.error)
|
||||
return
|
||||
}
|
||||
uiMessages.push(uiMsg)
|
||||
|
||||
const rawData = response.data
|
||||
if (rawData == null) return
|
||||
|
||||
const rawList = rawData as any[]
|
||||
if (rawList.length == 0) return
|
||||
|
||||
const shopData = rawList[0]
|
||||
const shopObj = JSON.parse(JSON.stringify(shopData)) as UTSJSONObject
|
||||
|
||||
const logo = shopObj.getString('shop_logo')
|
||||
if (logo != null && logo != '') {
|
||||
merchantAvatar.value = logo
|
||||
}
|
||||
|
||||
const name = shopObj.getString('shop_name')
|
||||
if (name != null && name != '' && headerTitle.value == '在线客服') {
|
||||
headerTitle.value = name
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('[loadMerchantInfo] 获取商家信息异常:', e)
|
||||
}
|
||||
messages.value = uiMessages
|
||||
|
||||
setTimeout(() => {
|
||||
scrollToBottom()
|
||||
}, 100)
|
||||
}
|
||||
|
||||
// 生命周期
|
||||
@@ -320,6 +402,7 @@ onMounted(() => {
|
||||
})
|
||||
}
|
||||
|
||||
loadMerchantInfo()
|
||||
loadChatHistory()
|
||||
setupRealtimeSubscription()
|
||||
})
|
||||
@@ -340,15 +423,16 @@ const sendMessage = async () => {
|
||||
|
||||
// 发送到 Supabase
|
||||
if (merchantId.value != '') {
|
||||
// 不使用乐观更新,等待实时订阅推送
|
||||
// 这样可以确保多端同步
|
||||
console.log('[sendMessage] 开始发送消息到:', merchantId.value)
|
||||
const success = await supabaseService.sendMessage(merchantId.value, content)
|
||||
console.log('[sendMessage] 发送结果:', success)
|
||||
if (!success) {
|
||||
uni.showToast({
|
||||
title: '发送失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
// 不需要手动添加消息,等待实时订阅推送
|
||||
}
|
||||
}
|
||||
|
||||
@@ -438,22 +522,23 @@ const goBack = () => {
|
||||
<style>
|
||||
.chat-page {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
height: 100vh;
|
||||
background-color: #f5f5f5;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 聊天头部 */
|
||||
.chat-header {
|
||||
background-color: white;
|
||||
padding: 10px 15px;
|
||||
/* padding-top 由内联样式控制 */
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #eee;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.header-back {
|
||||
@@ -492,8 +577,16 @@ const goBack = () => {
|
||||
/* 聊天内容区 */
|
||||
.chat-content {
|
||||
flex: 1;
|
||||
padding: 15px;
|
||||
padding-bottom: 70px; /* 为输入区留出空间 */
|
||||
height: 0;
|
||||
padding: 10px;
|
||||
padding-bottom: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.chat-messages {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
|
||||
/* 系统消息 */
|
||||
@@ -551,31 +644,37 @@ const goBack = () => {
|
||||
}
|
||||
|
||||
.message-content-wrapper {
|
||||
/* max-width removed */
|
||||
}
|
||||
|
||||
.sender-name {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
margin-bottom: 5px;
|
||||
max-width: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.message-bubble {
|
||||
background-color: white;
|
||||
padding: 10px 15px;
|
||||
border-radius: 18px;
|
||||
border-radius: 12px;
|
||||
position: relative;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
|
||||
/* max-width wrap removed */
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
||||
align-self: flex-start; /* 关键:根据内容宽度自适应,不撑满 */
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.message-bubble.me {
|
||||
background-color: #95ec69;
|
||||
border-bottom-right-radius: 4px;
|
||||
align-self: flex-end; /* 关键:靠右对齐且宽度自适应 */
|
||||
border-top-right-radius: 2px;
|
||||
}
|
||||
|
||||
.message-bubble-not-me .message-content {
|
||||
border-bottom-left-radius: 4px;
|
||||
.message-bubble:not(.me) {
|
||||
border-top-left-radius: 2px;
|
||||
}
|
||||
|
||||
.sender-name {
|
||||
font-size: 11px;
|
||||
color: #999;
|
||||
margin-bottom: 2px;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.message-text {
|
||||
@@ -583,6 +682,9 @@ const goBack = () => {
|
||||
color: #333;
|
||||
line-height: 1.4;
|
||||
margin-bottom: 5px;
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.message-time {
|
||||
@@ -596,11 +698,12 @@ const goBack = () => {
|
||||
background-color: white;
|
||||
border-top: 1px solid #eee;
|
||||
padding: 10px 15px;
|
||||
padding-bottom: 20px;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 100;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.input-tools {
|
||||
@@ -653,9 +756,8 @@ const goBack = () => {
|
||||
border-top: 1px solid #eee;
|
||||
padding: 10px;
|
||||
height: 200px;
|
||||
/* overflow-y removed */
|
||||
position: fixed;
|
||||
bottom: 60px;
|
||||
bottom: 80px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 99;
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -456,8 +456,14 @@ const getBrandIcon = (name: string): string => {
|
||||
return '🏢'
|
||||
}
|
||||
// 常见品牌图标映射(使用数组方式避免 Object.keys 问题)
|
||||
const iconKeys = ['感冒', '发烧', '咳嗽', '消炎', '维生素', '钙片', '胃药', '止痛', '过敏', '皮肤', '眼药水', '口腔', '血压', '血糖', '血脂', '保健', '养生', '减肥', '美容', '母婴', '儿童', '老人', '男性', '女性', '维生素C', '维生素D', '蛋白粉', '鱼油', '蜂胶', '阿胶', '红枣', '枸杞', '菊花', '金银花', '口罩', '消毒液', '体温计', '创可贴', '棉签']
|
||||
const iconValues = ['💊', '🌡️', '😷', '🔬', '💊', '🦴', '🫁', '💉', '🌸', '🧴', '👁️', '🦷', '❤️', '🩸', '💓', '🧬', '🍵', '⚖️', '💅', '👶', '🧒', '👴', '♂️', '♀️', '🍊', '☀️', '🥛', '🐟', '🐝', '🍯', '🫘', '🌿', '🌼', '🌸', '😷', '🧴', '🌡️', '🩹', '🧺']
|
||||
const iconKeys = [
|
||||
'感冒', '发烧', '咳嗽', '消炎', '维生素', '钙片', '胃药', '止痛', '过敏', '皮肤', '眼药水', '口腔', '血压', '血糖', '血脂', '保健', '养生', '减肥', '美容', '母婴', '儿童', '老人', '男性', '女性', '维生素C', '维生素D', '蛋白粉', '鱼油', '蜂胶', '阿胶', '红枣', '枸杞', '菊花', '金银花', '口罩', '消毒液', '体温计', '创可贴', '棉签',
|
||||
'九芝堂', '同仁堂', '云南白药', '东阿阿胶', '太极', '江中', '三九', '华素制药', '汤臣倍健', '白云山', '修正', '葵花', '哈药', '扬子江', '恒瑞', '复星', '辉瑞', '阿斯利康', '罗氏', '默沙东', '赛诺菲', '诺华', '雅培', '雀巢', '蒙牛', '伊利', '海尔', '美的', '飞利浦', '西门子', '松下', '苏泊尔', '九阳', '华为', '小米', '苹果', '三星'
|
||||
]
|
||||
const iconValues = [
|
||||
'💊', '🌡️', '😷', '🔬', '💊', '🦴', '🫁', '💉', '🌸', '🧴', '👁️', '🦷', '❤️', '🩸', '💓', '🧬', '🍵', '⚖️', '💅', '👶', '🧒', '👴', '♂️', '♀️', '🍊', '☀️', '🥛', '🐟', '🐝', '🍯', '🫘', '🌿', '🌼', '🌸', '😷', '🧴', '🌡️', '🩹', '🧺',
|
||||
'📜', '🏛️', '⛰️', '🍯', '☯️', '🌿', '9️⃣', '💊', '💪', '⛰️', '🩹', '🌻', '🧪', '🚢', '🔬', '⭐', '🧬', '🧪', '🧬', '💊', '🧬', '🔬', '🏥', '🥣', '🐄', '🥛', '🏠', '❄️', '🪒', '⚡', '🔋', '🍳', '🥛', '📱', '🍚', '🍎', '📱'
|
||||
]
|
||||
|
||||
// 尝试精确匹配
|
||||
for (let i = 0; i < iconKeys.length; i++) {
|
||||
|
||||
@@ -439,8 +439,14 @@ const getBrandIcon = (name: string): string => {
|
||||
return '🏢'
|
||||
}
|
||||
// 常见品牌图标映射(使用数组方式避免 Object.keys 问题)
|
||||
const iconKeys = ['感冒', '发烧', '咳嗽', '消炎', '维生素', '钙片', '胃药', '止痛', '过敏', '皮肤', '眼药水', '口腔', '血压', '血糖', '血脂', '保健', '养生', '减肥', '美容', '母婴', '儿童', '老人', '男性', '女性', '维生素C', '维生素D', '蛋白粉', '鱼油', '蜂胶', '阿胶', '红枣', '枸杞', '菊花', '金银花', '口罩', '消毒液', '体温计', '创可贴', '棉签']
|
||||
const iconValues = ['💊', '🌡️', '😷', '🔬', '💊', '🦴', '🫁', '💉', '🌸', '🧴', '👁️', '🦷', '❤️', '🩸', '💓', '🧬', '🍵', '⚖️', '💅', '👶', '🧒', '👴', '♂️', '♀️', '🍊', '☀️', '🥛', '🐟', '🐝', '🍯', '🫘', '🌿', '🌼', '🌸', '😷', '🧴', '🌡️', '🩹', '🧺']
|
||||
const iconKeys = [
|
||||
'感冒', '发烧', '咳嗽', '消炎', '维生素', '钙片', '胃药', '止痛', '过敏', '皮肤', '眼药水', '口腔', '血压', '血糖', '血脂', '保健', '养生', '减肥', '美容', '母婴', '儿童', '老人', '男性', '女性', '维生素C', '维生素D', '蛋白粉', '鱼油', '蜂胶', '阿胶', '红枣', '枸杞', '菊花', '金银花', '口罩', '消毒液', '体温计', '创可贴', '棉签',
|
||||
'九芝堂', '同仁堂', '云南白药', '东阿阿胶', '太极', '江中', '三九', '华素制药', '汤臣倍健', '白云山', '修正', '葵花', '哈药', '扬子江', '恒瑞', '复星', '辉瑞', '阿斯利康', '罗氏', '默沙东', '赛诺菲', '诺华', '雅培', '雀巢', '蒙牛', '伊利', '海尔', '美的', '飞利浦', '西门子', '松下', '苏泊尔', '九阳', '华为', '小米', '苹果', '三星'
|
||||
]
|
||||
const iconValues = [
|
||||
'💊', '🌡️', '😷', '🔬', '💊', '🦴', '🫁', '💉', '🌸', '🧴', '👁️', '🦷', '❤️', '🩸', '💓', '🧬', '🍵', '⚖️', '💅', '👶', '🧒', '👴', '♂️', '♀️', '🍊', '☀️', '🥛', '🐟', '🐝', '🍯', '🫘', '🌿', '🌼', '🌸', '😷', '🧴', '🌡️', '🩹', '🧺',
|
||||
'📜', '🏛️', '⛰️', '🍯', '☯️', '🌿', '9️⃣', '💊', '💪', '⛰️', '🩹', '🌻', '🧪', '🚢', '🔬', '⭐', '🧬', '🧪', '🧬', '💊', '🧬', '🔬', '🏥', '🥣', '🐄', '🥛', '🏠', '❄️', '🪒', '⚡', '🔋', '🍳', '🥛', '📱', '🍚', '🍎', '📱'
|
||||
]
|
||||
|
||||
// 尝试精确匹配
|
||||
for (let i = 0; i < iconKeys.length; i++) {
|
||||
@@ -1384,7 +1390,6 @@ const navigateToReminders = () => uni.navigateTo({ url: '/pages/user/reminders'
|
||||
margin-bottom: 4px;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.card-desc {
|
||||
@@ -1592,7 +1597,6 @@ const navigateToReminders = () => uni.navigateTo({ url: '/pages/user/reminders'
|
||||
.keywords-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
@@ -1602,7 +1606,6 @@ const navigateToReminders = () => uni.navigateTo({ url: '/pages/user/reminders'
|
||||
padding: 8px 16px;
|
||||
background: #f5f5f5;
|
||||
border-radius: 20px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
|
||||
@@ -35,50 +35,142 @@
|
||||
|
||||
<script setup lang="uts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import { supabaseService } from '@/utils/supabaseService.uts'
|
||||
|
||||
const orderId = ref('')
|
||||
const productImage = ref('/static/product1.jpg')
|
||||
const logisticsStatus = ref('运输中')
|
||||
const courierName = ref('顺丰速运')
|
||||
const courierPhone = ref('95338')
|
||||
const trackingNo = ref('SF1234567890')
|
||||
const logisticsStatus = ref('暂无物流信息')
|
||||
const courierName = ref('')
|
||||
const courierPhone = ref('')
|
||||
const trackingNo = ref('')
|
||||
|
||||
type TrackItem = {
|
||||
desc: string
|
||||
desc: string,
|
||||
time: string
|
||||
}
|
||||
|
||||
const trackList = ref<TrackItem[]>([
|
||||
{
|
||||
desc: '【深圳市】快件已到达 深圳南山集散中心',
|
||||
time: '2024-01-26 14:30:00'
|
||||
},
|
||||
{
|
||||
desc: '【广州市】快件已从 广州转运中心 发出,准备发往 深圳南山集散中心',
|
||||
time: '2024-01-26 09:20:00'
|
||||
},
|
||||
{
|
||||
desc: '【广州市】快件已到达 广州转运中心',
|
||||
time: '2024-01-25 22:15:00'
|
||||
},
|
||||
{
|
||||
desc: '【杭州市】商家已发货',
|
||||
time: '2024-01-25 18:00:00'
|
||||
}
|
||||
])
|
||||
const trackList = ref<TrackItem[]>([])
|
||||
|
||||
// 加载物流信息函数 - 必须在 onLoad 之前定义
|
||||
const loadLogisticsInfo = async () => {
|
||||
if (orderId.value == '') return
|
||||
|
||||
try {
|
||||
console.log('[logistics] 开始加载物流信息, orderId:', orderId.value)
|
||||
const order = await supabaseService.getOrderDetail(orderId.value)
|
||||
console.log('[logistics] 获取订单结果:', order != null ? '成功' : '失败')
|
||||
|
||||
if (order != null) {
|
||||
const orderStr = JSON.stringify(order)
|
||||
console.log('[logistics] 订单JSON:', orderStr)
|
||||
const orderParsed = JSON.parse(orderStr)
|
||||
if (orderParsed == null) {
|
||||
console.error('[logistics] 解析订单数据失败')
|
||||
return
|
||||
}
|
||||
const orderObj = orderParsed as UTSJSONObject
|
||||
|
||||
// 获取物流信息
|
||||
const trackingNoVal = orderObj.getString('tracking_no')
|
||||
const carrierNameVal = orderObj.getString('carrier_name')
|
||||
const shippingStatus = orderObj.getNumber('shipping_status')
|
||||
|
||||
console.log('[logistics] tracking_no:', trackingNoVal)
|
||||
console.log('[logistics] carrier_name:', carrierNameVal)
|
||||
console.log('[logistics] shipping_status:', shippingStatus)
|
||||
|
||||
if (trackingNoVal != null && trackingNoVal != '') {
|
||||
trackingNo.value = trackingNoVal
|
||||
} else {
|
||||
console.log('[logistics] 物流单号为空,订单可能未发货')
|
||||
// 物流单号为空时显示提示
|
||||
trackingNo.value = '暂无物流单号'
|
||||
logisticsStatus.value = '商家未填写物流信息'
|
||||
}
|
||||
|
||||
if (carrierNameVal != null && carrierNameVal != '') {
|
||||
courierName.value = carrierNameVal
|
||||
// 根据快递公司设置电话
|
||||
if (carrierNameVal.includes('顺丰')) {
|
||||
courierPhone.value = '95338'
|
||||
} else if (carrierNameVal.includes('中通')) {
|
||||
courierPhone.value = '95311'
|
||||
} else if (carrierNameVal.includes('圆通')) {
|
||||
courierPhone.value = '95554'
|
||||
} else if (carrierNameVal.includes('韵达')) {
|
||||
courierPhone.value = '95546'
|
||||
} else if (carrierNameVal.includes('申通')) {
|
||||
courierPhone.value = '95543'
|
||||
} else {
|
||||
courierPhone.value = ''
|
||||
}
|
||||
}
|
||||
|
||||
// 根据发货状态设置物流状态
|
||||
if (shippingStatus == 2) {
|
||||
logisticsStatus.value = '已签收'
|
||||
} else if (shippingStatus == 1) {
|
||||
logisticsStatus.value = '运输中'
|
||||
} else {
|
||||
logisticsStatus.value = '待发货'
|
||||
}
|
||||
|
||||
// 获取商品图片
|
||||
const itemsRaw = orderObj.get('ml_order_items')
|
||||
if (itemsRaw != null && Array.isArray(itemsRaw)) {
|
||||
const items = itemsRaw as any[]
|
||||
if (items.length > 0) {
|
||||
const firstItem = items[0]
|
||||
const itemStr = JSON.stringify(firstItem)
|
||||
const itemParsed = JSON.parse(itemStr)
|
||||
if (itemParsed != null) {
|
||||
const itemObj = itemParsed as UTSJSONObject
|
||||
const imgUrl = itemObj.getString('image_url')
|
||||
if (imgUrl != null && imgUrl != '') {
|
||||
productImage.value = imgUrl
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 构建物流轨迹(如果有发货时间)
|
||||
const shippedAt = orderObj.getString('shipped_at')
|
||||
if (shippedAt != null && shippedAt != '') {
|
||||
const trackItem: TrackItem = {
|
||||
desc: '商家已发货,等待快递揽收',
|
||||
time: shippedAt
|
||||
}
|
||||
trackList.value.push(trackItem)
|
||||
}
|
||||
|
||||
// 如果已签收,添加签收信息
|
||||
const deliveredAt = orderObj.getString('delivered_at')
|
||||
if (deliveredAt != null && deliveredAt != '') {
|
||||
const trackItem: TrackItem = {
|
||||
desc: '快件已签收',
|
||||
time: deliveredAt
|
||||
}
|
||||
trackList.value.unshift(trackItem)
|
||||
logisticsStatus.value = '已签收'
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('加载物流信息失败:', e)
|
||||
}
|
||||
}
|
||||
|
||||
onLoad((options) => {
|
||||
if (options == null) return
|
||||
const orderIdValue = options['orderId']
|
||||
if (orderIdValue != null) {
|
||||
orderId.value = orderIdValue as string
|
||||
loadLogisticsInfo()
|
||||
}
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
const pages = getCurrentPages()
|
||||
const currentPage = pages[pages.length - 1]
|
||||
const options = currentPage.options
|
||||
if (options != null) {
|
||||
const optionsObj = options as UTSJSONObject
|
||||
const orderIdValue = optionsObj.getString('orderId')
|
||||
if (orderIdValue != null) {
|
||||
orderId.value = orderIdValue
|
||||
// 这里可以根据orderId去请求真实的物流信息
|
||||
}
|
||||
}
|
||||
// 逻辑已移到 onLoad
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
1358
pages/mall/consumer/orders copy.uvue
Normal file
1358
pages/mall/consumer/orders copy.uvue
Normal file
File diff suppressed because it is too large
Load Diff
@@ -18,13 +18,20 @@
|
||||
</view>
|
||||
|
||||
<!-- 订单状态筛选 -->
|
||||
<view class="order-tabs">
|
||||
<scroll-view scroll-x class="tab-scroll" :show-scrollbar="false">
|
||||
<view class="tab-container">
|
||||
<view class="order-tabs-fixed-container">
|
||||
<view
|
||||
:class="['tab-item-fixed', { active: activeTab === 'all' }]"
|
||||
@click="switchTab('all')"
|
||||
>
|
||||
<text class="tab-name">全部</text>
|
||||
<view v-if="activeTab === 'all'" class="active-indicator"></view>
|
||||
</view>
|
||||
<scroll-view scroll-x="true" class="tab-scroll-mobile" :show-scrollbar="false" :scroll-with-animation="true">
|
||||
<view class="tab-container-mobile">
|
||||
<view
|
||||
v-for="tab in orderTabs"
|
||||
v-for="tab in orderTabsMobile"
|
||||
:key="tab.id"
|
||||
:class="['tab-item', { active: activeTab === tab.id }]"
|
||||
:class="['tab-item-mobile', { active: activeTab === tab.id }]"
|
||||
@click="switchTab(tab.id)"
|
||||
>
|
||||
<text class="tab-name">{{ tab.name }}</text>
|
||||
@@ -58,10 +65,15 @@
|
||||
v-for="order in orders"
|
||||
:key="order.id"
|
||||
class="order-card"
|
||||
@click="viewOrderDetail(order.id)"
|
||||
>
|
||||
<!-- 订单头部 -->
|
||||
<view class="order-header">
|
||||
<text class="order-no">订单号:{{ order.order_no }}</text>
|
||||
<!-- 订单头部:显示店铺名称 -->
|
||||
<view class="order-card-header">
|
||||
<view class="shop-info">
|
||||
<text class="shop-icon">🏪</text>
|
||||
<text class="shop-name">{{ order.shop_name != null && order.shop_name != '' ? order.shop_name : '自营店铺' }}</text>
|
||||
<text class="arrow-right">›</text>
|
||||
</view>
|
||||
<text :class="['order-status', getStatusClass(order.status)]">
|
||||
{{ getStatusText(order.status) }}
|
||||
</text>
|
||||
@@ -81,34 +93,29 @@
|
||||
mode="aspectFill"
|
||||
/>
|
||||
<view class="product-info">
|
||||
<text class="product-name">{{ product.name }}</text>
|
||||
<text class="product-spec">{{ product.spec }}</text>
|
||||
<view class="product-top-info">
|
||||
<text class="product-name">{{ product.name }}</text>
|
||||
<text class="product-spec">{{ product.spec }}</text>
|
||||
</view>
|
||||
<view class="product-footer">
|
||||
<text class="product-price">¥{{ product.price }}</text>
|
||||
<text class="product-quantity">×{{ product.quantity }}</text>
|
||||
<text class="product-quantity">x{{ product.quantity }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 订单信息 -->
|
||||
<view class="order-info">
|
||||
<view class="info-row">
|
||||
<text class="info-label">商品合计</text>
|
||||
<text class="info-value">¥{{ order.product_amount }}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">运费</text>
|
||||
<text class="info-value">¥{{ order.shipping_fee }}</text>
|
||||
</view>
|
||||
<view class="info-row total">
|
||||
<text class="info-label">实付款</text>
|
||||
<text class="info-value total-price">¥{{ order.total_amount }}</text>
|
||||
<!-- 订单汇总信息 -->
|
||||
<view class="order-summary">
|
||||
<text class="order-time">{{ formatDate(order.create_time) }}</text>
|
||||
<view class="summary-right">
|
||||
<text class="summary-label">共{{ order.products.length }}件商品 实付:</text>
|
||||
<text class="summary-price">¥{{ order.total_amount }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 订单操作 -->
|
||||
<view class="order-actions">
|
||||
<view class="order-actions" @click.stop="">
|
||||
<view v-if="order.status === 1" class="action-buttons">
|
||||
<button class="action-btn cancel" @click="cancelOrder(order.id)">取消订单</button>
|
||||
<button class="action-btn pay" @click="payOrder(order.id)">立即支付</button>
|
||||
@@ -162,24 +169,6 @@ import { ref, reactive, onMounted, computed } from 'vue'
|
||||
import { onShow, onLoad, onBackPress } from '@dcloudio/uni-app'
|
||||
import { supabaseService } from '@/utils/supabaseService.uts'
|
||||
|
||||
// 拦截返回事件,避免跳回登录页
|
||||
onBackPress((options) => {
|
||||
if (options.from === 'navigateBack') {
|
||||
const pages = getCurrentPages()
|
||||
if (pages.length > 1) {
|
||||
const prevPage = pages[pages.length - 2]
|
||||
// 如果上一页是登录页,则重定向到个人中心
|
||||
if (prevPage.route.includes('login')) {
|
||||
uni.redirectTo({
|
||||
url: '/pages/mall/consumer/profile'
|
||||
})
|
||||
return true
|
||||
}
|
||||
}
|
||||
}
|
||||
return false
|
||||
})
|
||||
|
||||
// 定义标签页类型
|
||||
type OrderTabItem = {
|
||||
id: string,
|
||||
@@ -206,6 +195,8 @@ type OrderItem = {
|
||||
product_amount: number,
|
||||
shipping_fee: number,
|
||||
total_amount: number,
|
||||
merchant_id: string,
|
||||
shop_name: string,
|
||||
products: OrderProduct[]
|
||||
}
|
||||
|
||||
@@ -230,7 +221,10 @@ const orderTabs = ref<OrderTabItem[]>([
|
||||
{ id: 'cancelled', name: '已取消', count: 0 }
|
||||
])
|
||||
|
||||
// Removed Mock Data
|
||||
// 模拟状态筛选(除去"全部"后的其余标签)
|
||||
const orderTabsMobile = computed((): OrderTabItem[] => {
|
||||
return orderTabs.value.filter((tab: OrderTabItem) => tab.id !== 'all')
|
||||
})
|
||||
|
||||
|
||||
// 辅助函数:获取状态码
|
||||
@@ -243,59 +237,98 @@ const getStatusByTab = (tabId: string): number => {
|
||||
return 0
|
||||
}
|
||||
|
||||
// 辅助函数:解析规格文本
|
||||
const parseSpecText = (specs: any): string => {
|
||||
if (specs == null) return ''
|
||||
if (typeof specs === 'string') return specs
|
||||
// 对于对象类型,尝试转为JSON字符串或简单处理
|
||||
// 格式化规格对象为友好的文本 - 必须在 parseSpecText 之前定义
|
||||
function formatSpecObj(obj: any): string {
|
||||
if (obj == null) return ''
|
||||
if (typeof obj !== 'object') {
|
||||
// 非对象类型直接返回字符串形式
|
||||
if (typeof obj === 'string') return obj
|
||||
if (typeof obj === 'number') return obj.toString()
|
||||
return ''
|
||||
}
|
||||
|
||||
try {
|
||||
return JSON.stringify(specs)
|
||||
const objStr = JSON.stringify(obj)
|
||||
const objParsed = JSON.parse(objStr)
|
||||
if (objParsed == null) return ''
|
||||
|
||||
const specObj = objParsed as UTSJSONObject
|
||||
|
||||
// 使用 JSON.stringify 获取所有键
|
||||
const specObjStr = JSON.stringify(specObj)
|
||||
const specObjForKeys = JSON.parse(specObjStr) as UTSJSONObject
|
||||
|
||||
// 手动提取键值对
|
||||
const parts: string[] = []
|
||||
|
||||
// 尝试获取已知字段
|
||||
const colorVal = specObjForKeys.getString('Color')
|
||||
if (colorVal != null && colorVal != '') {
|
||||
parts.push('Color: ' + colorVal)
|
||||
}
|
||||
|
||||
const sizeVal = specObjForKeys.getString('Size')
|
||||
if (sizeVal != null && sizeVal != '') {
|
||||
parts.push('Size: ' + sizeVal)
|
||||
}
|
||||
|
||||
const defaultVal = specObjForKeys.getString('默认')
|
||||
if (defaultVal != null && defaultVal != '') {
|
||||
parts.push('默认: ' + defaultVal)
|
||||
}
|
||||
|
||||
// 如果没有匹配到已知字段,尝试直接显示 JSON
|
||||
if (parts.length === 0) {
|
||||
// 尝试遍历对象
|
||||
const objAny = specObjForKeys as any
|
||||
if (objAny != null) {
|
||||
return specObjStr.replace(/[{}"]/g, '').replace(/:/g, ': ').replace(/,/g, ' | ')
|
||||
}
|
||||
}
|
||||
|
||||
return parts.join(' | ')
|
||||
} catch (e) {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
|
||||
// 辅助函数:解析规格文本
|
||||
function parseSpecText(specs: any): string {
|
||||
if (specs == null) return ''
|
||||
if (typeof specs === 'string') {
|
||||
// 如果是 JSON 字符串,尝试解析
|
||||
if (specs.startsWith('{') || specs.startsWith('[')) {
|
||||
try {
|
||||
const parsed = JSON.parse(specs)
|
||||
if (parsed == null) return specs
|
||||
return formatSpecObj(parsed)
|
||||
} catch (e) {
|
||||
return specs
|
||||
}
|
||||
}
|
||||
return specs
|
||||
}
|
||||
// 对于对象类型,格式化显示
|
||||
return formatSpecObj(specs)
|
||||
}
|
||||
|
||||
// 辅助函数:更新标签计数
|
||||
const updateTabsCounts = (allOrders: any[]) => {
|
||||
// 直接重新赋值整个数组
|
||||
const tabsData = orderTabs.value
|
||||
const updateTabsCounts = (allOrders: OrderItem[]) => {
|
||||
// 计算各状态数量
|
||||
const countAll = allOrders.length
|
||||
const countPending = allOrders.filter((o: any) => {
|
||||
const obj = o as Record<string, any>
|
||||
return obj['status'] === 1
|
||||
}).length
|
||||
const countShipping = allOrders.filter((o: any) => {
|
||||
const obj = o as Record<string, any>
|
||||
return obj['status'] === 2
|
||||
}).length
|
||||
const countDelivering = allOrders.filter((o: any) => {
|
||||
const obj = o as Record<string, any>
|
||||
return obj['status'] === 3
|
||||
}).length
|
||||
const countCompleted = allOrders.filter((o: any) => {
|
||||
const obj = o as Record<string, any>
|
||||
return obj['status'] === 4
|
||||
}).length
|
||||
const countCancelled = allOrders.filter((o: any) => {
|
||||
const obj = o as Record<string, any>
|
||||
return obj['status'] === 5
|
||||
}).length
|
||||
const countPending = allOrders.filter((o: OrderItem) => o.status === 1).length
|
||||
const countShipping = allOrders.filter((o: OrderItem) => o.status === 2).length
|
||||
const countDelivering = allOrders.filter((o: OrderItem) => o.status === 3).length
|
||||
const countCompleted = allOrders.filter((o: OrderItem) => o.status === 4).length
|
||||
const countCancelled = allOrders.filter((o: OrderItem) => o.status === 5).length
|
||||
|
||||
// 更新数组元素
|
||||
const tabsArr = tabsData as any[]
|
||||
const tab0 = tabsArr[0] as Record<string, any>
|
||||
tab0['count'] = countAll
|
||||
const tab1 = tabsArr[1] as Record<string, any>
|
||||
tab1['count'] = countPending
|
||||
const tab2 = tabsArr[2] as Record<string, any>
|
||||
tab2['count'] = countShipping
|
||||
const tab3 = tabsArr[3] as Record<string, any>
|
||||
tab3['count'] = countDelivering
|
||||
const tab4 = tabsArr[4] as Record<string, any>
|
||||
tab4['count'] = countCompleted
|
||||
const tab5 = tabsArr[5] as Record<string, any>
|
||||
tab5['count'] = countCancelled
|
||||
orderTabs.value[0].count = countAll
|
||||
orderTabs.value[1].count = countPending
|
||||
orderTabs.value[2].count = countShipping
|
||||
orderTabs.value[3].count = countDelivering
|
||||
orderTabs.value[4].count = countCompleted
|
||||
orderTabs.value[5].count = countCancelled
|
||||
}
|
||||
|
||||
// 辅助函数:按标签筛选订单
|
||||
@@ -317,69 +350,124 @@ const loadOrders = async () => {
|
||||
try {
|
||||
// Fetch all orders from Supabase (status=0)
|
||||
const fetchedOrders = await supabaseService.getOrders(0)
|
||||
console.log('[loadOrders] 获取到订单数量:', fetchedOrders.length)
|
||||
|
||||
// Map to View Model
|
||||
const mappedOrders: any[] = []
|
||||
const mappedOrders: OrderItem[] = []
|
||||
for (let i = 0; i < fetchedOrders.length; i++) {
|
||||
const order = fetchedOrders[i]
|
||||
const orderObj = order as Record<string, any>
|
||||
const items = orderObj['ml_order_items'] as any[]
|
||||
const productsList: any[] = []
|
||||
// 使用 JSON 序列化转换
|
||||
const orderStr = JSON.stringify(order)
|
||||
const orderParsed = JSON.parse(orderStr)
|
||||
if (orderParsed == null) continue
|
||||
const orderObj = orderParsed as UTSJSONObject
|
||||
|
||||
if (items != null) {
|
||||
for (let j = 0; j < items.length; j++) {
|
||||
const item = items[j]
|
||||
const itemObj = item as Record<string, any>
|
||||
const specRaw = itemObj['specifications']
|
||||
const specText = specRaw != null ? parseSpecText(specRaw) : ''
|
||||
productsList.push({
|
||||
id: itemObj['product_id'],
|
||||
name: itemObj['product_name'],
|
||||
price: itemObj['price'],
|
||||
image: itemObj['image_url'] ?? '/static/default-product.png',
|
||||
spec: specText,
|
||||
quantity: itemObj['quantity']
|
||||
})
|
||||
const itemsRaw = orderObj.get('ml_order_items')
|
||||
const productsList: OrderProduct[] = []
|
||||
|
||||
console.log('[loadOrders] 订单商品数据:', itemsRaw)
|
||||
|
||||
if (itemsRaw != null) {
|
||||
// 先检查是否为数组
|
||||
if (Array.isArray(itemsRaw)) {
|
||||
const items = itemsRaw as any[]
|
||||
console.log('[loadOrders] 商品数量:', items.length)
|
||||
for (let j = 0; j < items.length; j++) {
|
||||
const item = items[j]
|
||||
const itemStr = JSON.stringify(item)
|
||||
const itemParsed = JSON.parse(itemStr)
|
||||
if (itemParsed == null) continue
|
||||
const itemObj = itemParsed as UTSJSONObject
|
||||
|
||||
const specRaw = itemObj.get('specifications')
|
||||
const specText = specRaw != null ? parseSpecText(specRaw) : ''
|
||||
|
||||
const productId = itemObj.getString('product_id')
|
||||
const productName = itemObj.getString('product_name')
|
||||
const price = itemObj.getNumber('price')
|
||||
const imageUrl = itemObj.getString('image_url')
|
||||
const quantity = itemObj.getNumber('quantity')
|
||||
|
||||
console.log('[loadOrders] 商品:', productName, '图片:', imageUrl, '规格:', specText)
|
||||
|
||||
const productItem: OrderProduct = {
|
||||
id: productId ?? '',
|
||||
name: productName ?? '未知商品',
|
||||
price: price ?? 0,
|
||||
image: imageUrl ?? '/static/default-product.png',
|
||||
spec: specText,
|
||||
quantity: quantity ?? 1
|
||||
}
|
||||
productsList.push(productItem)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
mappedOrders.push({
|
||||
id: orderObj['id'],
|
||||
order_no: orderObj['order_no'],
|
||||
status: orderObj['order_status'],
|
||||
create_time: orderObj['created_at'],
|
||||
product_amount: orderObj['product_amount'] ?? 0,
|
||||
shipping_fee: orderObj['shipping_fee'] ?? 0,
|
||||
total_amount: orderObj['total_amount'] ?? orderObj['paid_amount'] ?? 0,
|
||||
const orderId = orderObj.getString('id')
|
||||
const orderNo = orderObj.getString('order_no')
|
||||
const orderStatus = orderObj.getNumber('order_status')
|
||||
const createdAt = orderObj.getString('created_at')
|
||||
const productAmount = orderObj.getNumber('product_amount')
|
||||
const shippingFee = orderObj.getNumber('shipping_fee')
|
||||
const totalAmount = orderObj.getNumber('total_amount')
|
||||
const paidAmount = orderObj.getNumber('paid_amount')
|
||||
const merchantId = orderObj.getString('merchant_id')
|
||||
|
||||
// 从关联查询的 ml_shops 表获取店铺名称
|
||||
let shopName = '自营店铺'
|
||||
const shopsRaw = orderObj.get('ml_shops')
|
||||
if (shopsRaw != null) {
|
||||
const shopStr = JSON.stringify(shopsRaw)
|
||||
const shopParsed = JSON.parse(shopStr)
|
||||
if (shopParsed != null) {
|
||||
const shopObj = shopParsed as UTSJSONObject
|
||||
const shopNameFromDb = shopObj.getString('shop_name')
|
||||
if (shopNameFromDb != null && shopNameFromDb != '') {
|
||||
shopName = shopNameFromDb
|
||||
}
|
||||
}
|
||||
} else if (merchantId != null && merchantId != '') {
|
||||
shopName = '商家店铺'
|
||||
}
|
||||
|
||||
console.log('[loadOrders] 订单号:', orderNo, '店铺:', shopName, '商品数:', productsList.length)
|
||||
|
||||
// 如果没有商品数据,添加一个占位商品
|
||||
if (productsList.length === 0) {
|
||||
const placeholderProduct: OrderProduct = {
|
||||
id: 'placeholder',
|
||||
name: '订单商品',
|
||||
price: totalAmount ?? paidAmount ?? 0,
|
||||
image: '/static/default-product.png',
|
||||
spec: '',
|
||||
quantity: 1
|
||||
}
|
||||
productsList.push(placeholderProduct)
|
||||
}
|
||||
|
||||
const mappedOrder: OrderItem = {
|
||||
id: orderId ?? '',
|
||||
order_no: orderNo ?? '',
|
||||
status: orderStatus ?? 1,
|
||||
create_time: createdAt ?? '',
|
||||
product_amount: productAmount ?? 0,
|
||||
shipping_fee: shippingFee ?? 0,
|
||||
total_amount: totalAmount ?? paidAmount ?? 0,
|
||||
merchant_id: merchantId ?? '',
|
||||
shop_name: shopName,
|
||||
products: productsList
|
||||
})
|
||||
}
|
||||
mappedOrders.push(mappedOrder)
|
||||
}
|
||||
|
||||
// Sort by created_at desc
|
||||
mappedOrders.sort((a: any, b: any) => {
|
||||
const aObj = a as Record<string, any>
|
||||
const bObj = b as Record<string, any>
|
||||
const timeA = new Date(aObj['create_time'] as string).getTime()
|
||||
const timeB = new Date(bObj['create_time'] as string).getTime()
|
||||
// Sort by created_at desc - 直接使用 OrderItem 类型访问属性
|
||||
mappedOrders.sort((a: OrderItem, b: OrderItem) => {
|
||||
const timeA = new Date(a.create_time).getTime()
|
||||
const timeB = new Date(b.create_time).getTime()
|
||||
return timeB - timeA
|
||||
})
|
||||
|
||||
// 将 mappedOrders 转换为 OrderItem[] 类型
|
||||
const typedOrders: OrderItem[] = []
|
||||
for (let i = 0; i < mappedOrders.length; i++) {
|
||||
const mo = mappedOrders[i] as Record<string, any>
|
||||
typedOrders.push({
|
||||
id: mo['id'] as string,
|
||||
order_no: mo['order_no'] as string,
|
||||
status: mo['status'] as number,
|
||||
create_time: mo['create_time'] as string,
|
||||
product_amount: mo['product_amount'] as number,
|
||||
shipping_fee: mo['shipping_fee'] as number,
|
||||
total_amount: mo['total_amount'] as number,
|
||||
products: mo['products'] as OrderProduct[]
|
||||
})
|
||||
}
|
||||
allOrdersList.value = typedOrders
|
||||
allOrdersList.value = mappedOrders
|
||||
|
||||
// Update tab counts
|
||||
updateTabsCounts(mappedOrders)
|
||||
@@ -397,14 +485,17 @@ const loadOrders = async () => {
|
||||
|
||||
// 生命周期
|
||||
onLoad((options) => {
|
||||
if (options['status'] != null) {
|
||||
const status = options['status'] as string
|
||||
if (options == null) return
|
||||
const statusVal = options['status']
|
||||
if (statusVal != null) {
|
||||
const status = statusVal as string
|
||||
if (['all', 'pending', 'shipping', 'delivering', 'completed', 'cancelled'].includes(status)) {
|
||||
activeTab.value = status
|
||||
}
|
||||
}
|
||||
if (options['type'] != null) {
|
||||
const type = options['type'] as string
|
||||
const typeVal = options['type']
|
||||
if (typeVal != null) {
|
||||
const type = typeVal as string
|
||||
if (type === 'pending') activeTab.value = 'pending'
|
||||
else if (type === 'shipped') activeTab.value = 'delivering' // 映射到待收货
|
||||
else if (type === 'review') activeTab.value = 'completed' // 映射到已完成
|
||||
@@ -500,6 +591,8 @@ const getStatusText = (status: number): string => {
|
||||
if (status == 3) return '待收货'
|
||||
if (status == 4) return '已完成'
|
||||
if (status == 5) return '已取消'
|
||||
if (status == 6) return '退款中'
|
||||
if (status == 7) return '已退款'
|
||||
return '未知状态'
|
||||
}
|
||||
|
||||
@@ -510,6 +603,8 @@ const getStatusClass = (status: number): string => {
|
||||
if (status == 3) return 'status-delivering'
|
||||
if (status == 4) return 'status-completed'
|
||||
if (status == 5) return 'status-cancelled'
|
||||
if (status == 6) return 'status-refunding'
|
||||
if (status == 7) return 'status-refunded'
|
||||
return 'status-unknown'
|
||||
}
|
||||
|
||||
@@ -705,10 +800,12 @@ const goShopping = () => {
|
||||
<style>
|
||||
.orders-page {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #f5f5f5;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 头部 */
|
||||
@@ -774,62 +871,73 @@ const goShopping = () => {
|
||||
}
|
||||
|
||||
/* 标签页 */
|
||||
.order-tabs {
|
||||
.order-tabs-fixed-container {
|
||||
background-color: #ffffff;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
/* position: sticky; removed */
|
||||
/* top: 50px; removed */
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.tab-scroll {
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.tab-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 0 10px;
|
||||
/* width: max-content; removed */
|
||||
/* min-width: 100%; removed */
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
/* 移除 flex: 1,改为自适应宽度或固定最小宽度 */
|
||||
padding: 15px 15px; /* 增加水平内边距 */
|
||||
.tab-item-fixed {
|
||||
padding: 15px 15px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
white-space: nowrap; /* 防止文字换行 */
|
||||
flex-shrink: 0; /* 防止被压缩 */
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
min-width: 60px;
|
||||
}
|
||||
|
||||
.tab-item.active {
|
||||
.tab-item-fixed.active {
|
||||
color: #ff5000;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.tab-item.active::after {
|
||||
/* content: ''; removed */
|
||||
/* content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 2px;
|
||||
background-color: #ff5000; */
|
||||
.tab-scroll-mobile {
|
||||
flex: 1;
|
||||
white-space: nowrap;
|
||||
/* 移除 width: 0,改用更稳健的安卓适配方式 */
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.tab-container-mobile {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
/* 加上这个确保容器能够横向撑开 */
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.tab-item-mobile {
|
||||
padding: 15px 15px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row; /* 显式声明 */
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0; /* 绝对不能被压缩,否则无法滚动 */
|
||||
}
|
||||
|
||||
.tab-item-mobile.active {
|
||||
color: #ff5000;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.active-indicator {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 2px;
|
||||
bottom: 0px;
|
||||
left: 10px;
|
||||
right: 10px;
|
||||
height: 3px;
|
||||
background-color: #ff5000;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.tab-name {
|
||||
@@ -850,6 +958,8 @@ const goShopping = () => {
|
||||
/* 内容区 */
|
||||
.orders-content {
|
||||
flex: 1;
|
||||
height: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 空状态 */
|
||||
@@ -859,7 +969,6 @@ const goShopping = () => {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 80px 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
@@ -941,6 +1050,14 @@ const goShopping = () => {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.status-refunding {
|
||||
color: #ff5000;
|
||||
}
|
||||
|
||||
.status-refunded {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 订单商品 */
|
||||
.order-products {
|
||||
padding: 15px;
|
||||
@@ -948,7 +1065,9 @@ const goShopping = () => {
|
||||
|
||||
.order-product {
|
||||
display: flex;
|
||||
flex-direction: row; /* 显式声明横向排列 */
|
||||
margin-bottom: 15px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.order-product:last-child {
|
||||
@@ -959,30 +1078,46 @@ const goShopping = () => {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 8px;
|
||||
margin-right: 15px;
|
||||
margin-right: 12px;
|
||||
flex-shrink: 0; /* 防止图片被压缩 */
|
||||
}
|
||||
|
||||
.product-info {
|
||||
flex: 1;
|
||||
flex: 1; /* 占据右侧剩余所有空间 */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
height: 80px;
|
||||
overflow: hidden; /* 防止文字溢出 */
|
||||
}
|
||||
|
||||
.product-top-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.product-name {
|
||||
font-size: 15px;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
margin-bottom: 5px;
|
||||
line-height: 1.4;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
lines: 2;
|
||||
}
|
||||
|
||||
.product-spec {
|
||||
font-size: 13px;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
margin-bottom: 10px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.product-footer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.product-price {
|
||||
@@ -992,8 +1127,8 @@ const goShopping = () => {
|
||||
}
|
||||
|
||||
.product-quantity {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
font-size: 13px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 订单信息 */
|
||||
@@ -1128,6 +1263,114 @@ const goShopping = () => {
|
||||
}
|
||||
|
||||
/* 响应式适配 */
|
||||
@media screen and (min-width: 768px) {
|
||||
.order-list {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
padding: 20px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.order-card {
|
||||
width: 48%;
|
||||
margin: 0 1% 20px 1%;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1200px) {
|
||||
.order-card {
|
||||
width: 31%;
|
||||
margin: 0 1% 20px 1%;
|
||||
}
|
||||
}
|
||||
|
||||
/* 订单卡片新样式 */
|
||||
.order-card-header {
|
||||
padding: 12px 15px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #f9f9f9;
|
||||
}
|
||||
|
||||
.shop-info {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.shop-icon {
|
||||
font-size: 16px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.shop-name {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
max-width: 150px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
lines: 1;
|
||||
}
|
||||
|
||||
.arrow-right {
|
||||
font-size: 14px;
|
||||
color: #ccc;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.product-title-row, .product-spec-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.product-title-row {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.product-spec-row {
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.order-summary {
|
||||
padding: 10px 15px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-top: 1px solid #f9f9f9;
|
||||
}
|
||||
|
||||
.order-time {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.summary-right {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.summary-label {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.summary-price {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 320px) {
|
||||
.tab-item {
|
||||
padding: 0 10px;
|
||||
|
||||
@@ -22,6 +22,7 @@
|
||||
|
||||
<script setup lang="uts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import { supabaseService } from '@/utils/supabaseService.uts'
|
||||
|
||||
const orderId = ref('')
|
||||
@@ -56,12 +57,8 @@ const loadOrderInfo = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
const pages = getCurrentPages()
|
||||
const currentPage = pages[pages.length - 1]
|
||||
const options = currentPage.options as Record<string, any>
|
||||
|
||||
console.log('[payment-success] options:', JSON.stringify(options))
|
||||
onLoad((options) => {
|
||||
if (options == null) return
|
||||
|
||||
const orderIdValue = options['orderId']
|
||||
if (orderIdValue != null) {
|
||||
@@ -87,6 +84,10 @@ onMounted(() => {
|
||||
}
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
// 逻辑已移到 onLoad
|
||||
})
|
||||
|
||||
const viewOrder = () => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/mall/consumer/orders'
|
||||
@@ -182,9 +183,6 @@ const goHome = () => {
|
||||
border-radius: 22.5px;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
|
||||
@@ -204,11 +204,16 @@ const updateOrderInStorage = (targetOrderId: string, status: number) => {
|
||||
// 尝试从 'orders' 读取 (checkout页面写入的key)
|
||||
const ordersStr = uni.getStorageSync('orders')
|
||||
let orders: Record<string, any>[] = []
|
||||
if (ordersStr != null) {
|
||||
if (ordersStr != null && ordersStr !== '') {
|
||||
const parsed = JSON.parse(ordersStr as string)
|
||||
if (Array.isArray(parsed)) {
|
||||
for (let i = 0; i < parsed.length; i++) {
|
||||
orders.push(parsed[i] as Record<string, any>)
|
||||
// 使用 JSON 序列化转换
|
||||
const itemStr = JSON.stringify(parsed[i])
|
||||
const itemParsed = JSON.parse(itemStr)
|
||||
if (itemParsed != null) {
|
||||
orders.push(itemParsed as Record<string, any>)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -230,7 +235,8 @@ const updateOrderInStorage = (targetOrderId: string, status: number) => {
|
||||
uni.setStorageSync('orders', JSON.stringify(orders))
|
||||
console.log('订单状态已更新到Storage (orders):', targetOrderId, status)
|
||||
} else {
|
||||
console.warn('在Storage (orders)中未找到订单:', targetOrderId)
|
||||
// 本地缓存中没有订单数据是正常的,数据在数据库中
|
||||
console.log('本地缓存中无订单数据,已忽略:', targetOrderId)
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('更新订单状态失败', e)
|
||||
@@ -291,16 +297,26 @@ const loadOrderInfo = async () => {
|
||||
|
||||
const order = await supabaseService.getOrderDetail(orderId.value)
|
||||
if (order != null) {
|
||||
const orderObj = order as Record<string, any>
|
||||
orderNo.value = orderObj['order_no'] as string
|
||||
// Only update amount if not passed via options (options is priority for UI flow usually, but DB is source of truth)
|
||||
// But checking consistency is good
|
||||
const totalAmount = orderObj['total_amount']
|
||||
const dbAmount = totalAmount != null ? parseFloat(totalAmount.toString()) : 0
|
||||
// 使用 JSON 序列化转换对象
|
||||
const orderStr = JSON.stringify(order)
|
||||
const orderParsed = JSON.parse(orderStr)
|
||||
if (orderParsed == null) {
|
||||
console.error('订单数据解析失败')
|
||||
return
|
||||
}
|
||||
const orderObj = orderParsed as UTSJSONObject
|
||||
|
||||
const orderNoVal = orderObj.getString('order_no')
|
||||
if (orderNoVal != null) {
|
||||
orderNo.value = orderNoVal
|
||||
}
|
||||
|
||||
const totalAmount = orderObj.getNumber('total_amount')
|
||||
const dbAmount = totalAmount ?? 0
|
||||
if (dbAmount > 0) {
|
||||
amount.value = dbAmount
|
||||
}
|
||||
const items = orderObj['items']
|
||||
const items = orderObj.get('items')
|
||||
if (items != null && Array.isArray(items) && items.length > 0) {
|
||||
// Could update product name etc if displayed
|
||||
}
|
||||
@@ -315,43 +331,45 @@ const loadOrderInfo = async () => {
|
||||
}
|
||||
|
||||
// 生命周期
|
||||
onLoad((options) => {
|
||||
if (options != null) {
|
||||
const orderIdValue = options['orderId']
|
||||
if (orderIdValue != null) {
|
||||
orderId.value = orderIdValue as string
|
||||
loadOrderInfo()
|
||||
}
|
||||
|
||||
const amountValue = options['amount']
|
||||
if (amountValue != null) {
|
||||
amount.value = parseFloat(amountValue.toString())
|
||||
}
|
||||
|
||||
// 获取传递的价格详情
|
||||
const productAmountValue = options['productAmount']
|
||||
if (productAmountValue != null) {
|
||||
productAmount.value = parseFloat(productAmountValue.toString())
|
||||
}
|
||||
const deliveryFeeValue = options['deliveryFee']
|
||||
if (deliveryFeeValue != null) {
|
||||
deliveryFee.value = parseFloat(deliveryFeeValue.toString())
|
||||
}
|
||||
const discountAmountValue = options['discountAmount']
|
||||
if (discountAmountValue != null) {
|
||||
discountAmount.value = parseFloat(discountAmountValue.toString())
|
||||
}
|
||||
|
||||
// 如果没有传详情,尝试根据总价估算(兼容旧逻辑,但优先使用传参)
|
||||
if (productAmountValue == null && amount.value > 0) {
|
||||
calculatePriceDetails(amount.value)
|
||||
}
|
||||
|
||||
loadPaymentMethods()
|
||||
loadUserBalance()
|
||||
}
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
const pages = getCurrentPages()
|
||||
const currentPage = pages[pages.length - 1]
|
||||
const options = currentPage.options as Record<string, any>
|
||||
|
||||
const orderIdValue = options['orderId']
|
||||
if (orderIdValue != null) {
|
||||
orderId.value = orderIdValue as string
|
||||
loadOrderInfo()
|
||||
}
|
||||
|
||||
const amountValue = options['amount']
|
||||
if (amountValue != null) {
|
||||
amount.value = parseFloat(amountValue.toString())
|
||||
}
|
||||
|
||||
// 获取传递的价格详情
|
||||
const productAmountValue = options['productAmount']
|
||||
if (productAmountValue != null) {
|
||||
productAmount.value = parseFloat(productAmountValue.toString())
|
||||
}
|
||||
const deliveryFeeValue = options['deliveryFee']
|
||||
if (deliveryFeeValue != null) {
|
||||
deliveryFee.value = parseFloat(deliveryFeeValue.toString())
|
||||
}
|
||||
const discountAmountValue = options['discountAmount']
|
||||
if (discountAmountValue != null) {
|
||||
discountAmount.value = parseFloat(discountAmountValue.toString())
|
||||
}
|
||||
|
||||
// 如果没有传详情,尝试根据总价估算(兼容旧逻辑,但优先使用传参)
|
||||
if (productAmountValue == null && amount.value > 0) {
|
||||
calculatePriceDetails(amount.value)
|
||||
}
|
||||
|
||||
loadPaymentMethods()
|
||||
loadUserBalance()
|
||||
// onMounted 中的逻辑已移到 onLoad 中
|
||||
})
|
||||
|
||||
// 监听返回操作(包含系统返回键和导航栏返回按钮)
|
||||
@@ -370,11 +388,16 @@ onBackPress((options) => {
|
||||
const getCurrentUserId = (): string => {
|
||||
const userStore = uni.getStorageSync('userInfo')
|
||||
if (userStore != null) {
|
||||
const userObj = userStore as Record<string, any>
|
||||
const id = userObj['id']
|
||||
if (id != null) {
|
||||
return id as string
|
||||
}
|
||||
// 使用 JSON 序列化转换
|
||||
const userStr = JSON.stringify(userStore)
|
||||
const userParsed = JSON.parse(userStr)
|
||||
if (userParsed != null) {
|
||||
const userObj = userParsed as UTSJSONObject
|
||||
const id = userObj.getString('id')
|
||||
if (id != null) {
|
||||
return id
|
||||
}
|
||||
}
|
||||
}
|
||||
return ''
|
||||
}
|
||||
|
||||
@@ -649,9 +649,13 @@ export default {
|
||||
if (itemsRaw == null) return '/static/product1.jpg'
|
||||
const items = itemsRaw as any[]
|
||||
if (items.length > 0) {
|
||||
const firstItem = items[0] as Record<string, any>
|
||||
const imgUrl = firstItem['image_url'] as string
|
||||
const prodImg = firstItem['product_image'] as string
|
||||
const firstItem = items[0]
|
||||
const itemStr = JSON.stringify(firstItem)
|
||||
const itemParsed = JSON.parse(itemStr)
|
||||
if (itemParsed == null) return '/static/product1.jpg'
|
||||
const itemObj = itemParsed as UTSJSONObject
|
||||
const imgUrl = itemObj.getString('image_url')
|
||||
const prodImg = itemObj.getString('product_image')
|
||||
const img = (imgUrl != null && imgUrl !== '') ? imgUrl : prodImg
|
||||
if (img != null && img !== '') return img
|
||||
}
|
||||
@@ -663,12 +667,16 @@ export default {
|
||||
if (itemsRaw == null) return '精选商品'
|
||||
const items = itemsRaw as any[]
|
||||
if (items.length > 0) {
|
||||
const firstItem = items[0] as Record<string, any>
|
||||
const pName = firstItem['product_name'] as string
|
||||
const firstItem = items[0]
|
||||
const itemStr = JSON.stringify(firstItem)
|
||||
const itemParsed = JSON.parse(itemStr)
|
||||
if (itemParsed == null) return '精选商品'
|
||||
const itemObj = itemParsed as UTSJSONObject
|
||||
const pName = itemObj.getString('product_name')
|
||||
const name = (pName != null && pName !== '') ? pName : '商品'
|
||||
|
||||
if (items.length > 1) {
|
||||
return `${name} 等${items.length}件商品`
|
||||
return name + ' 等' + items.length + '件商品'
|
||||
}
|
||||
return name
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user