feat: frame init

src/adoptionManage/adoptionRule/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/adoptionManage/adoptionRule/index.tsx

@@ -0,0 +1,48 @@
+import StatusBar from "../../components/StatusBar";
+import HeaderNation from "../../components/HeaderNation";
+import OuterFrame from "../../components/OuterFrame";
+import { View, ScrollView } from "@tarojs/components";
+import { APP_FULL_HEIGHT } from "../../config";
+import './index.scss'
+import { useState } from "react";
+
+export default function AdoptionRule() {
+  const bottomNavBarHeight = 50
+  const [activedTab, setActivedTab] = useState<string>('zhi')
+  return (
+    <OuterFrame>
+      <StatusBar />
+      <HeaderNation title="认养规则"></HeaderNation>
+      <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 === 'zhi' ? 'selected-tab' : ''}`}
+          onClick={() => setActivedTab('zhi')}
+        >按只认养</View>
+        <View
+          className={`w-[50%] text-center ${activedTab === 'mu' ? 'selected-tab' : ''}`}
+          onClick={() => setActivedTab('mu')}
+        >按亩认养</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">
+            <View className="text-[30px]">1、认养价格</View>
+            <View className="text-[28px]">公螃蟹35一只，木螃蟹29一只  </View>
+          </View>
+        </View>
+      </ScrollView>
+      
+    </OuterFrame>
+  )
+}

src/app.config.ts

@@ -4,12 +4,28 @@ export default defineAppConfig({
     'pages/login/index',
     'pages/index/index'
   ],
-  // subPackages: [
-  //   {
-  //     root: 'pagesHome',
-  //     pages: []
-  //   }
-  // ],
+  subPackages: [
+    {
+      root: 'pagesHome/',
+      pages: [
+        'index'
+      ]
+    },
+    {
+      root: 'userInfo/',
+      pages: [
+        "address/index",
+        "addAddress/index",
+        "confirmOrder/index"
+      ]
+    },
+    {
+      root: 'adoptionManage/',
+      pages: [
+        'adoptionRule/index'
+      ]
+    }
+  ],
   window: {
     backgroundTextStyle: 'light',
     navigationBarBackgroundColor: '#0fc87c',

src/app.scss

@@ -1,3 +1,20 @@
 @import 'tailwindcss/base';
 @import 'tailwindcss/components';
 @import 'tailwindcss/utilities';
+
+.primary-btn {
+  padding: 16px 0;
+  border-radius: 9999px;
+  text-align: center;
+  color: white;
+  background: linear-gradient(to right, #56bf2d, #9fe448);
+}
+
+.default-btn {
+  padding: 16px 0;
+  border-radius: 9999px;
+  background: white;
+  text-align: center;
+  color: #56bf2d;
+  border: 1px solid #8dd471;
+}

src/components/HeaderNation/index.tsx

@@ -1,6 +1,7 @@
-import { View } from "@tarojs/components"
+import { View, Image } from "@tarojs/components"
 import { APP_TITLE_HEIGHT } from "../../config";
 import Taro from "@tarojs/taro";
+import Arrow from './arrow.png'
 
 const HeaderNation = (props) => {
   const { title = '', height = APP_TITLE_HEIGHT, background = 'white' } = props
@@ -11,7 +12,7 @@ const HeaderNation = (props) => {
       style={{ height, background }}
     >
       <View className="w-[4rem]">
-        { showBack ? '返回' : 'X' }
+        { showBack ? '' : <Image src={Arrow} className="w-[15px] h-[23px]" /> }
       </View>
       <View>{ title }</View>
       <View className="w-[4rem]"></View>

src/components/OuterFrame/index.tsx

@@ -7,7 +7,7 @@ const OuterFrame = ({ children }) => {
       className="overflow-hidden w-full h-[100vh] relative"
       onTouchMove={(e) => { e.stopPropagation() }}
     >
-      <Image src={Img} className="absolute top-0 w-full z-[-1]"></Image>
+      <Image src={Img} className="absolute top-0 w-full z-[-1] hidden"></Image>
       { children }
     </View>
   )

src/components/StatusBar/index.tsx

@@ -0,0 +1,10 @@
+import { View } from "@tarojs/components";
+import { APP_HEAD_HEIGHT } from "../../config";
+
+export default function StatusBar() {
+  return (
+    <View style={{
+      height: APP_HEAD_HEIGHT + 'px'
+    }}></View>
+  )
+}

src/pages/index/index.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react'
+import Taro from "@tarojs/taro"
 import { View, ScrollView } from '@tarojs/components'
 import './index.scss'
 import { APP_FULL_HEIGHT, APP_HEAD_HEIGHT } from '../../config'
@@ -20,9 +21,11 @@ const Index = () => {
 
   const [dataList, setDataList] = useState<Array<any>>([])
   const getDataList = async () => {
-    const { data, error } = await supabase.from("custom").select("*")
-    console.log("RES", data);
-    if (Array.isArray(data)) setDataList(data)
+    Taro.showLoading({ title: '加载中...' })
+    // const { data, error } = await supabase.from("baseInfo").select("*")
+    Taro.hideLoading()
+    // console.log("RES", data);
+    // if (Array.isArray(data)) setDataList(data)
   }
   useEffect(() => {
     getDataList()

src/pages/login/index.tsx

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

src/pagesHome/adoption.tsx

@@ -0,0 +1,7 @@
+import { View } from "@tarojs/components";
+
+export default function Adoption() {
+  return (
+    <View>Adoption</View>
+  )
+}

src/pagesHome/home.tsx

@@ -0,0 +1,29 @@
+import { View, Image, PageContainer, Text } from "@tarojs/components";
+import { useState } from "react";
+import homeBg from './assets/homeBg.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]">
+      <Image
+        src={homeBg}
+        className="w-full"
+        mode="widthFix"
+      />
+      <View className="w-full flex justify-center items-center absolute bottom-2 text-white">
+        <View onClick={() => onAdoption()} className="!py-[27px] primary-btn w-[90%]">我要认养</View>
+      </View>
+      <PageContainer
+        show={showContainer}
+        round={true}
+        onAfterLeave={() => setShowContainer(false)}
+      >
+        <View className="p-5 pb-[40px]">
+          <Text>设置你的头像和昵称</Text>
+        </View>
+      </PageContainer>
+    </View>
+  )
+}

src/pagesHome/index.config.ts

@@ -0,0 +1,4 @@
+export default definePageConfig({
+  navigationBarTitleText: '首页',
+  disableScroll: true
+})

src/pagesHome/index.tsx

@@ -0,0 +1,137 @@
+import { useEffect, useState } from 'react'
+import Taro from "@tarojs/taro"
+import { View, ScrollView, Image, Text } from '@tarojs/components'
+import { APP_FULL_HEIGHT, APP_HEAD_HEIGHT } from '../config'
+import OuterFrame from '../components/OuterFrame'
+import HeaderNation from '../components/HeaderNation'
+import { supabase } from '../api/supabaseClient'
+import home from './assets/home.png'
+import homeActived from './assets/homeActived.png'
+import me from './assets/me.png'
+import meActived from './assets/meActived.png'
+import monitor from './assets/monitor.png'
+import monitorActived from './assets/monitorActived.png'
+import adoption from './assets/adoption.png'
+import adoptionActived from './assets/adoptionActived.png'
+import Home from './home'
+import Adoption from './adoption'
+import Monitor from './monitor'
+import Me from './me'
+
+export default function HomeLayout() {
+  const [headerOpacity, setHeaderOpacity] = useState(0)
+  const applyOpacityColor = (opacity:number = 0, baseColor:string = '#000000') => {
+    if (opacity > 1) opacity = 1
+    const stringNum = parseInt((opacity * 255).toFixed(0)).toString(16)
+    return baseColor + stringNum
+  }
+
+  const bottomNavBarHeight = 75
+
+  const [activedTab, setActivedTab] = useState<string>('home')
+  const getCurrentTitle = (id:string) => {
+    return id === 'home' ? '首页' : id === 'adoption' ? '认养' : id === 'monitor' ? '生长监控' : '我的'
+  }
+  const tabArr = [
+    {
+      id: 'home',
+      label: '首页',
+      icon: home,
+      activedIcon: homeActived,
+      component: Home
+    },
+    {
+      id: 'adoption',
+      label: '认养',
+      icon: adoption,
+      activedIcon: adoptionActived,
+      component: Adoption
+    },
+    {
+      id: 'monitor',
+      label: '生长监控',
+      icon: monitor,
+      activedIcon: monitorActived,
+      component: Monitor
+    },
+    {
+      id: 'me',
+      label: '我的',
+      icon: me,
+      activedIcon: meActived,
+      component: Me
+    },
+  ]
+
+  const [dataList, setDataList] = useState<Array<any>>([])
+  const getDataList = async () => {
+    Taro.showLoading({ title: '加载中...' })
+    const { data, error } = await supabase.from("baseInfo").select("*")
+    Taro.hideLoading()
+    console.log("RES", data);
+    if (Array.isArray(data)) setDataList(data)
+  }
+  useEffect(() => {
+    getDataList()
+  }, [])
+  return (
+    <OuterFrame>
+      <View className='index'>
+        <View style={{
+          height: APP_HEAD_HEIGHT + 'px',
+          backgroundColor: applyOpacityColor(headerOpacity, '#e8d1ac')
+        }}></View>
+        <HeaderNation
+          title={
+            getCurrentTitle(activedTab)
+          }
+          background={applyOpacityColor(headerOpacity, '#08d1ac')}
+        ></HeaderNation>
+        <ScrollView
+          type="nested"
+          scrollY
+          style={{
+            height: (APP_FULL_HEIGHT - bottomNavBarHeight) + 'px',
+            backgroundColor: '#14141414'
+          }}
+          className="pb-1 box-border overflow-hidden box-border"
+          onScroll={(e) => {
+            setHeaderOpacity((e.target as any).scrollTop / 150)
+          }}
+        >
+          {
+            activedTab === 'home'
+            ? <Home onAdoption={() => setActivedTab('adoption')} />
+            : activedTab === 'adoption'
+            ? <Adoption />
+            : activedTab === 'monitor'
+            ? <Monitor /> : <Me />
+          }
+        </ScrollView>
+        <View
+          className="w-full text-white flex items-start justify-evenly pt-3 box-border text-[#8f6927]"
+          style={{
+            backgroundColor: '#fffbf2',
+            color: '#252525',
+            height: `${bottomNavBarHeight}px`
+          }}
+        >
+          {
+            tabArr.map(item => (
+              <View
+                className="flex flex-col items-center"
+                key={item.id}
+                onClick={() => setActivedTab(item.id)}
+              >
+                <Image src={
+                  activedTab === item.id ? item.activedIcon : item.icon
+                } className="w-[48px] h-[48px]" />
+                <Text className="text-[18px] text-[#a0a5b0] pt-[8px]">{ item.label }</Text>
+              </View>
+            ))
+          }
+        </View>
+      </View>
+    </OuterFrame>
+  )
+}

src/pagesHome/me.tsx

@@ -0,0 +1,7 @@
+import { View } from "@tarojs/components";
+
+export default function Me() {
+  return (
+    <View>Me</View>
+  )
+}

src/pagesHome/monitor.tsx

@@ -0,0 +1,7 @@
+import { View } from "@tarojs/components";
+
+export default function Monitor() {
+  return (
+    <View>Monitor</View>
+  )
+}

src/userInfo/addAddress/index.tsx

@@ -0,0 +1,73 @@
+import StatusBar from "../../components/StatusBar";
+import HeaderNation from "../../components/HeaderNation";
+import OuterFrame from "../../components/OuterFrame";
+import { View, ScrollView, Picker, Text, Input, Switch } from "@tarojs/components";
+import { APP_FULL_HEIGHT } from "../../config";
+import { useState } from "react";
+
+export default function AddAddress() {
+  const bottomNavBarHeight = 86
+  const Divider = () => {
+    return (
+      <View className="bg-[#25252525] w-[calc(100% - 8px)] ml-[4px] h-[1px] my-1"></View>
+    )
+  }
+
+  const [regionSelected, setRegionSelected] = useState<any>()
+  return (
+    <OuterFrame>
+      <StatusBar />
+      <HeaderNation title="新增收货地址"></HeaderNation>
+      <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-3 rounded-xl shadow-md">
+            <View className="flex justify-between items-center p-2">
+              <Text>收货人</Text>
+              <Input placeholder="请输入收货人姓名" placeholderClass="text-right"></Input>
+            </View>
+            <Divider />
+            <View className="flex justify-between items-center p-2">
+              <Text>手机号</Text>
+              <Input placeholder="请输入收货人手机号" placeholderClass="text-right"></Input>
+            </View>
+            <Divider />
+            <View className="flex justify-between items-center p-2">
+              <Text>所在地区</Text>
+              <Picker mode='region' value={regionSelected} onChange={(e) => {
+                console.log("onChange", e);
+                const regionArr = (e.target as any).value
+                setRegionSelected(regionArr.join('/'))
+              }}>
+                <Input value={regionSelected} className='area' placeholder='请选择就业地区' placeholderClass="text-right" />
+              </Picker>
+            </View>
+            <Divider />
+            <View className="flex justify-between items-center p-2">
+              <Text>详细地址</Text>
+              <Input placeholder="请输入详细地址" placeholderClass="text-right"></Input>
+            </View>
+            <Divider />
+            <View className="flex justify-between items-center p-2">
+              <Text>设为默认</Text>
+              <Switch checked={false} />
+            </View>
+          </View>
+        </View>
+      </ScrollView>
+      <View
+        style={{ height: bottomNavBarHeight + 'px' }}
+        className="bg-[#f5f5f5] p-2 flex items-start pt-3 justify-evenly w-full"
+      >
+        <View className="!py-[26px] primary-btn w-[85%]">保存并使用</View>
+      </View>
+    </OuterFrame>
+  )
+}

src/userInfo/address/index.tsx

@@ -0,0 +1,50 @@
+import StatusBar from "../../components/StatusBar";
+import HeaderNation from "../../components/HeaderNation";
+import OuterFrame from "../../components/OuterFrame";
+import { View, ScrollView, Image } from "@tarojs/components";
+import { APP_FULL_HEIGHT } from "../../config";
+import noData from './assets/noData.png'
+import { useState } from "react";
+
+export default function Address() {
+  const bottomNavBarHeight = 80
+  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]" />
+        <View className="mt-1 text-[#999999]">暂无收货地址</View>
+      </View>
+    )
+  }
+
+  const [addressList, setAddressList] = useState<Array<any>>([])
+  return (
+    <OuterFrame>
+      <StatusBar />
+      <HeaderNation title="收货地址"></HeaderNation>
+      <ScrollView
+        type="nested"
+        scrollY
+        style={{
+          height: (APP_FULL_HEIGHT - bottomNavBarHeight) + 'px',
+          backgroundColor: '#f5f5f5'
+        }}
+        className="pb-1 box-border overflow-hidden box-border"
+      >
+        {
+          addressList.length === 0 ? <NoData />
+          : addressList.map(item => (
+            <View>{item.id}</View>
+          ))
+        }
+      </ScrollView>
+      <View
+        style={{ height: bottomNavBarHeight + 'px' }}
+        className="bg-[#f5f5f5] p-2 flex items-start pt-3 justify-evenly w-full"
+      >
+        <View className="default-btn w-[45%]">导入微信地址</View>
+        <View className="primary-btn w-[45%]">新增收货地址</View>
+      </View>
+    </OuterFrame>
+  )
+}

src/userInfo/confirmOrder/index.tsx

@@ -0,0 +1,59 @@
+import StatusBar from "../../components/StatusBar";
+import HeaderNation from "../../components/HeaderNation";
+import OuterFrame from "../../components/OuterFrame";
+import { View, ScrollView, Image, Text, Input, Switch } from "@tarojs/components";
+import { APP_FULL_HEIGHT } from "../../config";
+import { useState } from "react";
+import arrow from './assets/arrow.png'
+
+export default function ConfirmOrder() {
+  const bottomNavBarHeight = 130
+  // 倒计时
+  const [leftTime, setLeftTime] = useState(100)
+  const Divider = () => {
+    return (
+      <View className="bg-[#25252525] w-[calc(100% - 8px)] ml-[4px] h-[1px] my-1"></View>
+    )
+  }
+
+  const [regionSelected, setRegionSelected] = useState<any>()
+  return (
+    <OuterFrame>
+      <StatusBar />
+      <HeaderNation title="确认订单"></HeaderNation>
+      <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 flex items-center rounded-xl shadow-md">
+            <View className="grow">
+              <View className="text-[30px]">大鲨鱼 1855262222</View>
+              <View className="text-[26px] mt-1">这是一个地址</View>
+            </View>
+            <Image src={arrow} className="w-[14px] h-[20px]" />
+          </View>
+          <View className="bg-white p-3 mt-2">
+            <View>大鲨鱼 1855262222</View>
+            <View>这是一个地址</View>
+          </View>
+        </View>
+      </ScrollView>
+      <View
+        style={{ height: bottomNavBarHeight + 'px' }}
+        className="bg-white p-2 flex flex-col justify-start items-center pt-1 w-full"
+      >
+        <View className="py-2">
+          <Text>倒计时:</Text>
+          <Text className="pl-1">{leftTime}</Text>
+        </View>
+        <View className="!py-[26px] primary-btn w-[85%]">去支付</View>
+      </View>
+    </OuterFrame>
+  )
+}