Selaa lähdekoodia

Merge branch 'main' into feature/10-userinfo

# Conflicts:
#	src/pages.json
#	src/uni-pages.d.ts
IlhamTahir 1 vuosi sitten
vanhempi
commit
87728701e8

+ 4 - 0
.env.development

@@ -0,0 +1,4 @@
+VITE_ENABLE_MOCK=false
+VITE_API_PREFIX=/api
+VITE_PROXY_ENDPOINT=https://bright.yilibili.com/api
+

+ 1 - 0
.env.example

@@ -0,0 +1 @@
+VITE_ENABLE_MOCK=true

+ 36 - 0
pet-manual/components/CardList.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+interface ListItem {
+  img: string
+  title: string
+  desc: string
+  time: string
+}
+const props = defineProps<{
+  cardList: ListItem[]
+}>()
+</script>
+
+<template>
+  <view
+    v-for="(item, index) in props.cardList" :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>
+</template>
+
+<style scoped>
+
+</style>

+ 232 - 0
pet-manual/index.vue

@@ -0,0 +1,232 @@
+<script setup lang="ts">
+import carousalApi from '@/api/carousal'
+import CardList from '@/pages/pet-manual/components/CardList.vue'
+// 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 ToolApi 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 = ToolApi.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
+}
+const isSearch = ref<boolean>(true)
+function handleSearchFocus() {
+  isSearch.value = false
+}
+function handleCancel() {
+  isSearch.value = true
+}
+const historyList = ref<{ name: string }[]>([
+  { name: '猫' },
+  { name: '狗' },
+  { name: '烘培粮' },
+])
+
+const findList = ref<{ name: string }[]>([
+  { name: '宠物吃饭慢' },
+  { name: '猫咪尿闭怎么办' },
+])
+function onLoad() {
+  carousalApi.getCarousalList().then((res) => {
+    console.log(res)
+  })
+}
+onLoad()
+</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"
+        placeholder="请搜索你想要的内容"
+        bg-color="white" clear-button="auto"
+        :cancel-button="isSearch ? 'none' : 'always'"
+        :radius="20"
+        @focus="handleSearchFocus"
+        @cancel="handleCancel"
+      />
+    </view>
+    <view v-show="!isSearch" class="mx-4 mt-4">
+      <view>
+        <text class="text-[18px] font-600">
+          历史记录
+        </text>
+        <view class="mt-4 flex gap-2 flex-wrap text-[12px] text-[#999] font-400 leading-5">
+          <view v-for="(item, index) in historyList" :key="index" class="px-2 py-0.5 flex justify-center items-center bg-[white] rounded-sm">
+            {{ item.name }}
+          </view>
+        </view>
+        <view class="mt-8">
+          <text class="text-[18px] font-600">
+            搜索发现
+          </text>
+          <view class="mt-4 flex gap-2 flex-wrap text-[12px] text-[#999] font-400 leading-5">
+            <view v-for="(item, index) in findList" :key="index" class="px-2 py-0.5 flex justify-center items-center bg-[white] rounded-sm gap-1">
+              <view class="flex items-center justify-center">
+                <uni-icons color="#999999" size="14" type="search" />
+              </view>
+              <view class="flex items-center justify-center">
+                {{ item.name }}
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+    <view v-show="isSearch">
+      <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>
+      <CardList :card-list="listModel" />
+    </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>

+ 9 - 0
src/api/carousal.ts

@@ -0,0 +1,9 @@
+import httpClient from '@/api/httpClient'
+
+function getCarousalList() {
+  return httpClient.get('/carousals/active-list')
+}
+
+export default {
+  getCarousalList,
+}

+ 1 - 1
src/api/httpClient.ts

@@ -3,7 +3,7 @@ import { createUniAppAxiosAdapter } from '@uni-helper/axios-adapter'
 import axios from 'axios'
 
 const instance = axios.create({
-  baseURL: import.meta.env.VITE_API_URL,
+  baseURL: import.meta.env.VITE_PROXY_ENDPOINT,
   adapter: createUniAppAxiosAdapter(),
 })
 

