askbot-dragon 1.2.9 → 1.3.11

package/src/components/AnswerVoice.vue

@@ -0,0 +1,256 @@
+<template>
+    <div class="answer-voice">
+        <audio :id="'audioTagCom_' + msg.id" :src="msg.content.url"></audio>
+        <div class="audiocon">
+            <!-- 按钮 -->
+            <div class="leftBtn">
+                <span v-show="!isPlay" @click="bofang"><i class="iconfont guoran-bofang"></i></span>
+                <span v-show="isPlay" @click="bofang"><i class="iconfont guoran-zanting"></i></span>
+            </div>
+            <div class="adcon">
+                <!-- <div class="time">
+                    <span>{{ time }}</span>
+                </div> -->
+                <div class="bar">
+                    <div class="activeLine" @click="seekTime">
+                        <div :style="{ width: currentPosi + '%' }" class="dot"></div>
+                    </div>
+                </div>
+                <div class="time">
+                    <span>{{ otherTime }}</span>
+                </div>
+                <!-- <div class="time">
+                    <span>{{ allTime }}</span>
+                </div> -->
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+
+export default {
+    name: "answer_voice",
+    props: ["msg"],
+    data() {
+        return {
+            active: 0,
+            time: 0,
+            activeAudio: "",
+            isPlay: false,
+            currentPosi: 0,
+            allTime: 0,
+            otherTime: 0,
+            durationNum: 0,
+        }
+    },
+    watch: {
+    },
+    computed: {
+
+    },
+    mounted() {
+        console.log(120);
+        this.$nextTick(() => {
+            setTimeout(() => {
+                console.log(this._$(`#audioTagCom_${this.msg.id}`)[0]);
+                this.activeAudio = this._$(`#audioTagCom_${this.msg.id}`)[0];
+                this.time = "00:00";
+                this.otherTime = this.transTime(this.activeAudio.duration);
+                this.durationNum = this.activeAudio.duration;
+                console.log(this.activeAudio.duration);
+                this.allTime = this.transTime(this.activeAudio.duration);
+                this._$(`#audioTagCom_${this.msg.id}`).on("loadedmetadata", (e) => {
+                    console.log(e.currentTarget);
+                    this.time = "00:00";
+                    console.log(e.currentTarget.duration);
+                    this.allTime = this.transTime(e.currentTarget.duration);
+                    this.durationNum = e.currentTarget.duration;
+                    this.otherTime = this.transTime(this.activeAudio.duration);
+                    // this.activeAudio.play();
+                    // this.isPlay = true;
+                });
+
+                document.addEventListener(
+                    "WeixinJSBridgeReady",
+                    function () {
+                        this.activeAudio.play();
+                    },
+                    false
+                );
+
+                this._$(`#audioTagCom_${this.msg.id}`).on("timeupdate", () => {
+                    this.updateProgress();
+                });
+
+                this._$(`#audioTagCom_${this.msg.id}`).on("timeupdate", () => {
+                    this.updateProgress();
+                });
+
+                this._$(`#audioTagCom_${this.msg.id}`).on("ended", () => {
+                    this.audioEnded();
+                });
+            }, 500);
+
+        });
+    },
+    methods: {
+        bofang() {
+            if (this.activeAudio.paused) {
+                this.activeAudio.play();
+                this.isPlay = true;
+            } else {
+                this.activeAudio.pause();
+                this.isPlay = false;
+            }
+
+        },
+        transTime(time) {
+            var duration = parseInt(time);
+            var minute = parseInt(duration / 60);
+            var sec = (duration % 60) + "";
+            var isM0 = ":";
+            if (minute == 0) {
+                minute = "00";
+            } else if (minute < 10) {
+                minute = "0" + minute;
+            }
+            if (sec.length == 1) {
+                sec = "0" + sec;
+            }
+            return minute + isM0 + sec;
+        },
+        transOtherTime(time) {
+            var duration = parseInt(time);
+            var minute = parseInt((parseInt(this.durationNum) - duration) / 60);
+            var sec = ((parseInt(this.durationNum) - duration) % 60) + "";
+            var isM0 = ":";
+            if (minute == 0) {
+                minute = "00";
+            } else if (minute < 10) {
+                minute = "0" + minute;
+            }
+            if (sec.length == 1) {
+                sec = "0" + sec;
+            }
+            return minute + isM0 + sec;
+        },
+        updateProgress() {
+            this.currentPosi = (this.activeAudio.currentTime / this.activeAudio.duration) * 100;
+            this.time = this.transTime(this.activeAudio.currentTime);
+            this.otherTime = this.transOtherTime(this.activeAudio.currentTime);
+        },
+
+        audioEnded() {
+            this.activeAudio.currentTime = 0;
+            this.activeAudio.pause();
+            this.isPlay = false;
+        },
+
+        seekTime(e) {
+            var rate = e.offsetX / e.target.clientWidth;
+            this.activeAudio.currentTime = this.activeAudio.duration * rate;
+            this.updateProgress();
+        },
+
+    }
+
+}
+</script>
+<style scoped lang="less">
+.answer-voice {
+    padding: 4px 0;
+
+    .audiocon {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        height: 30px;
+        justify-content: space-between;
+    }
+
+    .leftBtn {
+        width: 30px;
+
+        span {
+            i {
+                font-size: 28px;
+                color: #ADC0F6;
+                line-height: 32px;
+            }
+        }
+    }
+
+    .adcon {
+        position: relative;
+        z-index: 10;
+        width: calc(100% - 40px);
+        height: 30px;
+        display: flex;
+        align-items: center;
+        margin-left: 16px;
+
+        .bar {
+            width: calc(100% - 20px);
+            position: relative;
+            height: 30px;
+            display: flex;
+            align-items: center;
+
+            .activeLine {
+                position: absolute;
+                top: 0;
+                left: 0px;
+                z-index: 10;
+                width: 98%;
+                height: 30px;
+                cursor: pointer;
+
+                &::before {
+                    content: "";
+                    position: absolute;
+                    width: 100%;
+                    height: 4px;
+                    top: 50%;
+                    left: 0;
+                    transform: translateY(-50%);
+                    border-radius: 4px;
+
+                    background-color: #D5DDEC;
+                }
+            }
+
+            .dot {
+                border-radius: 4px;
+                z-index: 11;
+                pointer-events: none;
+                position: absolute;
+                height: 4px;
+                top: 50%;
+                left: 0px;
+                transform: translateY(-50%);
+                background-color: #366AFF;
+
+                &::before {
+                    content: "";
+                    position: absolute;
+                    top: -4px;
+                    right: -3px;
+                    width: 5px;
+                    height: 5px;
+                    border-radius: 50%;
+                    background-color: white;
+                    border: solid 4px #366AFF;
+                }
+            }
+        }
+
+        .time {
+            width: 58px;
+            font-size: 14px;
+            color: #222222;
+            font-weight: 500;
+            display: flex;
+        }
+    }
+}
+</style>

package/src/components/AskIFrame.vue

@@ -1,16 +1,16 @@
-<template>
-    
-</template>
-
-<script>
-    export default {
-        name: "AskIFrame",
-        props:{
-
-        }
-    }
-</script>
-
-<style scoped>
-
+<template>
+    
+</template>
+
+<script>
+    export default {
+        name: "AskIFrame",
+        props:{
+
+        }
+    }
+</script>
+
+<style scoped>
+
 </style>