Tony/crab-wxapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat：小程序 认养研发

Browse Source
This commit is contained in:
Zxuyoubin 2024-06-26 09:04:39 +08:00
parent 3c7b1bd42e
commit 6f343604a6
5 changed files with 459 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

457
src/pagesHome/adoption.tsx
View File

@ -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 (
<View>Adoption</View>
)
<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 (
<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
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 MiB

BIN
src/pagesHome/assets/crad.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
src/pagesHome/assets/olList.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 171 B

5
src/pagesHome/index.scss Normal file
View File

@ -0,0 +1,5 @@
.cradActice{
background-color: #e8f8db;
color: #207c06;
border: 4px solid #7fcf5e;
}