frontend-uniapp/src/pages/feed-plan/index.vue

<script setup lang="ts">
import type { Pet } from '@/model/pet'
import { getOwnPets } from '@/api/pet'
import avatar from '@/static/image/pet-parameters/avatar.png'
import addBtn from '@/static/image/pet-plan/add_btn.png'
import card from '@/static/image/pet-plan/card.png'
import editBtn from '@/static/image/pet-plan/edit.png'
import userAddBtn from '@/static/image/pet-plan/user_add_btn.png'

interface User {
  name: string
  image: string
  label: string[]
  isClick: boolean
  plan: { image: string, name: string, weight: string, energy: string, label: string[] }[]
}

const pets = ref<Pet[]>([])
async function fetchPets() {
  pets.value = await getOwnPets()
}

onMounted(fetchPets)

const userList = ref<User[]>([])
const clickUser = computed(() => {
  return userList.value.filter(user => user.isClick === true)
})
function resetUserClick() {
  userList.value.forEach(i => (i.isClick = false))
}
function handleUser(index: number) {
  resetUserClick()
  userList.value[index].isClick = true
}
function handleAdd() {
  uni.navigateTo({ url: '/pages/start-filing/index' })
}
function handleEdit() {
  uni.navigateTo({ url: '/pages/feed-calculator/index' })
}
</script>

<template>
  <view class="flex flex-col bg-[#F5F6F7] overflow-y-auto h-screen">
    <!--  喂养计划未注册  -->
    <view v-if="pets.length === 0" class="w-[calc(100% - 32px)] min-h-[135px]  rounded-lg m-[16px] relative">
      <image :src="card" class="w-full h-full absolute z-20" />
      <view class="z-20 absolute w-full mt-[35px] flex flex-col">
        <image :src="addBtn" class="w-[47px] h-[47px] mx-auto" @click="handleAdd" />
        <text class="text-[12px] text-[#D9D9D9] mx-auto mt-[6px]" @click="handleAdd">
          添加你的喂养计划
        </text>
      </view>

      <view class="w-[111px] h-[42px] bg-[black] absolute top-0 right-0 rounded-tr-xl z-10">
        <text class="text-[#999] absolute right-5 top-2 text-[12px]">
          无计划
        </text>
      </view>
      <view class="absolute right-0 top-0 w-[78px] h-[24px] z-20" @tap="handleAdd" />
    </view>
    <!--  喂养计划已注册  -->
    <view v-else>
      <view class="w-[calc(100% - 32px)] m-[16px] flex items-center">
        <view v-for="(item, index) in userList" :key="index" class="text-[16px] font-500 mr-[12px] flex flex-col items-center justify-center" :style="{ fontSize: item.isClick ? '20px' : '16px', color: item.isClick ? '#4545E5' : 'black', fontWeight: item.isClick ? '600' : '500' }" @click="handleUser(index)">
          <text>{{ item.name }}</text>
          <view v-if="item.isClick" class="w-[16px] h-[3px] bg-[#4545E5]" />
        </view>
        <image :src="userAddBtn" class="w-[24px] h-[24px]" @tap="handleAdd" />
      </view>

      <view v-for="(item, index) in clickUser" :key="index" class="w-[calc(100% - 32px)] min-h-[129px] rounded-lg m-[16px] relative bg-[white] p-[16px] flex items-center">
        <image :src="avatar" class="w-[64px] h-[64px] rounded-full" />
        <view class="ml-[16px] min-h-[54px] flex-1">
          <text class="font-600">
            {{ item.name }}
          </text>
          <view class="flex gap-2 flex-wrap mt-[6px]">
            <view v-for="(label, labelIndex) in item.label" :key="labelIndex" class="px-[8px] py-[4px]  rounded bg-[#f3f3f3] text-[#999] text-[12px]">
              {{ label }}
            </view>
          </view>
        </view>
        <image :src="editBtn" class="w-[20px] h-[20px]" />
      </view>

      <view class="w-[calc(100% - 32px)] min-h-[135px] rounded-lg bg-[white] mx-[16px] relative">
        <image :src="card" class="w-full h-[130px] absolute z-20" />
        <view class="absolute z-20 w-full rounded-lg">
          <view class="ml-[12px] mt-[5px]">
            <text class="text-[12px]">
              喂养计划
            </text>
            <text class="text-[12px] text-[#D9D9D9]">
              FEEDING PLAN
            </text>
          </view>
        </view>
        <view class="absolute z-20 w-full rounded-lg bg-[white] top-[30px]">
          <view v-for="(item, index) in clickUser[0].plan" :key="index" class="w-full mt-3 pl-[10px] pr-[20px] flex " :class="[clickUser[0].plan.length - 1 === index ? 'rounded-b-lg' : 'plan_card_bottom']">
            <image :src="item.image" class="w-[80px] h-[80px]" />
            <view class="ml-[12px] mt-[10px] flex-1">
              <text class="font-600">
                {{ item.name }}
              </text>
              <view class="flex gap-2 flex-wrap mt-[16px]">
                <view v-for="(label, labelIndex) in item.label" :key="labelIndex" class="px-[8px] py-[4px] rounded bg-[#f3f3f3] text-[12px] ">
                  {{ label }}
                </view>
              </view>
            </view>
            <view v-if="index === 0" class="flex flex-col mt-[10px]">
              <view class="text-[12px] font-600 flex justify-end">
                每日
              </view>
              <view class="flex items-end">
                <text class="source_family font-700 text-[20px]">
                  {{ item.weight }}
                </text>
                <text class="poppins_family font-500 text-[12px]">
                  g
                </text>
              </view>
              <view class="source_family text-[9px] text-[#CDCDCD] mt-[10px] flex justify-end">
                {{ item.energy }}
              </view>
            </view>
            <view v-else class="flex flex-col mt-[2px] relative items-center top-[8px] right-0">
              <view class="absolute z-20 top-[-10px] right-0 flex items-center justify-center w-full">
                <view class="w-[25px] h-[25px] rounded-full bg-[#4545e5] text-[10px] text-[white] flex items-center justify-center ">
                  日
                </view>
              </view>

              <view class="h-[52px] bg-[#D9D9D9] rounded-2xl  px-[4px]">
                <view class="mt-[14px] flex items-end justify-center ">
                  <text class="text-[16px] font-700">
                    {{ item.weight }}
                  </text>
                  <text class="text-[12px] font-500">
                    g
                  </text>
                </view>
                <view class="text-[9px] text-[#7C7C7C] flex justify-center">
                  {{ item.energy }}
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="w-[111px] h-[42px] bg-[black] absolute top-0 right-0 rounded-tr-xl z-10">
          <text class="text-[#999] absolute right-5 top-2 text-[12px]">
            编辑计划
          </text>
        </view>
        <view class="absolute right-0 top-0 w-[78px] h-[24px] z-20" @tap="handleEdit" />
      </view>
    </view>
  </view>
</template>

<style scoped>
.select_user_span{
  color: #4545E5;
}
.user_span{
  color:black;
}
.source_family{
  font-family: Source Han Sans CN, sans-serif;
}
.poppins_family{
  font-family: Poppins, sans-serif;
}
.plan_card_bottom{
  border-bottom: 0.5px solid #EAEAEA;
}
</style>