From 4c46c6e22d942fa93d5cb3161217c7da0c441602 Mon Sep 17 00:00:00 2001 From: czm <2192718639@qq.com> Date: Thu, 5 May 2022 18:53:33 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AF=B9=E6=8E=A5api?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/banner.ts | 12 +++ src/api/material.ts | 35 +++++++ src/common/constant.js | 6 +- .../{swiper => banner}/index.module.scss | 0 src/components/banner/index.tsx | 51 ++++++++++ src/components/infiniteScroll/index.tsx | 2 +- src/components/product/index.tsx | 24 ++--- src/components/sideBar/index.tsx | 47 ++++----- src/components/swiper/index.tsx | 52 ---------- src/pages/details/components/swiper/index.tsx | 9 +- src/pages/details/index.tsx | 5 +- src/pages/index/index.tsx | 95 ++++++++++++------- src/pages/order/components/remark/index.tsx | 9 +- src/reducers/index.ts | 2 +- src/reducers/userInfo.ts | 21 ++-- src/use/useHttp.ts | 57 +++-------- 16 files changed, 243 insertions(+), 184 deletions(-) create mode 100644 src/api/banner.ts create mode 100644 src/api/material.ts rename src/components/{swiper => banner}/index.module.scss (100%) create mode 100644 src/components/banner/index.tsx delete mode 100644 src/components/swiper/index.tsx diff --git a/src/api/banner.ts b/src/api/banner.ts new file mode 100644 index 0000000..dc8a8ff --- /dev/null +++ b/src/api/banner.ts @@ -0,0 +1,12 @@ +import { useRequest } from "@/use/useHttp" + +/** + * 获取轮播图列表 + * @returns + */ + export const GetBannerList = () => { + return useRequest({ + url: `/v1/mall/carouselBanner/list`, + method: "get", + }) +} diff --git a/src/api/material.ts b/src/api/material.ts new file mode 100644 index 0000000..a1d75ab --- /dev/null +++ b/src/api/material.ts @@ -0,0 +1,35 @@ +import { useRequest } from "@/use/useHttp" + +/** + * 获取面料分类列表 + * @returns +*/ +export const GetCategoryList = () => { + return useRequest({ + url: `/v1/mall/category/list`, + method: "get", + }) +} + + +/** + * 获取面料种类列表 + * @returns +*/ +export const GetProductKindListApi = () => { + return useRequest({ + url: `/v1/mall/product/kind/list`, + method: "get", + }) +} + +/** + * 获取面料列表 + * @returns +*/ +export const GetProductListApi = () => { + return useRequest({ + url: `/v1/mall/product/list`, + method: "get", + }) +} \ No newline at end of file diff --git a/src/common/constant.js b/src/common/constant.js index 093fb79..77ea9a4 100644 --- a/src/common/constant.js +++ b/src/common/constant.js @@ -1,4 +1,3 @@ -console.log('环境变量2',CURRENT_ENV); // export const BASE_URL = CURRENT_ENV.includes('development') ? `https://test.zzfzyc.com/lymarket` : `https://www.zzfzyc.com/lymarket` // export const BASE_URL = `http://192.168.0.75:50001/lymarket` // export const BASE_URL = `http://192.168.0.89:50001/lymarket` @@ -9,9 +8,6 @@ console.log('环境变量2',CURRENT_ENV); export const BASE_URL = `http://192.168.1.30:40001/lymarket` // 发 // export const BASE_URL = `https://dev.zzfzyc.com/lymarket` // 开发环境 // export const BASE_URL = `https://www.zzfzyc.com/lymarket` // 正式环境 - - - // export const BASE_URL = `http://192.168.1.165:40001/lymarket` // 王霞 // CDN @@ -27,4 +23,4 @@ export const IMG_CND_Prefix = "http://test.cdn.zzfzyc.com/" export const CDN_UPLOAD_IMG = `${UPLOAD_CDN_URL || ''}`; //appid -export const WX_APPID = 'wx6c8b9156543480b0' \ No newline at end of file +export const WX_APPID = 'wx68d92d7cbf0b6963' \ No newline at end of file diff --git a/src/components/swiper/index.module.scss b/src/components/banner/index.module.scss similarity index 100% rename from src/components/swiper/index.module.scss rename to src/components/banner/index.module.scss diff --git a/src/components/banner/index.tsx b/src/components/banner/index.tsx new file mode 100644 index 0000000..92f035a --- /dev/null +++ b/src/components/banner/index.tsx @@ -0,0 +1,51 @@ +import { Image, Swiper, SwiperItem, View } from "@tarojs/components" +import { goLink } from "@/common/common" +import {GetBannerList} from "@/api/banner" +import styles from './index.module.scss' +import { useEffect, useState } from "react" + +type item = {title:string, img:string, url:string, id:number} + +type params = { + list?: item[] + swiperOnClick?: (val: item) => void, + style?: Object +} +export default (props:params) => { + let {swiperOnClick, style = {}} = props + + const [list, setList] = useState([]) + const {fetchData, state} = GetBannerList() + + useEffect(() => { + getData() + }, []) + + const getData = async () => { + const res = await fetchData() + setList(res.data.list) + } + + return ( + + + { + list.map(item => { + return + goLink(item.link)}> + + + + }) + } + + + ) + +} \ No newline at end of file diff --git a/src/components/infiniteScroll/index.tsx b/src/components/infiniteScroll/index.tsx index 5f2f8bc..4dc2197 100644 --- a/src/components/infiniteScroll/index.tsx +++ b/src/components/infiniteScroll/index.tsx @@ -82,7 +82,7 @@ export default memo(({ {moreStatus&& { hasMore&&加载中|| - 没有更多了 + 没有更多数据了 } } diff --git a/src/components/product/index.tsx b/src/components/product/index.tsx index d7d6d3b..ede8ddc 100644 --- a/src/components/product/index.tsx +++ b/src/components/product/index.tsx @@ -3,27 +3,27 @@ import Taro from "@tarojs/taro" import { goLink } from "@/common/common" import styles from './index.module.scss' -type params = { - desStatus?: true|false +type Params = { + desStatus?: true|false, + productList?: any[] } -export default ({desStatus = true}: params) => { - +export default ({desStatus = true, productList = []}:Params) => { return ( - {new Array(10).fill('').map(item => { + {productList.map(item => { return goLink('/pages/details/index?id=1')}> - - 230色 + + {item.product_color_count}色 - 0770#21S单面平纹(食毛) + {item.code}#{item.name} - 160cm - 110g + {item.width} + {item.weight_density} - 67.6%棉24%涤纶6.4%氨纶 - {desStatus&&产品描述产品描述产品描述产品描述产品描述} + {item.component} + {desStatus&&{item.describe}} })} diff --git a/src/components/sideBar/index.tsx b/src/components/sideBar/index.tsx index d33e91b..2729e92 100644 --- a/src/components/sideBar/index.tsx +++ b/src/components/sideBar/index.tsx @@ -1,24 +1,23 @@ import { ScrollView, View } from "@tarojs/components" -import { memo, ReactNode, useRef, useState } from "react" +import { memo, ReactNode, useEffect, useRef, useState } from "react" import styles from "./index.module.scss" import classnames from "classnames"; import Taro, { useReady } from "@tarojs/taro"; import InfiniteScroll from "../infiniteScroll"; -type ListProps = { - title: string, - value: number -} + type Params = { - list?: ListProps[], + list?: any[], defaultValue?: number|string, children?: ReactNode, height?: string, heightItem?: number, - sideBarOnClick?: (ListProps) => void, + sideBarOnClick?: (val:any) => void, refresherTriggered?: true|false, selfOnRefresherRefresh?: () => void + selfOnScrolltolower?: () => void, + hasMore?: true|false } export default memo(({list = [], @@ -28,7 +27,9 @@ export default memo(({list = [], children, heightItem = 100, refresherTriggered = false, - selfOnRefresherRefresh + selfOnRefresherRefresh, + selfOnScrolltolower, + hasMore = true }: Params) => { let num_half = useRef(0) @@ -36,17 +37,21 @@ export default memo(({list = [], const [selected, setSelected] = useState(defaultValue) const [tabId, setTabId] = useState('') + useEffect(() => { + setSelected(defaultValue) + }, [defaultValue]) + const init = () => { const index = list?.findIndex(item => { - return item.value == defaultValue + return item.id == defaultValue }) if(index !== -1) { computeSelectTab(index) } } - const clickEvent = ({item, index}: {item:ListProps, index:number}) => { - setSelected(item.value) + const clickEvent = ({item, index}: {item, index:number}) => { + setSelected(item.id) sideBarOnClick?.(item) computeSelectTab(index) } @@ -54,9 +59,10 @@ export default memo(({list = [], const computeSelectTab = (index) => { if((index + 1) > num_half.current) { let num = index + 1 - num_half.current - setTabId(list[num].value.toString()) + setTabId(list[num].id.toString()) } else { - setTabId(list[0].value.toString()) + setTabId(list[0].id.toString()) + } } @@ -75,10 +81,7 @@ export default memo(({list = [], }) }) - //触底事件 - const onScrolltolower = () => { - console.log('触底了') - } + return ( <> @@ -88,14 +91,14 @@ export default memo(({list = [], list?.map((item, index) => { return( clickEvent({item, index})} - id={`tab_${item.value}`} - key={item.value} + id={`tab_${item.id}`} + key={item.id} style={{height:heightItem+'rpx'}} > - {item.title} + {item.name} ) @@ -104,7 +107,7 @@ export default memo(({list = [], - onScrolltolower()} refresherTriggered={refresherTriggered} refresherEnabled={true} selfOnRefresherRefresh={() => selfOnRefresherRefresh?.()}> + selfOnScrolltolower?.()} refresherTriggered={refresherTriggered} refresherEnabled={true} selfOnRefresherRefresh={() => selfOnRefresherRefresh?.()}> {children} diff --git a/src/components/swiper/index.tsx b/src/components/swiper/index.tsx deleted file mode 100644 index af56652..0000000 --- a/src/components/swiper/index.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import { Image, Swiper, SwiperItem, View } from "@tarojs/components" -import { goLink } from "@/common/common" -import Taro from "@tarojs/taro" -import styles from './index.module.scss' - -type item = {title:string, img:string, url:string, id:number} - -type params = { - list?: item[] - swiperOnClick?: (val: item) => void, - style?: Object -} -export default (props:params) => { - let {list = [], swiperOnClick, style = {}} = props - 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 - } - ] - - return ( - - - { - list.map(item => { - return - goLink(`/pages/classList/index?id=${item.id}`)}> - - - - }) - } - - - ) - -} \ No newline at end of file diff --git a/src/pages/details/components/swiper/index.tsx b/src/pages/details/components/swiper/index.tsx index c05ed1a..f0788dd 100644 --- a/src/pages/details/components/swiper/index.tsx +++ b/src/pages/details/components/swiper/index.tsx @@ -1,15 +1,16 @@ import { Image, Swiper, SwiperItem, View } from "@tarojs/components" -import { useMemo, useState } from "react" +import { useMemo, useRef, useState } from "react" import styles from './index.module.scss' type item = {title:string, img:string, url:string, id:number} type params = { list?: item[] - } +} export default ({list = []}: params) => { const [pageIndex, setPageIndex] = useState(1) + const pageRef = useRef(null) const pageCount = useMemo(() => { return list.length @@ -17,7 +18,9 @@ export default ({list = []}: params) => { const swiperChange = (e) => { setPageIndex(e.detail.current + 1) + pageRef.current.innerHTML = 2 } + return ( @@ -30,7 +33,7 @@ export default ({list = []}: params) => { })} - {pageIndex+'/'+pageCount} + {pageIndex+'/'+pageCount} ) } \ No newline at end of file diff --git a/src/pages/details/index.tsx b/src/pages/details/index.tsx index d4a034d..440e62c 100644 --- a/src/pages/details/index.tsx +++ b/src/pages/details/index.tsx @@ -11,6 +11,7 @@ import { useEffect, useMemo, useState } from 'react'; import useManualPullDownRefresh from '@/use/useManualPullDownRefresh'; import { goLink } from '@/common/common'; import useUserInfo from '@/use/useUserInfo'; + type item = {title:string, img:string, url:string, id:number} type params = { @@ -48,9 +49,6 @@ export default (props:params) => { const [showOrderCount, setShowOrderCount] = useState(false) - // const showCartmemo = useMemo(() => { - // return showCart - // },[showCart]) const html = `

