add:新增喂养计划页面

src/auto-imports.d.ts

@@ -293,6 +293,7 @@ declare global {
   const useWindowFocus: typeof import('@vueuse/core')['useWindowFocus']
   const useWindowScroll: typeof import('@vueuse/core')['useWindowScroll']
   const useWindowSize: typeof import('@vueuse/core')['useWindowSize']
+  const utils: typeof import('./utils/index.js')['default']
   const watch: typeof import('vue')['watch']
   const watchArray: typeof import('@vueuse/core')['watchArray']
   const watchAtMost: typeof import('@vueuse/core')['watchAtMost']
@@ -608,6 +609,7 @@ declare module 'vue' {
     readonly useWindowFocus: UnwrapRef<typeof import('@vueuse/core')['useWindowFocus']>
     readonly useWindowScroll: UnwrapRef<typeof import('@vueuse/core')['useWindowScroll']>
     readonly useWindowSize: UnwrapRef<typeof import('@vueuse/core')['useWindowSize']>
+    readonly utils: UnwrapRef<typeof import('./utils/index.js')['default']>
     readonly watch: UnwrapRef<typeof import('vue')['watch']>
     readonly watchArray: UnwrapRef<typeof import('@vueuse/core')['watchArray']>
     readonly watchAtMost: UnwrapRef<typeof import('@vueuse/core')['watchAtMost']>

src/components.d.ts

@@ -8,5 +8,6 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     TabBar: typeof import('./components/TabBar.vue')['default']
+    TitleBar: typeof import('./components/TitleBar.vue')['default']
   }
 }

src/components/TitleBar.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import back from '@/static/image/nav-bar/chevron-left.png'
+
+const props = defineProps<{
+  titleName: string
+}>()
+// 获取胶囊高度
+const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
+function handleBack() {
+  uni.navigateBack()
+}
+</script>
+
+<template>
+  <view class="w-full flex items-center bg-white justify-center relative" :style="{ marginTop: `${menuButtonInfo.top}px`, height: `${menuButtonInfo.height}px` }">
+    <image :src="back" class="absolute  left-3 w-6 h-6" @tap="handleBack" />
+    <text class="text-[18px]">
+      {{ props.titleName }}
+    </text>
+  </view>
+</template>
+
+<style scoped>
+
+</style>

src/pages/feed-plan/index.vue

@@ -1,10 +1,189 @@
 <script setup lang="ts">
+// const searchValue = ref('')
+import bg from '@/static/image/feed-plan/bg.png'
+import circle from '@/static/image/feed-plan/circle.png'
+import message from '@/static/image/feed-plan/message.png'
+import ToolFun from '@/utils'
+
+interface ListItem {
+  img: string
+  title: string
+  desc: string
+  time: string
+}
+interface Item {
+  content: string
+}
+interface DotStyle {
+  backgroundColor: string
+  selectedBackgroundColor: string
+  selectedBorder: string
+  border: string
+}
+interface TypeItem {
+  name: string
+  isClick: boolean
+}
+const titleName = ref<string>('喂养计划')
+const listModel = ref<ListItem[]>([
+  {
+    img: bg,
+    title: '猫咪食物禁忌',
+    desc: '1 饮食不慎 2 寄生虫\n 3 病毒感染 4 细菌和毒素感染',
+    time: '2025年1月1日',
+  },
+  {
+    img: bg,
+    title: '猫咪食物禁忌',
+    desc: '1 饮食不慎 2 寄生虫\n 3 病毒感染 4 细菌和毒素感染',
+    time: '2025年1月1日',
+  },
+  {
+    img: bg,
+    title: '猫咪食物禁忌',
+    desc: '1 饮食不慎 2 寄生虫\n 3 病毒感染 4 细菌和毒素感染',
+    time: '2025年1月1日',
+  },
+  {
+    img: bg,
+    title: '猫咪食物禁忌',
+    desc: '1 饮食不慎 2 寄生虫\n 3 病毒感染 4 细菌和毒素感染',
+    time: '2025年1月1日',
+  },
+  {
+    img: bg,
+    title: '猫咪食物禁忌',
+    desc: '1 饮食不慎 2 寄生虫\n 3 病毒感染 4 细菌和毒素感染',
+    time: '2025年1月1日',
+  },
+  {
+    img: bg,
+    title: '猫咪食物禁忌',
+    desc: '1 饮食不慎 2 寄生虫\n 3 病毒感染 4 细菌和毒素感染',
+    time: '2025年1月1日',
+  },
+  {
+    img: bg,
+    title: '猫咪食物禁忌',
+    desc: '1 饮食不慎 2 寄生虫\n 3 病毒感染 4 细菌和毒素感染',
+    time: '2025年1月1日',
+  },
+])
+const safeHeight = ToolFun.getSafeHeight()
+const searchValue = ref<string>('')
+
+const info = ref<Item[]>([
+  { content: '内容 A' },
+  { content: '内容 B' },
+  { content: '内容 C' },
+])
+
+const current = ref<number>(0)
+
+const dotStyle = ref<DotStyle>({
+  backgroundColor: '#DCDCDC',
+  selectedBackgroundColor: '#0052D9',
+  selectedBorder: 'none',
+  border: 'none',
+})
+
+function change(e: CustomEvent<{ current: number }>): void {
+  current.value = e.detail.current
+}
+
+const typeList = ref<TypeItem[]>([
+  { name: '趣味科普', isClick: true },
+  { name: '科学喂养', isClick: false },
+  { name: '科学喂养', isClick: false },
+  { name: '科学喂养', isClick: false },
+])
+
+function handleClickType(item: TypeItem) {
+  typeList.value.forEach(i => (i.isClick = false))
+  item.isClick = true
+}
 </script>
 
 <template>