+ 26 - 0
src/api/request.ts

@@ -0,0 +1,26 @@
+export function get<T>(url: string, params: string | AnyObject | ArrayBuffer = {}) {
+  return _request('GET', url, params)
+}
+export function post(url: string, data: string | AnyObject | ArrayBuffer) {
+  return _request('POST', url, data)
+}
+
+function _request<T>(
+  method: 'OPTIONS' | 'GET' | 'HEAD' | 'POST' | 'PUT' | 'DELETE' | 'TRACE' | 'CONNECT',
+  url: string,
+  data: string | AnyObject | ArrayBuffer = {},
+) {
+  return new Promise<T>((resolve, reject) => {
+    uni.request({
+      method,
+      url,
+      data,
+      success: (result) => {
+        resolve(result.data as T)
+      },
+      fail: (result) => {
+        reject('服务器无法触达')
+      },
+    })
+  })
+}

+ 2 - 3
src/api/token.ts

@@ -1,6 +1,5 @@
-import type { CreateTokenRequest } from '@/model/token'
 import httpClient from './httpClient'
 
-export function createToken(createTokenRequest: CreateTokenRequest) {
-  return httpClient.post<{ token: string }>('/tokens', createTokenRequest)
+export function createToken(code: string) {
+  return httpClient.post<{ token: string }>(`/we-chat/tokens/${code}`)
 }

+ 1 - 2
src/auto-imports.d.ts

@@ -35,7 +35,6 @@ declare global {
   const extendRef: typeof import('@vueuse/core')['extendRef']
   const getCurrentInstance: typeof import('vue')['getCurrentInstance']
   const getCurrentScope: typeof import('vue')['getCurrentScope']
-  const getSafeHeight: typeof import('./utils/index')['getSafeHeight']
   const h: typeof import('vue')['h']
   const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
   const inject: typeof import('vue')['inject']
@@ -353,7 +352,6 @@ declare module 'vue' {
     readonly extendRef: UnwrapRef<typeof import('@vueuse/core')['extendRef']>
     readonly getCurrentInstance: UnwrapRef<typeof import('vue')['getCurrentInstance']>
     readonly getCurrentScope: UnwrapRef<typeof import('vue')['getCurrentScope']>
-    readonly getSafeHeight: UnwrapRef<typeof import('./utils/index')['getSafeHeight']>
     readonly h: UnwrapRef<typeof import('vue')['h']>
     readonly ignorableWatch: UnwrapRef<typeof import('@vueuse/core')['ignorableWatch']>
     readonly inject: UnwrapRef<typeof import('vue')['inject']>
@@ -613,6 +611,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')['default']>
     readonly watch: UnwrapRef<typeof import('vue')['watch']>
     readonly watchArray: UnwrapRef<typeof import('@vueuse/core')['watchArray']>
     readonly watchAtMost: UnwrapRef<typeof import('@vueuse/core')['watchAtMost']>

+ 0 - 0
src/model/carousals.ts


+ 44 - 45
src/pages.json

@@ -1,46 +1,45 @@
 {
-	"easycom": {
-		"autoscan": true,
-		"custom": {
-			"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
-		}
-	},
-	"pages": [
-		{
-			"path": "pages/feed-plan/index",
-			"type": "page"
-		},
-		{
-			"path": "pages/home/index",
-			"type": "page"
-		},
-		{
-			"path": "pages/me/index",
-			"type": "page"
-		},
-		{
-			"path": "pages/pet-manual/index",
-			"type": "page"
-		},
-		{
-			"path": "pages/setting/index",
-			"type": "page"
-		},
-		{
-			"path": "pages/userInfo/index",
-			"type": "page"
-		}
-	],
-	"globalStyle": {
-		"backgroundColor": "@bgColor",
-		"backgroundColorBottom": "@bgColorBottom",
-		"backgroundColorTop": "@bgColorTop",
-		"backgroundTextStyle": "@bgTxtStyle",
-		"navigationBarBackgroundColor": "#000000",
-		"navigationBarTextStyle": "@navTxtStyle",
-		"navigationBarTitleText": "Vitesse-Uni",
-		"navigationStyle": "custom"
-	},
-	"__esModule": true,
-	"subPackages": []
-}
+  "easycom": {
+    "autoscan": true,
+    "custom": {
+      "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
+    }
+  },
+  "pages": [
+    {
+      "path": "pages/feed-plan/index",
+      "type": "page"
+    },
+    {
+      "path": "pages/home/index",
+      "type": "page"
+    },
+    {
+      "path": "pages/me/index",
+      "type": "page"
+    },
+    {
+      "path": "pages/setting/index",
+      "type": "page"
+    },
+    {
+      "path": "pages/userInfo/index",
+      "type": "page"
+    },
+    {
+      "path": "pages/pet-manual/components/CardList",
+      "type": "page"
+    }
+  ],
+  "globalStyle": {
+    "backgroundColor": "@bgColor",
+    "backgroundColorBottom": "@bgColorBottom",
+    "backgroundColorTop": "@bgColorTop",
+    "backgroundTextStyle": "@bgTxtStyle",
+    "navigationBarBackgroundColor": "#000000",
+    "navigationBarTextStyle": "@navTxtStyle",
+    "navigationBarTitleText": "Vitesse-Uni",
+    "navigationStyle": "custom"
+  },
+  "subPackages": []
+}

+ 24 - 79
src/pages/home/index.vue

@@ -18,38 +18,47 @@ const videoSrc = ref(
   >
     <view class="container">
       <video
-        class="video-player min-h-80 max-w-full"
+        class="absolute top-0 left-0 w-screen h-screen"
         :src="videoSrc"
         autoplay
         loop
+        object-fit="cover"
         muted
         :controls="false"
-        objectFit="fill"
       />
-      <view class="content">
+      <view class="content absolute  box-border top-0 left-0 w-full h-full p-[23px]">
         <image :src="left_top_logo" class="left-3 w-48 h-6" />
         <view
-          class="content_text flex justify-between flex-col my-8 w-full h-5/6 items-center"
+          class="content_text flex justify-between flex-col  w-full h-full items-center "
         >
-          <view class="flex justify-center flex-col w-full items-center">
+          <view
+            class="flex justify-center flex-col text-[29px] w-full items-center mt-[100px]
+          tracking-[5.45px] text-[#FFF] leading-[37px]"
+          >
             <view>为你的爱宠建档</view>
             <view>制定专业喂养方案</view>
-            <view class="conten_science">
+            <view class="mt-[15px]  text-[12px] text-center font-normal tracking-[1.45px] leading-[16px]">
               科学喂养专业有爱
             </view>
           </view>
-          <view class="flex justify-center flex-col w-full items-center">
-            <view class="content_botton">
-              <button type="primary" class="content_botton_text">
+          <view class="flex justify-center flex-col w-full items-center h-full mt-[200px] text-[#FFF]">
+            <view
+              class="content_botton flex w-[176px] h-[47px] justify-center
+              items-center bg-[#4545E5] rounded-[69px]"
+            >
+              <button
+                class=" text-[18px] font-normal
+              tracking-[.36px] leading-[37px] shrink-0"  hover-class="bg-[#4545E5]"
+              >
                 开始建档
               </button>
             </view>
-            <view class="content_details">
+            <view class="content_details tracking-[1.8px] mt-[40px] text-[12px] font-normal ">
               下拉了解详情
             </view>
-            <view class="content_img">
-              <image :src="Rectangle" />
-              <image :src="Rectangle" />
+            <view class="content_img mt-[15px]">
+              <image :src="Rectangle" class="w-[15px] h-[8.485px] shrink-0 stroke-[2px] fill-white stroke-white" />
+              <image :src="Rectangle" class="w-[15px] h-[8.485px] shrink-0 stroke-[2px] fill-white stroke-white" />
             </view>
           </view>
         </view>
@@ -73,70 +82,6 @@ const videoSrc = ref(
     width: 100%
     height: 100%
     controlslist: none
-    objectfit: cover /* 修改适应方式为覆盖 */
-
-.content
-  position: absolute
-  box-sizing: border-box
-  top: 0
-  left: 0
-  width: 100%
-  height: 100%
-  padding: 23px
-  &_text
-    color: var(--Color, #fff)
-    text-align: center
-    font-family: "Source Han Sans CN"
-    font-size: 29px
-    font-style: normal
-    font-weight: 500
-    line-height: 37px /* 127.586% */
-    letter-spacing: 1.45px
-    .conten_science
-      color: var(--Color, #fff)
-      text-align: center
-      font-family: "Source Han Sans CN"
-      font-size: 12px
-      font-style: normal
-      font-weight: 400
-      line-height: 16px /* 133.333% */
-      letter-spacing: 0.6px
-
-    .content_botton
-      display: inline
-      padding: 5px 51px
-      justify-content: center
-      align-items: center
-    &_text
-      display: block
-      width: 176px
-
-      border-radius: 69px
-      background: #4545e5 /* 按钮 */
-      box-shadow: 0px 4px 12px 0px rgba(69, 69, 229, 0.3)
-      color: var(--Color, #fff)
-      text-align: center
-      font-family: "PingFang SC"
-      font-size: 18px
-      font-style: normal
-      font-weight: 400
-      line-height: 37px /* 205.556% */
-      letter-spacing: 0.36px
-
-    .content_details
-      margin-top: 20px
-      color: var(--Color, #fff)
-      text-align: center
-      font-family: "Source Han Sans CN"
-      font-size: 12px
-      font-style: normal
-      font-weight: 400
-      line-height: 16px /* 133.333% */
-      letter-spacing: 1.8px
-
-    .content_img
-      width: 16px
-      height: 16px
-    & image
-      background: #4545e5
+    aspect-ratio: 16 / 9
+    object-fit: cover
 </style>

+ 36 - 0
src/pages/pet-manual/components/CardList.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+interface ListItem {
+  img: string
+  title: string
+  desc: string
+  time: string
+}
+const props = defineProps<{
+  cardList: ListItem[]
+}>()
+</script>
+
+<template>
+  <view
+    v-for="(item, index) in props.cardList" :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>
+</template>
+
+<style scoped>
+
+</style>

+ 90 - 49
src/pages/pet-manual/index.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
+import carousalApi from '@/api/carousal'
+import CardList from '@/pages/pet-manual/components/CardList.vue'
 // 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'
+import ToolApi from '@/utils'
 
 interface ListItem {
   img: string
@@ -69,7 +71,7 @@ const listModel = ref<ListItem[]>([
     time: '2025年1月1日',
   },
 ])
-const safeHeight = getSafeHeight()
+const safeHeight = ToolApi.getSafeHeight()
 const searchValue = ref<string>('')
 
 const info = ref<Item[]>([
@@ -102,6 +104,27 @@ function handleClickType(item: TypeItem) {
   typeList.value.forEach(i => (i.isClick = false))
   item.isClick = true
 }
+const isSearch = ref<boolean>(true)
+function handleSearchFocus() {
+  isSearch.value = false
+}
+function handleCancel() {
+  isSearch.value = true
+}
+const historyList = ref<{ name: string }[]>([
+  { name: '猫' },
+  { name: '狗' },
+  { name: '烘培粮' },
+])
+
+const findList = ref<{ name: string }[]>([
+  { name: '宠物吃饭慢' },
+  { name: '猫咪尿闭怎么办' },
+])
+function onLoad() {
+  carousalApi.getCarousalList()
+}
+onLoad()
 </script>
 
 <template>
@@ -110,61 +133,79 @@ function handleClickType(item: TypeItem) {
   <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"
+        v-model="searchValue"
+        placeholder="请搜索你想要的内容"
+        bg-color="white" clear-button="auto"
+        :cancel-button="isSearch ? 'none' : 'always'"
+        :radius="20"
+        @focus="handleSearchFocus"
+        @cancel="handleCancel"
       />
     </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 v-show="!isSearch" class="mx-4 mt-4">
+      <view>
+        <text class="text-[18px] font-600">
+          历史记录
+        </text>
+        <view class="mt-4 flex gap-2 flex-wrap text-[12px] text-[#999] font-400 leading-5">
+          <view v-for="(item, index) in historyList" :key="index" class="px-2 py-0.5 flex justify-center items-center bg-[white] rounded-sm">
+            {{ item.name }}
+          </view>
+        </view>
+        <view class="mt-8">
+          <text class="text-[18px] font-600">
+            搜索发现
+          </text>
+          <view class="mt-4 flex gap-2 flex-wrap text-[12px] text-[#999] font-400 leading-5">
+            <view v-for="(item, index) in findList" :key="index" class="px-2 py-0.5 flex justify-center items-center bg-[white] rounded-sm gap-1">
+              <view class="flex items-center justify-center">
+                <uni-icons color="#999999" size="14" type="search" />
+              </view>
+              <view class="flex items-center justify-center">
+                {{ item.name }}
+              </view>
             </view>
           </view>
         </view>
-      </scroll-view>
+      </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 v-show="isSearch">
+      <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>
-        </view>
+        </scroll-view>
       </view>
+      <CardList :card-list="listModel" />
     </view>
   </view>
 </template>

+ 3 - 2
src/uni-pages.d.ts

@@ -9,12 +9,13 @@ interface NavigateToOptions {
        "/pages/me/index" |
        "/pages/pet-manual/index" |
        "/pages/setting/index" |
-       "/pages/userInfo/index";
+       "/pages/userInfo/index" |
+       "/pages/pet-manual/components/CardList";
 }
 interface RedirectToOptions extends NavigateToOptions {}
 
 interface SwitchTabOptions {
-  
+
 }
 
 type ReLaunchOptions = NavigateToOptions | SwitchTabOptions;

+ 1 - 1
src/utils/index.ts

@@ -5,6 +5,6 @@ function getSafeHeight(): number {
   return safeAreaInsetBottom + menuButtonInfoHeight
 }
 
-export {
+export default {
   getSafeHeight,
 }

+ 12 - 2
vite.config.ts

@@ -8,13 +8,14 @@ import postcssPresetEnv from 'postcss-preset-env'
 import tailwindcss from 'tailwindcss'
 import nested from 'tailwindcss/nesting'
 import AutoImport from 'unplugin-auto-import/vite'
-import { defineConfig } from 'vite'
+import { defineConfig, loadEnv } from 'vite'
 import tailwindcssConfig from './tailwind.config' // 注意匹配实际文件
 
 // 注意匹配实际文件
 
 // https://vitejs.dev/config/
-export default async () => {
+export default async ({ command, mode }) => {
+  const env = loadEnv(mode, process.cwd(), '')
   return defineConfig({
     css: {
       postcss: {
@@ -30,6 +31,15 @@ export default async () => {
         ],
       },
     },
+    server: {
+      proxy: {
+        '/api': {
+          target: env.VITE_PROXY_ENDPOINT,
+          changeOrigin: true,
+          rewrite: path => path.replace(/^\/api/, ''),
+        },
+      },
+    },
     plugins: [
       // https://github.com/uni-helper/vite-plugin-uni-manifest
       UniHelperManifest(),