From f3c818f549bce53f01abc778e1f8dbe8c11c35e3 Mon Sep 17 00:00:00 2001 From: czm <2192718639@qq.com> Date: Mon, 9 May 2022 18:52:08 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AF=B9=E6=8E=A5=E5=AE=8C=E6=B7=BB=E5=8A=A0?= =?UTF-8?q?=E8=B4=AD=E7=89=A9=E8=BD=A6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/shopCart.ts | 11 ++ src/api/user.ts | 2 +- src/common/constant.js | 4 +- src/common/util.js | 2 +- src/components/checkbox/index.module.scss | 14 +-- src/components/checkbox/index.tsx | 2 +- src/components/shopCart/index.module.scss | 3 +- src/components/shopCart/index.tsx | 43 +++++--- src/constants/userInfo.ts | 4 +- .../details/components/orderCount/index.tsx | 101 ++++++++++++++---- src/reducers/hooks.ts | 8 ++ src/reducers/index.ts | 2 +- src/reducers/userInfo.ts | 70 ++++++++---- src/use/useLogin.ts | 16 ++- src/use/useUserInfo.ts | 9 +- 15 files changed, 212 insertions(+), 79 deletions(-) create mode 100644 src/reducers/hooks.ts diff --git a/src/api/shopCart.ts b/src/api/shopCart.ts index 8d292bf..86368b8 100644 --- a/src/api/shopCart.ts +++ b/src/api/shopCart.ts @@ -9,4 +9,15 @@ export const GetShoppingCartApi = () => { url: `/v1/mall/shoppingCart/productColor`, method: "get", }) +} + +/** + * 批量添加面料颜色到物车列表 + * @returns +*/ +export const AddShoppingCartApi = () => { + return useRequest({ + url: `/v1/mall/shoppingCart/productColor/list`, + method: "post", + }) } \ No newline at end of file diff --git a/src/api/user.ts b/src/api/user.ts index c97e29e..c131c2f 100644 --- a/src/api/user.ts +++ b/src/api/user.ts @@ -13,7 +13,7 @@ import { useRequest } from "@/use/useHttp" /** * 获取后台返回的用户信息 */ - export const GetSelfUserInfoApi = () => { + export const GetAdminUserInfoApi = () => { return useRequest({ url: `/v1/mall/user/info`, method: "get", diff --git a/src/common/constant.js b/src/common/constant.js index 4ce9f4c..21be554 100644 --- a/src/common/constant.js +++ b/src/common/constant.js @@ -5,11 +5,11 @@ // export const BASE_URL = `http://192.168.0.89:40001/lymarket` // export const BASE_URL = `http://192.168.1.165:40001/lymarket` // 王霞 // export const BASE_URL = `https://test.zzfzyc.com/lymarket` // 测试环境 -// export const BASE_URL = `http://192.168.1.30:40001/lymarket` // 发 +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` // 王霞 -export const BASE_URL = `http://192.168.1.224:50001/lymarket` // 添 +// export const BASE_URL = `http://192.168.1.224:50001/lymarket` // 添 // CDN // 生成密钥 diff --git a/src/common/util.js b/src/common/util.js index 9929638..6c131c9 100644 --- a/src/common/util.js +++ b/src/common/util.js @@ -42,7 +42,7 @@ export const throttle = (fn, delay) => { export const getFilterData = (val = {}, arr = []) => { let res = {} for(let key in val) { - if(val[key]!=undefined&&val[key]!=null&&val[key]!=''&&(!arr.includes(key))){ + if(val[key]!==undefined&&val[key]!==null&&val[key]!==''&&(!arr.includes(key))){ if(val[key] instanceof Number){ if(!isNaN(val[key])) { res[key] = val[key] diff --git a/src/components/checkbox/index.module.scss b/src/components/checkbox/index.module.scss index 72809eb..fbd781e 100644 --- a/src/components/checkbox/index.module.scss +++ b/src/components/checkbox/index.module.scss @@ -1,13 +1,13 @@ .checkbox_main{ - width: 60px; - height: 60px; + width: 40px; + height: 40px; display: flex; justify-content: center; align-items: center; } .checkbox_item{ - width: 40px; - height: 40px; + width: 30px; + height: 30px; border: 1px solid #707070; border-radius: 50%; text-align: center; @@ -17,10 +17,10 @@ background-color: $color_main; border: 0; color: #fff; - width: 44px; - height: 44px; + width: 30px; + height: 30px; text-align: center; - line-height: 44px; + line-height: 30px; .miconfont{ font-size: 26px; } diff --git a/src/components/checkbox/index.tsx b/src/components/checkbox/index.tsx index ec557d5..31f1839 100644 --- a/src/components/checkbox/index.tsx +++ b/src/components/checkbox/index.tsx @@ -26,7 +26,7 @@ export default ({onSelect, onClose, status = false}: params) => { <> onSelectEven()}> - {selected&&} + {selected&&} diff --git a/src/components/shopCart/index.module.scss b/src/components/shopCart/index.module.scss index 61142a4..73c6cd7 100644 --- a/src/components/shopCart/index.module.scss +++ b/src/components/shopCart/index.module.scss @@ -59,7 +59,6 @@ .checkbox{ display: flex; align-items: center; - } .img{ width: 126px; @@ -80,6 +79,7 @@ .title{ font-size: $font_size; color: $color_font_one; + @include common_ellipsis; } .subtitle{ color: $color_font_two; @@ -101,6 +101,7 @@ display: flex; flex-direction: column; justify-content: space-between; + align-items: flex-end; .price{ font-size: $font_size; font-weight: 700; diff --git a/src/components/shopCart/index.tsx b/src/components/shopCart/index.tsx index 5dba441..ee199fa 100644 --- a/src/components/shopCart/index.tsx +++ b/src/components/shopCart/index.tsx @@ -5,17 +5,24 @@ import MCheckbox from "@/components/checkbox"; import LoadingCard from "@/components/loadingCard"; import InfiniteScroll from "@/components/infiniteScroll"; import styles from "./index.module.scss" -import { useEffect, useState } from "react"; +import { useCallback, useEffect, useState } from "react"; import Taro from "@tarojs/taro"; import { goLink } from "@/common/common"; import {GetShoppingCartApi} from "@/api/shopCart" +import { formatHashTag, formatMillionYuan } from "@/common/fotmat"; type param = { show?: true|false, onClose?: () => void } export default ({show = false, onClose}: param) => { - const selectList = ['不限', '剪板', '散剪', '大货'] + const selectList = [ + {title:'不限', unit:'', eunit:''}, + {title:'大货', unit:'件', eunit:'kg'}, + {title:'剪板', unit:'米', eunit:'m'}, + {title:'散剪', unit:'米', eunit:'kg'}, + ] + const [selectIndex, setSelectIndex] = useState(0) const selectProduct = (index:number) => { setSelectIndex(index) @@ -28,7 +35,8 @@ export default ({show = false, onClose}: param) => { const getShoppingCart = async () => { setLoading(true) const {data} = await fetchData() - setList(data) + console.log('color_list::', data) + setList(data.color_list) setLoading(false) } @@ -94,7 +102,16 @@ export default ({show = false, onClose}: param) => { }) } - + //格式化金额 + const formatPirce = useCallback((price) => { + const {num} = formatMillionYuan(price, 100) + return Number(num) + }, []) + + //格式化数量 + const formatCount = useCallback((item) => { + return item.sale_mode == 0? item.roll + '件': item.length + 'm' + }, []) return ( @@ -109,15 +126,15 @@ export default ({show = false, onClose}: param) => { {selectList.map((item, index) => { - return selectProduct(index)} className={classnames(styles.search_item, (selectIndex==index)&&styles.search_item_select)}>{item} + return selectProduct(index)} className={classnames(styles.search_item, (selectIndex==index)&&styles.search_item_select)}>{item.title} })} {loading&&} - {!loading&&list.length > 0&& {console.log('触底了')}} paddingBottom={100}> + {!loading&&list?.length > 0&& - {list.map((item, index) => { + {list?.map((item, index) => { return selectCallBack(item)} onClose={() => colseCallBack(item)}/> @@ -126,19 +143,19 @@ export default ({show = false, onClose}: param) => { - {item.title} - 07703# 21S单面平纹(食毛) - 剪板 + {formatHashTag(item.product_code, item.product_name)} + {item.product_color_code +' ' + item.product_color_name} + {item.sale_mode_name} - ￥40.5/kg - ×12m + ￥{formatPirce(item.sale_price)}/kg + ×{formatCount(item)} })} } - {!loading&&list.length == 0 && + {!loading&&list?.length == 0 && 暂未选择商品 去选购 } diff --git a/src/constants/userInfo.ts b/src/constants/userInfo.ts index 77585a2..b2f5338 100644 --- a/src/constants/userInfo.ts +++ b/src/constants/userInfo.ts @@ -1,6 +1,8 @@ export const SET_USERINFO = 'setUserInfo' +export const SET_ADMINUSERINFO = 'setAdminUserInfo' export const SET_TOKEN = 'setToken' export const SET_SESSIONKEY = 'setSessionkey' export const CLEAR_TOKEN = 'clearToken' export const CLEAR_SESSIONKEY = 'clearSessionkey' -export const CLEAR_USERINFO = 'clearUserInfo' \ No newline at end of file +export const CLEAR_USERINFO = 'clearUserInfo' +export const CLEAR_ADMINUSERINFO = 'clearAdminUserInfo' \ No newline at end of file diff --git a/src/pages/details/components/orderCount/index.tsx b/src/pages/details/components/orderCount/index.tsx index 6ca9a5b..1efa7e7 100644 --- a/src/pages/details/components/orderCount/index.tsx +++ b/src/pages/details/components/orderCount/index.tsx @@ -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,6 +25,8 @@ type param = { productId?: number } export default memo(({show = false, onClose, title = '', productId = 0}: param) => { + const {adminUserInfo} = useSelector(state => state.userInfo) + 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'}, @@ -28,32 +34,53 @@ export default memo(({show = false, onClose, title = '', productId = 0}: param) ] const [selectIndex, setSelectIndex] = useState(0) const selectProduct = (index:number) => { - setSelectIndex(index) + console.log('number::',index) + setSelectIndex(() => index) } //获取面料颜色列表 - const {fetchData:colorFetchData} = GetColorList() + const {fetchData:colorFetchData, state: colorState} = GetColorList() const [list, setList] = useState([]) 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]) + const list = initList(data.list) + setList([...list]) 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 +91,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 +125,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,8 +136,32 @@ export default memo(({show = false, onClose, title = '', productId = 0}: param) //添加购物车 const {getSelfUserInfo} = UseLogin() - const addShopCart = () => { - getSelfUserInfo() + const {fetchData:addFetchData} = AddShoppingCartApi() + const addShopCart = async () => { + if(selectCount.sumCount == 0) { + Taro.showToast({ + icon:'none', + title:'请选择面料颜色!' + }) + return false + } + await getSelfUserInfo() + const state = await addFetchData({ + "sale_mode": selectIndex, + color_list: selectCount.color_list + }) + if(state.success) { + Taro.showToast({ + title:'添加成功' + }) + onClose?.() + } else { + Taro.showToast({ + icon:'none', + title: state.msg + }) + } + } //显示金额 @@ -123,12 +179,10 @@ export default memo(({show = false, onClose, title = '', productId = 0}: param) //重置数据 useEffect(() => { - const newList = list.map(item => { - item.count = 0 - item.show = false - return item - }) + const newList = initList(list) setList([...newList]) + // condition.current.code_or_name = null + // setSearchShow(false) }, [selectIndex]) //筛选数据 @@ -147,7 +201,7 @@ export default memo(({show = false, onClose, title = '', productId = 0}: param) return ( - closePopup()}> + closePopup()} > {title} @@ -165,12 +219,13 @@ export default memo(({show = false, onClose, title = '', productId = 0}: param) clearSearch()}>取消 } - 颜色分类 (13) {list.length} + 颜色分类 (13) {!searchShow&& changeSearchShow()}>} - {list.length > 0&& + {(list.length <= 0 && colorState.loading)&&} + {(list.length > 0&& !colorState.loading)&& {list.map(item => { return @@ -199,8 +254,8 @@ export default memo(({show = false, onClose, title = '', productId = 0}: param) })} - || - 暂无此商品} + } + {(list.length <= 0 && !colorState.loading)&&暂无此商品} diff --git a/src/reducers/hooks.ts b/src/reducers/hooks.ts new file mode 100644 index 0000000..b882f8f --- /dev/null +++ b/src/reducers/hooks.ts @@ -0,0 +1,8 @@ + +//该方法纯粹只是个Ts类型定义文件 +import { useSelector as useReduxSelector, TypedUseSelectorHook } from 'react-redux'; +import { DataParam } from './userInfo'; +type Params = { + userInfo: DataParam +} +export const useSelector: TypedUseSelectorHook = useReduxSelector; \ No newline at end of file diff --git a/src/reducers/index.ts b/src/reducers/index.ts index 8964c5d..2af35af 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 107eab3..5fe0ff5 100644 --- a/src/reducers/userInfo.ts +++ b/src/reducers/userInfo.ts @@ -2,11 +2,13 @@ import Taro from '@tarojs/taro' import { SET_USERINFO, + SET_ADMINUSERINFO, SET_TOKEN, SET_SESSIONKEY, CLEAR_TOKEN, CLEAR_USERINFO, - CLEAR_SESSIONKEY + CLEAR_SESSIONKEY, + CLEAR_ADMINUSERINFO, } from '../constants/userInfo' export type UserParam = { @@ -18,13 +20,28 @@ export type UserParam = { province?: string, gender?: number, language?: string, - timestamp?: number + timestamp?: number, + physical_warehouse?: number, + physical_warehouse_name?: string, +} + +export type UserAdminParam = { + avatar_url?: string, + open_id?: string, + physical_warehouse?: number, + physical_warehouse_name?: string, + union_id?: string, + user_code?: string, + user_id?: number, + user_name?: string, + wechat_user_open_id?: number } export type DataParam = { token?: string session_key?: string, - userInfo: UserParam + userInfo: UserParam, + adminUserInfo: UserAdminParam } type Action = { @@ -36,6 +53,7 @@ type Action = { const INIT_USER = { userInfo: Taro.getStorageSync('userInfo')?JSON.parse(Taro.getStorageSync('userInfo')):null, + adminUserInfo: Taro.getStorageSync('adminUserInfo')?JSON.parse(Taro.getStorageSync('adminUserInfo')):null, token: Taro.getStorageSync('token')||'', session_key: Taro.getStorageSync('session_key')||'', } @@ -43,25 +61,31 @@ const INIT_USER = { export default function counter (state = INIT_USER, action: Action) { const {type, data} = action switch (type) { - case SET_USERINFO: - Taro.setStorageSync('userInfo',JSON.stringify(data?.userInfo)) - return {...state,...data} - case SET_TOKEN: - Taro.setStorageSync('token',data?.token) - return {...state,...data} - case SET_SESSIONKEY: - Taro.setStorageSync('session_key',data?.session_key) - return {...state,...data} - case CLEAR_TOKEN: - Taro.removeStorageSync('token') - return {...state, token:''} - case CLEAR_SESSIONKEY: - Taro.removeStorageSync('session_key') - return {...state, session_key:''} - case CLEAR_USERINFO: - Taro.removeStorageSync('userInfo') - return {...state, userInfo: null} - default: - return state + case SET_USERINFO: + Taro.setStorageSync('userInfo',JSON.stringify(data?.userInfo)) + return {...state,...data} + case SET_ADMINUSERINFO: + Taro.setStorageSync('adminUserInfo',JSON.stringify(data?.adminUserInfo)) + return {...state,...data} + case SET_TOKEN: + Taro.setStorageSync('token',data?.token) + return {...state,...data} + case SET_SESSIONKEY: + Taro.setStorageSync('session_key',data?.session_key) + return {...state,...data} + case CLEAR_TOKEN: + Taro.removeStorageSync('token') + return {...state, token:''} + case CLEAR_SESSIONKEY: + Taro.removeStorageSync('session_key') + return {...state, session_key:''} + case CLEAR_USERINFO: + Taro.removeStorageSync('userInfo') + return {...state, userInfo: null} + case CLEAR_ADMINUSERINFO: + Taro.removeStorageSync('adminUserInfo') + return {...state, adminUserInfo: null} + default: + return state } } \ No newline at end of file diff --git a/src/use/useLogin.ts b/src/use/useLogin.ts index 386657d..73377c0 100644 --- a/src/use/useLogin.ts +++ b/src/use/useLogin.ts @@ -3,12 +3,12 @@ import { WX_APPID } from "@/common/constant" import useUserInfo from "./useUserInfo" import Taro, { useRouter } from "@tarojs/taro" import { LoginApi } from "@/api/login" -import { GetWxUserInfoApi } from "@/api/user" +import { GetWxUserInfoApi, GetAdminUserInfoApi } from "@/api/user" import qs from 'qs'; export default () => { - const {setToken, setSessionKey, setUserInfo, userInfo} = useUserInfo() - + const {setToken, setSessionKey, setUserInfo, setAdminUserInfo, userInfo} = useUserInfo() + useEffect(() => { console.log('userInfo::',userInfo.token) }, [userInfo]) @@ -16,6 +16,7 @@ export default () => { const router = useRouter() //登录请求 const {fetchData} = LoginApi() + //微信登录 const wxLogin = () => { return new Promise((reslove, reject) => { @@ -40,6 +41,9 @@ export default () => { url: router.path +'?' + qs.stringify(params) }) } + getAdminUserInfo() + + //todo 删除本地授权用户信息，获取最新授权信息 } else { Taro.showToast({ @@ -62,6 +66,12 @@ export default () => { } + //获取用户信息 + const {fetchData: useFetchData} = GetAdminUserInfoApi() + const getAdminUserInfo = async () => { + let res = await useFetchData() + setAdminUserInfo(res.data) + } //登录加checkLogin检查 const checkLogin = () => { diff --git a/src/use/useUserInfo.ts b/src/use/useUserInfo.ts index 690a8ce..9e03fc7 100644 --- a/src/use/useUserInfo.ts +++ b/src/use/useUserInfo.ts @@ -1,6 +1,6 @@ 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' +import { CLEAR_SESSIONKEY, SET_USERINFO, SET_TOKEN, SET_SESSIONKEY, CLEAR_USERINFO, CLEAR_TOKEN, SET_ADMINUSERINFO} from '@/constants/userInfo' +import {DataParam, UserParam, UserAdminParam} from '@/reducers/userInfo' export default () => { const userInfo = useSelector((state:DataParam) => state.userInfo) as DataParam const dispatch = useDispatch() @@ -17,6 +17,10 @@ export default () => { dispatch({type:SET_USERINFO, data:{userInfo}}) } + const setAdminUserInfo = (adminUserInfo: UserAdminParam) => { + dispatch({type:SET_ADMINUSERINFO, data:{adminUserInfo}}) + } + const removeUserInfo = () => { dispatch({type:CLEAR_USERINFO}) } @@ -32,6 +36,7 @@ export default () => { return { setToken, setUserInfo, + setAdminUserInfo, setSessionKey, removeUserInfo, removeToken,