qjd-shell-uniapp/jhim/jhimlive.vue

<template>
	<view class="jhim-container">
    <view class="jhim-message-box">
      <view class="jhim-message" v-for="(item, index) in msgs.slice(0,5)" :key="index">
        <image class="jhim-message-avatar" :src="item.avatar" />
        <text class="jhim-message-text" >{{item.name}}：{{item.text}}</text>
      </view>
    </view>
    <view v-if="ready" class="jhim-input-box">
      <input 
        class="jhim-input"
        placeholder="说点什么..." 
        placeholder-style="color:#fff" 
        v-model="input"
        confirm-type="send" @confirm="btnImSend" />
    </view>
    <view v-else class="jhim-logining"><text class="jhim-logining-text">登录中...</text></view>
	</view>
</template>

<script>

import Jhim from "./jhim";
const LOGTAG = '--JHIM--:';

export default {
  name: 'jhim',
	data() {
		return {
      input: '',
      msgs: [],
      ready: false,
		};
	},
	props: {
    sdkAppID: Number,
    secretKey: String,
    userId: String,
    roomId: String,
    name: String,
    avatar: String,
	},
	methods: {
		enterRoom() {
      this.jhim = this.jhim||(Jhim.jhim)||(new Jhim(this.userId, this.sdkAppID, this.secretKey));

      this.jhim.on('onIMMessageReceived', event=>{
        this.msgs = this.msgs.concat(event);
      }).on('onIMGroupTipElem', res=>{
        this.$emit('onMemberCount', this.memberCount = res.memberCount);
      }).on('onIMSDKNotReady', event=>{
        this.ready = false;
      }).on('onIMSDKReady', event=>{
        this.ready = true;
      })

      this.jhim.login(this.name, this.avatar).then(()=>this.jhim.createGroup(this.roomId));
		},
		exitRoom() {
      if(this.isAuthor) {
        this.jhim.dismissGroup().then(()=>this.jhim.logout());
      }else {
        this.jhim.exitGroup().then(()=>this.jhim.logout());
      }
    },
    btnImSend() {
      this.jhim.sendGroupText(this.input).then(msg=>{
        this.input = '';
				this.msgs.push(msg);
			});
    }
	}
};
</script>

<style scoped>

/* .jhim-container {
  
} */
.jhim-message-box {
  background-color:rgba(0, 0, 0, 0.4);
  border-radius: 1000px;
  padding: 5;
}
.jhim-message {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.jhim-message-avatar {
  width: 24rpx;
  height: 24rpx;
  margin-left: 5px;
}
.jhim-message-text {
  color: #fff;
  font-size: 24rpx;
}
.jhim-input-box {
  padding: 5px;
}
.jhim-input {
  color: #fff;
  font-size: 24rpx;
}
.jhim-logining {
  padding: 5px;
}
.jhim-logining-text {
  color: #fff;
  font-size: 24rpx;
}

</style>