uopdate about conflict
This commit is contained in:
62
components/GoEasyAudioPlayer/GoEasyAudioPlayer.vue
Normal file
62
components/GoEasyAudioPlayer/GoEasyAudioPlayer.vue
Normal file
@@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<div class="goeasy-audio-player" @click="playAudio">
|
||||
<div class="audio-facade" :style="{width:Math.ceil(duration)*7 + 50 + 'px'}">
|
||||
<div class="audio-facade-bg" :class="{'play-icon':play}"> </div>
|
||||
<div>{{Math.ceil(duration) || 0}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const innerAudioContext = uni.createInnerAudioContext();
|
||||
export default {
|
||||
name: "GoEasyAudioPlayer",
|
||||
props : ['src', 'duration'],
|
||||
data () {
|
||||
return {
|
||||
play : false
|
||||
}
|
||||
},
|
||||
methods : {
|
||||
playAudio () {
|
||||
this.play = true;
|
||||
innerAudioContext.src = this.src;
|
||||
innerAudioContext.play();
|
||||
setTimeout(() => {
|
||||
this.play = false;
|
||||
}, this.duration*1000)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.goeasy-audio-player{
|
||||
margin-top: 12rpx;
|
||||
-webkit-tap-highlight-color:rgba(0,0,0,0);
|
||||
}
|
||||
.audio-facade{
|
||||
min-width: 20rpx;
|
||||
padding: 6rpx 10rpx;
|
||||
height: 72rpx;
|
||||
line-height: 72rpx;
|
||||
background: #D02129;
|
||||
font-size: 24rpx;
|
||||
border-radius: 14rpx;
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
}
|
||||
.audio-facade-bg{
|
||||
background: url("./images/voice.png") no-repeat center;
|
||||
background-size: 30rpx;
|
||||
width: 40rpx;
|
||||
}
|
||||
.audio-facade-bg.play-icon{
|
||||
background: url("./images/play.gif") no-repeat center;
|
||||
background-size: 30rpx;
|
||||
-moz-transform:rotate(180deg);
|
||||
-webkit-transform:rotate(180deg);
|
||||
-o-transform:rotate(180deg);
|
||||
transform:rotate(180deg);
|
||||
}
|
||||
</style>
|
||||
BIN
components/GoEasyAudioPlayer/images/play.gif
Normal file
BIN
components/GoEasyAudioPlayer/images/play.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
BIN
components/GoEasyAudioPlayer/images/voice.png
Normal file
BIN
components/GoEasyAudioPlayer/images/voice.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 300 B |
55
components/GoEasyVideoPlayer/GoEasyVideoPlayer.vue
Normal file
55
components/GoEasyVideoPlayer/GoEasyVideoPlayer.vue
Normal file
@@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<video
|
||||
v-if="show"
|
||||
class="video-player"
|
||||
controls = ""
|
||||
@play="onPlayStart"
|
||||
id="videoPlayer"
|
||||
autoplay="true"
|
||||
@fullscreenchange="onVideoFullScreenChange"
|
||||
:src="url">
|
||||
</video>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "GoEasyVideoPlayer",
|
||||
data () {
|
||||
return {
|
||||
show : false,
|
||||
context: null,
|
||||
url: ''
|
||||
}
|
||||
},
|
||||
methods : {
|
||||
play (video) {
|
||||
this.show = true;
|
||||
this.url = video.url;
|
||||
this.context = uni.createVideoContext('videoPlayer');
|
||||
},
|
||||
onVideoFullScreenChange (e) {
|
||||
//当退出全屏播放时,隐藏播放器
|
||||
if(this.show && !e.detail.fullScreen){
|
||||
this.show = false;
|
||||
this.context.stop();
|
||||
}
|
||||
},
|
||||
onPlayStart () {
|
||||
//播放开始时,立即全屏
|
||||
this.context.requestFullScreen({
|
||||
direction : 0
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.video-player{
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
</style>
|
||||
BIN
components/GoEasyVideoPlayer/images/play.png
Normal file
BIN
components/GoEasyVideoPlayer/images/play.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 560 B |
@@ -18,12 +18,19 @@ export default {
|
||||
xuanzhong:false,
|
||||
}
|
||||
},
|
||||
props:['image','title','price','num','sid'],
|
||||
props:['image','title','price','num','sid','wxuanzhong'],
|
||||
methods:{
|
||||
xuanzhongs(){
|
||||
this.xuanzhong = !this.xuanzhong
|
||||
this.$emit("xuanzhong")
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
|
||||
},
|
||||
created(){
|
||||
this.xuanzhong = this.wxuanzhong
|
||||
console.log(this.wxuanzhong)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user