Nevar pievienot vairāk kā 25 tēmas Tēmai ir jāsākas ar burtu vai ciparu, tā var saturēt domu zīmes ('-') un var būt līdz 35 simboliem gara.
 
 
 

1613 rindas
40 KiB

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