feat: 认养成功、我的凭证、我的订单、提货卡、认养圈、我的、新增收货地址、收货地址、

src/adoptionManage/adoptionSuccess/index.tsx

@@ -0,0 +1,24 @@
+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 AdoptionSuccess() {
+  return (
+    <OuterFrame>
+      <StatusBar />
+      <HeaderNation title="认养成功" />
+      <ScrollView
+        type="nested"
+        scrollY
+        style={{
+          height: (APP_FULL_HEIGHT) + 'px',
+          backgroundColor: '#fff'
+        }}
+        className="pb-1 box-border overflow-hidden box-border"
+      >
+      </ScrollView>
+    </OuterFrame>
+  )
+}

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,10 +31,10 @@ 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">
+                <View className="flex mt-2 text-[.8rem] items-center">
                   <Progress percent={item.adoption} strokeWidth={8} showInfo active activeColor='#76cc3b' className="w-[200px]"></Progress>
                   <Text className="pl-1">已认养</Text>
                 </View>

src/app.config.ts

@@ -1,8 +1,13 @@
 export default defineAppConfig({
   lazyCodeLoading: 'requiredComponents',
+  permission: {
+    "scope.chooseAddress": { desc: "获取地址" }
+  },
+  requiredPrivateInfos: ["chooseAddress"],
   pages: [
     'pages/login/index',
-    'pages/index/index'
+    'pages/index/index',
+    "pages/adoptionCircle/index"
   ],
   subPackages: [
     {
@@ -23,7 +28,16 @@ export default defineAppConfig({
       root: 'adoptionManage/',
       pages: [
         'adoptionRule/index',
-        'crabList/index'
+        'crabList/index',
+        "adoptionSuccess/index"
+      ]
+    },
+    {
+      root: 'pageMe',
+      pages: [
+        "myOrder/index",
+        "pickCard/index",
+        "myCertificate/index"
       ]
     }
   ],

src/components/Divider/index.tsx

@@ -0,0 +1,7 @@
+import { View } from "@tarojs/components";
+
+export default function Divider() {
+  return (
+    <View className="bg-[#25252525] w-[calc(100% - 8px)] ml-[4px] h-[1px] my-1"></View>
+  )
+}

src/components/HeaderNation/index.tsx

@@ -11,10 +11,10 @@ const HeaderNation = (props) => {
       className="w-full flex justify-between items-center px-3 relative z-[3]"
       style={{ height, background }}
     >
-      <View className="w-[4rem]">
-        { hiddenBack ? '' : <Image src={Arrow} className="w-[15px] h-[23px]" onClick={() => {
-          Taro.navigateBack()
-        }} /> }
+      <View className="w-[4rem]" onClick={() => {
+        Taro.navigateBack()
+      }}>
+        { hiddenBack ? '' : <Image src={Arrow} className="w-[15px] h-[23px]" /> }
       </View>
       <View>{ title }</View>
       <View className="w-[4rem]"></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/myCertificate/index.tsx

@@ -0,0 +1,31 @@
+import { View, ScrollView, Image } from "@tarojs/components";
+import { APP_FULL_HEIGHT, APP_FULL_WIDTH } from "../../config";
+import HeaderNation from "../../components/HeaderNation";
+import OuterFrame from "../../components/OuterFrame";
+import StatusBar from "../../components/StatusBar";
+import card from './assets/card.png'
+
+export default function MyCertificate() {
+  const bottomNavBarHeight = 80
+  return (
+    <OuterFrame>
+      <StatusBar />
+      <HeaderNation title="我的凭证" />
+      <ScrollView
+        type="nested"
+        scrollY
+        style={{
+          height: (APP_FULL_HEIGHT - bottomNavBarHeight) + 'px',
+          backgroundColor: '#fff'
+        }}
+        className="pb-1 box-border overflow-hidden box-border"
+      >
+        <Image src={card} className="w-full" mode="widthFix" />
+      </ScrollView>
+      <View style={{ height: bottomNavBarHeight + 'px' }} className="flex justify-evenly pt-2">
+        <View className="default-btn w-[45%] h-[2.3rem]">赠送好友</View>
+        <View className="primary-btn w-[45%] h-[2.3rem]">保存并分享</View>
+      </View>
+    </OuterFrame>
+  )
+}

src/pageMe/myOrder/index.tsx

@@ -0,0 +1,42 @@
+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";
+import Divider from "../../components/Divider";
+
+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 py-1 pb-2">
+              <View>认养一亩蟹计划2024季</View>
+              <View className="text-[#fa6642]">待发货</View>
+            </View>
+            <Divider />
+            <View className="flex justify-between items-start py-3">
+              <View className="text-[.8rem]">1号蟹塘|已认养|自费购买</View>
+              <View className="pr-1">￥3000</View>
+            </View>
+            <View className="flex justify-between items-center">
+              <View className="text-[#999999] text-[20px]">2024.06.09 12:00:08</View>
+              <View className="primary-btn !px-2 !py-1 text-[.8rem]">赠送好友</View>
+            </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, Image } from "@tarojs/components";
+import { useState } from "react";
+import { APP_FULL_HEIGHT, APP_FULL_WIDTH } from "../../config";
+import card from './assets/card.png'
+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-[20px]">
+          <Image src={card} className="w-full" style={{ height: (APP_FULL_WIDTH - 40) * .4 }} />
+        </View>
+      </ScrollView>
+    </OuterFrame>
+  )
+}

src/pages/adoptionCircle/index.scss

@@ -0,0 +1,23 @@
+.linear-title {
+  background-image: linear-gradient(to top, #e7f3d8, #fff);
+  -webkit-background-clip: text;
+  color: transparent;
+}
+
+.linear-primary-btn {
+  background: linear-gradient(to right, #c8f4b6, #c8f4b680);
+  color: #5ec45f;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 99px 0 0 99px;
+}
+
+.linear-default-btn {
+  background: linear-gradient(to right, #e6e6e6, #e6e6e680);
+  color: #666666;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 99px 0 0 99px;
+}

src/pages/adoptionCircle/index.tsx

@@ -0,0 +1,105 @@
+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'
+import { useState } from "react";
+
+interface CrabOwerItem {
+  id: string
+  name: string
+  count: string
+  avatar: string
+  level: number
+}
+
+export default function AdoptionCircle() {
+  const [crabOwers, setCrabOwers] = useState<Array<CrabOwerItem>>([
+    {
+      id: '1',
+      name: '塘主21324',
+      avatar: '',
+      count: '10亩',
+      level: 1
+    },
+    {
+      id: '2',
+      name: '塘主21324',
+      avatar: '',
+      count: '10亩',
+      level: 4
+    },
+  ])
+  const CrabOwer = (props: { item: CrabOwerItem }) => {
+    const { item } = props
+    return (
+      <View className="flex justify-between items-center bg-white py-2 px-1" key={item.id}>
+        <View className="flex items-center">
+          <View
+            className={`w-[1.4rem] h-[1.4rem] ${item.level > 3 ? 'linear-default-btn' : 'linear-primary-btn'} text-center`}
+          >{item.level}</View>
+          <Image className="rounded-full w-[2.3rem] h-[2.3rem] bg-[#252525]" src={item.avatar} />
+          <View className="pl-2">{item.name}</View>
+        </View>
+        <View className="text-[#5EC45F] font-bold">{item.count}</View>
+      </View>
+    )
+  }
+  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-5 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 shadow-xl rounded-xl">
+            <View className="text-[27px] p-3 pt-1">蟹塘主们</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>
+            <ScrollView
+              type="nested"
+              scrollY
+              style={{
+                height: 'calc(100% - 6.5rem)',
+                backgroundColor: '#fff'
+              }}
+              className="pb-1 box-border overflow-hidden box-border mt-2"
+            >
+              {
+                crabOwers.map(item => (
+                  <CrabOwer item={item}  />
+                ))
+              }
+            </ScrollView>
+          </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.navigateBack()
+                Taro.redirectTo({ url: '/pagesHome/index?tab=adoption' })
+              }}
+            >我要认养</View>
+          </View>
+        </View>
+      </ScrollView>
+    </OuterFrame>
+  )
+}

src/pagesHome/home.tsx

@@ -1,19 +1,23 @@
 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] overflow-auto">
       <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 onClick={() => onAdoption()} className="!py-[27px] primary-btn w-[90%]">我要认养</View>
+      <View className="w-full flex justify-center items-center absolute text-white" style={{
+        top: (APP_FULL_WIDTH * 1.5) + 'px'
+      }}>
+        <View onClick={() => onAdoption()} className="!py-[27px] primary-btn w-[90%] shadow-xl">我要认养</View>
       </View>
       <PageContainer
         show={showContainer}

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"
@@ -124,7 +127,10 @@ export default function HomeLayout() {
               <View
                 className="flex flex-col items-center"
                 key={item.id}
-                onClick={() => setActivedTab(item.id)}
+                onClick={() => {
+                  Taro.vibrateShort()
+                  setActivedTab(item.id)
+                }}
               >
                 <Image src={
                   activedTab === item.id ? item.activedIcon : item.icon

src/pagesHome/me.tsx

@@ -1,7 +1,117 @@
-import { View } from "@tarojs/components";
+import { Image, View, PageContainer, Input } from "@tarojs/components";
+import larvea from './assets/larvea.png'
+import orderIcon from './assets/orderIcon.png'
+import authIcon from './assets/authIcon.png'
+import cardIcon from './assets/cardIcon.png'
+import addressIcon from './assets/addressIcon.png'
+import ruleIcon from './assets/ruleIcon.png'
+import arrowIcon from './assets/arrowIcon.png'
+import Taro from "@tarojs/taro";
+import { useState } from "react";
 
 export default function Me() {
+  const Divider = () => {
+    return (
+      <View className="bg-[#25252525] w-[calc(100% - 8px)] ml-[4px] h-[1px] my-1"></View>
+    )
+  }
+
+  const [showContainer, setShowContainer] = useState<boolean>(false)
   return (
-    <View>Me</View>
+    <View className="px-3">
+      <View className="flex justify-between items-center px-2 py-5 box-border">
+        <View className="flex items-center">
+          <View className="rounded-full p-1 bg-white">
+            <View className="w-[90px] h-[90px] rounded-full overflow-hidden">
+              <Image src={larvea} className="w-full h-full" />
+            </View>
+          </View>
+          <View className="pl-3">塘主0908</View>
+        </View>
+        <View className="default-btn !px-3 !py-1" onClick={() => setShowContainer(true)}>编辑资料</View>
+      </View>
+      <View className="shadow-md rounded-xl px-2 py-4 flex justify-evenly bg-white">
+        <View className="flex flex-col items-center" onClick={() => {
+          Taro.navigateTo({ url: '/pageMe/myOrder/index' })
+        }}>
+          <Image src={orderIcon} className="w-[100px] h-[100px]" />
+          <View className="mt-1">我的订单</View>
+        </View>
+        <View className="flex flex-col items-center" onClick={() => {
+          Taro.navigateTo({ url: '/pageMe/myCertificate/index' })
+        }}>
+          <Image src={authIcon} className="w-[100px] h-[100px]" />
+          <View className="mt-1">我的凭证</View>
+        </View>
+        <View className="flex flex-col items-center" onClick={() => {
+          Taro.navigateTo({ url: '/pageMe/pickCard/index' })
+        }}>
+          <Image src={cardIcon} className="w-[100px] h-[100px]" />
+          <View className="mt-1">提货卡</View>
+        </View>
+      </View>
+      <View className="shadow-md rounded-xl px-3 py-2 bg-white mt-3">
+        <View className="flex items-center justify-between p-3" onClick={() => {
+          Taro.navigateTo({ url: '/userInfo/address/index' })
+        }}>
+          <View className="flex items-center">
+            <Image src={addressIcon} className="w-[1rem] h-[1rem]" />
+            <View className="pl-2">收货地址管理</View>
+          </View>
+          <Image src={arrowIcon} className="w-[.5rem] h-[.7rem]" />
+        </View>
+        <Divider />
+        <View className="flex items-center justify-between p-3" onClick={()=> {
+          Taro.navigateTo({ url: '/adoptionManage/adoptionRule/index' })
+        }}>
+          <View className="flex items-center">
+            <Image src={ruleIcon} className="w-[1rem] h-[1rem]" />
+            <View className="pl-2">认养规则</View>
+          </View>
+          <Image src={arrowIcon} className="w-[.5rem] h-[.7rem]" />
+        </View>
+      </View>
+      <PageContainer
+        show={showContainer}
+        round={true}
+        onAfterLeave={() => setShowContainer(false)}
+      >
+        <View className="px-5 py-5 pb-8">
+          <View>设置你的头像和昵称</View>
+          <View className="w-full flex flex-col items-center">
+            <View className="rounded-full p-1 bg-white py-[1rem]" onClick={() => {
+              Taro.chooseImage({
+                success: (e) => {
+                  console.log("e", e);
+                }
+              })
+            }}>
+              <View className="w-[120px] h-[120px] rounded-full overflow-hidden relative">
+                <Image src={larvea} className="w-full h-full" />
+                <View className="flex justify-center w-full py-[.1rem] absolute bottom-0 bg-[#00000090] text-[#fff] text-[.6rem]">
+                  设置
+                </View>
+              </View>
+            </View>
+            <View className="p-[1rem] mb-[.8rem] rounded-[.3rem] bg-[#f5f5f5] shadow-md w-[88%] flex justify-between items-center">
+              <Input placeholder="请输入昵称" />
+              <View className="text-[#5EC45F]" onClick={() => {
+                Taro.getUserProfile({
+                  desc: '用于完善会员资料',
+                  success: (res) => {
+                    console.log("res", res);
+                  },
+                  fail: (error) => {
+                    console.warn("error", error);
+                    
+                  }
+                })
+              }}>使用微信昵称</View>
+            </View>
+            <View className="text-[#ffffff] rounded-full flex justify-center items-center !bg-[#5ec45f] !w-[88%] py-3 h-[3rem] mb-[2rem]">确认使用</View>
+          </View>
+        </View>
+      </PageContainer>
+    </View>
   )
 }

src/pagesHome/monitor.tsx

@@ -6,6 +6,7 @@ import share from './assets/share.png'
 import circle from './assets/circle.png'
 import growMain from './assets/grawMain.png'
 import larvae from './assets/larvea.png'
+import Taro from "@tarojs/taro";
 const shareComponent=()=>{
   return (
           <View className="bg-[#e0f4d6] text-[green] flex justify-evenly items-center w-[130px] h-[50px]  rounded-xl">
@@ -16,7 +17,9 @@ const shareComponent=()=>{
 }
 const adoptionCircle=()=>{
     return (
-      <View className="fixed right-0 bottom-[18%]">
+      <View className="fixed right-0 bottom-[18%]" onClick={() => {
+        Taro.navigateTo({ url: '/pages/adoptionCircle/index' })
+      }}>
         <Image src={circle} className="w-[80px] h-[80px]"/>
       </View>
     )

src/userInfo/addAddress/index.tsx

@@ -4,6 +4,7 @@ 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";
+import Taro from "@tarojs/taro";
 
 export default function AddAddress() {
   const bottomNavBarHeight = 86
@@ -14,6 +15,35 @@ export default function AddAddress() {
   }
 
   const [regionSelected, setRegionSelected] = useState<any>()
+
+  const [userName, setUserName] = useState<string>('')
+  const [userNameWarn, setUserNameWarn] = useState<string>('')
+
+  const [telNumber, setTelNumber] = useState<string>('')
+  const [talNumberWarn, setTelNumberWarn] = useState<string>('')
+  const [area, setArea] = useState<string>('')
+
+  const [detailInfo, setDetailInfo] = useState<string>('')
+  const [detailInfoWarn, setDetailInfoWarn] = useState<string>('')
+
+  const [isDefault, setIsDefault] = useState<boolean>(false)
+
+  const validate = () => {
+    let flag = true
+    if (!/^1[3,4,5,6,7,8,9][0-9]{9}$/.test(telNumber)) {
+      setTelNumberWarn('手机号格式不正确')
+      flag = false
+    }
+    if (!userName) {
+      setUserNameWarn('收货人不能为空')
+      flag = false
+    }
+    if (!detailInfo) {
+      setDetailInfoWarn('详细地址不能为空')
+      flag = false
+    }
+    return flag
+  }
   return (
     <OuterFrame>
       <StatusBar />
@@ -31,17 +61,39 @@ export default function AddAddress() {
           <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>
+              <Input
+                placeholder="请输入收货人姓名"
+                placeholderClass="text-right"
+                className="text-right"
+                onInput={(e) => {
+                  setUserName((e.target as any).value)
+                  setUserNameWarn('')
+                }}
+              ></Input>
             </View>
+            {
+              userNameWarn ? <View className="flex flex-row-reverse px-2 w-full text-[#fa8072]">{userNameWarn}</View> : null
+            }
             <Divider />
             <View className="flex justify-between items-center p-2">
               <Text>手机号</Text>
-              <Input placeholder="请输入收货人手机号" placeholderClass="text-right"></Input>
+              <Input
+                placeholder="请输入收货人手机号"
+                placeholderClass="text-right"
+                className="text-right"
+                onInput={(e) => {
+                  setTelNumber((e.target as any).value)
+                  setTelNumberWarn('')
+                }}
+              ></Input>
             </View>
+            {
+              talNumberWarn ? <View className="flex flex-row-reverse px-2 w-full text-[#fa8072]">{talNumberWarn}</View> : null
+            }
             <Divider />
             <View className="flex justify-between items-center p-2">
               <Text>所在地区</Text>
-              <Picker mode='region' value={regionSelected} onChange={(e) => {
+              <Picker mode='region' value={regionSelected} className="text-right" onChange={(e) => {
                 console.log("onChange", e);
                 const regionArr = (e.target as any).value
                 setRegionSelected(regionArr.join('/'))
@@ -52,8 +104,19 @@ export default function AddAddress() {
             <Divider />
             <View className="flex justify-between items-center p-2">
               <Text>详细地址</Text>
-              <Input placeholder="请输入详细地址" placeholderClass="text-right"></Input>
+              <Input
+                placeholder="请输入详细地址"
+                placeholderClass="text-right"
+                className="text-right"
+                onInput={(e) => {
+                  setDetailInfo((e.target as any).value)
+                  setDetailInfoWarn('')
+                }}
+              ></Input>
             </View>
+            {
+              detailInfoWarn ? <View className="flex flex-row-reverse px-2 w-full text-[#fa8072]">{detailInfoWarn}</View> : null
+            }
             <Divider />
             <View className="flex justify-between items-center p-2">
               <Text>设为默认</Text>
@@ -66,7 +129,11 @@ export default function AddAddress() {
         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 className="!py-[26px] primary-btn w-[85%]" onClick={async () => {
+          if (validate()) {
+            Taro.navigateBack()
+          }
+        }}>保存并使用</View>
       </View>
     </OuterFrame>
   )

src/userInfo/address/index.tsx

@@ -5,6 +5,7 @@ import { View, ScrollView, Image } from "@tarojs/components";
 import { APP_FULL_HEIGHT } from "../../config";
 import noData from './assets/noData.png'
 import { useState } from "react";
+import Taro from "@tarojs/taro";
 
 export default function Address() {
   const bottomNavBarHeight = 80
@@ -42,8 +43,16 @@ export default function Address() {
         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 className="default-btn w-[45%]" onClick={() => {
+          Taro.chooseAddress({
+            success: (e) => {
+              console.log("E", e);
+            }
+          })
+        }}>导入微信地址</View>
+        <View className="primary-btn w-[45%]" onClick={() => {
+          Taro.navigateTo({ url: '/userInfo/addAddress/index' })
+        }}>新增收货地址</View>
       </View>
     </OuterFrame>
   )