import Vue from 'vue' import Vuex from 'vuex' import axios from 'axios' const API_PROXY = 'https://bird.ioliu.cn/v1/?url='; //代理 Vue.use(Vuex) export default new Vuex.Store({ state: { answer:[] }, getters: { }, mutations: { getAnswer (state, playload) {//--------------重要 let say ={ //自定义消息组件所需参数 type:1, css:'left', txt:playload.content, date:'', headImg:playload.extra } state.answer.push(say) console.log(playload) }, }, actions: { } })
homeIm.vue
//一如以往，不废话，直接代码 <template> <div> //----------------------------------------------------重要-------------------自定义消息组件，下面会贴码 <home-news v-for="(item ,index) in answer" :key='index' :item='item' :data='item'></home-news> <div> <img src="https://www.jb51.net/assets/images/mike.png"/> <van-field v-model="say" placeholder="请输入" /> <van-button size="large " @click="send" type='info' :disabled ='say?false:true'>确定</van-button> </div> </div> </template> <script> import Vue from "vue"; import { Field ,Button } from "vant"; import router from "../router.js"; import axios from "axios"; import {mapState,mapGetters,mapActions,mapMutations} from 'vuex' const arr = [ Field ,Button]; arr.map(e => { //动态生成组件 Vue.use(e); }); export default { data() { return { say:'小仙女，你好鸭' }; }, name: "homeIm", props: { msg: String }, created() { //this.getChatRecord() //获取聊天记录，要钱 this.$nextTick(() => {//------------------------重要-------有消息就滚动到底部----------------------- let list = document.getElementById('homeIm') document.documentElement.scrollTop = list.scrollHeight //如不行，请尝试-> list.scrollTop = list.scrollHeight }) }, computed:{ ...mapState({ answer:"answer", }), }, watch: { //------------------------重要-------有消息就滚动到底部----------------------- answer() { this.$nextTick(() => { let list = document.getElementById('homeIm') document.documentElement.scrollTop = list.scrollHeight //如不行，请尝试-> list.scrollTop = list.scrollHeight }) } }, methods: { send() { let that = this let msg = new RongIMLib.TextMessage({ content: that.say, extra: 'https://img.52z.com/upload/news/image/20171120/20171120080335_21404.jpg' }); let conversationType = RongIMLib.ConversationType.PRIVATE; // 单聊, 其他会话选择相应的消息类型即可 let targetId = JSON.parse(localStorage.getItem('userInfo')).IMUser.assistantId; // 目标 Id RongIMClient.getInstance().sendMessage(conversationType, targetId, msg, { onSuccess: function (message) { // message 为发送的消息对象并且包含服务器返回的消息唯一 Id 和发送消息时间戳 console.log('Send successfully',message,message.content.content); let say = { type:1, css:'right', txt:message.content.content, headImg:'https://img.52z.com/upload/news/image/20171120/20171120080335_21404.jpg' } that.answer.push(say) that.say = '' }, onError: function (errorCode, message) { let info = ''; switch (errorCode) { case RongIMLib.ErrorCode.TIMEOUT: info = '超时'; break; case RongIMLib.ErrorCode.UNKNOWN: info = '未知错误'; break; case RongIMLib.ErrorCode.REJECTED_BY_BLACKLIST: info = '在黑名单中，无法向对方发送消息'; break; case RongIMLib.ErrorCode.NOT_IN_DISCUSSION: info = '不在讨论组中'; break; case RongIMLib.ErrorCode.NOT_IN_GROUP: info = '不在群组中'; break; case RongIMLib.ErrorCode.NOT_IN_CHATROOM: info = '不在聊天室中'; break; } console.log('发送失败: ' + info + errorCode); } }); }, getChatRecord(){ let conversationType = RongIMLib.ConversationType.PRIVATE; //单聊, 其他会话选择相应的消息类型即可 let targetId = '2'; // 想获取自己和谁的历史消息，targetId 赋值为对方的 Id let timestrap = null; // 默认传 null，若从头开始获取历史消息，请赋值为 0, timestrap = 0; let count = 20; // 每次获取的历史消息条数，范围 0-20 条，可以多次获取 RongIMLib.RongIMClient.getInstance().getHistoryMessages(conversationType, targetId, timestrap, count, { onSuccess: function(list, hasMsg) { // list => Message 数组。 // hasMsg => 是否还有历史消息可以获取。 console.log('历史纪录',list, hasMsg) }, onError: function(error) { console.log('GetHistoryMessages, errorcode:' + error); } }); } }, }; </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> .mike{ width: .3rem;height: .3rem; } .border{border:1px solid #ccc;} .button{ width: .8rem;height: .46rem; } .homeIm{padding-bottom: .7rem;} </style>
homeNews.vue 全代码