designer-hub/packages/app/src/pages/home/spread/case-shooting/index.vue

<route lang="json">
{ "style": { "navigationBarTitleText": "案例拍摄", "navigationBarBackgroundColor": "#ffffff" } }
</route>
<script setup lang="ts">
import PageHelper from '@/components/page-helper.vue'
import { useRouter } from '../../../../core/utils/router'
import { getProducts } from '../../../../core/libs/requests'

const router = useRouter()
onShareAppMessage(() => ({
  title: '案例拍摄',
}))
onShareTimeline(() => ({
  title: '案例拍摄',
}))
</script>
<template>
  <div class="flex-grow p-3.5">
    <PageHelper
      class="flex-grow flex flex-col"
      :request="getProducts"
      :query="{ oneCategory: '2', secondCategory: '101' }"
    >
      <template #default="{ source }">
        <div class="grid grid-cols-2 gap-x-2.5 gap-y-10">
          <template v-for="(it, i) in source.list" :key="i">
            <div
              class="flex flex-col gap-4"
              @click="
                router.push(
                  `/pages/home/spread/product-detail/index?id=${it.productId}&title=案例拍摄&item=4`,
                )
              "
            >
              <div class="aspect-square rounded-2xl overflow-hidden relative">
                <wd-img
                  width="100%"
                  height="100%"
                  :src="it.productCoverImgUrl"
                  custom-class="aspect-square"
                  mode="aspectFill"
                />
                <div
                  class="w-full h-[39px] bg-gradient-to-t from-black to-black/0 rounded-bl-2xl rounded-br-2xl absolute bottom-0 flex items-center justify-center"
                >
                  <div class="text-white text-base font-normal font-['PingFang_SC'] leading-normal">
                    <!-- 方晓峰 -->
                    {{ it.prodcutName }}
                  </div>
                </div>
              </div>
              <div class="flex items-center">
                <div
                  class="text-[#ef4343] text-[22px] font-normal font-['D-DIN_Exp'] leading-normal"
                >
                  <!-- 1600 -->
                  {{ it.points }}
                </div>
                <div class="text-black/60 text-sm font-normal font-['PingFang_SC'] leading-[34px]">
                  积分
                </div>
                <div class="flex-1"></div>
                <div
                  class="w-[53px] text-black/30 text-xs font-normal font-['PingFang_SC'] line-through leading-normal"
                >
                  2000积分
                </div>
              </div>
            </div>
          </template>
        </div>
      </template>
    </PageHelper>
  </div>
</template>