metaverse2024vue/src/views/homeComponents/HomeH5.vue

<template>
  <div class="home bg-gray-900 comBg">
    <HeaderH5 @search="searchChange" :searchName="searchName" />
    <div class="min-h-screen text-white px-4">
      <div class="container mx-auto py-2">
        <div class="flex mb-3">
          <div class="flex space-x-4">
            <button class="px-3 py-2 rounded topActive fontH5">热门</button>
            <button class="bg-gray-800 px-3 py-2 rounded fontH5">趋势</button>
            <button class="bg-gray-800 px-3 py-2 rounded fontH5">最新</button>
          </div>
        </div>
        <div class="flex flex-wrap flex-grow mb-3 items-center">
          <input
            type="text"
            placeholder="搜索标签"
            class="searchInput fontH5 w-full mr-2 px-3 py-2 mb-1 rounded focus:border-blue-300 focus:outline-none "
          />
          <div
            v-for="(item, index) in selectLabelObj"
            :key="index"
            class="fontH5 px-3 py-1 mx-1 mb-1 rounded flex items-center cursor-pointer buttonBg1"
            @click="clickLabel(item)"
          >
            {{ item.labelName }}
            <i class="fas el-icon-close text-white"></i>
          </div>
          <el-button v-show="selectLabelObj.length > 0" class="textButton mx-1" type="text" @click="clearSelectLabel">移除所有</el-button>
        </div>
        <div class="flex flex-wrap">
          <div
            v-for="(item, index) in labelData.slice(0, labelLength)"
            :key="index"
            :class="[
              selectLabel.indexOf(item.id) != -1 ? 'buttonBg1' : 'labelButton',
              'fontH5 labelButton px-3 py-1 mx-1 mb-1 rounded flex items-center cursor-pointer'
            ]" 
            @click="clickLabel(item)"
          >
            <i class="fas fa-fire text-yellow-500 mr-2"></i>
            {{ item.labelName }}({{item.num}})
          </div>
          <div v-show="labelData.length > 8 && labelLength == 8" @click="labelLength = labelData.length"  class="fontH5 labelButton px-3 py-1 mx-1 mb-1 rounded cursor-pointer">
            ....
          </div>
          <div v-show="labelData.length > 8 && labelLength == 8" @click="labelLength = labelData.length" class="fontH5 labelButton px-3 py-1 mx-1 mb-1 rounded cursor-pointer">
            显示更多
          </div>
          <div v-show="labelData.length > 8 && labelLength > 8" @click="labelLength = 8" class="fontH5 labelButton px-3 py-1 mx-1 mb-1 rounded cursor-pointer">
            隐藏
          </div>
        </div>

        <div class="mt-4">
          <div
            v-for="(item, index) in characterList"
            :key="index"
            class="box2 rounded-lg overflow-hidden shadow-lg cursor-pointer mb-3"
            @click="toDetail(item)"
          >
            
            <div class="p-3 flex justify-between">
              <img :src="baseApi + item.picture" class="w-24 h-24 img rounded" />
              <div class="info ml-3 flex-1">
                <h3 class="text-lg font-bold">{{ item.characterName }}</h3>
                <div class="flex flex-wrap labels">
                  <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">
                    <!-- <i class="fas fa-smile text-yellow-400 mr-2"></i> -->
                    {{ item2 }}
                  </div>
                </div>
                <p class="text-sm prologue">
                  {{ item.prologue }}
                </p>
              </div>
              
            </div>
            <div class="flex items-center justify-between px-3 pb-3">
              <div class="flex items-center box1">
                <v-icon name="heart" scale="1"/>
                <span class="ml-1">{{ item.likeNum }}</span>
              </div>
              <div class="flex items-center box1">
                <!-- <i class="fas fa-comment mr-1"></i> -->
                <v-icon name="star" scale="1"/>
                <span class="ml-1">{{ item.collections }}</span>
              </div>
              <!-- <div class="flex items-center">
                <v-icon name="share" scale="1.5"/>
                <span>{{ item.likeNum }}</span>
              </div> -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import HeaderH5 from "@/views/homeComponents/HeaderH5.vue"
import { labelListApi, characterListApi } from "@/api/home.js"
// 引入需要的图标
import 'vue-awesome/icons/heart'
// import 'vue-awesome/icons/comment'
import 'vue-awesome/icons/star'

export default {
  name: "HomeH5",
  components: {
    HeaderH5
  },
  data() {
    return {
      labelLength: 8,
      searchName: '',
      labelData: [],
      selectLabel: [],
      selectLabelObj: [],
      characterList: [],
      url: [
        require('@/assets/images/1.png'),
        require('@/assets/images/2.png'),
        require('@/assets/images/3.png'),
        require('@/assets/images/4.png'),
      ]
    }
  },
  mounted() {
    // 获取标签
    this.getLabelList()
    // 获取角色列表
    if (this.$route.params.searchValue) {
      // 有查询条件，做查询处理
      this.searchChange(this.$route.params.searchValue)
    } else {
      // 没有查询条件则直接调用默认查询
      this.getCharacterList()
    }
    
  },
  methods: {
    searchChange(value) {
      // console.log('查询条件', value);
      this.searchName = value
      let query = {
        characterName: this.searchName,
        labelId: this.selectLabel
      }
      this.getCharacterList(query)
    },
    getLabelList() {
      let params = {
        pageSize: 20,
        pageNum: 1
      }
      labelListApi(params).then(res => {
        // console.log(res, '标签列表');
        this.labelData = res.rows
      })
    },
    getCharacterList(query) {
      let params = {
        pageSize: 20,
        pageNum: 1
      }
      if (query) {
        params = {
          ...params,
          ...query
        }
      }
      characterListApi(params).then(res => {
        // console.log(res, '角色列表');
        this.characterList = res.rows
      })
    },
    clickLabel(item) {
      let index = this.selectLabel.indexOf(item.id)
      if (index == -1) {
        this.selectLabel.push(item.id)
        this.selectLabelObj.push(item)
      } else {
        this.selectLabel.splice(index, 1)
        this.selectLabelObj.splice(index, 1)
      }
      let query = {
        characterName: this.searchName,
        labelId: this.selectLabel
      }
      this.getCharacterList(query)
    },
    clearSelectLabel() {
      this.selectLabel = []
      this.selectLabelObj = []
      let query = {
        characterName: this.searchName,
        labelId: this.selectLabel
      }
      this.getCharacterList(query)
    },
    toDetail(item) {
      this.$router.push({
        path: '/detailH5',
        query: {
          id: item.id
        }
      })
    }
  },
};
</script>

<style scoped lang="scss">
.home {
  font-size: 17.5px;
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 2px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
.textButton {
  color: #eee;
  // margin-left: 5px;
}
.textButton:hover {
  color: #9333ea;
}
.labelButton {
  background: #ffffff1a;
}
.buttonBg1 {
  background: linear-gradient(270deg, #5ea1f9, #d287f1);
}

.topActive {
  background: var(--bg-color1);
}
.tag {
  flex-shrink: 0;
  background: rgba(245, 174, 67, 0.2);
}
.searchInput {
  background: #ffffff00;
  border: 1px solid #ffffff4d;
}
.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;
}
.info {
  width: calc(100% - 6.75rem);
}
.img {
  max-height: 220px;
  object-fit: cover;
  object-position: top;
}
.labels {
  flex-wrap: nowrap;
  overflow-x: auto;
}
.prologue {
  overflow:hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
</style>