25개 이상의 토픽을 선택하실 수 없습니다. Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

1567 lines
38 KiB

  1. <template>
  2. <view class="translation" @click="changeEditing(false)">
  3. <view class="top" style="margin-top: 30rpx;">
  4. <view class="title">
  5. <view class="call_record_time">{{date}}</view>
  6. <view class="hash" @click="gotoChat" v-if="commentList.length != 0">
  7. 查看全部评论
  8. </view>
  9. </view>
  10. <view class="call_record_time_one" >接待时长 {{alltimeStr}}</view>
  11. <view class="audio-container">
  12. <view class="audio-play" @tap="changePlayState">
  13. <image class="image" mode="widthFix" :src="audioPlay ? 'https://qufang.oss-cn-beijing.aliyuncs.com/upload/icon/xcx/jjycrm/pause.png' : 'https://qufang.oss-cn-beijing.aliyuncs.com/upload/icon/xcx/jjycrm/play.png'"></image>
  14. </view>
  15. <view class="audio-slider">
  16. <view class="audio-time">
  17. <text>{{currentTimeStr}}</text>
  18. </view>
  19. <slider class="slider" min="0" :max="sliderMax" @change="sliderChangeComplate" block-size="14"
  20. :value="sliderValue" activeColor="blue"></slider>
  21. <view class="audio-time">
  22. <text>{{timeStr}}</text>
  23. </view>
  24. </view>
  25. </view>
  26. </view>
  27. <scroll-view :scroll-top="scrollTop" lower-threshold='100px' @scrolltolower="ltolower()"
  28. upper-threshold='40px' @scrolltoupper="rolltoupper()"
  29. :scroll-into-view="scrollId" scroll-y="true" class="text scroll-Y">
  30. <!-- 音频识别模块 -->
  31. <view >
  32. <!-- 聊天记录-->
  33. <view class="dialog-block" v-for="(dialog,i) in dialogList" :key="i">
  34. <view :id="'dialog'+i" class="fileName">录音文件</view>
  35. <view class="text dingweishiy" :id="'dialog'+csdFileindex+'text'+item.bg"
  36. :class="{active: item.bg < playNow && item.ed > playNow && i==0}"
  37. v-for="(item,index) in dialog.message" :key="index" :data-speaker="item.speaker"
  38. >
  39. <view class="avatar">
  40. <view v-if="item.speaker == 1" style="color: #60CBEC;">
  41. <image v-if="item.isShow == 0" :src="Aimg.replace(/[\r\n]/g,'')" mode="widthFix"></image>
  42. <text v-else>A</text>
  43. </view>
  44. <view v-if="item.speaker == 2" style="color: #EC8B47;">
  45. <image v-if="item.isShow == 0" :src="Aimg.replace(/[\r\n]/g,'')" mode="widthFix"></image>
  46. <text v-else>B</text>
  47. </view>
  48. <view v-if="item.speaker == 3" style="color: #4F861E;">
  49. <image v-if="item.isShow == 0" :src="Aimg.replace(/[\r\n]/g,'')" mode="widthFix"></image>
  50. <text v-else>C</text>
  51. </view>
  52. <view v-if="item.speaker == 4" style="color: #9F61C8;">
  53. <image v-if="item.isShow == 0" :src="Aimg.replace(/[\r\n]/g,'')" mode="widthFix"></image>
  54. <text v-else>D</text>
  55. </view>
  56. <view v-if="item.speaker == 5" style="color: #4980C8;">
  57. <image v-if="item.isShow == 0" :src="Aimg.replace(/[\r\n]/g,'')" mode="widthFix"></image>
  58. <text v-else>E</text>
  59. </view>
  60. <view v-if="item.speaker == 6" style="color: #60CBEC;">
  61. <image v-if="item.isShow == 0" :src="Aimg.replace(/[\r\n]/g,'')" mode="widthFix"></image>
  62. <text v-else>F</text>
  63. </view>
  64. <view v-if="item.speaker == 7" style="color: #EC8B47;">
  65. <image v-if="item.isShow == 0" :src="Aimg.replace(/[\r\n]/g,'')" mode="widthFix"></image>
  66. <text v-else>G</text>
  67. </view>
  68. <view v-if="item.speaker == 8" style="color: #4F861E;">
  69. <image v-if="item.isShow == 0" :src="Aimg.replace(/[\r\n]/g,'')" mode="widthFix"></image>
  70. <text v-else>H</text>
  71. </view>
  72. <view v-if="item.speaker == 9" style="color: #9F61C8;">
  73. <image v-if="item.isShow == 0" :src="Aimg.replace(/[\r\n]/g,'')" mode="widthFix"></image>
  74. <text v-else>I</text>
  75. </view>
  76. </view>
  77. <view class="content">
  78. <view v-html="item.onebest"></view>
  79. </view>
  80. <view class="tankuangcss" v-if="startTime==item.bg">
  81. <view style="max-width: 85rpx; height: 38rpx;font-size: 24rpx;color: #333333;text-align: center;line-height: 38rpx;
  82. border-radius: 2rpx;border: 1px solid #979797;">标签</view>
  83. <view style="max-width: 171rpx;height: 38rpx;background: #008EF2;border-radius: 2rpx;display: flex;
  84. align-items: center;margin-left: 10rpx;" @click="dianjibiaoqian()">
  85. <view style="width: 126rpx;height: 38rpx;line-height: 38rpx;font-size: 24rpx;color: #FFFFFF;
  86. text-align: center; overflow: hidden;">{{biaoqian}}</view>
  87. <view v-if="biaoqian.length>4" style="width: 37rpx;height: 37rpx;line-height: 37rpx;">
  88. <u-icon name="chat-fill" color="#ffffff" size="32rpx"></u-icon>
  89. </view>
  90. </view>
  91. </view>
  92. <view class="biaoqianya" v-if="startTime==item.bg">
  93. <view class="biaoqianyaisshow" v-if="biaoqianyaisshow">
  94. {{biaoqian}}
  95. </view>
  96. </view>
  97. </view>
  98. </view>
  99. <!-- 点赞 -->
  100. <view class="likeArea" :class="{'liked':isLiked}">
  101. <image :src="isLiked?'/static/images/recordingManagement/likeActive.png':'/static/images/recordingManagement/like_gray.png'"
  102. mode=""></image>
  103. </view>
  104. <view class="hash" id="hash">
  105. </view>
  106. <!-- 评语列表 -->
  107. <view class="chat" v-if="commentList.length != 0">
  108. <view class="total">
  109. 全部评论(共{{commentList.length}}条)
  110. </view>
  111. <view class="list">
  112. <view class="message" v-for="(item,index) in commentList" :key="index">
  113. <u-avatar class="avator" size="72" :src="item.commentPic ||'https://qufang.oss-cn-beijing.aliyuncs.com/upload/icon/xcx/jjycrm/my/headPicture.png'"></u-avatar>
  114. <view class="right">
  115. <view class="name">
  116. {{item.commentName||"未知昵称"}}
  117. </view>
  118. <view class="subtitle" v-if="item.commentAutoGraph">
  119. {{item.commentAutoGraph}}
  120. </view>
  121. <view class="answer" v-if="item.replyName">
  122. 回复@{{item.replyName}}
  123. </view>
  124. <view class="content" v-if="item.content">
  125. {{item.content}}
  126. </view>
  127. <view class="pic" v-if="item.picUrl">
  128. <image style="width: 100%;max-width: 240px;" :src="item.picUrl" mode="widthFix"></image>
  129. </view>
  130. <view class="bottom">
  131. <view class="time">
  132. {{item.createTime}}
  133. </view>
  134. <view class="button" v-if="myId != item.commentUser" @click.stop="answer(item.commentUser,item.id)">
  135. 回复
  136. </view>
  137. </view>
  138. </view>
  139. </view>
  140. </view>
  141. </view>
  142. </view>
  143. </scroll-view>
  144. <!-- 写评价 -->
  145. <view class="bottomArea">
  146. <image class="voice" @click.stop="changeVoiceShow" src="/static/images/recordingManagement/voice.png" mode=""></image>
  147. <view class="inputArea">
  148. <textarea :value="content" :focus="textareaFocus" type="text" @input="changeContent" :auto-height="true" class="editor"
  149. :class="{'active':editing}" @click.stop="changeEditing(true)" @confirm="sendComment">
  150. </textarea>
  151. <view class="placeholder" :class="{'editing':editing}" v-if="!content">写评价</view>
  152. <image class="edit" v-if="!editing && content == ''" src="/static/images/recordingManagement/edit.png" mode=""></image>
  153. </view>
  154. <image class="like" v-if="myId != createUser && !editing" @click="changeLike" src="/static/images/recordingManagement/like.png"
  155. mode=""></image>
  156. <image class="add" @click.stop="uploadImage" v-if="!editing && content == ''" src="/static/images/recordingManagement/add.png"
  157. mode=""></image>
  158. <view class="send" @click="sendComment" v-if="content!=''">
  159. 发送
  160. </view>
  161. </view>
  162. <!-- 回到顶部 -->
  163. <!-- <view class="backTop" @click="gotoTop">
  164. <image src="/static/images/backTop.png" mode=""></image>
  165. </view> -->
  166. <!-- 语音输入 -->
  167. <cover-view class="voiceContent" v-if="voiceShow" @click="changeVoiceShow">
  168. <cover-view class="box" @click.stop="" @touchstart="voiceStart" @touchend="voiceEnd">
  169. <cover-view class="center">
  170. <cover-image class="voice" src="/static/images/voice.png" mode="widthFix"></cover-image>
  171. <cover-view class="text">
  172. {{isRecording?'正在输入':'长按语音输入'}}
  173. </cover-view>
  174. </cover-view>
  175. </cover-view>
  176. </cover-view>
  177. </view>
  178. </template>
  179. <script>
  180. var app = getApp();
  181. var util = require("../../../utils/util.js");
  182. var config = require("../../../config");
  183. var plugin = requirePlugin("WechatSI")
  184. let manager = plugin.getRecordRecognitionManager();
  185. export default {
  186. data() {
  187. return {
  188. Aimg: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAACqVBMVEUAAAD////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////9/f3////9/f39/f3////////9/f3////////////9/f3////9/f39/f3////9/f3////////9/f3////9/f3////////////////9/f39/f3////////9/f39/f3////9/f39/f3////////9/f39/f3////////9/f39/f39/f3////////////////+/v7+/v7////+/v7////+/v7////+/v7+/v7////////+/v7+/v7////+/v7////+/v7////////////////////////////+/v7////+/v7////+/v7+/v7////////////+/v7////+/v7////+/v7+/v7////////+/v7////+/v7////////+/v7////////+/v7////+/v7+/v7+/v7////////+/v7+/v7////+/v7+/v7////+/v7////+/v7////+/v7////+/v7+/v7////+/v7+/v7////+/v7////+/v7////+/v7+/v7////+/v5jdC9iAAAA4nRSTlMAAQIDBAUGBwgLDA0ODxARExQVFhgbHB4fICEiIyQmJygpKy4wMTIzNDY3ODk6Oz0+P0BBQkRGR0lKTE5PUFFTVFVXWFlcXV9gYWJjZWZnaGlqa2xtbm9wcXJzdHV2d3h6e319foGBgoODh4mKiouMjI2QkZKSk5OUlpeYmZmam5ycnZ+foKGio6SmqKmpq6yur7CwsbGytba5uru8wMDBwcLCw8XGx8jJysrLzM7P0dLT1dXW1tfY2drc3N7f4OHh5Obm5+jp6uvs7vDx8vLz8/T09fX29/f4+fn6+vz8/f7+RVDt+wAAA55JREFUGBntwf9/1HMAB/DX7XYbuXWV1cyMoixfugrRGNXytW33pbVdJ83XkiMLSb4LJd/zZUi0SKT5FmGS77HUVaixnHP2+kt8vt3Zbp/3+7P3XR5+8XziP1E4uiYcrh1bjMNi6NzXumnoeX3eSOSrpHUv+zi0ogJ5qd3JLN1XuJGzwqW0sW4oclT0Im19XIqcuNdQ4D0vcnEDhdYgB2f+SbFZUHbEdkrsLYeqFko9CEVH7qJUohxqLqODO6BmLR18XwAVRQfpZDxUnExHjVBRR0eroGIZHX0AFe10tA8qdtNZIRR00VEPVLxLRzuh4jk62gIVy+joSaiI0tECqPDT0blQ4f6RDpI+KHmYDjZBzWQ6aIaibZSK+6BoOqViUOXqoER8BJSdlqJYFDm4h0LveJAD7+cUiFciJ1U/01aiGjk65zfaSF6EnE3azQEO1iAPFZuZZes45MUT3cM+emLFyNfwK3fQ8k1sFA6L0cElTzx9d1OVC/8bNG/gzY+GQaKk461gCQZr8iMHSNZD4nySv6wYj0EYFv2UhqcgcTsN70ePhtzER3+lJe6BxXP9jTctvrl1yS1jkLaNlkTbBR6IlF3dyT78sHh+oqkSlrJe/uOH1jGw4apem2I/1yLtGRo6kRZiP73t57mQxb+Z2dqRdikNtyLtBWb78Cz05bomyQH+KIGljIYaWNxxDtC72ouMgsdpZzosHhqqYDmFdraOQNpttHUfLKU0TITlKtra6IZpCu3tgMVPQx0sG2ivDqaVFDgOppk0LIbJm6C9DTB1UCAMU4SGZ2GqocAumL6jQBtMMRq2wLScAik3dMV/UWB/EQwrafgSpk6KlEJ3LIXOgGE9DQdgqKDQSdBNoNAiGL6i6SjowhSaAt1UCm2CzpOk6QTonqfQJdBdSKGkD5pKWqZCU7iHQtdB10KxWmjOpqUJmtMp9gB091LsIWiCtCyFZiHFXoZuHcW+hiZGy0vQvE2xT6DbTolKAI/R8hmA4SmKdUG3jxIhAG/QkigAZlAi6QJQTJk2AF1MGwXcRRkfgJGU2V8EHzP8wBeUqQQwllKTcCozpuFESk0AMJNSC3AxM8KYT6lpAFootRGLmLEQ6ynVCCBAqcSQ1cy4f8ghSs0HcMzvlKp+lRmvVFMqNQ6aaIoyd3Yy49vllOmuh+H4WZFIpFnTpJmjadTM1oQ1oVAgFNQENA0N9f01BIKh8OzGOU3NkbmXzwuV41/wNztgHKhu7WKTAAAAAElFTkSuQmCC",
  189. dialogList: [], // 录音对话转移列表
  190. isshowFile: false, // 录音文件默认隐藏
  191. luyinList: [], //录音文件列表
  192. newluyinList:[],
  193. fileIndex: 0, //文件索引
  194. fileId: '', //选中的录音ID
  195. id: "",
  196. audioStop: false,
  197. customerId: '',
  198. date: "",
  199. time: "",
  200. message: "", //聊天记录表
  201. durationTimeStr: "",
  202. autoLoad: true,
  203. playNow: 0,
  204. scrollTop: 0,
  205. scrollId: "",
  206. editing: false,
  207. isLiked: null,
  208. createUser: null,
  209. commentList: [], //评论列表
  210. content: "",
  211. voiceShow: false,
  212. isRecording: false,
  213. answerUserId: null,
  214. answerId: null,
  215. textareaFocus: false,
  216. myId: uni.getStorageSync("weapp_session_userInfo_data").accountId,
  217. startTime:"",
  218. alltimeStr:"00:00",
  219. audioPlay: false, //当前的播放状态控制
  220. sliderValue: 0, //进度条最小值
  221. end: false,
  222. sliderMax: 0, //进度条最大值
  223. innerAudioContext: "", //播放实例
  224. currentTimeStr: "00:00", //当前进度的时间
  225. timeStr: "00:00", //总的时间
  226. recordPath: "",
  227. csdFileindex:0,
  228. biaoqian:"",
  229. biaoqianyaisshow:false,
  230. startFile:'',
  231. textindex:0,//下拉 转写文件下标
  232. toptextindex:0,//上拉 转写文件下标
  233. roleindex:0,
  234. };
  235. },
  236. onLoad: function(options) {
  237. this.startTime=options.startTime
  238. this.customerId=options.customerId,
  239. this.biaoqian=options.biaoqian;
  240. this.startFile=options.startFile;
  241. this.getdianzan()
  242. this.getCommentList();
  243. },
  244. onShow: function() {
  245. this.initRecord();
  246. this.innerAudioContext = uni.createInnerAudioContext();
  247. this.innerAudioContext.autoplay = false;
  248. this.innerAudioContext.title = '音频';
  249. this.onPlay()
  250. this.onPause()
  251. this.onCanplay()
  252. this.onEnded()
  253. this.onSeeking()
  254. this.onSeeked()
  255. this.TimeUpdate()
  256. this.getluyinList();
  257. },
  258. // 在组件实例被从页面节点树移除时执行
  259. destroyed: function() {
  260. if (this.innerAudioContext) {
  261. this.innerAudioContext.destroy();
  262. }
  263. },
  264. onUnload:function(){
  265. this.innerAudioContext.destroy();
  266. },
  267. methods: {
  268. onPlay(){
  269. this.innerAudioContext.onPlay(() => {
  270. // 播放监听
  271. console.log('播放!');
  272. this.audioPlay = true;
  273. });
  274. },
  275. onPause(){
  276. this.innerAudioContext.onPause(() => {
  277. // 暂停监听
  278. console.log('暂停播放!');
  279. this.audioPlay = false
  280. });
  281. },
  282. onCanplay() {
  283. this.innerAudioContext.onCanplay((callback) => {
  284. console.log("缓冲回调",this.innerAudioContext.duration);
  285. })
  286. },
  287. onEnded(){
  288. this.innerAudioContext.onEnded(() => {
  289. // 结束播放监听
  290. console.log('播放结束!');
  291. this.audioPlay = false;
  292. });
  293. },
  294. onSeeking(){
  295. this.innerAudioContext.onSeeking((res) => {
  296. console.log("进行跳转", res);
  297. })
  298. },
  299. onSeeked(){
  300. this.innerAudioContext.onSeeked((res) => {
  301. console.log("结束跳转", res);
  302. this.$forceUpdate()
  303. });
  304. },
  305. TimeUpdate(){
  306. this.innerAudioContext.onTimeUpdate(() => {
  307. const {
  308. currentTime,
  309. duration
  310. } = this.innerAudioContext;
  311. this.playNow = parseInt(currentTime * 1000)
  312. if (this.dialogList.length == 0) {
  313. } else {
  314. const message = this.dialogList[0].message
  315. for (let i = 0; i < message.length; i++) {
  316. if (Number(message[i].bg) < this.playNow && Number(message[i].ed) > this.playNow) {
  317. this.scrollId = "dialog" + this.csdFileindex + "text" + i;
  318. break;
  319. }
  320. }
  321. }
  322. const currTimeStr = this.formatTime(currentTime);
  323. this.sliderValue = parseInt(currentTime);
  324. // 变动的时间
  325. this.currentTimeStr = currTimeStr;
  326. //进度条最大值
  327. this.sliderMax = this.luyinList[this.csdFileindex].recordDuration;
  328. this.$forceUpdate()
  329. });
  330. },
  331. //下一页
  332. ltolower() {
  333. var lengthcz=this.newluyinList.length-1;
  334. if (this.textindex >= lengthcz) {
  335. uni.showToast({
  336. title: '到底了',
  337. duration: 2000
  338. });
  339. return
  340. }else {
  341. this.textindex=this.textindex+1;
  342. this.newluyinList[this.textindex].message.forEach(item=>{
  343. this.dialogList[0].message.push(item)
  344. })
  345. }
  346. console.log("下一页",this.textindex)
  347. },
  348. //上一页
  349. rolltoupper() {
  350. if(this.toptextindex == 0){
  351. // uni.showToast({
  352. // title: '到头了',
  353. // duration: 2000
  354. // });
  355. return
  356. }else {
  357. if(this.dialogList[0]==undefined ){
  358. return
  359. }else{
  360. this.toptextindex=this.toptextindex-1;
  361. let reverselist=this.newluyinList[this.toptextindex].message;
  362. let runlist=reverselist.reverse();
  363. runlist.forEach(item=>{
  364. this.dialogList[0].message.unshift(item)
  365. })
  366. }
  367. }
  368. console.log("上一页",this.toptextindex)
  369. },
  370. //点击标签
  371. dianjibiaoqian(){
  372. if(this.biaoqian.length>4){
  373. this.biaoqianyaisshow= !this.biaoqianyaisshow;
  374. }
  375. },
  376. //获取点赞列表isLiked likegetLike
  377. getdianzan(){
  378. uni.request({
  379. url: config.service.likegetLike + '?targetId=' + this.customerId, //仅为示例,并非真实接口地址。
  380. method:"GET",
  381. header: {
  382. 'content-type': 'application/json',
  383. 'Access-Token': uni.getStorageSync('weapp_session_login_data').token
  384. },
  385. success: (data) => {
  386. if(data.data.code==10000){
  387. this.isLiked=data.data.data.like;
  388. }else{
  389. uni.hideLoading();
  390. uni.showModal({
  391. title: '提示',
  392. content: '请求数据失败,请重新尝试',
  393. showCancel: false
  394. });
  395. }
  396. },
  397. fail(error) {
  398. uni.hideLoading();
  399. uni.showModal({
  400. title: '提示',
  401. content: '网络异常,请重新尝试',
  402. showCancel: false
  403. });
  404. return false;
  405. }
  406. });
  407. },
  408. // 获取评论列表
  409. getCommentList() {
  410. const that = this;
  411. util.getRequestPromise(config.service.cmmentList + '?targetId=' + this.customerId, {}, false, "GET").then(data => {
  412. let tmp = data;
  413. tmp.reverse();
  414. that.commentList = tmp;
  415. });
  416. },
  417. // 获取录音记录列表
  418. getluyinList() {
  419. this.sliderMax = 0; //进度条最大值
  420. this.timeStr = "00:00"; //总的时间
  421. const parames = {
  422. pageNum: 1,
  423. pageSize: 100,
  424. query: {
  425. whetherFinish: 1,
  426. customerId: this.customerId,
  427. id:this.startFile
  428. }
  429. }
  430. this.$u.post("/corpus/fendianFindByPage", parames).then(res => {
  431. if (res && res.length) {
  432. let alltime = 1+res[0].recordDuration;
  433. this.alltimeStr = this.getTime(alltime)
  434. this.luyinList = res;
  435. this.recordPath = res[0].recordPath
  436. this.sliderMax = this.getTime(res[0].recordDuration)
  437. this.timeStr = this.getTime(res[0].recordDuration)
  438. this.date = res[0].receptionTime;
  439. this.getCorpusAnalysis();
  440. this.creatAudio()
  441. }
  442. })
  443. },
  444. //首次跳转
  445. adasdasdasd(e) {
  446. const currTimeStr = this.formatTime(e)
  447. this.currentTimeStr = currTimeStr
  448. this.innerAudioContext.seek(e);
  449. this.innerAudioContext.play();
  450. },
  451. //录音文件切换隐藏
  452. showFile() {
  453. this.isshowFile = !this.isshowFile
  454. },
  455. changeVoiceShow() {
  456. this.voiceShow = !this.voiceShow;
  457. },
  458. voiceStart: function() {
  459. manager.start({
  460. lang: "zh_CN"
  461. });
  462. },
  463. voiceEnd: function() {
  464. // uni.showToast();
  465. if (this.isRecording) {
  466. uni.showLoading({
  467. title: "识别中"
  468. })
  469. }
  470. this.voiceShow = false;
  471. this.isRecording = false;
  472. manager.stop();
  473. },
  474. // 语音初始化
  475. initRecord() {
  476. const that = this;
  477. manager.onStart = function(res) {
  478. that.isRecording = true;
  479. // this.voiceState = "onStart:" + res.msg + "正在录音"
  480. };
  481. //有新的识别内容返回,则会调用此事件
  482. manager.onRecognize = (res) => {
  483. console.log('ing' + res.result);
  484. }
  485. // 识别结束事件
  486. manager.onStop = (res) => {
  487. uni.hideLoading();
  488. let newText = that.content + res.result;
  489. if (newText.length > 140) {
  490. newText = newText.substring(0, 140)
  491. }
  492. that.content = newText;
  493. that.textareaFocus = true;
  494. }
  495. // 识别错误事件
  496. manager.onError = (res) => {
  497. uni.hideLoading();
  498. }
  499. },
  500. // 录音暂停播放
  501. changePlayState() {
  502. if (this.audioPlay == false) {
  503. this.innerAudioContext.play();
  504. } else {
  505. this.innerAudioContext.pause()
  506. }
  507. },
  508. //音频前进回退
  509. sliderChangeComplate(e) {
  510. let platetime=e.detail.value*1000;
  511. this.dialogList=[]
  512. uni.request({
  513. url: config.service.fastForward + '?corpusId=' + this.luyinList[this.csdFileindex].id+"&bg="+platetime, //仅为示例,并非真实接口地址。
  514. method: "GET",
  515. header: {
  516. 'content-type': 'application/json',
  517. 'Access-Token': uni.getStorageSync('weapp_session_login_data').token
  518. },
  519. success: (data) => {
  520. this.textindex=data.data.data.index;
  521. this.toptextindex=data.data.data.index;
  522. this.dialogList.push(this.newluyinList[data.data.data.index])
  523. const currTimeStr = this.formatTime(e.detail.value)
  524. this.currentTimeStr = currTimeStr
  525. this.innerAudioContext.seek(e.detail.value);
  526. this.innerAudioContext.play();
  527. }
  528. })
  529. },
  530. // 获取转义后的对话结果
  531. getCorpusAnalysis(){
  532. this.dialogList = [];
  533. uni.request({
  534. url: config.service.getCorpusAnal + '?corpusId=' + this.luyinList[this.csdFileindex].id+"&bg="+this.startTime+"&speaker="+this.roleindex + '&num=50', //仅为示例,并非真实接口地址。
  535. method: "GET",
  536. header: {
  537. 'content-type': 'application/json',
  538. 'Access-Token': uni.getStorageSync('weapp_session_login_data').token
  539. },
  540. success: (data) => {
  541. const jsonInfo = JSON.parse(data.data.data.audioContent);
  542. //上拉标记点
  543. this.textindex=data.data.data.index;
  544. //下拉标记点
  545. this.toptextindex=data.data.data.index;
  546. jsonInfo.forEach(item=>{
  547. item.message=JSON.parse(item.onebest)
  548. item.backindex=this.csdFileindex
  549. })
  550. console.log(jsonInfo)
  551. this.newluyinList=jsonInfo;
  552. this.dialogList.push(jsonInfo[this.textindex]);
  553. var itc=parseInt(this.startTime/1000)
  554. this.adasdasdasd(itc)
  555. }
  556. })
  557. },
  558. getTime(time) {
  559. return util.formatSecond(time)
  560. },
  561. //录音实例
  562. creatAudio() {
  563. this.innerAudioContext = uni.createInnerAudioContext();
  564. this.innerAudioContext.autoplay = true;
  565. this.innerAudioContext.src = this.recordPath;
  566. this.innerAudioContext.title = '音频';
  567. this.onPlay()
  568. this.onPause()
  569. this.onCanplay()
  570. this.onEnded()
  571. this.onSeeking()
  572. this.onSeeked()
  573. this.TimeUpdate()
  574. },
  575. formatTime(num) {
  576. //格式化时间格式
  577. num = num.toFixed(0);
  578. let second = num % 60;
  579. if (second < 10) second = '0' + second;
  580. let min = Math.floor(num / 60);
  581. if (min < 10) min = '0' + min;
  582. return min + ":" + second;
  583. },
  584. changeContent(e) {
  585. this.content = e.detail.value;
  586. },
  587. answer(userId, tid) {
  588. this.answerId = tid;
  589. this.answerUserId = userId;
  590. this.editing = true;
  591. this.textareaFocus = true;
  592. },
  593. // 保存评论
  594. sendComment() {
  595. if (this.content == "") {
  596. uni.showToast({
  597. icon: "none",
  598. title: "请输入标题"
  599. })
  600. return;
  601. }
  602. let parames = {
  603. targetId: this.customerId,
  604. content: this.content,
  605. commentType: 1
  606. };
  607. if (this.answerUserId) {
  608. parames.replyCommentId = this.answerId;
  609. parames.replyUser = this.answerUserId;
  610. }
  611. const that = this;
  612. util.getRequestPromise(config.service.saveCmment, parames, false).then(data => {
  613. that.getCommentList();
  614. uni.showToast({
  615. title: "评论成功",
  616. icon: "none"
  617. })
  618. that.textareaFocus = false;
  619. that.content = "";
  620. });
  621. },
  622. uploadImage() {
  623. const that = this;
  624. var parames = {
  625. targetId: that.id,
  626. commentType: 1
  627. };
  628. if (this.answerUserId) {
  629. parames.replyCommentId = this.answerId;
  630. parames.replyUser = this.answerUserId;
  631. }
  632. uni.chooseImage({
  633. count: 1, //默认9
  634. sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
  635. sourceType: ['album', 'camera'],
  636. success: function(res) {
  637. uni.showLoading({
  638. title: "上传中"
  639. })
  640. uni.uploadFile({
  641. url: config.service.saveCmmentUpload,
  642. filePath: res.tempFilePaths[0],
  643. name: 'file',
  644. header: {
  645. "Access-Token": uni.getStorageSync('weapp_session_login_data').token
  646. },
  647. formData: parames,
  648. success: (uploadFileRes) => {
  649. that.getCommentList();
  650. uni.hideLoading();
  651. uni.showToast({
  652. icon: "none",
  653. title: "上传成功"
  654. })
  655. console.log(uploadFileRes.data);
  656. }
  657. });
  658. }
  659. });
  660. },
  661. changeLike() {
  662. uni.showLoading({
  663. title: "请求中",
  664. mask: true
  665. })
  666. if (this.isLiked) {
  667. this.cancelLike();
  668. } else {
  669. this.saveLike();
  670. }
  671. },
  672. // 点赞
  673. saveLike() {
  674. const that = this;
  675. util.getRequestPromise(config.service.saveLike, {
  676. targetId: this.customerId
  677. }, false).then(data => {
  678. that.isLiked = true;
  679. uni.hideLoading();
  680. uni.showToast({
  681. icon: "none",
  682. title: "点赞成功"
  683. })
  684. });
  685. },
  686. // 取消点赞
  687. cancelLike() {
  688. const that = this;
  689. util.getRequestPromise(config.service.cancelLike, {
  690. targetId: this.customerId
  691. }, false).then(data => {
  692. that.isLiked = false;
  693. uni.hideLoading();
  694. uni.showToast({
  695. icon: "none",
  696. title: "取消点赞成功"
  697. })
  698. });
  699. },
  700. gotoChat() {
  701. this.scrollId = null;
  702. this.$nextTick(() => {
  703. this.scrollId = "hash";
  704. })
  705. },
  706. gotoTop() {
  707. this.scrollId = null;
  708. this.$nextTick(() => {
  709. this.scrollId = "top";
  710. })
  711. },
  712. changeEditing(type) {
  713. this.editing = type;
  714. this.answerId = null;
  715. this.answerUserId = null;
  716. this.textareaFocus = false;
  717. this.dialogList.forEach(res=>{
  718. res.message.forEach(asd=>{
  719. asd.isshow=false;
  720. })
  721. })
  722. }
  723. }
  724. };
  725. </script>
  726. <style lang="scss" scoped>
  727. .audio-container {
  728. width: 100%;
  729. display: flex;
  730. justify-content: space-between;
  731. align-items: center;
  732. .audio-head {
  733. width: 60rpx;
  734. height: 60rpx;
  735. flex-shrink: 0;
  736. }
  737. .audio-head .image {
  738. width: 100%;
  739. height: 100%;
  740. }
  741. .audio-slider {
  742. width: 96%;
  743. position: relative;
  744. padding: 2px 0rpx 0px 20px;
  745. display: flex;
  746. justify-content: space-between;
  747. align-items: center;
  748. }
  749. .audio-slider .slider {
  750. width: 100%;
  751. padding: 0px 15rpx;
  752. box-sizing: border-box;
  753. }
  754. .audio-time {
  755. width: 110rpx;
  756. text-align: right;
  757. font-size: 24rpx;
  758. line-height: 28rpx;
  759. color: #70798D;
  760. display: flex;
  761. justify-content: space-between;
  762. }
  763. .audio-play {
  764. width: 40rpx;
  765. height: 40rpx;
  766. flex-shrink: 0;
  767. }
  768. .audio-play .image {
  769. width: 100%;
  770. height: 100%;
  771. }
  772. }
  773. .biaoqiantom{
  774. background-color: #008EF2;
  775. color: #FFFFFF;
  776. border: none;
  777. }
  778. // 表单
  779. .tian-view{
  780. width: 570upx;
  781. background-color: #FFFFFF;
  782. border-bottom: 1px solid #ededee;
  783. display: flex;
  784. min-height: 96rpx;
  785. .tian-view-t1{
  786. width: 20rpx;
  787. font-size: 34rpx;
  788. height: 34rpx;
  789. line-height: 110rpx;
  790. letter-spacing: 0px;
  791. color: red;
  792. }
  793. .tian-view-t2{
  794. width:30%;
  795. min-height: 96rpx;
  796. line-height: 96rpx;
  797. font-size: 34rpx;
  798. color: #333;
  799. }
  800. .tian-view-t3{
  801. width: 61%;
  802. padding-top: 31rpx;
  803. padding-bottom:31rpx;
  804. display:flex;
  805. .tian-input{
  806. width:98%;
  807. font-size: 34rpx;
  808. border: none;
  809. }
  810. }
  811. }
  812. .zhezhoa {
  813. position: fixed;
  814. top: 0;
  815. left: 0;
  816. z-index: 999;
  817. width: 100%;
  818. height: 100vh;
  819. opacity: 0.5;
  820. background-color: #666666;
  821. }
  822. .bounced {
  823. width: 570upx;
  824. background: #FFFFFF;
  825. z-index: 1000;
  826. border-radius: 10upx;
  827. position: fixed;
  828. left: 50%;
  829. top: 50%;
  830. transform: translate(-50%, -50%);
  831. /* 50%为自身尺寸的一半 */
  832. .jiajinghuatit{
  833. width: 100%;
  834. height: 68rpx;
  835. font-size: 30rpx;
  836. text-align: center;
  837. line-height: 68rpx;
  838. }
  839. .jiajinghuaview{
  840. padding: 18rpx 18rpx 18rpx 18rpx;
  841. display: flex;
  842. flex-wrap:wrap;
  843. .jiajinghuaview1{
  844. padding: 8rpx 8rpx 8rpx 8rpx;
  845. font-size: 26rpx;
  846. border-radius: 12rpx;
  847. border: 1px solid #979797;
  848. margin-left: 8rpx;
  849. }
  850. .jighuaview2{
  851. padding: 8rpx 8rpx 8rpx 8rpx;
  852. font-size: 26rpx;
  853. border-radius: 12rpx;
  854. border: 1px solid #979797;
  855. margin-left: 8rpx;
  856. display: flex;
  857. .view1-text{
  858. text-align: center;
  859. // border-right: 1rpx solid red;
  860. }
  861. .view1-img{
  862. width: 50rpx;
  863. }
  864. }
  865. }
  866. .bounced3 {
  867. height: 100upx;
  868. width: 100%;
  869. margin-top: 40upx;
  870. border-top: 1px solid #dddddd;
  871. display: flex;
  872. }
  873. .bounced3-1 {
  874. width: 50%;
  875. height: 100%;
  876. text-align: center;
  877. line-height: 100upx;
  878. border-right: 1px solid #dddddd;
  879. font-size: 36upx;
  880. color: #999999;
  881. }
  882. .bounced3-2 {
  883. width: 50%;
  884. height: 100%;
  885. text-align: center;
  886. line-height: 100upx;
  887. font-size: 36upx;
  888. color: #108ee9;
  889. }
  890. }
  891. .bosdttom{
  892. color: #008EF2;
  893. }
  894. .tab-box {
  895. width: 100%;
  896. display: flex;
  897. justify-content: center;
  898. align-items: center;
  899. .yinpinshibie {
  900. width: 156rpx;
  901. height: 50rpx;
  902. font-size: 36rpx;
  903. font-weight: 400;
  904. color: #333333;
  905. text-align: center;
  906. line-height: 50rpx;
  907. letter-spacing: 2rpx;
  908. margin-right: 188rpx;
  909. &.active {
  910. position: relative;
  911. &::after {
  912. position: absolute;
  913. content: '';
  914. width: 119rpx;
  915. height: 8rpx;
  916. background: #008EF2;
  917. border-radius: 4rpx;
  918. top: 50rpx;
  919. right: 0;
  920. left: 0;
  921. margin: 0 auto;
  922. }
  923. }
  924. }
  925. .rate {
  926. width: 156rpx;
  927. height: 50rpx;
  928. font-size: 36rpx;
  929. font-weight: 400;
  930. color: #333333;
  931. line-height: 50rpx;
  932. letter-spacing: 2rpx;
  933. text-align: center;
  934. &.active {
  935. position: relative;
  936. &::after {
  937. position: absolute;
  938. content: '';
  939. width: 119rpx;
  940. height: 8rpx;
  941. background: #008EF2;
  942. border-radius: 4rpx;
  943. top: 50rpx;
  944. right: 0;
  945. left: 0;
  946. margin: 0 auto;
  947. }
  948. }
  949. }
  950. }
  951. .dialog-block {
  952. margin: 20rpx 0;
  953. border-bottom: 1px solid #ccc;
  954. .fileName {
  955. text-align: center;
  956. margin: 10rpx auto;
  957. width: 115rpx;
  958. height: 42rpx;
  959. line-height: 42rpx;
  960. background: #EFEFEF;
  961. border-radius: 4rpx;
  962. font-size: 20rpx;
  963. font-weight: 400;
  964. color: #333333;
  965. }
  966. }
  967. // 评分
  968. .rate-box {
  969. padding: 10rpx 20rpx;
  970. .date {
  971. width: 300rpx;
  972. height: 33rpx;
  973. font-size: 24rpx;
  974. font-weight: 400;
  975. color: #333333;
  976. line-height: 33rpx;
  977. letter-spacing: 1rpx;
  978. margin-bottom: 8rpx;
  979. }
  980. .title {
  981. width: 100%;
  982. height: 42rpx;
  983. font-size: 30rpx;
  984. font-weight: 500;
  985. color: #333333;
  986. line-height: 42rpx;
  987. letter-spacing: 2rpx;
  988. margin-bottom: 20rpx;
  989. }
  990. .level1 {
  991. display: flex;
  992. align-items: center;
  993. .level-name {
  994. width: 104rpx;
  995. height: 33rpx;
  996. font-size: 24rpx;
  997. font-weight: 500;
  998. color: #333333;
  999. line-height: 33rpx;
  1000. letter-spacing: 1rpx;
  1001. margin-right: 10rpx;
  1002. }
  1003. .level-progress {
  1004. flex: 1;
  1005. border-radius: 11rpx;
  1006. height: 21rpx;
  1007. background-color: #BEE4FF;
  1008. position: relative;
  1009. .color {
  1010. width: 0;
  1011. position: absolute;
  1012. top: 0;
  1013. left: 0;
  1014. height: 21rpx;
  1015. border-radius: 11rpx 0 0 11rpx;
  1016. background-color: #008EF2;
  1017. }
  1018. }
  1019. .level-rate {
  1020. width: 65rpx;
  1021. height: 33rpx;
  1022. font-size: 24rpx;
  1023. font-weight: 500;
  1024. color: #333333;
  1025. line-height: 33rpx;
  1026. letter-spacing: 1rpx;
  1027. margin: 0 20rpx 0 15rpx;
  1028. }
  1029. .arrow {
  1030. width: 37rpx;
  1031. height: 21rpx;
  1032. padding: 5rpx 20rpx;
  1033. }
  1034. .rotatearrow {
  1035. transform: rotate(270deg);
  1036. }
  1037. }
  1038. .level1-subbox {
  1039. display: flex;
  1040. margin-top: 20rpx;
  1041. flex-wrap: wrap;
  1042. .sub-name {
  1043. width: 50%;
  1044. display: flex;
  1045. margin-bottom: 18rpx;
  1046. .subitem-name {
  1047. width: 104rpx;
  1048. height: 33rpx;
  1049. font-size: 24rpx;
  1050. font-weight: 400;
  1051. color: #999999;
  1052. line-height: 33rpx;
  1053. letter-spacing: 1rpx;
  1054. margin-right: 12rpx;
  1055. }
  1056. .checkimg {
  1057. width: 27rpx;
  1058. height: 27rpx;
  1059. }
  1060. }
  1061. }
  1062. }
  1063. .luyin {
  1064. height: 100rpx;
  1065. width: 100%;
  1066. }
  1067. .translation {
  1068. padding-left: 30rpx;
  1069. padding-right: 30rpx;
  1070. background: #FFFFFF;
  1071. display: flex;
  1072. flex-direction: column;
  1073. height: 100vh;
  1074. }
  1075. .translation .top {
  1076. margin: 0 -30upx;
  1077. padding: 0 30upx;
  1078. background: #ffffff;
  1079. border-bottom: 1rpx solid #F2F2F2;
  1080. padding-bottom: 10rpx;
  1081. }
  1082. .translation .top .title {
  1083. display: flex;
  1084. justify-content: space-between;
  1085. .hash {
  1086. color: rgba(21, 144, 233, 1);
  1087. font-size: 24upx;
  1088. }
  1089. }
  1090. .call_record_time {
  1091. height: 44rpx;
  1092. font-size: 28rpx;
  1093. font-weight: 600;
  1094. color: #008EF2;
  1095. line-height: 44rpx;
  1096. }
  1097. .call_record_time_one {
  1098. height: 48rpx;
  1099. font-size: 24rpx;
  1100. font-weight: 500;
  1101. color: #70798d;
  1102. line-height: 48rpx;
  1103. display: flex;
  1104. justify-content: space-between;
  1105. position: relative;
  1106. .diangweitupian{
  1107. width: 46rpx;
  1108. height: 46rpx;
  1109. // border: 1px solid red;
  1110. position: absolute;
  1111. top: 0rpx;
  1112. right: 75rpx;
  1113. }
  1114. .file-change {
  1115. position: absolute;
  1116. top: 50rpx;
  1117. right: 0rpx;
  1118. width: 184rpx;
  1119. background: #FFFFFF;
  1120. box-shadow: 0rpx 0rpx 6rpx 2rpx rgba(230, 230, 230, 0.5);
  1121. border-radius: 4rpx;
  1122. z-index: 99;
  1123. height: auto;
  1124. max-height: 600rpx;
  1125. overflow: auto;
  1126. }
  1127. .file-item {
  1128. width: 184rpx;
  1129. height: 60rpx;
  1130. line-height: 60rpx;
  1131. text-align: center;
  1132. font-size: 30rpx;
  1133. font-weight: 400;
  1134. color: #333333;
  1135. border-bottom: 1rpx solid #E2E2E2;
  1136. }
  1137. .file-item:last-child {
  1138. border: 0
  1139. }
  1140. .fileactive {
  1141. color: #008EF2
  1142. }
  1143. }
  1144. .dingweishiy{
  1145. position: relative;
  1146. .tankuangcss{
  1147. position: absolute;
  1148. bottom: -50rpx;
  1149. left:0rpx;
  1150. width: 100%;
  1151. // border: 1rpx solid red;
  1152. font-size: 24rpx;
  1153. color: #FFFFFF;
  1154. padding-top: 4rpx;
  1155. padding-bottom:4rpx;
  1156. display: flex;
  1157. justify-content: center;
  1158. border-radius: 15rpx;
  1159. z-index: 1000;
  1160. }
  1161. .biaoqianya{
  1162. width: 631rpx;
  1163. margin: 0 auto;
  1164. position: absolute;
  1165. bottom: -120rpx;
  1166. left:0rpx;
  1167. z-index: 2000;
  1168. color: #FFFFFF;
  1169. .biaoqianyaisshow{
  1170. background-image: url(../../../static/images/biaoqianya.png);
  1171. background-size: 100% 100%;
  1172. text-align: left;
  1173. text-indent: 20rpx;
  1174. }
  1175. }
  1176. }
  1177. .scroll-Y {
  1178. font-size: 36upx;
  1179. color: #999999;
  1180. background: #FFFFFF;
  1181. margin-top: 30upx;
  1182. flex: 1;
  1183. overflow-y: scroll;
  1184. width: 100%;
  1185. }
  1186. .scroll-Y .text {
  1187. margin: 80upx 30upx;
  1188. line-height: 80upx;
  1189. display: flex;
  1190. align-items: center;
  1191. }
  1192. .scroll-Y .text[data-speaker="2"],
  1193. .scroll-Y .text[data-speaker="4"],
  1194. .scroll-Y .text[data-speaker="6"] {
  1195. flex-direction: row-reverse;
  1196. text-align: right;
  1197. .content {
  1198. margin-left: 0;
  1199. margin-right: 30upx;
  1200. background: #F6F6F6;
  1201. color: #999999;
  1202. }
  1203. }
  1204. .scroll-Y .text .avatar {
  1205. width: 64upx;
  1206. height: 64upx;
  1207. line-height: 64upx;
  1208. text-align: center;
  1209. // border: 1rpx solid red;
  1210. font-size: 36rpx;
  1211. border-radius: 50%;
  1212. background: #F2F2F2;
  1213. color: #008EF2;
  1214. // display: flex;
  1215. // justify-content: center;
  1216. // align-items: center;
  1217. image {
  1218. width: 40upx;
  1219. }
  1220. }
  1221. .scroll-Y .text .content {
  1222. margin-left: 30upx;
  1223. line-height: 60rpx;
  1224. text-align: left;
  1225. padding: 0 5px;
  1226. background: #2BC805;
  1227. border-radius: 8upx;
  1228. max-width: 442rpx;
  1229. color: #FFFFFF;
  1230. }
  1231. .scroll-Y .text.active .content {
  1232. color: #38FFF1;
  1233. position: relative;
  1234. }
  1235. .scroll-Y .text.active[data-speaker="2"] .content,
  1236. .scroll-Y .text.active[data-speaker="4"] .content,
  1237. .scroll-Y .text.active[data-speaker="6"] .content {
  1238. color: #FF7538;
  1239. position: relative;
  1240. }
  1241. .likeArea {
  1242. width: 86upx;
  1243. height: 84upx;
  1244. margin: 20upx auto 38upx auto;
  1245. border-radius: 50%;
  1246. display: flex;
  1247. justify-content: center;
  1248. align-items: center;
  1249. border: 1upx solid #C1C2C1;
  1250. &.liked {
  1251. border: 1upx solid rgba(21, 144, 233, 1);
  1252. }
  1253. image {
  1254. width: 38upx;
  1255. height: 39upx;
  1256. }
  1257. }
  1258. .chat {
  1259. display: flex;
  1260. flex-direction: column;
  1261. border-top: 1upx solid rgba(151, 151, 151, 0.4);
  1262. padding-top: 20upx;
  1263. .total {
  1264. color: rgba(21, 144, 233, 1);
  1265. font-size: 24upx;
  1266. }
  1267. .list {
  1268. display: flex;
  1269. flex-direction: column;
  1270. .message {
  1271. display: flex;
  1272. margin-top: 20upx;
  1273. border-bottom: 1upx solid rgba(151, 151, 151, 0.4);
  1274. padding-bottom: 20upx;
  1275. &:last-child {
  1276. border-bottom: 0;
  1277. }
  1278. .avator {
  1279. margin-left: 120upx;
  1280. }
  1281. &:first-child {
  1282. .avator {
  1283. margin-left: 0;
  1284. }
  1285. }
  1286. .right {
  1287. display: flex;
  1288. flex-direction: column;
  1289. margin-left: 20upx;
  1290. flex: 1;
  1291. .name {
  1292. color: rgba(16, 16, 16, 1);
  1293. font-size: 30upx;
  1294. }
  1295. .subtitle {
  1296. color: rgba(120, 120, 120, 1);
  1297. font-size: 24upx;
  1298. margin-top: 16upx;
  1299. }
  1300. .answer {
  1301. font-size: 24upx;
  1302. color: #787878;
  1303. }
  1304. .content {
  1305. color: rgba(49, 48, 48, 1);
  1306. font-size: 30upx;
  1307. margin-top: 20upx;
  1308. position: relative;
  1309. }
  1310. .bottom {
  1311. margin-top: 16upx;
  1312. display: flex;
  1313. justify-content: space-between;
  1314. .time {
  1315. color: rgba(185, 185, 185, 1);
  1316. font-size: 20upx;
  1317. }
  1318. .button {
  1319. color: rgba(144, 144, 144, 1);
  1320. font-size: 30upx;
  1321. width: 111upx;
  1322. height: 44upx;
  1323. border-radius: 22upx;
  1324. border: 1upx solid rgba(151, 151, 151, 1);
  1325. text-align: center;
  1326. }
  1327. }
  1328. }
  1329. }
  1330. }
  1331. }
  1332. .bottomArea {
  1333. min-height: 90upx;
  1334. background: #F0F2F5;
  1335. width: 100vw;
  1336. margin: 0 -30rpx;
  1337. display: flex;
  1338. align-items: center;
  1339. border-top: 1upx solid rgba(151, 151, 151, 0.25);
  1340. .voice {
  1341. width: 44upx;
  1342. height: 44upx;
  1343. margin-left: 38upx;
  1344. }
  1345. .inputArea {
  1346. margin-left: 38upx;
  1347. margin-right: 38upx;
  1348. flex: 1;
  1349. display: flex;
  1350. position: relative;
  1351. .edit {
  1352. width: 30upx;
  1353. height: 28upx;
  1354. position: absolute;
  1355. top: 31upx;
  1356. left: 27upx;
  1357. }
  1358. .editor {
  1359. background: rgba(0, 139, 245, 0.17);
  1360. border-radius: 29upx;
  1361. flex: 1;
  1362. min-height: 58upx;
  1363. width: unset;
  1364. padding: 0 32upx;
  1365. font-size: 30upx;
  1366. margin: 16rpx 0;
  1367. line-height: 29px;
  1368. }
  1369. .placeholder {
  1370. position: absolute;
  1371. left: 70rpx;
  1372. top: 22rpx;
  1373. color: #26A2FF;
  1374. &.editing {
  1375. left: 36rpx;
  1376. }
  1377. }
  1378. }
  1379. .download {
  1380. width: 41upx;
  1381. height: 35upx;
  1382. margin-right: 36upx;
  1383. }
  1384. .like {
  1385. width: 38upx;
  1386. height: 39upx;
  1387. margin-right: 38upx;
  1388. }
  1389. .add {
  1390. width: 50upx;
  1391. height: 50upx;
  1392. margin-right: 38upx;
  1393. }
  1394. .send {
  1395. background: #1590e9;
  1396. color: white;
  1397. padding: 10rpx 20rpx;
  1398. margin: 5px;
  1399. border-radius: 8rpx;
  1400. }
  1401. }
  1402. .backTop {
  1403. width: 60upx;
  1404. height: 60upx;
  1405. background: rgba(211, 235, 253, 1);
  1406. box-shadow: 0upx 0upx 2upx 4upx rgba(38, 161, 255, 0.04);
  1407. border-radius: 50%;
  1408. position: fixed;
  1409. bottom: 200upx;
  1410. right: 8upx;
  1411. display: flex;
  1412. justify-content: center;
  1413. align-items: center;
  1414. image {
  1415. width: 26upx;
  1416. height: 34upx;
  1417. }
  1418. }
  1419. .voiceContent {
  1420. position: fixed;
  1421. top: 0;
  1422. bottom: 0;
  1423. left: 0;
  1424. right: 0;
  1425. width: 100vw;
  1426. height: 100vh;
  1427. display: flex;
  1428. justify-content: center;
  1429. align-items: center;
  1430. background: rgba(30, 30, 30, 0.4592);
  1431. z-index: 10001;
  1432. }
  1433. .box {
  1434. background: rgba(21, 144, 233, 0.299);
  1435. width: 524upx;
  1436. height: 524upx;
  1437. border-radius: 50%;
  1438. display: flex;
  1439. align-items: center;
  1440. justify-content: center;
  1441. .center {
  1442. width: 412upx;
  1443. height: 412upx;
  1444. background: #1590E9;
  1445. border-radius: 50%;
  1446. display: flex;
  1447. align-items: center;
  1448. justify-content: center;
  1449. flex-direction: column;
  1450. .voice {
  1451. width: 110upx;
  1452. height: 133upx;
  1453. }
  1454. .text {
  1455. color: #FFFFFF;
  1456. font-size: 36upx;
  1457. margin-top: 24upx;
  1458. }
  1459. }
  1460. }
  1461. </style>