activity/src/view/WorldCup/components/chat.vue

<template>
  <div class="chat">
    <div class="chatList">
      <div class="kuang">
        <div ref="allChat" :style="'transform: translateY(' + mT + 'px);'">
          <div :key="i.id" :id="'chat' + i.id" v-for="i in chatList">
            <span class="chatText" v-text="i.content"></span>
          </div>
        </div>
      </div>
    </div>
    <van-search
      left-icon=""
      right-icon=""
      v-model="chat"
      show-action
      :clearable="false"
      placeholder="说点什么"
    >
      <template #action>
        <img
          class="saveBtn"
          @click="onSearch"
          :src="require('../../../assets/img/save.png')"
        />
      </template>
    </van-search>
  </div>
</template>
<script setup>
import { ref, nextTick, inject, defineEmits } from "vue";
import { getChat, setChat } from "@/api/worldCup.js";
import { requestAnimationFrame } from "@/utils/tool.js";
import { Toast } from "vant";

// import { onMounted, reactive } from "vue";
// import { isIpad, isIpod, isIphone } from "../../utils/isTerminal";
/**
 * window.$originData.orginParames.title 页面标题
 * window.$originData.orginParames.parameters 固定参数值
 * window.$originData.urlParames url参数
 */
const chatList = ref([]);
const allChat = ref(null);
const chat = ref("");
const mT = ref(0);
const user = inject("user");

const emit = defineEmits(["toLogin"]);

let time = undefined;
let time1 = undefined;
let id = -1;
const AnimationFrame = requestAnimationFrame();
time = setTimeout(() => {
  clearTimeout(time);
  getChat().then(formmater);
  time = setInterval(() => {
    if (id == -1) return clearTimeout(time);
    getChat({ id }).then(formmater);
  }, 5000);
}, 200);

function formmater(li) {
  const list = li ? li || [] : [];
  chatList.value.push(...list);
  nextTick(() => {
    AnimationFrame(scorllFun);
  });
  if (!chatList.value.length) return;
  let max = -1;
  let index = -1;
  for (let i = 0; i < chatList.value.length; i++) {
    const v = chatList.value[i];
    if (v.id > max) {
      max = Math.max(max, v.id);
      index = i;
    }
  }
  id = chatList.value[index].id;
}
function scorllFun() {
  if (time1) clearTimeout(time1);
  time1 = setTimeout(() => {
    clearTimeout(time1);
    AnimationFrame(scorllFun);
  }, 25);
  let T = mT.value;
  const chat1 = document.querySelector("#chat" + chatList.value[0].id);
  if (chat1.offsetHeight <= T * -1) {
    T = 0;
    let last = chatList.value.shift();
    chatList.value.push(last);
  } else T -= 1;
  mT.value = T;
}

function onSearch() {
  if (!chat.value) return;
  if (!user.phone) return emit("toLogin", oriSave);
  else oriSave();
}

function oriSave() {
  console.log(user, user.phone);
  setChat({
    phone: user.phone,
    content: chat.value,
  }).then(r => {
    console.log(r);
    chat.value = "";
    Toast("发送成功");
  });
}
</script>
<style lang="scss">
.chat {
  width: 100%;
  .van-search {
    background-color: transparent;
  }
  .chatList {
    background-image: url("../../../assets/img/dmbg.jpg");
    background-size: 100% 100%;
    background-position: 0% 0%;
    height: 250px;
    padding: 10px 0 10px 0.5em;
    width: 100%;
    .kuang {
      height: 100%;
      overflow: hidden;
      .chatText {
        background: #fff;
        border-radius: 2em;
        max-width: 80%;
        font-size: 14px;
        padding: 0.5em 1em;
        display: inline-block;
        min-width: 10%;
      }
    }
  }
  .van-search__action {
    position: relative;
    width: 5em;
    :active {
      background-color: transparent;
    }
    .saveBtn {
      width: 62px;
      height: 34px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
  .myswiper {
    height: 250px;
  }
}
</style>