xuan/TestEShopDist
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

下单功能

Browse Source
This commit is contained in:
cheng
2022-04-13 18:41:02 +08:00
parent 7f55f90241
commit 63e1e66a63
10 changed files with 329 additions and 262 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/details/components/counter/index.module.scss
+6 -3
View File
@@ -7,13 +7,15 @@
.reduce, .plus{
font-size: $font_size_big;
color: $color_main;
width: 60px;
height: 60px;
width: 46px;
height: 46px;
display: flex;
align-items: center;
justify-content:center;
font-size: 50px;
// flex:1;
background-color: $color_main;
color: #fff;
border-radius: 8px;
}
.input{
display: flex;
@@ -22,6 +24,7 @@
padding: 5px 10px;
box-sizing: border-box;
width: 106px;
border-radius: 10px;
}
input{
font-size: $font_size_medium;
src/pages/details/components/counter/index.tsx
+53 -18
View File
@@ -1,6 +1,6 @@
import { Input, View } from "@tarojs/components"
import { useEffect, useMemo, useRef, useState } from "react"
import {bignumber as mBignumber, add as mAdd, number as mNumber, subtract} from 'mathjs'
import Big from 'big.js'
import styles from "./index.module.scss"
type params = {
minNum?: number,
@@ -8,56 +8,90 @@ type params = {
step?: number,
defaultNum?: number,
digits?: number //多少位小数
onChange?:(val:number) => void,
onBlue?:(val:number) => void,
onClickBtn?:(val:number) => void,
unit?: string
}
export default ({minNum = 0, maxNum = 100, step=0.1, digits = 1, defaultNum = 3}: params) => {
// const [count, setCount] = useState<number | string>(0)
export default ({minNum = 0, maxNum = 100, step=1, digits = 0, defaultNum = 0, onChange, onBlue, onClickBtn, unit = ''}: params) => {
const [value, setValue] = useState<any>({count:defaultNum})
const onPlus = () => {
let {count} = value
let count_res = mBignumber(count)
let step_res = mBignumber(step)
let num = mAdd(count_res, step_res)
let num_res = mNumber(num) as number
let num_res = Big(count).add(step).toNumber()
num_res = num_res >= maxNum?maxNum:num_res
num_res = formatDigits(num_res)
setValue({...value, count:num_res})
onChange?.(parseFloat(num_res))
onClickBtn?.(parseFloat(num_res))
}
const minus = () => {
let {count} = value
let count_res = mBignumber(count)
let step_res = mBignumber(step)
let num = subtract(count_res, step_res)
let num_res = mNumber(num) as number
let num_res = Big(count).minus(step).toNumber()
num_res = num_res <= minNum?minNum:num_res
setValue({...value, count:num_res})
onChange?.(parseFloat(num_res))
onClickBtn?.(parseFloat(num_res))
}
//保留小数
const formatDigits = (num) => {
num = num + ''
if(num.includes('.')) {
if(num.includes('.')&&digits > 0) {
console.log('num::',num.includes('.'))
let res = num.split('.')
let last_num = res[1].substr(0, digits)
return res[0] + '.' + last_num
}
return num
return parseFloat(num)
}
//检查数据
const checkData = (val) => {
let num = parseFloat(val)
if(num > maxNum) return maxNum
if(num < minNum) return minNum
return val
}
const onInputEven = (e) => {
let res = e.detail.value
if(res != ''&&!isNaN(Number(res))) {
setValue({...value, count:formatDigits(res)})
if(res === '') {
setValue({...value, count:minNum})
onChange?.(minNum)
}
else if(!isNaN(Number(res))) {
let count = formatDigits(res)
count = checkData(count)
setValue({...value, count})
onChange?.(parseFloat(count as string))
} else {
let num = parseFloat(res)
if(!isNaN(num)) {
setValue({...value, count:formatDigits(num)})
let count = formatDigits(num)
count = checkData(count)
setValue({...value, count})
onChange?.(count as number)
} else {
setValue({...value, count:defaultNum})
onChange?.(defaultNum)
}
}
}
const onBluerEven = () => {
let num = parseFloat(value.count)
if(!isNaN(num)) {
let count = formatDigits(num)
count = checkData(count)
setValue({...value, count})
onBlue?.(count as number)
} else {
setValue({...value, count:defaultNum})
onBlue?.(defaultNum)
}
}
return (
<View className={styles.main}>
<View className={styles.reduce} onClick={() => minus()}>-</View>
@@ -65,9 +99,10 @@ export default ({minNum = 0, maxNum = 100, step=0.1, digits = 1, defaultNum = 3}
<Input
value={String(value.count)}
onInput={onInputEven}
onBlur={() => {}}
onBlur={onBluerEven}
type='digit'
/>
<View className={styles.unit}>米</View>
<View className={styles.unit}>{unit}</View>
</View>
<View className={styles.plus} onClick={() => onPlus()}>+</View>
</View>
src/pages/details/components/shopCart/index.module.scss
+10 -3
View File
@@ -12,6 +12,15 @@
}
.colorFind{
padding: 10px 20px;
display: flex;
align-items: center;
.search{
flex:1;
}
.text{
font-size: $font_size_medium;
color: $color_main;
}
}
.search{
display: flex;
@@ -108,11 +117,9 @@
text-align: center;
line-height: 64px;
color: #fff;
padding: 10px;
box-sizing: border-box;
}
.btn_count{
width: 268px;
width: 235px;
height: 64px;
background-color: #ECF5FF;
border-radius: 40px 0px 16px 0px;
src/pages/details/components/shopCart/index.tsx
+68 -26
View File
@@ -1,20 +1,24 @@
import {Image, ScrollView, View } from "@tarojs/components"
import Popup from "@/components/popup"
import classnames from "classnames";
import LoadingCard from "@/components/loadingCard";
import Search from "@/components/search";
import InfiniteScroll from "@/components/infiniteScroll";
import Counter from "../counter";
import Big from 'big.js'
import classnames from "classnames";
import styles from "./index.module.scss"
import { useEffect, useState } from "react";
import Taro from "@tarojs/taro";
import Search from "@/components/search";
import Counter from "../counter";
type param = {
show?: true|false,
onClose?: () => void
}
export default ({show = false, onClose}: param) => {
const selectList = ['剪板', '散剪', '大货']
const selectList = [
{step:1, digits:2, title:'剪板', unit:'米'},
{step:1, digits:2, title:'散剪', unit:'米'},
{step:1, digits:0, title:'大货', unit:'件'}
]
const [selectIndex, setSelectIndex] = useState(0)
const selectProduct = (index:number) => {
setSelectIndex(index)
@@ -30,7 +34,8 @@ export default ({show = false, onClose}: param) => {
title:`${i}#薄荷绿`,
subtitle: '0770# 21S单面平纹(食毛)',
tag: '剪板',
select: i%2?true: false
count:0,
show: false,
}]
}
setList([...lists])
@@ -48,15 +53,42 @@ export default ({show = false, onClose}: param) => {
setShowPopup(false)
}
//已选择提示
const [selectCountMsg, setSelectCountMsg] = useState('')
//计算总数量和总米/件数
const [selectCount, setSelectCount] = useState({
sumCount: 0,
kindCount: 0
})
useEffect(() => {
if(selectIndex == 2) {
setSelectCountMsg(`当前已选${1}种，共${1}米`)
} else {
setSelectCountMsg(`当前已选${1}种，共${1}条`)
}
},[selectIndex])
let sumCount = 0, kindCount = 0
list.map(item => {
if(item.count > 0) {
sumCount = Big(sumCount).add(item.count).toNumber()
kindCount ++
}
})
setSelectCount({sumCount, kindCount})
}, [list])
//计数组件
const getInputValue = (num, item) => {
item.count = parseFloat(num)
if(num == 0) item.show = false
setList([...list])
console.log(num)
}
const onAdd = (item) => {
item.show = true
item.count = item.count == 0?1:item.count
setList([...list])
}
//搜索显示与隐藏
const [searchShow, setSearchShow] = useState(false)
const changeSearchShow = () => {
setSearchShow(true)
}
return (
<View className={styles.shop_cart_main}>
@@ -67,34 +99,44 @@ export default ({show = false, onClose}: param) => {
<View className={styles.search_title}>下单类型:</View>
<View className={styles.search_list}>
{selectList.map((item, index) => {
return <View key={index} onClick={() => selectProduct(index)} className={classnames(styles.search_item, (selectIndex==index)&&styles.search_item_select)}>{item}</View>
return <View key={index} onClick={() => selectProduct(index)} className={classnames(styles.search_item, (selectIndex==index)&&styles.search_item_select)}>{item.title}</View>
})}
</View>
</View>
<View className={styles.colorFind}>
<Search placeIcon="out" showBtn={true}/>
</View>
{searchShow&&<View className={styles.colorFind}>
<View className={styles.search}>
<Search placeIcon="out" />
</View>
<View className={styles.text} onClick={() => setSearchShow(false)}>取消</View>
</View>}
<View className={styles.colorNum}>
<View className={styles.title}>颜色分类 (13)</View>
<View className={classnames('iconfont icon-sousuo', styles.miconfont)}></View>
<View className={classnames('iconfont icon-sousuo', styles.miconfont)} onClick={() => changeSearchShow()}></View>
</View>
<View className={styles.product_color_con}>
<InfiniteScroll>
<View className={styles.color_con}>
{new Array(10).fill('').map(item => {
{list.map(item => {
return <View className={styles.item}>
<View className={styles.item_color}>
<Image src='https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F811%2F021315104H2%2F150213104H2-3-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651817947&t=5467a207f845ddfc7737d55934e6b26d'/>
</View>
<View className={styles.item_con}>
<View className={styles.title}>1#薄荷绿</View>
<View className={styles.title}>{item.title}</View>
<View className={styles.num}>¥25.5/m</View>
</View>
<View className={styles.btn_con}>
{/* <View className={styles.btn}>添加</View> */}
<View className={styles.btn_count}>
<Counter/>
</View>
{!item.show&&<View className={styles.btn} onClick={() => onAdd(item)}>添加</View>
||<View className={styles.btn_count}>
<Counter
onBlue={(e) => getInputValue(e, item)}
defaultNum={item.count}
step={selectList[selectIndex].step}
digits={selectList[selectIndex].digits}
onClickBtn={(e) => getInputValue(e, item)}
unit={selectList[selectIndex].unit}
/>
</View>}
</View>
</View>
})}
@@ -103,7 +145,7 @@ export default ({show = false, onClose}: param) => {
</View>
<View className={styles.buy_btn}>
<View className={styles.buy_btn_con}>
<View className={styles.count}>{selectCountMsg}</View>
<View className={styles.count}>当前已选{selectCount.kindCount}种，共{selectCount.sumCount}{selectList[selectIndex].unit}</View>
<View className={styles.add_cart}>加入购物车</View>
</View>
</View>
src/pages/details/index.tsx
+14 -6
View File
@@ -3,8 +3,10 @@ import { Image, RichText, Swiper, SwiperItem, View } from '@tarojs/components'
import Taro from '@tarojs/taro';
import classnames from "classnames";
import DesSwiper from './components/swiper';
import ShopCart from './components/shopCart';
import OrderCount from './components/shopCart';
import ShopCart from '@/components/shopCart';
import styles from './index.module.scss'
import { useState } from 'react';
type item = {title:string, img:string, url:string, id:number}
type params = {
@@ -27,7 +29,10 @@ export default (props:params) => {
url:'',
id:2
}
]
]
const [showCart, setShowCart] = useState(false)
const [showOrderCount, setShowOrderCount] = useState(true)
const html = `<h1>这里是详情</h1>
<div style="font-size:13px">你好啊啊</div>
@@ -64,7 +69,9 @@ export default (props:params) => {
<View className={styles.list}>
{new Array(10).fill('').map(item => {
return <View className={styles.item}>
<View className={styles.item_color}></View>
<View className={styles.item_color}>
</View>
<View className={styles.item_name}>1#</View>
</View>
})}
@@ -76,11 +83,12 @@ export default (props:params) => {
<View className={styles.product_buy}>
<View className={styles.buy_cart}>
<View className={classnames('iconfont icon-gouwuche', styles.miconfont)}></View>
<View className={styles.text}>购物车</View>
<View className={styles.text} onClick={() => setShowCart(true)}>购物车</View>
</View>
<View className={styles.buy_btn}>开始下单</View>
<View className={styles.buy_btn} onClick={() => setShowOrderCount(true)}>开始下单</View>
</View>
<ShopCart show={true}/>
<OrderCount show={showOrderCount} onClose={() => setShowOrderCount(false)}/>
<ShopCart show={showCart} onClose={() => setShowCart(false)}/>
<View className='common_safe_area_y'></View>
</View>
)