|
@@ -1,29 +1,35 @@
|
|
|
-<template name="dialogue">
|
|
|
- <scroll-view class="talk-cont" scroll-y :scroll-top="scrollTop">
|
|
|
- <view class="topbanner" v-if="item.pic">
|
|
|
- <image :src="item.pic" mode="widthFix" class="media-cover" />
|
|
|
- </view>
|
|
|
- <view class="talklist">
|
|
|
- <view v-for="(v, k) in item.text" :key="k" :class="['talk',(v.type == 3?'flex-center':''), (v.location == 2?'talk-right':'') ]" v-if="k<limit">
|
|
|
- <block v-if="v.location == 1">
|
|
|
- <view class="avatar"><image :src="v.avatar"></image></view>
|
|
|
- </block>
|
|
|
-
|
|
|
- <view class="talk-text" v-if="v.type == 1">
|
|
|
- <text>{{v.text}}</text>
|
|
|
- </view>
|
|
|
- <view class="talk-img" v-if="v.type == 2">
|
|
|
- <image @click="Dever.viewPic(item.text, v.pic, 'pic')" :src="v.pic" mode="widthFix" bindload="imgLoaded"></image>
|
|
|
- </view>
|
|
|
- <view v-if="v.type == 3" :class="['sound',(playing['a'+v.id]?'playing':''),'a'+v.id]" @click="play" :data-aid="'a'+v.id" :data-src="v.audio" ></view>
|
|
|
-
|
|
|
- <block v-if="v.location == 2">
|
|
|
- <view class="avatar"><image :src="v.avatar"></image></view>
|
|
|
- </block>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view id="bottom"></view>
|
|
|
- </scroll-view>
|
|
|
+<template name="dialogue">
|
|
|
+ <view>
|
|
|
+ <scroll-view class="talk-cont" scroll-y :scroll-top="scrollTop">
|
|
|
+ <view class="topbanner" v-if="item.pic">
|
|
|
+ <image :src="item.pic" mode="widthFix" class="media-cover" />
|
|
|
+ </view>
|
|
|
+ <view class="talklist">
|
|
|
+ <view v-for="(v, k) in item.text" :key="k" :class="['talk',(v.type == 3?'flex-center':''), (v.location == 2?'talk-right':'') ]" v-if="k<limit">
|
|
|
+ <block v-if="v.location == 1">
|
|
|
+ <view class="avatar"><image :src="v.avatar"></image></view>
|
|
|
+ </block>
|
|
|
+
|
|
|
+ <view class="talk-text" v-if="v.type == 1">
|
|
|
+ <text>{{v.words}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="talk-img" v-if="v.type == 2">
|
|
|
+ <image @click="Dever.viewPic(item.text, v.pic, 'pic')" :src="v.pic" mode="widthFix" bindload="imgLoaded"></image>
|
|
|
+ </view>
|
|
|
+ <view v-if="v.type == 3" :class="['sound', playing[v.order], sign]" @click="playAudio" :data-aid="v.order" :data-src="v.audio" ></view>
|
|
|
+
|
|
|
+ <block v-if="v.location == 2">
|
|
|
+ <view class="avatar"><image :src="v.avatar"></image></view>
|
|
|
+ </block>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view id="bottom"></view>
|
|
|
+ </scroll-view>
|
|
|
+ <view class="tapfigure-cont" v-if="pageShow" @click="talkPage">
|
|
|
+ <view class="tapfigure"></view>
|
|
|
+ 点击这里
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
@@ -38,16 +44,96 @@ export default {
|
|
|
type : Object,
|
|
|
value : null
|
|
|
},
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.control[this.index] = this;
|
|
|
+ this.limit = this.item.num;
|
|
|
+ if (this.limit >= this.item.text.length){
|
|
|
+ this.limit = this.item.text.length;
|
|
|
+ this.pageShow = false;
|
|
|
+ }
|
|
|
+ for (var i in this.item.text) {
|
|
|
+ var v = this.item.text[i];
|
|
|
+ if (v.type == 3) {
|
|
|
+ var aid = v.order;
|
|
|
+ if (!this.audio[aid]) {
|
|
|
+ var audio = uni.createInnerAudioContext()
|
|
|
+ audio.src = v.audio;
|
|
|
+ audio.onPause((res) => {
|
|
|
+ //this.playing[aid] = '';
|
|
|
+ })
|
|
|
+ audio.onEnded((res) => {
|
|
|
+ this.playing[aid] = '';
|
|
|
+ })
|
|
|
+ this.audio[aid] = audio;
|
|
|
+ this.playing[aid] = '';
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
},
|
|
|
data() {
|
|
|
- return {
|
|
|
+ return {
|
|
|
+ audio:{},
|
|
|
+ video:{},
|
|
|
+ sign : 'none',
|
|
|
playing:{},
|
|
|
- limit:3,
|
|
|
- scrollTop: 0,
|
|
|
+ limit:4,
|
|
|
+ scrollTop: 0,
|
|
|
+ audio_current_index: 0,
|
|
|
+ video_current_index: 0,
|
|
|
+ pageShow: true,
|
|
|
};
|
|
|
},
|
|
|
- methods:{
|
|
|
-
|
|
|
+ methods:{
|
|
|
+ start : function() {
|
|
|
+
|
|
|
+ },
|
|
|
+ end : function() {
|
|
|
+ this.stopAudio('none3');
|
|
|
+ },
|
|
|
+
|
|
|
+ talkPage : function() {
|
|
|
+ this.limit = ++this.limit;
|
|
|
+ this.pageShow = true;
|
|
|
+ if (this.limit >= this.item.text.length){
|
|
|
+ this.limit = this.item.text.length;
|
|
|
+ this.pageShow = false;
|
|
|
+ }
|
|
|
+ setTimeout(() => {
|
|
|
+ this.scrollTop = 10000000 + Math.random();
|
|
|
+ },300)
|
|
|
+ },
|
|
|
+
|
|
|
+ playAudio : function(e) {
|
|
|
+ for (var key in this.audio) {
|
|
|
+ if (key == e.target.dataset.aid) {
|
|
|
+ this.audio_current_index = key;
|
|
|
+ if (this.playing[key]) {
|
|
|
+ this.audio[key].pause();
|
|
|
+ this.playing[key] = '';
|
|
|
+ this.sign = 'none1';
|
|
|
+ } else {
|
|
|
+ this.audio[key].play();
|
|
|
+ this.playing[key] = 'playing';
|
|
|
+ this.sign = 'play';
|
|
|
+ console.info(this.playing[key]);
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.audio[key].pause();
|
|
|
+ this.playing[key] = '';
|
|
|
+ this.sign = 'none2';
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ stopAudio : function(sign) {
|
|
|
+ this.audio[this.audio_current_index].pause();
|
|
|
+ this.playing[this.audio_current_index] = '';
|
|
|
+ this.sign = sign;
|
|
|
+ },
|
|
|
},
|
|
|
}
|
|
|
</script>
|