LiangZhuTongHua/src/views/CommonDrawList.vue

<template>
  <div class="common-draw-list-view">
    <!-- <div
      v-if="route.query.idx === '5'"
      class="no-content"
    >
      <img
        class="no-content"
        src="@/assets/images/please-wait.png"
        alt=""
        draggable="false"
      >
    </div> -->
    <ul
      ref="drawUlEl"
      class="common-draw-list"
      @wheel="onDrawUlWheel"
    >
      <li
        v-for="(drawName, idx) in drawList"
        :key="idx"
      >
        <img
          class=""
          :data-original="`${imgPrefixHigh}/${drawName}`"
          :src="`${imgPrefix}/${drawName}`"
          alt=""
          draggable="false"
          @click="onClickImg"
        >
      </li>
    </ul>
    <ul
      ref="groupUlEl"
      class="group-list"
      @wheel="onGroupUlWheel"
    >
      <li
        v-for="(groupName, idx) in Object.keys(groupList)"
        :key="idx"
        :class="{
          active: activeGroupIdx === idx
        }"
        @click="activeGroupIdx = idx"
      >
        {{ groupName }}
      </li>
    </ul>
    <!-- <button
      v-if="route.query.idx === '3'"
      class="game-entry"
      @click="router.push({
        name: 'StartView',
      })"
    /> -->
    <button
      class="like"
      :class="{
        liked: hasLiked,
      }"
      @click="onClickLike"
    >
      <img
        v-show="!hasLiked"
        class=""
        src="@/assets/images/like.png"
        alt=""
        draggable="false"
      >
      <img
        v-show="hasLiked"
        class=""
        src="@/assets/images/liked.png"
        alt=""
        draggable="false"
      >
      <span class="txt">{{ likeCount }}</span>
    </button>
    <button
      class="return"
      @click="router.push({
        name: 'EntryList',
      })"
    />

    <div
      v-show="isViewingBigImage"
      class="show-on-mask"
    >
      <button
        class="return"
        @click="closeViewer"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, } from "vue"
import { useRoute, useRouter } from "vue-router"
import { likeRecord } from "@/store/index.js"
import { drawTree } from "@/assets/draw-tree.js"
import Viewer from 'viewerjs'

const {
  windowSizeInCssForRef,
  windowSizeWhenDesignForRef,
} = useSizeAdapt(724, 375)

const route = useRoute()
const router = useRouter()

const activeGroupIdx = ref(0)

const groupL1Name = Object.keys(drawTree)[Number(route.query.idx) - 1]
const groupList = Object.values(drawTree)[Number(route.query.idx) - 1]
console.log(groupL1Name, groupList, 'groupList')
const groupName = computed(() => {
  return Object.keys(groupList)[activeGroupIdx.value]
})

const drawList = computed(() => {
  return Object.keys(groupList[Object.keys(groupList)[activeGroupIdx.value]])
})
const imgPrefix = computed(() => {
  return `${process.env.VUE_APP_OUTER_ASSETS_PREFIX}draws/${encodeURIComponent(groupL1Name)}/${encodeURIComponent(groupName.value)}`
})

const imgPrefixHigh = computed(() => {
  return `${process.env.VUE_APP_OUTER_ASSETS_PREFIX}drawsHigh/${encodeURIComponent(groupL1Name)}/${encodeURIComponent(groupName.value)}`
})

const isViewingBigImage = ref(false)
let viewer = null
function onClickImg(e) {
  // console.log(e.target)
  viewer = new Viewer(e.target, {
    url: 'data-original',
    backdrop: 'static', // 点击空白区域不会关闭
    button: true,
    fullscreen: true,
    inline: false,
    keyboard: true,
    movable: true,
    navbar: false,
    rotatable: false,
    title: false,
    toolbar: false,
    tooltip: false,
    transition: true,
    zoomable: true,
    shown() {
      isViewingBigImage.value = true
    },
    hide() {
      isViewingBigImage.value = false
    },
    hidden() {
      viewer.destroy()
      viewer = null
    }
  })
  viewer.show()
}
function closeViewer() {
  viewer.hide()
}

api.reportVisit(Number(route.query.idx)).then((res) => {
  console.log('sdfsdf', res)
})


// // 显示单元点赞
// const likeCount = ref(null)
// api.getLikeCount(route.query.idx).then((res) => {
//   likeCount.value = res
// })

const likeCount = ref()
onMounted(() => {
  getLikeCount()
})

