From 883c24b7bea677446ebea60dc498dfe18c5166cd Mon Sep 17 00:00:00 2001 From: czm <2192718639@qq.com> Date: Fri, 6 May 2022 18:41:30 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AF=B9=E6=8E=A5api3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/login.ts | 12 +++ src/api/material.ts | 14 ++- src/api/materialColor.ts | 12 +++ src/api/shopCart.ts | 12 +++ src/components/product/index.tsx | 2 +- src/components/shopCart/index.tsx | 23 ++-- .../details/components/orderCount/index.tsx | 58 +++++----- src/pages/details/index.tsx | 82 +++++++------- src/pages/index/index.tsx | 70 +++++++----- src/use/useHttp.ts | 15 +-- src/use/useLogin.ts | 102 ++++++++++++++++++ src/use/useLogin.tsx | 87 --------------- src/use/useUserInfo.ts | 4 +- src/util/checkLogin.ts | 4 + 14 files changed, 294 insertions(+), 203 deletions(-) create mode 100644 src/api/login.ts create mode 100644 src/api/materialColor.ts create mode 100644 src/api/shopCart.ts create mode 100644 src/use/useLogin.ts delete mode 100644 src/use/useLogin.tsx create mode 100644 src/util/checkLogin.ts diff --git a/src/api/login.ts b/src/api/login.ts new file mode 100644 index 0000000..b45eca6 --- /dev/null +++ b/src/api/login.ts @@ -0,0 +1,12 @@ +import { useRequest } from "@/use/useHttp" + +/** + * 登录 + * @returns +*/ +export const Login = () => { + return useRequest({ + url: `/v1/mall/login`, + method: "post", + }) +} \ No newline at end of file diff --git a/src/api/material.ts b/src/api/material.ts index a1d75ab..1b47f30 100644 --- a/src/api/material.ts +++ b/src/api/material.ts @@ -32,4 +32,16 @@ export const GetProductListApi = () => { url: `/v1/mall/product/list`, method: "get", }) -} \ No newline at end of file +} + +/** + * 获取面料详情 + * @returns +*/ +export const GetProductDetailApi = () => { + return useRequest({ + url: `/v1/mall/product`, + method: "get", + }) +} + diff --git a/src/api/materialColor.ts b/src/api/materialColor.ts new file mode 100644 index 0000000..589241e --- /dev/null +++ b/src/api/materialColor.ts @@ -0,0 +1,12 @@ +import { useRequest } from "@/use/useHttp" + +/** + * 获取面料颜色列表 + * @returns +*/ +export const GetColorList = () => { + return useRequest({ + url: `/v1/mall/product/color/list`, + method: "get", + }) +} diff --git a/src/api/shopCart.ts b/src/api/shopCart.ts new file mode 100644 index 0000000..8d292bf --- /dev/null +++ b/src/api/shopCart.ts @@ -0,0 +1,12 @@ +import { useRequest } from "@/use/useHttp" + +/** + * 获取购物车列表 + * @returns +*/ +export const GetShoppingCartApi = () => { + return useRequest({ + url: `/v1/mall/shoppingCart/productColor`, + method: "get", + }) +} \ No newline at end of file diff --git a/src/components/product/index.tsx b/src/components/product/index.tsx index ede8ddc..2f29417 100644 --- a/src/components/product/index.tsx +++ b/src/components/product/index.tsx @@ -11,7 +11,7 @@ export default ({desStatus = true, productList = []}:Params) => { return ( {productList.map(item => { - return goLink('/pages/details/index?id=1')}> + return goLink(`/pages/details/index?id=${item.id}`)}> {item.product_color_count}色 diff --git a/src/components/shopCart/index.tsx b/src/components/shopCart/index.tsx index 775b2cd..5dba441 100644 --- a/src/components/shopCart/index.tsx +++ b/src/components/shopCart/index.tsx @@ -8,6 +8,7 @@ import styles from "./index.module.scss" import { useEffect, useState } from "react"; import Taro from "@tarojs/taro"; import { goLink } from "@/common/common"; +import {GetShoppingCartApi} from "@/api/shopCart" type param = { show?: true|false, @@ -20,21 +21,21 @@ export default ({show = false, onClose}: param) => { setSelectIndex(index) } + //获取数据 const [list, setList] = useState([]) const [loading, setLoading] = useState(false) + const {fetchData} = GetShoppingCartApi() + const getShoppingCart = async () => { + setLoading(true) + const {data} = await fetchData() + setList(data) + setLoading(false) + } + useEffect(() => { if(!show) return - let lists:any[] = [] - for(let i = 0; i < 20; i++) { - lists = [...lists, { - title:`${i}#薄荷绿`, - subtitle: '0770# 21S单面平纹(食毛)', - tag: '剪板', - select: i%2?true: false - }] - } - setList([...lists]) + getShoppingCart() }, [show]) useEffect(() => { @@ -137,7 +138,7 @@ export default ({show = false, onClose}: param) => { })} } - {!loading&&list.length > 0&& + {!loading&&list.length == 0 && 暂未选择商品 去选购 } diff --git a/src/pages/details/components/orderCount/index.tsx b/src/pages/details/components/orderCount/index.tsx index eb5c0c4..731752f 100644 --- a/src/pages/details/components/orderCount/index.tsx +++ b/src/pages/details/components/orderCount/index.tsx @@ -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([]) 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 ( + closePopup()}> - 0770# 21S单面平纹(食毛) + {title} 下单类型: @@ -119,9 +126,10 @@ export default memo(({show = false, onClose}: param) => { setSearchShow(false)}>取消 } - 颜色分类 (13) + 颜色分类 (13) {list.length} changeSearchShow()}> + {list.length > 0&& @@ -156,7 +164,7 @@ export default memo(({show = false, onClose}: param) => { 当前已选{selectCount.kindCount}种，共{selectCount.sumCount}{selectList[selectIndex].unit} - 加入购物车 + addShopCart()}>加入购物车 diff --git a/src/pages/details/index.tsx b/src/pages/details/index.tsx index 440e62c..670b51a 100644 --- a/src/pages/details/index.tsx +++ b/src/pages/details/index.tsx @@ -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({}) + 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 = `

这里是详情

@@ -55,27 +65,13 @@ export default (props:params) => { ` - 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() 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) => { - 0770# 21S单面平纹(食毛) - 面料描述，疯狂描述。。。 + {productName} + {productInfo.describe} @@ -128,24 +122,24 @@ export default (props:params) => { 详情参数 - 编号：0770 - 幅宽：160cm - 克重：160g - 成分：67.6%棉24%涤纶6.4%氨纶%氨纶氨纶%氨纶 + 编号：{productInfo.code} + 幅宽：{productInfo.width} + 克重：{productInfo.weight_density} + 成分：{productInfo.component} 色号 (10) - - {colorList.map(item => { - return getColorItem(item)}> - - - - {item.title} - - })} - + + {productInfo?.product_color_list?.map(item => { + return getColorItem(item)}> + + + + {item.code} + + })} + @@ -157,7 +151,7 @@ export default (props:params) => { setShowOrderCount(true)}>开始下单 - setShowOrderCount(false)}/> + setShowOrderCount(false)} title={productName} productId={productInfo.id}/> setShowCart(false)}/> setShowPreview(false)}/> diff --git a/src/pages/index/index.tsx b/src/pages/index/index.tsx index 000158f..b3d42dc 100644 --- a/src/pages/index/index.tsx +++ b/src/pages/index/index.tsx @@ -5,16 +5,23 @@ import SideBar from '@/components/sideBar' import Product from '@/components/product' import MoveBtn from '@/components/moveBtn' import ShopCart from '@/components/shopCart' -import styles from './index.module.scss' import { goLink } from '@/common/common' +import styles from './index.module.scss' 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 {GetProductKindListApi, GetProductListApi} from '@/api/material' +import useLogin from '@/use/useLogin' export default () => { - - + + const {checkLogin} = useLogin() + + useDidShow(() => { + checkLogin() + }) + useEffect(() => { categoryList() }, []) @@ -25,34 +32,42 @@ export default () => { 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() + setFiltrate({...filtrate, product_kind_id:res.data.list[0].id}) } //获取面料列表 - const [productData, setProductData] = useState({list:[], total:0, hasMore:true}) - const filtrate = useRef({product_kind_id:0, size: 5,page: 1}) + const [productData, setProductData] = useState({list:[], total:0}) + const [hasMore, setHasMore] = useState(true) + const [filtrate, setFiltrate] = useState({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) + const {data,total} = await productFetchData(filtrate) 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 = () => { if(productData.list.length >= productData.total) { - setProductData({...productData, hasMore: false}) + setHasMore(false) } else { pageNum.current++ - getProductList() + const newSize = filtrate.size * pageNum.current + setFiltrate({...filtrate, size:newSize}) } } @@ -62,18 +77,21 @@ export default () => { //列表下拉刷新 const [refresherTriggeredStatus, setRefresherTriggeredStatus] = useState(false) const getRefresherRefresh = async () => { - filtrate.current.size = 5 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 ( setShowShopCart(!showShopCart)}> @@ -85,7 +103,7 @@ export default () => { - getScrolltolower()} sideBarOnClick={(e) => getProductKindId(e)} heightItem={150} refresherTriggered={refresherTriggeredStatus} selfOnRefresherRefresh={() => getRefresherRefresh()}> + getScrolltolower()} sideBarOnClick={(e) => getProductKindId(e)} heightItem={150} refresherTriggered={refresherTriggeredStatus} selfOnRefresherRefresh={() => getRefresherRefresh()}> diff --git a/src/use/useHttp.ts b/src/use/useHttp.ts index 1f1b8c8..9999d05 100644 --- a/src/use/useHttp.ts +++ b/src/use/useHttp.ts @@ -2,9 +2,11 @@ import Taro from '@tarojs/taro' 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'; + type Params = { code: string|null success: true|false @@ -118,7 +120,7 @@ export const useRequest = (options:option = { const stateRef = useRef({...params}) const [state, setState] = useState({...stateRef.current}) - + const {removeToken} = useUserInfo() // 请求函数 const fetchData = async (sub_options?:any) => { stateRef.current.loading = true @@ -139,6 +141,7 @@ export const useRequest = (options:option = { ...{ header: { "Platform": 6, + "Appid": WX_APPID, "Authorization": token || stateRef.current.token, } }, @@ -167,10 +170,10 @@ export const useRequest = (options:option = { title: `错误：${showStatus(statusCode)}` }) if (statusCode === 401) { - //未登录 - // Taro.reLaunch({ - // url: '/pages/login/index' - // }) + removeToken() + Taro.reLaunch({ + url: '/pages/index/index' + }) } } diff --git a/src/use/useLogin.ts b/src/use/useLogin.ts new file mode 100644 index 0000000..8cf3c09 --- /dev/null +++ b/src/use/useLogin.ts @@ -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 + } +} diff --git a/src/use/useLogin.tsx b/src/use/useLogin.tsx deleted file mode 100644 index 2541549..0000000 --- a/src/use/useLogin.tsx +++ /dev/null @@ -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 - } -} \ No newline at end of file diff --git a/src/use/useUserInfo.ts b/src/use/useUserInfo.ts index cdf67ec..4caf5a4 100644 --- a/src/use/useUserInfo.ts +++ b/src/use/useUserInfo.ts @@ -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 {DataParam, UserParam} from '@/reducers/userInfo' export default () => { - const user = useSelector((state:DataParam) => state.userInfo) as DataParam + const userInfo = useSelector((state:DataParam) => state.userInfo) as DataParam const dispatch = useDispatch() const setToken = (token: string) => { @@ -36,6 +36,6 @@ export default () => { removeUserInfo, removeToken, removeSessionKey, - user, //响应式数据返回 + userInfo, //响应式数据返回 } } \ No newline at end of file diff --git a/src/util/checkLogin.ts b/src/util/checkLogin.ts new file mode 100644 index 0000000..cc00e0b --- /dev/null +++ b/src/util/checkLogin.ts @@ -0,0 +1,4 @@ + +export const checkLogin = () => { + +} \ No newline at end of file