858 lines
22 KiB
Vue
858 lines
22 KiB
Vue
<template>
|
||
<view class="chat-page">
|
||
<!-- 自定义导航栏 -->
|
||
<view class="custom-navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
|
||
<view class="navbar-content">
|
||
<view class="nav-back" @click="goBack">
|
||
<image class="back-icon" src="/static/ic_back.png" mode="aspectFit"></image>
|
||
</view>
|
||
<text class="navbar-title">聊天</text>
|
||
<view class="nav-placeholder"></view>
|
||
</view>
|
||
</view>
|
||
<view :style="{ height: (statusBarHeight + 44) + 'px' }"></view>
|
||
<!-- 顶部订单信息栏 -->
|
||
<view class="order-bar" v-if="orderInfo.id">
|
||
<view class="order-bar-info" @click="goOrderDetail">
|
||
<text class="order-bar-text">
|
||
{{ formatOrderType(orderInfo.orderType) }}订单 #{{ orderInfo.orderNo }}
|
||
</text>
|
||
<text class="order-bar-link">查看详情 ›</text>
|
||
</view>
|
||
<view class="order-bar-actions">
|
||
<view class="bar-action-btn" @click="onCallPhone">
|
||
<text>📞 拨打电话</text>
|
||
</view>
|
||
<view class="bar-action-btn" @click="onContactService">
|
||
<text>💬 联系客服</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 聊天记录区域 -->
|
||
<scroll-view
|
||
class="chat-body"
|
||
scroll-y
|
||
:scroll-top="scrollTop"
|
||
scroll-with-animation
|
||
@scrolltoupper="loadMoreHistory"
|
||
>
|
||
<view v-if="loadingHistory" class="loading-history">
|
||
<text>加载中...</text>
|
||
</view>
|
||
<view
|
||
class="msg-row"
|
||
:class="{ 'msg-self': msg.isSelf, 'msg-center': msg.type === 'system' || msg.type === 'price-change' }"
|
||
v-for="(msg, index) in chatMessages"
|
||
:key="msg.id || index"
|
||
>
|
||
<!-- 系统提示消息（居中显示） -->
|
||
<view v-if="msg.type === 'system'" class="msg-system">
|
||
<text>{{ msg.content }}</text>
|
||
</view>
|
||
|
||
<!-- 改价申请消息 -->
|
||
<view v-else-if="msg.type === 'price-change'" class="price-change-card">
|
||
<view class="pc-header">
|
||
<text class="pc-title">{{ msg.isSelf ? '您' : '对方' }}发起了{{ msg.changeTypeLabel }}改价申请</text>
|
||
</view>
|
||
<view class="pc-body">
|
||
<view class="pc-row">
|
||
<text class="pc-label">原价</text>
|
||
<text class="pc-value">¥{{ msg.originalPrice }}</text>
|
||
</view>
|
||
<view class="pc-row">
|
||
<text class="pc-label">新价</text>
|
||
<text class="pc-value pc-new-price">¥{{ msg.newPrice }}</text>
|
||
</view>
|
||
<view class="pc-row" v-if="msg.difference !== 0">
|
||
<text class="pc-label">{{ msg.difference > 0 ? '需补缴' : '将退款' }}</text>
|
||
<text class="pc-value" :class="msg.difference > 0 ? 'pc-pay' : 'pc-refund'">
|
||
¥{{ Math.abs(msg.difference).toFixed(2) }}
|
||
</text>
|
||
</view>
|
||
</view>
|
||
<view v-if="msg.status === 'Pending' && !msg.isSelf" class="pc-actions">
|
||
<view class="pc-btn pc-accept" @click="respondPriceChange(msg.priceChangeId, 'Accepted')">
|
||
<text>同意</text>
|
||
</view>
|
||
<view class="pc-btn pc-reject" @click="respondPriceChange(msg.priceChangeId, 'Rejected')">
|
||
<text>拒绝</text>
|
||
</view>
|
||
</view>
|
||
<view v-else-if="msg.status === 'Pending' && msg.isSelf" class="pc-waiting">
|
||
<text>等待对方确认中</text>
|
||
</view>
|
||
<view v-else class="pc-result">
|
||
<text :class="msg.status === 'Accepted' ? 'pc-accepted' : 'pc-rejected'">
|
||
{{ msg.status === 'Accepted' ? '已同意' : '已拒绝' }}
|
||
</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 普通消息（文本/图片） -->
|
||
<template v-else>
|
||
<image
|
||
class="msg-avatar"
|
||
:src="msg.avatar || '/static/logo.png'"
|
||
mode="aspectFill"
|
||
></image>
|
||
<view class="msg-bubble">
|
||
<image
|
||
v-if="msg.type === 'image'"
|
||
class="msg-image"
|
||
:src="msg.content"
|
||
mode="widthFix"
|
||
@click="previewImage(msg.content)"
|
||
></image>
|
||
<text v-else class="msg-text">{{ msg.content }}</text>
|
||
</view>
|
||
</template>
|
||
</view>
|
||
</scroll-view>
|
||
|
||
<!-- 底部输入区域 -->
|
||
<view class="chat-footer">
|
||
<input
|
||
class="chat-input"
|
||
v-model="inputText"
|
||
placeholder="输入消息..."
|
||
confirm-type="send"
|
||
@confirm="sendMessage"
|
||
/>
|
||
<view class="more-btn" @click="toggleMoreMenu">
|
||
<text class="more-icon">+</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 更多功能菜单 -->
|
||
<view v-if="showMoreMenu" class="more-menu-mask" @click="showMoreMenu = false">
|
||
<view class="more-menu" @click.stop>
|
||
<view class="menu-item" @click="onSendImage">
|
||
<text class="menu-icon">🖼️</text>
|
||
<text class="menu-label">发送图片</text>
|
||
</view>
|
||
<view class="menu-item" @click="onChangeCommission">
|
||
<text class="menu-icon">💰</text>
|
||
<text class="menu-label">更改跑腿价格</text>
|
||
</view>
|
||
<view
|
||
class="menu-item"
|
||
v-if="showGoodsPriceBtn"
|
||
@click="onChangeGoodsPrice"
|
||
>
|
||
<text class="menu-icon">🏷️</text>
|
||
<text class="menu-label">更改商品价格</text>
|
||
</view>
|
||
<view
|
||
class="menu-item"
|
||
v-if="isRunner"
|
||
@click="onCompleteOrder"
|
||
>
|
||
<text class="menu-icon">✅</text>
|
||
<text class="menu-label">完成订单</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 改价弹窗 -->
|
||
<view v-if="showPriceChangePopup" class="popup-mask" @click="showPriceChangePopup = false">
|
||
<view class="popup-content" @click.stop>
|
||
<text class="popup-title">{{ priceChangeTypeLabel }}</text>
|
||
<view class="popup-field">
|
||
<text class="popup-label">当前价格</text>
|
||
<text class="popup-current-price">¥{{ currentPriceForChange }}</text>
|
||
</view>
|
||
<view class="popup-field">
|
||
<text class="popup-label">新价格</text>
|
||
<input
|
||
class="popup-input"
|
||
type="digit"
|
||
v-model="newPriceInput"
|
||
placeholder="请输入新价格"
|
||
/>
|
||
</view>
|
||
<view v-if="priceDifference !== 0" class="popup-diff">
|
||
<text v-if="priceDifference > 0 && isOwner" class="pc-pay">
|
||
需补缴 ¥{{ priceDifference.toFixed(2) }}（将跳转支付）
|
||
</text>
|
||
<text v-else-if="priceDifference < 0" class="pc-refund">
|
||
将退款 ¥{{ Math.abs(priceDifference).toFixed(2) }}
|
||
</text>
|
||
<text v-else-if="priceDifference > 0 && !isOwner" class="pc-pay">
|
||
对方需补缴 ¥{{ priceDifference.toFixed(2) }}
|
||
</text>
|
||
</view>
|
||
<view class="popup-actions">
|
||
<view class="popup-btn popup-cancel" @click="showPriceChangePopup = false">
|
||
<text>取消</text>
|
||
</view>
|
||
<view class="popup-btn popup-confirm" @click="submitPriceChange">
|
||
<text>发起修改申请</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { getOrderDetail, createPriceChange, respondPriceChange as respondPriceChangeApi } from '../../utils/api'
|
||
import { useUserStore } from '../../stores/user'
|
||
import {
|
||
initIM, logoutIM, onNewMessage, offNewMessage,
|
||
getMessageList, sendTextMessage, sendImageMessage,
|
||
sendCustomMessage, formatIMMessage
|
||
} from '../../utils/im'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
orderId: null,
|
||
orderInfo: {},
|
||
chatMessages: [],
|
||
inputText: '',
|
||
scrollTop: 0,
|
||
showMoreMenu: false,
|
||
// IM 相关
|
||
imUserId: '',
|
||
targetImUserId: '',
|
||
imReady: false,
|
||
nextReqMessageID: '',
|
||
historyCompleted: false,
|
||
loadingHistory: false,
|
||
// 改价弹窗
|
||
showPriceChangePopup: false,
|
||
priceChangeType: '',
|
||
newPriceInput: '',
|
||
submittingPriceChange: false,
|
||
statusBarHeight: 0
|
||
}
|
||
},
|
||
computed: {
|
||
isRunner() {
|
||
const userStore = useUserStore()
|
||
return this.orderInfo.runnerId === userStore.userId
|
||
},
|
||
isOwner() {
|
||
const userStore = useUserStore()
|
||
return this.orderInfo.ownerId === userStore.userId
|
||
},
|
||
showGoodsPriceBtn() {
|
||
const type = this.orderInfo.orderType
|
||
return type === 'Purchase' || type === 'Food'
|
||
},
|
||
priceChangeTypeLabel() {
|
||
return this.priceChangeType === 'Commission' ? '更改跑腿价格' : '更改商品价格'
|
||
},
|
||
currentPriceForChange() {
|
||
if (this.priceChangeType === 'Commission') {
|
||
return (this.orderInfo.commission || 0).toFixed(2)
|
||
}
|
||
return (this.orderInfo.goodsAmount || 0).toFixed(2)
|
||
},
|
||
priceDifference() {
|
||
const newPrice = parseFloat(this.newPriceInput)
|
||
if (isNaN(newPrice) || newPrice < 0) return 0
|
||
const original = this.priceChangeType === 'Commission'
|
||
? (this.orderInfo.commission || 0)
|
||
: (this.orderInfo.goodsAmount || 0)
|
||
return newPrice - original
|
||
}
|
||
},
|
||
async onLoad(options) {
|
||
const sysInfo = uni.getSystemInfoSync()
|
||
this.statusBarHeight = sysInfo.statusBarHeight || 0
|
||
this.orderId = options.orderId || null
|
||
// 从消息列表跳转时可能只有 targetUserId
|
||
this.targetImUserIdFromParam = options.targetUserId || null
|
||
if (this.orderId) {
|
||
await this.loadOrderInfo()
|
||
}
|
||
await this.loginIM()
|
||
},
|
||
onUnload() {
|
||
// 离开页面时移除消息监听
|
||
offNewMessage()
|
||
},
|
||
methods: {
|
||
goBack() { uni.navigateBack() },
|
||
|
||
/** 加载订单信息 */
|
||
async loadOrderInfo() {
|
||
if (!this.orderId) return
|
||
try {
|
||
const res = await getOrderDetail(this.orderId)
|
||
this.orderInfo = res || {}
|
||
} catch (e) {}
|
||
},
|
||
|
||
/** 登录 IM 并加载历史消息 */
|
||
async loginIM() {
|
||
try {
|
||
const { userId } = await initIM()
|
||
this.imUserId = userId
|
||
|
||
// 确定对方 IM 用户 ID
|
||
if (this.targetImUserIdFromParam) {
|
||
// 从消息列表跳转，直接使用传入的 targetUserId
|
||
this.targetImUserId = this.targetImUserIdFromParam
|
||
} else if (this.orderInfo.id) {
|
||
const userStore = useUserStore()
|
||
if (this.orderInfo.ownerId === userStore.userId) {
|
||
// 当前用户是单主，对方是跑腿
|
||
this.targetImUserId = `user_${this.orderInfo.runnerId}`
|
||
} else {
|
||
// 当前用户是跑腿，对方是单主
|
||
this.targetImUserId = `user_${this.orderInfo.ownerId}`
|
||
}
|
||
}
|
||
|
||
this.imReady = true
|
||
|
||
// 监听新消息
|
||
onNewMessage((msgList) => {
|
||
for (const msg of msgList) {
|
||
// 只处理当前会话的消息
|
||
if (msg.from === this.targetImUserId || msg.from === this.imUserId) {
|
||
const formatted = formatIMMessage(msg, this.imUserId)
|
||
this.chatMessages.push(formatted)
|
||
}
|
||
}
|
||
this.scrollToBottom()
|
||
})
|
||
|
||
// 拉取历史消息
|
||
await this.loadHistory()
|
||
} catch (e) {
|
||
console.error('[IM] 初始化失败:', e)
|
||
uni.showToast({ title: 'IM连接失败，消息功能暂不可用', icon: 'none' })
|
||
}
|
||
},
|
||
|
||
/** 拉取历史消息 */
|
||
async loadHistory() {
|
||
if (!this.imReady || !this.targetImUserId) return
|
||
this.loadingHistory = true
|
||
try {
|
||
const res = await getMessageList(this.targetImUserId, this.nextReqMessageID)
|
||
const formatted = res.messageList.map(m => formatIMMessage(m, this.imUserId))
|
||
// 历史消息插入到前面
|
||
this.chatMessages = [...formatted, ...this.chatMessages]
|
||
this.nextReqMessageID = res.nextReqMessageID
|
||
this.historyCompleted = res.isCompleted
|
||
this.scrollToBottom()
|
||
} catch (e) {
|
||
console.error('[IM] 拉取历史消息失败:', e)
|
||
} finally {
|
||
this.loadingHistory = false
|
||
}
|
||
},
|
||
|
||
/** 上拉加载更多历史 */
|
||
async loadMoreHistory() {
|
||
if (this.historyCompleted || this.loadingHistory) return
|
||
await this.loadHistory()
|
||
},
|
||
|
||
/** 发送文本消息 */
|
||
async sendMessage() {
|
||
if (!this.inputText.trim()) return
|
||
if (!this.imReady) {
|
||
uni.showToast({ title: 'IM未就绪', icon: 'none' })
|
||
return
|
||
}
|
||
const text = this.inputText
|
||
this.inputText = ''
|
||
try {
|
||
const msg = await sendTextMessage(this.targetImUserId, text)
|
||
this.chatMessages.push(formatIMMessage(msg, this.imUserId))
|
||
this.scrollToBottom()
|
||
} catch (e) {
|
||
uni.showToast({ title: '发送失败', icon: 'none' })
|
||
this.inputText = text
|
||
}
|
||
},
|
||
|
||
scrollToBottom() {
|
||
this.$nextTick(() => {
|
||
this.scrollTop = this.scrollTop === 99999 ? 99998 : 99999
|
||
})
|
||
},
|
||
|
||
toggleMoreMenu() {
|
||
this.showMoreMenu = !this.showMoreMenu
|
||
},
|
||
|
||
/** 发送图片 */
|
||
onSendImage() {
|
||
this.showMoreMenu = false
|
||
if (!this.imReady) {
|
||
uni.showToast({ title: 'IM未就绪', icon: 'none' })
|
||
return
|
||
}
|
||
uni.chooseImage({
|
||
count: 1,
|
||
sourceType: ['album', 'camera'],
|
||
success: async (res) => {
|
||
const tempPath = res.tempFilePaths[0]
|
||
try {
|
||
const msg = await sendImageMessage(this.targetImUserId, tempPath)
|
||
this.chatMessages.push(formatIMMessage(msg, this.imUserId))
|
||
this.scrollToBottom()
|
||
} catch (e) {
|
||
uni.showToast({ title: '图片发送失败', icon: 'none' })
|
||
}
|
||
}
|
||
})
|
||
},
|
||
|
||
onChangeCommission() {
|
||
this.showMoreMenu = false
|
||
this.priceChangeType = 'Commission'
|
||
this.newPriceInput = ''
|
||
this.showPriceChangePopup = true
|
||
},
|
||
|
||
onChangeGoodsPrice() {
|
||
this.showMoreMenu = false
|
||
this.priceChangeType = 'GoodsAmount'
|
||
this.newPriceInput = ''
|
||
this.showPriceChangePopup = true
|
||
},
|
||
|
||
/** 提交改价申请 */
|
||
async submitPriceChange() {
|
||
const newPrice = parseFloat(this.newPriceInput)
|
||
if (isNaN(newPrice) || newPrice < 0) {
|
||
uni.showToast({ title: '请输入有效的价格', icon: 'none' })
|
||
return
|
||
}
|
||
if (this.submittingPriceChange) return
|
||
this.submittingPriceChange = true
|
||
|
||
const difference = this.priceDifference
|
||
|
||
if (this.isOwner && difference > 0) {
|
||
uni.showModal({
|
||
title: '补缴支付',
|
||
content: `需补缴 ¥${difference.toFixed(2)}，确认支付后将发送改价申请`,
|
||
success: async (modalRes) => {
|
||
if (modalRes.confirm) {
|
||
await this.doSubmitPriceChange(newPrice)
|
||
}
|
||
this.submittingPriceChange = false
|
||
}
|
||
})
|
||
return
|
||
}
|
||
|
||
await this.doSubmitPriceChange(newPrice)
|
||
this.submittingPriceChange = false
|
||
},
|
||
|
||
async doSubmitPriceChange(newPrice) {
|
||
try {
|
||
const res = await createPriceChange(this.orderId, {
|
||
changeType: this.priceChangeType,
|
||
newPrice
|
||
})
|
||
this.showPriceChangePopup = false
|
||
|
||
const changeTypeLabel = this.priceChangeType === 'Commission' ? '跑腿佣金' : '商品总额'
|
||
|
||
// 通过 IM 发送自定义消息通知对方
|
||
if (this.imReady) {
|
||
const customData = {
|
||
bizType: 'price-change',
|
||
priceChangeId: res.id,
|
||
changeTypeLabel,
|
||
originalPrice: res.originalPrice.toFixed(2),
|
||
newPrice: res.newPrice.toFixed(2),
|
||
difference: res.difference,
|
||
status: res.status,
|
||
description: `发起了${changeTypeLabel}改价申请`
|
||
}
|
||
await sendCustomMessage(this.targetImUserId, customData)
|
||
}
|
||
|
||
// 本地显示
|
||
this.chatMessages.push({
|
||
id: `pc_${res.id}`,
|
||
type: 'price-change',
|
||
isSelf: true,
|
||
priceChangeId: res.id,
|
||
changeTypeLabel,
|
||
originalPrice: res.originalPrice.toFixed(2),
|
||
newPrice: res.newPrice.toFixed(2),
|
||
difference: res.difference,
|
||
status: res.status
|
||
})
|
||
this.scrollToBottom()
|
||
uni.showToast({ title: '改价申请已发送', icon: 'none' })
|
||
} catch (e) {
|
||
uni.showToast({ title: e.message || '改价申请失败', icon: 'none' })
|
||
}
|
||
},
|
||
|
||
async respondPriceChange(priceChangeId, action) {
|
||
try {
|
||
const res = await respondPriceChangeApi(this.orderId, priceChangeId, { action })
|
||
|
||
const msg = this.chatMessages.find(
|
||
m => m.type === 'price-change' && m.priceChangeId === priceChangeId
|
||
)
|
||
if (msg) msg.status = res.status
|
||
|
||
const actionLabel = action === 'Accepted' ? '同意' : '拒绝'
|
||
const changeTypeLabel = res.changeType === 'Commission' ? '跑腿佣金' : '商品总额'
|
||
|
||
this.chatMessages.push({
|
||
id: `sys_${Date.now()}`,
|
||
type: 'system',
|
||
content: `您已${actionLabel}${changeTypeLabel}改价`
|
||
})
|
||
|
||
if (action === 'Accepted' && res.difference !== 0) {
|
||
if (res.difference < 0) {
|
||
this.chatMessages.push({
|
||
id: `sys_refund_${Date.now()}`,
|
||
type: 'system',
|
||
content: `已退还您${Math.abs(res.difference).toFixed(2)}元，请在微信中查看`
|
||
})
|
||
}
|
||
await this.loadOrderInfo()
|
||
}
|
||
this.scrollToBottom()
|
||
} catch (e) {
|
||
uni.showToast({ title: e.message || '操作失败', icon: 'none' })
|
||
}
|
||
},
|
||
|
||
onCompleteOrder() {
|
||
this.showMoreMenu = false
|
||
uni.navigateTo({ url: `/pages/order/complete-order?id=${this.orderId}` })
|
||
},
|
||
|
||
goOrderDetail() {
|
||
uni.navigateTo({ url: `/pages/order/order-detail?id=${this.orderId}` })
|
||
},
|
||
|
||
/** 拨打电话（显示对方手机号） */
|
||
onCallPhone() {
|
||
// 单主看跑腿手机号，跑腿看单主手机号
|
||
const phone = this.isOwner ? this.orderInfo.runnerPhone : this.orderInfo.phone
|
||
if (!phone) {
|
||
uni.showToast({ title: '暂无对方手机号', icon: 'none' })
|
||
return
|
||
}
|
||
uni.showModal({
|
||
title: '对方手机号',
|
||
content: phone,
|
||
confirmText: '复制电话',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
uni.setClipboardData({
|
||
data: phone,
|
||
success: () => {
|
||
uni.showToast({ title: '手机号已复制', icon: 'success' })
|
||
}
|
||
})
|
||
}
|
||
}
|
||
})
|
||
},
|
||
|
||
/** 联系客服 */
|
||
onContactService() {
|
||
// 跳转微信小程序自带客服页（需在小程序后台配置客服）
|
||
// 小程序中使用 button open-type="contact" 才能打开客服
|
||
// 这里用 navigateTo 跳转客服二维码页作为替代
|
||
uni.navigateTo({ url: '/pages/config/qrcode' })
|
||
},
|
||
|
||
previewImage(url) {
|
||
uni.previewImage({ urls: [url] })
|
||
},
|
||
|
||
formatOrderType(type) {
|
||
const map = { Pickup: '代取', Delivery: '代送', Help: '万能帮', Purchase: '代购', Food: '美食街' }
|
||
return map[type] || type
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* 自定义导航栏 */
|
||
.custom-navbar {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
z-index: 999;
|
||
background: #FFB700;
|
||
}
|
||
.navbar-content {
|
||
height: 44px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 20rpx;
|
||
}
|
||
.nav-back {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.back-icon {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
.navbar-title {
|
||
font-size: 34rpx;
|
||
font-weight: bold;
|
||
color: #363636;
|
||
}
|
||
.nav-placeholder {
|
||
width: 60rpx;
|
||
}
|
||
.chat-page {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100vh;
|
||
}
|
||
.order-bar {
|
||
background-color: #f0f7ff;
|
||
flex-shrink: 0;
|
||
}
|
||
.order-bar-info {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 20rpx 30rpx 10rpx;
|
||
}
|
||
.order-bar-text {
|
||
font-size: 26rpx;
|
||
color: #333333;
|
||
}
|
||
.order-bar-link {
|
||
font-size: 26rpx;
|
||
color: #FFB700;
|
||
}
|
||
.order-bar-actions {
|
||
display: flex;
|
||
gap: 16rpx;
|
||
padding: 10rpx 30rpx 20rpx;
|
||
}
|
||
.bar-action-btn {
|
||
flex: 1;
|
||
text-align: center;
|
||
padding: 12rpx 0;
|
||
background-color: #ffffff;
|
||
border-radius: 8rpx;
|
||
border: 1rpx solid #e0e0e0;
|
||
}
|
||
.bar-action-btn text {
|
||
font-size: 24rpx;
|
||
color: #666666;
|
||
}
|
||
.chat-body {
|
||
flex: 1;
|
||
padding: 20rpx 24rpx;
|
||
overflow-y: auto;
|
||
}
|
||
.loading-history {
|
||
text-align: center;
|
||
padding: 16rpx 0;
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
}
|
||
.msg-row {
|
||
display: flex;
|
||
margin-bottom: 24rpx;
|
||
align-items: flex-start;
|
||
}
|
||
.msg-row.msg-self {
|
||
flex-direction: row-reverse;
|
||
}
|
||
.msg-row.msg-center {
|
||
justify-content: center;
|
||
}
|
||
.msg-avatar {
|
||
width: 72rpx;
|
||
height: 72rpx;
|
||
border-radius: 50%;
|
||
flex-shrink: 0;
|
||
}
|
||
.msg-bubble {
|
||
max-width: 65%;
|
||
margin: 0 16rpx;
|
||
}
|
||
.msg-text {
|
||
background-color: #ffffff;
|
||
padding: 20rpx 24rpx;
|
||
border-radius: 16rpx;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
word-break: break-all;
|
||
display: block;
|
||
}
|
||
.msg-self .msg-text {
|
||
background-color: #FFB700;
|
||
color: #ffffff;
|
||
}
|
||
.msg-image {
|
||
max-width: 100%;
|
||
border-radius: 12rpx;
|
||
}
|
||
.msg-system {
|
||
background-color: #f5f5f5;
|
||
padding: 12rpx 20rpx;
|
||
border-radius: 8rpx;
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
text-align: center;
|
||
max-width: 80%;
|
||
}
|
||
.chat-footer {
|
||
display: flex;
|
||
align-items: center;
|
||
background-color: #ffffff;
|
||
padding: 16rpx 24rpx;
|
||
padding-bottom: calc(16rpx + env(safe-area-inset-bottom));
|
||
border-top: 1rpx solid #eeeeee;
|
||
flex-shrink: 0;
|
||
}
|
||
.chat-input {
|
||
flex: 1;
|
||
height: 72rpx;
|
||
background-color: #f5f5f5;
|
||
border-radius: 36rpx;
|
||
padding: 0 30rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
.more-btn {
|
||
width: 72rpx;
|
||
height: 72rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-left: 16rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
.more-icon {
|
||
font-size: 48rpx;
|
||
color: #666666;
|
||
font-weight: 300;
|
||
}
|
||
/* 更多功能菜单 */
|
||
.more-menu-mask {
|
||
position: fixed;
|
||
top: 0; left: 0; right: 0; bottom: 0;
|
||
background-color: rgba(0, 0, 0, 0.3);
|
||
z-index: 100;
|
||
display: flex;
|
||
align-items: flex-end;
|
||
}
|
||
.more-menu {
|
||
width: 100%;
|
||
background-color: #ffffff;
|
||
border-radius: 24rpx 24rpx 0 0;
|
||
padding: 30rpx;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
}
|
||
.menu-item {
|
||
width: 25%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: 24rpx 0;
|
||
}
|
||
.menu-icon {
|
||
font-size: 48rpx;
|
||
margin-bottom: 12rpx;
|
||
}
|
||
.menu-label {
|
||
font-size: 24rpx;
|
||
color: #666666;
|
||
}
|
||
/* 改价消息卡片 */
|
||
.price-change-card {
|
||
background-color: #ffffff;
|
||
border-radius: 16rpx;
|
||
padding: 24rpx;
|
||
width: 80%;
|
||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
|
||
}
|
||
.pc-header { margin-bottom: 16rpx; }
|
||
.pc-title { font-size: 26rpx; color: #333333; font-weight: 500; }
|
||
.pc-body { margin-bottom: 16rpx; }
|
||
.pc-row { display: flex; justify-content: space-between; align-items: center; padding: 8rpx 0; }
|
||
.pc-label { font-size: 24rpx; color: #999999; }
|
||
.pc-value { font-size: 26rpx; color: #333333; }
|
||
.pc-new-price { color: #FFB700; font-weight: 500; }
|
||
.pc-pay { color: #ff6600; }
|
||
.pc-refund { color: #52c41a; }
|
||
.pc-actions { display: flex; gap: 16rpx; }
|
||
.pc-btn { flex: 1; padding: 16rpx 0; border-radius: 8rpx; text-align: center; font-size: 26rpx; }
|
||
.pc-accept { background-color: #FFB700; color: #ffffff; }
|
||
.pc-reject { background-color: #f5f5f5; color: #666666; }
|
||
.pc-waiting { text-align: center; padding: 12rpx 0; }
|
||
.pc-waiting text { font-size: 24rpx; color: #ff9900; }
|
||
.pc-result { text-align: center; padding: 12rpx 0; }
|
||
.pc-accepted { font-size: 24rpx; color: #52c41a; }
|
||
.pc-rejected { font-size: 24rpx; color: #ff4d4f; }
|
||
/* 弹窗 */
|
||
.popup-mask {
|
||
position: fixed;
|
||
top: 0; left: 0; right: 0; bottom: 0;
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
z-index: 200;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.popup-content {
|
||
width: 80%;
|
||
background-color: #ffffff;
|
||
border-radius: 20rpx;
|
||
padding: 40rpx;
|
||
}
|
||
.popup-title {
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
font-weight: 500;
|
||
display: block;
|
||
text-align: center;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
.popup-field {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 20rpx 0;
|
||
border-bottom: 1rpx solid #f0f0f0;
|
||
}
|
||
.popup-label { font-size: 28rpx; color: #666666; }
|
||
.popup-current-price { font-size: 28rpx; color: #333333; }
|
||
.popup-input {
|
||
width: 50%;
|
||
height: 64rpx;
|
||
border: 1rpx solid #dddddd;
|
||
border-radius: 8rpx;
|
||
padding: 0 16rpx;
|
||
font-size: 28rpx;
|
||
text-align: right;
|
||
}
|
||
.popup-diff { padding: 16rpx 0; text-align: center; }
|
||
.popup-diff text { font-size: 24rpx; }
|
||
.popup-actions { display: flex; gap: 20rpx; margin-top: 30rpx; }
|
||
.popup-btn { flex: 1; padding: 20rpx 0; border-radius: 12rpx; text-align: center; font-size: 28rpx; }
|
||
.popup-cancel { background-color: #f5f5f5; color: #666666; }
|
||
.popup-confirm { background-color: #FAD146; color: #ffffff; }
|
||
</style>
|