const getLikeCount = () => {
  // 总点赞量
  likeCount.value = 0
  api.getAllLikeCount().then((res) => {
    likeCount.value += res
  })
}



const hasLiked = computed(() => {
  return likeRecord.value[route.query.idx - 1]
})
function onClickLike(e) {
  if (hasLiked.value) {
    return
  }
  likeRecord.value[route.query.idx - 1] = true
  api.like(route.query.idx)
  likeCount.value++ // 从接口拿到的数据不会立刻变化
  setTimeout(() => {
    utils.animateCSS(e.target, 'heartBeat')
  }, 100)
}

const drawUlEl = ref(null)
function onDrawUlWheel(e) {
  drawUlEl.value.scrollLeft -= e.wheelDelta
}

const groupUlEl = ref(null)
function onGroupUlWheel(e) {
  groupUlEl.value.scrollLeft -= e.wheelDelta
}
</script>

<style>
.viewer-button{
  width: 0 !important;
  height: 0 !important;
}
</style>

<style lang="less" scoped>
.common-draw-list-view{
  position: relative;
  height: 100%;
  padding-top: calc(28 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
  padding-bottom: calc(11 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  background-image: url(@/assets/images/foreword-bg.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  >div.no-content{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    >img.no-content{
      height: calc(242 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    }
  }
  >ul.common-draw-list{
    width: 100%;
    padding-left: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    padding-right: calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    padding-bottom: calc(5 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    display: flex;
    align-items: center;
    overflow: auto;
    &::-webkit-scrollbar { height: 0; };
    >li{
      flex: 0 0 auto;
      width: calc(272 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      height: calc(272 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      margin-right: calc(15 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      border-radius: calc(10 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      border: calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) solid #FFFFFF;
      box-shadow: 0px calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) 0px rgba(0,0,0,0.1);
      >img{
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
  >button.game-entry{
    position: absolute;
    bottom: 0;
    right: calc(160 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    width: calc(194 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    height: calc(86 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    background-image: url(@/assets/images/game-entry.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
  }
  >button.like{
    position: absolute;
    bottom: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    right: calc(70 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    background: #FFD73C;
    box-shadow: 0px calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) 0px rgba(0,0,0,0.25);
    border-radius: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    opacity: 1;
    border: calc(2 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) solid #FFFFFF;
    width: calc(88 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    height: calc(40 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    padding-left: calc(5 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    padding-right: calc(5 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    box-shadow: 0px calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) 0px rgba(0,0,0,0.25);
    >img{
      width: calc(26 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      height: calc(26 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    }
    >.txt{
      font-size: calc(14 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
      font-weight: 400;
      color: #FFFFFF;
      line-height: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    }
  }
  >button.like.liked{
    background: #fbf0d8;
    >.txt{
      color: rgba(215, 173, 13, 1);
    }
  }
  >button.return{
    position: absolute;
    bottom: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    right: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    width: calc(40 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    height: calc(40 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    background-image: url(@/assets/images/icon_back@2x.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    box-shadow: 0px calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) 0px rgba(0,0,0,0.25);
    border-radius: 50%;
  }
  >ul.group-list{
    padding-left: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    margin-right: calc(170 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    padding-bottom: calc(5 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    display: flex;
    align-items: center;
    overflow: auto;
    &::-webkit-scrollbar { background: #fbf0d8; width: calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')); height: calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')); } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
    &::-webkit-scrollbar-thumb { background: rgba(215, 173, 13, 1); border-radius: calc(2 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')); }
    >li{
      flex: 0 0 auto;
      display: flex;
      height: calc(40 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      justify-content: center;
      align-items: center;
      margin-right: calc(10 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      font-size: 16px;
      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
      font-weight: 400;
      color: #484238;
      line-height: 19px;
      padding-right: calc(15 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      padding-left: calc(15 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      background-color: #fff;
      border-radius: calc(5 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      cursor: pointer;
    }
    >li.active{
      background-color: rgba(239, 196, 27, 1);
      font-weight: bold;
      color: #FFFFFF;
      border: calc(3 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) solid #FFFFFF;
      box-shadow: 0px calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) 0px rgba(0,0,0,0.25);
    }
  }

  >.show-on-mask{
    position: absolute;
    z-index: 2106;
    right: 0;
    bottom: 0;
    width: calc(90 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    display: flex;
    flex-direction: column;
    align-items: center;
    >button.return {
      width: calc(40 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      height: calc(40 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      background-image: url(@/assets/images/icon_back@2x.png);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center center;
      margin-bottom: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    }
  }
}
</style>