Compare commits

...

2 Commits
master ... test

Author SHA1 Message Date
  douzhuo e17359f852 提交修改audio 2 years ago
  douzhuo 98b49c470e init test 2 years ago
17 changed files with 1232 additions and 715 deletions
Split View
  1. +169
    -73
      App.vue
  2. +87
    -0
      components/yz-audio/audioBg.js
  3. +119
    -0
      components/yz-audio/index.scss
  4. BIN
      components/yz-audio/static/backimg.png
  5. BIN
      components/yz-audio/static/bg.png
  6. BIN
      components/yz-audio/static/bg_act.png
  7. BIN
      components/yz-audio/static/loading.png
  8. BIN
      components/yz-audio/static/loading2.png
  9. BIN
      components/yz-audio/static/pausebtn.png
  10. BIN
      components/yz-audio/static/playbtn.png
  11. +432
    -0
      components/yz-audio/yz-audio.vue
  12. +3
    -1
      main.js
  13. +1
    -0
      manifest.json
  14. +296
    -381
      pages/mine/details.vue
  15. +69
    -259
      pages/mine/details2.vue
  16. +54
    -0
      store/index.js
  17. +2
    -1
      utils/domain.js

+ 169
- 73
App.vue View File

@@ -1,12 +1,80 @@
<template>
<view>
</view>
</template>
<script>
import Vue from 'vue';
//app.js
var config = require("./config");
export default {
onLaunch: function(options) {
onLaunch(options) {

uni.getSystemInfo({
success: function(e) {
console.log(e, 'adjsakljdklasjdklsakjdslakjd')
// #ifdef MP-WEIXIN
Vue.prototype.StatusBar = e.statusBarHeight;
let custom = wx.getMenuButtonBoundingClientRect();
Vue.prototype.Custom = custom;
Vue.prototype.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
Vue.prototype.windowHeight = e.safeArea.height
// #endif
Vue.mixin({
data() {
return {
StatusBar: Vue.prototype.StatusBar,
CustomBar: Vue.prototype.CustomBar,
windowHeight: Vue.prototype.windowHeight
};
},

methods: {
// 目前使用页面为录音页面
SPEAKERSTYLE(index) {
let obj = {
color: '',
}
switch (index) {
case 1:
obj.color = '#60CBEC';
break;
case 2:
obj.color = '#EC8B47';
break;
case 3:
obj.color = '#4F861E';
break;
case 5:
obj.color = '#4980C8';
break;
case 6:
obj.color = '#60CBEC';
break;
case 7:
obj.color = '#EC8B47';
break;
case 8:
obj.color = '#4F861E';
break;
default:
obj.color = '#9F61C8';
break;
}
return obj
},
},

filters: {
// ASCII码转换 大写字母A是65 演讲人是从1开始所以num+64
toCapital(num) {
let str = ''
if (num) {
str = String.fromCharCode(num + 64)
}
return str
}
}
});
}
});


if (wx.canIUse('getUpdateManager')) {
const updateManager = wx.getUpdateManager()
updateManager.onCheckForUpdate(function(res) {
@@ -49,70 +117,72 @@
this.$u.get("/user/getMenu").then(data => {
uni.setStorageSync("weapp_session_Menu_data", data)
})
wx.setInnerAudioOption({
obeyMuteSwitch: false
});
});
},
onShow(options) {
const token = uni.getStorageSync("weapp_session_login_data")
if (typeof token.token != "string") {
console.log("没有")
return
}else{
} else {
this.infoscoket()
}
},
onHide() {},
methods: {
infoscoket(){
let pushon=uni.getStorageSync('weapp_session_userInfo_data').loginName
infoscoket() {
let pushon = uni.getStorageSync('weapp_session_userInfo_data').loginName
uni.connectSocket({
url: 'wss://hfju.com/ws?uid='+pushon+'_applets',
header: {
"content-type": "application/json",
'Access-Token': uni.getStorageSync('weapp_session_login_data').token
}
url: 'wss://hfju.com/ws?uid=' + pushon + '_applets',
header: {
"content-type": "application/json",
'Access-Token': uni.getStorageSync('weapp_session_login_data').token
}
});
uni.onSocketOpen(function (res) {
console.log('WebSocket连接已打开!');
uni.onSocketOpen(function(res) {
console.log('WebSocket连接已打开!');
});
uni.onSocketError(function (res) {
console.log('WebSocket连接打开失败,请检查!');
uni.onSocketError(function(res) {
console.log('WebSocket连接打开失败,请检查!');
});
uni.onSocketMessage(function (res) {
console.log('收到服务器内容:' + res.data);
let cedata=JSON.stringify(res);
let data=JSON.parse(cedata);
let zdata=JSON.parse(data.data)
if(zdata.to=="recCmd"){
uni.$emit('update',{msg:'页面更新'})
return
}
uni.showModal({
title: '提示',
content: zdata.to+'的设备电量过低请检查!',
cancelText: "取消", // 取消按钮的文字
confirmText: "查看", // 确认按钮文字
success: function (res) {
if (res.confirm) {
console.log('用户点击确定');
uni.navigateTo({
url: `/pages/main/toviewtherecording/index?jump=`+"jump"
})
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});
uni.onSocketMessage(function(res) {
console.log('收到服务器内容:' + res.data);
let cedata = JSON.stringify(res);
let data = JSON.parse(cedata);
let zdata = JSON.parse(data.data)
if (zdata.to == "recCmd") {
uni.$emit('update', {
msg: '页面更新'
})
return
}
uni.showModal({
title: '提示',
content: zdata.to + '的设备电量过低请检查!',
cancelText: "取消", // 取消按钮的文字
confirmText: "查看", // 确认按钮文字
success: function(res) {
if (res.confirm) {
console.log('用户点击确定');
uni.navigateTo({
url: `/pages/main/toviewtherecording/index?jump=` + "jump"
})

} else if (res.cancel) {
console.log('用户点击取消');
}
}
});
});
},
Closewebsocke(){
Closewebsocke() {
uni.closeSocket();
uni.onSocketClose(function (res) {
console.log('WebSocket 已关闭!');
uni.onSocketClose(function(res) {
console.log('WebSocket 已关闭!');
});
},
}
@@ -124,17 +194,20 @@
</style>
<style lang="scss">
@import "uview-ui/index.scss";

/*每个页面公共css */
//图表样式等
.single{
.single {
width: 100%;
background: #FFFFFF;
.title{

.title {
width: 100%;
height: 90rpx;
border-bottom: 1rpx solid #E0E0E0;
display: flex;
.title1{

.title1 {
flex: 2;
font-size: 30rpx;
font-weight: 600;
@@ -142,28 +215,33 @@
line-height: 90rpx;
text-indent: 30rpx;
}
.title3{

.title3 {
flex: 3;
height: 90rpx;
display: flex;
align-items: center;
justify-content: flex-end;
.title3-box{

.title3-box {
display: flex;
align-items: center;
width: 25%;
justify-content: center;
.activecltab{

.activecltab {
border-bottom: 2px solid #2671E2;
}
}
}
.title2{

.title2 {
flex: 3;
height: 90rpx;
display: flex;
align-items: center;
.title2-che{

.title2-che {
width: 178rpx;
height: 48rpx;
background: #FFFFFF;
@@ -176,7 +254,8 @@
text-indent: 12rpx;
margin-left: 35rpx;
position: relative;
.righttochoose{

.righttochoose {
width: 18rpx;
height: 24rpx;
position: absolute;
@@ -186,15 +265,18 @@
}
}
}
.swiper-box{

.swiper-box {
width: 97%;
margin: 0 auto;
}
.hejibox{

.hejibox {
width: 100%;
height: 80rpx;
display: flex;
.heji{

.heji {
width: 50%;
height: 100%;
font-size: 28rpx;
@@ -204,7 +286,8 @@
text-indent: 30rpx;
}
}
.danwei{

.danwei {
width: 100%;
height: 40rpx;
font-size: 24rpx;
@@ -213,31 +296,37 @@
line-height: 40rpx;
text-indent: 30rpx;
}
.uchaserbox{

.uchaserbox {
width: 95%;
height: 470rpx;
}
.jindu{

.jindu {
width: 100%;
height: 300rpx;
.jindu-box{
width: 100%;

.jindu-box {
width: 100%;
padding-left: 30rpx;
padding-right: 30rpx;
.jindu-boxche{

.jindu-boxche {
width: 100%;
height: 46rpx;
display: flex;
align-items: center;
height: 50rpx;
.jindu-name{

.jindu-name {
width: 120rpx;
font-size: 28rpx;
font-size: 28rpx;
color: #666666;
}
.jindu-zxl{

.jindu-zxl {
width: 120rpx;
font-size: 26rpx;
font-size: 26rpx;
margin-left: 16rpx;
color: #666666;
text-align: center;
@@ -246,6 +335,7 @@
}
}
}

//时间切换的样式
.boxtittab {
width: 100;
@@ -254,7 +344,7 @@
border: 1px solid #E0E0E0;
display: flex;
align-items: center;
.tabbox {
flex: 1;
height: 100%;
@@ -264,40 +354,46 @@
font-size: 28rpx;
display: flex;
justify-content: center;
.activecllasscet {
width: 96rpx;
border-bottom: 2px solid #2671E2;
}
}
}

//多个格子的样式
.boxzonglan {
width: 100%;
min-height: 496rpx;
background: #FFFFFF;
padding: 30rpx 30rpx 30rpx 30rpx;

.zonglantit {
font-size: 30rpx;
color: #333333;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
}

.zonglanbox {
width: 100%;
display: flex;
flex-wrap: wrap;
margin-top: 24rpx;

.grid {
width: 50%;
height: 128rpx;
border: 1px solid #E0E0E0;

.audonum {
color: #666666;
text-indent: 40rpx;
font-size: 26rpx;
margin-top: 20rpx;
}

.num {
color: #333333;
text-indent: 40rpx;


+ 87
- 0
components/yz-audio/audioBg.js View File

@@ -0,0 +1,87 @@
import {
mapState,
mapActions,
mapMutations
} from 'vuex'
export const audios = {
data() {
return {
isBgPlay: false, // 是否禁止拖拽进度条
}
},

computed: {
...mapState(['bgAudioMannager']),
},

methods: {
setAudio(obj) {
this.bgAudioMannager.title = '录音音频';
this.bgAudioMannager.src = obj.src
this.bgAudioMannager.startTime = obj.currentTime
},

setAudioFunc() {
this.bgAudioMannager.onCanplay(() => {
console.log('可以播放');
});
this.bgAudioMannager.onStop(() => {
console.log('停止播放');
this.isBgPlay = false
});

this.bgAudioMannager.onPause(() => {
console.log('暂停播放');
this.isBgPlay = false
// 设置当前暂停的视频播放位置
// this.seek(this.bgAudioMannager.currentTime)
// this.play()
});
this.bgAudioMannager.onEnded(() => {
console.log('自然播放结束事件');
this.isBgPlay = false
});
this.bgAudioMannager.onError((res) => {
console.log(res.errMsg);
console.log(res.errCode);
});

this.bgAudioMannager.onTimeUpdate(() => {
this.isBgPlay = true
this.duration = this.bgAudioMannager.duration;
this.currentTime = this.bgAudioMannager.currentTime;
this.$emit('timeUpdate', {
duration: this.bgAudioMannager.duration,
currentTime: this.bgAudioMannager.currentTime
})
});
},
// 背景音频暂停
audioPause() {
this.bgAudioMannager.pause()
},
// 背景音频播放
audioPlay() {
this.pause()
this.bgAudioMannager.play()
},
//背景音频指定秒数播放
audioSeek(t) {
this.bgAudioMannager.seek(t)
},
// 停止背景音频播放
stopAduio() {
console.log(this.bgAudioMannager)
this.bgAudioMannager.pause()
if (this.bgAudioMannager && this.bgAudioMannager.src) {
this.bgAudioMannager.src = ''
}
}
}
}

+ 119
- 0
components/yz-audio/index.scss View File

@@ -0,0 +1,119 @@
@mixin textoverflow() {
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
}
@keyframes rowup {
0% {
-webkit-transform: translate(-50%, -50%) rotate(0deg);
transform-origin: center center;
}

100% {
-webkit-transform: translate(-50%, -50%) rotate(360deg);
transform-origin: center center;
}
}
.imt-audio{
position:relative;
width: 100%;
display: flex;
box-sizing: border-box;
background: #fff;
overflow: hidden;
.top {
width: 140rpx;
position: relative;
}

.audio-wrapper {
display: flex;
flex-direction: column;
flex: 1;
color: #fff;
margin-left: 20rpx;
}
.slidebox {
display: flex;
justify-content: space-between;
width: 96%;
}
/deep/ .uni-slider-tap-area {
padding: 0;
}
/deep/ .uni-slider-wrapper {
min-height: 0;
}
/deep/ .uni-slider-handle-wrapper {
height: 6px;
}
.audio-slider {
padding-top: 10rpx;
margin-left: 150rpx;
position: absolute;
bottom: 40rpx;
width: 75vw;
left: 0;
padding: 0;
}

// .cover {
// width: 120rpx;
// height: 120rpx;
// box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
// position: absolute;
// top: 50%;
// left: 50%;
// transform: translate(-50%, -50%);
// animation-fill-mode: forwards;
// -webkit-animation-fill-mode: forwards;
// }

.play {
width: 48rpx;
height: 48rpx;
z-index: 99;
background: rgba(0, 0, 0, 0.4);
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
&.loading{
width: 48rpx;
height: 48rpx;
animation: rotating_theme3 2s linear infinite;
}
}
}

@keyframes rotating {
0% {
transform: rotateZ(0deg)
}
100% {
transform: rotateZ(360deg)
}
}
@keyframes rotating_theme3 {
0% {
transform: translate(-50%, -50%) rotateZ(0deg)
}
100% {
transform: translate(-50%, -50%) rotateZ(360deg)
}
}

.hItem
{
margin-left: 16rpx;
}

.extrButton
{
font-size: 36rpx;
}

BIN
components/yz-audio/static/backimg.png View File

Before After
Width: 64  |  Height: 16  |  Size: 594 B

BIN
components/yz-audio/static/bg.png View File

Before After
Width: 64  |  Height: 64  |  Size: 1.8 KiB

BIN
components/yz-audio/static/bg_act.png View File

Before After
Width: 64  |  Height: 64  |  Size: 1.9 KiB

BIN
components/yz-audio/static/loading.png View File

Before After
Width: 48  |  Height: 48  |  Size: 331 B

BIN
components/yz-audio/static/loading2.png View File

Before After
Width: 48  |  Height: 48  |  Size: 333 B

BIN
components/yz-audio/static/pausebtn.png View File

Before After
Width: 130  |  Height: 123  |  Size: 189 B

BIN
components/yz-audio/static/playbtn.png View File

Before After
Width: 130  |  Height: 130  |  Size: 274 B

+ 432
- 0
components/yz-audio/yz-audio.vue View File

@@ -0,0 +1,432 @@
<template>
<view class="imt-audio">
<template>
<view class="top">
<view class="audio-control-wrapper">
<image :src="require('./static/loading.png')" v-if="playState=='loading'" class="play loading">
</image>
<template v-else>
<image :src="require('./static/playbtn.png')" alt="play" @click="play" class="play"
v-if="playState=='pause'"></image>
<image :src="require('./static/pausebtn.png')" alt="pause" @click="pause" class="play" v-else>
</image>
</template>
</view>
</view>
<view class="audio-wrapper">
<view class="audio-flex">
<text>
{{formatSeconds(currentTime)}}
</text>
<slider class="audio-slider" block-size="12" :max="duration" :value="currentTime"
@change="sliderChange" @changing="sliderChanging"></slider>
<text>
{{formatSeconds(duration)}}
</text>
</view>

<view class="slidebox" @click="showTip">
<slot name="extraCtrls">
<image class="slide-img" :src="require('./static/backimg.png')" mode=""></image>
</slot>
</view>
<!-- 后台播放按钮区域 -->
<view class="popup" v-if="show" :class="{close: closeing}" @click="checkPlayer">
<template v-if="!isBgPlay">
<image :src="require('./static/bg.png')" mode=""></image>
</template>
<template v-else>
<image :src="require('./static/bg_act.png')" mode=""></image>
</template>
<text :class="{'act-test': isBgPlay}">后台播放</text>
</view>
</view>
<!--video在ios中不能完全隐藏,否则无法播放-->
<video id="videoPlayer" :autoplay="true" class="videoPlayer" :src="src" :muted="false"
style="width: 10rpx;height:10rpx;" @play="playerOnPlay" @pause="playerOnPause" @ended="playerOnEnded"
@timeupdate="playerOnTimeupdate" @waiting="playerOnWaiting" @error="playerOnError"></video>
</template>
</view>
</template>

<script>
/*
createInnerAudioContext()是audio组件的内部实现,不能熄屏播放、不能后台播放、不能倍速播放。
getBackgroundAudioManager() 可以熄屏播放、后台播放,不能倍速播放。缺点是响应速度很慢,无法实现精细、及时的进度控制,而且可能被别的程序占用。
因此这里只能用video来实现,video能倍速播放,不能熄屏播放、不能后台播放。而且避免了用createInnerAudioContext()实现的跳转到别的页面,还在播放的问题
因此应用程序可以在需要后台播放的时候(需要用户操作触发),再暂停这个控件的播放,然后自己用getBackgroundAudioManager实现后台播放
*/

import Vue from 'vue';
import {
mapMutations
} from 'vuex'
import {
audios
} from './audioBg.js'
export default {
mixins: [audios],
props: {
nowFileTime: {
type: [String, Number],
default: 0
},
},

watch: {
nowFileTime(oValue, nValue) {
this.duration = nValue
}
},

data() {
return {
src: '', //
poster: "",
name: "...",
singer: "...",
duration: 0,
currentTime: 0,
playState: "pause", //"loading"/"playing"/"pause"
isSliderChanging: false,
isFirst: false, // 是否阻止第一次赋值
audio: null, // 音频对象
show: false, // 控制展示用的
closeing: false, // 默认关闭
};
},
created() {
// 自定义组件,需要传递第二个参数为this,否则后续的pause等操作不起作用
this.videoCtx = uni.createVideoContext("videoPlayer", this);
this.audio = uni.createInnerAudioContext();
this.audio.autoplay = false;
this.createAudio()
this.setAudioFunc()
},

mounted() {
this.audio.onCanplay((e) => {
if (this.audio.duration != 0) {
this.playState = "pause"
this.$forceUpdate()
}
})
},

methods: {
...mapMutations(['createAudio', 'stopAduio']),
setSrc(value) {
console.log(this, ' 我打印this')
this.src = value;
console.log(this.src, '我在这儿里更换src')
// 获取当前音频的总时长
this.audio.src = value;
},

setPoster(value) {
this.poster = value;
},
setName(value) {
this.name = value;
},
setSinger(value) {
this.singer = value;
},

playerOnPlay(e) {
this.playState = "playing";
console.log('playerOnPlay', e)
this.$emit("play");
},
playerOnPause(e) {
this.playState = "pause";
console.log('playerOnPause', e)
this.$emit("pause");
},
playerOnEnded(e) {
this.playState = "pause";
console.log('playerOnEnded', e)
this.$emit("ended");
},

playerOnTimeupdate(e) {
if (this.isFirst) this.playState = "playing";
this.isFirst = true
this.duration = e.detail.duration;
this.currentTime = e.detail.currentTime;
this.$emit("timeUpdate", e.detail);
},

playerOnWaiting(e) {
this.playState = "loading";
console.log('playerOnWaiting', e)
},
playerOnError(e) {
console.log('playerOnError', e)
this.playState = "pause";
this.$emit("error", e);
},
formatSeconds(seconds) {
var result = typeof seconds === "string" ? parseFloat(seconds) : seconds;
if (isNaN(result)) return "";
let h = Math.floor(result / 3600) < 10 ?
"0" + Math.floor(result / 3600) :
Math.floor(result / 3600);
let m = Math.floor((result / 60) % 60) < 10 ?
"0" + Math.floor((result / 60) % 60) :
Math.floor((result / 60) % 60) + h * 60;
let s = Math.floor(result % 60) < 10 ?
"0" + Math.floor(result % 60) :
Math.floor(result % 60);
return `${h}:${m}:${s}`;
},
stop() {
this.videoCtx.stop();
},
seek(t) {
this.videoCtx.seek(t);
},
play() {
// if (this.videoCtx.currentTime != this.videoCtx.currentTime) {
// this.seek(this.currentTime)
// }
console.log('触发方法play')
this.videoCtx.play(); //在有的H5浏览器里,如果play不是用户触发的,则play()会报错
// 暂停后台播放
this.stopAduio()
},
pause() {
console.log('触发方法pause')
this.videoCtx.pause();
},
playbackRate(value) {
this.videoCtx.playbackRate(value);
//playbackRate不能在play之前或者之后立即调用,否则只有很少几率会成功
},
sliderChange(e) {
this.isSliderChanging = false;
//要通过e.detail.value获取,否则如果通过dom去读取slider的value
//就会存在滚动条拖不动的情况
// this.videoCtx.seek(e.detail.value);
let type = 'audio'
if (this.bgAudioMannager.paused === false) {
type = 'bgAudio'
}
this.$emit('sliderChangeComplate', { ...e, isType: type })
},
sliderChanging(e) {
this.isSliderChanging = true;
console.log(e, '当前正在改变')
},
// 关闭后台播放按钮
closeTip() {
this.closeing = false
setTimeout(() => {
this.show = false
}, 250)
},
// 展示后台播放按钮
showTip() {
this.show = true
setTimeout(() => {
this.closeing = true
}, 50)
},

// 点击后台播放音频事件
backAudio() {
this.pause()
let obj = {
src: this.src,
currentTime: this.currentTime
}
this.setAudio(obj)
},

// 切换播放源
checkPlayer() {
this.closeTip()
if (this.bgAudioMannager.paused === false) {
this.stopAduio()
} else {
this.backAudio()
}
}
},
}
</script>

<style lang="scss">
// @import './index.scss';
@mixin textoverflow() {
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
}

@keyframes rowup {
0% {
-webkit-transform: translate(-50%, -50%) rotate(0deg);
transform-origin: center center;
}

100% {
-webkit-transform: translate(-50%, -50%) rotate(360deg);
transform-origin: center center;
}
}

.imt-audio {
position: relative;
width: 100%;
height: 81rpx;
display: flex;
box-sizing: border-box;
background: #fff;

.top {
position: relative;
width: 100rpx;
}

.audio-wrapper {
position: relative;
padding: 0 20rpx;
display: flex;
flex: 1;
color: #fff;
.popup {
position: absolute;
right: 32rpx;
top: -122rpx;
z-index: 100;
width: 136rpx;
height: 122rpx;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background: #fff;
border: 1rpx solid #E0E0E0;
transition: all 0.25s linear;
opacity: 0;
image {
width: 32rpx;
height: 32rpx;
}
text {
margin-top: 10rpx;
color: #333;
font-size: 24rpx;
}
.act-test {
color: #2671E2;
}
}
.close {
opacity: 1;
}
}

.slidebox {
flex-shrink: 0;
display: flex;
align-items: center;
.slide-img {
width: 32rpx;
height: 8rpx;
}
}

/deep/ .uni-slider-tap-area {
padding: 0;
}

/deep/ .uni-slider-wrapper {
min-height: 0;
}

/deep/ .uni-slider-handle-wrapper {
height: 6px;
}

.audio-slider {
flex-grow: 1;
}

.play {
width: 48rpx;
height: 48rpx;
z-index: 99;
background: rgba(0, 0, 0, 0.4);
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

&.loading {
width: 48rpx;
height: 48rpx;
animation: rotating_theme3 2s linear infinite;
}
}
}

.audio-flex {
padding: 0 32rpx 0 0;
flex-grow: 1;
display: flex;
align-items: center;

text {
color: #70798D;
}
}

@keyframes rotating {
0% {
transform: rotateZ(0deg)
}

100% {
transform: rotateZ(360deg)
}
}

@keyframes rotating_theme3 {
0% {
transform: translate(-50%, -50%) rotateZ(0deg)
}

100% {
transform: translate(-50%, -50%) rotateZ(360deg)
}
}

.hItem {
margin-left: 16rpx;
}

.extrButton {
font-size: 36rpx;
}

.videoPlayer {
position: absolute;
left: 0;
bottom: 0;
z-index: -1;
}
</style>

+ 3
- 1
main.js View File

@@ -1,6 +1,7 @@
import Vue from 'vue';
import App from './App';
import dayjs from './utils/dayjs.min.js'
import store from './store/index.js'
Vue.config.productionTip = false;

Vue.prototype.$dayjs = dayjs;
@@ -20,6 +21,7 @@ Vue.use(http, app)
App.mpType = 'app';

const app = new Vue({
...App
...App,
store
});
app.$mount();

+ 1
- 0
manifest.json View File

@@ -100,6 +100,7 @@
},
"usingComponents" : true,
"permission" : {},
"requiredBackgroundModes" : [ "audio" ],
"plugins" : {
"WechatSI" : {
"version" : "0.3.4",


+ 296
- 381
pages/mine/details.vue
File diff suppressed because it is too large
View File


+ 69
- 259
pages/mine/details2.vue View File

@@ -36,70 +36,9 @@
:class="{active: item.bg < playNow && item.ed > playNow && i==0}"
v-for="(item,index) in dialog.message" :key="index" :data-speaker="item.speaker">
<view class="avatar">
<view v-if="item.speaker == 1" style="color: #60CBEC;">
<view :style="[SPEAKERSTYLE(item.speaker)]">
<image v-if="item.isShow == 0" :src="Aimg.replace(/[\r\n]/g,'')" mode="widthFix"></image>
<text v-else>A</text>
</view>
<view v-if="item.speaker == 2" style="color: #EC8B47;">
<image v-if="item.isShow == 0" :src="Aimg.replace(/[\r\n]/g,'')" mode="widthFix"></image>
<text v-else>B</text>
</view>
<view v-if="item.speaker == 3" style="color: #4F861E;">
<image v-if="item.isShow == 0" :src="Aimg.replace(/[\r\n]/g,'')" mode="widthFix"></image>
<text v-else>C</text>
</view>
<view v-if="item.speaker == 4" style="color: #9F61C8;">
<image v-if="item.isShow == 0" :src="Aimg.replace(/[\r\n]/g,'')" mode="widthFix"></image>
<text v-else>D</text>
</view>
<view v-if="item.speaker == 5" style="color: #4980C8;">
<image v-if="item.isShow == 0" :src="Aimg.replace(/[\r\n]/g,'')" mode="widthFix"></image>
<text v-else>E</text>
</view>

<view v-if="item.speaker == 6" style="color: #60CBEC;">
<image v-if="item.isShow == 0" :src="Aimg.replace(/[\r\n]/g,'')" mode="widthFix"></image>
<text v-else>F</text>
</view>
<view v-if="item.speaker == 7" style="color: #EC8B47;">
<image v-if="item.isShow == 0" :src="Aimg.replace(/[\r\n]/g,'')" mode="widthFix"></image>
<text v-else>G</text>
</view>
<view v-if="item.speaker == 8" style="color: #4F861E;">
<image v-if="item.isShow == 0" :src="Aimg.replace(/[\r\n]/g,'')" mode="widthFix"></image>
<text v-else>H</text>
</view>
<view v-if="item.speaker == 9" style="color: #9F61C8;">
<image v-if="item.isShow == 0" :src="Aimg.replace(/[\r\n]/g,'')" mode="widthFix"></image>
<text v-else>I</text>
</view>
<view v-if="item.speaker == 10" style="color: #9F61C8;">
<image v-if="item.isShow == 0" :src="Aimg.replace(/[\r\n]/g,'')" mode="widthFix"></image>
<text v-else>J</text>
</view>
<view v-if="item.speaker == 11" style="color: #9F61C8;">
<image v-if="item.isShow == 0" :src="Aimg.replace(/[\r\n]/g,'')" mode="widthFix"></image>
<text v-else>K</text>
</view>
<view v-if="item.speaker == 12" style="color: #9F61C8;">
<image v-if="item.isShow == 0" :src="Aimg.replace(/[\r\n]/g,'')" mode="widthFix"></image>
<text v-else>L</text>
</view>
<view v-if="item.speaker == 13" style="color: #9F61C8;">
<image v-if="item.isShow == 0" :src="Aimg.replace(/[\r\n]/g,'')" mode="widthFix"></image>
<text v-else>M</text>
</view>
<view v-if="item.speaker == 14" style="color: #9F61C8;">
<image v-if="item.isShow == 0" :src="Aimg.replace(/[\r\n]/g,'')" mode="widthFix"></image>
<text v-else>N</text>
</view>
<view v-if="item.speaker == 15" style="color: #9F61C8;">
<image v-if="item.isShow == 0" :src="Aimg.replace(/[\r\n]/g,'')" mode="widthFix"></image>
<text v-else>O</text>
</view>
<view v-if="item.speaker == 16" style="color: #9F61C8;">
<image v-if="item.isShow == 0" :src="Aimg.replace(/[\r\n]/g,'')" mode="widthFix"></image>
<text v-else>P</text>
<text v-else>{{ item.speaker | toCapital }}</text>
</view>
</view>
<view class="content">
@@ -126,24 +65,12 @@
</view>
</scroll-view>
<view class="bottombox">
<!-- <LongAudio :customerId="customerId" :infos="infos" :roleindex="roleindex"></LongAudio> -->
<!-- 播放块 -->
<view class="bottomhead">
<view class="audio-play" @tap="changePlayState">
<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>
</view>
<view class="audio-slider">
<view class="audio-time">
<text>{{currentTimeStr}}</text>
</view>
<slider class="slider" min="0" :max="sliderMax" @change="sliderChangeComplate" block-size="14"
:value="sliderValue" activeColor="blue"></slider>
<view class="audio-time">
<text>{{timeStr}}</text>
</view>
</view>
</view>

<!-- 播放块 :src="recordPath" -->
<yz-audio ref="zyAudio" @timeUpdate="TimeUpdate" @sliderChangeComplate="sliderChangeComplate"></yz-audio>

<!-- 底部弹框 -->
<view class="botbotmm">
<view class="tmmchen" @click="guanjiancishifo()">
@@ -259,7 +186,7 @@
</view>
<view
style="width: 96%;height: 26rpx;display: flex;margin: 0 auto; margin-top: 40rpx;align-items: center;">
<view style="width: 25%;color: #666666;font-size: 26rpx;">意向客户</view>
<view style="width: 25%;color: #666666;font-size: 26rpx;">意向项目</view>
<view style="width: 75%;color: #333333;font-size: 26rpx;">{{userlistobj.projectName}}</view>
</view>
<view
@@ -420,7 +347,8 @@
</view>
<view class="bioqianwayl" v-if="item.isshow==true">
<view class="jiangshang" v-for="(chend,i) in item.children" :key='i' v-if="chend.selected==0">
{{chend.text}}</view>
{{chend.text}}
</view>
</view>
</view>
</view>
@@ -578,6 +506,7 @@
roleisshaw: false,
roleindexrow: 0,
roletiaoshu: 0,
infos: null
};
},
onLoad: function(options) {
@@ -586,6 +515,12 @@
this.itemobj = uni.getStorageSync('searchobj');
console.log(this.itemobj)
this.stateisshow = options.stateisshow;
uni.$on("playNows", (val) => {
this.playNow = val;
})
uni.$on("scrollIds", (val) => {
this.scrollId = val;
})
},
onShow() {
this.Menulist = uni.getStorageSync('weapp_session_Menu_data');
@@ -608,45 +543,17 @@
}
this.roleindex = 0;
if (this.stateisshow == 2) {
var info = this.itemobj;
this.infos = this.itemobj;
} else {
var pages = getCurrentPages();
var currPage = pages[pages.length - 1]; //当前页面
var info = currPage.data.info;
this.infos = currPage.data.info;
}
this.gituserlist()
this.innerAudioContext = uni.createInnerAudioContext();
this.innerAudioContext.autoplay = false;
this.innerAudioContext.title = '音频';

this.onPlay()
this.onPause()
this.onCanplay()
this.onEnded()
this.onSeeking()
this.onSeeked()
this.TimeUpdate()
this.init(info)
this.init(this.infos)

},
onHide() {
if (this.innerAudioContext) {
//暂停
this.innerAudioContext.pause()
// 销毁
this.innerAudioContext.destroy();
}
},
onUnload() {
if (this.innerAudioContext) {
//暂停
this.innerAudioContext.pause()
// 销毁
this.innerAudioContext.destroy();
}
},

methods: {
rolexuanze(index) {
this.roleindexrow = index;
@@ -682,7 +589,6 @@
},
argece(item) {
console.log(item)
this.innerAudioContext.destroy();
if (item.selected == 0) {
console.log(item)
uni.navigateTo({
@@ -726,7 +632,6 @@
},
//评分点击
clickaudeopal(item) {
this.innerAudioContext.destroy();
if (item.selected == 0) {
console.log(item)
uni.navigateTo({
@@ -751,7 +656,6 @@
this.Acquirecustomerintentlist2[i].isshow = !this.Acquirecustomerintentlist2[i].isshow;
},
tocalibration() {
this.innerAudioContext.destroy();
uni.navigateTo({
url: '/pages/mine/calibration?id=' + this.customerId
});
@@ -949,7 +853,6 @@
},
guanjiancishifo() {
// this.guanjianciishow=!this.guanjianciishow;
this.innerAudioContext.destroy();

this.stateisshow = 1;
uni.navigateTo({
@@ -1054,7 +957,7 @@
this.roleindexbiaoji = data.data.data.speaker - 1;
this.dshfkjsdkksodofydwfkhwdfkjh = data.data.data.speaker - 1;
}
if (this.roleindex > this.tablist.length - 1) {
if (this.roleindex > this.tablist.length - 1) {
this.roleindex = this.tablist.length - 1
this.fenjiaoseunfo()
}
@@ -1082,7 +985,6 @@
})
},
toKeywordsearch() {
this.innerAudioContext.destroy();

this.stateisshow = 1;
uni.navigateTo({
@@ -1090,92 +992,25 @@
"&skpl=" + "1"
})
},
onPlay() {
this.innerAudioContext.onPlay(() => {
// 播放监听
console.log('播放!');
this.audioPlay = true;
wx.enableAlertBeforeUnload({
message: "是否确认退出详情页面?",
success: function(res) {
console.log("方法注册成功:", res);
},
fail: function(errMsg) {
console.log("方法注册失败:", errMsg);
},
});
});
},
onPause() {
this.innerAudioContext.onPause(() => {
wx.disableAlertBeforeUnload({
success: function(res) {
console.log(res)
},
fail: function(e) {
console.log(e)
}
});
// 暂停监听
console.log('暂停播放!');
this.audioPlay = false
});
},
onCanplay() {
this.innerAudioContext.onCanplay((callback) => {
console.log("缓冲回调", this.innerAudioContext.duration);
})
},
onEnded() {
this.innerAudioContext.onEnded(() => {
// 结束播放监听
console.log('播放结束!');
this.audioPlay = false;
});
},
onSeeking() {
this.innerAudioContext.onSeeking((res) => {
console.log("进行跳转", res);
})
},
onSeeked() {
this.innerAudioContext.onSeeked((res) => {
console.log("结束跳转", res);
this.$forceUpdate()
});
},
TimeUpdate() {
this.innerAudioContext.onTimeUpdate(() => {
// var pages = getCurrentPages();
// if(pages[pages.length-1].route!="pages/mine/details2"){
// this.innerAudioContext.destroy();
// }
const {
currentTime,
duration
} = this.innerAudioContext;
console.log(currentTime, 'TimeUpdate, currentTime')
this.playNow = parseInt(currentTime * 1000)
console.log(this.playNow)
if (this.dialogList.length == 0) {
return
} else {
const message = this.dialogList[0].message;
for (let i = 0; i < message.length; i++) {
if (Number(message[i].bg) < this.playNow && Number(message[i].ed) > this.playNow) {
this.scrollId = "dialog" + this.csdFileindex + "text" + message[i].bg;
break;
}

TimeUpdate(e) {
const {
currentTime,
duration
} = e
this.playNow = parseInt(currentTime * 1000)
if (this.dialogList.length == 0) {
return
} else {
const message = this.dialogList[0].message;
for (let i = 0; i < message.length; i++) {
if (Number(message[i].bg) < this.playNow && Number(message[i].ed) > this.playNow) {
this.scrollId = "dialog" + this.csdFileindex + "text" + message[i].bg;
break;
}
}
const currTimeStr = this.formatTime(currentTime);
this.sliderValue = parseInt(currentTime);
// 变动的时间
this.currentTimeStr = currTimeStr;
//进度条最大值
this.sliderMax = this.luyinList[this.csdFileindex].recordDuration;
this.$forceUpdate()
});
}
this.$forceUpdate()
},


@@ -1202,34 +1037,26 @@
if (info.bg != 0) {
this.luyinList = res;
this.recordPath = res[0].recordPath
this.sliderMax = this.getTime(res[0].recordDuration)
this.timeStr = this.getTime(res[0].recordDuration)
this.date = res[0].receptionTime;

this.getCorpusAnalysis(info);
this.creatAudio()
} else {
this.luyinList = res;
this.recordPath = res[0].recordPath
this.sliderMax = this.getTime(res[0].recordDuration)
this.timeStr = this.getTime(res[0].recordDuration)
this.date = res[0].receptionTime;

this.getCorpusAnalysis(info);
this.creatAudio()
}

this.zyAudio()
}
})
},
//搜索跳转
adasdasdasd(e) {
const currTimeStr = this.formatTime(e)
this.currentTimeStr = currTimeStr
this.innerAudioContext.seek(e);
this.$refs.zyAudio.seek(e)
if (uni.getStorageSync('entrance') == 1) {
return
} else {
this.innerAudioContext.play();
this.$refs.zyAudio.play();
}
},
//下一页
@@ -1682,7 +1509,6 @@
}
})
}

})
this.newluyinList = jsonInfo;
this.dialogList.push(jsonInfo[this.textindex]);
@@ -1693,21 +1519,18 @@
},




getTime(time) {
return util.formatSecond(time)
},
// 录音暂停播放
changePlayState() {
if (this.audioPlay == false) {
this.innerAudioContext.play();
} else {
this.innerAudioContext.pause()
}
},


//音频前进回退
sliderChangeComplate(e) {
if (e.isType == 'audio') {
this.$refs.zyAudio.pause()
} else {
this.$refs.zyAudio.audioPause()
}
let platetime = e.detail.value * 1000;
this.dialogList = []
uni.request({
@@ -1726,11 +1549,14 @@
} else {
this.dialogList.push(this.newluyinList[data.data.data.index])
}
console.log(e.detail, '1233333333333333333333333333333333333333333333333333333333333')
const currTimeStr = this.formatTime(e.detail.value)
this.currentTimeStr = currTimeStr
this.innerAudioContext.seek(e.detail.value);
this.innerAudioContext.play();

if (e.isType == 'audio') {
this.$refs.zyAudio.seek(e.detail.value);
this.$refs.zyAudio.play();
} else {
this.$refs.zyAudio.audioSeek(e.detail.value);
this.$refs.zyAudio.audioPlay();
}
}
})
},
@@ -1759,33 +1585,12 @@
this.textindex = data.data.data.index;
this.toptextindex = data.data.data.index;
this.dialogList.push(this.newluyinList[data.data.data.index])
const currTimeStr = this.formatTime(newtime)
console.log(currTimeStr, 'currTimeStr')
this.currentTimeStr = currTimeStr
this.innerAudioContext.seek(newtime);
this.innerAudioContext.play();
this.$refs.zyAudio.seek(newtime)
this.$refs.zyAudio.play()
}
})
},
//录音实例
creatAudio() {
this.innerAudioContext = uni.createInnerAudioContext();
if (uni.getStorageSync('entrance') == 1) {
this.innerAudioContext.autoplay = false;
} else {
this.innerAudioContext.autoplay = true;
}

this.innerAudioContext.src = this.recordPath;
this.innerAudioContext.title = '音频';
this.onPlay()
this.onPause()
this.onCanplay()
this.onEnded()
this.onSeeking()
this.onSeeked()
this.TimeUpdate()
},
formatTime(num) {
//格式化时间格式
num = num.toFixed(0);
@@ -1799,7 +1604,12 @@
this.dialogListres[0].message.forEach(asd => {
asd.isshow = false;
})
}
},
//录音实例
zyAudio() {
this.$refs.zyAudio.setSrc(this.recordPath)
},
},
}
</script>
@@ -1915,8 +1725,8 @@
height: 84rpx;
border-bottom: 1px solid #E0E0E0;
display: flex;
.boxhead1 {
.boxhead1 {
width: 50%;
color: #303030;
height: 84rpx;
@@ -2180,7 +1990,7 @@
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
.headpade {
margin-top: 10rpx;
padding: 8rpx 8rpx 8rpx 8rpx;


+ 54
- 0
store/index.js View File

@@ -0,0 +1,54 @@
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex)

export default new Vuex.Store({
state: {
bgAudioMannager: null,
},
mutations: {
createAudio(state) {
state.bgAudioMannager = uni.getBackgroundAudioManager();
},
setSeekAudio(state, t) {
state.bgAudioMannager.seek(t)
},
// 加载音频监听方法
initAudioMethod (state, obj) {
state.bgAudioMannager.onCanplay(() => {
state.bgAudioMannager.currentTime = obj.currentTime
});
state.bgAudioMannager.onStop(() => {
console.log('停止播放');
});
state.bgAudioMannager.onPause(() => {
console.log('暂停播放');
});
state.bgAudioMannager.onEnded(() => {
//初始化 需要的参数
console.log('自然播放结束事件');
});
state.bgAudioMannager.onError((res) => {
console.log(res.errMsg);
console.log(res.errCode);
});
},
// 停止全局音频播放
stopAduio(state) {
state.bgAudioMannager && state.bgAudioMannager.pause()
if (state.bgAudioMannager && state.bgAudioMannager.src) {
state.bgAudioMannager.src = ''
}
},
},
action: {
}
})

+ 2
- 1
utils/domain.js View File

@@ -17,7 +17,8 @@ const baseUrl = 'https://xitong.pachira.cn/api'; // AI营销辅助 普强使用
// const host = 'http://192.168.31.167:8080/autoSR/api'; // 长龙
// const host = 'http://192.168.31.134:8080/autoSR/api'; // 佳豪
// const host = 'http://10.2.1.104:8081/autoSR/api'; // 刘敏
const host = 'https://xitong.pachira.cn/api'; // AI营销辅助 普强使用
// const host = 'https://xitong.pachira.cn/api'; // AI营销辅助 普强使用
const host = baseUrl; // AI营销辅助 普强使用


const iMServiceHost = 'https://im.quhouse.com/'; //IM的后端地址正式 暂未使用留着防止报错


Loading…
Cancel
Save