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

Merge branch 'dev' of http://git.online.zzfzyc.com/mp/EShop into dev

Browse Source
This commit is contained in:
li tong bao
2022-05-11 14:39:57 +08:00
parent 72338bc637 8c3e4e9bc1
commit 45e50a6a79
39 changed files with 2491 additions and 340 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/details/components/orderCount/index.tsx
+143 -75
View File
@@ -1,4 +1,4 @@
import {Image, ScrollView, View, Text } from "@tarojs/components"
import {Image, ScrollView, View, Text, CustomWrapper } from "@tarojs/components"
import Popup from "@/components/popup"
import LoadingCard from "@/components/loadingCard";
import Search from "@/components/search";
@@ -8,12 +8,16 @@ import Big from 'big.js'
import classnames from "classnames";
import styles from "./index.module.scss"
import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
import { useSelector } from "@/reducers/hooks"
import {GetColorList} from "@/api/materialColor"
import { useRouter } from "@tarojs/taro";
import {AddShoppingCartApi} from "@/api/shopCart"
import Taro, { 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,
onClose?: () => void,
@@ -21,39 +25,69 @@ type param = {
productId?: number
}
export default memo(({show = false, onClose, title = '', productId = 0}: param) => {
const selectList = [
{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 {adminUserInfo} = useSelector(state => state.userInfo)
const [selectList, setSelectList] = useState([
{id: 0, step:1, digits:0, maxNum:100000, defaultNum:1, title:'大货', unit:'件', eunit:'kg', priceField:'bulk_price'},
{id: 1, step:1, digits:2, maxNum:9.99, defaultNum:1, title:'剪板', unit:'米', eunit:'m', priceField:'length_cut_price'},
{id: 2, step:1, digits:2, minNum:10, maxNum:100000, defaultNum:10, title:'散剪', unit:'米', eunit:'kg', priceField:'weight_cut_price'},
])
const [selectIndex, setSelectIndex] = useState(0)
const selectProduct = (index:number) => {
setSelectIndex(index)
setSelectIndex(() => index)
}
//重置数据
useEffect(() => {
const newList = initList(list)
setList([...newList])
condition.current.code_or_name = null
setSearchShow(false)
}, [selectIndex])
//获取面料颜色列表
const {fetchData:colorFetchData} = GetColorList()
const {fetchData:colorFetchData, state: colorState} = GetColorList()
const [list, setList] = useState<any[]>([])
const [loading, setLoading] = useState(false)
const condition = useRef({physical_warehouse:1, sale_mode:selectIndex, product_id:0, code_or_name:null})
const condition = useRef({physical_warehouse:adminUserInfo?.physical_warehouse, sale_mode:selectIndex, product_id:0, code_or_name:null})
const getColorList = async () => {
setLoading(() => true)
console.log('数据:::',getFilterData(condition.current))
let {data} = await colorFetchData(getFilterData(condition.current))
setList([...data.list])
let lists = initList(data.list)
setList([...lists])
setLoading(() => false)
}
const [showPopup, setShowPopup] = useState(false)
useEffect(() => {
console.log('colorState::',colorState)
}, [colorState])
//显示获取
useEffect(() => {
if(show) {
setSelectIndex(0)
condition.current.code_or_name = null
setSearchShow(false)
condition.current.product_id = productId
getColorList()
}
setShowPopup(show)
}, [show])
//卸载清空
//初始化列表数据
const initList = useCallback((list) => {
const newList = list.map(item => {
item.count = 0
item.show = false
return item
})
return newList
}, [])
//卸载数据
useEffect(() => {
return () => {
setList([])
@@ -64,22 +98,28 @@ export default memo(({show = false, onClose, title = '', productId = 0}: param)
const closePopup = () => {
onClose?.()
setShowPopup(false)
setList([])
}
//计算总数量和总米/件数
const [selectCount, setSelectCount] = useState({
const [selectCount, setSelectCount] = useState<{sumCount:number, kindCount:number, color_list:any[]}>({
sumCount: 0,
kindCount: 0
kindCount: 0,
color_list: []
})
useEffect(() => {
let sumCount = 0, kindCount = 0
let sumCount = 0, kindCount = 0, color_list:any[] = []
let color_list_info = {}
list.map(item => {
if(item.count > 0) {
sumCount = Big(sumCount).add(item.count).toNumber()
kindCount ++
color_list_info = selectIndex == 0? {product_color_id:item.id, roll:item.count}:{product_color_id:item.id, length:item.count}
color_list.push(color_list_info)
}
})
setSelectCount({sumCount, kindCount})
setSelectCount({...selectCount, sumCount, kindCount, color_list})
}, [list])
//计数组件
@@ -92,7 +132,6 @@ export default memo(({show = false, onClose, title = '', productId = 0}: param)
const onAdd = (item) => {
item.show = true
item.count = selectList[selectIndex].defaultNum
console.log('aa:::',item.count)
setList((list) => [...list])
}
@@ -104,32 +143,42 @@ export default memo(({show = false, onClose, title = '', productId = 0}: param)
//添加购物车
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
const {fetchData:addFetchData} = AddShoppingCartApi()
const addShopCart = async () => {
try {
await getSelfUserInfo()
} catch(msg) {
Taro.showToast({
icon:'none',
title:msg
})
return false
}
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
if(selectCount.sumCount == 0) {
Taro.showToast({
icon:'none',
title:'请选择面料颜色!'
})
return false
}
const state = await addFetchData({
"sale_mode": selectIndex,
color_list: selectCount.color_list
})
setList([...newList])
}, [selectIndex])
if(state.success) {
Taro.showToast({
title:'添加成功'
})
onClose?.()
} else {
Taro.showToast({
icon:'none',
title: state.msg
})
}
}
//筛选数据
const searchInput = (e) => {
@@ -137,10 +186,24 @@ export default memo(({show = false, onClose, title = '', productId = 0}: param)
getColorList()
}
//清空搜索内容
const searchRef = useRef<any>(null)
const clearSearch = () => {
searchRef.current.clearInput()
setSearchShow(false)
}
//格式化金额
const formatPrice = useCallback((item) => {
const price = Number(formatMillionYuan(item[selectList[selectIndex].priceField], 100).num)
return <View className={styles.priceText}><Text>¥</Text>{price}<Text> /{selectList[selectIndex].eunit}</Text></View>
}, [selectIndex])
return (
<View className={styles.shop_cart_main}>
<Popup showTitle={false} show={showPopup} onClose={() => closePopup()}>
<Popup showTitle={false} show={showPopup} onClose={() => closePopup()} >
<View className={styles.popup_con}>
<View className={styles.header}>{title}</View>
<View className={styles.search}>
@@ -153,47 +216,52 @@ export default memo(({show = false, onClose, title = '', productId = 0}: param)
</View>
{searchShow&&<View className={styles.colorFind}>
<View className={styles.search}>
<Search placeIcon="out" changeOnSearch={(e) => searchInput(e)} debounceTime={400}/>
<Search placeIcon="out" ref={searchRef} changeOnSearch={(e) => searchInput(e)} debounceTime={400}/>
</View>
<View className={styles.text} onClick={() => setSearchShow(false)}>取消</View>
<View className={styles.text} onClick={() => clearSearch()}>取消</View>
</View>}
<View className={styles.colorNum}>
<View className={styles.title}>颜色分类 (13) {list.length}</View>
<View className={styles.title}>颜色分类 ({list.length})</View>
{!searchShow&&<View className={classnames('iconfont icon-sousuo', styles.miconfont)} onClick={() => changeSearchShow()}></View>}
</View>
<View className={styles.product_color_con}>
{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={item.texture_url}/>
{(list.length <= 0 && colorState.loading)&&<LoadingCard/>}
{(list.length > 0&& !colorState.loading)&&
<InfiniteScroll moreStatus={false}>
<View className={styles.color_con}>
{list.map(item => {
return <View className={styles.item} key={item.id}>
<View className={styles.item_color}>
<Image src={item.texture_url}/>
</View>
<View className={styles.item_con}>
<View className={styles.title}>{formatHashTag(item.code, item.name)}</View>
<View className={styles.num}>
{formatPrice(item)}
</View>
</View>
<View className={styles.btn_con}>
{!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}
minNum={selectList[selectIndex].minNum}
maxNum={selectList[selectIndex].maxNum}
/>
</View>}
</View>
</View>
<View className={styles.item_con}>
<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>
||<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}
minNum={selectList[selectIndex].minNum}
maxNum={selectList[selectIndex].maxNum}
/>
</View>}
</View>
</View>
})}
</View>
</InfiniteScroll>||
<View className={styles.noData}>暂无此商品</View>}
})}
</View>
</InfiniteScroll>}
{(list.length <= 0 && !colorState.loading)&&<View className={styles.noData}>暂无此商品</View>}
</View>
<View className={styles.buy_btn}>
<View className={styles.buy_btn_con}>
src/pages/details/components/swiper/index.tsx
+2 -2
View File
@@ -1,3 +1,4 @@
import { formatImgUrl } from "@/common/fotmat"
import { Image, Swiper, SwiperItem, View } from "@tarojs/components"
import { useMemo, useRef, useState } from "react"
import styles from './index.module.scss'
@@ -18,7 +19,6 @@ export default ({list = []}: params) => {
const swiperChange = (e) => {
setPageIndex(e.detail.current + 1)
pageRef.current.innerHTML = 2
}
@@ -28,7 +28,7 @@ export default ({list = []}: params) => {
{list.map((item) => {
return <SwiperItem key={item.id}>
<View className={styles.image_item} >
<Image mode="aspectFill" 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>
<Image mode="aspectFill" src={formatImgUrl(item)}></Image>
</View>
</SwiperItem>
})}
src/pages/details/index.module.scss
+7 -1
View File
@@ -145,7 +145,13 @@
background-color: $color_main;
font-size: $font_size;
color: #fff;
position: relative;
.phoneBtn{
background-color: rgba(0, 0, 0, 0);
position: absolute;
width: 100%;
height: 100%;
}
}
}
}
src/pages/details/index.tsx
+40 -24
View File
@@ -1,6 +1,6 @@
import { Button, Image, RichText, ScrollView, Swiper, SwiperItem, Text, View } from '@tarojs/components'
import Taro, { useDidShow, useRouter, useShareAppMessage } from '@tarojs/taro';
import { Button, CustomWrapper, Image, RichText, ScrollView, Swiper, SwiperItem, Text, View } from '@tarojs/components'
import Taro, { useDidShow, usePullDownRefresh, useRouter, useShareAppMessage } from '@tarojs/taro';
import classnames from "classnames";
import DesSwiper from './components/swiper';
import OrderCount from './components/orderCount';
@@ -23,7 +23,8 @@ type params = {
style?: Object
}
export default (props:params) => {
const {checkLogin} = useLogin()
const {checkLogin, getPhoneNumber, userInfo} = useLogin()
useDidShow(() => {
checkLogin()
})
@@ -39,6 +40,7 @@ export default (props:params) => {
const getProductDetail = async () => {
let {data} = await fetchData({id: router.params.id})
setProductInfo(data)
Taro.stopPullDownRefresh()
}
//面料名称
@@ -46,27 +48,11 @@ export default (props:params) => {
return formatHashTag(productInfo.code, productInfo.name)
},[productInfo])
const list = [
{
title:'数据',
img:'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',
url:'',
id:1
},
{
title:'数据',
img:'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',
url:'',
id:2
}
]
const [showCart, setShowCart] = useState(false)
const [showOrderCount, setShowOrderCount] = useState(false)
const html = `<h1>这里是详情</h1>
<div style="font-size:13px">你好啊啊</div>
const html = `
<img style="width:100%" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic24.nipic.com%2F20121021%2F10910884_100200815001_2.jpg&refer=http%3A%2F%2Fpic24.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652257920&t=9353dda34f18ae2fe6803f3da35954bb">
`
@@ -99,14 +85,36 @@ export default (props:params) => {
return {
title: '自定义转发标题',
path: '/pages/details/index?id=10',
imageUrl: list[0].img
imageUrl: ''
}
})
//开始下单
const placeOrder = async (e:any) => {
try {
await getPhoneNumber(e.detail.code)
} catch(msg) {
Taro.showToast({
icon:"none",
title: msg
})
return false
}
setShowOrderCount(true)
}
//页面下拉刷新
usePullDownRefresh(() => {
getProductDetail()
})
return (
<View className={styles.main}>
<DesSwiper list={list}/>
<DesSwiper list={productInfo.texture_url||[]}/>
<View className={styles.product_header}>
<View className={styles.title}>
<View className={styles.name}>{productName}</View>
@@ -154,9 +162,17 @@ export default (props:params) => {
<View className={classnames('iconfont icon-gouwuche', styles.miconfont)}></View>
<View className={styles.text}>购物车</View>
</View>
<View className={styles.buy_btn} onClick={() => setShowOrderCount(true)}>开始下单</View>
{
!userInfo.adminUserInfo?.is_authorize_phone&&<View className={styles.buy_btn} >
<Button className={styles.phoneBtn} open-type="getPhoneNumber" onGetPhoneNumber={(e) => placeOrder(e)}></Button>
开始下单
</View>
|| <View className={styles.buy_btn} onClick={(e) => placeOrder(e)}>开始下单</View>
}
</View>
<OrderCount show={showOrderCount} onClose={() => setShowOrderCount(false)} title={productName} productId={productInfo.id}/>
<CustomWrapper>
<OrderCount show={showOrderCount} onClose={() => setShowOrderCount(false)} title={productName} productId={productInfo.id}/>
</CustomWrapper>
<ShopCart show={showCart} onClose={() => setShowCart(false)}/>
<Preview value={colorInfo} show={showPreview} onClose={() => setShowPreview(false)}/>
<View className='common_safe_area_y'></View>