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

已对接登录和下单选择商品

Browse Source
This commit is contained in:
cheng
2022-05-09 10:03:33 +08:00
parent 883c24b7be
commit d03105a7d0
14 changed files with 227 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/details/components/counter/index.tsx
+9 -8
View File
@@ -3,18 +3,19 @@ import { useEffect, useMemo, useRef, useState } from "react"
import Big from 'big.js'
import styles from "./index.module.scss"
type params = {
minNum?: number,
maxNum?: number,
step?: number,
defaultNum?: number,
minNum?: number, //最小值
maxNum?: number, //最大值
step?: number, //步长
defaultNum?: number, //默认值
digits?: number //多少位小数
onChange?:(val:number) => void,
onBlue?:(val:number) => void,
onClickBtn?:(val:number) => void,
onChange?:(val:number) => void,
onBlue?:(val:number) => void, //失去焦点触发
onClickBtn?:(val:number) => void,
unit?: string
}
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 num_res = Big(count).add(step).toNumber()
@@ -27,7 +28,7 @@ export default ({minNum = 0, maxNum = 100, step=1, digits = 0, defaultNum = 0, o
const minus = () => {
let {count} = value
let num_res = Big(count).minus(step).toNumber()
num_res = num_res <= minNum?minNum:num_res
num_res = num_res < minNum?0:num_res
setValue({...value, count:num_res})
onChange?.(parseFloat(num_res))
onClickBtn?.(parseFloat(num_res))
src/pages/details/components/orderCount/index.module.scss
+6
View File
@@ -102,6 +102,12 @@
font-size: $font_size;
color: $color_main;
}
.priceText{
font-size: $font_size_big;
Text{
font-size: $font_size_min;
}
}
}
.btn_con{
display: flex;
src/pages/details/components/orderCount/index.tsx
+59 -25
View File
@@ -1,4 +1,4 @@
import {Image, ScrollView, View } from "@tarojs/components"
import {Image, ScrollView, View, Text } from "@tarojs/components"
import Popup from "@/components/popup"
import LoadingCard from "@/components/loadingCard";
import Search from "@/components/search";
@@ -7,9 +7,12 @@ import Counter from "../counter";
import Big from 'big.js'
import classnames from "classnames";
import styles from "./index.module.scss"
import { memo, useEffect, useRef, useState } from "react";
import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
import {GetColorList} from "@/api/materialColor"
import { useRouter } from "@tarojs/taro";
import UseLogin from "@/use/useLogin"
import { formatHashTag, formatMillionYuan } from "@/common/fotmat";
import { getFilterData } from "@/common/util";
type param = {
show?: true|false,
@@ -19,9 +22,9 @@ type param = {
}
export default memo(({show = false, onClose, title = '', productId = 0}: param) => {
const selectList = [
{id: 0, step:1, digits:0, title:'大货', unit:'件', eunit:'kg'},
{id: 1, step:1, digits:2, title:'剪板', unit:'米', eunit:'m'},
{id: 2, step:1, digits:2, title:'散剪', unit:'米', eunit:'m'},
{id: 0, step:1, digits:0, maxNum:100000, defaultNum:1, title:'大货', unit:'件', eunit:'kg'},
{id: 1, step:1, digits:2, maxNum:9.99, defaultNum:1, title:'剪板', unit:'米', eunit:'m'},
{id: 2, step:1, digits:2, minNum:10, maxNum:100000, defaultNum:10, title:'散剪', unit:'米', eunit:'kg'},
]
const [selectIndex, setSelectIndex] = useState(0)
const selectProduct = (index:number) => {
@@ -32,33 +35,31 @@ export default memo(({show = false, onClose, title = '', productId = 0}: param)
const {fetchData:colorFetchData} = GetColorList()
const [list, setList] = useState<any[]>([])
const [loading, setLoading] = useState(false)
const condition = useRef({physical_warehouse:1, sale_mode:selectIndex, product_id:0})
const condition = useRef({physical_warehouse:1, sale_mode:selectIndex, product_id:0, code_or_name:null})
const getColorList = async () => {
setLoading(() => true)
let {data} = await colorFetchData(condition.current)
console.log('数据:::',getFilterData(condition.current))
let {data} = await colorFetchData(getFilterData(condition.current))
setList([...data.list])
setLoading(() => false)
}
const [showPopup, setShowPopup] = useState(false)
//显示获取
useEffect(() => {
if(show) {
condition.current.product_id = productId
getColorList()
}
}
setShowPopup(show)
}, [show])
//卸载清空
useEffect(() => {
return () => {
setList([])
}
}, [])
const [showPopup, setShowPopup] = useState(false)
useEffect(() => {
setShowPopup(show)
}, [show])
//popup关闭
const closePopup = () => {
onClose?.()
@@ -90,8 +91,9 @@ export default memo(({show = false, onClose, title = '', productId = 0}: param)
}
const onAdd = (item) => {
item.show = true
item.count = item.count == 0?1:item.count
setList([...list])
item.count = selectList[selectIndex].defaultNum
console.log('aa:::',item.count)
setList((list) => [...list])
}
//搜索显示与隐藏
@@ -100,11 +102,41 @@ export default memo(({show = false, onClose, title = '', productId = 0}: param)
setSearchShow(true)
}
const addShopCart = () => {
//添加购物车
const {getSelfUserInfo} = UseLogin()
const addShopCart = () => {
getSelfUserInfo()
}
//显示金额
const priceFormat = useCallback((item) => {
let price = 0
if(selectIndex == 0) {
price = formatMillionYuan(item.bulk_price, 100).num
} else if(selectIndex == 1) {
price = formatMillionYuan(item.length_cut_price, 100).num
} else {
price = formatMillionYuan(item.weight_cut_price, 100).num
}
return <View className={styles.priceText}><Text>¥</Text>{Number(price) }<Text>{' /' + selectList[selectIndex].eunit}</Text></View>
}, [list, selectIndex])
//重置数据
useEffect(() => {
const newList = list.map(item => {
item.count = 0
item.show = false
return item
})
setList([...newList])
}, [selectIndex])
//筛选数据
const searchInput = (e) => {
condition.current.code_or_name = e
getColorList()
}
return (
<View className={styles.shop_cart_main}>
@@ -121,26 +153,26 @@ export default memo(({show = false, onClose, title = '', productId = 0}: param)
</View>
{searchShow&&<View className={styles.colorFind}>
<View className={styles.search}>
<Search placeIcon="out" />
<Search placeIcon="out" changeOnSearch={(e) => searchInput(e)} debounceTime={400}/>
</View>
<View className={styles.text} onClick={() => setSearchShow(false)}>取消</View>
</View>}
<View className={styles.colorNum}>
<View className={styles.title}>颜色分类 (13) {list.length}</View>
<View className={classnames('iconfont icon-sousuo', styles.miconfont)} onClick={() => changeSearchShow()}></View>
{!searchShow&&<View className={classnames('iconfont icon-sousuo', styles.miconfont)} onClick={() => changeSearchShow()}></View>}
</View>
<View className={styles.product_color_con}>
{list.length > 0&&<InfiniteScroll>
{list.length > 0&&<InfiniteScroll moreStatus={false}>
<View className={styles.color_con}>
{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'/>
<Image src={item.texture_url}/>
</View>
<View className={styles.item_con}>
<View className={styles.title}>{item.title}</View>
<View className={styles.num}>¥25.5/m</View>
<View className={styles.title}>{formatHashTag(item.code, item.name)}</View>
<View className={styles.num}>{priceFormat(item)}</View>
</View>
<View className={styles.btn_con}>
{!item.show&&<View className={styles.btn} onClick={() => onAdd(item)}>添加</View>
@@ -152,6 +184,8 @@ export default memo(({show = false, onClose, title = '', productId = 0}: param)
digits={selectList[selectIndex].digits}
onClickBtn={(e) => getInputValue(e, item)}
unit={selectList[selectIndex].unit}
minNum={selectList[selectIndex].minNum}
maxNum={selectList[selectIndex].maxNum}
/>
</View>}
</View>
src/pages/details/index.tsx
+5
View File
@@ -13,6 +13,7 @@ import useManualPullDownRefresh from '@/use/useManualPullDownRefresh';
import { goLink } from '@/common/common';
import useUserInfo from '@/use/useUserInfo';
import {GetProductDetailApi} from '@/api/material'
import useLogin from '@/use/useLogin';
type item = {title:string, img:string, url:string, id:number}
@@ -22,6 +23,10 @@ type params = {
style?: Object
}
export default (props:params) => {
const {checkLogin} = useLogin()
useDidShow(() => {
checkLogin()
})
const router = useRouter()