askbot-dragon 1.6.76-beta → 1.6.76

package/src/components/AnswerVoice.vue

@@ -1,285 +1,286 @@
-<template>
-    <div :style="{ width: boxWidth + 'px' }" class="answer-voice">
-        <audio :id="'audioTagCom_' + newMsg.content.extInfos[0].newAvCurrentTime" :src="newMsg.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>
-let load = require('audio-loader')
-import { v4 as uuidv4 } from "uuid";
-export default {
-    name: "answer_voice",
-    props: ["msg"],
-    data() {
-        return {
-            active: 0,
-            time: 0,
-            activeAudio: "",
-            isPlay: false,
-            currentPosi: 0,
-            allTime: 0,
-            otherTime: 0,
-            durationNum: 0,
-            boxWidth: 200
-        }
-    },
-    watch: {
-    },
-    computed: {
-        newMsg(){
-            let oldMsg = JSON.parse(JSON.stringify(this.msg));
-            oldMsg.content.extInfos[0].newAvCurrentTime = uuidv4();
-            return oldMsg;
-        }
-    },
-    mounted() {
-        console.log(120,this.newMsg);
-        this.$nextTick(() => {
-            setTimeout(() => {
-                console.log(this._$(`#audioTagCom_${this.newMsg.content.extInfos[0].newAvCurrentTime}`)[0]);
-                this.activeAudio = this._$(`#audioTagCom_${this.newMsg.content.extInfos[0].newAvCurrentTime}`)[0];
-                this.time = "00:00";
-                load(this.newMsg.content.url).then(res =>{
-                    this.otherTime = this.transTime(res.duration);
-                    this.durationNum = res.duration;
-                    console.log(res.duration);
-                    this.allTime = this.transTime(res.duration);
-                    if (res.duration >= 60) {
-                        this.boxWidth = 240;
-                    } else {
-                        this.boxWidth = 160 + res.duration;
-                    }
-                })
-                this._$(`#audioTagCom_${this.newMsg.content.extInfos[0].newAvCurrentTime}`).on("loadedmetadata", (e) => {
-                    console.log(e.currentTarget);
-                    this.time = "00:00";
-                    console.log(e.currentTarget.duration);
-                    this.allTime = this.transTime(e.currentTarget.duration);
-                    if (this.activeAudio.duration >= 60) {
-                        this.boxWidth = 240;
-                    } else {
-                        this.boxWidth = 160 + this.activeAudio.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.newMsg.content.extInfos[0].newAvCurrentTime}`).on("timeupdate", () => {
-                    this.updateProgress();
-                });
-
-                this._$(`#audioTagCom_${this.newMsg.content.extInfos[0].newAvCurrentTime}`).on("timeupdate", () => {
-                    this.updateProgress();
-                });
-
-                this._$(`#audioTagCom_${this.newMsg.content.extInfos[0].newAvCurrentTime}`).on("ended", () => {
-                    this.audioEnded();
-                });
-            }, 500);
-
-        });
-    },
-    methods: {
-        stopAudioPlay(refId){
-            console.log("stop ", refId, this.newMsg.content.extInfos[0].newAvCurrentTime);
-            if (refId != this.newMsg.content.extInfos[0].newAvCurrentTime) {
-                this.activeAudio.pause();
-                this.isPlay = false;
-            }
-        },
-        bofang() {
-            if (this.activeAudio.paused) {
-                this.activeAudio.play();
-                this.isPlay = true;
-                this.$emit("stopOtherAudio", this.newMsg.content.extInfos[0].newAvCurrentTime);
-            } 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 {
-    width: 100%;
-    padding: 4px 0;
-    // min-width: 240px;
-
-    .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: -6px;
-                    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;
-            margin-left: 10px;
-        }
-    }
-}
-</style>
+<template>
+    <div :style="{ width: boxWidth + 'px' }" class="answer-voice">
+        <audio :id="'audioTagCom_' + newMsg.content.extInfos[0].newAvCurrentTime" :src="newMsg.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>
+let load = require('audio-loader')
+import { v4 as uuidv4 } from "uuid";
+export default {
+    name: "answer_voice",
+    props: ["msg"],
+    data() {
+        return {
+            active: 0,
+            time: 0,
+            activeAudio: "",
+            isPlay: false,
+            currentPosi: 0,
+            allTime: 0,
+            otherTime: 0,
+            durationNum: 0,
+            boxWidth: 200
+        }
+    },
+    watch: {
+    },
+    computed: {
+        newMsg(){
+            let oldMsg = JSON.parse(JSON.stringify(this.msg));
+            oldMsg.content.extInfos[0].newAvCurrentTime = uuidv4();
+            return oldMsg;
+        }
+    },
+    mounted() {
+        console.log(120,this.newMsg);
+        this.$nextTick(() => {
+            setTimeout(() => {
+                console.log(this._$(`#audioTagCom_${this.newMsg.content.extInfos[0].newAvCurrentTime}`)[0]);
+                this.activeAudio = this._$(`#audioTagCom_${this.newMsg.content.extInfos[0].newAvCurrentTime}`)[0];
+                this.time = "00:00";
+                load(this.newMsg.content.url).then(res =>{
+                    this.otherTime = this.transTime(res.duration);
+                    this.durationNum = res.duration;
+                    console.log(res.duration);
+                    this.allTime = this.transTime(res.duration);
+                    if (res.duration >= 60) {
+                        this.boxWidth = 240;
+                    } else {
+                        this.boxWidth = 160 + res.duration;
+                    }
+                })
+                this._$(`#audioTagCom_${this.newMsg.content.extInfos[0].newAvCurrentTime}`).on("loadedmetadata", (e) => {
+                    console.log(e.currentTarget);
+                    this.time = "00:00";
+                    console.log(e.currentTarget.duration);
+                    this.allTime = this.transTime(e.currentTarget.duration);
+                    if (this.activeAudio.duration >= 60) {
+                        this.boxWidth = 240;
+                    } else {
+                        this.boxWidth = 160 + this.activeAudio.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.newMsg.content.extInfos[0].newAvCurrentTime}`).on("timeupdate", () => {
+                    this.updateProgress();
+                });
+
+                this._$(`#audioTagCom_${this.newMsg.content.extInfos[0].newAvCurrentTime}`).on("timeupdate", () => {
+                    this.updateProgress();
+                });
+
+                this._$(`#audioTagCom_${this.newMsg.content.extInfos[0].newAvCurrentTime}`).on("ended", () => {
+                    this.audioEnded();
+                });
+            }, 500);
+
+        });
+    },
+    methods: {
+        stopAudioPlay(refId){
+            console.log("stop ", refId, this.newMsg.content.extInfos[0].newAvCurrentTime);
+            if (refId != this.newMsg.content.extInfos[0].newAvCurrentTime) {
+                this.activeAudio.pause();
+                this.isPlay = false;
+            }
+        },
+        bofang() {
+            if (this.activeAudio.paused) {
+                this.activeAudio.play();
+                this.isPlay = true;
+                this.$emit("stopOtherAudio", this.newMsg.content.extInfos[0].newAvCurrentTime);
+            } 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">
+@import '../assets/less/variables.less';
+
+.answer-voice {
+    width: 100%;
+    padding: 4px 0;
+    // min-width: 240px;
+
+    .audiocon {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        height: 30px;
+        justify-content: space-between;
+    }
+
+    .leftBtn {
+        width: 30px;
+
+        span {
+            i {
+                font-size: 28px;
+                color: @font-color-voice;
+                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: @background-color-voice;
+                }
+            }
+
+            .dot {
+                border-radius: 4px;
+                z-index: 11;
+                pointer-events: none;
+                position: absolute;
+                height: 4px;
+                top: 50%;
+                left: 0px;
+                transform: translateY(-50%);
+                background-color: @primary-color;
+
+                &::before {
+                    content: "";
+                    position: absolute;
+                    top: -4px;
+                    right: -6px;
+                    width: 5px;
+                    height: 5px;
+                    border-radius: 50%;
+                    background-color: @background-color-light;
+                    border: solid 4px @primary-color;
+                }
+            }
+        }
+
+        .time {
+            width: 58px;
+            font-size: 14px;
+            color: @font-primary-color;
+            font-weight: 500;
+            display: flex;
+            margin-left: 10px;
+        }
+    }
+}
+</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>