index.vue

<script setup>
import { ref, onMounted } from 'vue'
import { get } from '@/utils/request'
import png1 from '~/static/pages/product/1.png'
import png2 from '~/static/pages/product/2.png'
import png3 from '~/static/pages/product/3.png'
import png4 from '~/static/pages/product/4.png'
import png5 from '~/static/pages/product/5.png'
import pnga1 from '~/static/pages/product/a1.png'
import pnga2 from '~/static/pages/product/a2.png'
import pnga3 from '~/static/pages/product/a3.png'
import pnga4 from '~/static/pages/product/a4.png'
import pnga5 from '~/static/pages/product/a5.png'
import pngb1 from '~/static/pages/product/b1.png'
import pngb2 from '~/static/pages/product/b2.png'
import pngb3 from '~/static/pages/product/b3.png'
import pngb4 from '~/static/pages/product/b4.png'
import pngb5 from '~/static/pages/product/b5.png'
const pngArr = [
  png1,
  png2,
  png3,
  png4,
  png5
]
const pngArr1 = [
  pnga1,
  pnga2,
  pnga3,
  pnga4,
  pnga5
]
const pngArr2 = [
  pngb1,
  pngb2,
  pngb3,
  pngb4,
  pngb5
]
definePageMeta({
  layout: 'main',
  title: '产品信息',
  name: 'product',
  keepalive: true,
})

const userInfo = ref({})
const companyList = ref([])
const loading = ref(true)
const activeIndex = ref(-1)

const fetchData = async () => {
  try {
    loading.value = true
    const [companyRes, userRes] = await Promise.all([
      get("/yw5/listAll", {}),
      get('/system/user/')
    ])

    if (companyRes?.code === 200) {
      companyList.value = companyRes.data ?? []
    }
    userInfo.value = userRes ?? {}
  } catch (error) {
    console.error('获取数据失败:', error)
    showFailToast('加载失败，请重试')
  } finally {
    loading.value = false
  }
}

const handleJump = (item, index) => {
  if (userInfo.value.q0 >= item.a2) {
    activeIndex.value = index
    setTimeout(() => {
      navigateTo(`/product/detail/${item.id}`)
    }, 300)
  } else {
    showFailToast('信用分不足')
  }
}
const preview = (index) => {
  ImagePreview(pngArr1[index])
}
const preview1 = (index) => {
  ImagePreview(pngArr2[index])
}
onMounted(fetchData)
</script>

<template>
  <div class="container">
    <var-loading description="加载中..." :loading="loading">
      <transition-group name="card-list" tag="div" class="card-container">
        <div v-for="(item, index) in companyList" :key="item.id" class="card"
          :class="{ 'card-active': activeIndex === index }">
          <img :src="pngArr[item.id - 1]" :alt="item.a1" class="card-image">
          <div class="title">{{ item.a1 }}</div>
          <transition name="fade">
            <div v-if="userInfo.q0 < item.a2" class="overlay">
              <var-icon name="lock-outline" class="lock-icon" />
              <span>信用分达到{{ item.a2 }}分解锁</span>
            </div>
          </transition>
          <div class="btngroup">
            <div @click="preview1(index)" v-if="!(userInfo.q0 < item.a2)" class="btn btn1">查看营业执照</div>
            <div class="btn" @click="handleJump(item, index)">进入认购</div>
            <div @click="preview(index)" v-if="!(userInfo.q0 < item.a2)" class="btn  btn1">查看授权委托书</div>
          </div>
        </div>
      </transition-group>
    </var-loading>
  </div>
</template>

<style lang="scss" scoped>
.container {
  font-family: pingfang;
  padding: 20px 10px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.card-container {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.card {
  position: relative;
  background-color: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  }

  &-active {
    transform: scale(0.95);
    opacity: 0.8;
  }

  &-image {
    width: 100%;
    height: 200px;
    transition: transform 0.3s ease;

    &:hover {
      transform: scale(1.05);
    }
  }
}

.title {
  position: absolute;
  top: 0;
  width: 100%;
  padding: 10px;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  backdrop-filter: blur(4px);
  transition: all 0.3s ease;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.6);
  // backdrop-filter: blur(1px);
  color: #fff;
  gap: 8px;

  .lock-icon {
    font-size: 32px;
    animation: bounce 1s ease infinite;
  }
}

.btn {
  width: 100%;
  padding: 12px 0;
  background-color: #e5212a;
  color: #fff;
  text-align: center;
  font-weight: 500;
  transition: all 0.3s ease;
  border-radius: 0;
}

.btngroup {
  display: flex;

  .btn {
    flex: 1;
    font-size: 14px;
  }

  .btn1 {
    background: #7966af;
  }
}

// 动画
.card-list-enter-active,
.card-list-leave-active {
  transition: all 0.3s ease;
}

.card-list-enter-from,
.card-list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

@keyframes bounce {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}
</style>