123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236 |
- <template>
- <view>
- <view class="box-1" id="list-box">
- <view class="list-box-hader flex-center">
- <!-- 语音公告 -->
- <image src="https://zxzhdc.zx-xcx.com/dining/musicNote.png" mode="widthFix"></image>
- </view>
- <view class="talk-list">
- <scroll-view scroll-y="true" :scroll-top="scrollTop" style="max-height: 520rpx;min-height: 200rpx;">
- <view v-for="(item,index) in talkList" :key="index" :id="`msg-${item.id}`">
- <view class="item flex-y-center" :class=" item.type == 1 ? 'push':'pull' ">
- <image :src="item.pic" mode="aspectFill" class="pic"></image>
- <view class="content" @click="play" :data-index='index' :data-play='item.is_check'>
- <image v-if="item.is_check==1" src="/static/home/yuyin1.png" class="play"></image>
- <image v-if="item.is_check==2" src="https://zxzhdc.zx-xcx.com/dining/play.gif" class="play"></image>
- </view>
- </view>
- </view>
- </scroll-view>
- </view>
- </view>
- <view class="close">
- <gbClose @bindClose="bindClose"/>
- </view>
- </view>
- </template>
- <script>
- import gbClose from './close.vue';
- import {
- mapState,
- } from 'vuex'
- const innerAudioContext = uni.createInnerAudioContext();
- export default {
- components: {
- gbClose,
- },
- computed: {
- ...mapState(['systemInfo', 'store_id', 'userInfo', 'audioList', 'setColor']),
- },
- data() {
- return {
- talkList: [],
- // content: "https://empdouyinv.zx-xcx.com/uploads/admin/admin_thumb/20210414/fd1a9acc5559a9acd78b61e865505933.mp3"
- // content: "https://empdouyinv.zx-xcx.com//uploads/admin/admin_thumb/20210414/a7fdd9ecaf0d9c1123f776a0cd61f1d7.mp3"
- // content: "https://empdouyinv.zx-xcx.com/uploads/admin/admin_thumb/20210419/8ffa29ef0ade32ad1fa9f6ff5670ecf5.mp3"
- // content: "https://empdouyinv.zx-xcx.com/uploads/admin/admin_thumb/20210419/2da36448ea5a2c12aeabfad70e9ac7d8.mp3"
- Aindex: 0,
- url: '',
- scrollTop: 0,
- is_off: 1
- }
- },
- watch: {
- // #ifdef MP-WEIXIN
- audioList: {
- handler(val) {
- if (val.length > 0) {
- this.talkList = val;
- if (this.is_off == 1) {
- this.is_off = 2;
- innerAudioContext.src = this.talkList[0].content;
- innerAudioContext.autoplay = true;
- this.talkList[0].is_check = 2;
- }
- }
- },
- deep: true,
- },
- // #endif
- },
- mounted() {
- // #ifdef MP-ALIPAY
- let val = this.$store.state.audioList;
- if (val.length > 0) {
- this.talkList = val;
- if (this.is_off == 1) {
- this.is_off = 2;
- innerAudioContext.autoplay = true;
- innerAudioContext.src = this.talkList[0].content;
- this.talkList[0].is_check = 2;
- }
- }
- // #endif
- },
- created(e) {
- innerAudioContext.onPlay(() => {
- console.log('开始播放');
- });
- innerAudioContext.onError((res) => {
- console.log('错误事件',res);
- });
- innerAudioContext.onEnded(() => {
- // console.log('自然结束');
- this.talkList.forEach((i, v) => {
- i.is_check = 1
- })
- let Aindex = this.Aindex + 1;
- if (Aindex >= this.talkList.length) {
- return
- }
- this.talkList[Aindex].is_check = 2;
- this.scrollTop = Aindex * 60;
- this.url = this.talkList[Aindex].content;
- innerAudioContext.src = this.talkList[Aindex].content;
- this.Aindex = Aindex;
- });
- innerAudioContext.onStop(() => {
- // console.log('停止播放');
- });
- innerAudioContext.onCanplay((res) => {
- });
- innerAudioContext.onPause(() => {
- // console.log('暂停播放');
- });
- },
- methods: {
- // ...mapMutations(['SET_AUDIO']),
- bindClose() {
- // console.log("停止")
- innerAudioContext.stop();
- },
- play(e) {
- let isplay = e.currentTarget.dataset.play,
- index = e.currentTarget.dataset.index;
- this.talkList.forEach((i, v) => {
- i.is_check = 1
- })
- // 2 正在播放,1没有播放
- if (isplay == 2) {
- innerAudioContext.pause();
- this.talkList[index].is_check = 1;
- } else {
- innerAudioContext.src = this.talkList[index].content;
- innerAudioContext.play();
- this.talkList[index].is_check = 2;
- }
- this.Aindex = index;
- },
- }
- }
- </script>
- <style lang="scss">
- page {
- background-color: #F3F3F3;
- font-size: 28rpx;
- }
- .play {
- width: 50rpx;
- height: 50rpx;
- }
- .close {
- /* #ifdef MP-WEIXIN */
- margin-top: 30rpx;
- /* #endif */
-
- }
- .box-1 {
- background-color: #F3F3F3;
- width: 600rpx;
- overflow: hidden;
- border-radius: 10rpx;
- }
- .list-box-hader {
- width: 100%;
- color: #FFFFFF;
- }
-
- .list-box-hader image{
- width: 100%;
- height:100rpx;
- }
-
- .talk-list {
- /* 消息项,基础类 */
- .item {
- padding: 20rpx 20rpx 0 20rpx;
- align-items: flex-start;
- align-content: flex-start;
- color: #333;
- margin-bottom: 20rpx;
- .pic {
- width: 92rpx;
- height: 92rpx;
- border-radius: 50%;
- border: #fff solid 1px;
- }
- .content {
- padding: 20rpx;
- border-radius: 4px;
- max-width: 500rpx;
- word-break: break-all;
- position: relative;
- width: 300rpx;
- }
- /* 收到的消息 */
- &.pull {
- .content {
- margin-left: 32rpx;
- background-color: #6E8FFF;
- &::after {
- content: '';
- display: block;
- width: 0;
- height: 0;
- border-top: 16rpx solid transparent;
- border-bottom: 16rpx solid transparent;
- border-right: 20rpx solid #6E8FFF;
- position: absolute;
- top: 30rpx;
- left: -18rpx;
- }
- }
- }
- }
- }
- </style>
|