|
|
|
@ -3,13 +3,14 @@ |
|
|
|
<nav-bar>{{ title }}</nav-bar> |
|
|
|
<view class="chat-main-box" :style="{height: chatMainHeight+'px'}"> |
|
|
|
<view class="chat-message" @click="switchChatTabBox('none')"> |
|
|
|
<!-- 固定在聊天区顶部的常见问题提示条 --> |
|
|
|
<view v-if="showAutoQuestionTip" class="question-tip-fixed"> |
|
|
|
<view class="tip-title">请选择您想咨询的问题：</view> |
|
|
|
<view class="question-list"> |
|
|
|
<view class="question-item" v-for="(q, i) in commonQuestions" :key="i" |
|
|
|
<!-- 猜你想问 提示条 --> |
|
|
|
<view v-if="showAutoQuestionTip" class="guess-question-box"> |
|
|
|
<view class="guess-title">猜你想问</view> |
|
|
|
<view class="guess-list"> |
|
|
|
<view class="guess-item" v-for="(q, i) in commonQuestions" :key="i" |
|
|
|
@click="sendQuestionMessage(q)"> |
|
|
|
{{ q }} |
|
|
|
<text class="item-bullet">*</text> |
|
|
|
<text class="item-text">{{ q }}</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
@ -174,15 +175,13 @@ export default { |
|
|
|
methods: { |
|
|
|
loadCommonQuestions(userId) { |
|
|
|
this.$http({ |
|
|
|
url: "/auto/reply/list?userId=" + userId, |
|
|
|
method: 'get', |
|
|
|
url: "/auto/reply/list" , |
|
|
|
method: 'get' |
|
|
|
}).then(res => { |
|
|
|
// 你的接口是 res.data 才是列表 |
|
|
|
let list = res || []; |
|
|
|
this.autoReplyList = list; |
|
|
|
this.commonQuestions = list.map(item => item.replyTitle); |
|
|
|
}).catch(() => { |
|
|
|
// this.commonQuestions = ["什么时候发货？", "如何申请退款？", "订单怎么取消？", "可以开发票吗？", "商品是否包邮？"]; |
|
|
|
}); |
|
|
|
}, |
|
|
|
|
|
|
|
@ -201,7 +200,6 @@ export default { |
|
|
|
receipt: this.isReceipt |
|
|
|
}; |
|
|
|
|
|
|
|
// ============== 区分类型 ============== |
|
|
|
if (autoReply.replyType === 0) { |
|
|
|
// 文本 |
|
|
|
msgInfo.type = this.$enums.MESSAGE_TYPE.TEXT; |
|
|
|
@ -1373,42 +1371,55 @@ export default { |
|
|
|
|
|
|
|
.scroll-box { |
|
|
|
height: 100%; |
|
|
|
padding-top: 120rpx; /* 给常见问题条留出空间 */ |
|
|
|
padding-top: 180rpx; /* 给常见问题条留出空间 */ |
|
|
|
box-sizing: border-box; |
|
|
|
} |
|
|
|
|
|
|
|
// 固定在聊天顶部的常见问题提示条（不会滚动） |
|
|
|
.question-tip-fixed { |
|
|
|
// 猜你想问 样式（完全匹配参考图） |
|
|
|
.guess-question-box { |
|
|
|
position: absolute; |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
right: 0; |
|
|
|
left: 0; |
|
|
|
right: 0; |
|
|
|
z-index: 10; |
|
|
|
background-color: #ffffff; |
|
|
|
padding: 12rpx 20rpx; |
|
|
|
// border-bottom: 1rpx solid #f0f0f0; |
|
|
|
.tip-title { |
|
|
|
font-size: 26rpx; |
|
|
|
color: #999; |
|
|
|
text-align: center; |
|
|
|
margin-bottom: 8rpx; |
|
|
|
background-color: #F6F6F6; |
|
|
|
padding: 20rpx 30rpx; |
|
|
|
border-radius: 12rpx; |
|
|
|
margin: 10rpx 20rpx; |
|
|
|
box-sizing: border-box; |
|
|
|
|
|
|
|
.guess-title { |
|
|
|
font-size: 32rpx; |
|
|
|
color: #333333; |
|
|
|
font-weight: 500; |
|
|
|
margin-bottom: 20rpx; |
|
|
|
} |
|
|
|
.question-list { |
|
|
|
|
|
|
|
.guess-list { |
|
|
|
display: flex; |
|
|
|
flex-wrap: wrap; |
|
|
|
gap: 10rpx; |
|
|
|
justify-content: center; |
|
|
|
flex-direction: column; |
|
|
|
gap: 16rpx; |
|
|
|
} |
|
|
|
.question-item { |
|
|
|
background-color: #f5f7fa; |
|
|
|
border-radius: 30rpx; |
|
|
|
padding: 8rpx 16rpx; |
|
|
|
font-size: 26rpx; |
|
|
|
color: #333; |
|
|
|
border: 1rpx solid #eaeaea; |
|
|
|
} |
|
|
|
.question-item:active { |
|
|
|
background-color: #e6e6e6; |
|
|
|
|
|
|
|
.guess-item { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
gap: 10rpx; |
|
|
|
font-size: 30rpx; |
|
|
|
color: #009E5F; // 参考图的绿色 |
|
|
|
cursor: pointer; |
|
|
|
|
|
|
|
.item-bullet { |
|
|
|
line-height: 1; |
|
|
|
} |
|
|
|
|
|
|
|
.item-text { |
|
|
|
line-height: 1.4; |
|
|
|
} |
|
|
|
|
|
|
|
&:active { |
|
|
|
opacity: 0.7; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
[yxf]
1 month ago