style: 样式调整

This commit is contained in:
Tony 2024-07-17 11:54:50 +08:00
parent 7940f5621b
commit 1f25016822
9 changed files with 234 additions and 189 deletions

View File

@ -1,13 +1,5 @@
import { request } from './index' import { request } from './index'
export const orderPage = (params) => {
return request({
url: 'wechat/v1/adoption-order/page',
method: 'GET',
params
})
}
export const adoptionOrderUpdate = (data) => { export const adoptionOrderUpdate = (data) => {
return request({ return request({
url: 'wechat/v1/adoption-order/update', url: 'wechat/v1/adoption-order/update',

View File

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

View File

@ -53,7 +53,9 @@ export default function MyOrder() {
<View className="p-2"> <View className="p-2">
{ {
dataList.map(item => ( dataList.map(item => (
<View className="bg-white p-4 px-5 shadow-md rounded-md mb-2"> <View className="bg-white p-4 px-5 shadow-md rounded-md mb-2" onClick={() => {
Taro.navigateTo({ url: '/pageMe/orderDetail/index?id=' + item.id })
}}>
<View className="flex justify-between items-start py-1 pb-2"> <View className="flex justify-between items-start py-1 pb-2">
<View className="pr-3 grow">{item.planName}</View> <View className="pr-3 grow">{item.planName}</View>
<View <View
@ -73,11 +75,12 @@ export default function MyOrder() {
<View <View
className="primary-btn !px-2 !py-1 text-[.8rem]" className="primary-btn !px-2 !py-1 text-[.8rem]"
style={{ display: item.isPresented === '1' ? 'none' : 'block' }} style={{ display: item.isPresented === '1' ? 'none' : 'block' }}
onClick={() => { onClick={(e) => {
e.stopPropagation()
if (item.status === '0') Taro.navigateTo({ url: '/userInfo/confirmOrder/index?id=' + item.id }) // 未付款 if (item.status === '0') Taro.navigateTo({ url: '/userInfo/confirmOrder/index?id=' + item.id }) // 未付款
if (item.status === '1') Taro.navigateTo({ url: '/pageMe/inviteFriends/index?id=' + item.id }) // 送好友 if (item.status === '1') Taro.navigateTo({ url: '/pageMe/inviteFriends/index?id=' + item.id }) // 送好友
if (item.status !== '0' && item.status !== '1') { if (item.status !== '0' && item.status !== '1') {
Taro.navigateTo({ url: '/pageMe/orderDetail/index?id=' + item.orderNumber }) Taro.navigateTo({ url: '/pageMe/orderDetail/index?id=' + item.id })
} }
}} }}
>{ >{

View File

@ -1,14 +1,43 @@
import { View, ScrollView, Image } from "@tarojs/components"; import { View, ScrollView, Image, Text } from "@tarojs/components";
import { APP_FULL_HEIGHT, IMG_BASE_URL } from "../../config"; import { APP_FULL_HEIGHT, IMG_BASE_URL } from "../../config";
import HeaderNation from "../../components/HeaderNation"; import HeaderNation from "../../components/HeaderNation";
import OuterFrame from "../../components/OuterFrame"; import OuterFrame from "../../components/OuterFrame";
import StatusBar from "../../components/StatusBar"; import StatusBar from "../../components/StatusBar";
import Divider from "../../components/Divider"; import Divider from "../../components/Divider";
import { getOrderInfoById } from '../../api/order'
import Taro, { getCurrentInstance } from "@tarojs/taro"
import { useEffect, useState } from "react";
import dayjs from "dayjs";
const arrow = IMG_BASE_URL + 'arrow.png' const arrow = IMG_BASE_URL + 'arrow.png'
const ORDER_STATUS_MAP = {
"0": "未付款",
"1": "已付款",
"2": "已发货",
"3": "已签收",
"4": "已取消",
"5": "待提货",
}
const PRESENT_MAP = {
"0": "自己购买",
"1": "已赠送",
"2": "他人赠送"
}
export default function OrderDetail() { export default function OrderDetail() {
const bottomNavBarHeight = 80 const bottomNavBarHeight = 80
const { router } = getCurrentInstance()
const id = router && router.params && router.params.id
const [orderDetail, setOrderDetail] = useState<any>({})
const getOrderDetail = async (orderId) => {
const { data } = await getOrderInfoById({ orderId })
console.log("获取订单详情", data);
if (data && data.orderId) setOrderDetail(data)
}
useEffect(() => { getOrderDetail(id) }, [id])
return ( return (
<OuterFrame> <OuterFrame>
<StatusBar /> <StatusBar />
@ -23,39 +52,66 @@ export default function OrderDetail() {
className="pb-1 box-border overflow-hidden box-border" className="pb-1 box-border overflow-hidden box-border"
> >
<View className="p-3"> <View className="p-3">
{
(orderDetail && orderDetail.orderId) ? <>
<View className="bg-white p-4 px-5 shadow-md rounded-md"> <View className="bg-white p-4 px-5 shadow-md rounded-md">
<View className="text-[1rem]"></View> <View className="text-[1rem]">{ORDER_STATUS_MAP[orderDetail.orderStatus]}</View>
<View className="text-[0.8rem] text-[#5EC45F] py-[.6rem]">20240626 15:37:0020240626 15:37:00</View> <View className="text-[0.8rem] text-[#5EC45F] py-[.6rem] hidden">{orderDetail.orderExpectStart || '未知时间'}{orderDetail.orderExpectEnd || '未知时间'}</View>
<Divider /> <Divider />
<View className=" flex items-center mt-[.8rem] mb-[.1rem]"> <View className=" flex items-center mt-[.8rem] mb-[.1rem]">
{
orderDetail.addressInfo ? <>
<View className="grow"> <View className="grow">
<View className="text-[30px]"> 1855262222</View> <View className="text-[30px]">
<View className="text-[26px] mt-1"></View> {orderDetail.addressInfo.contact} {orderDetail.addressInfo.phoneNumber}
</View>
<View className="text-[26px] mt-1">
<Text>{orderDetail.addressInfo.areaInfo}</Text>
<Text className="pl-[.3rem]">{orderDetail.addressInfo.fullAddress}</Text>
</View>
</View> </View>
<Image src={arrow} className="w-[14px] h-[20px] rotate-180" /> <Image src={arrow} className="w-[14px] h-[20px] rotate-180" />
</> : null
}
</View> </View>
</View> </View>
{
Array.isArray(orderDetail.orderDetailList) ? <>
{
orderDetail.orderDetailList.map(item => (<>
<View className="bg-white p-4 px-5 shadow-md rounded-md mt-3"> <View className="bg-white p-4 px-5 shadow-md rounded-md mt-3">
<View className="text-[.9rem]">2024</View> {
item?.specs?.id ? <>
<View className="text-[.9rem]">{item.specs.specsNumber}</View>
<View className="flex justify-between items-center py-2 mt-1 text-[.8rem]"> <View className="flex justify-between items-center py-2 mt-1 text-[.8rem]">
<View>110</View> <View>{item.specs.specs}</View>
<View className="text-[#FF663F]">¥347.5</View> <View className="text-[#FF663F] hidden"></View>
</View> </View>
<Divider /> <Divider />
<View className="pt-2 text-[23px]"> <View className="pt-2 text-[23px]">
<View className="flex justify-between items-center"> <View className="flex justify-between items-center">
<View className="text-[#999999]"></View>
<View>2024.09.01-2024.10.31</View>
</View>
<View className="flex justify-between items-center mt-2">
<View className="text-[#999999]"></View> <View className="text-[#999999]"></View>
<View>2024.06.09 12:00:08</View> <View>{dayjs(item.specs.createTime).format("YYYY-MM-DD HH:mm:ss")}</View>
</View> </View>
</View> </View>
</> : null
}
</View> </View>
</>))
}
</> : null
}
</> : null
}
</View> </View>
</ScrollView> </ScrollView>
<View style={{ height: bottomNavBarHeight + 'px' }} className="flex flex-col items-center pt-2"> <View
style={{
height: bottomNavBarHeight + 'px',
visibility: orderDetail.orderStatus === '1' ? 'visible' : 'hidden'
}}
className="flex flex-col items-center pt-2"
>
<View className="primary-btn w-[85%] h-[2.3rem]"></View> <View className="primary-btn w-[85%] h-[2.3rem]"></View>
</View> </View>
</OuterFrame> </OuterFrame>

View File

@ -21,8 +21,8 @@ export default function PickCard() {
const [unuse, setUnUse] = useState<number>(0) const [unuse, setUnUse] = useState<number>(0)
const [used, setUsed] = useState<number>(0) const [used, setUsed] = useState<number>(0)
const getTickPage = async () => { const getTickPage = async () => {
const userOpenId = Taro.getStorageSync("USER_OPEN_ID") const openId = Taro.getStorageSync("USER_OPEN_ID")
const { data } = await tickPage({ openId: "111" }) const { data } = await tickPage({ openId })
const { list } = data const { list } = data
if (Array.isArray(list)) { if (Array.isArray(list)) {
setTickList(list) setTickList(list)

View File

@ -3,7 +3,9 @@ import { useEffect, useState } from "react";
import useStore from "../storage"; import useStore from "../storage";
import { adoptionOrderPage, getPlan } from "../api/user"; import { adoptionOrderPage, getPlan } from "../api/user";
import { APP_FULL_WIDTH, IMG_BASE_URL } from "../config"; import { APP_FULL_WIDTH, IMG_BASE_URL } from "../config";
import Taro from "@tarojs/taro";
import './index.scss' import './index.scss'
import dayjs from "dayjs";
const homeBg = IMG_BASE_URL + '/pagesHome/homeBg.png' const homeBg = IMG_BASE_URL + '/pagesHome/homeBg.png'
const homeBigBg = IMG_BASE_URL + '/pagesHome/homeBigBg1.png' const homeBigBg = IMG_BASE_URL + '/pagesHome/homeBigBg1.png'
@ -41,6 +43,28 @@ export default function Home(props) {
} }
} }
const [myOrderList, setMyOrderList] = useState<Array<any>>([])
const getMyOrderList = async () => {
const openId = Taro.getStorageSync("USER_OPEN_ID")
const { data } = await adoptionOrderPage({
pageNo: 1,
pageSize: 100,
serialNumber: 'JHLS202407012565376',
openId
})
console.log("我的订单", data);
const { list } = data
if (Array.isArray(list)) {
setMyOrderList(list.filter(item => {
if (!item.expectEnd || !item.expectStart) return false
if (item.status === '1' || item.status === '2') return true;
return false
}))
}
}
useEffect(() => { getMyOrderList() }, [])
const setAdoptionPlan = useStore((store:any) => store.setAdoptionPlan) const setAdoptionPlan = useStore((store:any) => store.setAdoptionPlan)
const getAdoptionPlan = async () => { const getAdoptionPlan = async () => {
const { data } = await getPlan({ serialNumber: 'JHLS202407012565376' }) const { data } = await getPlan({ serialNumber: 'JHLS202407012565376' })
@ -53,11 +77,17 @@ export default function Home(props) {
}, []) }, [])
return ( return (
<View className="h-full relative bg-[#142841] overflow-auto"> <View className="h-full relative bg-[#142841] overflow-auto">
<View <Image
className="absolute bottom-0 p-2 w-full hidden" src={homeBigBg}
style={{zIndex: '9999'}} className="w-full"
> style={{ height: APP_FULL_WIDTH * 4.1 }}
<View className="rounded-xl shadow-md bg-white py-4 px-5"> />
<View className="w-full flex flex-col justify-center items-start absolute text-white" style={{
top: (APP_FULL_WIDTH * 1.5 - 140) + 'px'
}}>
{
myOrderList.length > 0 ? <View className="p-[.7rem] text-[#252525] w-[100vw]">
<View className="rounded-xl shadow-md bg-white py-4 px-5 w-full">
<View className="pb-[1rem]"></View> <View className="pb-[1rem]"></View>
<View className="flex items-start"> <View className="flex items-start">
<View className="w-[2rem] h-[2rem] rounded-[1rem] overflow-hidden bg-black"> <View className="w-[2rem] h-[2rem] rounded-[1rem] overflow-hidden bg-black">
@ -65,13 +95,23 @@ export default function Home(props) {
</View> </View>
<View className="px-[1rem] flex flex-col items-start"> <View className="px-[1rem] flex flex-col items-start">
<View className="py-1"></View> <View className="py-1"></View>
<View className="text-[#666666] py-1">10</View> {
<View className="text-[#666666] py-1">1</View> myOrderList.map(item => (
<View className="text-[#666666] py-1 text-[24px]">{item.productAmount} {item.orderType === '0' ? '只' : '亩'}</View>
))
}
</View> </View>
<View className="px-[1rem] flex flex-col items-start"> <View className="px-[1rem] flex flex-col items-start">
<View className="py-1"></View> <View className="py-1"></View>
<View className="text-[#666666] py-1">2024.09.10-2024.10.10</View> {
<View className="text-[#666666] py-1">2024.09.10-2024.10.10</View> myOrderList.map(item => (
<View className="text-[#666666] py-1 text-[24px]">
{dayjs(item.expectStart).format("YYYY-MM-DD")}
--
{dayjs(item.expectEnd).format("YYYY-MM-DD")}
</View>
))
}
</View> </View>
</View> </View>
<View className="flex mt-[1rem] relative left-[.3rem]"> <View className="flex mt-[1rem] relative left-[.3rem]">
@ -89,26 +129,22 @@ export default function Home(props) {
</View> </View>
<View className="w-full h-[1px] bg-[#E5E5E5] my-2"></View> <View className="w-full h-[1px] bg-[#E5E5E5] my-2"></View>
<View className="flex justify-evenly text-[#5EC45F] py-1"> <View className="flex justify-evenly text-[#5EC45F] py-1">
<View className="w-[50%] text-center"></View> <View className="w-[50%] text-center" onClick={() => {
Taro.navigateTo({ url: '/pageMe/myOrder/index' })
}}></View>
<View <View
className="w-[50%] text-center" className="w-[50%] text-center"
onClick={() => onAdoption()} onClick={() => onAdoption()}
></View> ></View>
</View> </View>
</View> </View>
</View> </View> : <>
<Image
src={homeBigBg}
className="w-full"
style={{ height: APP_FULL_WIDTH * 4.1 }}
/>
<View className="w-full flex flex-col justify-center items-start absolute text-white" style={{
top: (APP_FULL_WIDTH * 1.5 - 140) + 'px'
}}>
<View className="h-[200px] mb-[140px] p-2 pl-[1rem]"> <View className="h-[200px] mb-[140px] p-2 pl-[1rem]">
<InfoList data={infoDataList} /> <InfoList data={infoDataList} />
</View> </View>
<View onClick={() => onAdoption()} className="!py-[27px] primary-btn w-[90%] ml-[5%] shadow-xl"></View> <View onClick={() => onAdoption()} className="!py-[27px] primary-btn w-[90%] ml-[5%] shadow-xl"></View>
</>
}
</View> </View>
<PageContainer <PageContainer
show={showContainer} show={showContainer}

View File

@ -126,7 +126,7 @@ export default function HomeLayout() {
: activedTab === 'adoption' : activedTab === 'adoption'
? <Adoption /> ? <Adoption />
: activedTab === 'monitor' : activedTab === 'monitor'
? <Monitor /> : <Me /> ? <Monitor onAdoption={() => setActivedTab('adoption')} /> : <Me />
} }
</ScrollView> </ScrollView>
<View <View

View File

@ -130,7 +130,7 @@ const AdoptionCircle=()=>{
</View> </View>
) )
} }
export default function Monitor() { export default function Monitor({ onAdoption }) {
const userAvatar = useStore((store:any) => store.userAvatar) const userAvatar = useStore((store:any) => store.userAvatar)
const userName = useStore((store:any) => store.userName) const userName = useStore((store:any) => store.userName)
const plotList = useStore((store:any) => store.plotList) const plotList = useStore((store:any) => store.plotList)
@ -242,7 +242,7 @@ export default function Monitor() {
</View> </View>
<View className="flex justify-between text-[20px] text-[#5EC45F] mt-1"> <View className="flex justify-between text-[20px] text-[#5EC45F] mt-1">
<View>{year}.{month}</View> <View>{year}.{month}</View>
<View>3</View> <View className="hidden">3</View>
</View> </View>
<View className="w-full my-3 bg-[#99999969] h-[1px]"></View> <View className="w-full my-3 bg-[#99999969] h-[1px]"></View>
<View> <View>
@ -251,11 +251,12 @@ export default function Monitor() {
{ {
productList.length > 0 ? productList.map(item => ( productList.length > 0 ? productList.map(item => (
<View className="pl-2">{item.specs}{item.servingAmount}{item.productAmount}</View> <View className="pl-2">{item.specs}{item.servingAmount}{item.productAmount}</View>
)) : <NoData /> )) : <View className="pl-2">0</View>
} }
</View> </View>
</View> </View>
<View className="w-full my-3 bg-[#99999999] h-[1px]"></View> <View className="w-full my-3 bg-[#99999999] h-[1px]"></View>
<View className="flex justify-between items-start">
<View> <View>
<View className="text-[.9rem] mb-[.3rem]">:</View> <View className="text-[.9rem] mb-[.3rem]">:</View>
<View className="text-[#666666] text-[.8rem]"> <View className="text-[#666666] text-[.8rem]">
@ -263,10 +264,14 @@ export default function Monitor() {
adoptionPlan.id ? <Text> adoptionPlan.id ? <Text>
<Text>{dayjs(adoptionPlan.receivingStart).format('YYYY-MM-DD')}</Text>- <Text>{dayjs(adoptionPlan.receivingStart).format('YYYY-MM-DD')}</Text>-
<Text>{dayjs(adoptionPlan.receivingEnd).format('YYYY-MM-DD')}</Text> <Text>{dayjs(adoptionPlan.receivingEnd).format('YYYY-MM-DD')}</Text>
</Text> : '-------------' </Text> : '暂未认养'
} }
</View> </View>
</View> </View>
<View className="text-[23px] text-[#fff] bg-[#5EC45F] rounded-full flex items-center justify-center px-[.7rem] py-[.3rem]" style={{ visibility: productList.length > 0 ? 'hidden' : 'visible' }} onClick={() => {
onAdoption()
}}></View>
</View>
</View> </View>
<ScrollView <ScrollView
type="nested" type="nested"
@ -325,51 +330,6 @@ export default function Monitor() {
</View> </View>
</View> </View>
</View> </View>
<View className="bg-[#fff] hidden">
<View className="flex items-center p-[20px] px-[30px]">
<Text>2024</Text>
<Image src={triangle} className="w-[25px] h-[15px] ml-[10px]" />
</View>
<View className="w-full h-[5px] bg-[#f7f7f7]"></View>
<View className="flex justify-between p-[20px] px-[30px]">
<View>
<View className="text-[#fff] mb-[10px] flex items-center justify-center w-[60px] h-[60px] bg-[#5ec45f]">24</View>
<View>2024.06</View>
</View>
<View>
<View className="text-sm text-[#b3b3b3]"></View>
<View className="text-xl"></View>
</View>
{shareComponent()}
</View>
<View className="w-full flex relative justify-center mb-[20px]">
<Image src={grawMain} className="w-[90%] h-[180px]"/>
<Image src={larvea} className="absolute w-[170px] h-[150px] left-[19%] top-[-10px]"/>
</View>
<View className="w-full h-[5px] bg-[#f7f7f7]"></View>
<View className="p-[20px] px-[30px]">
<View></View>
<View className="rounded-lg mt-[10px] w-full h-[80px] p-[20px] flex items-center bg-[#f5f5f5]">
<Text>3</Text>
</View>
</View>
<View className="p-[20px] px-[30px]">
<View></View>
<View className="rounded-lg text-sm mt-[10px] w-full p-[20px] bg-[#f5f5f5]">
<View>3+4258</View>
<View className="mt-[10px]">3.5+4.5168</View>
<View className="mt-[10px] mb-[10px]">4+5128</View>
<View>4.5+5.598</View>
</View>
</View>
<View className="p-[20px] px-[30px]">
<View></View>
<View className="rounded-lg mt-[10px] w-full h-[80px] p-[20px] flex items-center bg-[#f5f5f5]">
<Text>2024.09.01-2024.10.01</Text>
</View>
</View>
</View>
</View> </View>
) )
} }

View File

@ -3,12 +3,13 @@ import HeaderNation from "../../components/HeaderNation";
import OuterFrame from "../../components/OuterFrame"; import OuterFrame from "../../components/OuterFrame";
import { View, ScrollView, Image } from "@tarojs/components"; import { View, ScrollView, Image } from "@tarojs/components";
import { APP_FULL_HEIGHT, IMG_BASE_URL } from "../../config"; import { APP_FULL_HEIGHT, IMG_BASE_URL } from "../../config";
import noData from './assets/noData.png' // import noData from './assets/noData.png'
import { useEffect, useState } from "react"; import { useState } from "react";
import Taro, { getCurrentInstance, useDidShow } from "@tarojs/taro"; import Taro, { getCurrentInstance, useDidShow } from "@tarojs/taro";
import { addressCreate, addressPage, updateAddress } from "../../api/me"; import { addressCreate, addressPage, updateAddress } from "../../api/me";
const arrow = IMG_BASE_URL + 'arrow.png' const arrow = IMG_BASE_URL + 'arrow.png'
const noData = IMG_BASE_URL + 'noData.png'
export default function Address() { export default function Address() {
const bottomNavBarHeight = 80 const bottomNavBarHeight = 80
@ -17,7 +18,7 @@ export default function Address() {
const NoData = () => { const NoData = () => {
return ( return (
<View className="flex flex-col items-center bg-white m-3 p-5 py-10 rounded-xl shadow-md"> <View className="flex flex-col items-center bg-white m-3 p-5 py-10 rounded-xl shadow-md">
<Image src={noData} className="w-[260px] h-[180px]" /> <Image src={noData} className="w-[240px] h-[220px]" />
<View className="mt-1 text-[#999999]"></View> <View className="mt-1 text-[#999999]"></View>
</View> </View>
) )
@ -106,12 +107,9 @@ 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"
> >
{
!orderId ? <>
<View className="default-btn w-[45%]" onClick={() => { <View className="default-btn w-[45%]" onClick={() => {
Taro.chooseAddress({ Taro.chooseAddress({
success: async (e) => { success: async (e) => {
console.log("E", e);
const userOpenId = Taro.getStorageSync("USER_OPEN_ID") const userOpenId = Taro.getStorageSync("USER_OPEN_ID")
const { data, code } = await addressCreate({ const { data, code } = await addressCreate({
openId: userOpenId, openId: userOpenId,
@ -138,9 +136,6 @@ export default function Address() {
<View className="primary-btn w-[45%]" onClick={() => { <View className="primary-btn w-[45%]" onClick={() => {
Taro.navigateTo({ url: '/userInfo/addAddress/index' }) Taro.navigateTo({ url: '/userInfo/addAddress/index' })
}}></View> }}></View>
</> : <>
</>
}
</View> </View>
</OuterFrame> </OuterFrame>
) )