Merge branch 'feature/7-feedplan' of 1-bright/frontend-uniapp into main

src/pages/feed-plan/index.vue

@@ -1,189 +1,10 @@
 <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/index'
-
-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>
-  <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>
+  <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/pages/pet-manual/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 {getSafeHeight} 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 = 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.ts

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