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() {
|
||||
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>
|
||||
|
@ -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"
|
||||
]
|
||||
}
|
||||
],
|
||||
|
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]"
|
||||
style={{ height, background }}
|
||||
>
|
||||
<View className="w-[4rem]">
|
||||
{ hiddenBack ? '' : <Image src={Arrow} className="w-[15px] h-[23px]" onClick={() => {
|
||||
<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>
|
||||
|
@ -2,7 +2,7 @@ import Taro from "@tarojs/taro"
|
||||
|
||||
export const BASE_URL = 'http://127.0.0.1:3000'
|
||||
|
||||
const { statusBarHeight = 0, screenHeight } = Taro.getSystemInfoSync()
|
||||
const { statusBarHeight = 0, screenHeight, screenWidth } = Taro.getSystemInfoSync()
|
||||
// 获取胶囊信息
|
||||
const { height, top } = Taro.getMenuButtonBoundingClientRect()
|
||||
// 计算顶部导航栏高度
|
||||
@ -13,3 +13,5 @@ const APP_NAV_HEIGHT = statusBarHeight + APP_TITLE_HEIGHT
|
||||
//去掉顶部导航栏,屏幕剩余的高度
|
||||
export const APP_FULL_HEIGHT = screenHeight - APP_NAV_HEIGHT
|
||||
|
||||
export const APP_FULL_WIDTH = screenWidth
|
||||
|
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 { 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}
|
||||
|
@ -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
|
||||
|
@ -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>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 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>
|
||||
)
|
||||
|
@ -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>
|
||||
)
|
||||
|
@ -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>
|
||||
)
|
||||
|