代码使用示例-用户留言

留言的前提条件是用户转人工失败了。参考用户转人工的方法失败时发送toAgentFailed事件。在MainContent.vue中存在监听方法：

//转人工失败
EventBus.$on("toAgentFailed", () => {
    this.toAgent = false;
    let msg = {
        avatar: "zph",
        text: "当前暂无客服在线，您可以点击留言，客服上线会第一时间回复您！",
        type: 0,
        time: this.$Utils.getDateString(),
        float: "left",
        userName: '系统',
        leaveMessage: true
    };
    this.pushMessageInRecord(JSON.stringify(msg))
});
 

该方法会向聊天框中推一条消息，满足以下代码规则，展示留言消息。

<div v-if="item.leaveMessage">
    <div class="line"></div>
    <el-button size="small" style="margin-top: 5px" @click="messagesVisible=true">留言
    </el-button>
</div>

点击留言按钮，可以修改messagesVisible属性展示的留言弹框：

<!-- 留言弹框 -->
<el-dialog
        title="留言内容"
        class="inner-dialog"
        :visible.sync="messagesVisible"
        :modal-append-to-body=false
        :close-on-click-modal=false
> 
    <el-form :model="messageForm" ref="messageForm"   :rules='messagesRules'>
        <el-form-item label="手机号码" :label-width="formLabelWidth" required prop="phone">
            <el-input v-model="messageForm.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="留言内容" :label-width="formLabelWidth" prop="message">
            <el-input resize="none" :rows="4" type="textarea" v-model="messageForm.message" autocomplete="off"></el-input>
        </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
        <el-button @click="messagesVisible = false">取 消</el-button>
        <el-button type="primary" @click="leaveMessage('messageForm')">确 定</el-button>
    </span>
</el-dialog>

其中调用leaveMessage 方法留言，该方法会调用doLeaveMessage接口，发送留言

//留言
leaveMessage(messageForm) {
    this.$refs[messageForm].validate((valid) => {
        if (valid) {
            this.messagesVisible = false
            this.$Chat.doLeaveMessage(this.messageForm.phone,this.messageForm.message);
            this.messageForm.message = "";
        } else {
            return false;
        }
    });
}