metaverse2024vue/src/views/profile/profileH5.vue

<template>
  <div class="profileH5 bg-white" style="min-height: 100vh;">
    <div class="title">
      <div>我的</div>
    </div>
    <el-tabs v-model="query.type" @tab-click="tabChange" class="tabs w-full">
      <el-tab-pane label="公开" :name="0"></el-tab-pane>
      <el-tab-pane label="非公开" :name="1"></el-tab-pane>
    </el-tabs>
    <div class="lietRom flex-1 overflow-auto" v-infinite-scroll="load" infinite-scroll-disabled="disabled">
      <div class="list mt-4">
        <div v-for="(item, index) in characterList" :key="index"
          class="box2 relative rounded-lg overflow-hidden shadow-lg cursor-pointer" @click="toDetail(item)">
          <div class="w-full overflow-hidden">
            <img :src="baseApi + item.picture" class="w-full img" />
          </div>
          <div class="p-2">
            <h3 class="text-lg font-bold flex items-center">
              <div style="max-width: calc(100% - 18px);">{{ item.name }}</div>
              <i v-if="item.scene == 1" class="el-icon-video-camera-solid"></i>
              <i v-if="item.scene == 0" class="el-icon-user-solid"></i>
            </h3>
            <p class="prologue text-sm">
              {{ item.description }}
            </p>
            <div class="labels flex my-1 flex-wrap">
              <div v-for="(item2, index2) in item.labelArr" :key="index2"
                class="m-0.5 tag px-2 py-1 rounded flex items-center text-xs text-gray-500">
                <!-- <i class="fas fa-smile text-yellow-400 mr-2"></i> -->
                {{ item2 }}
              </div>
            </div>
          </div>
          <div class="absolute w-full bottom-0 flex items-center justify-between mt-3 px-2 pb-2">
            <div></div>
            <div class="flex items-center box1 text-red-500">
              <v-icon name="fire" scale="1" />
              <span class="ml-1">{{ item.hotCount || 0 }}</span>
            </div>
          </div>
        </div>
      </div>
      <p class="w-full py-4 text-gray-400 text-center" v-if="loading">加载中...</p>
      <p class="w-full py-4 text-gray-400 text-center" v-if="noMore">没有更多了</p>
    </div>
  </div>
</template>

<script>
import { queryCharacterAndSceneApi } from "@/api/profile.js"
export default {
  data() {
    return {
      query: {
        pageSize: 10,
        pageNum: 2,
        type: 0
      },
      total: 0,
      loading: false,
      noMore: false,
      characterList: []
    }
  },
  computed: {
    disabled() {
      return this.loading || this.noMore
    }
  },
  mounted() {
    this.getCharacterList()
  },
  methods: {
    tabChange() {
      this.query.pageNum = 1
      this.characterList = []
      this.getCharacterList()
    },
    load() {
      this.query.pageNum += 1
      this.getCharacterList()
    },
    getCharacterList(query) {
      this.loading = true
      let params = this.query
      if (query) {
        params = {
          ...params,
          ...query,

        }
      }
      queryCharacterAndSceneApi(params).then(res => {
        console.log(res, '角色列表');
        if (res.rows.length == 0) {
          this.noMore = true
        }
        // this.characterList = res.rows
        this.characterList = [...this.characterList, ...res.rows]
        if (this.characterList.length >= res.total) {
          this.noMore = true
        }
        this.total = res.total
        this.loading = false
      })
    },
    toDetail(item) {
      console.log(item, 'item');
      this.selectObj = item
      this.toChat()
      // this.dialogVisible = true
    },
    // 前往聊天页面
    toChat() {
      let query = {}
      if (this.selectObj.scene == 0) {
        // 点击是角色
        query.characterId = this.selectObj.id
        this.$router.push({
          path: '/chatH5',
          query: query
        })
      } else if (this.selectObj.scene == 1) {
        // 点击是场景
        query.characterId = this.selectObj.characterId
        query.sceneId = this.selectObj.id
        this.$router.push({
          path: '/chat',
          query: query
        })
      }

    },
  }
}
</script>

<style lang="scss" scoped>
.profileH5 {
  .title {
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    // font-weight: 600;
    text-align: center;
  }

  .tabs {}
}

.lietRom {
  padding: 5px;
  padding-bottom: 60px;
}

.lietRom::-webkit-scrollbar {
  display: none;
}

.textButton {
  // color: #eee;
  margin-left: 5px;
}

.textButton:hover {
  color: #9333ea;
}

.labelButton {
  border: solid 1px #e6e6e6;
  background: var(--bg-color2);
}

.buttonBg1 {
  background: var(--bg-color1);
  color: #fff;
}

.topActive {
  background: var(--bg-color1);
}

.tag {
  background: var(--bg-color2);
}

.box1 {
  border: 1px solid #ffffff4d;
  height: 30px;
  padding: 0 10px;
  border-radius: 18px;
  // width: 68px;
  font-size: 14px;
}

.box2 {
  background: #ffffff0f;
  border: 1px solid #ffffff2e;
  height: 380px;
}

.box2:hover {
  border: solid 1px var(--bg-color1);
}

.img {
  height: 200px;
  object-fit: cover;
  object-position: top;
  transition: transform .2s
}

.img:hover {
  transform: scale(1.1);
}

.labels {
  max-height: 56px;
  overflow-y: auto;
}

.prologue {
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
</style>
<style scoped>
.list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* grid-auto-rows: minmax(280px, 280px); */
  grid-gap: 10px;
}

.tabs>>>.el-tabs__nav {
  width: 100%;
}

.tabs>>>.el-tabs__item {
  width: 50%;
  padding: 0;
  text-align: center;
}
</style>