Compare commits
4 Commits
0d9d6b2703
...
9689e9dc80
Author | SHA1 | Date | |
---|---|---|---|
9689e9dc80 | |||
8cc270dc24 | |||
965cda8563 | |||
0402cd38a9 |
24
src/adoptionManage/adoptionSuccess/index.tsx
Normal file
@ -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>
|
||||||
|
)
|
||||||
|
}
|
@ -8,6 +8,7 @@ import NoData from "../../components/NoData";
|
|||||||
|
|
||||||
// 蟹塘列表
|
// 蟹塘列表
|
||||||
export default function CrabList() {
|
export default function CrabList() {
|
||||||
|
const [img, setImg] = useState<string>('')
|
||||||
const [dataList, setDataList] = useState<Array<any>>([
|
const [dataList, setDataList] = useState<Array<any>>([
|
||||||
{
|
{
|
||||||
id: '1',
|
id: '1',
|
||||||
@ -30,10 +31,10 @@ export default function CrabList() {
|
|||||||
{
|
{
|
||||||
dataList.map(item => (
|
dataList.map(item => (
|
||||||
<View className="flex items-center bg-white py-4 px-5 shadow-md rounded-xl mb-2" key={item.id}>
|
<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 className="grow px-3">
|
||||||
<View>{item.name}</View>
|
<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>
|
<Progress percent={item.adoption} strokeWidth={8} showInfo active activeColor='#76cc3b' className="w-[200px]"></Progress>
|
||||||
<Text className="pl-1">已认养</Text>
|
<Text className="pl-1">已认养</Text>
|
||||||
</View>
|
</View>
|
||||||
|
@ -1,8 +1,13 @@
|
|||||||
export default defineAppConfig({
|
export default defineAppConfig({
|
||||||
lazyCodeLoading: 'requiredComponents',
|
lazyCodeLoading: 'requiredComponents',
|
||||||
|
permission: {
|
||||||
|
"scope.chooseAddress": { desc: "获取地址" }
|
||||||
|
},
|
||||||
|
requiredPrivateInfos: ["chooseAddress"],
|
||||||
pages: [
|
pages: [
|
||||||
'pages/login/index',
|
'pages/login/index',
|
||||||
'pages/index/index'
|
'pages/index/index',
|
||||||
|
"pages/adoptionCircle/index"
|
||||||
],
|
],
|
||||||
subPackages: [
|
subPackages: [
|
||||||
{
|
{
|
||||||
@ -23,7 +28,16 @@ export default defineAppConfig({
|
|||||||
root: 'adoptionManage/',
|
root: 'adoptionManage/',
|
||||||
pages: [
|
pages: [
|
||||||
'adoptionRule/index',
|
'adoptionRule/index',
|
||||||
'crabList/index'
|
'crabList/index',
|
||||||
|
"adoptionSuccess/index"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
root: 'pageMe',
|
||||||
|
pages: [
|
||||||
|
"myOrder/index",
|
||||||
|
"pickCard/index",
|
||||||
|
"myCertificate/index"
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
7
src/components/Divider/index.tsx
Normal file
@ -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>
|
||||||
|
)
|
||||||
|
}
|
@ -11,10 +11,10 @@ const HeaderNation = (props) => {
|
|||||||
className="w-full flex justify-between items-center px-3 relative z-[3]"
|
className="w-full flex justify-between items-center px-3 relative z-[3]"
|
||||||
style={{ height, background }}
|
style={{ height, background }}
|
||||||
>
|
>
|
||||||
<View className="w-[4rem]">
|
<View className="w-[4rem]" onClick={() => {
|
||||||
{ hiddenBack ? '' : <Image src={Arrow} className="w-[15px] h-[23px]" onClick={() => {
|
|
||||||
Taro.navigateBack()
|
Taro.navigateBack()
|
||||||
}} /> }
|
}}>
|
||||||
|
{ hiddenBack ? '' : <Image src={Arrow} className="w-[15px] h-[23px]" /> }
|
||||||
</View>
|
</View>
|
||||||
<View>{ title }</View>
|
<View>{ title }</View>
|
||||||
<View className="w-[4rem]"></View>
|
<View className="w-[4rem]"></View>
|
||||||
|
@ -2,7 +2,7 @@ import Taro from "@tarojs/taro"
|
|||||||
|
|
||||||
export const BASE_URL = 'http://127.0.0.1:3000'
|
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()
|
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_HEIGHT = screenHeight - APP_NAV_HEIGHT
|
||||||
|
|
||||||
|
export const APP_FULL_WIDTH = screenWidth
|
||||||
|
|
BIN
src/pageMe/myCertificate/assets/card.png
Normal file
After Width: | Height: | Size: 2.5 MiB |
31
src/pageMe/myCertificate/index.tsx
Normal file
@ -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>
|
||||||
|
)
|
||||||
|
}
|
42
src/pageMe/myOrder/index.tsx
Normal file
@ -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>
|
||||||
|
)
|
||||||
|
}
|
BIN
src/pageMe/pickCard/assets/card.png
Normal file
After Width: | Height: | Size: 1.6 MiB |
14
src/pageMe/pickCard/index.scss
Normal file
@ -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);
|
||||||
|
}
|
45
src/pageMe/pickCard/index.tsx
Normal file
@ -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>
|
||||||
|
)
|
||||||
|
}
|
BIN
src/pages/adoptionCircle/assets/bg.png
Normal file
After Width: | Height: | Size: 2.5 MiB |
23
src/pages/adoptionCircle/index.scss
Normal file
@ -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;
|
||||||
|
}
|
105
src/pages/adoptionCircle/index.tsx
Normal file
@ -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>
|
||||||
|
)
|
||||||
|
}
|
BIN
src/pagesHome/assets/addressIcon.png
Normal file
After Width: | Height: | Size: 4.6 KiB |
BIN
src/pagesHome/assets/arrowIcon.png
Normal file
After Width: | Height: | Size: 444 B |
BIN
src/pagesHome/assets/authIcon.png
Normal file
After Width: | Height: | Size: 5.9 KiB |
BIN
src/pagesHome/assets/cardIcon.png
Normal file
After Width: | Height: | Size: 8.7 KiB |
BIN
src/pagesHome/assets/homeBigBg.png
Normal file
After Width: | Height: | Size: 17 MiB |
BIN
src/pagesHome/assets/orderIcon.png
Normal file
After Width: | Height: | Size: 6.9 KiB |
BIN
src/pagesHome/assets/ruleIcon.png
Normal file
After Width: | Height: | Size: 1.8 KiB |
@ -1,19 +1,23 @@
|
|||||||
import { View, Image, PageContainer, Text } from "@tarojs/components";
|
import { View, Image, PageContainer, Text } from "@tarojs/components";
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
|
import { APP_FULL_WIDTH } from "../config";
|
||||||
import homeBg from './assets/homeBg.png'
|
import homeBg from './assets/homeBg.png'
|
||||||
|
import homeBigBg from './assets/homeBigBg.png'
|
||||||
|
|
||||||
export default function Home(props) {
|
export default function Home(props) {
|
||||||
const { onAdoption } = props
|
const { onAdoption } = props
|
||||||
const [showContainer, setShowContainer] = useState<boolean>(false)
|
const [showContainer, setShowContainer] = useState<boolean>(false)
|
||||||
return (
|
return (
|
||||||
<View className="h-full relative overflow-hidden bg-[#142841]">
|
<View className="h-full relative bg-[#142841] overflow-auto">
|
||||||
<Image
|
<Image
|
||||||
src={homeBg}
|
src={homeBigBg}
|
||||||
className="w-full"
|
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 text-white" style={{
|
||||||
<View onClick={() => onAdoption()} className="!py-[27px] primary-btn w-[90%]">我要认养</View>
|
top: (APP_FULL_WIDTH * 1.5) + 'px'
|
||||||
|
}}>
|
||||||
|
<View onClick={() => onAdoption()} className="!py-[27px] primary-btn w-[90%] shadow-xl">我要认养</View>
|
||||||
</View>
|
</View>
|
||||||
<PageContainer
|
<PageContainer
|
||||||
show={showContainer}
|
show={showContainer}
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
import { useEffect, useState } from 'react'
|
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 { View, ScrollView, Image, Text } from '@tarojs/components'
|
||||||
import {
|
import {
|
||||||
APP_FULL_HEIGHT,
|
APP_FULL_HEIGHT,
|
||||||
@ -32,6 +32,9 @@ export default function HomeLayout() {
|
|||||||
const bottomNavBarHeight = 75
|
const bottomNavBarHeight = 75
|
||||||
|
|
||||||
const [activedTab, setActivedTab] = useState<string>('home')
|
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) => {
|
const getCurrentTitle = (id:string) => {
|
||||||
return id === 'home' ? '首页' : id === 'adoption' ? '认养' : id === 'monitor' ? '生长监控' : '我的'
|
return id === 'home' ? '首页' : id === 'adoption' ? '认养' : id === 'monitor' ? '生长监控' : '我的'
|
||||||
}
|
}
|
||||||
@ -82,13 +85,13 @@ export default function HomeLayout() {
|
|||||||
<View className='index relative'>
|
<View className='index relative'>
|
||||||
<View style={{
|
<View style={{
|
||||||
height: APP_HEAD_HEIGHT + 'px',
|
height: APP_HEAD_HEIGHT + 'px',
|
||||||
backgroundColor: applyOpacityColor(headerOpacity, '#e8d1ac')
|
backgroundColor: '#fff'
|
||||||
}}></View>
|
}}></View>
|
||||||
<HeaderNation
|
<HeaderNation
|
||||||
title={
|
title={
|
||||||
getCurrentTitle(activedTab)
|
getCurrentTitle(activedTab)
|
||||||
}
|
}
|
||||||
background={applyOpacityColor(headerOpacity, '#08d1ac')}
|
background="#fff"
|
||||||
></HeaderNation>
|
></HeaderNation>
|
||||||
<ScrollView
|
<ScrollView
|
||||||
type="nested"
|
type="nested"
|
||||||
@ -124,7 +127,10 @@ export default function HomeLayout() {
|
|||||||
<View
|
<View
|
||||||
className="flex flex-col items-center"
|
className="flex flex-col items-center"
|
||||||
key={item.id}
|
key={item.id}
|
||||||
onClick={() => setActivedTab(item.id)}
|
onClick={() => {
|
||||||
|
Taro.vibrateShort()
|
||||||
|
setActivedTab(item.id)
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
<Image src={
|
<Image src={
|
||||||
activedTab === item.id ? item.activedIcon : item.icon
|
activedTab === item.id ? item.activedIcon : item.icon
|
||||||
|
@ -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() {
|
export default function Me() {
|
||||||
|
const Divider = () => {
|
||||||
return (
|
return (
|
||||||
<View>Me</View>
|
<View className="bg-[#25252525] w-[calc(100% - 8px)] ml-[4px] h-[1px] my-1"></View>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const [showContainer, setShowContainer] = useState<boolean>(false)
|
||||||
|
return (
|
||||||
|
<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>
|
||||||
)
|
)
|
||||||
}
|
}
|
@ -6,6 +6,7 @@ import share from './assets/share.png'
|
|||||||
import circle from './assets/circle.png'
|
import circle from './assets/circle.png'
|
||||||
import growMain from './assets/grawMain.png'
|
import growMain from './assets/grawMain.png'
|
||||||
import larvae from './assets/larvea.png'
|
import larvae from './assets/larvea.png'
|
||||||
|
import Taro from "@tarojs/taro";
|
||||||
const shareComponent=()=>{
|
const shareComponent=()=>{
|
||||||
return (
|
return (
|
||||||
<View className="bg-[#e0f4d6] text-[green] flex justify-evenly items-center w-[130px] h-[50px] rounded-xl">
|
<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=()=>{
|
const adoptionCircle=()=>{
|
||||||
return (
|
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]"/>
|
<Image src={circle} className="w-[80px] h-[80px]"/>
|
||||||
</View>
|
</View>
|
||||||
)
|
)
|
||||||
|
@ -4,6 +4,7 @@ import OuterFrame from "../../components/OuterFrame";
|
|||||||
import { View, ScrollView, Picker, Text, Input, Switch } from "@tarojs/components";
|
import { View, ScrollView, Picker, Text, Input, Switch } from "@tarojs/components";
|
||||||
import { APP_FULL_HEIGHT } from "../../config";
|
import { APP_FULL_HEIGHT } from "../../config";
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
|
import Taro from "@tarojs/taro";
|
||||||
|
|
||||||
export default function AddAddress() {
|
export default function AddAddress() {
|
||||||
const bottomNavBarHeight = 86
|
const bottomNavBarHeight = 86
|
||||||
@ -14,6 +15,35 @@ export default function AddAddress() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const [regionSelected, setRegionSelected] = useState<any>()
|
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 (
|
return (
|
||||||
<OuterFrame>
|
<OuterFrame>
|
||||||
<StatusBar />
|
<StatusBar />
|
||||||
@ -31,17 +61,39 @@ export default function AddAddress() {
|
|||||||
<View className="bg-white p-3 rounded-xl shadow-md">
|
<View className="bg-white p-3 rounded-xl shadow-md">
|
||||||
<View className="flex justify-between items-center p-2">
|
<View className="flex justify-between items-center p-2">
|
||||||
<Text>收货人</Text>
|
<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>
|
</View>
|
||||||
|
{
|
||||||
|
userNameWarn ? <View className="flex flex-row-reverse px-2 w-full text-[#fa8072]">{userNameWarn}</View> : null
|
||||||
|
}
|
||||||
<Divider />
|
<Divider />
|
||||||
<View className="flex justify-between items-center p-2">
|
<View className="flex justify-between items-center p-2">
|
||||||
<Text>手机号</Text>
|
<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>
|
</View>
|
||||||
|
{
|
||||||
|
talNumberWarn ? <View className="flex flex-row-reverse px-2 w-full text-[#fa8072]">{talNumberWarn}</View> : null
|
||||||
|
}
|
||||||
<Divider />
|
<Divider />
|
||||||
<View className="flex justify-between items-center p-2">
|
<View className="flex justify-between items-center p-2">
|
||||||
<Text>所在地区</Text>
|
<Text>所在地区</Text>
|
||||||
<Picker mode='region' value={regionSelected} onChange={(e) => {
|
<Picker mode='region' value={regionSelected} className="text-right" onChange={(e) => {
|
||||||
console.log("onChange", e);
|
console.log("onChange", e);
|
||||||
const regionArr = (e.target as any).value
|
const regionArr = (e.target as any).value
|
||||||
setRegionSelected(regionArr.join('/'))
|
setRegionSelected(regionArr.join('/'))
|
||||||
@ -52,8 +104,19 @@ export default function AddAddress() {
|
|||||||
<Divider />
|
<Divider />
|
||||||
<View className="flex justify-between items-center p-2">
|
<View className="flex justify-between items-center p-2">
|
||||||
<Text>详细地址</Text>
|
<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>
|
</View>
|
||||||
|
{
|
||||||
|
detailInfoWarn ? <View className="flex flex-row-reverse px-2 w-full text-[#fa8072]">{detailInfoWarn}</View> : null
|
||||||
|
}
|
||||||
<Divider />
|
<Divider />
|
||||||
<View className="flex justify-between items-center p-2">
|
<View className="flex justify-between items-center p-2">
|
||||||
<Text>设为默认</Text>
|
<Text>设为默认</Text>
|
||||||
@ -66,7 +129,11 @@ export default function AddAddress() {
|
|||||||
style={{ height: bottomNavBarHeight + 'px' }}
|
style={{ height: bottomNavBarHeight + 'px' }}
|
||||||
className="bg-[#f5f5f5] p-2 flex items-start pt-3 justify-evenly w-full"
|
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>
|
</View>
|
||||||
</OuterFrame>
|
</OuterFrame>
|
||||||
)
|
)
|
||||||
|
@ -5,6 +5,7 @@ import { View, ScrollView, Image } from "@tarojs/components";
|
|||||||
import { APP_FULL_HEIGHT } from "../../config";
|
import { APP_FULL_HEIGHT } from "../../config";
|
||||||
import noData from './assets/noData.png'
|
import noData from './assets/noData.png'
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
|
import Taro from "@tarojs/taro";
|
||||||
|
|
||||||
export default function Address() {
|
export default function Address() {
|
||||||
const bottomNavBarHeight = 80
|
const bottomNavBarHeight = 80
|
||||||
@ -42,8 +43,16 @@ export default function Address() {
|
|||||||
style={{ height: bottomNavBarHeight + 'px' }}
|
style={{ height: bottomNavBarHeight + 'px' }}
|
||||||
className="bg-[#f5f5f5] p-2 flex items-start pt-3 justify-evenly w-full"
|
className="bg-[#f5f5f5] p-2 flex items-start pt-3 justify-evenly w-full"
|
||||||
>
|
>
|
||||||
<View className="default-btn w-[45%]">导入微信地址</View>
|
<View className="default-btn w-[45%]" onClick={() => {
|
||||||
<View className="primary-btn w-[45%]">新增收货地址</View>
|
Taro.chooseAddress({
|
||||||
|
success: (e) => {
|
||||||
|
console.log("E", e);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}}>导入微信地址</View>
|
||||||
|
<View className="primary-btn w-[45%]" onClick={() => {
|
||||||
|
Taro.navigateTo({ url: '/userInfo/addAddress/index' })
|
||||||
|
}}>新增收货地址</View>
|
||||||
</View>
|
</View>
|
||||||
</OuterFrame>
|
</OuterFrame>
|
||||||
)
|
)
|
||||||
|