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

订单列表对接

Browse Source
This commit is contained in:
czm 2022-05-30 20:32:47 +08:00
parent b93b59332b
commit 55cbaac8f5
14 changed files with 239 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/orderBtns/index.tsx
View File

@ -8,9 +8,12 @@ import styles from './index.module.scss'
type Param = {
status?: number, //订单状态
orderId: number, //订单id
payModel: number, //支付方式
realPayPrice: number, //实付金额
pendingPayPrice: number, //待付金额
onClick?: (val: number) => void //点击后触发的事件，返回订单状态
}
export default memo(({status = 0, orderId = 0, onClick}:Param) => {
export default memo(({status = 0, orderId = 0, onClick, realPayPrice = 0, pendingPayPrice = 0}:Param) => {
//订单按钮按订单状态归类
const orderBtnsList = useRef([
{
@ -49,15 +52,22 @@ export default memo(({status = 0, orderId = 0, onClick}:Param) => {
label: '再次购买'
}
])
//判断是否显示该按钮
const orderBtnsShow = useCallback((item, status) => {
if(item.id == 1) {
return( realPayPrice == 0 && status <= 4) //在代发货之前没有付过款
}
if(item.id == 2) {
return( pendingPayPrice != 0 && status <= 4) //在代发货之前没有付完款
}
return item.value.includes(status)
},[])
//点击按钮操作
const submitBtns = (val) => {
(val == 1)&&cancelOrder(); //取消订单按钮
(val == 2)&&onClick?.(val); //去付款按钮
}
//取消订单

4
src/pages/details/index.tsx
View File

@ -8,7 +8,7 @@ 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 {formatHashTag, formatImgUrl} from '@/common/fotmat'
import useManualPullDownRefresh from '@/use/useManualPullDownRefresh';
import { goLink } from '@/common/common';
import useUserInfo from '@/use/useUserInfo';
@ -147,7 +147,7 @@ export default (props:params) => {
{productInfo?.product_color_list?.map(item => {
return <View className={styles.item} onClick={() => getColorItem(item)}>
<View className={styles.item_color}>
<Image src={item.texture_url}></Image>
<Image src={formatImgUrl(item.texture_url)}></Image>
</View>
<View className={styles.item_name}>{item.code}</View>
</View>

23
src/pages/order/components/payment/index.tsx
View File

@ -1,5 +1,5 @@
import { Text, View } from "@tarojs/components";
import { memo, useEffect, useState } from "react";
import { memo, useEffect, useMemo, useState } from "react";
import AmountShow from "../amountShow";
import classnames from "classnames";
import styles from './index.module.scss'
@ -15,7 +15,8 @@ import {alert} from "@/common/common"
type Param = {
show?: true|false,
onClose?: () => void,
orderId?: number //应付单id
orderId?: number, //应付单id
onSubmitSuccess?: () => void //支付成功
}
type PayInfo = {
@ -23,7 +24,7 @@ type PayInfo = {
}
type PayStatus = 0|1|2|3|4|null //0:预存款， 1:账期，2：线下汇款， 3：扫码支付, 4:货到付款
export default memo(({show = false, onClose, orderId = 0}:Param) => {
export default memo(({show = false, onClose, orderId = 0, onSubmitSuccess}:Param) => {
//提交参数
const [submitData, setSubmitData] = useState<{id:number, payment_method: PayStatus}>({
@ -78,11 +79,19 @@ export default memo(({show = false, onClose, orderId = 0}:Param) => {
let res = await submitFetchData(submitData)
if(res.success) {
alert.success('支付成功')
onSubmitSuccess?.()
} else {
alert.none(res.msg)
}
}
const advance_payment = useMemo(() => {
const price = formatPriceDiv(payInfo?.should_collect_money - payInfo?.amount_paid)
return (
<View className={styles.payment_list_item_left_price}>{(payInfo?.advance_deposit_balance < price)&&'余额不足，' }剩余 ¥{payInfo?.advance_deposit_balance}</View>
)
}, [payInfo])
return (
<View className={styles.payment_main}>
<Popup show={show} showTitle={false} onClose={onClose} >
@ -90,7 +99,7 @@ export default memo(({show = false, onClose, orderId = 0}:Param) => {
<View className={classnames('iconfont icon-a-moreback', styles.miconfont_title)} onClick={onClose}></View>
<View className={styles.title}>订单支付</View>
<View className={styles.amount}>
<AmountShow status={2} number={formatPriceDiv(payInfo?.amount)}/>
<AmountShow status={2} number={formatPriceDiv(payInfo?.should_collect_money - payInfo?.amount_paid)}/>
</View>
<View className={styles.payment_list}>
<View className={styles.payment_list_top_border}></View>
@ -99,11 +108,11 @@ export default memo(({show = false, onClose, orderId = 0}:Param) => {
<View className={styles.payment_list_title_price}>
<View className={styles.payment_list_title_price_item}>
<Text>订单金额</Text>
<Text>¥6,001.00</Text>
<Text>¥{formatPriceDiv(payInfo?.should_collect_money)}</Text>
</View>
<View className={styles.payment_list_title_price_item}>
<Text>已付金额</Text>
<Text>¥1,801.00</Text>
<Text>¥{formatPriceDiv(payInfo?.amount_paid)}</Text>
</View>
</View>
</View>
@ -114,7 +123,7 @@ export default memo(({show = false, onClose, orderId = 0}:Param) => {
<View className={classnames('iconfont icon-a-tuikuanshouhou', styles.miconfont)}></View>
<View className={styles.payment_list_item_left_text}>预存款</View>
</View>
<View className={styles.payment_list_item_left_price}>金额不足，剩余 ¥{payInfo?.advance_deposit_balance}</View>
{advance_payment}
</View>
<MCheckbox status={submitData.payment_method == 0} onSelect={() => advanceSelectData(0)} onClose={() => advanceSelectData(null)}/>
</View>

2
src/pages/order/components/remark/index.tsx
View File

@ -27,7 +27,7 @@ export default ({onBlur, onSave}:Param) => {
}
return (
<View className={styles.order_popup}>
<View className={styles.order_popup_title}>添加备注</View>
<View className={styles.order_popup_title}>编辑备注</View>
<View className={styles.order_popup_input}>
<Textarea placeholder="请添加备注" maxlength={descData.count} cursorSpacing={100} onInput={(e) => getDesc(e)} onBlur={(e) => onBlur?.(e)}></Textarea>
<View className={styles.descDataNum}>{descData.number}/{descData.count}</View>

1
src/pages/order/index.module.scss
View File

@ -52,6 +52,7 @@
color: $color_font_two;
margin-right: 10px;
flex:1;
word-break:break-all;
}
.order_desc_text_hint{
text-align: right;

13
src/pages/order/index.tsx
View File

@ -151,6 +151,17 @@ import styles from './index.module.scss'
getSaleOrderPreView()
})
//支付成功
const onPaySuccess = useCallback(() => {
getSaleOrderPreView()
closePayShow()
}, [orderDetail])
//关闭支付弹窗
const closePayShow = useCallback(() => {
setPayMentShow(() => false)
}, [orderDetail])
return (
<View className={styles.order_main}>
{/* <View className={styles.weight_memo_con}>
@ -191,7 +202,7 @@ import styles from './index.module.scss'
<Popup show={showDesc} showTitle={false} onClose={() => setShowDesc(false)} >
<Remark onSave={(e) => getRemark(e)}/>
</Popup>
<Payment show={payMentShow} onClose={() => setPayMentShow(false)} orderId={orderDetail?.should_collect_order_id}/>
<Payment onSubmitSuccess={onPaySuccess} show={payMentShow} onClose={closePayShow} orderId={orderDetail?.should_collect_order_id}/>
<View className="common_safe_area_y"></View>
</View>
)

18
src/pages/orderList/components/orderStatusList/index.module.scss Normal file
View File

@ -0,0 +1,18 @@
.order_status_list{
font-size: $font_size;
color: #9E9E9E;
margin-top: 20px;
.order_status_item{
padding: 20px;
box-sizing: border-box;
}
.selected{
font-weight: 700;
color: #000;
border-bottom: 4px solid #707070;
}
.order_list_scroll{
white-space: nowrap;
display: flex;
}
}

46
src/pages/orderList/components/orderStatusList/index.tsx Normal file
View File

@ -0,0 +1,46 @@
import { ScrollView, View } from "@tarojs/components"
import { memo, useEffect, useState } from "react"
import styles from './index.module.scss'
import classnames from "classnames";
type Param = {
list: {id: number, name: string}[],
defaultId?: number|null,
onSelect?: (val: number) => void
}
export default memo(({list = [], defaultId = null, onSelect}: Param) => {
const [selectInfo, setSelectInfo] = useState({
selected: -1, //当前选中的id
tabId: '', //需要滚动到的id
})
useEffect(() => {
if(defaultId) {
const index = list?.findIndex(item => {
console.log(item.id, defaultId)
return item.id == defaultId
})
if(index !== -1) {
const num = index > 0?( index - 1) : 0
setSelectInfo((e) => ({...e, tabId:list[num].id.toString()}))
}
}
}, [defaultId])
const clickEvent = ({item, index}: {item:any, index:number}) => {
const num = index > 0?( index - 1) : 0
setSelectInfo((e) => ({...e, tabId:list[num].id.toString(), selected: item.id}))
onSelect?.(item.id)
}
return (
<View className={styles.order_status_list}>
<ScrollView scrollX scrollIntoView={`tabs_${selectInfo.tabId}`} scrollWithAnimation={true}>
<View className={styles.order_list_scroll}>
{list.map((item, index) => {
return <View key={item.id} id={`tabs_${item.id}`} onClick={() => clickEvent({item, index})} className={classnames(styles.order_status_item, (selectInfo.selected==item.id)&&styles.selected)}>{item.name}</View>
})}
</View>
</ScrollView>
</View>
)
})

17
src/pages/orderList/index.tsx
View File

@ -3,14 +3,13 @@ import useLogin from "@/use/useLogin"
import { Image, ScrollView, Text, View } from "@tarojs/components"
import Taro, { useDidShow, usePullDownRefresh, useRouter } from "@tarojs/taro"
import { useCallback, useEffect, useMemo, useRef, useState } from "react"
import {ORDER_STATUS} from '@/common/enum'
import styles from './index.module.scss'
import classnames from "classnames";
import Order from "./components/order"
import InfiniteScroll from "@/components/infiniteScroll"
import {GetOrderStatusListApi, GetOrderListApi} from '@/api/order'
import { dataLoadingStatus, getFilterData } from "@/common/util"
import Tabs from "@/components/tabs"
import OrderStatusList from "./components/orderStatusList"
export default () => {
const {checkLogin} = useLogin()
@ -44,6 +43,7 @@ export default () => {
const getOrderList = async () => {
let res = await listFetchData(getFilterData(searchField))
setOrderData({list: res.data.list, total: res.data.total})
setRefresherTriggeredStatus(() => false)
}
@ -91,24 +91,17 @@ export default () => {
const getRefresherRefresh = async () => {
pageNum.current.size = 1
setRefresherTriggeredStatus(true)
setSearchField((val) => ({...val, size:10}))
}
return (
<View className={styles.order_list_main}>
<View className={styles.title}>
<Search placeIcon="out" placeholder="搜索商品/名称/颜色/订单号" showBtn={true} changeOnSearch={getSearchData} debounceTime={300}/>
<View className={styles.order_status_list}>
<ScrollView scrollX >
<View className={styles.order_list_scroll}>
{statusList.map(item => {
return <View key={item.id} onClick={() => changeStatus(item.id)} className={classnames(styles.order_status_item, (searchField.status==item.id)&&styles.selected)}>{item.name}</View>
})}
</View>
</ScrollView>
</View>
<OrderStatusList list={statusList} onSelect={changeStatus} defaultId={1}/>
</View>
<View className={styles.order_list}>
<InfiniteScroll statusMore={statusMore} selfonScrollToLower={getScrolltolower} refresherEnabled={true} selfOnRefresherRefresh={getRefresherRefresh}>
<InfiniteScroll statusMore={statusMore} selfonScrollToLower={getScrolltolower} refresherEnabled={true} refresherTriggered={refresherTriggeredStatus} selfOnRefresherRefresh={getRefresherRefresh}>
{orderData?.list.map(item => {
return <View key={item.id} className={styles.order_item_con}> <Order value={item} onClickBtn={clickOrderBtn}/></View>
})}

2
src/use/useCheckAuthorize.tsx
View File

@ -8,7 +8,7 @@ type Param = {
msg: string //检查不通过时警告
}
export default ({scope, msg}: Param) => {
//检查授权
//这个hook微信授权检查授权
const check = useCallback(() => {
return new Promise((reslove, reject) => {
Taro.getSetting({

7
src/use/useHttp.ts
View File

@ -5,6 +5,8 @@ import { useEffect, useRef, useState } from 'react'
import {BASE_URL, WX_APPID} from '@/common/constant'
import useUserInfo from "./useUserInfo"
import qs from 'qs';
import useLogin from './useLogin';
import useLoginRequest from './useLoginRequest';
type Params = {
@ -122,6 +124,7 @@ export const useRequest = (options:option = {
const stateRef = useRef({...params})
const [state, setState] = useState({...stateRef.current})
const {removeToken, removeSessionKey} = useUserInfo()
const {login} = useLoginRequest()
useEffect(() => {
console.log('变化::', state.loading)
@ -176,9 +179,7 @@ export const useRequest = (options:option = {
if (statusCode === 401) {
removeToken()
removeSessionKey()
// Taro.reLaunch({
// url: router.path +'?' + qs.stringify(router.params)
// })
login()
} else {
Taro.showToast({
title: `错误：${showStatus(statusCode)}`,

69
src/use/useLogin.ts
View File

@ -1,69 +1,31 @@
import { useEffect, useState } from "react"
import { WX_APPID } from "@/common/constant"
import {BASE_URL, WX_APPID } from "@/common/constant"
import useUserInfo from "./useUserInfo"
import Taro, { useRouter } from "@tarojs/taro"
import { LoginApi } from "@/api/login"
import { GetWxUserInfoApi, GetAdminUserInfoApi, GetPhoneNumberApi } from "@/api/user"
import qs from 'qs';
import useLoginRequest from "./useLoginRequest"
export default () => {
const {setToken, setSessionKey, setUserInfo, setAdminUserInfo, userInfo} = useUserInfo()
const {setUserInfo, setAdminUserInfo, userInfo} = useUserInfo()
useEffect(() => {
console.log('userInfo::',userInfo.token)
}, [userInfo])
const router = useRouter()
//登录请求
const {fetchData} = LoginApi()
//微信登录
const wxLogin = () => {
return new Promise((reslove, reject) => {
Taro.login({
success: async (res) => {
if (res.code) {
const {data, success, msg} = await fetchData({js_code: res.code})
if(success) {
console.log('token::',data.token)
setToken(data.token)
setSessionKey(data.session_key)
reslove(data)
let params = router.params
delete params.$taroTimestamp
console.log('params::',params)
if(router.path === '/pages/index/index' || router.path === '/pages/user/index') {
Taro.reLaunch({
url: router.path +'?' + qs.stringify(params)
})
} else {
Taro.redirectTo({
url: router.path +'?' + qs.stringify(params)
})
}
getAdminUserInfo()
//登录请求 (调用这个就不能再useHttp中使用，当前这个hook, 否则会死循环内存溢出)
// const {fetchData} = LoginApi()
//todo 删除本地授权用户信息，获取最新授权信息
} else {
Taro.showToast({
title:'登录失败',
icon:"none"
})
reject(msg)
}
} else {
console.log('登录失败！' + res.errMsg)
reject(res.errMsg)
}
},
fail: function(e) {
console.log('登录失败！::',e)
reject(e)
}
})
})
//登录请求
const {login} = useLoginRequest()
const wxLogin = async () => {
try {
await login()
getAdminUserInfo()
} catch(e) {
console.log('登录失败::',e)
}
}
//获取用户信息
@ -83,6 +45,7 @@ export default () => {
Taro.checkSession({
success: async () => {
reslove(true)
if(!userInfo.adminUserInfo) getAdminUserInfo()
},
fail: async () => {
await wxLogin()
@ -91,8 +54,6 @@ export default () => {
})
}
})
}
//获取用户头像等信息数据

106
src/use/useLoginRequest.ts Normal file
View File

@ -0,0 +1,106 @@
import {BASE_URL, WX_APPID } from "@/common/constant"
import Taro, { useRouter } from "@tarojs/taro"
import { useRef, useState } from "react"
import qs from 'qs'
import useUserInfo from "./useUserInfo"
//开这个hook 主要是为了让useHttp 能够调用
type Param = {success: true|false, data: any, msg: string, code: null|number, loading: false|true}
export default () => {
let initData = {
success: false,
data: null,
msg: '',
code: null,
loading: false
}
let loginData = useRef<Param>(initData)
const {setToken, setSessionKey} = useUserInfo()
const router = useRouter()
//微信登录请求v2
const fetchData = async (login_code) => {
const q = {
url: BASE_URL + '/v1/mall/login',
header: {
"Platform": 6,
"Appid": WX_APPID,
},
method: 'post',
data:{js_code: login_code}
}
try{
const result = await Taro.request(q as any)
const {code, data, msg} = result.data
if(result.statusCode === 200) {
loginData.current.success = (code === 0 ? true : false)
loginData.current.code = code
loginData.current.msg = msg
loginData.current.data = data
} else {
Taro.showToast({
title: `错误：登录失败`,
icon: 'none'
})
console.log('登录错误：', result.errMsg)
}
}catch(e) {
Taro.showToast({
title: `错误：登录失败`,
icon: 'none'
})
console.log('登录错误：', e.errMsg)
}
return loginData.current
}
//微信登录
const login = () => {
return new Promise((reslove, reject) => {
Taro.login({
success: async (res) => {
if (res.code) {
const {data, success, msg} = await fetchData(res.code)
if(success) {
setToken(data.token)
setSessionKey(data.session_key)
reslove(data)
let params = router.params
delete params.$taroTimestamp
if(router.path === '/pages/index/index' || router.path === '/pages/user/index') {
Taro.reLaunch({
url: router.path +'?' + qs.stringify(params)
})
} else {
Taro.redirectTo({
url: router.path +'?' + qs.stringify(params)
})
}
} else {
Taro.showToast({
title:'登录失败',
icon:"none"
})
reject(msg)
}
} else {
console.log('登录失败！' + res.errMsg)
reject(res.errMsg)
}
},
fail: function(e) {
console.log('登录失败！::',e)
reject(e)
}
})
})
}
return {
login
}
}

24
src/use/useManualPullDownRefresh.ts
View File

@ -1,24 +0,0 @@
import Taro, { usePullDownRefresh } from "@tarojs/taro"
import { useCallback, useState } from "react"
type Arg = {[index:string]:any}
export default (fn?:(val:Arg) => any, arg?:Arg) => {
const [data, setData] = useState({})
usePullDownRefresh(() => {
getData()
})
const getData = useCallback(() => {
setTimeout(() => {
const res = fn?.({...arg})
setData((e) => ({...e, res}))
Taro.stopPullDownRefresh()
}, 1000)
}, [])
return {
getData,
data
}
}