|
|
@@ -1,179 +1,141 @@
|
|
|
<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[] }[]
|
|
|
-}
|
|
|
+import { type Pet, PetType } from '@/model/pet'
|
|
|
|
|
|
const pets = ref<Pet[]>([])
|
|
|
async function fetchPets() {
|
|
|
pets.value = await getOwnPets()
|
|
|
}
|
|
|
|
|
|
-onMounted(fetchPets)
|
|
|
+const currentIndex = ref(0)
|
|
|
+const currentPet = computed(() => pets.value[currentIndex.value])
|
|
|
|
|
|
-const userList = ref<User[]>([])
|
|
|
-const clickUser = computed(() => {
|
|
|
- return userList.value.filter(user => user.isClick === true)
|
|
|
+const petTags = computed(() => {
|
|
|
+ if (!currentPet.value)
|
|
|
+ return []
|
|
|
+ return [
|
|
|
+ { key: 'age', value: `${new Date().getFullYear() - new Date(currentPet.value.birthday).getFullYear()}岁` },
|
|
|
+ { key: 'type', value: currentPet.value.type === PetType.CAT ? '猫猫' : '狗狗' },
|
|
|
+ { key: 'weight', value: `${currentPet.value.weight}kg` },
|
|
|
+ ]
|
|
|
})
|
|
|
-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' })
|
|
|
+
|
|
|
+function selectPet(index: number) {
|
|
|
+ currentIndex.value = index
|
|
|
}
|
|
|
+
|
|
|
+onMounted(fetchPets)
|
|
|
</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 class="flex flex-col bg-[#F5F6F7] overflow-y-auto h-screen p-4 gap-4">
|
|
|
+ <view class="w-full flex gap-3 items-center h-[32px]">
|
|
|
+ <template v-if="pets.length">
|
|
|
+ <view
|
|
|
+ v-for="(item, index) in pets" :key="item.id" class="text-base font-medium relative flex justify-center transition-all"
|
|
|
+ :class="{
|
|
|
+ 'text-primary text-xl font-semibold': index === currentIndex,
|
|
|
+ }"
|
|
|
+ @click="() => selectPet(index)"
|
|
|
+ >
|
|
|
+ {{ item.name }}
|
|
|
+ <view v-if="index === currentIndex" class="absolute w-[30%] h-[3px] bg-primary bottom-[-4px] rounded-full" />
|
|
|
+ </view>
|
|
|
+ <image src="@/static/icons/plus-circle.svg" class="w-[24px] h-[24px]" />
|
|
|
+ </template>
|
|
|
+ <view v-else class="text-primary text-xl relative flex justify-center font-semibold">
|
|
|
+ 待添加
|
|
|
</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 v-if="currentPet" class="shadow-cell-group w-full px-4 py-8 bg-[white] rounded-3 flex items-center gap-4">
|
|
|
+ <image class="w-[64px] h-[64px] rounded-full" src="@/static/image/pet-default-avatar.png" />
|
|
|
+ <view class="flex-1">
|
|
|
+ <view class="font-semibold mb-1.5">
|
|
|
+ {{ currentPet.name }}
|
|
|
+ </view>
|
|
|
+ <view class="flex gap-2">
|
|
|
+ <view v-for="petTag in petTags" :key="petTag.key" class="px-2 py-0.5 bg-[#f3f3f3] rounded-0.75 text-[#999999]">
|
|
|
+ {{ petTag.value }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <view class="absolute right-0 top-0 w-[78px] h-[24px] z-20" @tap="handleAdd" />
|
|
|
+ <image class="w-[20px] h-[20px]" src="@/static/icons/edit.svg" />
|
|
|
</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 class="w-full relative rounded-3 overflow-hidden shadow-cell-group bg-[#fff]">
|
|
|
+ <view class="w-[111px] h-[44px] bg-[#1a1a1a] absolute right-0 top-0">
|
|
|
+ <view class="text-[#999] text-xs absolute right-4 leading-[34px]">
|
|
|
+ 编辑计划
|
|
|
</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 }}
|
|
|
+ <image class="w-[343px] h-[179px] absolute right-0 top-0 " src="@/static/image/shape-bg.png" />
|
|
|
+ <view class="pl-4 relative flex gap-1 h-[44px] items-center text-xs">
|
|
|
+ <view>喂养计划</view>
|
|
|
+ <view class="text-[#D9D9D9]">
|
|
|
+ FEEDING PLAN
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="py-4 pl-2 pr-8 w-full flex gap-3 relative items-center border-b-[1px] border-[#E7E7E7] last-of-type:border-0">
|
|
|
+ <image src="@/static/image/product-default.png" class="w-[80px] h-[80px]" />
|
|
|
+ <view class="flex-1 flex flex-col justify-between h-[80px] py-2">
|
|
|
+ <view class="font-semibold">
|
|
|
+ MINI主食包
|
|
|
+ </view>
|
|
|
+ <view class="flex gap-2">
|
|
|
+ <view class="px-2 py-0.5 bg-[#f3f3f3] rounded-0.75">
|
|
|
+ 湿粮
|
|
|
+ </view>
|
|
|
+ <view class="px-2 py-0.5 bg-[#f3f3f3] rounded-0.75">
|
|
|
+ 湿粮
|
|
|
</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
|
|
|
+ <view class="text-right">
|
|
|
+ <view class="text-xs font-semibold">
|
|
|
+ 每日
|
|
|
+ </view>
|
|
|
+ <view class="text-xl font-bold mb-4">
|
|
|
+ 500<text class="text-xs font-medium">
|
|
|
+ g
|
|
|
</text>
|
|
|
</view>
|
|
|
+ <view class="text-[9px] text-[#CDCDCD]">
|
|
|
+ 1200Kcal
|
|
|
+ </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 class="py-4 pl-2 pr-8 w-full flex gap-3 relative items-center border-b-[1px] border-[#E7E7E7] last-of-type:border-0">
|
|
|
+ <image src="@/static/image/product-default.png" class="w-[80px] h-[80px]" />
|
|
|
+ <view class="flex-1 flex flex-col justify-between h-[80px] py-2">
|
|
|
+ <view class="font-semibold">
|
|
|
+ MINI主食包
|
|
|
+ </view>
|
|
|
+ <view class="flex gap-2">
|
|
|
+ <view class="px-2 py-0.5 bg-[#f3f3f3] rounded-0.75">
|
|
|
+ 湿粮
|
|
|
</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 class="px-2 py-0.5 bg-[#f3f3f3] rounded-0.75">
|
|
|
+ 湿粮
|
|
|
</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 class="text-right">
|
|
|
+ <view class="text-xs font-semibold">
|
|
|
+ 每日
|
|
|
+ </view>
|
|
|
+ <view class="text-xl font-bold mb-4">
|
|
|
+ 500<text class="text-xs font-medium">
|
|
|
+ g
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ <view class="text-[9px] text-[#CDCDCD]">
|
|
|
+ 1200Kcal
|
|
|
+ </view>
|
|
|
</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>
|
