对接api3
This commit is contained in:
parent
4c46c6e22d
commit
883c24b7be
12
src/api/login.ts
Normal file
12
src/api/login.ts
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
import { useRequest } from "@/use/useHttp"
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 登录
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
export const Login = () => {
|
||||||
|
return useRequest({
|
||||||
|
url: `/v1/mall/login`,
|
||||||
|
method: "post",
|
||||||
|
})
|
||||||
|
}
|
@ -33,3 +33,15 @@ export const GetProductListApi = () => {
|
|||||||
method: "get",
|
method: "get",
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取面料详情
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
export const GetProductDetailApi = () => {
|
||||||
|
return useRequest({
|
||||||
|
url: `/v1/mall/product`,
|
||||||
|
method: "get",
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
12
src/api/materialColor.ts
Normal file
12
src/api/materialColor.ts
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
import { useRequest } from "@/use/useHttp"
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取面料颜色列表
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
export const GetColorList = () => {
|
||||||
|
return useRequest({
|
||||||
|
url: `/v1/mall/product/color/list`,
|
||||||
|
method: "get",
|
||||||
|
})
|
||||||
|
}
|
12
src/api/shopCart.ts
Normal file
12
src/api/shopCart.ts
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
import { useRequest } from "@/use/useHttp"
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取购物车列表
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
export const GetShoppingCartApi = () => {
|
||||||
|
return useRequest({
|
||||||
|
url: `/v1/mall/shoppingCart/productColor`,
|
||||||
|
method: "get",
|
||||||
|
})
|
||||||
|
}
|
@ -11,7 +11,7 @@ export default ({desStatus = true, productList = []}:Params) => {
|
|||||||
return (
|
return (
|
||||||
<View className={styles.products_list}>
|
<View className={styles.products_list}>
|
||||||
{productList.map(item => {
|
{productList.map(item => {
|
||||||
return <View className={styles.products_item} onClick={() => goLink('/pages/details/index?id=1')}>
|
return <View className={styles.products_item} onClick={() => goLink(`/pages/details/index?id=${item.id}`)}>
|
||||||
<View className={styles.item_img}>
|
<View className={styles.item_img}>
|
||||||
<Image src={item.texture_url}/>
|
<Image src={item.texture_url}/>
|
||||||
<View className={styles.num}>{item.product_color_count}色</View>
|
<View className={styles.num}>{item.product_color_count}色</View>
|
||||||
|
@ -8,6 +8,7 @@ import styles from "./index.module.scss"
|
|||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
import Taro from "@tarojs/taro";
|
import Taro from "@tarojs/taro";
|
||||||
import { goLink } from "@/common/common";
|
import { goLink } from "@/common/common";
|
||||||
|
import {GetShoppingCartApi} from "@/api/shopCart"
|
||||||
|
|
||||||
type param = {
|
type param = {
|
||||||
show?: true|false,
|
show?: true|false,
|
||||||
@ -20,21 +21,21 @@ export default ({show = false, onClose}: param) => {
|
|||||||
setSelectIndex(index)
|
setSelectIndex(index)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//获取数据
|
||||||
const [list, setList] = useState<any[]>([])
|
const [list, setList] = useState<any[]>([])
|
||||||
const [loading, setLoading] = useState(false)
|
const [loading, setLoading] = useState(false)
|
||||||
|
const {fetchData} = GetShoppingCartApi()
|
||||||
|
const getShoppingCart = async () => {
|
||||||
|
setLoading(true)
|
||||||
|
const {data} = await fetchData()
|
||||||
|
setList(data)
|
||||||
|
setLoading(false)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if(!show) return
|
if(!show) return
|
||||||
let lists:any[] = []
|
getShoppingCart()
|
||||||
for(let i = 0; i < 20; i++) {
|
|
||||||
lists = [...lists, {
|
|
||||||
title:`${i}#薄荷绿`,
|
|
||||||
subtitle: '0770# 21S单面平纹(食毛)',
|
|
||||||
tag: '剪板',
|
|
||||||
select: i%2?true: false
|
|
||||||
}]
|
|
||||||
}
|
|
||||||
setList([...lists])
|
|
||||||
}, [show])
|
}, [show])
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@ -137,7 +138,7 @@ export default ({show = false, onClose}: param) => {
|
|||||||
})}
|
})}
|
||||||
</View>
|
</View>
|
||||||
</InfiniteScroll>}
|
</InfiniteScroll>}
|
||||||
{!loading&&list.length > 0&&<View className={styles.empty}>
|
{!loading&&list.length == 0 &&<View className={styles.empty}>
|
||||||
<View className={styles.title}>暂未选择商品</View>
|
<View className={styles.title}>暂未选择商品</View>
|
||||||
<View className={styles.btn}>去选购</View>
|
<View className={styles.btn}>去选购</View>
|
||||||
</View>}
|
</View>}
|
||||||
|
@ -7,41 +7,44 @@ import Counter from "../counter";
|
|||||||
import Big from 'big.js'
|
import Big from 'big.js'
|
||||||
import classnames from "classnames";
|
import classnames from "classnames";
|
||||||
import styles from "./index.module.scss"
|
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 = {
|
type param = {
|
||||||
show?: true|false,
|
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 = [
|
const selectList = [
|
||||||
{step:1, digits:2, title:'剪板', unit:'米'},
|
{id: 0, step:1, digits:0, title:'大货', unit:'件', eunit:'kg'},
|
||||||
{step:1, digits:2, title:'散剪', unit:'米'},
|
{id: 1, step:1, digits:2, title:'剪板', unit:'米', eunit:'m'},
|
||||||
{step:1, digits:0, title:'大货', unit:'件'}
|
{id: 2, step:1, digits:2, title:'散剪', unit:'米', eunit:'m'},
|
||||||
]
|
]
|
||||||
const [selectIndex, setSelectIndex] = useState(0)
|
const [selectIndex, setSelectIndex] = useState(0)
|
||||||
const selectProduct = (index:number) => {
|
const selectProduct = (index:number) => {
|
||||||
setSelectIndex(index)
|
setSelectIndex(index)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//获取面料颜色列表
|
||||||
|
const {fetchData:colorFetchData} = GetColorList()
|
||||||
const [list, setList] = useState<any[]>([])
|
const [list, setList] = useState<any[]>([])
|
||||||
const [loading, setLoading] = useState(false)
|
const [loading, setLoading] = useState(false)
|
||||||
|
const condition = useRef({physical_warehouse:1, sale_mode:selectIndex, product_id:0})
|
||||||
console.log('执行执行')
|
const getColorList = async () => {
|
||||||
|
setLoading(() => true)
|
||||||
|
let {data} = await colorFetchData(condition.current)
|
||||||
|
setList([...data.list])
|
||||||
|
setLoading(() => false)
|
||||||
|
}
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if(!show) return
|
if(show) {
|
||||||
let lists:any[] = []
|
condition.current.product_id = productId
|
||||||
for(let i = 0; i < 20; i++) {
|
getColorList()
|
||||||
lists = [...lists, {
|
|
||||||
title:`${i}#薄荷绿`,
|
|
||||||
subtitle: '0770# 21S单面平纹(食毛)',
|
|
||||||
tag: '剪板',
|
|
||||||
count:0,
|
|
||||||
show: false,
|
|
||||||
}]
|
|
||||||
}
|
}
|
||||||
setList([...lists])
|
|
||||||
}, [show])
|
}, [show])
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@ -62,7 +65,6 @@ export default memo(({show = false, onClose}: param) => {
|
|||||||
setShowPopup(false)
|
setShowPopup(false)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
//计算总数量和总米/件数
|
//计算总数量和总米/件数
|
||||||
const [selectCount, setSelectCount] = useState({
|
const [selectCount, setSelectCount] = useState({
|
||||||
sumCount: 0,
|
sumCount: 0,
|
||||||
@ -98,12 +100,17 @@ export default memo(({show = false, onClose}: param) => {
|
|||||||
setSearchShow(true)
|
setSearchShow(true)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const addShopCart = () => {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View className={styles.shop_cart_main}>
|
<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.popup_con}>
|
||||||
<View className={styles.header}>0770# 21S单面平纹(食毛)</View>
|
<View className={styles.header}>{title}</View>
|
||||||
<View className={styles.search}>
|
<View className={styles.search}>
|
||||||
<View className={styles.search_title}>下单类型:</View>
|
<View className={styles.search_title}>下单类型:</View>
|
||||||
<View className={styles.search_list}>
|
<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 className={styles.text} onClick={() => setSearchShow(false)}>取消</View>
|
||||||
</View>}
|
</View>}
|
||||||
<View className={styles.colorNum}>
|
<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 className={classnames('iconfont icon-sousuo', styles.miconfont)} onClick={() => changeSearchShow()}></View>
|
||||||
</View>
|
</View>
|
||||||
|
|
||||||
<View className={styles.product_color_con}>
|
<View className={styles.product_color_con}>
|
||||||
{list.length > 0&&<InfiniteScroll>
|
{list.length > 0&&<InfiniteScroll>
|
||||||
<View className={styles.color_con}>
|
<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}>
|
||||||
<View className={styles.buy_btn_con}>
|
<View className={styles.buy_btn_con}>
|
||||||
<View className={styles.count}>当前已选{selectCount.kindCount}种,共{selectCount.sumCount}{selectList[selectIndex].unit}</View>
|
<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>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
|
@ -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 Taro, { useDidShow, useRouter, useShareAppMessage } from '@tarojs/taro';
|
||||||
import classnames from "classnames";
|
import classnames from "classnames";
|
||||||
import DesSwiper from './components/swiper';
|
import DesSwiper from './components/swiper';
|
||||||
@ -8,9 +8,11 @@ import ShopCart from '@/components/shopCart';
|
|||||||
import Preview,{colorItem} from './components/preview';
|
import Preview,{colorItem} from './components/preview';
|
||||||
import styles from './index.module.scss'
|
import styles from './index.module.scss'
|
||||||
import { useEffect, useMemo, useState } from 'react';
|
import { useEffect, useMemo, useState } from 'react';
|
||||||
|
import {formatHashTag} from '@/common/fotmat'
|
||||||
import useManualPullDownRefresh from '@/use/useManualPullDownRefresh';
|
import useManualPullDownRefresh from '@/use/useManualPullDownRefresh';
|
||||||
import { goLink } from '@/common/common';
|
import { goLink } from '@/common/common';
|
||||||
import useUserInfo from '@/use/useUserInfo';
|
import useUserInfo from '@/use/useUserInfo';
|
||||||
|
import {GetProductDetailApi} from '@/api/material'
|
||||||
|
|
||||||
type item = {title:string, img:string, url:string, id:number}
|
type item = {title:string, img:string, url:string, id:number}
|
||||||
|
|
||||||
@ -22,12 +24,22 @@ type params = {
|
|||||||
export default (props:params) => {
|
export default (props:params) => {
|
||||||
|
|
||||||
const router = useRouter()
|
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 = [
|
const list = [
|
||||||
{
|
{
|
||||||
@ -46,8 +58,6 @@ export default (props:params) => {
|
|||||||
|
|
||||||
const [showCart, setShowCart] = useState(false)
|
const [showCart, setShowCart] = useState(false)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const [showOrderCount, setShowOrderCount] = useState(false)
|
const [showOrderCount, setShowOrderCount] = useState(false)
|
||||||
|
|
||||||
const html = `<h1>这里是详情</h1>
|
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">
|
<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 [colorInfo, setColorInfo] = useState<colorItem>()
|
||||||
const [showPreview, setShowPreview] = useState(false)
|
const [showPreview, setShowPreview] = useState(false)
|
||||||
const getColorItem = (item) => {
|
const getColorItem = (item) => {
|
||||||
setColorInfo({
|
setColorInfo({
|
||||||
title: item.title,
|
title: item.code,
|
||||||
img: item.img,
|
img: item.texture_url,
|
||||||
})
|
})
|
||||||
setShowPreview(true)
|
setShowPreview(true)
|
||||||
}
|
}
|
||||||
@ -102,16 +98,14 @@ export default (props:params) => {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
const {user} = useUserInfo()
|
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View className={styles.main}>
|
<View className={styles.main}>
|
||||||
<DesSwiper list={list}/>
|
<DesSwiper list={list}/>
|
||||||
<View className={styles.product_header}>
|
<View className={styles.product_header}>
|
||||||
<View className={styles.title}>
|
<View className={styles.title}>
|
||||||
<View className={styles.name}>0770# 21S单面平纹(食毛)</View>
|
<View className={styles.name}>{productName}</View>
|
||||||
<View className={styles.des}>面料描述,疯狂描述。。。</View>
|
<View className={styles.des}>{productInfo.describe}</View>
|
||||||
</View>
|
</View>
|
||||||
<View className={styles.share}>
|
<View className={styles.share}>
|
||||||
<View className={classnames('iconfont icon-fenxiang', styles.miconfont)}></View>
|
<View className={classnames('iconfont icon-fenxiang', styles.miconfont)}></View>
|
||||||
@ -128,21 +122,21 @@ export default (props:params) => {
|
|||||||
<View className={styles.des_data}>
|
<View className={styles.des_data}>
|
||||||
<View className={styles.title}>详情参数</View>
|
<View className={styles.title}>详情参数</View>
|
||||||
<View className={styles.con}>
|
<View className={styles.con}>
|
||||||
<View className={styles.des_text}>编号:<Text>0770</Text></View>
|
<View className={styles.des_text}>编号:<Text>{productInfo.code}</Text></View>
|
||||||
<View className={styles.des_text}>幅宽:<Text>160cm</Text></View>
|
<View className={styles.des_text}>幅宽:<Text>{productInfo.width}</Text></View>
|
||||||
<View className={styles.des_text}>克重:<Text>160g</Text></View>
|
<View className={styles.des_text}>克重:<Text>{productInfo.weight_density}</Text></View>
|
||||||
<View className={styles.des_text}>成分:<Text>67.6%棉24%涤纶6.4%氨纶%氨纶氨纶%氨纶</Text></View>
|
<View className={styles.des_text}>成分:<Text>{productInfo.component}</Text></View>
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
<View className={styles.product_color}>
|
<View className={styles.product_color}>
|
||||||
<View className={styles.title}>色号 (10)</View>
|
<View className={styles.title}>色号 (10)</View>
|
||||||
<View className={styles.list}>
|
<View className={styles.list}>
|
||||||
{colorList.map(item => {
|
{productInfo?.product_color_list?.map(item => {
|
||||||
return <View className={styles.item} onClick={() => getColorItem(item)}>
|
return <View className={styles.item} onClick={() => getColorItem(item)}>
|
||||||
<View className={styles.item_color}>
|
<View className={styles.item_color}>
|
||||||
<Image src={item.img}></Image>
|
<Image src={item.texture_url}></Image>
|
||||||
</View>
|
</View>
|
||||||
<View className={styles.item_name}>{item.title}</View>
|
<View className={styles.item_name}>{item.code}</View>
|
||||||
</View>
|
</View>
|
||||||
})}
|
})}
|
||||||
</View>
|
</View>
|
||||||
@ -157,7 +151,7 @@ export default (props:params) => {
|
|||||||
</View>
|
</View>
|
||||||
<View className={styles.buy_btn} onClick={() => setShowOrderCount(true)}>开始下单</View>
|
<View className={styles.buy_btn} onClick={() => setShowOrderCount(true)}>开始下单</View>
|
||||||
</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)}/>
|
<ShopCart show={showCart} onClose={() => setShowCart(false)}/>
|
||||||
<Preview value={colorInfo} show={showPreview} onClose={() => setShowPreview(false)}/>
|
<Preview value={colorInfo} show={showPreview} onClose={() => setShowPreview(false)}/>
|
||||||
<View className='common_safe_area_y'></View>
|
<View className='common_safe_area_y'></View>
|
||||||
|
@ -5,15 +5,22 @@ import SideBar from '@/components/sideBar'
|
|||||||
import Product from '@/components/product'
|
import Product from '@/components/product'
|
||||||
import MoveBtn from '@/components/moveBtn'
|
import MoveBtn from '@/components/moveBtn'
|
||||||
import ShopCart from '@/components/shopCart'
|
import ShopCart from '@/components/shopCart'
|
||||||
import styles from './index.module.scss'
|
|
||||||
import { goLink } from '@/common/common'
|
import { goLink } from '@/common/common'
|
||||||
|
import styles from './index.module.scss'
|
||||||
import { useEffect, useRef, useState } from 'react'
|
import { useEffect, useRef, useState } from 'react'
|
||||||
import Taro, { useDidShow, usePullDownRefresh, useRouter } from '@tarojs/taro'
|
import Taro, { Events, useDidShow, usePullDownRefresh, useRouter } from '@tarojs/taro'
|
||||||
import useManualPullDownRefresh from '@/use/useManualPullDownRefresh'
|
import useManualPullDownRefresh from '@/use/useManualPullDownRefresh'
|
||||||
|
|
||||||
import {GetProductKindListApi, GetProductListApi} from '@/api/material'
|
import {GetProductKindListApi, GetProductListApi} from '@/api/material'
|
||||||
|
import useLogin from '@/use/useLogin'
|
||||||
|
|
||||||
export default () => {
|
export default () => {
|
||||||
|
|
||||||
|
const {checkLogin} = useLogin()
|
||||||
|
|
||||||
|
useDidShow(() => {
|
||||||
|
checkLogin()
|
||||||
|
})
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
categoryList()
|
categoryList()
|
||||||
@ -25,34 +32,42 @@ export default () => {
|
|||||||
const categoryList = async () => {
|
const categoryList = async () => {
|
||||||
const res = await fetchData()
|
const res = await fetchData()
|
||||||
setKindData({...kindData, list:res.data.list, defaultId: res.data.list[0].id})
|
setKindData({...kindData, list:res.data.list, defaultId: res.data.list[0].id})
|
||||||
filtrate.current.product_kind_id = res.data.list[0].id
|
setFiltrate({...filtrate, product_kind_id:res.data.list[0].id})
|
||||||
getProductList()
|
|
||||||
}
|
}
|
||||||
|
|
||||||
//获取面料列表
|
//获取面料列表
|
||||||
const [productData, setProductData] = useState({list:[], total:0, hasMore:true})
|
const [productData, setProductData] = useState({list:[], total:0})
|
||||||
const filtrate = useRef({product_kind_id:0, size: 5,page: 1})
|
const [hasMore, setHasMore] = useState(true)
|
||||||
|
const [filtrate, setFiltrate] = useState({product_kind_id:0, size: 5,page: 1})
|
||||||
const pageNum = useRef(1)
|
const pageNum = useRef(1)
|
||||||
const {fetchData: productFetchData, state: productState} = GetProductListApi()
|
const {fetchData: productFetchData, state: productState} = GetProductListApi()
|
||||||
const getProductKindId = async (e) => {
|
//获取数据方法
|
||||||
filtrate.current.size = 5
|
|
||||||
pageNum.current = 1
|
|
||||||
filtrate.current.product_kind_id = e.id
|
|
||||||
getProductList()
|
|
||||||
}
|
|
||||||
const getProductList = async () => {
|
const getProductList = async () => {
|
||||||
filtrate.current.size = filtrate.current.size * pageNum.current
|
const {data,total} = await productFetchData(filtrate)
|
||||||
const {data,total} = await productFetchData(filtrate.current)
|
|
||||||
setProductData({...productData,list:data.list,total})
|
setProductData({...productData,list:data.list,total})
|
||||||
|
setRefresherTriggeredStatus(() => false)
|
||||||
|
}
|
||||||
|
//监听查询条件
|
||||||
|
useEffect(() => {
|
||||||
|
if(filtrate.product_kind_id)
|
||||||
|
getProductList()
|
||||||
|
}, [filtrate])
|
||||||
|
|
||||||
|
//点击面料类型
|
||||||
|
const getProductKindId = async (e) => {
|
||||||
|
pageNum.current = 1
|
||||||
|
setFiltrate({...filtrate, size:5, product_kind_id:e.id})
|
||||||
|
setHasMore(true)
|
||||||
}
|
}
|
||||||
|
|
||||||
//上拉加载数据
|
//上拉加载数据
|
||||||
const getScrolltolower = () => {
|
const getScrolltolower = () => {
|
||||||
if(productData.list.length >= productData.total) {
|
if(productData.list.length >= productData.total) {
|
||||||
setProductData({...productData, hasMore: false})
|
setHasMore(false)
|
||||||
} else {
|
} else {
|
||||||
pageNum.current++
|
pageNum.current++
|
||||||
getProductList()
|
const newSize = filtrate.size * pageNum.current
|
||||||
|
setFiltrate({...filtrate, size:newSize})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -62,17 +77,20 @@ export default () => {
|
|||||||
//列表下拉刷新
|
//列表下拉刷新
|
||||||
const [refresherTriggeredStatus, setRefresherTriggeredStatus] = useState(false)
|
const [refresherTriggeredStatus, setRefresherTriggeredStatus] = useState(false)
|
||||||
const getRefresherRefresh = async () => {
|
const getRefresherRefresh = async () => {
|
||||||
filtrate.current.size = 5
|
|
||||||
pageNum.current = 1
|
pageNum.current = 1
|
||||||
getProductList()
|
setFiltrate({...filtrate, size:5})
|
||||||
|
setHasMore(true)
|
||||||
|
setRefresherTriggeredStatus(true)
|
||||||
}
|
}
|
||||||
useEffect(() => {
|
|
||||||
setRefresherTriggeredStatus(productState.loading)
|
|
||||||
}, [productState.loading])
|
|
||||||
|
|
||||||
//页面下拉刷新
|
//页面下拉刷新
|
||||||
const res = useManualPullDownRefresh()
|
// const res = useManualPullDownRefresh()
|
||||||
|
usePullDownRefresh(() => {
|
||||||
|
console.log('123')
|
||||||
|
})
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<MoveBtn onClick={() => setShowShopCart(!showShopCart)}>
|
<MoveBtn onClick={() => setShowShopCart(!showShopCart)}>
|
||||||
@ -85,7 +103,7 @@ export default () => {
|
|||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
<View className={styles.products}>
|
<View className={styles.products}>
|
||||||
<SideBar list={kindData.list} height="100%" defaultValue={kindData.defaultId} hasMore={productData.hasMore} selfOnScrolltolower={() => getScrolltolower()} sideBarOnClick={(e) => getProductKindId(e)} heightItem={150} refresherTriggered={refresherTriggeredStatus} selfOnRefresherRefresh={() => getRefresherRefresh()}>
|
<SideBar list={kindData.list} height="100%" defaultValue={kindData.defaultId} hasMore={hasMore} selfOnScrolltolower={() => getScrolltolower()} sideBarOnClick={(e) => getProductKindId(e)} heightItem={150} refresherTriggered={refresherTriggeredStatus} selfOnRefresherRefresh={() => getRefresherRefresh()}>
|
||||||
<Product productList={productData.list}/>
|
<Product productList={productData.list}/>
|
||||||
</SideBar>
|
</SideBar>
|
||||||
</View>
|
</View>
|
||||||
|
@ -2,9 +2,11 @@
|
|||||||
|
|
||||||
import Taro from '@tarojs/taro'
|
import Taro from '@tarojs/taro'
|
||||||
import { useRef, useState } from 'react'
|
import { useRef, useState } from 'react'
|
||||||
import {BASE_URL} from '@/common/constant'
|
import {BASE_URL, WX_APPID} from '@/common/constant'
|
||||||
|
import useUserInfo from "./useUserInfo"
|
||||||
import qs from 'qs';
|
import qs from 'qs';
|
||||||
|
|
||||||
|
|
||||||
type Params = {
|
type Params = {
|
||||||
code: string|null
|
code: string|null
|
||||||
success: true|false
|
success: true|false
|
||||||
@ -118,7 +120,7 @@ export const useRequest = (options:option = {
|
|||||||
|
|
||||||
const stateRef = useRef({...params})
|
const stateRef = useRef({...params})
|
||||||
const [state, setState] = useState({...stateRef.current})
|
const [state, setState] = useState({...stateRef.current})
|
||||||
|
const {removeToken} = useUserInfo()
|
||||||
// 请求函数
|
// 请求函数
|
||||||
const fetchData = async (sub_options?:any) => {
|
const fetchData = async (sub_options?:any) => {
|
||||||
stateRef.current.loading = true
|
stateRef.current.loading = true
|
||||||
@ -139,6 +141,7 @@ export const useRequest = (options:option = {
|
|||||||
...{
|
...{
|
||||||
header: {
|
header: {
|
||||||
"Platform": 6,
|
"Platform": 6,
|
||||||
|
"Appid": WX_APPID,
|
||||||
"Authorization": token || stateRef.current.token,
|
"Authorization": token || stateRef.current.token,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@ -167,10 +170,10 @@ export const useRequest = (options:option = {
|
|||||||
title: `错误:${showStatus(statusCode)}`
|
title: `错误:${showStatus(statusCode)}`
|
||||||
})
|
})
|
||||||
if (statusCode === 401) {
|
if (statusCode === 401) {
|
||||||
//未登录
|
removeToken()
|
||||||
// Taro.reLaunch({
|
Taro.reLaunch({
|
||||||
// url: '/pages/login/index'
|
url: '/pages/index/index'
|
||||||
// })
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
102
src/use/useLogin.ts
Normal file
102
src/use/useLogin.ts
Normal file
@ -0,0 +1,102 @@
|
|||||||
|
import { useEffect, useState } from "react"
|
||||||
|
import { WX_APPID } from "@/common/constant"
|
||||||
|
import useUserInfo from "./useUserInfo"
|
||||||
|
import Taro, { useRouter } from "@tarojs/taro"
|
||||||
|
import { Login } from "@/api/login"
|
||||||
|
|
||||||
|
|
||||||
|
export default () => {
|
||||||
|
const {setToken, setSessionKey, setUserInfo, userInfo} = useUserInfo()
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
console.log('userInfo::',userInfo.token)
|
||||||
|
}, [userInfo])
|
||||||
|
|
||||||
|
//登录请求
|
||||||
|
const {fetchData} = Login()
|
||||||
|
const loginRequest = async (code) => {
|
||||||
|
const {data, success} = await fetchData({js_code: code})
|
||||||
|
if(success) {
|
||||||
|
setToken(data.token)
|
||||||
|
setSessionKey(data.session_key)
|
||||||
|
} else {
|
||||||
|
Taro.showToast({
|
||||||
|
title:'登录失败',
|
||||||
|
icon:"none"
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//微信登录
|
||||||
|
const wxLogin = () => {
|
||||||
|
Taro.login({
|
||||||
|
success: function async (res) {
|
||||||
|
if (res.code) {
|
||||||
|
loginRequest(res.code)
|
||||||
|
} else {
|
||||||
|
console.log('登录失败!' + res.errMsg)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
fail: function(e) {
|
||||||
|
console.log('登录失败!::',e)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const router = useRouter()
|
||||||
|
//登录加checkLogin检查
|
||||||
|
const checkLogin = () => {
|
||||||
|
if(!userInfo.token) {
|
||||||
|
wxLogin()
|
||||||
|
if(router.path != '/pages/index/index') {
|
||||||
|
Taro.reLaunch({
|
||||||
|
url: '/pages/index/index'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
Taro.checkSession({
|
||||||
|
fail () {
|
||||||
|
wxLogin()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
//获取用户头像等信息数据
|
||||||
|
const getUserInfo = () => {
|
||||||
|
Taro.getUserProfile({
|
||||||
|
desc: '用于完善会员资料',
|
||||||
|
success: (res) => {
|
||||||
|
Taro.request({
|
||||||
|
url: 'https://dev.zzfzyc.com/lymarket/v1/mall/user/decrypt',
|
||||||
|
method: 'POST',
|
||||||
|
data: {
|
||||||
|
session_key: userInfo.sessionkey,
|
||||||
|
raw_data: res.rawData,
|
||||||
|
signature: res.signature,
|
||||||
|
encrypted_data: res.encryptedData,
|
||||||
|
iv: res.iv
|
||||||
|
},
|
||||||
|
header: {
|
||||||
|
platform: 6,
|
||||||
|
Authorization: userInfo.token,
|
||||||
|
Appid: WX_APPID
|
||||||
|
},
|
||||||
|
success: (e) => {
|
||||||
|
setUserInfo({})
|
||||||
|
},
|
||||||
|
fail: (e) => {
|
||||||
|
console.log(e)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
checkLogin,
|
||||||
|
wxLogin,
|
||||||
|
getUserInfo
|
||||||
|
}
|
||||||
|
}
|
@ -1,87 +0,0 @@
|
|||||||
import { useEffect, useState } from "react"
|
|
||||||
import { WX_APPID } from "@/common/constant"
|
|
||||||
import useUserInfo from "./useUserInfo"
|
|
||||||
|
|
||||||
|
|
||||||
export default () => {
|
|
||||||
const {setToken, setSessionKey, setUserInfo} = useUserInfo()
|
|
||||||
|
|
||||||
const [loginState, setLoginState] = useState({
|
|
||||||
session_key: '',
|
|
||||||
token: '',
|
|
||||||
userInfo: ''
|
|
||||||
})
|
|
||||||
|
|
||||||
const getToken = () => {
|
|
||||||
Taro.login({
|
|
||||||
success: function (res) {
|
|
||||||
if (res.code) {
|
|
||||||
console.log('number::', res.code)
|
|
||||||
Taro.request({
|
|
||||||
url: 'https://dev.zzfzyc.com/lymarket/v1/mall/login',
|
|
||||||
method: 'POST',
|
|
||||||
data: {
|
|
||||||
js_code: res.code,
|
|
||||||
},
|
|
||||||
header: {
|
|
||||||
platform: 6,
|
|
||||||
Appid: WX_APPID
|
|
||||||
},
|
|
||||||
success: (e) => {
|
|
||||||
let {data} = e.data
|
|
||||||
setLoginState({
|
|
||||||
...loginState,
|
|
||||||
session_key: data.session_key,
|
|
||||||
token: data.token
|
|
||||||
})
|
|
||||||
setToken(data.token)
|
|
||||||
setLoginState(data.session_key)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
console.log('登录失败!' + res.errMsg)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
fail: function(e) {
|
|
||||||
console.log('e::',e)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const getUserInfo = () => {
|
|
||||||
Taro.getUserProfile({
|
|
||||||
desc: '用于完善会员资料',
|
|
||||||
success: (res) => {
|
|
||||||
Taro.request({
|
|
||||||
url: 'https://dev.zzfzyc.com/lymarket/v1/mall/user/decrypt',
|
|
||||||
method: 'POST',
|
|
||||||
data: {
|
|
||||||
session_key: loginState.session_key,
|
|
||||||
raw_data: res.rawData,
|
|
||||||
signature: res.signature,
|
|
||||||
encrypted_data: res.encryptedData,
|
|
||||||
iv: res.iv
|
|
||||||
},
|
|
||||||
header: {
|
|
||||||
platform: 6,
|
|
||||||
Authorization: loginState.token,
|
|
||||||
Appid: WX_APPID
|
|
||||||
},
|
|
||||||
success: (e) => {
|
|
||||||
setUserInfo({})
|
|
||||||
},
|
|
||||||
fail: (e) => {
|
|
||||||
console.log(e)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
getToken,
|
|
||||||
getUserInfo
|
|
||||||
}
|
|
||||||
}
|
|
@ -2,7 +2,7 @@ import { useDispatch, useSelector } from 'react-redux'
|
|||||||
import { CLEAR_SESSIONKEY, SET_USERINFO, SET_TOKEN, SET_SESSIONKEY, CLEAR_USERINFO, CLEAR_TOKEN} from '@/constants/userInfo'
|
import { CLEAR_SESSIONKEY, SET_USERINFO, SET_TOKEN, SET_SESSIONKEY, CLEAR_USERINFO, CLEAR_TOKEN} from '@/constants/userInfo'
|
||||||
import {DataParam, UserParam} from '@/reducers/userInfo'
|
import {DataParam, UserParam} from '@/reducers/userInfo'
|
||||||
export default () => {
|
export default () => {
|
||||||
const user = useSelector((state:DataParam) => state.userInfo) as DataParam
|
const userInfo = useSelector((state:DataParam) => state.userInfo) as DataParam
|
||||||
const dispatch = useDispatch()
|
const dispatch = useDispatch()
|
||||||
|
|
||||||
const setToken = (token: string) => {
|
const setToken = (token: string) => {
|
||||||
@ -36,6 +36,6 @@ export default () => {
|
|||||||
removeUserInfo,
|
removeUserInfo,
|
||||||
removeToken,
|
removeToken,
|
||||||
removeSessionKey,
|
removeSessionKey,
|
||||||
user, //响应式数据返回
|
userInfo, //响应式数据返回
|
||||||
}
|
}
|
||||||
}
|
}
|
4
src/util/checkLogin.ts
Normal file
4
src/util/checkLogin.ts
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
|
||||||
|
export const checkLogin = () => {
|
||||||
|
|
||||||
|
}
|
Loading…
x
Reference in New Issue
Block a user