feat：小程序 认养研发
This commit is contained in:
parent
3c7b1bd42e
commit
6f343604a6
@ -1,6 +1,11 @@
|
|||||||
import { View ,Image } from "@tarojs/components";
|
import { View, Image, Text, Input } from "@tarojs/components";
|
||||||
import Taro from "@tarojs/taro";
|
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 listIcon from './assets/listIcon.png'
|
||||||
|
import Taro from "@tarojs/taro";
|
||||||
|
|
||||||
const CrabListBtn = () => {
|
const CrabListBtn = () => {
|
||||||
return (
|
return (
|
||||||
@ -17,7 +22,451 @@ const CrabListBtn = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export default function Adoption() {
|
export default function Adoption() {
|
||||||
|
//第一个弹出框
|
||||||
|
const popupBottom = () => {
|
||||||
|
return (
|
||||||
|
<View className="w-full py-[20px] px-[10px] absolute bottom-0 bg-[#fff] rounded-t-xl">
|
||||||
|
<View className="w-full h-[50px] flex items-center justify-evenly">
|
||||||
|
<View className="text-lg">01号蟹塘</View>
|
||||||
|
<View className="w-[37%] h-[20px] bg-[#d7edd0] rounded-lg">
|
||||||
|
<View className="w-[28%] h-full bg-[#73cb3a] rounded-lg"></View>
|
||||||
|
</View>
|
||||||
|
<View className="text-xs">已认养21%</View>
|
||||||
|
</View>
|
||||||
|
<View className="w-full mt-[35px] flex items-center justify-evenly">
|
||||||
|
<View className="w-[35%] border-[#a5dc93] border-4 !h-[150px] rounded-md flex items-center justify-evenly">
|
||||||
|
<Text>公蟹</Text>
|
||||||
|
<Text>3.5两</Text>
|
||||||
|
</View>
|
||||||
|
<View className="w-[35%] !h-[150px] border-[#a5dc93] border-4 rounded-md flex items-center justify-evenly">
|
||||||
|
<Text>母蟹</Text>
|
||||||
|
<Text>2.5两</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
<View className="flex justify-center mt-[20px] color-[#fb8f75]">
|
||||||
|
<View className="text-[#fe6e49]">
|
||||||
|
29.9<Text className="text-xs">元起</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
<View className="my-[25px] w-full flex justify-center items-center text-white">
|
||||||
|
<View
|
||||||
|
onClick={() => onAdoptionA()}
|
||||||
|
className="!py-[27px] primary-btn w-[90%]"
|
||||||
|
>
|
||||||
|
确认蟹塘
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
//第二个弹出框
|
||||||
|
const popupPrice = () => {
|
||||||
|
return (
|
||||||
|
<View className="w-full py-[20px] px-[10px] absolute bottom-0 bg-[#f7f7f7] rounded-t-xl">
|
||||||
|
<View className="w-full h-[150px] flex items-center justify-evenly">
|
||||||
|
<Image src={crad} className="w-[130px] h-[130px]" />
|
||||||
|
<View className="w-[37%] flex flex-col h-full justify-evenly">
|
||||||
|
<View className="text-sm">01号蟹塘</View>
|
||||||
|
<View className="w-[100%] h-[20px] bg-[#d7edd0] rounded">
|
||||||
|
<View className="w-[28%] h-full bg-[#73cb3a] rounded"></View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
<View className="text-xs">已认养21%</View>
|
||||||
|
</View>
|
||||||
|
<View className="bg-[#fff] !p-[20px]">
|
||||||
|
<View className="flex items-center text-base">
|
||||||
|
选择认养模式
|
||||||
|
<View className="rounded-full text-center ml-[15px] text-sm w-[35px] h-[35px] text-[#7acd58] border-2 border-[#7acd58]">
|
||||||
|
?
|
||||||
|
</View>{" "}
|
||||||
|
</View>
|
||||||
|
<View className="flex mt-[20px] items-center justify-evenly">
|
||||||
|
<View
|
||||||
|
onClick={() => cradPattern(1)}
|
||||||
|
className={`${
|
||||||
|
cradPatternNum == 1 ? "cradActice" : ""
|
||||||
|
} flex items-center justify-center w-[40%] !h-[80px] rounded border-[#d8d8d8] border-4`}
|
||||||
|
>
|
||||||
|
按只认养
|
||||||
|
</View>
|
||||||
|
<View
|
||||||
|
onClick={() => cradPattern(2)}
|
||||||
|
className={`${
|
||||||
|
cradPatternNum == 2 ? "cradActice" : ""
|
||||||
|
} flex items-center justify-center w-[40%] !h-[80px] rounded border-[#d8d8d8] border-4`}
|
||||||
|
>
|
||||||
|
按亩认养
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
<View>
|
||||||
|
{cradPatternNum === 1 ? (
|
||||||
|
<View className="bg-[#f7f7f7]">
|
||||||
|
<View className="bg-[#fff] !p-[20px]">
|
||||||
|
<View className="flex items-center text-base">
|
||||||
|
选择认养份额{" "}
|
||||||
|
<View className="rounded-full text-center ml-[15px] text-sm w-[35px] h-[35px] text-[#7acd58] border-2 border-[#7acd58]">
|
||||||
|
?
|
||||||
|
</View>{" "}
|
||||||
|
</View>
|
||||||
|
<View className="flex mt-[20px] items-center justify-between">
|
||||||
|
<View>公蟹(￥39.9/只)</View>
|
||||||
|
<View className="flex items-center">
|
||||||
|
<Text
|
||||||
|
className="mr-[15px] text-lg"
|
||||||
|
onClick={() => handlerNum("-")}
|
||||||
|
>
|
||||||
|
-
|
||||||
|
</Text>
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
value={cardNum}
|
||||||
|
onInput={(e) => InPutVal(e)}
|
||||||
|
className="bg-[#e6e6e6] text-center w-[60px] h-[50px]"
|
||||||
|
/>
|
||||||
|
<Text className="ml-[15px]" onClick={() => handlerNum("+")}>
|
||||||
|
+
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
<View className="flex items-center mt-[20px] justify-between">
|
||||||
|
<View>公蟹(￥29.9/只)</View>
|
||||||
|
<View className="flex items-center">
|
||||||
|
<Text
|
||||||
|
className="mr-[15px] text-lg"
|
||||||
|
onClick={() => handlerNumA("-")}
|
||||||
|
>
|
||||||
|
-
|
||||||
|
</Text>
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
value={cardNumA}
|
||||||
|
onInput={(e) => InPutValA(e)}
|
||||||
|
className="bg-[#e6e6e6] text-center w-[60px] h-[50px]"
|
||||||
|
/>
|
||||||
|
<Text
|
||||||
|
className="ml-[15px]"
|
||||||
|
onClick={() => handlerNumA("+")}
|
||||||
|
>
|
||||||
|
+
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
<View className="bg-[#fff] mt-[20px] !p-[20px]">
|
||||||
|
<View className="flex mt-[20px] items-center justify-between">
|
||||||
|
<View className="flex">
|
||||||
|
保险(￥5/只)
|
||||||
|
<View className="rounded-full text-center text-sm ml-[15px] w-[35px] h-[35px] text-[#7acd58] border-2 border-[#7acd58]">
|
||||||
|
?
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
<View className="flex items-center">
|
||||||
|
<Text
|
||||||
|
className="mr-[15px] text-lg"
|
||||||
|
onClick={() => handlerNumB("-")}
|
||||||
|
>
|
||||||
|
-
|
||||||
|
</Text>
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
value={cardNumB}
|
||||||
|
onInput={(e) => InPutValB(e)}
|
||||||
|
className="bg-[#e6e6e6] text-center w-[60px] h-[50px]"
|
||||||
|
/>
|
||||||
|
<Text
|
||||||
|
className="ml-[15px]"
|
||||||
|
onClick={() => handlerNumB("+")}
|
||||||
|
>
|
||||||
|
+
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
<View className="flex justify-center mt-[20px] color-[#fb8f75]">
|
||||||
|
<View className="text-[#fe6e49]">
|
||||||
|
<Text className="text-xs">合计：</Text>￥
|
||||||
|
{(cardNum * 39.9 + cardNumA * 29.9 + cardNumB * 5).toFixed(2)}
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
) : (
|
||||||
|
<View className="bg-[#fff] p-[20px]">
|
||||||
|
<View className="flex items-center mt-[20px] justify-between">
|
||||||
|
<View>亩(￥1000/亩)</View>
|
||||||
|
<View className="flex items-center">
|
||||||
|
<Text
|
||||||
|
className="mr-[15px] text-lg"
|
||||||
|
onClick={() => handlerMu("-")}
|
||||||
|
>
|
||||||
|
-
|
||||||
|
</Text>
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
value={muNum}
|
||||||
|
onInput={(e) => InPutMu(e)}
|
||||||
|
className="bg-[#e6e6e6] text-center w-[60px] h-[50px]"
|
||||||
|
/>
|
||||||
|
<Text
|
||||||
|
className="ml-[15px]"
|
||||||
|
onClick={() => handlerMu("+")}
|
||||||
|
>
|
||||||
|
+
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
<View className="mt-[20px] bg-[#f7f7f7] p-[15px] text-sm">
|
||||||
|
<Text>选择规格:</Text>
|
||||||
|
<View className="flex items-center mt-[20px] justify-between">
|
||||||
|
<View>3两公+4两母8只(￥1000/亩)</View>
|
||||||
|
<View className="flex items-center">
|
||||||
|
<Text
|
||||||
|
className="mr-[15px] text-lg"
|
||||||
|
onClick={() => handlerMuA("-")}
|
||||||
|
>
|
||||||
|
-
|
||||||
|
</Text>
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
value={muNumA}
|
||||||
|
onInput={(e) => InPutMuA(e)}
|
||||||
|
className="bg-[#e6e6e6] text-center w-[60px] h-[50px]"
|
||||||
|
/>
|
||||||
|
<Text
|
||||||
|
className="ml-[15px]"
|
||||||
|
onClick={() => handlerMuA("+")}
|
||||||
|
>
|
||||||
|
+
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
<View className="flex items-center mt-[20px] justify-between">
|
||||||
|
<View>3.5两公+4.5两母8只(￥16/份)</View>
|
||||||
|
<View className="flex items-center">
|
||||||
|
<Text
|
||||||
|
className="mr-[15px] text-lg"
|
||||||
|
onClick={() => handlerMuB("-")}
|
||||||
|
>
|
||||||
|
-
|
||||||
|
</Text>
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
value={muNumB}
|
||||||
|
onInput={(e) => InPutMuB(e)}
|
||||||
|
className="bg-[#e6e6e6] text-center w-[60px] h-[50px]"
|
||||||
|
/>
|
||||||
|
<Text
|
||||||
|
className="ml-[15px]"
|
||||||
|
onClick={() => handlerMuB("+")}
|
||||||
|
>
|
||||||
|
+
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
<View className="flex items-center mt-[20px] justify-between">
|
||||||
|
<View>4两公+5两母8只(￥12/份)</View>
|
||||||
|
<View className="flex items-center">
|
||||||
|
<Text
|
||||||
|
className="mr-[15px] text-lg"
|
||||||
|
onClick={() => handlerMuC("-")}
|
||||||
|
>
|
||||||
|
-
|
||||||
|
</Text>
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
value={muNumC}
|
||||||
|
onInput={(e) => InPutMuC(e)}
|
||||||
|
className="bg-[#e6e6e6] text-center w-[60px] h-[50px]"
|
||||||
|
/>
|
||||||
|
<Text
|
||||||
|
className="ml-[15px]"
|
||||||
|
onClick={() => handlerMuC("+")}
|
||||||
|
>
|
||||||
|
+
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
<View className="flex items-center mt-[20px] justify-between">
|
||||||
|
<View>4.5两公+5.5两母8只(￥9/份)</View>
|
||||||
|
<View className="flex items-center">
|
||||||
|
<Text
|
||||||
|
className="mr-[15px] text-lg"
|
||||||
|
onClick={() => handlerMuD("-")}
|
||||||
|
>
|
||||||
|
-
|
||||||
|
</Text>
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
value={muNumD}
|
||||||
|
onInput={(e) => InPutMuD(e)}
|
||||||
|
className="bg-[#e6e6e6] text-center w-[60px] h-[50px]"
|
||||||
|
/>
|
||||||
|
<Text
|
||||||
|
className="ml-[15px]"
|
||||||
|
onClick={() => handlerMuD("+")}
|
||||||
|
>
|
||||||
|
+
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
<View className="flex justify-center mt-[20px] color-[#fb8f75]">
|
||||||
|
<View className="text-[#fe6e49]">
|
||||||
|
<Text className="text-xs">合计：</Text>￥
|
||||||
|
{(muNum * 1000 + muNumA * 25 + muNumB * 16+muNumC*12+muNumD+9).toFixed(2)}
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
|
||||||
|
|
||||||
|
<View className="my-[25px] w-full flex justify-center items-center text-white">
|
||||||
|
<View
|
||||||
|
onClick={() => onAdoption()}
|
||||||
|
className="!py-[27px] primary-btn w-[90%]"
|
||||||
|
>
|
||||||
|
确认下单
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
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<boolean>(false);
|
||||||
|
const [showContainerA, setShowContainerA] = useState<boolean>(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 (
|
return (
|
||||||
<View>Adoption</View>
|
<View className="h-full relative overflow-hidden">
|
||||||
)
|
<Image src={mainBg} className="w-full" mode="widthFix" />
|
||||||
|
|
||||||
|
{CrabListBtn()}
|
||||||
|
{
|
||||||
|
showContainer?
|
||||||
|
popupBottom():
|
||||||
|
<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>
|
||||||
|
}
|
||||||
|
{
|
||||||
|
showContainerA?popupPrice():''
|
||||||
|
}
|
||||||
|
</View>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
BIN
src/pagesHome/assets/adoptionMainBg.png
Normal file
BIN
src/pagesHome/assets/adoptionMainBg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
BIN
src/pagesHome/assets/crad.png
Normal file
BIN
src/pagesHome/assets/crad.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
src/pagesHome/assets/olList.png
Normal file
BIN
src/pagesHome/assets/olList.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 171 B |
5
src/pagesHome/index.scss
Normal file
5
src/pagesHome/index.scss
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
.cradActice{
|
||||||
|
background-color: #e8f8db;
|
||||||
|
color: #207c06;
|
||||||
|
border: 4px solid #7fcf5e;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user