feat: 我的订单 认养圈 首页

src/adoptionManage/adoptionRule/index.tsx

@@ -36,7 +36,7 @@ export default function AdoptionRule() {
         className="pb-1 box-border overflow-hidden box-border"
       >
         <View className="p-3">
-          <View className="bg-white p-4 px-5">
+          <View className="bg-white p-4 px-5 shadow-md rounded-md">
             <View className="text-[30px]">1、认养价格</View>
             <View className="text-[28px]">公螃蟹35一只，木螃蟹29一只  </View>
           </View>

src/adoptionManage/crabList/index.tsx

@@ -0,0 +1,73 @@
+import { View, ScrollView, Image, Progress, Text } from "@tarojs/components";
+import HeaderNation from "../../components/HeaderNation";
+import StatusBar from "../../components/StatusBar";
+import OuterFrame from "../../components/OuterFrame";
+import { APP_FULL_HEIGHT } from "../../config";
+import { useState } from "react";
+import NoData from "../../components/NoData";
+
+// 蟹塘列表
+export default function CrabList() {
+  const [img, setImg] = useState<string>('')
+  const [dataList, setDataList] = useState<Array<any>>([
+    {
+      id: '1',
+      img: '',
+      name: '1号蟹塘',
+      price: '29.9元',
+      adoption: 21
+    },
+    {
+      id: '2',
+      img: '',
+      name: '1号蟹塘',
+      price: '29.9元',
+      adoption: 21
+    },
+  ])
+  const CrabItemsWrapper = () => {
+    return (
+      <View className="p-3">
+        {
+          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={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">
+                  <Progress percent={item.adoption} strokeWidth={8} showInfo active activeColor='#76cc3b' className="w-[200px]"></Progress>
+                  <Text className="pl-1">已认养</Text>
+                </View>
+              </View>
+              <View className="flex flex-col items-end">
+                <View className="text-[#1B7900]">{item.price}</View>
+                <View className="primary-btn !p-1 !px-3 text-[22px] mt-2">立即认养</View>
+              </View>
+            </View>
+          ))
+        }
+      </View>
+    )
+  }
+  return (
+    <OuterFrame>
+      <StatusBar />
+      <HeaderNation title="蟹塘列表"></HeaderNation>
+      <ScrollView
+        type="nested"
+        scrollY
+        style={{
+          height: APP_FULL_HEIGHT + 'px',
+          backgroundColor: '#f5f5f5'
+        }}
+        className="pb-1 box-border overflow-hidden box-border"
+      >
+        {
+          dataList.length === 0
+            ? <NoData info="暂无蟹塘"></NoData>
+            : <CrabItemsWrapper />
+        }
+      </ScrollView>
+    </OuterFrame>
+  )
+}

src/api/supabaseClient.ts

@@ -1,5 +1,5 @@
 import { createClient } from 'supabase-wechat-stable-v2'
 
 const SUPABASE_URL:string = 'https://cprtmla5g6h8gtmd6cc0.baseapi.memfiredb.com';
