diff --git a/src/pagesHome/adoption.tsx b/src/pagesHome/adoption.tsx
index e1bc466..5d3c978 100644
--- a/src/pagesHome/adoption.tsx
+++ b/src/pagesHome/adoption.tsx
@@ -1,6 +1,11 @@
-import { View ,Image } from "@tarojs/components";
-import Taro from "@tarojs/taro";
+import { View, Image, Text, Input } from "@tarojs/components";
+import mainBg from "./assets/adoptionMainBg.png";
+import { useState } from "react";
+import crad from "./assets/crad.png";
+import "./index.scss";
+import olList from "./assets/olList.png";
import listIcon from './assets/listIcon.png'
+import Taro from "@tarojs/taro";
const CrabListBtn = () => {
return (
@@ -17,7 +22,451 @@ const CrabListBtn = () => {
}
export default function Adoption() {
+ //第一个弹出框
+ const popupBottom = () => {
+ return (
+
+
+ 01号蟹塘
+
+
+
+ 已认养21%
+
+
+
+ 公蟹
+ 3.5两
+
+
+ 母蟹
+ 2.5两
+
+
+
+
+ 29.9元起
+
+
+
+ onAdoptionA()}
+ className="!py-[27px] primary-btn w-[90%]"
+ >
+ 确认蟹塘
+
+
+
+ );
+ };
+ //第二个弹出框
+ const popupPrice = () => {
+ return (
+
+
+
+
+ 01号蟹塘
+
+
+
+
+ 已认养21%
+
+
+
+ 选择认养模式
+
+ ?
+ {" "}
+
+
+ cradPattern(1)}
+ className={`${
+ cradPatternNum == 1 ? "cradActice" : ""
+ } flex items-center justify-center w-[40%] !h-[80px] rounded border-[#d8d8d8] border-4`}
+ >
+ 按只认养
+
+ cradPattern(2)}
+ className={`${
+ cradPatternNum == 2 ? "cradActice" : ""
+ } flex items-center justify-center w-[40%] !h-[80px] rounded border-[#d8d8d8] border-4`}
+ >
+ 按亩认养
+
+
+
+
+ {cradPatternNum === 1 ? (
+
+
+
+ 选择认养份额{" "}
+
+ ?
+ {" "}
+
+
+ 公蟹(￥39.9/只)
+
+ handlerNum("-")}
+ >
+ -
+
+ InPutVal(e)}
+ className="bg-[#e6e6e6] text-center w-[60px] h-[50px]"
+ />
+ handlerNum("+")}>
+ +
+
+
+
+
+ 公蟹(￥29.9/只)
+
+ handlerNumA("-")}
+ >
+ -
+
+ InPutValA(e)}
+ className="bg-[#e6e6e6] text-center w-[60px] h-[50px]"
+ />
+ handlerNumA("+")}
+ >
+ +
+
+
+
+
+
+
+
+ 保险(￥5/只)
+
+ ?
+
+
+
+ handlerNumB("-")}
+ >
+ -
+
+ InPutValB(e)}
+ className="bg-[#e6e6e6] text-center w-[60px] h-[50px]"
+ />
+ handlerNumB("+")}
+ >
+ +
+
+
+
+
+
+
+ 合计：￥
+ {(cardNum * 39.9 + cardNumA * 29.9 + cardNumB * 5).toFixed(2)}
+
+
+
+ ) : (
+
+
+ 亩(￥1000/亩)
+
+ handlerMu("-")}
+ >
+ -
+
+ InPutMu(e)}
+ className="bg-[#e6e6e6] text-center w-[60px] h-[50px]"
+ />
+ handlerMu("+")}
+ >
+ +
+
+
+
+
+ 选择规格:
+
+ 3两公+4两母8只(￥1000/亩)
+
+ handlerMuA("-")}
+ >
+ -
+
+ InPutMuA(e)}
+ className="bg-[#e6e6e6] text-center w-[60px] h-[50px]"
+ />
+ handlerMuA("+")}
+ >
+ +
+
+
+
+
+ 3.5两公+4.5两母8只(￥16/份)
+
+ handlerMuB("-")}
+ >
+ -
+
+ InPutMuB(e)}
+ className="bg-[#e6e6e6] text-center w-[60px] h-[50px]"
+ />
+ handlerMuB("+")}
+ >
+ +
+
+
+
+
+ 4两公+5两母8只(￥12/份)
+
+ handlerMuC("-")}
+ >
+ -
+
+ InPutMuC(e)}
+ className="bg-[#e6e6e6] text-center w-[60px] h-[50px]"
+ />
+ handlerMuC("+")}
+ >
+ +
+
+
+
+
+ 4.5两公+5.5两母8只(￥9/份)
+
+ handlerMuD("-")}
+ >
+ -
+
+ InPutMuD(e)}
+ className="bg-[#e6e6e6] text-center w-[60px] h-[50px]"
+ />
+ handlerMuD("+")}
+ >
+ +
+
+
+
+
+
+
+ 合计：￥
+ {(muNum * 1000 + muNumA * 25 + muNumB * 16+muNumC*12+muNumD+9).toFixed(2)}
+
+
+
+ )}
+
+
+
+
+ onAdoption()}
+ className="!py-[27px] primary-btn w-[90%]"
+ >
+ 确认下单
+
+
+
+ );
+ };
+ const [cradPatternNum, setCradPatternNum] = useState(1);
+ const [cardNum, setCardNum] = useState(1);
+ const [cardNumA, setCardNumA] = useState(1);
+ const [cardNumB, setCardNumB] = useState(1);
+ const cradPattern = (val) => {
+ setCradPatternNum(val);
+ };
+ //
+ const [showContainer, setShowContainer] = useState(false);
+ const [showContainerA, setShowContainerA] = useState(false);
+ const onAdoption = () => {
+ setShowContainer(true);
+ };
+ const onAdoptionA = () => {
+ setShowContainerA(true);
+ };
+ //公蟹数量加减
+ const handlerNum = (val) => {
+ if (val === "-") {
+ if (cardNum === 1) setCardNum(1);
+ else setCardNum(cardNum - 1);
+ } else {
+ setCardNum(cardNum + 1);
+ }
+ };
+ const handlerNumA = (val) => {
+ if (val === "-") {
+ if (cardNumA === 1) setCardNumA(1);
+ else setCardNumA(cardNumA - 1);
+ } else {
+ setCardNumA(cardNumA + 1);
+ }
+ };
+ //保险数量加减
+ const handlerNumB = (val) => {
+ if (val === "-") {
+ if (cardNumB === 1) setCardNumB(1);
+ else setCardNumB(cardNumB - 1);
+ } else {
+ setCardNumB(cardNumB + 1);
+ }
+ };
+ //input输入框
+ const InPutVal = (event) => {
+ setCardNum(event.detail.value);
+ };
+ const InPutValA = (event) => {
+ setCardNumA(event.detail.value);
+ };
+ const InPutValB = (event) => {
+ setCardNumB(event.detail.value);
+ };
+ //按亩选择
+ const [muNum,setMuNum]=useState(1)
+ const [muNumA,setMuNumA]=useState(1)
+ const [muNumB,setMuNumB]=useState(1)
+ const [muNumC,setMuNumC]=useState(1)
+ const [muNumD,setMuNumD]=useState(1)
+ //亩选择
+ const handlerMu = (val) => {
+ if (val === "-") {
+ if (muNum === 1) setMuNum(1);
+ else setMuNum(muNum - 1);
+ } else {
+ setMuNum(muNum + 1);
+ }
+ };
+ const InPutMu=(e)=>{
+ setMuNum(e.detail.value);
+
+ }
+ //规格选择
+ const handlerMuA = (val) => {
+ if (val === "-") {
+ if (muNumA === 1) setMuNumA(1);
+ else setMuNumA(muNumA - 1);
+ } else {
+ setMuNumA(muNumA + 1);
+ }
+ };
+ const InPutMuA=(e)=>{
+ setMuNumA(e.detail.value);
+
+ }
+ const handlerMuB = (val) => {
+ if (val === "-") {
+ if (muNumB === 1) setMuNumB(1);
+ else setMuNumB(muNumB - 1);
+ } else {
+ setMuNumB(muNumB + 1);
+ }
+ };
+ const InPutMuB=(e)=>{
+ setMuNumB(e.detail.value);
+
+ }
+ const handlerMuC = (val) => {
+ if (val === "-") {
+ if (muNumC === 1) setMuNumC(1);
+ else setMuNumC(muNumC - 1);
+ } else {
+ setMuNumC(muNumC + 1);
+ }
+ };
+ const InPutMuC=(e)=>{
+ setMuNumC(e.detail.value);
+
+ }
+ const handlerMuD = (val) => {
+ if (val === "-") {
+ if (muNumD === 1) setMuNumD(1);
+ else setMuNumD(muNumD - 1);
+ } else {
+ setMuNumD(muNumD + 1);
+ }
+ };
+ const InPutMuD=(e)=>{
+ setMuNumD(e.detail.value);
+
+ }
return (
- Adoption
- )
-}
\ No newline at end of file
+
+
+
+ {CrabListBtn()}
+ {
+ showContainer?
+ popupBottom():
+
+ onAdoption()} className="!py-[27px] primary-btn w-[90%]">确认蟹塘
+
+ }
+ {
+ showContainerA?popupPrice():''
+ }
+
+ );
+}
diff --git a/src/pagesHome/assets/adoptionMainBg.png b/src/pagesHome/assets/adoptionMainBg.png
new file mode 100644
index 0000000..427ebcc
Binary files /dev/null and b/src/pagesHome/assets/adoptionMainBg.png differ
diff --git a/src/pagesHome/assets/crad.png b/src/pagesHome/assets/crad.png
new file mode 100644
index 0000000..5dfd52e
Binary files /dev/null and b/src/pagesHome/assets/crad.png differ
diff --git a/src/pagesHome/assets/olList.png b/src/pagesHome/assets/olList.png
new file mode 100644
index 0000000..cbc7db6
Binary files /dev/null and b/src/pagesHome/assets/olList.png differ
diff --git a/src/pagesHome/index.scss b/src/pagesHome/index.scss
new file mode 100644
index 0000000..1dee8c4
--- /dev/null
+++ b/src/pagesHome/index.scss
@@ -0,0 +1,5 @@
+.cradActice{
+background-color: #e8f8db;
+color: #207c06;
+border: 4px solid #7fcf5e;
+}
\ No newline at end of file