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

对接api3

Browse Source
This commit is contained in:
cheng
2022-05-09 10:03:33 +08:00
parent 4c46c6e22d
commit 883c24b7be
14 changed files with 294 additions and 203 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/details/components/orderCount/index.tsx
+33 -25
View File
@@ -7,41 +7,44 @@ import Counter from "../counter";
import Big from 'big.js'
import classnames from "classnames";
import styles from "./index.module.scss"
import { memo, useEffect, useState } from "react";
import { memo, useEffect, useRef, useState } from "react";
import {GetColorList} from "@/api/materialColor"
import { useRouter } from "@tarojs/taro";
type param = {
show?: true|false,
onClose?: () => void
onClose?: () => void,
title?: string,
productId?: number
}
export default memo(({show = false, onClose}: param) => {
export default memo(({show = false, onClose, title = '', productId = 0}: param) => {
const selectList = [
{step:1, digits:2, title:'剪板', unit:'米'},
{step:1, digits:2, title:'散剪', unit:'米'},
{step:1, digits:0, title:'大货', unit:'件'}
{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'},
]
const [selectIndex, setSelectIndex] = useState(0)
const selectProduct = (index:number) => {
setSelectIndex(index)
}
//获取面料颜色列表
const {fetchData:colorFetchData} = GetColorList()
const [list, setList] = useState<any[]>([])
const [loading, setLoading] = useState(false)
console.log('执行执行')
const condition = useRef({physical_warehouse:1, sale_mode:selectIndex, product_id:0})
const getColorList = async () => {
setLoading(() => true)
let {data} = await colorFetchData(condition.current)
setList([...data.list])
setLoading(() => false)
}
useEffect(() => {
if(!show) return
let lists:any[] = []
for(let i = 0; i < 20; i++) {
lists = [...lists, {
title:`${i}#薄荷绿`,
subtitle: '0770# 21S单面平纹(食毛)',
tag: '剪板',
count:0,
show: false,
}]
}
setList([...lists])
if(show) {
condition.current.product_id = productId
getColorList()
}
}, [show])
useEffect(() => {
@@ -62,7 +65,6 @@ export default memo(({show = false, onClose}: param) => {
setShowPopup(false)
}
//计算总数量和总米/件数
const [selectCount, setSelectCount] = useState({
sumCount: 0,
@@ -98,12 +100,17 @@ export default memo(({show = false, onClose}: param) => {
setSearchShow(true)
}
const addShopCart = () => {
}
return (
<View className={styles.shop_cart_main}>
<Popup showTitle={false} show={showPopup} onClose={() => closePopup()}>
<View className={styles.popup_con}>
<View className={styles.header}>0770# 21S单面平纹(食毛)</View>
<View className={styles.header}>{title}</View>
<View className={styles.search}>
<View className={styles.search_title}>下单类型:</View>
<View className={styles.search_list}>
@@ -119,9 +126,10 @@ export default memo(({show = false, onClose}: param) => {
<View className={styles.text} onClick={() => setSearchShow(false)}>取消</View>
</View>}
<View className={styles.colorNum}>
<View className={styles.title}>颜色分类 (13)</View>
<View className={styles.title}>颜色分类 (13) {list.length}</View>
<View className={classnames('iconfont icon-sousuo', styles.miconfont)} onClick={() => changeSearchShow()}></View>
</View>
<View className={styles.product_color_con}>
{list.length > 0&&<InfiniteScroll>
<View className={styles.color_con}>
@@ -156,7 +164,7 @@ export default memo(({show = false, onClose}: param) => {
<View className={styles.buy_btn}>
<View className={styles.buy_btn_con}>
<View className={styles.count}>当前已选{selectCount.kindCount}种，共{selectCount.sumCount}{selectList[selectIndex].unit}</View>
<View className={classnames(styles.add_cart, selectCount.kindCount&&styles.select_add_cart)}>加入购物车</View>
<View className={classnames(styles.add_cart, selectCount.kindCount&&styles.select_add_cart)} onClick={() => addShopCart()}>加入购物车</View>
</View>
</View>
</View>
src/pages/details/index.tsx
+38 -44
View File
@@ -1,5 +1,5 @@
import { Button, Image, RichText, Swiper, SwiperItem, Text, View } from '@tarojs/components'
import { Button, Image, RichText, ScrollView, Swiper, SwiperItem, Text, View } from '@tarojs/components'
import Taro, { useDidShow, useRouter, useShareAppMessage } from '@tarojs/taro';
import classnames from "classnames";
import DesSwiper from './components/swiper';
@@ -8,9 +8,11 @@ import ShopCart from '@/components/shopCart';
import Preview,{colorItem} from './components/preview';
import styles from './index.module.scss'
import { useEffect, useMemo, useState } from 'react';
import {formatHashTag} from '@/common/fotmat'
import useManualPullDownRefresh from '@/use/useManualPullDownRefresh';
import { goLink } from '@/common/common';
import useUserInfo from '@/use/useUserInfo';
import {GetProductDetailApi} from '@/api/material'
type item = {title:string, img:string, url:string, id:number}
@@ -22,12 +24,22 @@ type params = {
export default (props:params) => {
const router = useRouter()
useEffect(() => {
console.log('router::',router)
}, [])
//页面下拉刷新
const res = useManualPullDownRefresh()
//获取数据
const [productInfo, setProductInfo] = useState<any>({})
const {fetchData} = GetProductDetailApi()
useEffect(() => {
getProductDetail()
}, [])
const getProductDetail = async () => {
let {data} = await fetchData({id: router.params.id})
setProductInfo(data)
}
//面料名称
const productName = useMemo(() => {
return formatHashTag(productInfo.code, productInfo.name)
},[productInfo])
const list = [
{
@@ -46,8 +58,6 @@ export default (props:params) => {
const [showCart, setShowCart] = useState(false)
const [showOrderCount, setShowOrderCount] = useState(false)
const html = `<h1>这里是详情</h1>
@@ -55,27 +65,13 @@ export default (props:params) => {
<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">
`
const colorList = [
{
title:'#1',
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:'#1',
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
},
]
const [colorInfo, setColorInfo] = useState<colorItem>()
const [showPreview, setShowPreview] = useState(false)
const getColorItem = (item) => {
setColorInfo({
title: item.title,
img: item.img,
title: item.code,
img: item.texture_url,
})
setShowPreview(true)
}
@@ -101,8 +97,6 @@ export default (props:params) => {
imageUrl: list[0].img
}
})
const {user} = useUserInfo()
return (
@@ -110,8 +104,8 @@ export default (props:params) => {
<DesSwiper list={list}/>
<View className={styles.product_header}>
<View className={styles.title}>
<View className={styles.name}>0770# 21S单面平纹(食毛)</View>
<View className={styles.des}>面料描述，疯狂描述。。。</View>
<View className={styles.name}>{productName}</View>
<View className={styles.des}>{productInfo.describe}</View>
</View>
<View className={styles.share}>
<View className={classnames('iconfont icon-fenxiang', styles.miconfont)}></View>
@@ -128,24 +122,24 @@ export default (props:params) => {
<View className={styles.des_data}>
<View className={styles.title}>详情参数</View>
<View className={styles.con}>
<View className={styles.des_text}>编号：<Text>0770</Text></View>
<View className={styles.des_text}>幅宽：<Text>160cm</Text></View>
<View className={styles.des_text}>克重：<Text>160g</Text></View>
<View className={styles.des_text}>成分：<Text>67.6%棉24%涤纶6.4%氨纶%氨纶氨纶%氨纶</Text></View>
<View className={styles.des_text}>编号：<Text>{productInfo.code}</Text></View>
<View className={styles.des_text}>幅宽：<Text>{productInfo.width}</Text></View>
<View className={styles.des_text}>克重：<Text>{productInfo.weight_density}</Text></View>
<View className={styles.des_text}>成分：<Text>{productInfo.component}</Text></View>
</View>
</View>
<View className={styles.product_color}>
<View className={styles.title}>色号 (10)</View>
<View className={styles.list}>
{colorList.map(item => {
return <View className={styles.item} onClick={() => getColorItem(item)}>
<View className={styles.item_color}>
<Image src={item.img}></Image>
</View>
<View className={styles.item_name}>{item.title}</View>
</View>
})}
</View>
<View className={styles.list}>
{productInfo?.product_color_list?.map(item => {
return <View className={styles.item} onClick={() => getColorItem(item)}>
<View className={styles.item_color}>
<Image src={item.texture_url}></Image>
</View>
<View className={styles.item_name}>{item.code}</View>
</View>
})}
</View>
</View>
<View className={styles.product_detail}>
<RichText nodes={html}></RichText>
@@ -157,7 +151,7 @@ export default (props:params) => {
</View>
<View className={styles.buy_btn} onClick={() => setShowOrderCount(true)}>开始下单</View>
</View>
<OrderCount show={showOrderCount} onClose={() => setShowOrderCount(false)}/>
<OrderCount show={showOrderCount} onClose={() => setShowOrderCount(false)} title={productName} productId={productInfo.id}/>
<ShopCart show={showCart} onClose={() => setShowCart(false)}/>
<Preview value={colorInfo} show={showPreview} onClose={() => setShowPreview(false)}/>
<View className='common_safe_area_y'></View>