-  <view>喂养计划</view>
+  <TitleBar :title-name="titleName" />
+
+  <view class="flex flex-col bg-[#F5F6F7] overflow-y-auto" :style="`height:calc(100vh - ${safeHeight}px)`">
+    <view class="mx-[6px]">
+      <uni-search-bar
+        v-model="searchValue" :focus="true" bg-color="white" clear-button="auto" cancel-button="none" :radius="20"
+      />
+    </view>
+    <view class="ml-4 mt-4 text-[20px] font-600">
+      热门推荐
+    </view>
+    <view class="mx-4 mt-4">
+      <uni-swiper-dot :info="info" :current="current" field="content" mode="dot" :dots-styles="dotStyle">
+        <swiper class="swiper-box" @change="change">
+          <swiper-item v-for="(item, index) in info" :key="index" style="background: rgba(0, 0, 0, 0.20)">
+            <view class="swiper-item">
+              {{ item.content }}
+            </view>
+          </swiper-item>
+        </swiper>
+      </uni-swiper-dot>
+    </view>
+    <view class="ml-4 mt-5 text-[20px] font-600">
+      养宠贴士
+    </view>
+    <view class="mx-4">
+      <scroll-view class="scroll mt-2" scroll-x="auto">
+        <view class="group h-[40px] mt-1">
+          <view
+            v-for="(item, index) in typeList" :key="index" class="item h-[30px] w-[28%] rounded-15px relative" style="border: 1px solid #E7E7E7"
+            @tap="handleClickType(item)"
+          >
+            <view v-if="item.isClick">
+              <image :src="message" class="absolute w-full" style="height: calc(100% + 5px)" />
+              <image :src="circle" class="w-[14px] h-[14px] absolute right-2 top-[-4px]" />
+            </view>
+            <view class="w-full h-full flex items-center justify-center text-[14px] z-20 relative font-600" :class="item.isClick ? 'type_select_span' : 'type_span'">
+              {{ item.name }}
+            </view>
+          </view>
+        </view>
+      </scroll-view>
+    </view>
+    <view
+      v-for="(item, index) in listModel" :key="index" class="bg-[white] rounded-md shadow-lg mx-4 mb-4 w-[calc(100% - 32px)] mt-3"
+    >
+      <view class="flex">
+        <image class="w-28 h-28 rounded-l-md" :src="item.img" />
+        <view class="p-4">
+          <view class="text-[14px]">
+            {{ item.title }}
+          </view>
+          <view class="mt-2 text-[11px] text-[#999] whitespace-pre-line">
+            {{ item.desc }}
+          </view>
+          <view class="mt-3 text-[10px] text-[#D8D8D8]">
+            {{ item.time }}
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
 </template>
 
 <style scoped>
-
+.scroll{
+  box-sizing: border-box;
+  .group{
+    white-space: nowrap;
+    .item{
+      display: inline-block;
+      margin-right: 10px;
+    }
+  }
+}
+.type_span{
+  color:#999
+}
+.type_select_span{
+  color:#FFF
+}
 </style>

src/utils/index.js

@@ -0,0 +1,10 @@
+class ToolFun {
+  static getSafeHeight() {
+    const systemInfo = uni.getSystemInfoSync()
+    const safeAreaInsetBottom = systemInfo.safeAreaInsets.bottom + systemInfo.safeAreaInsets.top
+    const menuButtonInfoHeight = uni.getMenuButtonBoundingClientRect().height + 60
+    return safeAreaInsetBottom + menuButtonInfoHeight
+  }
+}
+
+export default ToolFun