-const SUPABASE_KEY:string = ''
+const SUPABASE_KEY:string = 'AAA'
 export const supabase = createClient(SUPABASE_URL, SUPABASE_KEY)

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: [
     {
@@ -22,7 +23,15 @@ export default defineAppConfig({
     {
       root: 'adoptionManage/',
       pages: [
-        'adoptionRule/index'
+        'adoptionRule/index',
+        'crabList/index'
+      ]
+    },
+    {
+      root: 'pageMe',
+      pages: [
+        "myOrder/index",
+        "pickCard/index"
       ]
     }
   ],

src/components/HeaderNation/index.tsx

@@ -5,14 +5,16 @@ import Arrow from './arrow.png'
 
 const HeaderNation = (props) => {
   const { title = '', height = APP_TITLE_HEIGHT, background = 'white' } = props
-  const showBack = Taro.getCurrentPages().length > 1
+  const hiddenBack = Taro.getCurrentPages().length === 1
   return (
     <View
       className="w-full flex justify-between items-center px-3 relative z-[3]"
       style={{ height, background }}
     >
       <View className="w-[4rem]">
-        { showBack ? '' : <Image src={Arrow} className="w-[15px] h-[23px]" /> }
+        { hiddenBack ? '' : <Image src={Arrow} className="w-[15px] h-[23px]" onClick={() => {
+          Taro.navigateBack()
+        }} /> }
       </View>
       <View>{ title }</View>
       <View className="w-[4rem]"></View>

src/components/NoData/index.tsx

@@ -0,0 +1,12 @@
+import { View, Image } from "@tarojs/components";
+import noData from './noData.png'
+
+export default function NoData(props) {
+  const { info = '暂无数据' } = props
+  return (
+    <View className="flex flex-col items-center bg-white m-3 p-5 py-10 rounded-xl shadow-md">
+      <Image src={noData} className="w-[260px] h-[180px]" />
+      <View className="mt-1 text-[#999999]">{ info }</View>
+    </View>
+  )
+}

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()
 // 计算顶部导航栏高度
@@ -12,4 +12,6 @@ export const APP_HEAD_HEIGHT = statusBarHeight
 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/pages/login/index.tsx

@@ -5,7 +5,7 @@ import { supabase } from "../../api/supabaseClient"
 
 const Login = () => {
   const checkUserStatus = async () => {
-    Taro.navigateTo({ url: '/pagesHome/index' })
+    Taro.redirectTo({ url: '/pagesHome/index' })
     return
     const { data, error } = await supabase.auth.getSession()
     console.log("data", data);

src/pagesHome/adoption.tsx

@@ -1,7 +1,25 @@
-import { View } from "@tarojs/components";
+import { View ,Image } from "@tarojs/components";
+import Taro from "@tarojs/taro";
+import listIcon from './assets/listIcon.png'
+
+const CrabListBtn = () => {
+  return (
+    <View
+      className={`absolute z-99 right-[-10px] top-[18px] primary-btn flex items-center !py-1 !px-3 !pr-[22px]`}
+      onClick={() => {
+        Taro.navigateTo({ url: '/adoptionManage/crabList/index' })
+      }}
+    >
+      <Image src={listIcon} className="w-[.8rem] h-[.8rem]" />
+      <View className="ml-[.5rem] pb-1">蟹塘列表</View>
+    </View>
+  )
+}
 
 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,7 +1,10 @@
 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, APP_HEAD_HEIGHT } from '../config'
+import {
+  APP_FULL_HEIGHT,
+  APP_HEAD_HEIGHT
+} from '../config'
 import OuterFrame from '../components/OuterFrame'
 import HeaderNation from '../components/HeaderNation'
 import { supabase } from '../api/supabaseClient'
@@ -29,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' ? '生长监控' : '我的'
   }
@@ -76,16 +82,16 @@ export default function HomeLayout() {
   }, [])
   return (
     <OuterFrame>
-      <View className='index'>
+      <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"
@@ -109,7 +115,7 @@ export default function HomeLayout() {
           }
         </ScrollView>
         <View
-          className="w-full text-white flex items-start justify-evenly pt-3 box-border text-[#8f6927]"
+          className="w-full text-white flex items-start justify-evenly pt-1 box-border text-[#8f6927]"
           style={{
             backgroundColor: '#fffbf2',
             color: '#252525',

src/userInfo/address/index.tsx

@@ -11,7 +11,7 @@ export default function Address() {
   const NoData = () => {
     return (
       <View className="flex flex-col items-center bg-white m-3 p-5 py-10 rounded-xl shadow-md">
-        <Image src={noData} className="w-[260px] h-[160px]" />
+        <Image src={noData} className="w-[260px] h-[180px]" />
         <View className="mt-1 text-[#999999]">暂无收货地址</View>
       </View>
     )