style: 样式调整

2024-07-17 11:54:50 +08:00 · 2024-07-17 11:54:50 +08:00 · 1f25016822
commit 1f25016822
parent 7940f5621b
9 changed files with 234 additions and 189 deletions
--- a/src/api/order.ts
+++ b/src/api/order.ts
@ -1,13 +1,5 @@
 import { request } from './index'

-export const orderPage = (params) => {
-  return request({
-    url: 'wechat/v1/adoption-order/page',
-    method: 'GET',
-    params
-  })
-}
-
 export const adoptionOrderUpdate = (data) => {
  return request({
    url: 'wechat/v1/adoption-order/update',
--- a/src/components/NoData/index.tsx
+++ b/src/components/NoData/index.tsx
@ -1,11 +1,14 @@
 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) {
  const { info = '暂无数据' } = props
  return (
    <View className="flex flex-col items-center bg-white m-3 p-5 py-10 rounded-xl shadow-md">
-      <Image src={noData} className="w-[260px] h-[180px]" />
+      <Image src={noData} className="w-[240px] h-[220px]" />
      <View className="mt-1 text-[#999999]">{ info }</View>
    </View>
  )
--- a/src/pageMe/myOrder/index.tsx
+++ b/src/pageMe/myOrder/index.tsx
@ -53,7 +53,9 @@ export default function MyOrder() {
      <View className="p-2">
        {
          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="pr-3 grow">{item.planName}</View>
                <View
@ -73,11 +75,12 @@ export default function MyOrder() {
                  <View
                    className="primary-btn !px-2 !py-1 text-[.8rem]"
                    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 === '1') Taro.navigateTo({ url: '/pageMe/inviteFriends/index?id=' + item.id }) // 送好友
                      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 })
                      }
                    }}
                  >{
--- a/src/pageMe/orderDetail/index.tsx
+++ b/src/pageMe/orderDetail/index.tsx
@ -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 HeaderNation from "../../components/HeaderNation";
 import OuterFrame from "../../components/OuterFrame";
 import StatusBar from "../../components/StatusBar";
 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 ORDER_STATUS_MAP = {
+  "0": "未付款",
+  "1": "已付款",
+  "2": "已发货",
+  "3": "已签收",
+  "4": "已取消",
+  "5": "待提货",
+}
+
+const PRESENT_MAP = {
+  "0": "自己购买",
+  "1": "已赠送",
+  "2": "他人赠送"
+}
+
 export default function OrderDetail() {
  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 (
    <OuterFrame>
      <StatusBar />
@ -23,39 +52,66 @@ export default function OrderDetail() {
        className="pb-1 box-border overflow-hidden box-border"
      >
        <View className="p-3">
+          {
+            (orderDetail && orderDetail.orderId) ? <>
              <View className="bg-white p-4 px-5 shadow-md rounded-md">
-            <View className="text-[1rem]">已赠送</View>
-            <View className="text-[0.8rem] text-[#5EC45F] py-[.6rem]">该订单在2024年06月26日 15:37:00发起赠送，2024年06月26日 15:37:00被好友“悬崖上的人鱼姬”领取。</View>
+                <View className="text-[1rem]">{ORDER_STATUS_MAP[orderDetail.orderStatus]}</View>
+                <View className="text-[0.8rem] text-[#5EC45F] py-[.6rem] hidden">该订单在{orderDetail.orderExpectStart || '未知时间'}发起赠送，{orderDetail.orderExpectEnd || '未知时间'}被好友领取。</View>
                <Divider />
                <View className=" flex items-center mt-[.8rem] mb-[.1rem]">
+                  {
+                    orderDetail.addressInfo ? <>
                      <View className="grow">
-                <View className="text-[30px]">大鲨鱼 1855262222</View>
-                <View className="text-[26px] mt-1">这是一个地址</View>
+                        <View className="text-[30px]">
+                          {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>
                      <Image src={arrow} className="w-[14px] h-[20px] rotate-180" />
+                    </> : null
+                  }
                </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="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>1号蟹塘｜已认养10只｜自费购买</View>
-              <View className="text-[#FF663F]">¥347.5</View>
+                              <View>{item.specs.specs}</View>
+                              <View className="text-[#FF663F] hidden"></View>
                            </View>
                            <Divider />
                            <View className="pt-2 text-[23px]">
                              <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>2024.06.09 12:00:08</View>
+                                <View>{dayjs(item.specs.createTime).format("YYYY-MM-DD HH:mm:ss")}</View>
                              </View>
                            </View>
+                          </> : null
+                        }
                      </View>
+                    </>))
+                  }
+                </> : null
+              }
+            </> : null
+          }
        </View>
      </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>
    </OuterFrame>
