zh_order_food_xcx/pages/chat/msg-item.vue

<template>
  <view class="">
    <view class="dialogue-box" :class="item.msg_type == 2 ||item.msg_type == 3 ?'dialogue-box-one':'dialogue-box-two'">
      <view class="time">
        {{item.created_at}}
      </view>
      <view class="dialogue">
        <view class="dialogue-text" :class="item.msg_type == 2 ?'dialogue-text-one':'dialogue-text-two'"
          v-if="(item.msg_type == 1 ||item.msg_type == 2) && showText">
          <!-- {{item.content}} -->
          <!--					{{showText}}-->
          <view class="" :class="item.msg_type == 2?'showText-color-one':'showText-color-two'" v-html="showText"></view>
          <view class="voice-box" v-if="item.voice_url">
            <view class="voice-box-left" v-if="item.msg_type == 1">
              <image @click="voiceTwo" v-if="!voiceShwo" class="voice-img" src="@/static/img/chat/voice-n.png" mode="">
              </image>
              <image @click="voice(true,item)" v-else class="voice-img" src="@/static/img/chat/voice-y.png" mode="">
              </image>
            </view>
            <view class="voice-box-left" v-else-if="item.msg_type == 2">
              <image @click="voiceTwo" v-if="!voiceShwo" class="voice-img" src="@/static/img/chat/voice-n-two.png"
                mode=""></image>
              <image @click="voice(true,item)" v-else class="voice-img" src="@/static/img/chat/voice-y-two.png" mode="">
              </image>
            </view>
            <image v-if="item.msg_type == 2" class="voice-box-right" src="../../static/img/chat/voice-img.png" mode="">
            </image>
            <image v-else class="voice-box-right" src="../../static/img/chat/voice-two-img.png" mode=""></image>
          </view>

        </view>
        <view class="dialogue-text dialogue-text-one loading " v-if="item.msg_type == 2 && showText ==''">
          <text></text>
          <text></text>
          <text></text>
          <text></text>
        </view>
        <view class="initial-box dialogue-text-one" v-if="item.msg_type == 3">
          <view class="initial-title">
            {{item.title}}
          </view>
          <view class="initial-style" v-for="(itemTwo,indexTwo) in item.text" :key="indexTwo"
            @click="selectStyle(itemTwo.type)">
            {{itemTwo.msg}}
          </view>
        </view>
      </view>
      <view class="dialogue">
        <view class="diaologue-img-box" v-if="item.img_url">
          <image class="diaologue-img" @click="lookImg(item.img_url)" :src="item.img_url" mode="aspectFill"></image>
        </view>
      </view>
      <view class="dialogue">
        <view class="diaologue-file-box" v-if="item.file_url">
          <image class="diaologue-file-img" src="@/static/img/chat/wj-img.png" mode="aspectFill"></image>
          <view class="diaologue-file-name-box">
            <view class="diaologue-file-name">
              {{fileName(item.file_url)}}
            </view>
            <!-- <view class="diaologue-file-time">
							2023-12-15
						</view> -->
          </view>
        </view>
      </view>
    </view>
  </view>

</template>

<script>
  export default {
    props: {
      item: {
        default: function() {
          return ''
        }
      },
      msgText: {
        default: function() {
          return ''
        }
      },
      showType: {
        default: function() {
          return false
        }
      }
    },
    data() {
      return {
        showText: '',
        num: 1,
        id: '',
        voiceShwo: true,
        voiceUrl: '',
        voiceStyle: true,
      };
    },
    watch: {
      'msgText': function() {
        if (this.msgText !== '') {
          this.setText()
        }
      }
    },
    mounted() {
      this.setText()
    },
    methods: {
      voice(bur, id) {
        if (this.voiceStyle) {
          this.voiceUrl = uni.createInnerAudioContext();
          this.voiceUrl.autoplay = true;
          this.voiceUrl.src = this.item.voice_url;
          this.voiceUrl.play();
          this.voiceShwo = false;
        } else {
          this.voiceUrl.play();
          this.voiceShwo = false;
        };
        this.voiceUrl.onEnded((res) => {
          this.voiceShwo = true;
          this.voiceStyle = true
        })
      },
      voiceTwo() {
        this.voiceUrl.pause();
        this.voiceShwo = true;
        this.voiceStyle = false
      },
      fileName(item) {
        let fileName = item.match(/\/([^\/]+)$/)[1];
        return fileName
      },
      lookImg(item) {
        let imgList = []
        imgList.push(item)
        uni.previewImage({
          current: 0,
          urls: imgList,
        });
      },
      selectStyle(type) {
        this.$emit('selectStyle', type)
      },
      setText() {
        if (this.showType) {
          this.appear(this.msgText)
        } else {
          // console.log('---------------------------------'+this.msgText)
          // this.showText = this.msgText.replace(/\/n/g, 'aaaaa');
          this.showText = this.msgText;
          // console.log(this.showText)
        }
      },
      appear(content) {
        if (content === '') {
          return
        }
        const _this = this;
        this.showText = "";
        clearTimeout(this.timer);
        let speed = 50; //设置定时的速度 越来越快
        let count = 1;
        content = content.replace(/\/n/g, '<br/>');
        // console.log(content)
        let num = 1;

        function changeContent() {
          _this.showText = content.substring(0, count); //截取字符串
          count++;
          if (count !== content.length + 1) {
            speed -= 1;
            if (speed < 5) speed = 5;

            _this.timer = setTimeout(changeContent, speed);
            if (_this.showText.length % 100 === 0) _this.$emit('refresh', false)
          } else {
            console.log("执行");
            _this.$emit('refresh', true)
          }
        }
        changeContent();
      },
    }
  }