这里是详情

你好啊啊
@@ -105,6 +103,7 @@ export default (props:params) => { }) const {user} = useUserInfo() + return ( diff --git a/src/pages/index/index.tsx b/src/pages/index/index.tsx index aea1ece..000158f 100644 --- a/src/pages/index/index.tsx +++ b/src/pages/index/index.tsx @@ -1,5 +1,5 @@ import {View} from '@tarojs/components' -import Swiper from '@/components/swiper' +import Banner from '@/components/banner' import Search from '@/components/search' import SideBar from '@/components/sideBar' import Product from '@/components/product' @@ -7,50 +7,77 @@ import MoveBtn from '@/components/moveBtn' import ShopCart from '@/components/shopCart' import styles from './index.module.scss' import { goLink } from '@/common/common' -import { useEffect, useState } from 'react' +import { useEffect, useRef, useState } from 'react' import Taro, { useDidShow, usePullDownRefresh, useRouter } from '@tarojs/taro' import useManualPullDownRefresh from '@/use/useManualPullDownRefresh' -import useUserInfo from '@/use/useUserInfo' +import {GetProductKindListApi, GetProductListApi} from '@/api/material' export default () => { - const tabs_list = [ - {title:'平纹系列', value: 1}, - {title:'平纹系列', value: 2}, - {title:'平纹系列', value: 3}, - {title:'平纹系列', value: 4}, - {title:'平纹系列', value: 5}, - {title:'平纹系列', value: 6}, - {title:'平纹系列', value: 7}, - {title:'平纹系列', value: 8}, - {title:'平纹系列', value: 9}, - {title:'平纹系列', value: 10}, - {title:'平纹系列', value: 11}, - {title:'平纹系列', value: 12}, - {title:'平纹系列', value: 13}, - {title:'平纹系列', value: 14}, - {title:'平纹系列', value: 15}, - {title:'平纹系列', value: 16}, - {title:'平纹系列', value: 17}, - ] + + + useEffect(() => { + categoryList() + }, []) + + //获取面料种类 + const [kindData, setKindData] = useState({list:[], defaultId:0}) + const {fetchData} = GetProductKindListApi() + const categoryList = async () => { + const res = await fetchData() + setKindData({...kindData, list:res.data.list, defaultId: res.data.list[0].id}) + filtrate.current.product_kind_id = res.data.list[0].id + getProductList() + } + + //获取面料列表 + const [productData, setProductData] = useState({list:[], total:0, hasMore:true}) + const filtrate = useRef({product_kind_id:0, size: 5,page: 1}) + const pageNum = useRef(1) + 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 () => { + filtrate.current.size = filtrate.current.size * pageNum.current + const {data,total} = await productFetchData(filtrate.current) + setProductData({...productData,list:data.list,total}) + } + + //上拉加载数据 + const getScrolltolower = () => { + if(productData.list.length >= productData.total) { + setProductData({...productData, hasMore: false}) + } else { + pageNum.current++ + getProductList() + } + } + const [showShopCart, setShowShopCart] = useState(false) + //列表下拉刷新 + const [refresherTriggeredStatus, setRefresherTriggeredStatus] = useState(false) + const getRefresherRefresh = async () => { + filtrate.current.size = 5 + pageNum.current = 1 + getProductList() + } + useEffect(() => { + setRefresherTriggeredStatus(productState.loading) + }, [productState.loading]) + //页面下拉刷新 const res = useManualPullDownRefresh() - - const [refresherTriggeredStatus, setRefresherTriggeredStatus] = useState(false) - const getData = () => { - setRefresherTriggeredStatus(true) - setTimeout(() => { - setRefresherTriggeredStatus(() => false) - console.log('12123') - }, 1000) - } + return ( setShowShopCart(!showShopCart)}> - + 我的收藏 @@ -58,8 +85,8 @@ export default () => { - getData()}> - + getScrolltolower()} sideBarOnClick={(e) => getProductKindId(e)} heightItem={150} refresherTriggered={refresherTriggeredStatus} selfOnRefresherRefresh={() => getRefresherRefresh()}> + diff --git a/src/pages/order/components/remark/index.tsx b/src/pages/order/components/remark/index.tsx index 404e232..67d6bb6 100644 --- a/src/pages/order/components/remark/index.tsx +++ b/src/pages/order/components/remark/index.tsx @@ -11,11 +11,14 @@ export default ({onBlur, onSave}:Param) => { const [descData, setDescData] = useState({ number: 0, value: '', - count: 10 + count: 200 }) const getDesc = useCallback((e) => { let value = e.detail.value - let res = value.slice(0, descData.count) + let res = value + if(value.length > descData.count) { + res = value.slice(0, descData.count) + } setDescData({...descData, number:res.length, value: res}) },[]) @@ -26,7 +29,7 @@ export default ({onBlur, onSave}:Param) => { 添加备注 - + {descData.number}/{descData.count} setSave()}>保存 diff --git a/src/reducers/index.ts b/src/reducers/index.ts index 2af35af..8964c5d 100644 --- a/src/reducers/index.ts +++ b/src/reducers/index.ts @@ -2,5 +2,5 @@ import { combineReducers } from 'redux' import userInfo from './userInfo' export default combineReducers({ - userInfo + userInfo }) \ No newline at end of file diff --git a/src/reducers/userInfo.ts b/src/reducers/userInfo.ts index 5cfd21b..cd46829 100644 --- a/src/reducers/userInfo.ts +++ b/src/reducers/userInfo.ts @@ -1,6 +1,13 @@ import Taro from '@tarojs/taro' -import { SET_USERINFO, SET_TOKEN, SET_SESSIONKEY, CLEAR_TOKEN, CLEAR_USERINFO, CLEAR_SESSIONKEY} from '../constants/userInfo' +import { + SET_USERINFO, + SET_TOKEN, + SET_SESSIONKEY, + CLEAR_TOKEN, + CLEAR_USERINFO, + CLEAR_SESSIONKEY +} from '../constants/userInfo' export type UserParam = { name?:string, @@ -8,16 +15,18 @@ export type UserParam = { avatarUrl?:string, } +export type DataParam = { + token?: string + sessionkey?: string, + userInfo: UserParam + } + type Action = { type?: string, data?: DataParam } -export type DataParam = { - token?: string - sessionkey?: string, - userInfo: UserParam -} + const INIT_USER = { userInfo: Taro.getStorageSync('userInfo')?JSON.parse(Taro.getStorageSync('userInfo')):null, diff --git a/src/use/useHttp.ts b/src/use/useHttp.ts index 64af04d..1f1b8c8 100644 --- a/src/use/useHttp.ts +++ b/src/use/useHttp.ts @@ -2,10 +2,9 @@ import Taro from '@tarojs/taro' import { useRef, useState } from 'react' +import {BASE_URL} from '@/common/constant' import qs from 'qs'; - - type Params = { code: string|null success: true|false @@ -24,6 +23,16 @@ type Params = { pageSize?: number } +type option = { + url?: string, + method?: 'get'|'post'|'put'|'delete', + type?: string, + data?: any, + page?: number, + pageSize?: number, + pagination?: true|false +} + /** * 返回状态信息，根据 http 状态错 * @param {Number} status @@ -80,7 +89,7 @@ const showStatus = (status) => { * @param {Object} options.data 请求的参数 * @returns {Object} 返回fetch(), loading, error, code, msg */ -export const useRequest = (options = { +export const useRequest = (options:option = { url: '/', method: 'get', type: 'json', @@ -90,7 +99,7 @@ export const useRequest = (options = { pagination: false, // 是否分页 }) => { - + options.url = `${BASE_URL}${options.url}` let params:Params = { code: null, // 业务码 success: false, // 请求是否成功 @@ -110,43 +119,8 @@ export const useRequest = (options = { const stateRef = useRef({...params}) const [state, setState] = useState({...stateRef.current}) - // // 每页多少条记录 - // const handleSizeChange = (val) => { - // state.size = val - // } - - // // 当前 - // const handleCurrentChange = (val) => { - // state.page = val - // } - - // /** - // * 筛选搜索 - // * @param {Object} val `{name:'ppx'}` name 为字段名，ppx 为字段内容 - // */ - // const handleFilterChange = (val) => { - // state.filter = val - // } - - // 排序 - - /** - * 排序字段，排序方式 - * @param {String} val 排序字段 - * @param {String} sortOrder `desc` / `asc` - */ - // eslint-disable-next-line - const handleSort = (val, orderby = "desc") => { - if (val != null) { - stateRef.current.sort = orderby ? { - sort_key: `${orderby == 'desc' ? '-' + val : val}` - } : null - } - - } - // 请求函数 - const fetchData = async (sub_options) => { + const fetchData = async (sub_options?:any) => { stateRef.current.loading = true setState((e) => ({...e, loading:true})) stateRef.current.query = { @@ -164,7 +138,7 @@ export const useRequest = (options = { ...options, ...{ header: { - "Platform": 3, + "Platform": 6, "Authorization": token || stateRef.current.token, } }, @@ -214,7 +188,6 @@ export const useRequest = (options = { } return { - handleSort, fetchData, state, }