--- a/src/pageMe/pickCard/index.tsx
+++ b/src/pageMe/pickCard/index.tsx
@ -21,8 +21,8 @@ export default function PickCard() {
  const [unuse, setUnUse] = useState<number>(0)
  const [used, setUsed] = useState<number>(0)
  const getTickPage = async () => {
-    const userOpenId = Taro.getStorageSync("USER_OPEN_ID")
-    const { data } = await tickPage({ openId: "111" })
+    const openId = Taro.getStorageSync("USER_OPEN_ID")
+    const { data } = await tickPage({ openId })
    const { list } = data
    if (Array.isArray(list)) {
      setTickList(list)
--- a/src/pagesHome/home.tsx
+++ b/src/pagesHome/home.tsx
@ -3,7 +3,9 @@ import { useEffect, useState } from "react";
 import useStore from "../storage";
 import { adoptionOrderPage, getPlan } from "../api/user";
 import { APP_FULL_WIDTH, IMG_BASE_URL } from "../config";
+import Taro from "@tarojs/taro";
 import './index.scss'
+import dayjs from "dayjs";

 const homeBg = IMG_BASE_URL + '/pagesHome/homeBg.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 getAdoptionPlan = async () => {
    const { data } = await getPlan({ serialNumber: 'JHLS202407012565376' })
@ -53,11 +77,17 @@ export default function Home(props) {
  }, [])
  return (
    <View className="h-full relative bg-[#142841] overflow-auto">
-      <View
-        className="absolute bottom-0 p-2 w-full hidden"
-        style={{zIndex: '9999'}}
-      >
-        <View className="rounded-xl shadow-md bg-white py-4 px-5">
+      <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'
+      }}>
+        {
+          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="flex items-start">
                <View className="w-[2rem] h-[2rem] rounded-[1rem] overflow-hidden bg-black">
@ -65,13 +95,23 @@ export default function Home(props) {
                </View>
                <View className="px-[1rem] flex flex-col items-start">
                  <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 className="px-[1rem] flex flex-col items-start">
                  <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 className="flex mt-[1rem] relative left-[.3rem]">
@ -89,26 +129,22 @@ export default function Home(props) {
              </View>
              <View className="w-full h-[1px] bg-[#E5E5E5] my-2"></View>
              <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
                  className="w-[50%] text-center"
                  onClick={() => onAdoption()}
                >继续认养</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> : <>
            <View className="h-[200px] mb-[140px] p-2 pl-[1rem]">
              <InfoList data={infoDataList} />
            </View>
            <View onClick={() => onAdoption()} className="!py-[27px] primary-btn w-[90%] ml-[5%] shadow-xl">我要认养</View>
+          </>
+        }
      </View>
      <PageContainer
        show={showContainer}
--- a/src/pagesHome/index.tsx
+++ b/src/pagesHome/index.tsx
@ -126,7 +126,7 @@ export default function HomeLayout() {
            : activedTab === 'adoption'
            ? <Adoption />
            : activedTab === 'monitor'
-            ? <Monitor /> : <Me />
+            ? <Monitor onAdoption={() => setActivedTab('adoption')} /> : <Me />
          }
        </ScrollView>
        <View
--- a/src/pagesHome/monitor.tsx
+++ b/src/pagesHome/monitor.tsx
@ -130,7 +130,7 @@ const AdoptionCircle=()=>{
      </View>
    )
 }
-export default function Monitor() {
+export default function Monitor({ onAdoption }) {
  const userAvatar = useStore((store:any) => store.userAvatar)
  const userName = useStore((store:any) => store.userName)
  const plotList = useStore((store:any) => store.plotList)
@ -242,7 +242,7 @@ export default function Monitor() {
            </View>
            <View className="flex justify-between text-[20px] text-[#5EC45F] mt-1">
              <View>{year}.{month}</View>
-              <View>本季认养：3亩</View>
+              <View className="hidden">本季认养：3亩</View>
            </View>
            <View className="w-full my-3 bg-[#99999969] h-[1px]"></View>
            <View>
@ -251,11 +251,12 @@ export default function Monitor() {
                {
                  productList.length > 0 ? productList.map(item => (
                    <View className="pl-2">{item.specs}共{item.servingAmount}只，共{item.productAmount}份</View>
-                  )) : <NoData />
+                  )) : <View className="pl-2">0</View>
                }
              </View>
            </View>
            <View className="w-full my-3 bg-[#99999999] h-[1px]"></View>
+            <View className="flex justify-between items-start">
              <View>
                <View className="text-[.9rem] mb-[.3rem]">预计收获日期:</View>
                <View className="text-[#666666] text-[.8rem]">
@ -263,10 +264,14 @@ export default function Monitor() {
                    adoptionPlan.id ? <Text>
                      <Text>{dayjs(adoptionPlan.receivingStart).format('YYYY-MM-DD')}</Text>-
                      <Text>{dayjs(adoptionPlan.receivingEnd).format('YYYY-MM-DD')}</Text>
-                  </Text> : '-------------'
+                    </Text> : '暂未认养'
                  }
                </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>     
          <ScrollView
            type="nested"
@ -325,51 +330,6 @@ export default function Monitor() {
          </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两母蟹+4两公蟹25份，每份8只；</View>
-            <View className="mt-[10px]">3.5两母蟹+4.5两公蟹16份，每份8只；</View>
-            <View className="mt-[10px] mb-[10px]">4两母蟹+5两公蟹12份，每份8只；</View>
-            <View>4.5两母蟹+5.5两公蟹9份，每份8只；</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>
  )
 }
--- a/src/userInfo/address/index.tsx
+++ b/src/userInfo/address/index.tsx
@ -3,12 +3,13 @@ import HeaderNation from "../../components/HeaderNation";
 import OuterFrame from "../../components/OuterFrame";
 import { View, ScrollView, Image } from "@tarojs/components";
 import { APP_FULL_HEIGHT, IMG_BASE_URL } from "../../config";
-import noData from './assets/noData.png'
-import { useEffect, useState } from "react";
+// import noData from './assets/noData.png'
+import { useState } from "react";
 import Taro, { getCurrentInstance, useDidShow } from "@tarojs/taro";
 import { addressCreate, addressPage, updateAddress } from "../../api/me";

 const arrow = IMG_BASE_URL + 'arrow.png'
+const noData = IMG_BASE_URL + 'noData.png'

 export default function Address() {
  const bottomNavBarHeight = 80
@ -17,7 +18,7 @@ export default function Address() {
  const NoData = () => {
    return (
      <View className="flex flex-col items-center bg-white m-3 p-5 py-10 rounded-xl shadow-md">
-        <Image src={noData} className="w-[260px] h-[180px]" />
+        <Image src={noData} className="w-[240px] h-[220px]" />
        <View className="mt-1 text-[#999999]">暂无收货地址</View>
      </View>
    )
@ -106,12 +107,9 @@ export default function Address() {
        style={{ height: bottomNavBarHeight + 'px' }}
        className="bg-[#f5f5f5] p-2 flex items-start pt-3 justify-evenly w-full"
      >
-        {
-          !orderId ? <>
        <View className="default-btn w-[45%]" onClick={() => {
          Taro.chooseAddress({
            success: async (e) => {
-                  console.log("E", e);
              const userOpenId = Taro.getStorageSync("USER_OPEN_ID")
              const { data, code } = await addressCreate({
                openId: userOpenId,
@ -138,9 +136,6 @@ export default function Address() {
        <View className="primary-btn w-[45%]" onClick={() => {
          Taro.navigateTo({ url: '/userInfo/addAddress/index' })
        }}>新增收货地址</View>
-          </> : <>
-          </>
-        }
      </View>
    </OuterFrame>
  )