acdr/acdr-ui/src/pages/pet/pet-detail-page.vue

<route lang="json5">
{
  style: {
    navigationBarTitleText: '宠物详情',
    navigationStyle: 'custom',
  },
}
</route>

<template>
  <TopBar />
  <image
    :src="imgUrl('@/static/push/bg.png')"
    class="object-cover absolute top-[-80px] left-0 w-full z-[-1]"
    mode="widthFix"
  ></image>
  <view class="w-full h-40"></view>
  <view class="w-full bg-[#ffff]">
    <!-- 顶部背景和头像 -->
    <view class="relative">
      <view class="absolute left-4 bottom-[-20px] z-10">
        <image
          :src="petInfo.profileUrl ? imgUrl(petInfo.profileUrl) : imgUrl('@/static/icons/cat.png')"
          class="w-20 h-20 object-cover rounded-full border-4 border-white"
        ></image>
      </view>
      <!-- 圆角遮罩 -->
      <view
        class="absolute bottom-[-5px] left-0 w-full h-6 bg-white rounded-tl-xl rounded-tr-xl z-0"
      ></view>
    </view>

    <!-- 数据统计 -->
    <view class="flex justify-around bg-white pt-4 rounded-lg">
      <view class="text-center">
        <text class="text-lg">0</text>
        <text class="block text-gray-600">粉丝</text>
      </view>
      <view class="text-center">
        <text class="text-lg">0</text>
        <text class="block text-gray-600">关注度</text>
      </view>
      <view class="text-center">
        <text class="text-lg">0</text>
        <text class="block text-gray-600">获得赞</text>
      </view>
    </view>

    <view class="pl-4 pr-4">
      <!-- 宠物信息 -->
      <view class="bg-white p-4 rounded-lg">
        <text class="text-xl">{{ petInfo.name || 'cat' }}</text>
        <view class="flex items-center mt-2">
          <wd-icon name="calendar" size="20" class="text-[#ffc107]"></wd-icon>
          <text class="ml-2 text-gray-600">
            距离生日还有{{ daysUntilBirthday(petInfo.age) }}天哦
          </text>
        </view>
      </view>

      <!-- 操作按钮 -->
      <view class="flex justify-between py-4">
        <button
          @click="editPet(petInfo.id)"
          class="bg-[#F0985A] text-white rounded-lg py-2 px-6 h-9 flex-grow-[8] flex items-center justify-center"
        >
          修改信息
        </button>
        <button
          @click="share"
          class="bg-[#ffc107] text-white rounded-lg py-2 px-6 h-9 flex-grow-[2] flex items-center justify-center ml-4"
        >
          分享
        </button>
      </view>

      <!-- 标签栏 -->
      <view class="flex justify-around bg-white py-2 rounded-lg">
        <view
          v-for="tab in tabs"
          :key="tab"
          :class="[
            'text-lg px-4',
            activeTab === tab
              ? 'text-[#ffc107] relative border-b-2 border-[#ffc107]'
              : 'text-gray-600',
          ]"
          @click="activeTab = tab"
        >
          {{ tab }}
          <view v-if="activeTab === tab" class="active-underline"></view>
        </view>
      </view>

      <!-- 内容提示 -->
      <EmptyState type="default" message="暂无内容" />
    </view>
  </view>
</template>

<script setup>
import EmptyState from '@/components/EmptyState.vue'
import TopBar from '@/components/TopBar.vue'
import { imgUrl, toast, toPath } from '@/utils/commUtils'
import { httpGet } from '@/utils/http'
import { ref } from 'vue'

const tabs = ref(['全部', '心情', '养护', '清洁'])
const activeTab = ref('全部')
const petInfo = ref({})

const getPetId = async (id) => {
  try {
    const res = await httpGet('/petInfo/find_by_id/' + id)
    if (res.code === 200) {
      petInfo.value = res.data
      console.log(petInfo.value)
    } else {
      toast(res.data.message)
    }
  } catch (e) {
    console.log(e)
  }
}

const editPet = (id) => {
  toPath('/pages/pet/pet-add-page?id=' + id)
}

const share = () => {}

const daysUntilBirthday = (birthDateStr) => {
  // 将出生日期转换为日期对象
  const birthDate = new Date(birthDateStr)
  const today = new Date()

  // 将出生年份替换为当前年份
  const nextBirthday = new Date(today.getFullYear(), birthDate.getMonth(), birthDate.getDate())

  // 如果今年的生日已经过了，则计算明年的生日
  if (nextBirthday < today) {
    nextBirthday.setFullYear(today.getFullYear() + 1)
  }

  // 计算天数差
  const oneDay = 24 * 60 * 60 * 1000 // 一天的毫秒数
  const daysLeft = Math.ceil((nextBirthday - today) / oneDay)

  return daysLeft
}

onLoad(async (options) => {
  if (options.id) {
    await getPetId(options.id)
  }
})
</script>

<style scoped>
/* 使用 UnoCSS 定义样式 */
.view {
  @apply bg-[#F5F5F5] h-full;
}

.image {
  @apply w-full h-40 object-cover;
}

.button {
  @apply bg-[#ffc107] text-white rounded-lg py-2 px-6 h-12;
}

.text-gray-600 {
  @apply text-gray-600;
}

.text-gray-400 {
  @apply text-gray-400;
}

.border-b-2 {
  border-bottom-width: 2px;
}

.active-underline {
  @apply w-6 h-[0.20rem] bg-yellow-400 mt-1 absolute bottom-[-2px] left-[1.45rem] transform;
}
</style>