223 lines
6.5 KiB
Vue
223 lines
6.5 KiB
Vue
|
<script setup>
|
||
|
|
/**
|
||
|
|
* 聊天框内容
|
||
|
|
*/
|
||
|
|
// 聊天
|
||
|
|
import TencentCloudChat from '@tencentcloud/chat';
|
||
|
|
|
||
|
|
import {
|
||
|
|
nextTick,
|
||
|
|
watch,
|
||
|
|
computed,
|
||
|
|
defineEmits,
|
||
|
|
} from 'vue'
|
||
|
|
import NewsAudio from '@/static/audio.png'
|
||
|
|
import JyCommodityInformation from '@/components/public/jy-commodity-information'
|
||
|
|
const props = defineProps({
|
||
|
|
item: {
|
||
|
|
type: Object,
|
||
|
|
default: () => {
|
||
|
|
{}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
msg: {
|
||
|
|
type: Object,
|
||
|
|
}
|
||
|
|
})
|
||
|
|
import {
|
||
|
|
useStore
|
||
|
|
} from 'vuex'
|
||
|
|
const store = useStore()
|
||
|
|
const emit = defineEmits(['openRedBag', 'viewVideo'])
|
||
|
|
// 格式化
|
||
|
|
const formatData = computed(() => props.item.callbackData.callback_json[0])
|
||
|
|
//音频
|
||
|
|
const innerAudioContext = uni.createInnerAudioContext();
|
||
|
|
// 播放语音
|
||
|
|
const payAudio = (item) => {
|
||
|
|
innerAudioContext.src = item.payload.url
|
||
|
|
nextTick(() => {
|
||
|
|
innerAudioContext.play();
|
||
|
|
})
|
||
|
|
}
|
||
|
|
// 用户信息
|
||
|
|
const userinfo = computed(() => {
|
||
|
|
let result = store.state.userinfo
|
||
|
|
return result
|
||
|
|
})
|
||
|
|
|
||
|
|
// 拨打电话
|
||
|
|
function handleCall() {
|
||
|
|
uni.$TUICallKit.call({
|
||
|
|
userID: props.msg.id,
|
||
|
|
callMediaType: formatData.value.data.call_type,
|
||
|
|
}, res => {
|
||
|
|
console.log('[TUICallKit] call params: ', JSON.stringify(res));
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// 开红包
|
||
|
|
function handleOpenRedBag() {
|
||
|
|
emit('openRedBag', props.item)
|
||
|
|
}
|
||
|
|
|
||
|
|
// 看视频
|
||
|
|
function handleViewVideo(item) {
|
||
|
|
emit('viewVideo', item)
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<view class="content pr">
|
||
|
|
<!-- 图片 -->
|
||
|
|
<template v-if="item.callbackData.MsgType === TencentCloudChat.TYPES.MSG_IMAGE">
|
||
|
|
<image class="br10" :src="formatData.MsgContent.ImageInfoArray[0].URL" mode="widthFix" />
|
||
|
|
</template>
|
||
|
|
<!-- 文字 -->
|
||
|
|
<template v-else-if="item.callbackData.MsgType === TencentCloudChat.TYPES.MSG_TEXT">
|
||
|
|
<view class="p25">
|
||
|
|
{{ formatData.MsgContent.Text }}
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
<!-- 自定义消息 -->
|
||
|
|
<template v-else-if="item.callbackData.MsgType === TencentCloudChat.TYPES.MSG_CUSTOM">
|
||
|
|
<!-- 判断业务字段 -->
|
||
|
|
<template v-if="formatData.businessType">
|
||
|
|
<!-- 音视频通话 -->
|
||
|
|
<template v-if="formatData.businessType == 1">
|
||
|
|
<!-- 拨打电话 -->
|
||
|
|
<view class="p25" @click="handleCall">
|
||
|
|
<template v-if="formatData.actionType == TencentCloudChat.TSignaling.ACTION_TYPE_INVITE">
|
||
|
|
<text>[ </text>
|
||
|
|
<uni-icons type="videocam" color="#333" size="32rpx"
|
||
|
|
v-if="formatData.data.call_type == 1" />
|
||
|
|
<uni-icons type="phone" color="#333" size="32rpx"
|
||
|
|
v-else-if="formatData.data.call_type == 2" />
|
||
|
|
<text>发起</text>
|
||
|
|
<text v-if="formatData.data.call_type == 1">语音</text>
|
||
|
|
<text v-else-if="formatData.data.call_type == 2">视频</text>
|
||
|
|
<text>通话</text>
|
||
|
|
<text> ]</text>
|
||
|
|
</template>
|
||
|
|
<template v-if="formatData.actionType == TencentCloudChat.TSignaling.ACTION_TYPE_CANCEL_INVITE">
|
||
|
|
<text>[</text>
|
||
|
|
<uni-icons type="videocam" color="#333" size="32rpx"
|
||
|
|
v-if="formatData.data.call_type == 1" />
|
||
|
|
<uni-icons type="phone" color="#333" size="32rpx"
|
||
|
|
v-else-if="formatData.data.call_type == 2" />
|
||
|
|
<text>已取消通话 ]</text>
|
||
|
|
</template>
|
||
|
|
<template v-if="formatData.actionType == TencentCloudChat.TSignaling.ACTION_TYPE_ACCEPT_INVITE">
|
||
|
|
<text>[ </text>
|
||
|
|
<uni-icons type="videocam" color="#333" size="32rpx"
|
||
|
|
v-if="formatData.data.call_type == 1" />
|
||
|
|
<uni-icons type="phone" color="#333" size="32rpx"
|
||
|
|
v-else-if="formatData.data.call_type == 2" />
|
||
|
|
<text>已接通 ]</text>
|
||
|
|
<!-- <text>[ 通话时长 {{formatData.data.call_end}} ]</text> -->
|
||
|
|
</template>
|
||
|
|
<template v-if="formatData.actionType == TencentCloudChat.TSignaling.ACTION_TYPE_REJECT_INVITE">
|
||
|
|
<text>[ </text>
|
||
|
|
<uni-icons type="videocam" color="#333" size="32rpx"
|
||
|
|
v-if="formatData.data.call_type == 1" />
|
||
|
|
<uni-icons type="phone" color="#333" size="32rpx"
|
||
|
|
v-else-if="formatData.data.call_type == 2" />
|
||
|
|
<text>已拒绝通话 ]</text>
|
||
|
|
</template>
|
||
|
|
<template
|
||
|
|
v-if="formatData.actionType == TencentCloudChat.TSignaling.ACTION_TYPE_INVITE_TIMEOUT">
|
||
|
|
<text>[ </text>
|
||
|
|
<uni-icons type="videocam" color="#333" size="32rpx"
|
||
|
|
v-if="formatData.data.call_type == 1" />
|
||
|
|
<uni-icons type="phone" color="#333" size="32rpx"
|
||
|
|
v-else-if="formatData.data.call_type == 2" />
|
||
|
|
<text>超时未接听 ]</text>
|
||
|
|
</template>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
<!-- 红包消息 -->
|
||
|
|
<template v-else-if="formatData.businessType == 'redPacket'">
|
||
|
|
<!-- 红包 -->
|
||
|
|
<view class="redPacket br10" :class="{'disabled': 0}"
|
||
|
|
@click="handleOpenRedBag">
|
||
|
|
<view class="df aic">
|
||
|
|
<image class="img fs0 mr10" src="/static/image/red-envelope.png" />
|
||
|
|
<view class="red-packet-text cfff">{{ formatData.data.blessing }}</view>
|
||
|
|
</view>
|
||
|
|
<!-- 分割线 -->
|
||
|
|
<view class="line"></view>
|
||
|
|
<view class="f20" style="color:#FBD3A4">{{ formatData.data.payType == 1 ? '余额红包' : '积分红包' }}</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
</template>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<!-- 音频文件 -->
|
||
|
|
<template v-if="item.callbackData.MsgType == TencentCloudChat.TYPES.MSG_AUDIO">
|
||
|
|
<div class="df aic p25" style="width: 100rpx" @click="payAudio(item)">
|
||
|
|
<image class="mr20" style="width: 30rpx;height: 30rpx;z-index: 1;" :src="NewsAudio" />
|
||
|
|
<text>{{ item.payload.downloadFlag }}''</text>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<!-- 视频消息 -->
|
||
|
|
<template v-if="item.callbackData.MsgType == TencentCloudChat.TYPES.MSG_VIDEO">
|
||
|
|
<image :src="item.payload.snapshotUrl" mode="widthFix" />
|
||
|
|
<view class="window pfull" @click="handleViewVideo(item)">
|
||
|
|
<image class="pause pmid wh40" src="/static/pause.png" mode="aspectFit" />
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<!-- 咨询订单 -->
|
||
|
|
<template v-if="item.callbackData.MsgType === 'order'">
|
||
|
|
<JyCommodityInformation :showType="4" :right="false"></JyCommodityInformation>
|
||
|
|
</template>
|
||
|
|
<!-- 咨询商品-->
|
||
|
|
<template v-if="item.callbackData.MsgType === 'shop'">
|
||
|
|
<JyCommodityInformation :showType="3"></JyCommodityInformation>
|
||
|
|
</template>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.content {
|
||
|
|
box-sizing: border-box;
|
||
|
|
min-height: 80rpx;
|
||
|
|
max-width: 60vw;
|
||
|
|
font-size: 28rpx;
|
||
|
|
|
||
|
|
image {
|
||
|
|
width: 200rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 红包消息
|
||
|
|
.redPacket {
|
||
|
|
width: 360rpx;
|
||
|
|
padding: 24rpx;
|
||
|
|
background-color: rgb(248, 162, 60);
|
||
|
|
color: #FCFEFD;
|
||
|
|
|
||
|
|
&.disabled {
|
||
|
|
opacity: .6;
|
||
|
|
}
|
||
|
|
|
||
|
|
.img {
|
||
|
|
width: 50rpx;
|
||
|
|
height: 60rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.line {
|
||
|
|
display: inline-block;
|
||
|
|
width: 100%;
|
||
|
|
height: 1px;
|
||
|
|
background: #EF9B45;
|
||
|
|
margin: 10rpx 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 遮罩
|
||
|
|
.window {
|
||
|
|
background-color: rgba(0, 0, 0, 0.2);
|
||
|
|
}
|
||
|
|
</style>
|