edit

pages/dream/view/dialogue.vue

@@ -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>