feat: 我的订单 认养圈 首页

src/adoptionManage/crabList/index.tsx

@@ -8,6 +8,7 @@ import NoData from "../../components/NoData";
 
 // 蟹塘列表
 export default function CrabList() {
+  const [img, setImg] = useState<string>('')
   const [dataList, setDataList] = useState<Array<any>>([
     {
       id: '1',
@@ -30,7 +31,7 @@ export default function CrabList() {
         {
           dataList.map(item => (
             <View className="flex items-center bg-white py-4 px-5 shadow-md rounded-xl mb-2" key={item.id}>
-              <Image src={item.img} className="w-[100px] h-[100px] bg-slate-300" mode="aspectFill" />
+              <Image src={img} className="w-[100px] h-[100px] bg-slate-300" mode="aspectFill" />
               <View className="grow px-3">
                 <View>{item.name}</View>
                 <View className="flex mt-2">

src/app.config.ts

@@ -2,7 +2,8 @@ export default defineAppConfig({
   lazyCodeLoading: 'requiredComponents',
   pages: [
     'pages/login/index',
-    'pages/index/index'
+    'pages/index/index',
+    "pages/adoptionCircle/index"
   ],
   subPackages: [
     {
@@ -25,6 +26,13 @@ export default defineAppConfig({
         'adoptionRule/index',
         'crabList/index'
       ]
+    },
+    {
+      root: 'pageMe',
+      pages: [
+        "myOrder/index",
+        "pickCard/index"
+      ]
     }
   ],
   window: {

src/config.ts

@@ -2,7 +2,7 @@ import Taro from "@tarojs/taro"
 
 export const BASE_URL = 'http://127.0.0.1:3000'
 
-const { statusBarHeight = 0, screenHeight } = Taro.getSystemInfoSync()
+const { statusBarHeight = 0, screenHeight, screenWidth } = Taro.getSystemInfoSync()
 // 获取胶囊信息
 const { height, top } = Taro.getMenuButtonBoundingClientRect()
 // 计算顶部导航栏高度
@@ -13,3 +13,5 @@ const APP_NAV_HEIGHT = statusBarHeight + APP_TITLE_HEIGHT
 //去掉顶部导航栏，屏幕剩余的高度
 export const APP_FULL_HEIGHT = screenHeight - APP_NAV_HEIGHT
 
+export const APP_FULL_WIDTH = screenWidth
+    

src/pageMe/myOrder/index.tsx

@@ -0,0 +1,29 @@
+import { View, ScrollView } from "@tarojs/components";
+import { APP_FULL_HEIGHT } from "../../config";
+import HeaderNation from "../../components/HeaderNation";
+import OuterFrame from "../../components/OuterFrame";
+import StatusBar from "../../components/StatusBar";
+
+export default function MyOrder() {
+  return (
+    <OuterFrame>
+      <StatusBar />
+      <HeaderNation title="我的订单" />
+      <ScrollView
+        type="nested"
+        scrollY
+        style={{
+          height: APP_FULL_HEIGHT + 'px',
+          backgroundColor: '#f5f5f5'
+        }}
+        className="pb-1 box-border overflow-hidden box-border"
+      >
+        <View className="p-3">
+          <View className="bg-white p-4 px-5 shadow-md rounded-md">
+            <View className="flex justify-between items-center"></View>
+          </View>
+        </View>
+      </ScrollView>
+    </OuterFrame>
+  )
+}

src/pageMe/pickCard/index.scss

@@ -0,0 +1,14 @@
+.selected-tab {
+  color: #1B7900;
+  position: relative;
+}
+
+.selected-tab::after {
+  content: '';
+  width: 4rem;
+  height: 4px;
+  position: absolute;
+  background-color: #1B7900;
+  bottom: -20px;
+  left: calc(50% - 2rem);
+}

src/pageMe/pickCard/index.tsx

@@ -0,0 +1,45 @@
+import HeaderNation from "../../components/HeaderNation";
+import OuterFrame from "../../components/OuterFrame";
+import StatusBar from "../../components/StatusBar";
+import { View, ScrollView } from "@tarojs/components";
+import { useState } from "react";
+import { APP_FULL_HEIGHT } from "../../config";
+import './index.scss'
+
+export default function PickCard() {
+  const bottomNavBarHeight = 50
+  const [activedTab, setActivedTab] = useState<string>('unuse')
+  return (
+    <OuterFrame>
+      <StatusBar />
+      <HeaderNation title="提货卡" />
+      <View
+        style={{ height: bottomNavBarHeight + 'px' }}
+        className="bg-[#fff] p-2 flex items-start pt-3 justify-evenly w-full"
+      >
+        <View
+          className={`w-[50%] text-center ${activedTab === 'unuse' ? 'selected-tab' : ''}`}
+          onClick={() => setActivedTab('unuse')}
+        >未使用(2)</View>
+        <View
+          className={`w-[50%] text-center ${activedTab === 'used' ? 'selected-tab' : ''}`}
+          onClick={() => setActivedTab('used')}
+        >已使用(3)</View>
+      </View>
+      <ScrollView
+        type="nested"
+        scrollY
+        style={{
+          height: (APP_FULL_HEIGHT - bottomNavBarHeight) + 'px',
+          backgroundColor: '#f5f5f5'
+        }}
+        className="pb-1 box-border overflow-hidden box-border"
+      >
+        <View className="p-3">
+          <View className="bg-white p-4 px-5 shadow-md rounded-md">
+          </View>
+        </View>
+      </ScrollView>
+    </OuterFrame>
+  )
+}

src/pages/adoptionCircle/index.scss

@@ -0,0 +1,5 @@
+.linear-title {
+  background-image: linear-gradient(to top, #e7f3d8, #fff);
+  -webkit-background-clip: text;
+  color: transparent;
+}

src/pages/adoptionCircle/index.tsx

@@ -0,0 +1,49 @@
+import { View, ScrollView, Image, Text } from "@tarojs/components";
+import { APP_FULL_HEIGHT } from "../../config";
+import HeaderNation from "../../components/HeaderNation";
+import OuterFrame from "../../components/OuterFrame";
+import StatusBar from "../../components/StatusBar";
+import imgBg from './assets/bg.png'
+import Taro from "@tarojs/taro"
+import './index.scss'
+
+export default function AdoptionCircle() {
+  return (
+    <OuterFrame>
+      <StatusBar />
+      <HeaderNation title="认养圈" />
+      <ScrollView
+        type="nested"
+        scrollY
+        style={{
+          height: (APP_FULL_HEIGHT) + 'px',
+          backgroundColor: '#194717'
+        }}
+        className="pb-1 box-border overflow-hidden box-border relative"
+      >
+        <Image src={imgBg} className="w-full h-full absolute" mode="scaleToFill" />
+        <View className="w-full absolute z-99 px-3 h-full flex flex-col">
+          <View className="w-full flex flex-col items-center pt-8 pb-5">
+            <Text className="text-[30px] linear-title font-bold">2024高山大闸蟹认养计划</Text>
+            <Text className="text-[50px] linear-title font-bold">邀您成为蟹塘主</Text>
+          </View>
+          <View className="p-3 w-full bg-white box-border text-[25px] grow">
+            <View className="text-[27px] p-3">蟹塘主们</View>
+            <View className="bg-[#f2fbeb] rounded-md p-3 px-5 flex items-center justify-between">
+              <View className="text-[#5D8D4F]">邀请好友认养，提升好人缘！</View>
+              <View className="bg-[#5ec45f] p-[13px] px-4 rounded-full text-white">分享</View>
+            </View>
+          </View>
+          <View className="h-[180px] bg-red flex justify-center">
+            <View
+              className="mt-[35px] h-[3rem] w-[80%] bg-[#5ec45f] rounded-full flex justify-center items-center text-white"
+              onClick={() => {
+                Taro.redirectTo({ url: '/pagesHome/index?tab=adoption' })
+              }}
+            >我要认养</View>
+          </View>
+        </View>
+      </ScrollView>
+    </OuterFrame>
+  )
+}

src/pagesHome/adoption.tsx

@@ -18,6 +18,8 @@ const CrabListBtn = () => {
 
 export default function Adoption() {
   return (
-    <View>Adoption</View>
+    <View className="relative">
+      <CrabListBtn />
+    </View>
   )
 }

src/pagesHome/home.tsx

@@ -1,18 +1,20 @@
 import { View, Image, PageContainer, Text } from "@tarojs/components";
 import { useState } from "react";
+import { APP_FULL_WIDTH } from "../config";
 import homeBg from './assets/homeBg.png'
+import homeBigBg from './assets/homeBigBg.png'
 
 export default function Home(props) {
   const { onAdoption } = props
   const [showContainer, setShowContainer] = useState<boolean>(false)
   return (
-    <View className="h-full relative overflow-hidden bg-[#142841]">
+    <View className="h-full relative bg-[#142841]">
       <Image
-        src={homeBg}
+        src={homeBigBg}
         className="w-full"
-        mode="widthFix"
+        style={{ height: APP_FULL_WIDTH * 4.1 }}
       />
-      <View className="w-full flex justify-center items-center absolute bottom-2 text-white">
+      <View className="w-full flex justify-center items-center absolute bottom-2 text-white hidden">
         <View onClick={() => onAdoption()} className="!py-[27px] primary-btn w-[90%]">我要认养</View>
       </View>
       <PageContainer

src/pagesHome/index.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react'
-import Taro from "@tarojs/taro"
+import Taro, { getCurrentInstance } from "@tarojs/taro"
 import { View, ScrollView, Image, Text } from '@tarojs/components'
 import {
   APP_FULL_HEIGHT,
@@ -32,6 +32,9 @@ export default function HomeLayout() {
   const bottomNavBarHeight = 75
 
   const [activedTab, setActivedTab] = useState<string>('home')
+  
+  const { router } = getCurrentInstance()
+  useEffect(() => { if (router && router.params && router.params.tab) setActivedTab(router.params.tab) }, [])
   const getCurrentTitle = (id:string) => {
     return id === 'home' ? '首页' : id === 'adoption' ? '认养' : id === 'monitor' ? '生长监控' : '我的'
   }
@@ -82,13 +85,13 @@ export default function HomeLayout() {
       <View className='index relative'>
         <View style={{
           height: APP_HEAD_HEIGHT + 'px',
-          backgroundColor: applyOpacityColor(headerOpacity, '#e8d1ac')
+          backgroundColor: '#fff'
         }}></View>
         <HeaderNation
           title={
             getCurrentTitle(activedTab)
           }
-          background={applyOpacityColor(headerOpacity, '#08d1ac')}
+          background="#fff"
         ></HeaderNation>
         <ScrollView
           type="nested"