Skip to content

A
admin-base
Commit c681d0bc authored by 赵茹林's avatar 赵茹林
Browse files
Options

拆分出 录音播放组件、聊天记录组件

parent 30b4ef29
Hide whitespace changes
Inline Side-by-side
Showing with 591 additions and 5 deletions
build/webpack.base.conf.js
View file @ c681d0bc
...@@ -28,6 +28,7 @@ module.exports = { ...@@ -28,6 +28,7 @@ module.exports = {
alias: { alias: {
'vue$': 'vue/dist/vue.esm.js', 'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'), '@': resolve('src'),
'@api': resolve('src/service/api'),
'@util': resolve('src/util'), '@util': resolve('src/util'),
'@service': resolve('src/service'), '@service': resolve('src/service'),
'@framework': resolve('src/components/framework'), '@framework': resolve('src/components/framework'),
......
src/components/framework/ChatRecord.vue 0 → 100644
View file @ c681d0bc
<template>
<div>
<el-button
@click="dialogToggle"
size="mini" type="primary" plain>聊天记录
</el-button>
<el-dialog title="聊天记录" append-to-body :visible.sync="show">
<div v-loading="loading" style="height: 500px; overflow: auto;" class="liaotian-content">
<div class="real-time">{{ startAt }}</div>
<div class="chat-record" v-for="item in list" :key="item.id">
<div class="le">
<div class="le-content" v-if="item.author == 'left'">
<div class="le-content-image">
<img :src="item.headimg" alt="">
</div>
<div class="le-content-box">
<div class="le-content-box-title">{{ item.nick }} {{ item.gmt_create }}</div>
<!-- 聊天内容 -->
<div class="chat-record-content" v-if="item.image_type == 1000" v-html="item.sentence"></div>
<!-- 聊天图片 -->
<div class="chat-record-content-image" v-if="item.image_type == 3">
<img :src="'https://hjapi.aihujing.com/ims/file/down?file_path='+item.image_osskey" alt="">
</div>
<!-- 聊天语音 -->
<div class="chat-record-content-audio" v-if="item.image_type == 34">
<audio controls="controls" width="260px" height="40px" class="le-content-audio" @play="audioClick('sourceFile'+item.id)" :id="'sourceFile'+item.id" :data-id="'sourceFile'+item.id">
<source :src="'https://hjapi.aihujing.com/ims/file/down?file_path='+item.image_osskey" type="audio/mp3">
</audio>
</div>
<!-- 分享名片 -->
<div class="share-business-card" v-if="item.image_type == 42">
<div class="share-business-card-image">
<div class="share-business-card-image-avtive">
<img :src="item.sentence.small_headimg" alt="">
</div>
<div class="share-business-card-name">{{ item.sentence.nickname }}</div>
</div>
<div class="card">
个人名片
</div>
</div>
<!-- 发送视频 -->
<div class="video-news" style="width: 65%;" v-if="item.image_type == 42"> <!-- v-if="item.image_type == 42" -->
<video class="my-video" @play="videoClick('sourceFile'+item.id)" :data-id="'sourceFile'+item.id" :src="item.sentence.video_url" :poster="item.sentence.img_url" style="width: 100%;outline: none" controls="controls"></video>
</div>
<!-- 聊天动态图 -->
<div class="chat-record-content" style="width: 20%" v-if="item.image_type == 47">
<img width="100%" :src="item.sentence" alt="">
</div>
<!-- 分享内容 -->
<div class="share-kuang" v-if="item.image_type === 49">
<div class="title">
{{ item.sentence.des }}
</div>
<div class="share-kuang-content">
<div class="kuang-content">
{{ item.sentence.title }}
</div>
<div class="kuang-image">
<img :src="item.sentence.img_url" width="100%" height="100%" alt="">
</div>
</div>
</div>
<!-- 红包 -->
<div class="red-envelopes" v-if="item.image_type == 436207665 || item.image_type == 419430449">
<div class="red-envelopes-content">
<div class="red-envelopes-content-image">
<img v-if="item.image_type == 436207665" src="https://wx.gtimg.com/hongbao/1800/hb.png" alt="">
<img v-if="item.image_type == 419430449" src="../../assets/gou.png" alt="">
</div>
<div class="red-envelopes-content-gongxi">
{{ item.sentence.des }}
</div>
</div>
<div class="title">{{ item.sentence.title }}</div>
</div>
</div>
</div>
</div>
<div class="ri" v-show="item.author == 'right'">
<div class="ri-content">
<div class="le-content-image">
<img :src="item.headimg" alt="">
</div>
<div class="le-content-box">
<div class="le-content-box-title">{{ item.gmt_create }} {{ item.nick }}</div>
<!-- 聊天内容 -->
<div class="chat-record-content" v-if="item.image_type == 1000">{{ item.sentence }}</div>
<!-- 聊天图片 -->
<div class="chat-record-content-image" v-if="item.image_type == 3">
<img :src="'https://hjapi.aihujing.com/ims/file/down?file_path='+item.image_osskey" alt="">
</div>
<!-- 聊天语音 -->
<div class="chat-record-content-audio" v-if="item.image_type == 34">
<audio controls="controls" width="260px" height="40px" class="le-content-audio" @play="audioClick('sourceFile'+item.id)" :id="'sourceFile'+item.id" :data-id="'sourceFile'+item.id">
<source :src="'https://hjapi.aihujing.com/ims/file/down?file_path='+item.image_osskey" type="audio/mp3">
</audio>
</div>
<!-- 分享名片 -->
<div class="share-business-card" v-if="item.image_type == 42">
<div class="share-business-card-image">
<div class="share-business-card-image-avtive">
<img :src="item.sentence.small_headimg" alt="">
</div>
<div class="share-business-card-name">{{ item.sentence.nickname }}</div>
</div>
<div class="card">
个人名片
</div>
</div>
<!-- 发送视频 -->
<div class="video-news" style="width: 65%; float:right;" v-if="item.image_type == 43">
<video class="my-video" @play="videoClick('sourceFile'+item.id)" :data-id="'sourceFile'+item.id" :src="item.sentence.video_url" :poster="item.sentence.img_url" style="width: 100%;outline: none" controls="controls"></video>
</div>
<!-- 聊天动态图 -->
<div class="chat-record-content" style="width: 20%" v-if="item.image_type == 47">
<img width="100%" :src="item.sentence" alt="">
</div>
<!-- 分享内容 -->
<div class="share-kuang" v-if="item.image_type === 49">
<div class="title">
{{ item.sentence.des }}
</div>
<div class="share-kuang-content">
<div class="kuang-content">
{{ item.sentence.title }}
</div>
<div class="kuang-image">
<img :src="item.sentence.img_url" width="100%" height="100%" alt="">
</div>
</div>
</div>
<!-- 红包 -->
<div class="red-envelopes" v-if="item.image_type == 436207665 || item.image_type == 419430449">
<div class="red-envelopes-content">
<div class="red-envelopes-content-image">
<img v-if="item.image_type == 436207665" src="https://wx.gtimg.com/hongbao/1800/hb.png" alt="">
<img v-if="item.image_type == 419430449" src="../../assets/gou.png" alt="">
</div>
<div class="red-envelopes-content-gongxi">
{{ item.sentence.des }}
</div>
</div>
<div class="title">{{ item.sentence.title }}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</el-dialog>
</div>
</template>
<script>
import {getChatrecordApi} from '@api';
import Util from '@util/Za'
export default {
name: "ChatRecord",
props: {
friendId: {
type: Number,
required: true
},
startAt: {
type: String,
required: true
}
},
data() {
return {
show: false,
loading: true,
list: []
}
},
watch: {
'show'(value) {
if (value) {
this.getData();
}
}
},
methods: {
dialogToggle() {
this.show = !this.show;
},
getData() {
this.loading = true;
getChatrecordApi(this.friendId, {start_at: this.startAt}).then(res => {
if (res.length > 0) {
res.map(item => {
if (!Util.isJSON(item.sentence) && String(item.image_type).toUpperCase() === 'NULL') {
item.image_type = 1000
}
})
this.list = res
} else {
this.$message.error('没有聊天记录');
this.list = []
}
this.loading = false;
})
}
}
}
</script>
<style lang="less">
.chat-record {
width: 100%;
overflow: hidden;
.le {
text-align: left;
/* 右边的样式 */
.le-content {
width: 100%;
padding-top: 40px;
.le-content-image {
width: 30px;
height: 30px;
float: left;
img {
width: 100%;
height: 100%;
}
}
.chat-record-content-image {
width: 40%;
float: left;
img {
width: 100%;
}
}
.share-business-card {
width: 30%;
height: 100px;
background: #EDEDED;
float: left;
padding: 0 10px;
box-sizing: border-box;
.share-business-card-image {
width: 100%;
height: 70px;
padding-top: 15px;
box-sizing: border-box;
border-bottom: 1px solid #B8B8B8;
.share-business-card-image-avtive {
width: 40px;
height: 40px;
background: green;
display: inline-block;
vertical-align: middle;
}
.share-business-card-name {
padding-left: 5px;
display: inline-block;
vertical-align: middle;
font-size: 14px;
font-weight: 600;
}
}
.card {
font-size: 13px;
color: #A1A1A1;
line-height: 30px;
}
}
.red-envelopes {
width: 200px;
height: 75px;
border-radius: 5px;
float: left;
box-sizing: border-box;
background: #F7F7F7;
.title {
font-size: 10px;
color: #999;
line-height: 20px;
padding-left: 10px;
text-align: left;
}
.red-envelopes-content {
width: 100%;
height: 55px;
background: #ff9f4b;
padding: 0 10px;
box-sizing: border-box;
padding-top: 8px;
border-radius: 5px 5px 0 0;
.red-envelopes-content-image {
width: 40px;
height: 40px;
display: inline-block;
vertical-align: middle;
img {
width: 100%;
height: 100%;
}
}
.red-envelopes-content-gongxi {
width: calc(100% - 45px);
display: inline-block;
font-size: 13px;
vertical-align: middle;
color: #ffffff;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
}
}
.le-content-box {
float: left;
width: calc(100% - 40px);
padding-left: 10px;
.le-content-box-title {
font-size: 12px;
color: #999;
padding-bottom: 20px;
}
.chat-record-content {
width: 75%;
float: left;
padding-top: 3px;
}
.share-kuang {
width: 45%;
height: 120px;
background: #EDEDED;
float: left;
padding: 10px;
box-sizing: border-box;
border-radius: 5px;
.title {
width: 100%;
font-size: 13px;
color: #000;
}
.share-kuang-content {
width: 100%;
overflow: hidden;
.kuang-content {
float: left;
width: calc(100% - 40px);
font-size: 10px;
color: #8B8682;
}
.kuang-image {
float: left;
width: 40px;
height: 40px;
background: red;
}
}
}
}
}
}
.ri {
text-align: right;
.ri-content {
width: 100%;
padding-top: 40px;
.le-content-image {
width: 30px;
height: 30px;
float: right;
img {
width: 100%;
height: 100%;
}
}
.chat-record-content-image {
width: 40%;
float: right;
img {
width: 100%;
}
}
.share-business-card {
width: 30%;
height: 100px;
background: #EDEDED;
float: left;
padding: 0 10px;
box-sizing: border-box;
.share-business-card-image {
width: 100%;
height: 70px;
padding-top: 15px;
box-sizing: border-box;
border-bottom: 1px solid #B8B8B8;
.share-business-card-image-avtive {
width: 40px;
height: 40px;
background: green;
display: inline-block;
vertical-align: middle;
}
.share-business-card-name {
padding-left: 5px;
display: inline-block;
vertical-align: middle;
font-size: 14px;
font-weight: 600;
}
}
.card {
font-size: 13px;
color: #A1A1A1;
line-height: 30px;
}
}
.red-envelopes {
width: 200px;
height: 75px;
border-radius: 5px;
float: right;
box-sizing: border-box;
background: #F7F7F7;
.title {
font-size: 10px;
color: #999;
line-height: 20px;
padding-left: 10px;
text-align: left;
}
.red-envelopes-content {
width: 100%;
height: 55px;
background: #ff9f4b;
padding: 0 10px;
box-sizing: border-box;
padding-top: 8px;
border-radius: 5px 5px 0 0;
.red-envelopes-content-image {
width: 40px;
height: 40px;
display: inline-block;
vertical-align: middle;
img {
width: 100%;
height: 100%;
}
}
.red-envelopes-content-gongxi {
width: calc(100% - 45px);
display: inline-block;
font-size: 13px;
vertical-align: middle;
color: #ffffff;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
}
}
.le-content-box {
float: right;
width: calc(100% - 40px);
padding-right: 10px;
.le-content-box-title {
font-size: 12px;
color: #999;
padding-bottom: 20px;
}
.chat-record-content {
width: 75%;
float: right;
padding-top: 3px;
}
.share-kuang {
width: 45%;
height: 120px;
background: #EDEDED;
float: right;
padding: 10px;
box-sizing: border-box;
text-align: left;
border-radius: 5px;
.title {
width: 100%;
font-size: 13px;
color: #000;
}
.share-kuang-content {
width: 100%;
overflow: hidden;
.kuang-content {
float: left;
width: calc(100% - 40px);
font-size: 10px;
color: #8B8682;
}
.kuang-image {
float: left;
width: 40px;
height: 40px;
}
}
}
}
}
}
}
</style>
src/components/framework/PhoneRecord.vue 0 → 100644
View file @ c681d0bc
<template>
<div>
<el-button
@click="dialogToggle"
size="mini" type="primary" plain>录音</el-button>
<el-dialog title="录音播放" append-to-body :visible.sync="dialog.show" width="500px">
<audio ref="recordAudio" style="display: block; width: 100%;" :src="src" controls preload="metadata"></audio>
</el-dialog>
</div>
</template>
<script>
export default {
name: "PhoneRecord",
props: {
src: {
type: String,
required: true
}
},
data() {
return {
dialog: {
show: false
}
}
},
watch: {
'dialog.show'(value) {
if (!value) {
this.$refs['recordAudio'].pause()
}
}
},
methods: {
dialogToggle() {
this.dialog.show = !this.dialog.show;
}
}
}
</script>
<style>
</style>
src/components/team/hourDialog.vue
View file @ c681d0bc
...@@ -72,8 +72,15 @@ ...@@ -72,8 +72,15 @@
</el-table-column> </el-table-column>
<el-table-column label="操作"> <el-table-column label="操作">
<template slot-scope="scope"> <template slot-scope="scope">
<span class="cell-link" v-if="scope.row.chat_count > 0">聊天记录</span> <!--<el-button size="small" v-if="scope.row.chat_count > 0">聊天记录</el-button>-->
<span class="cell-link" v-if="scope.row.phone_source_file">录音</span> <chat-record
v-if="scope.row.chat_count > 0"
:friend-id="scope.row.friend_id" :start-at="dialogObj.start_at"
></chat-record>
<phone-record
v-if="scope.row.phone_source_file"
:src="scope.row.phone_source_file"></phone-record>
<!--<span class="cell-link" v-if="scope.row.phone_source_file">录音</span>-->
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
...@@ -119,8 +126,14 @@ ...@@ -119,8 +126,14 @@
</el-table-column> </el-table-column>
<el-table-column label="操作"> <el-table-column label="操作">
<template slot-scope="scope"> <template slot-scope="scope">
<span v-if="dialog.search.type == '0'" class="cell-link">聊天记录</span> <chat-record
<span v-if="dialog.search.type == '1'" class="cell-link">录音</span> v-if="dialog.search.type == '0'"
:friend-id="scope.row.friend_id" :start-at="dialogObj.start_at"></chat-record>
<phone-record
v-if="dialog.search.type == '1' && scope.row.source_file"
:src="scope.row.source_file"></phone-record>
<!--<span v-if="dialog.search.type == '0'" class="cell-link">聊天记录</span>
<span v-if="dialog.search.type == '1'" class="cell-link">录音</span>-->
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
...@@ -135,11 +148,13 @@ ...@@ -135,11 +148,13 @@
<script> <script>
import {getHourSingleApi, getHourTimeApi} from "@service/api"; import {getHourSingleApi, getHourTimeApi} from "@service/api";
import PhoneRecord from '@framework/PhoneRecord'
import ChatRecord from '@framework/ChatRecord'
import page from '@framework/page' import page from '@framework/page'
export default { export default {
name: "HourDialog", name: "HourDialog",
components: {page}, components: {page, PhoneRecord, ChatRecord},
props: { props: {
dialogObj: { dialogObj: {
type: Object, type: Object,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment