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="clickShowPopup(item)">
          <div class="w-full overflow-hidden">
            <!-- <div v-if="item.type == 0" class="type2">审核中...</div> -->
            <img :src="baseApi + item.picture" class="w-full img" @error="$AIPohotoError" />
          </div>
          <div class="p-2">
            <h3 class="text-lg font-bold flex items-center">
              <div class="name" 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.prologue }}
            </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>
    <van-action-sheet v-model="showPopup">
      <div class="buttons mb-6">
        <van-cell v-if="selectObj.scene == 1" title="场景名称" :value="selectObj.name" />
        <van-cell title="查看资料" is-link @click="toDetail" />
        <van-cell title="删除" is-link @click="deleteData" />
        <div class="flex justify-around p-4">
          <van-button class="textButton w-28 rounded-full" size="small" @click="toChat">开始对话</van-button>
          <van-button class="buttonBg1 w-28 rounded-full" size="small" @click="toCreate">编辑</van-button>
        </div>
      </div>

    </van-action-sheet>
  </div>
</template>

<script>
import { Dialog } from 'vant';
import { queryCharacterAndSceneApi } from "@/api/profile.js"
import {
  deleteSceneApi,
  deleteCharacterApi,
  setCharacterShowApi,
  editSceneApi
} from "@/api/create.js"
export default {
  data() {
    return {
      showPopup: false,
      selectObj: {},
      query: {
        pageSize: 10,
        pageNum: 0,
        type: 0
      },
      total: 0,
      loading: false,
      noMore: false,
      characterList: []
    }
  },
  computed: {
    disabled() {
      return this.loading || this.noMore
    }
  },
  mounted() {
    // this.initCharacterList()
  },
  methods: {
    tabChange() {
      this.initCharacterList()
    },
    load() {
      this.query.pageNum += 1
      this.getCharacterList()
    },
    initCharacterList() {
      this.characterList = []
      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 = [...this.characterList, ...res.rows]
        if ((this.query.pageNum * this.query.pageSize) >= res.total) {
          this.noMore = true
        }
        this.total = res.total
        this.loading = false
      })
    },
    clickShowPopup(item) {
      console.log(item, 'item');
      this.selectObj = item
      this.showPopup = true
    },
    toDetail() {
      let query = {}
      if (this.selectObj.scene == 0) {
        // 点击是角色
        query.id = this.selectObj.id
      } else if (this.selectObj.scene == 1) {
        // 点击是场景
        query.id = this.selectObj.characterId
      }
      this.$router.push({
        path: '/detailH5',
        query: query
      })
    },
    // 前往聊天页面
    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: '/chatH5',
          query: query
        })
      }

    },
    // 前往编辑页面
    toCreate() {
      if (this.selectObj.scene == 0) {
        // 点击是角色
        this.$router.push({
          path: '/create',
          query: {
            id: this.selectObj.id
          }
        })
      } else if (this.selectObj.scene == 1) {
        // 点击是场景
        this.$router.push({
          path: '/createScene',
          query: {
            sceneId: this.selectObj.id,
            characterId: this.selectObj.characterId
          }
        })
      }
    },
    // 删除
    deleteData() {
      if (this.selectObj.scene == 0) {
        // 删除角色
        Dialog.confirm({
          title: '提示',
          message: '此操作将永久删除该角色及其所有聊天记录, 是否继续?',
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteCharacterApi(this.selectObj.id).then(res => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.showPopup = false
            this.initCharacterList()
          })
        })
      } else if (this.selectObj.scene == 1) {
        // 删除场景
        this.$confirm('此操作将永久删除该场景及其所有聊天记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteSceneApi(this.selectObj.id).then(res => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.showPopup = false
            this.initCharacterList()
          })
        })

      }
    },
  }
}
</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: 325px;

  .name {
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }
}

.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;
}

.type2 {
  padding: 2px 4px;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  position: absolute;
  top: 0;
  right: 0;
  font-size: 12px;
}
</style>