You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
90 lines
3.3 KiB
90 lines
3.3 KiB
<template>
|
|
<view class="page-chat">
|
|
<view class="nav-bar" :style="{ top: statusBarHeight + 'px' }">
|
|
<text class="nav-back" @tap="goBack">←</text>
|
|
<text class="nav-title">💬 调酒师</text>
|
|
<text></text>
|
|
</view>
|
|
|
|
<scroll-view class="chat-list" scroll-y :scroll-into-view="scrollToId">
|
|
<ChatBubble v-for="m in messages" :key="m.id" :msg="m" />
|
|
<view id="chat-bottom"></view>
|
|
</scroll-view>
|
|
|
|
<view class="chat-input-bar">
|
|
<input class="chat-input" v-model="inputText" placeholder="说点什么..." @confirm="sendMsg" />
|
|
<button class="chat-send" @tap="sendMsg">发送</button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { ref, onMounted, onUnmounted } from 'vue'
|
|
import { useCardStore } from '@/stores/card'
|
|
import { get, post } from '@/utils/request'
|
|
import { API } from '@/utils/constants'
|
|
import { startPoll, stopPoll } from '@/utils/poller'
|
|
import ChatBubble from '@/components/ChatBubble.vue'
|
|
|
|
export default {
|
|
components: { ChatBubble },
|
|
setup() {
|
|
const card = useCardStore()
|
|
const messages = ref([])
|
|
const inputText = ref('')
|
|
const scrollToId = ref('')
|
|
const statusBarHeight = ref(0)
|
|
let lastId = 0
|
|
|
|
async function loadMessages() {
|
|
try {
|
|
const res = await get(API.MESSAGE_LIST, { card_no: card.cardNo, since: lastId })
|
|
if (Array.isArray(res) && res.length > 0) {
|
|
messages.value = [...messages.value, ...res]
|
|
lastId = res[res.length - 1].id
|
|
scrollToId.value = 'chat-bottom'
|
|
}
|
|
} catch (e) {}
|
|
}
|
|
|
|
async function markRead() {
|
|
try {
|
|
await post(API.MESSAGE_READ, { card_no: card.cardNo })
|
|
card.clearUnread()
|
|
} catch (e) {}
|
|
}
|
|
|
|
async function sendMsg() {
|
|
const content = inputText.value.trim()
|
|
if (!content) return
|
|
inputText.value = ''
|
|
try {
|
|
await post(API.MESSAGE_SEND, { cardNo: card.cardNo, senderType: 'customer', content })
|
|
await loadMessages()
|
|
} catch (e) {}
|
|
}
|
|
|
|
function goBack() { uni.navigateBack() }
|
|
|
|
onMounted(() => {
|
|
const systemInfo = uni.getSystemInfoSync()
|
|
statusBarHeight.value = systemInfo.statusBarHeight
|
|
loadMessages(); markRead(); startPoll('chat', loadMessages, 5000)
|
|
})
|
|
onUnmounted(() => stopPoll('chat'))
|
|
|
|
return { messages, inputText, scrollToId, statusBarHeight, sendMsg, goBack }
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.page-chat{min-height:100vh;display:flex;flex-direction:column;background:var(--bg);width:100%}
|
|
.nav-bar{height:100rpx;position:fixed;top:0;z-index:100;background:var(--bg);display:flex;align-items:center;justify-content:space-between;padding:0 28rpx;border-bottom:1px solid var(--border);width:100%}
|
|
.nav-back{font-size:36rpx;color:var(--text-dim)}
|
|
.nav-title{font-size:32rpx;font-weight:800;color:var(--gold)}
|
|
.chat-list{flex:1;padding:16rpx 0;margin-top:100rpx}
|
|
.chat-input-bar{display:flex;align-items:center;padding:16rpx 24rpx;padding-bottom:calc(16rpx + var(--safe-b));background:var(--bg-card);border-top:1px solid var(--border);gap:16rpx}
|
|
.chat-input{flex:1;height:76rpx;background:var(--bg);border-radius:16rpx;padding:0 28rpx;font-size:28rpx;color:var(--text)}
|
|
.chat-send{width:104rpx;height:72rpx;border-radius:16rpx;background:var(--blue);color:#fff;border:none;font-size:26rpx;font-weight:700}
|
|
</style>
|