Merge branch 'feature/6-petplan' of 1-bright/frontend-uniapp into main

src/pages/feed-plan/index.vue

@@ -1,17 +1,187 @@
 <script setup lang="ts">
+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'
+
+interface User {
+  name: string
+  image: string
+  label: string[]
+  isClick: boolean
+  plan: { image: string, name: string, weight: string, energy: string, label: string[] }[]
+}
 const titleName = ref<string>('喂养计划')
-function handleJumpPlan() {
+const safeHeight = ToolApi.getSafeHeight()
+// 用户存在情况
+const userList = ref<User[]>([
+  { 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))
+}
+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>
   <TitleBar :title-name="titleName" />
-  <button class="h-16 flex items-center justify-center bg-[red]" @tap="handleJumpPlan">
-    跳转喂养计算器
-  </button>
+  <view class="flex flex-col bg-[#F5F6F7] overflow-y-auto" :style="`height:calc(100vh - ${safeHeight}px)`">
+    <!--  喂养计划未注册  -->
+    <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" @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="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>
+        <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>