<template>
<view class="content">
<view class="cul-wrapper">
<view v-if="isOver" class="msg-over">没有更多消息了</view>
<block v-for="(item,index) in hisMsgs" :key="item.id">
<view :class="[item.isme?'msg-me':'msg-service']" :id="item.id">
<view class="msg-text">
<view class="msg-text-content">
<text>{
{item.msg}}</text>
</view>
</view>
</view>
</block>
<view class="cul-date">{
{curDate | formatDate}}</view>
<block>
<view class="msg-service">
<view class="msg-text">
<view class="msg-text-content">
<view class="msg-introduce">您好,请先选择问题分类,我将为您解答。</view>
<view class="msg-classify">
<view class="msg-classify-tit"><text class="msg-classify-name">分类1:</text>分类描述分类描述分类描述分类描述分类描述分类描述。</view>
<view class="msg-classify-click" @click="consultClick(1)">[此类问题请点我]</view>
</view>
<view class="msg-introduce">您好,请先选择问题分类,我将为您解答。</view>
<view class="msg-classify">
<view class="msg-classify-tit"><text class="msg-classify-name">分类2:</text>分类描述分类描述分类描述分类描述分类描述分类描述。</view>
<view class="msg-classify-click" @click="consultClick(2)">[此类问题请点我]</view>
</view>
<view class="msg-introduce">您好,请先选择问题分类,我将为您解答。</view>
<view class="msg-classify">
<view class="msg-classify-tit"><text class="msg-classify-name">分类3:</text>分类描述分类描述分类描述分类描述分类描述分类描述。</view>
<view class="msg-classify-click" @click="consultClick(3)">[此类问题请点我]</view>
</view>
</view>
</view>
</view>
</block>
<block v-for="(item,index) in msgs" :key="index">
uniapp仿客服聊天
最新推荐文章于 2024-08-01 09:16:31 发布
本文将详细介绍如何利用uniapp框架,实现一个仿客服聊天的应用。从界面设计到消息发送、接收逻辑,逐一讲解关键步骤,帮助开发者快速掌握uniapp在实时通讯场景下的应用。
摘要由CSDN通过智能技术生成