</script>

<style lang="scss">
  .loading {
    width: auto;
    height: 15rpx;
    display: flex;
    align-items: center;
    padding: 17rpx 30rpx;
  }

  .loading text {
    // display: inline-block;
    width: 15rpx;
    height: 15rpx;
    margin-right: 5px;
    border-radius: 50%;
    background: #F2BA0B;
    -webkit-animation: load 1.04s ease infinite;
  }

  .loading text:last-child {
    margin-right: 0px;
  }

  @-webkit-keyframes load {
    0% {
      opacity: 1;
    }

    100% {
      opacity: 0;
    }
  }

  .loading text:nth-child(1) {
    -webkit-animation-delay: 0.13s;
  }

  .loading text:nth-child(2) {
    -webkit-animation-delay: 0.26s;
  }

  .loading text:nth-child(3) {
    -webkit-animation-delay: 0.39s;
  }

  .loading text:nth-child(4) {
    -webkit-animation-delay: 0.52s;
  }

  .dialogue-box {
    // width: 100%;
    height: auto;
    margin: 0 0 40rpx 0;
    display: flex;
    flex-direction: column;

    .time {
      font-size: 24rpx;
      color: #999999;
      margin: 0 0 8rpx 0;
    }

    .dialogue {
      // word-break: break-all;
      // font-size: 30rpx;

      .dialogue-text {
        padding: 24rpx;
        box-sizing: border-box;
        white-space: pre-wrap;

        .voice-box {
          padding: 20rpx 0 0 0;
          display: flex;
          align-items: center;

          .voice-box-left {
            .voice-img {
              width: 48rpx;
              height: 48rpx;
              margin: 0 16rpx 0 0;
            }
          }

          .voice-box-right {
            width: 120rpx;
            height: 26rpx;
          }
        }
      }

      .showText-color-one {
        color: #333333;
      }

      .showText-color-two {
        color: #FFFFFF;
      }

      .diaologue-img-box {
        max-width: 638rpx;
        height: auto;
        background: #fff;
        margin: 8rpx 0 0 0;

        .diaologue-img {
          border-radius: 20rpx;
        }
      }

      .diaologue-file-box {
        display: flex;
        align-items: center;
        padding: 24rpx;
        box-sizing: border-box;
        // background: #fff;
        border: 2rpx solid #EEEEEE;
        border-radius: 10rpx;
        margin: 8rpx 0 0 0;

        .diaologue-file-img {
          width: 63rpx;
          height: 77rpx;
          margin: 0 16rpx 0 0;
        }

        .diaologue-file-name-box {
          .diaologue-file-name {
            max-width: 534rpx;
            font-size: 30rpx;
            color: #323333;
            margin: 0 0 4rpx 0;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            word-break: break-all;
          }

          .diaologue-file-time {
            font-size: 24rpx;
            color: #999999;
          }
        }
      }



      .dialogue-text-one {
        background: #F7F8FC;
        border-radius: 10rpx 10rpx 10rpx 0;
      }

      .dialogue-text-two {
        background: #5CC2FF;
        border-radius: 10rpx 10rpx 0 10rpx;
        max-width: 592rpx;
      }

      .initial-box {
        padding: 24rpx;
        box-sizing: border-box;

        .initial-title {
          font-size: 30rpx;
          font-weight: 600;
          color: #333333;
          // margin: 0 0 12rpx 0;
          padding: 0 0 12rpx 0;
        }

        .initial-style {
          font-size: 30rpx;
          color: #2F80ED;
          margin: 0 0 12rpx 0;
        }

        .initial-style:last-child {
          margin: 0;
        }
      }
    }
  }

  .dialogue-box-one {
    align-items: flex-start;
  }

  .dialogue-box-two {
    align-items: flex-end;
  }
</style>