91fans_h5/src/components/HorizontalGameBox/index.vue

<template>
  <div class="horizontalGameBox" @click="openVideo">
    <lazyImg class="gameCover" :src="state.videoInfo.cover">
      <div class="box flex-vcenter">
        <SvgIcon name="eyeWhite" class="icon" />
        {{ watchCount(state.videoInfo.pageViewCount) }}
      </div>
    </lazyImg>
    <div class="gameTitle ellipsis">
      {{ state.videoInfo.title }}
    </div>
    <div class="tagBox ellipsis">
      <div class="tag" @click.stop="jumpTag(tag)" v-for="tag in state.videoInfo.tags" :key="tag.id">
        {{ tag.name }}
      </div>
    </div>
    <!-- 编辑时 -->
    <!-- <div class="checked" @click.stop v-if="isEdit">
      <van-checkbox :name="videoInfo.id">
        <template #icon="props">
          <img class="imgIcon" :src="props.checked ? activeIcon : inactiveIcon" />
        </template>
      </van-checkbox>
    </div> -->
    <div class="delBtn" v-if="show" @click.stop="handleDel">
      <div class="selectActive"></div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import activeIcon from '@/assets/images/png/mine/icheck-active.png';
import inactiveIcon from '@/assets/images/png/mine/icheck.png';
import { reactive, inject } from 'vue';
import { useRouter } from 'vue-router';
import { watchCount, jumpAdv } from '@/utils';

const emit = defineEmits(['select', 'del']);
const router = useRouter();
const props = withDefaults(
  defineProps<{
    videoInfo: Types.Video.VInfosItem;
    isEdit?: boolean;
  }>(),
  {
    videoInfo: () => <Types.Video.VInfosItem>{},
    isEdit: false,
  },
);
const show: boolean | undefined = inject('isEdit', false);
const state = reactive({
  videoInfo: props.videoInfo,
});
const openVideo = () => {
  // 编辑时返回id
  if (props.isEdit) {
    emit('select', state.videoInfo?.id);
    return;
  }
  if (state.videoInfo.type) {
    jumpAdv(state.videoInfo);
    return;
  }
  if (state.videoInfo.newsType == 'SEED_LINK') {
    router.push(`gameDetails?id=${state.videoInfo.id}`);
  } else if (state.videoInfo.newsType == 'COVER') {
    router.push(`postDetail?id=${state.videoInfo.id}`);
  } else {
    router.push({
      path: '/movieDetails',
      query: {
        vid: state.videoInfo.id,
        uid: state.videoInfo.publisher?.uid,
      },
    });
  }
};
// 标签跳转
const jumpTag = (item: any) => {
  // router.push({
  //   name: 'gameTagDetails',
  //   query: {
  //     id: item.id,
  //     name: item.name,
  //   },
  // });
};
const handleDel = () => {
  emit('del', state.videoInfo?.id);
};
</script>
<style lang="scss" scoped>
.horizontalGameBox {
  height: 100%;
  width: 100%;
  position: relative;
  .gameCover {
    width: 100%;
    height: 101px;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 6px;
    position: relative;
    .box {
      position: absolute;
      bottom: 0;
      left: 0;
      height: 30px;
      width: 100%;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
      padding: 0 8px;

      font-size: 10px;
      .icon {
        margin-right: 2px;
        width: 16px;
        height: 16px;
      }
    }
  }
  .gameTitle {
    color: #fff;
    font-size: 14px;
    margin-bottom: 6px;
  }
  .tagBox {
    display: flex;
    gap: 5px;
    width: 100%;
    .tag {
      color: rgba(255, 255, 255, 0.4);
      font-size: 10px;
      width: fit-content;
    }
  }
  .checked {
    position: absolute;
    right: 6px;
    top: 6px;
    :deep(.van-checkbox__icon) {
      width: 24px;
      height: 24px;
    }
    .imgIcon {
      width: 24px;
      height: 24px;
      display: block;
    }
  }
}
.delBtn {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  top: 0;
  z-index: 10;
  .selectActive {
    width: 24px;
    height: 24px;
    position: absolute;
    top: 6px;
    right: 6px;
    background: rgba(245, 44, 86, 1);
    background-image: url('@/assets/images/png/del.png');
    background-repeat: no-repeat;
    background-size: 14px 14px;
    background-position: center;
    border-radius: 50%;
  }
}
</style>