designer-hub/packages/app/src/pages/home/spread/wx-agent-operation/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>
  <PageHelper
    class="flex-grow flex flex-col p-3.5"
    :request="getProducts"
    :query="{ oneCategory: '2', secondCategory: '102' }"
  >
    <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=5`,
              )
            "
          >
            <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.showFavourable ? it.favourablePoints : it.points }}
              </div>
              <div class="text-black/60 text-sm font-normal font-['PingFang_SC'] leading-[34px]">
                积分
              </div>
              <div class="flex-1"></div>
              <div
                v-if="Number(data?.productPrice)"
                class="w-[53px] text-black/30 text-xs font-normal font-['PingFang_SC'] line-through leading-normal"
              >
                ￥{{it.productPrice}}
              </div>
            </div>
          </div>
        </template>
      </div>
    </template>
  </PageHelper>
</template>