fastadmin+uniapp在线聊天功能

效果图预览

html文件

<div style="height: 100%">
    <ul style="list-style-type: nonel ;height:39rem; overflow: hidden;overflow-y: visible; " class="cm-history-list">
        {foreach name="message" item="vo"}
        {if condition="$vo.type== 'customer'"}
        <li class="cm-history-item" style="text-align: left;">
            <div class="cm-history-otherhead cm-history-item-head">
                <img src="{$photo.avatar}" />
            </div>
            <div class="cm-history-othermessage cm-history-item-message">
                <span>{$vo.content}</span>
            </div>
        </li>
        {/if}
        {if condition="$vo.type== 'home'"}
        <li class="cm-history-item" style="text-align: right;">
            <div class="cm-history-myhead cm-history-item-head">
                <img src="{$photo.userimg}" />
            </div>

            <div class="cm-history-mymessage cm-history-item-message">
                <span>{$vo.content}</span>
            </div>
        </li>
        {/if}
        {/foreach}
    </ul>

    <div class="flex_center">
        <div class="cm-content-down" style="height: 12rem">
            <form id="duihua-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="{:url('/admin/Chatting/submit')}">
                <div class="form-group">
                    <div class="cm-content-input">
                        <!-- 关闭富文本类 editor -->
                        <textarea id="c-content" data-rule="required" class="form-control " rows="5"
                            name="content" cols="50"></textarea>
                    </div>
                </div>
                <input id="c-openid" data-rule="required" class="form-control" name="openid" type="hidden"
                    value="{$photo.openid|htmlentities}">
                <div class="cm-send-btn">
                    <button type="submit" class="btn btn-success btn-embossed">发送(S)</button>
                </div>
            </form>
        </div>
    </div>
</div>

<style>
    .cm-history-list {
    
        float: left;
        list-style: none;
        padding: 0;
        margin: 0;
        padding: 0;
    }

    .cm-history-item {
    
        float: left;
        position: