add:新增喂养计划页面

src/pages/feed-plan/index.vue

@@ -2,6 +2,9 @@
 import avator from '@/static/image/pet-parameters/avator.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 miniGoods from '@/static/image/pet-plan/mini_goods.png'
+import nutritionGoods from '@/static/image/pet-plan/nutrition_goods.png'
 import userAddBtn from '@/static/image/pet-plan/user_add_btn.png'
 import ToolApi from '@/utils'
 
@@ -10,13 +13,26 @@ interface User {
   image: string
   label: string[]
   isClick: boolean
+  plan: { image: string, name: string, weight: string, energy: string, label: string[] }[]
 }
 const titleName = ref<string>('喂养计划')
 const safeHeight = ToolApi.getSafeHeight()
+// 用户存在情况
 const userList = ref<User[]>([
-  { name: '子龙', image: avator, label: ['1岁', '孟加拉豹猫', '8kg'], isClick: true },
-  { name: '广坤', image: avator, label: ['1岁', '孟加拉豹猫', '8kg'], isClick: false },
+  { name: '子龙', image: avator, label: ['1岁', '孟加拉豹猫', '8kg'], plan: [
+    { image: miniGoods, name: 'MINI主食包', weight: '500', energy: '1200kcal', label: ['湿粮', '呵护肠胃'] },
+    { image: nutritionGoods, name: '营养加焙烘焙粮', weight: '500', energy: '1200kcal', label: ['湿粮', '呵护肠胃'] },
+  ], isClick: true },
+  { name: '广坤', image: avator, label: ['12岁', '孟加拉豹猫', '8kg'], plan: [
+    { image: miniGoods, name: 'MINI主食包', weight: '600', energy: '1300kcal', label: ['湿粮', '呵护肠胃'] },
+    { image: nutritionGoods, name: '营养加焙烘焙粮', weight: '1000', energy: '1300kcal', label: ['湿粮', '呵护肠胃'] },
+  ], isClick: false },
 ])
+// 用户不存在情况
+// const userList = ref<User[]>([])
+const clickUser = computed(() => {
+  return userList.value.filter(user => user.isClick === true)
+})
 function resetUserClick() {
   userList.value.forEach(i => (i.isClick = false))
 }
@@ -24,13 +40,16 @@ function handleUser(index: number) {
   resetUserClick()
   userList.value[index].isClick = true
 }
+function handleEdit() {
+  console.log('edit')
+}
 </script>
 
 <template>
   <TitleBar :title-name="titleName" />
   <view class="flex flex-col bg-[#F5F6F7] overflow-y-auto" :style="`height:calc(100vh - ${safeHeight}px)`">
     <!--  喂养计划未注册  -->
-    <view v-show="false" class="w-[calc(100% - 32px)] h-[135px]  rounded-lg m-[16px] relative">
+    <view v-if="userList.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" />
@@ -44,25 +63,101 @@ function handleUser(index: number) {
           编辑计划
         </text>
       </view>
+      <view class="absolute right-0 top-0 w-[78px] h-[24px] z-20" @tap="handleEdit" />
     </view>
     <!--  喂养计划已注册  -->
-    <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 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]" />
       </view>
-      <image :src="userAddBtn" class="w-[24px] h-[24px]" />
-    </view>
 
-    <view class="w-[calc(100% - 32px)] h-[129px] rounded-lg m-[16px] relative bg-[white] px-[16px] flex items-center">
-      <image :src="avator" class="w-[64px] h-[64px] rounded-full" />
-      <view class="ml-[16px] min-h-[54px] ">
-        <text class="font-600">
-          子龙
-        </text>
-        <view class="px-[8px] py-[4px] mt-[6px] rounded bg-[#f3f3f3] text-[#999] text-[12px]">
-          1岁
+      <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="avator" 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 v-for="(item, index) in clickUser[0].plan" :key="index" class="bg-[white] 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>
@@ -75,4 +170,13 @@ function handleUser(index: number) {
 .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>