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

对接确认订单

Browse Source
This commit is contained in:
cheng
2022-05-16 19:14:09 +08:00
parent 91934d0905
commit 754b3330a9
17 changed files with 761 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/filter copy/index copy.tsx
+130
View File
@@ -0,0 +1,130 @@
import { GetProductKindListApi } from "@/api/material";
import Popup, {Params as PopuParams} from "@/components/popup"
import { Input, ScrollView, Text, Textarea, View } from "@tarojs/components"
import { useDidShow } from "@tarojs/taro";
import classnames from "classnames";
import { useEffect, useState } from "react";
import styles from './index.module.scss'
type params = {
onFiltr?: (val:object) => void
} & PopuParams
export default ({onClose, onFiltr, show = false}:params) => {
//搜索条件
const [filterObj, setFilterObj] = useState({
seriesId: '',
minWidth: '',
maxWidth: '',
minWeight: '',
maxWeight: '',
element: ''
})
//获取系列
const {fetchData: kindFetchData} = GetProductKindListApi()
const [kindList, setKindList] = useState<any[]>([])
const getCategoryList = async () => {
let {data} = await kindFetchData()
setKindList(data.list)
}
useEffect(() => {
show&&getCategoryList()
}, [show])
//切换系列
const changeKind = (e) => {
setFilterObj({...filterObj, seriesId:e.id})
}
const onCloseEven = () => {
onClose?.()
}
const onRest = () => {
console.log('12123')
setFilterObj({
seriesId: '',
minWidth: '',
maxWidth: '',
minWeight: '',
maxWeight: '',
element: ''
})
}
useEffect(() => {
console.log(filterObj)
}, [filterObj])
const onVerify = () => {
console.log(filterObj)
onFiltr?.(filterObj)
}
const setNumber = (e, field) => {
console.log(e)
let num = parseFloat(e.detail.value)
if(isNaN(num)) {
filterObj[field] = null
} else {
filterObj[field] = parseFloat(num.toFixed(2))
}
setFilterObj({...filterObj})
}
const setElement = (e) => {
let res = e.detail.value
setFilterObj({...filterObj, element:res})
}
return (
<Popup position="right" show={show} showTitle={false} onClose={() => onCloseEven()} showIconButton={true}>
<View className={styles.popup_main}>
<View className={styles.popup_title}>全部筛选</View>
<ScrollView scrollY className={styles.scroll}>
<View className={styles.popup_filter}>
<View className={styles.popup_filter_item}>
<View className={styles.title}>系列</View>
<View className={styles.btn_list}>
{kindList.map(item => <View key={item.id} onClick={() => changeKind(item)} className={classnames(styles.btn_item, (filterObj.seriesId == item.id)&&styles.select_btn_item)}>{item.name}</View>)}
</View>
</View>
<View className={styles.popup_filter_item}>
<View className={styles.title}>幅宽</View>
<View className={styles.btn_list_input}>
<View className={styles.btn_width}><Input value={filterObj.minWidth} type="digit" onBlur={(e) => setNumber(e,'minWidth')} placeholder="自定义最低值" placeholderStyle="font-size: 26rpx"/></View>
<Text>—</Text>
<View className={styles.btn_width}><Input value={filterObj.maxWidth} type="digit" onBlur={(e) => setNumber(e,'maxWidth')} placeholder="自定义最高值" placeholderStyle="font-size: 26rpx"/></View>
<View className={styles.unit}>cm</View>
</View>
</View>
<View className={styles.popup_filter_item}>
<View className={styles.title}>克重</View>
<View className={styles.btn_list_input}>
<View className={styles.btn_width}><Input type="digit" value={filterObj.minWeight} onBlur={(e) => setNumber(e,'minWeight')} placeholder="自定义最低值" placeholderStyle="font-size: 26rpx"/></View>
<Text>—</Text>
<View className={styles.btn_width}><Input type="digit" value={filterObj.maxWeight} onBlur={(e) => setNumber(e,'maxWeight')} placeholder="自定义最高值" placeholderStyle="font-size: 26rpx"/></View>
<View className={styles.unit}>g</View>
</View>
</View>
<View className={styles.popup_filter_item}>
<View className={styles.title}>成分</View>
<View className={styles.btn_list_element}>
<Textarea placeholder="请输入" cursorSpacing={60} value={filterObj.element} onInput={(e) => setElement(e)}/>
</View>
</View>
<View className="common_safe_area_y"></View>
</View>
</ScrollView>
<View className={styles.btns_con}>
<View className={styles.btns_two}>
<View className={styles.rest_btn} onClick={() => onRest()}>重置</View>
<View className={styles.verify_btn } onClick={() => onVerify()}>确认</View>
</View>
</View>
</View>
</Popup>
)
}
src/components/filter copy/index.module.scss
+126
View File
@@ -0,0 +1,126 @@
.popup_main{
width: 608px;
height: 100vh;
padding: 20px;
box-sizing: border-box;
display: flex;
flex-direction: column;
.popup_title{
font-size: $font_size;
font-weight: 700;
text-align: center;
padding: 20px 0;
}
.scroll{
flex:1;
height: 0;
}
.popup_filter{
padding-bottom: 100px;
}
.popup_filter_item{
margin-bottom: 20px;
.title{
font-size: $font_size;
color: $color_font_one;
font-weight: 700;
padding: 20px 0;
}
.btn_list{
display: grid;
grid-template-columns: repeat(3, 165.75px);
justify-content: space-between;
.btn_item{
// width: 165.75px;
height: 69.2px;
background: #f0f0f0;
border-radius: 34px;
text-align: center;
line-height: 69.2px;
font-size: $font_size_medium;
color: $color_font_one;
margin-bottom: 20px;
}
.select_btn_item{
color: $color_main;
background: #ecf5ff;
border: 2px solid #007aff;
width: 161.75px;
height: 65.2px;
}
}
.btn_list_input{
display: flex;
// justify-content: space-between;
align-items: center;
.btn_width {
width: 220px;
height: 70px;
background: #f0f0f0;
border-radius: 50px;
padding: 10px 20px;
box-sizing: border-box;
input{
width: 100%;
height: 100%;
font-size: $font_size_medium;
}
}
.unit{
color: $color_font_one;
font-size: $font_size;
margin-left: 20px;
}
text{
color: #ccc;
padding: 0 20px;
}
.width_main{
}
}
.btn_list_element{
background-color: #F0F0F0;
border-radius: 30px;
padding: 20px;
box-sizing: border-box;
textarea{
width: 100%;
height: 126px;
font-size: $font_size_medium;
}
}
}
.btns_con{
width: 100%;
position: fixed;
bottom:0;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
.btns_two{
display: flex;
width: 552px;
height: 82px;
border: 2px solid #cde5ff;
font-size: $font_size_big;
border-radius: 40px;
margin-bottom: 20px;
.rest_btn{
flex:1;
border-radius: 0px 40px 40px 0px;
text-align: center;
line-height: 82px;
color: $color_main;
}
.verify_btn{
flex:1;
border-radius: 0px 40px 40px 0px;
background: #007aff;
text-align: center;
line-height: 82px;
color: #fff;
}
}
}
}
src/components/filter copy/index.tsx
+128
View File
@@ -0,0 +1,128 @@
import { GetProductKindListApi } from "@/api/material";
import Popup, {Params as PopuParams} from "@/components/popup"
import { Input, ScrollView, Text, Textarea, View } from "@tarojs/components"
import { useDidShow } from "@tarojs/taro";
import classnames from "classnames";
import { useEffect, useState } from "react";
import styles from './index.module.scss'
type params = {
onFiltr?: (val:object) => void
} & PopuParams
export default ({onClose, onFiltr, show = false}:params) => {
//搜索条件
const [filterObj, setFilterObj] = useState({
seriesId: '',
minWidth: '',
maxWidth: '',
minWeight: '',
maxWeight: '',
element: ''
})
//获取系列
const {fetchData: kindFetchData} = GetProductKindListApi()
const [kindList, setKindList] = useState<any[]>([])
const getCategoryList = async () => {
let {data} = await kindFetchData()
setKindList(data.list)
}
useEffect(() => {
show&&getCategoryList()
}, [show])
//切换系列
const changeKind = (e) => {
setFilterObj({...filterObj, seriesId:e.id})
}
const onCloseEven = () => {
onClose?.()
}
const onRest = () => {
console.log('12123')
setFilterObj({
seriesId: '',
minWidth: '',
maxWidth: '',
minWeight: '',
maxWeight: '',
element: ''
})
}
useEffect(() => {
console.log(filterObj)
}, [filterObj])
const onVerify = () => {
console.log(filterObj)
onFiltr?.(filterObj)
}
const setNumber = (e, field) => {
console.log(e)
let num = parseFloat(e.detail.value)
if(isNaN(num)) {
filterObj[field] = null
} else {
filterObj[field] = parseFloat(num.toFixed(2))
}
setFilterObj({...filterObj})
}
const setElement = (e) => {
let res = e.detail.value
setFilterObj({...filterObj, element:res})
}
return (
<Popup position="right" show={show} showTitle={false} onClose={() => onCloseEven()} showIconButton={true}>
<View className={styles.popup_main}>
<View className={styles.popup_title}>全部筛选</View>
<ScrollView scrollY className={styles.scroll}>
<View className={styles.popup_filter}>
<View className={styles.popup_filter_item}>
<View className={styles.title}>系列</View>
<View className={styles.btn_list}>
{kindList.map(item => <View key={item.id} onClick={() => changeKind(item)} className={classnames(styles.btn_item, (filterObj.seriesId == item.id)&&styles.select_btn_item)}>{item.name}</View>)}
</View>
</View>
<View className={styles.popup_filter_item}>
<View className={styles.title}>幅宽</View>
<View className={styles.btn_list_input}>
<View className={styles.btn_width}><Input value={filterObj.minWidth} type="digit" onBlur={(e) => setNumber(e,'minWidth')} placeholder="请输入幅宽" placeholderStyle="font-size: 26rpx"/></View>
<View className={styles.unit}>cm</View>
</View>
</View>
<View className={styles.popup_filter_item}>
<View className={styles.title}>克重</View>
<View className={styles.btn_list_input}>
<View className={styles.btn_width}><Input type="digit" value={filterObj.minWeight} onBlur={(e) => setNumber(e,'minWeight')} placeholder="自定义最低值" placeholderStyle="font-size: 26rpx"/></View>
<Text>—</Text>
<View className={styles.btn_width}><Input type="digit" value={filterObj.maxWeight} onBlur={(e) => setNumber(e,'maxWeight')} placeholder="自定义最高值" placeholderStyle="font-size: 26rpx"/></View>
<View className={styles.unit}>g</View>
</View>
</View>
<View className={styles.popup_filter_item}>
<View className={styles.title}>成分</View>
<View className={styles.btn_list_element}>
<Textarea placeholder="请输入" cursorSpacing={60} value={filterObj.element} onInput={(e) => setElement(e)}/>
</View>
</View>
<View className="common_safe_area_y"></View>
</View>
</ScrollView>
<View className={styles.btns_con}>
<View className={styles.btns_two}>
<View className={styles.rest_btn} onClick={() => onRest()}>重置</View>
<View className={styles.verify_btn } onClick={() => onVerify()}>确认</View>
</View>
</View>
</View>
</Popup>
)
}
src/components/filter/index.module.scss
+2 -2
View File
@@ -31,7 +31,7 @@
grid-template-columns: repeat(3, 165.75px);
justify-content: space-between;
.btn_item{
width: 165.75px;
// width: 165.75px;
height: 69.2px;
background: #f0f0f0;
border-radius: 34px;
@@ -54,7 +54,7 @@
// justify-content: space-between;
align-items: center;
.btn_width {
width: 220px;
flex:1;
height: 70px;
background: #f0f0f0;
border-radius: 50px;
src/components/filter/index.tsx
+56 -55
View File
@@ -1,101 +1,102 @@
import { GetProductKindListApi } from "@/api/material";
import Popup, {Params as PopuParams} from "@/components/popup"
import { Input, ScrollView, Text, Textarea, View } from "@tarojs/components"
import { useDidShow } from "@tarojs/taro";
import classnames from "classnames";
import { useEffect, useState } from "react";
import styles from './index.module.scss'
type params = {
onFiltr?: (val:object) => void
onFiltr?: (val:object) => void //确定搜索
onRest?: (val:Object) => void //重置
} & PopuParams
export default ({onClose, onFiltr, show = false}:params) => {
const [filterObj, setFilterObj] = useState({
series: '',
minWidth: '',
maxWidth: '',
minWeight: '',
maxWeight: '',
element: ''
export default ({onClose, onFiltr, show = false, onRest}:params) => {
//搜索条件
const [filterObj, setFilterObj] = useState({
seriesId: '',
width: '',
weight: '',
element: ''
})
//获取系列
const {fetchData: kindFetchData} = GetProductKindListApi()
const [kindList, setKindList] = useState<any[]>([])
const getCategoryList = async () => {
let {data} = await kindFetchData()
setKindList(data.list)
}
useEffect(() => {
show&&getCategoryList()
}, [show])
//切换系列
const changeKind = (e) => {
setFilterObj({...filterObj, seriesId:e.id})
}
const onCloseEven = () => {
onClose?.()
}
const onRest = () => {
console.log('12123')
setFilterObj({
series: '',
minWidth: '',
maxWidth: '',
minWeight: '',
maxWeight: '',
//重置数据
const onRestEven = () => {
let res = {
seriesId: '',
width: '',
weight: '',
element: ''
})
}
useEffect(() => {
console.log(filterObj)
}, [filterObj])
const onVerify = () => {
console.log(filterObj)
onFiltr?.(filterObj)
}
const setNumber = (e, field) => {
console.log(e)
let num = parseFloat(e.detail.value)
if(isNaN(num)) {
filterObj[field] = null
} else {
filterObj[field] = parseFloat(num.toFixed(2))
}
setFilterObj(res)
onFiltr?.(filterObj)
onClose?.()
}
//提交搜索
const onVerify = () => {
onFiltr?.(filterObj)
onClose?.()
}
//获取幅宽或克重输入值或成分
const setFieldData = (e, field) => {
filterObj[field] = e.detail.value
setFilterObj({...filterObj})
}
const setElement = (e) => {
let res = e.detail.value
setFilterObj({...filterObj, element:res})
}
return (
<Popup position="right" show={show} showTitle={false} onClose={() => onCloseEven()} showIconButton={true}>
<View className={styles.popup_main}>
<View className={styles.popup_title}>全部筛选</View>
<ScrollView scrollY className={styles.scroll}>
<View className={styles.popup_filter}>
<View className={styles.popup_filter_item}>
<View className={styles.title}>系列</View>
<View className={styles.btn_list}>
<View className={classnames(styles.btn_item, styles.select_btn_item)}>不限</View>
<View className={styles.btn_item}>不限</View>
<View className={styles.btn_item}>不限</View>
<View className={styles.btn_item}>不限</View>
<View className={styles.btn_item}>不限</View>
<View className={styles.btn_item}>不限</View>
{kindList.map(item => <View key={item.id} onClick={() => changeKind(item)} className={classnames(styles.btn_item, (filterObj.seriesId == item.id)&&styles.select_btn_item)}>{item.name}</View>)}
</View>
</View>
<View className={styles.popup_filter_item}>
<View className={styles.title}>幅宽</View>
<View className={styles.btn_list_input}>
<View className={styles.btn_width}><Input value={filterObj.minWidth} type="digit" onBlur={(e) => setNumber(e,'minWidth')} placeholder="自定义最低值" placeholderStyle="font-size: 26rpx"/></View>
<Text>—</Text>
<View className={styles.btn_width}><Input value={filterObj.maxWidth} type="digit" onBlur={(e) => setNumber(e,'maxWidth')} placeholder="自定义最高值" placeholderStyle="font-size: 26rpx"/></View>
<View className={styles.btn_width}><Input value={filterObj.width} type="digit" onBlur={(e) => setFieldData(e,'width')} placeholder="请输入幅宽" placeholderStyle="font-size: 26rpx"/></View>
<View className={styles.unit}>cm</View>
</View>
</View>
<View className={styles.popup_filter_item}>
<View className={styles.title}>克重</View>
<View className={styles.btn_list_input}>
<View className={styles.btn_width}><Input type="digit" value={filterObj.minWeight} onBlur={(e) => setNumber(e,'minWeight')} placeholder="自定义最低值" placeholderStyle="font-size: 26rpx"/></View>
<Text>—</Text>
<View className={styles.btn_width}><Input type="digit" value={filterObj.maxWeight} onBlur={(e) => setNumber(e,'maxWeight')} placeholder="自定义最高值" placeholderStyle="font-size: 26rpx"/></View>
<View className={styles.unit}>g</View>
<View className={styles.btn_width}><Input type="digit" value={filterObj.weight} onBlur={(e) => setFieldData(e,'weight')} placeholder="请输入克重" placeholderStyle="font-size: 26rpx"/></View>
<View className={styles.unit}>kg</View>
</View>
</View>
<View className={styles.popup_filter_item}>
<View className={styles.title}>成分</View>
<View className={styles.btn_list_element}>
<Textarea placeholder="请输入" cursorSpacing={60} value={filterObj.element} onInput={(e) => setElement(e)}/>
<Textarea placeholder="请输入" cursorSpacing={60} value={filterObj.element} onInput={(e) => setFieldData(e, 'element')}/>
</View>
</View>
@@ -104,7 +105,7 @@ export default ({onClose, onFiltr, show = false}:params) => {
</ScrollView>
<View className={styles.btns_con}>
<View className={styles.btns_two}>
<View className={styles.rest_btn} onClick={() => onRest()}>重置</View>
<View className={styles.rest_btn} onClick={() => onRestEven()}>重置</View>
<View className={styles.verify_btn } onClick={() => onVerify()}>确认</View>
</View>
</View>
src/components/loadingCard/index.tsx
+5 -3
View File
@@ -5,17 +5,19 @@ import { memo } from "react";
type Params = {
styleLoading?: Object,
title?: string
title?: string,
loadingIcon?: false|true
}
export default memo(({
styleLoading = {},
title = "加载中..."
title = "加载中...", //显示的文字
loadingIcon = true //是否显示加载图标
}:Params) => {
console.log('loadingCard:::')
return (
<>
<View className={style.loadingCard_main}>
<Loading/>
{loadingIcon&&<Loading/>}
<View className={style.loading_text}>{title}</View>
</View>
</>
src/components/search/index.tsx
+16 -10
View File
@@ -17,23 +17,29 @@ type Params = {
btnStyle?: Object,
btnTitle?: string,
debounceTime?: number //防抖时间，不设默认为零
defaultValue?: string
}
export default forwardRef(({
clickOnSearch,
changeOnSearch,
disabled = false,
clickOnSearch, //点击筛选按钮触发
changeOnSearch, //输入文字触发
disabled = false, //是否禁用
placeholder = '输入搜索内容',
showIcon = true,
showBtn = false,
btnStyle = {},
placeIcon = 'inner',
btnTitle = '搜索',
debounceTime = 0,
showIcon = true, //是否显示关闭图标
showBtn = false, //是否显示搜索按钮
btnStyle = {},
placeIcon = 'inner',
btnTitle = '搜索', //搜索文字
debounceTime = 0, //防抖时间，不设默认为零
defaultValue = '' //默认值
}:Params, ref) => {
const [inputCon , setInputCon] = useState('')
const debounceTimeRef = useRef(0)
useEffect(() => {
setInputCon(defaultValue)
}, [defaultValue])
useEffect(() => {
debounceTimeRef.current = debounceTime
}, [debounceTime])
@@ -63,7 +69,7 @@ export default forwardRef(({
return (
<>
<View className={styles.search_main} onClick={() => clickOnSearch?.(inputCon)}>
<View className={styles.search_main} >
<View className={styles.search_con}>
{showIcon&&<View className={classnames('iconfont', 'icon-sousuo', styles.icon_a_sousuo1_self, placeIcon=='inner'?styles.icon_inner:styles.icon_out)}></View>}
<Input placeholderStyle='color:#ABABAB; font-size:26rpx' className={classnames(placeIcon=='out'&&styles.input_out)} disabled={disabled} value={inputCon} placeholder={placeholder} onInput={(e) => onInputEven(e)}></Input>