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

商城测试版v8_1

Browse Source
This commit is contained in:
czm 2022-07-29 20:48:15 +08:00
parent 4a7bbf774f
commit e2b0b0c52b
18 changed files with 1821 additions and 1722 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
.prettierrc.js Normal file
View File

@ -0,0 +1,10 @@
module.exports = {
printWidth: 160, // 每行代码最大长度
tabWidth: 2, //一个tab代表几个空格数，默认为80
useTabs: false, //是否使用tab进行缩进，默认为false，表示用空格进行缩减
semi: false, // 声明后带分号
singleQuote: true, // 使用单引号
jsxSingleQuote: true, // 使用单引号
jsxBracketSameLine: true, // 启用jsx语法，> 放在末尾
trailingComma: 'all',
}

20
global.d.ts vendored
View File

@ -1,15 +1,15 @@
/// <reference path="node_modules/@tarojs/plugin-platform-weapp/types/shims-weapp.d.ts" />
declare module '*.png';
declare module '*.gif';
declare module '*.jpg';
declare module '*.jpeg';
declare module '*.svg';
declare module '*.css';
declare module '*.less';
declare module '*.scss';
declare module '*.sass';
declare module '*.styl';
declare module '*.png'
declare module '*.gif'
declare module '*.jpg'
declare module '*.jpeg'
declare module '*.svg'
declare module '*.css'
declare module '*.less'
declare module '*.scss'
declare module '*.sass'
declare module '*.styl'
declare namespace NodeJS {
interface ProcessEnv {

17
src/api/onlinePay.ts
View File

@ -1,14 +1,13 @@
import { CAP_HTML_TO_IMAGE_BASE_URL } from "@/common/constant"
import { useRequest } from "@/use/useHttp"
import { CAP_HTML_TO_IMAGE_BASE_URL } from '@/common/constant'
import { useRequest } from '@/use/useHttp'
/**
* 获取在线支付二维码
*/
export const GetPayCode = () => {
return useRequest({
url: `/xima-caphtml/caphtml`,
base_url: CAP_HTML_TO_IMAGE_BASE_URL,
method: "post",
})
export const GetPayCode = () => {
return useRequest({
url: `/xima-caphtml/caphtml`,
base_url: CAP_HTML_TO_IMAGE_BASE_URL,
method: 'post',
})
}

14
src/common/constant.js
View File

@ -21,19 +21,23 @@ export const UPLOAD_CDN_URL = `https://v0.api.upyun.com/`
// cdn
// export const IMG_CND_Prefix = CURRENT_ENV.includes('development')? "https://test.cdn.zzfzyc.com":"https://cdn.zzfzyc.com"
export const IMG_CND_Prefix = CURRENT_ENV.includes('development')? "https://test.cdn.zzfzyc.com":"https://test.cdn.zzfzyc.com"
export const IMG_CND_Prefix = CURRENT_ENV.includes('development')
? 'https://test.cdn.zzfzyc.com'
: 'https://test.cdn.zzfzyc.com'
//在线支付图片baseUrl
// export const CAP_HTML_TO_IMAGE_BASE_URL = CURRENT_ENV.includes('development')? "https://test.zzfzyc.com":"https://www.zzfzyc.com"
export const CAP_HTML_TO_IMAGE_BASE_URL = CURRENT_ENV.includes('development')? "https://test.zzfzyc.com":"https://test.zzfzyc.com"
export const CAP_HTML_TO_IMAGE_BASE_URL = CURRENT_ENV.includes('development')
? 'https://test.zzfzyc.com'
: 'https://test.zzfzyc.com'
// 上传图片视频
export const CDN_UPLOAD_IMG = `${UPLOAD_CDN_URL || ''}`;
export const CDN_UPLOAD_IMG = `${UPLOAD_CDN_URL || ''}`
//appid
export const WX_APPID = 'wx68d92d7cbf0b6963'
//场景值
export const SCENE = {
SearchScene : 0 //商城面料搜索
}
SearchScene: 0, //商城面料搜索
}

139
src/common/util.ts
View File

@ -1,56 +1,60 @@
import { formatImgUrl } from "./fotmat";
import { analysisShortCodeApi } from "./shortCode";
import { formatImgUrl } from './fotmat'
import { analysisShortCodeApi } from './shortCode'
import Taro from '@tarojs/taro'
/**
* 防抖
* @param {*} fn
* @param {*} delay
* @returns
* @param {*} fn
* @param {*} delay
* @returns
*/
export const debounce = (fn, delay) => {
let timer:any = null;
let timer: any = null
return (...param) => {
if (timer) clearTimeout(timer);
if (timer) clearTimeout(timer)
timer = setTimeout(() => {
fn(...param);
}, delay);
};
fn(...param)
}, delay)
}
}
/**
* 节流
* @param {*} fn
* @param {*} delay
* @returns
* @param {*} fn
* @param {*} delay
* @returns
*/
export const throttle = (fn, delay) => {
let pre = 0;
let pre = 0
return (...params) => {
let now = new Date().getTime();
let now = new Date().getTime()
if (now - pre > delay) {
fn(...params);
pre = now;
fn(...params)
pre = now
}
};
}
}
/**
* 批量过滤对象值为空的属性
* @param {Object} val 需要过滤的对象
* @param {Array} arr 排除过滤的属性
* @returns
* @returns
*/
export const getFilterData = (val = {}, arr: string[] = []) => {
export const getFilterData = (val = {}, arr: string[] = []) => {
let res = {}
for(let key in val) {
if(val[key]!==undefined&&val[key]!==null&&val[key]!==''&&(!arr.includes(key))){
if(typeof val[key] == 'number'){
if(!isNaN(val[key])) {
for (let key in val) {
if (
val[key] !== undefined &&
val[key] !== null &&
val[key] !== '' &&
!arr.includes(key)
) {
if (typeof val[key] == 'number') {
if (!isNaN(val[key])) {
res[key] = val[key]
}
} else{
} else {
res[key] = val[key]
}
}
@ -59,23 +63,23 @@ export const throttle = (fn, delay) => {
}
/**
* 对象深拷贝
* @param {*} object
* @returns
* @param {*} object
* @returns
*/
export const copyObject = (object)=>{
if(object.constructor==Object){
let keys = Object.keys(object);
let newObject = {};
keys.map(key=>{
newObject[key]= copyObject(object[key]);
})
return newObject;
}else if(object.constructor==Array){
return object.map(item=>{
return copyObject(item);
})
}else{
return object;
export const copyObject = (object) => {
if (object.constructor == Object) {
let keys = Object.keys(object)
let newObject = {}
keys.map((key) => {
newObject[key] = copyObject(object[key])
})
return newObject
} else if (object.constructor == Array) {
return object.map((item) => {
return copyObject(item)
})
} else {
return object
}
}
@ -91,13 +95,21 @@ export const throttle = (fn, delay) => {
!wh400
!w600
*/
export const screenshot = (url, suffix="!w200")=>{
return url+suffix;
}
export const screenshot = (url, suffix = '!w200') => {
return url + suffix
}
//获取数据加载状态 //0:数据从无到有加载数据，1，没有任何数据， 2：下拉加载，3：下拉没有数据
export const dataLoadingStatus = ({list = [], total = 0, status = false}:{list:any[], total:number, status:true|false}) => {
if(list.length == 0 && status) {
//获取数据加载状态 //0:数据从无到有加载数据，1，没有任何数据， 2：下拉加载，3：下拉没有数据
export const dataLoadingStatus = ({
list = [],
total = 0,
status = false,
}: {
list: any[]
total: number
status: true | false
}) => {
if (list.length == 0 && status) {
return 0
} else if (list.length == 0 && !status) {
return 1
@ -106,30 +118,39 @@ export const throttle = (fn, delay) => {
} else {
return 3
}
}
}
//全局分享监听
export const shareShop = () => {
//全局分享监听
export const shareShop = () => {
const page = Taro.getCurrentInstance().page
//当有分享参数时，绑定上下级
if(page && page.options?.share) {
if (page && page.options?.share) {
analysisShortCodeApi(page.options.share)
}
if(page && page.onShareAppMessage) {
if (page && page.onShareAppMessage) {
page.onShareAppMessage = (res) => {
let path = ''
let title = ''
let imageUrl = ''
let sortCode = Taro.getStorageSync('sort_code')?JSON.parse(Taro.getStorageSync('sort_code')):''
let pageInfo:any = page
if(res.from === 'button') {
let sortCode = Taro.getStorageSync('sort_code')
? JSON.parse(Taro.getStorageSync('sort_code'))
: ''
let pageInfo: any = page
//商品详情分享
if (pageInfo.route === 'pages/details/index') {
path = `/pages/details/index?share=${sortCode.shareShortDetail.code}`
title = sortCode.shareShortDetail.title
imageUrl = sortCode.shareShortDetail.img
} else {
path = (pageInfo.route === 'pages/user/index')?`/pages/user/index?share=${sortCode.shareShortPage.code}`:`/pages/index/index?share=${sortCode.shareShortPage.code}`
path =
pageInfo.route === 'pages/user/index'
? `/pages/user/index?share=${sortCode.shareShortPage.code}`
: `/pages/index/index?share=${sortCode.shareShortPage.code}`
title = sortCode.shareShortPage.title
imageUrl = (pageInfo.route === 'pages/user/index')?formatImgUrl('/mall/share_img_02.png') : sortCode.shareShortPage.img
imageUrl =
pageInfo.route === 'pages/user/index'
? sortCode.shareShortPage.img
: formatImgUrl('/mall/share_img_02.png')
}
return {
title,
@ -138,4 +159,4 @@ export const throttle = (fn, delay) => {
}
}
}
}
}

138
src/components/InfiniteScrollPaging/index.tsx
View File

@ -1,72 +1,71 @@
import InfiniteScroll from '@/components/infiniteScroll'
import { ReactNode, useEffect, useMemo, useRef, useState } from 'react'
import { dataLoadingStatus, getFilterData } from '@/common/util'
import { alert, isEmptyObject } from '@/common/common'
import InfiniteScroll from "@/components/infiniteScroll"
import { ReactNode, useEffect, useMemo, useRef, useState } from "react"
import { dataLoadingStatus, getFilterData } from "@/common/util";
import { alert, isEmptyObject } from "@/common/common";
interface Params{
children?: ReactNode,
query?: object,
fetchData: (data: object)=>any,
change?: (data: any)=>void
interface Params {
children?: ReactNode
query?: object
fetchData: (data: object) => any
change?: (data: any) => void
}
export default (props: Params)=>{
const { query={} } = props;
useEffect(()=>{
refreshDataRef.current = refreshData;
dataRef.current = data;
getData({moreStatus: true},{moreStatus: true});
export default (props: Params) => {
const { query = {} } = props
useEffect(() => {
refreshDataRef.current = refreshData
dataRef.current = data
getData({ moreStatus: true }, { moreStatus: true })
}, [])
useEffect(()=>{
if(!isEmptyObject(query)){
setData({list: [],total: 0});
getData({moreStatus: true},{moreStatus: true});
}
},[query])
const getData = async (startStatus, endStatus)=>{
const tRefreshDataRef = refreshDataRef.current as any;
useEffect(() => {
if (!isEmptyObject(query)) {
setData({ list: [], total: 0 })
getData({ moreStatus: true }, { moreStatus: true })
}
}, [query])
const getData = async (startStatus, endStatus) => {
const tRefreshDataRef = refreshDataRef.current as any
setRefreshData({
...tRefreshDataRef,
...startStatus,
loading: true
loading: true,
})
const result = await props.fetchData({
...query,
...query,
page: tRefreshDataRef.page,
size: tRefreshDataRef.size,
});
if(result.success){
})
if (result.success) {
// 返回数据
props.change&&props.change(result);
if(result.data.total<=0){
props.change && props.change(result)
if (result.data.total <= 0) {
setRefreshData({
...tRefreshDataRef,
...endStatus,
loading: false
loading: false,
})
}else{
} else {
setData({
list: result.data.list,
// list: tRefreshDataRef.page>1?(dataRef.current as any).list.concat(result.data.list):result.data.list,
total: result.data.total
total: result.data.total,
})
setRefreshData({
...tRefreshDataRef,
refreshStatus: false,
moreStatus: false,
loading: false
loading: false,
})
}
}else{
alert.none(result.msg);
setRefreshData({
...tRefreshDataRef,
refreshStatus: false,
moreStatus: true,
loading: false
})
}
} else {
alert.none(result.msg)
setRefreshData({
...tRefreshDataRef,
refreshStatus: false,
moreStatus: true,
loading: false,
})
}
}
// 加载刷新数据
const [refreshData, setRefreshData] = useState({
@ -74,52 +73,59 @@ export default (props: Params)=>{
moreStatus: false,
page: 1,
size: 10,
loading: false
loading: false,
})
const refreshDataRef = useRef({});
const refreshDataRef = useRef({})
// 渲染（数据）
const [data, setData] = useState({
list: [],
total: 0
});
const dataRef = useRef({});
total: 0,
})
const dataRef = useRef({})
// 下拉刷新
const handleRefresh = async ()=>{
let tRefreshData = refreshDataRef.current as any;
const handleRefresh = async () => {
let tRefreshData = refreshDataRef.current as any
setRefreshData({
...tRefreshData,
page: 1,
size: 10,
})
getData({refreshStatus: true,moreStatus: false},{refreshStatus: false,moreStatus: true});
getData({ refreshStatus: true, moreStatus: false }, { refreshStatus: false, moreStatus: true })
}
// 加载更多
const handleMoreLoad = async ()=>{
let t = (dataRef.current as any);
let tRefreshData = refreshDataRef.current as any;
if(t.list.length<t.total){
const handleMoreLoad = async () => {
let t = dataRef.current as any
let tRefreshData = refreshDataRef.current as any
if (t.list.length < t.total) {
setRefreshData({
...tRefreshData,
page: ++tRefreshData.page,
size: ++tRefreshData.page*tRefreshData.size,
size: ++tRefreshData.page * tRefreshData.size,
})
getData({
moreStatus: true
},{
moreStatus: true
});
getData(
{
moreStatus: true,
},
{
moreStatus: true,
},
)
}
}
//数据加载状态
const statusMore = useMemo(() => {
return dataLoadingStatus({list:data.list, total: data.total, status: refreshData.loading})
return dataLoadingStatus({ list: data.list, total: data.total, status: refreshData.loading })
}, [refreshData.loading])
return (
<InfiniteScroll refresherEnabled={true} refresherTriggered={refreshData.refreshStatus} moreStatus={refreshData.moreStatus}
selfOnRefresherRefresh={handleRefresh} selfonScrollToLower={handleMoreLoad} statusMore={statusMore}>
{props.children}
<InfiniteScroll
refresherEnabled={true}
refresherTriggered={refreshData.refreshStatus}
moreStatus={refreshData.moreStatus}
selfOnRefresherRefresh={handleRefresh}
selfonScrollToLower={handleMoreLoad}
statusMore={statusMore}>
{props.children}
</InfiniteScroll>
)
}

121
src/pages/collection/collectionClass/index.tsx
View File

@ -1,53 +1,50 @@
import { DelFavoriteProductApi, DetailFavoriteProductApi, MoveFavoriteProductApi } from "@/api/favorite";
import { alert } from "@/common/common";
import { getFilterData } from "@/common/util";
import Product from "../components/product";
import Search from "@/components/search"
import { Text, View } from "@tarojs/components"
import Taro, { useRouter } from "@tarojs/taro";
import classnames from "classnames";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import styles from './index.module.scss'
import MCheckbox from "@/components/checkbox";
import AddCollection from "@/components/addCollection";
import { DelFavoriteProductApi, DetailFavoriteProductApi, MoveFavoriteProductApi } from '@/api/favorite'
import { alert } from '@/common/common'
import { getFilterData } from '@/common/util'
import Product from '../components/product'
import Search from '@/components/search'
import { Text, View } from '@tarojs/components'
import Taro, { useRouter } from '@tarojs/taro'
import classnames from 'classnames'
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import styles from './index.module.scss'
import MCheckbox from '@/components/checkbox'
import AddCollection from '@/components/addCollection'
export default () => {
const router = useRouter()
//获取收藏夹面料
const {fetchData: fetchDataDetailFavoriteProduct} = DetailFavoriteProductApi()
const { fetchData: fetchDataDetailFavoriteProduct } = DetailFavoriteProductApi()
const [colorInfo, setColorInfo] = useState<any>({})
const getFavoriteInfo = async () => {
let res = await fetchDataDetailFavoriteProduct(searchData)
if(res.success) {
Taro.setNavigationBarTitle({
title: res.data.name
})
setColorInfo(res.data)
}
let res = await fetchDataDetailFavoriteProduct(searchData)
if (res.success) {
Taro.setNavigationBarTitle({
title: res.data.name,
})
setColorInfo(res.data)
}
}
//获取搜索数据
const [searchData, setSearchData] = useState({id:0, code_or_name: ''})
const [searchData, setSearchData] = useState({ id: 0, code_or_name: '' })
const onSearch = useCallback((e) => {
setSearchData((val) => ({...val, code_or_name: e}))
setSearchData((val) => ({ ...val, code_or_name: e }))
}, [])
useEffect(() => {
let id = router.params.id || 0
if(id) setSearchData((e) => ({...e, id: parseInt(id as string)}))
if (id) setSearchData((e) => ({ ...e, id: parseInt(id as string) }))
}, [])
useEffect(() => {
if(searchData.id) getFavoriteInfo()
if (searchData.id) getFavoriteInfo()
}, [searchData])
const productList = useMemo(() => {
return colorInfo.product_color_list
}, [colorInfo])
//获取选中的id
const [ids, setIds] = useState<number[]>([])
const getSelectIds = useCallback((val) => {
@ -65,13 +62,13 @@ export default () => {
setSelectStatus(3)
}, [])
const [selectStatus, setSelectStatus] = useState<1|2|3>(3)
const [selectStatus, setSelectStatus] = useState<1 | 2 | 3>(3)
useEffect(() => {
if(colorInfo.product_color_list?.length) {
if(ids.length == colorInfo.product_color_list.length) {
if (colorInfo.product_color_list?.length) {
if (ids.length == colorInfo.product_color_list.length) {
setSelectStatus(1)
setAllSelectStatus(true)
} else if ( 0 < ids.length && ids.length < colorInfo.product_color_list.length){
} else if (0 < ids.length && ids.length < colorInfo.product_color_list.length) {
setSelectStatus(2)
setAllSelectStatus(false)
} else {
@ -79,8 +76,7 @@ export default () => {
setAllSelectStatus(false)
}
}
}, [ids, colorInfo])
}, [ids, colorInfo])
const [collectionShow, setCollectionShow] = useState(false)
const closeCollection = useCallback(() => {
@ -88,11 +84,15 @@ export default () => {
}, [])
//移动面料
const {fetchData: fetchDataMoveFavoriteProduct} = MoveFavoriteProductApi()
const { fetchData: fetchDataMoveFavoriteProduct } = MoveFavoriteProductApi()
const onAdd = async (val) => {
if(ids.length == 0) return alert.none('请选择要移动面料')
let res = await fetchDataMoveFavoriteProduct({source_favorite_id: searchData.id ,target_favorite_id: val.id, product_id:ids})
if(res.success) {
if (ids.length == 0) return alert.none('请选择要移动面料')
let res = await fetchDataMoveFavoriteProduct({
source_favorite_id: searchData.id,
target_favorite_id: val.id,
product_id: ids,
})
if (res.success) {
getFavoriteInfo()
setCollectionShow(false)
alert.success('修改成功')
@ -100,43 +100,46 @@ export default () => {
}
//取消收藏
const {fetchData: delFavoriteProductFetchData} = DelFavoriteProductApi()
const { fetchData: delFavoriteProductFetchData } = DelFavoriteProductApi()
const delCollectioin = async () => {
if(ids.length == 0) return alert.none('请选择要取消面料')
if (ids.length == 0) return alert.none('请选择要取消面料')
let showModalRes = await Taro.showModal({
title: '是否要取消收藏',
confirmText: '是',
cancelText: '否',
title: '是否要取消收藏',
confirmText: '是',
cancelText: '否',
})
if(showModalRes.confirm) {
let res = await delFavoriteProductFetchData({favorite_id: searchData.id, product_id:ids})
if(res.success) {
if (showModalRes.confirm) {
let res = await delFavoriteProductFetchData({ favorite_id: searchData.id, product_id: ids })
if (res.success) {
getFavoriteInfo()
alert.none('已取消收藏')
}
}
}
return (
<View className={styles.collection_main}>
<View className={styles.search}>
<Search style={{width: '100%'}} debounceTime={300} changeOnSearch={onSearch} placeholder="请输入面料关键词" />
<Search style={{ width: '100%' }} debounceTime={300} changeOnSearch={onSearch} placeholder='请输入面料关键词' />
</View>
<View className={styles.operation}>
<View className={styles.operation_check}>
<MCheckbox status={allSelectStatus} onSelect={() => selectCallBack()} onClose={() => colseCallBack()}/>
<Text className={styles.allSelect}>全选</Text>
</View>
<View className={styles.operation_check_right}>
<Text className={styles.operation_check_move} onClick={() => setCollectionShow(true)}>移动到</Text>
<Text className={styles.operation_check_cancel} onClick={delCollectioin}>取消收藏</Text>
</View>
<View className={styles.operation_check}>
<MCheckbox status={allSelectStatus} onSelect={() => selectCallBack()} onClose={() => colseCallBack()} />
<Text className={styles.allSelect}>全选</Text>
</View>
<View className={styles.operation_check_right}>
<Text className={styles.operation_check_move} onClick={() => setCollectionShow(true)}>
移动到
</Text>
<Text className={styles.operation_check_cancel} onClick={delCollectioin}>
取消收藏
</Text>
</View>
<View className={styles.class_list}>
<Product productList={productList} onSelectIds={getSelectIds} selectStatus={selectStatus} openCheckBox={true}/>
</View>
<AddCollection show={collectionShow} onAdd={onAdd} onClose={closeCollection}/>
<View className={styles.class_list}>
<Product productList={productList} onSelectIds={getSelectIds} selectStatus={selectStatus} openCheckBox={true} />
</View>
<AddCollection show={collectionShow} onAdd={onAdd} onClose={closeCollection} />
</View>
)
}
}

67
src/pages/depositList/index.tsx
View File

@ -1,57 +1,58 @@
import AddressList from '@/components/AddressList'
import InfiniteScrollPaging from '@/components/InfiniteScrollPaging'
import { Button, Canvas, ScrollView, Text, View } from '@tarojs/components'
import Taro, { useReady } from '@tarojs/taro'
import { useCallback, useEffect, useState } from 'react'
import { depositListApi } from '@/api/deposit'
import './index.scss'
import { formatDateTime, formatPriceDiv } from '@/common/fotmat'
import useLogin from '@/use/useLogin'
import AddressList from "@/components/AddressList"
import InfiniteScrollPaging from "@/components/InfiniteScrollPaging"
import { Button, Canvas, ScrollView, Text, View } from "@tarojs/components"
import Taro, { useReady } from "@tarojs/taro"
import { useCallback, useEffect, useState } from "react"
import { depositListApi } from "@/api/deposit"
import "./index.scss"
import { formatDateTime, formatPriceDiv } from "@/common/fotmat"
import useLogin from "@/use/useLogin"
export default ()=>{
export default () => {
useLogin()
const {fetchData, state} = depositListApi();
const { fetchData, state } = depositListApi()
// 渲染（数据）
const [data, setData] = useState({
list: [],
total: 0
});
total: 0,
})
// 数据更新
const handleChange = useCallback((result)=>{
const handleChange = useCallback((result) => {
setData({
list: result.data.list,
total: result.data.total
total: result.data.total,
})
}, [])
return (
<View className="credit-used">
<View className='credit-used'>
<InfiniteScrollPaging fetchData={fetchData} change={handleChange}>
{
data.list?.map((item,index)=>{
return (
<View key={index} className="credit-used-list">
<View className="credit-used-list-left">
<View className="credit-used-list-type">{(item as any).type_name}</View>
<View className="credit-used-list-date">{formatDateTime((item as any).create_time)}</View>
{data.list?.map((item, index) => {
let res: any = item
return (
res.amount_received_this_time != 0 && (
<View key={index} className='credit-used-list'>
<View className='credit-used-list-left'>
<View className='credit-used-list-type'>{res.type_name}</View>
<View className='credit-used-list-date'>{formatDateTime(res.create_time)}</View>
</View>
<View className="credit-used-list-right">
<View className="credit-used-list-right-price">
<View className={`credit-used-list-price ${[1,2,3].includes((item as any).type as never)?'red':'green'}`}>
{[1,2,3].includes((item as any).type as never)?"+":"-"}{formatPriceDiv((item as any).amount_received_this_time)}
<View className='credit-used-list-right'>
<View className='credit-used-list-right-price'>
<View
className={`credit-used-list-price ${[1, 2, 3].includes(res.type as never) ? 'red' : 'green'}`}>
{[1, 2, 3].includes(res.type as never) ? '+' : '-'}
{formatPriceDiv(res.amount_received_this_time)}
</View>
{/* <View className="credit-used-list-orderno">处理中</View> */}
</View>
<Text className="iconfont icon-a-moreback"></Text>
<Text className='iconfont icon-a-moreback'></Text>
</View>
</View>
)
})
}
)
})}
{/* {data.length>0&&<View className="credit-used-list"></View>} */}
<View className="credit-used-list"></View>
<View className='credit-used-list'></View>
</InfiniteScrollPaging>
</View>
)

27
src/pages/index/index.tsx
View File

@ -14,7 +14,6 @@ import useLogin from '@/use/useLogin'
import { dataLoadingStatus } from '@/common/util'
export default () => {
useLogin()
useEffect(() => {
categoryList()
@ -29,7 +28,6 @@ export default () => {
setKindData({ ...kindData, list: res.data.list, defaultId: res.data.list[0].id })
setFiltrate({ ...filtrate, product_kind_id: res.data.list[0].id })
}
}
//获取面料列表
@ -46,17 +44,14 @@ export default () => {
}
//监听查询条件
useEffect(() => {
if (filtrate.product_kind_id)
getProductList()
if (filtrate.product_kind_id) getProductList()
}, [filtrate])
//点击面料类型
const getProductKindId = useCallback((e) => {
pageNum.current.page = 1
setProductData({ list: [], total: 0 })
setFiltrate((list) => ({ ...list, size: 5, product_kind_id: e.id }))
// setHasMore(true)
}, [])
//上拉加载数据
@ -70,7 +65,6 @@ export default () => {
}
}, [productData])
const [showShopCart, setShowShopCart] = useState(false)
//列表下拉刷新
@ -87,27 +81,36 @@ export default () => {
return dataLoadingStatus({ list: productData.list, total: productData.total, status: productState.loading })
}, [productData, productState.loading])
return (
<MoveBtn onClick={() => setShowShopCart(!showShopCart)}>
<View className={styles.main}>
<Banner />
<View className={styles.search}>
<View className={styles.search_collect} onClick={() => goLink('/pages/collection/index')}>我的收藏</View>
<View className={styles.search_collect} onClick={() => goLink('/pages/collection/index')}>
我的收藏
</View>
<View className={styles.search_input} onClick={() => goLink('/pages/searchList/search')}>
<Search disabled={true} style={{ width: '263rpx' }} />
</View>
</View>
<View className={styles.products}>
<SideBar list={kindData.list} height="100%" defaultValue={kindData.defaultId} hasMore={hasMore} statusMore={statusMore} selfOnScrolltolower={getScrolltolower} sideBarOnClick={getProductKindId} heightItem={150} refresherTriggered={refresherTriggeredStatus} selfOnRefresherRefresh={() => getRefresherRefresh()}>
<SideBar
list={kindData.list}
height='100%'
defaultValue={kindData.defaultId}
hasMore={hasMore}
statusMore={statusMore}
selfOnScrolltolower={getScrolltolower}
sideBarOnClick={getProductKindId}
heightItem={150}
refresherTriggered={refresherTriggeredStatus}
selfOnRefresherRefresh={() => getRefresherRefresh()}>
<Product productList={productData.list} />
</SideBar>
</View>
<View className='common_safe_area_y'></View>
<ShopCart show={showShopCart} onClose={() => setShowShopCart(false)} />
</View>
</MoveBtn>
)
}

255
src/pages/order/comfirm.module.scss
View File

@ -1,133 +1,132 @@
.order_main{
min-height: 100%;
background-color:$color_bg_one;
padding: 20px;
padding-bottom: 190px;
.order_main {
min-height: 100%;
background-color: $color_bg_one;
padding: 20px;
padding-bottom: 190px;
box-sizing: border-box;
.order_title {
display: flex;
align-items: center;
padding: 20px 30px;
box-sizing: border-box;
.order_title{
display: flex;
align-items: center;
padding: 20px 30px;
box-sizing: border-box;
background-color: #fff;
height: 116px;
border-radius: 20px;
margin-top: 20px;
text{
flex:1;
font-size: $font_size;
font-weight: 700;
}
.order_status{
background-color: #F0F0F0;
width: 148px;
height: 55px;
color: $color_font_three;
text-align: center;
line-height: 55px;
font-size: $font_size_medium;
border-radius: 30px;
&:nth-last-child(1) {
margin-left: 20px;
}
}
.order_status_selected{
color: $color_main;
border: 1px solid $color_main;
}
background-color: #fff;
height: 116px;
border-radius: 20px;
margin-top: 20px;
text {
flex: 1;
font-size: $font_size;
font-weight: 700;
}
.order_desc{
display: flex;
align-items: center;
background-color: #fff;
padding: 20px;
min-height: 116px;
border-radius: 20px;
margin-top: 20px;
box-sizing: border-box;
.order_desc_con{
width: 150px;
font-size: $font_size;
font-weight: 700;
}
.order_desc_text, .order_desc_text_hint{
font-size: $font_size_medium;
margin-right: 10px;
flex:1;
}
.order_desc_text_hint{
text-align: right;
color: $color_font_two;
}
.miconfont{
font-size: 20px;
color: $color_font_two;
}
.order_status {
background-color: #f0f0f0;
width: 148px;
height: 55px;
color: $color_font_three;
text-align: center;
line-height: 55px;
font-size: $font_size_medium;
border-radius: 30px;
&:nth-last-child(1) {
margin-left: 20px;
}
}
.submit_order{
display: flex;
position: fixed;
bottom: 0;
left: 0;
justify-content: space-between;
width: 100%;
height: 175px;
align-items: center;
background-color: #fff;
box-shadow: 6px 0px 12px 0px rgba(0,0,0,0.16);
padding: 20px 50px;
box-sizing: border-box;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
.submit_order_number{
padding: 20px 0;
}
.order_btn {
width: 250px;
height: 90px;
opacity: 0.6;
background: linear-gradient(38deg,#007aff, #4fa6ff 100%, #68b4ff 100%);
border-radius: 46px;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
}
.ok_order_btn {
opacity: 1;
}
.order_number_desc{
font-size: $font_size_medium;
color: $color_font_two;
}
.order_status_selected {
color: $color_main;
border: 1px solid $color_main;
}
.order_info{
background-color: #fff;
margin-top: 20px;
border-radius: 20px;
padding: 20px;
.order_info_title{
font-size: $font_size;
font-weight: 700;
margin-bottom: 20px;
}
.order_num{
display: flex;
justify-content: space-between;
align-items: center;
.order_num_btn{
font-size: $font_size_medium;
padding: 5px 10px;
border: 2px solid #007cf7;
border-radius: 10px;
color: $color_main;
}
}
text{
font-size: $font_size;
}
}
.order_desc {
display: flex;
align-items: center;
background-color: #fff;
padding: 20px;
min-height: 116px;
border-radius: 20px;
margin-top: 20px;
box-sizing: border-box;
.order_desc_con {
width: 150px;
font-size: $font_size;
font-weight: 700;
}
}
.order_desc_text,
.order_desc_text_hint {
font-size: $font_size_medium;
margin-right: 10px;
flex: 1;
}
.order_desc_text_hint {
text-align: right;
color: $color_font_two;
}
.miconfont {
font-size: 20px;
color: $color_font_two;
}
}
.submit_order {
display: flex;
position: fixed;
bottom: 0;
left: 0;
justify-content: space-between;
width: 100%;
height: 175px;
align-items: center;
background-color: #fff;
box-shadow: 6px 0px 12px 0px rgba(0, 0, 0, 0.16);
padding: 20px 50px;
box-sizing: border-box;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
.submit_order_number {
padding: 20px 0;
}
.order_btn {
width: 250px;
height: 90px;
opacity: 0.6;
background: linear-gradient(38deg, #007aff, #4fa6ff 100%, #68b4ff 100%);
border-radius: 46px;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
}
.ok_order_btn {
opacity: 1;
}
.order_number_desc {
font-size: $font_size_medium;
color: $color_font_two;
}
}
.order_info {
background-color: #fff;
margin-top: 20px;
border-radius: 20px;
padding: 20px;
.order_info_title {
font-size: $font_size;
font-weight: 700;
margin-bottom: 20px;
}
.order_num {
display: flex;
justify-content: space-between;
align-items: center;
.order_num_btn {
font-size: $font_size_medium;
padding: 5px 10px;
border: 2px solid #007cf7;
border-radius: 10px;
color: $color_main;
}
}
text {
font-size: $font_size;
}
}
}

389
src/pages/order/comfirm.tsx
View File

@ -1,200 +1,209 @@
import { SaleOrderPreViewApi, SaleOrderApi } from "@/api/order";
import { formatPriceDiv } from "@/common/fotmat";
import Popup from "@/components/popup";
import { View } from "@tarojs/components"
import Taro, { useDidShow, usePullDownRefresh} from "@tarojs/taro";
import classnames from "classnames";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import KindList from "./components/kindList";
import Remark from "./components/remark";
import styles from './comfirm.module.scss'
import { getParam } from "@/common/system";
import { alert, goLink } from "@/common/common";
import SubmitOrderBtn from "./components/submitOrderBtn";
import AddressInfoDetail from "./components/addressInfoDetail";
import { SubscriptionMessageApi } from "@/api/user";
import { SUBSCRIPTION_MESSAGE_SCENE } from "@/common/enum";
import { UseSubscriptionMessage } from "@/use/useCommon";
import { throttle } from "@/common/util";
export default () => {
const [showDesc, setShowDesc] = useState(false)
//下单信息
type OrderParams = {address_id?: number, remark?: string, sale_mode?: number, shipment_mode?: number, list?: any[]}
const [submitOrderData, setSubmitOrderData] = useState<OrderParams>()
import { SaleOrderPreViewApi, SaleOrderApi } from '@/api/order'
import { formatPriceDiv } from '@/common/fotmat'
import Popup from '@/components/popup'
import { View } from '@tarojs/components'
import Taro, { useDidShow, usePullDownRefresh } from '@tarojs/taro'
import classnames from 'classnames'
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import KindList from './components/kindList'
import Remark from './components/remark'
import styles from './comfirm.module.scss'
import { getParam } from '@/common/system'
import { alert, goLink } from '@/common/common'
import SubmitOrderBtn from './components/submitOrderBtn'
import AddressInfoDetail from './components/addressInfoDetail'
import { SubscriptionMessageApi } from '@/api/user'
import { SUBSCRIPTION_MESSAGE_SCENE } from '@/common/enum'
import { UseSubscriptionMessage } from '@/use/useCommon'
import { throttle } from '@/common/util'
//获取购物车传过来的id
type orderPreParam = {shopping_cart_product_color_list:{shopping_cart_product_color_id:number}[], sale_mode:number}
const param = getParam()
const idsAndSaleModel = useRef<orderPreParam>({shopping_cart_product_color_list:[], sale_mode:0})
useDidShow(async () => {
idsAndSaleModel.current = {shopping_cart_product_color_list:[], sale_mode:0} //初始化
idsAndSaleModel.current.sale_mode = Number(param?.sale_mode)
param?.ids?.split('-')?.map(item => {
return idsAndSaleModel.current.shopping_cart_product_color_list?.push({
shopping_cart_product_color_id: Number(item)
})
})
getSaleOrderPreView()
setSubmitOrderData((val) => ({...val, sale_mode:param?.sale_mode}))
export default () => {
const [showDesc, setShowDesc] = useState(false)
//下单信息
type OrderParams = { address_id?: number; remark?: string; sale_mode?: number; shipment_mode?: number; list?: any[] }
const [submitOrderData, setSubmitOrderData] = useState<OrderParams>()
//获取购物车传过来的id
type orderPreParam = {
shopping_cart_product_color_list: { shopping_cart_product_color_id: number }[]
sale_mode: number
}
const param = getParam()
const idsAndSaleModel = useRef<orderPreParam>({ shopping_cart_product_color_list: [], sale_mode: 0 })
useDidShow(async () => {
idsAndSaleModel.current = { shopping_cart_product_color_list: [], sale_mode: 0 } //初始化
idsAndSaleModel.current.sale_mode = Number(param?.sale_mode)
param?.ids?.split('-')?.map((item) => {
return idsAndSaleModel.current.shopping_cart_product_color_list?.push({
shopping_cart_product_color_id: Number(item),
})
})
getSaleOrderPreView()
setSubmitOrderData((val) => ({ ...val, sale_mode: param?.sale_mode }))
})
//获取销售预览订单
const [preViewOrder, setPreViewOrder] = useState<any>() //获取到的原始数据
const {fetchData} = SaleOrderPreViewApi()
const getSaleOrderPreView = async () => {
if(idsAndSaleModel.current.shopping_cart_product_color_list?.length > 0) {
let res = await fetchData(idsAndSaleModel.current)
setPreViewOrder(res.data)
}
//获取销售预览订单
const [preViewOrder, setPreViewOrder] = useState<any>() //获取到的原始数据
const { fetchData } = SaleOrderPreViewApi()
const getSaleOrderPreView = async () => {
if (idsAndSaleModel.current.shopping_cart_product_color_list?.length > 0) {
let res = await fetchData(idsAndSaleModel.current)
setPreViewOrder(res.data)
}
}
//监听获取到的数据
useEffect(() => {
if(preViewOrder) {
formatData()
getDataList()
setSubmitOrderData((val) => ({...val, address_id:preViewOrder.default_address.id, shipment_mode:preViewOrder.shipment_mode||2}))
}
}, [preViewOrder])
//格式化数据格式
const [formatPreViewOrder, setFormatPreViewOrder] = useState<any>() //格式化后的数据
const formatData = () => {
setFormatPreViewOrder({
estimate_amount: preViewOrder.estimate_amount, //预估金额
sale_mode: preViewOrder.sale_mode,
sale_mode_name: preViewOrder.sale_mode_name,
total_colors: preViewOrder.total_colors, //总颜色数量
total_number: preViewOrder.total_number, //总数量
total_fabrics: preViewOrder.total_fabrics, //面料数量
unit: preViewOrder.sale_mode == 0?'条':'m', //单位
list: preViewOrder.product_list,
total_should_collect_money: preViewOrder.total_should_collect_money, //应收金额
total_sale_price: preViewOrder.total_sale_price //合计金额
})
//监听获取到的数据
useEffect(() => {
if (preViewOrder) {
formatData()
getDataList()
setSubmitOrderData((val) => ({
...val,
address_id: preViewOrder.default_address.id,
shipment_mode: preViewOrder.shipment_mode || 2,
}))
}
const formatPreViewOrderMemo = useMemo(() => {
return formatPreViewOrder
}, [formatPreViewOrder])
}, [preViewOrder])
//格式化初始地址
const defaultAddress = useMemo(() => {
const address = preViewOrder?.default_address
return {
province_name: address?.province_name,
city_name: address?.city_name,
district_name: address?.district_name,
address_detail: address?.address_detail,
id: address?.id,
target_user_name: address?.name,
target_user_phone: address?.phone,
shipment_mode: address?.shipment_mode,
take_goods_address: preViewOrder?.take_goods_address,
take_goods_phone: preViewOrder?.take_goods_phone,
}
}, [preViewOrder])
//获取提交格式数据列表
const getDataList = () => {
let list:{shopping_cart_product_color_id:number}[] = []
preViewOrder.product_list?.map(item => {
item.product_colors?.map(colorItem => {
list.push({shopping_cart_product_color_id:colorItem.id})
})
})
setSubmitOrderData((val) => ({...val, list}))
}
//获取地址
const getAddress = (e) => {
setSubmitOrderData((val) => ({...val, address_id:e.id}))
}
const selectShipmentMode = useCallback((value) => {
setSubmitOrderData((val) => ({...val, shipment_mode:value}))
}, [])
//获取备注
const getRemark = useCallback((e) => {
setSubmitOrderData((val) => ({...val, remark:e}))
setShowDesc(() => false)
}, [])
//提交按钮是否可用
const btnStatus = useMemo(() => {
return submitOrderData?.shipment_mode == 1 || (submitOrderData?.shipment_mode == 2 && submitOrderData?.address_id)
}, [submitOrderData])
//数量格式
const numText = useMemo(() => {
if(formatPreViewOrder) {
let total_number = formatPreViewOrder?.sale_mode == 0?formatPreViewOrder?.total_number:(formatPreViewOrder?.total_number/100)
return `${formatPreViewOrder?.total_fabrics} 种面料，${formatPreViewOrder?.total_colors} 种颜色，共 ${total_number} ${formatPreViewOrder?.unit}`
}
}, [formatPreViewOrder])
//订阅消息
const {SubmitOrder} = SUBSCRIPTION_MESSAGE_SCENE
const {openSubscriptionMessage} = UseSubscriptionMessage()
//提交订单
const {fetchData: saleOrderFetchData} = SaleOrderApi()
const submitOrderEven = throttle(async () => {
if(!submitOrderData?.shipment_mode) {
alert.error('请选择收货方式')
return false
}
if(!submitOrderData?.address_id&&submitOrderData?.shipment_mode == 2) {
alert.error('请选择地址')
return false
}
let showModalRes = await Taro.showModal({
title: '确定提交订单?',
content: `发货方式为${submitOrderData?.shipment_mode == 1?'自提':'物流'}`,
confirmText: '确定',
cancelText: '取消',
})
if(showModalRes.confirm) {
await openSubscriptionMessage({scenes: SubmitOrder.value})
const res = await saleOrderFetchData(submitOrderData)
if(res.success) {
goLink('/pages/order/index',{id: res.data.id}, 'redirectTo')
} else {
alert.none(res.msg)
}
}
}, 800)
//页面下拉刷新
usePullDownRefresh(() => {
getSaleOrderPreView()
//格式化数据格式
const [formatPreViewOrder, setFormatPreViewOrder] = useState<any>() //格式化后的数据
const formatData = () => {
setFormatPreViewOrder({
estimate_amount: preViewOrder.estimate_amount, //预估金额
sale_mode: preViewOrder.sale_mode,
sale_mode_name: preViewOrder.sale_mode_name,
total_colors: preViewOrder.total_colors, //总颜色数量
total_number: preViewOrder.total_number, //总数量
total_fabrics: preViewOrder.total_fabrics, //面料数量
unit: preViewOrder.sale_mode == 0 ? '条' : 'm', //单位
list: preViewOrder.product_list,
total_should_collect_money: preViewOrder.total_should_collect_money, //应收金额
total_sale_price: preViewOrder.total_sale_price, //合计金额
})
}
const formatPreViewOrderMemo = useMemo(() => {
return formatPreViewOrder
}, [formatPreViewOrder])
return (
<View className={styles.order_main}>
<AddressInfoDetail orderInfo={defaultAddress} onSelect={getAddress} onChangeShipmentMode={selectShipmentMode} status={1}/>
<KindList order={formatPreViewOrderMemo} comfirm={true}/>
<View className={styles.order_desc} onClick={() => setShowDesc(true)}>
<View className={styles.order_desc_con}>订单备注</View>
{
submitOrderData?.remark&&<View className={styles.order_desc_text}>{submitOrderData?.remark}</View>||
<View className={styles.order_desc_text_hint}>填写备注</View>
}
<View className={classnames(styles.miconfont, 'iconfont icon-a-moreback')}></View>
</View>
<View className={styles.submit_order}>
<View className={styles.submit_order_number}>
<SubmitOrderBtn style={{color:'#007AFF'}} number={(preViewOrder?.sale_mode == 1?formatPreViewOrder?.total_should_collect_money:formatPreViewOrder?.estimate_amount)/100} priceTitle={preViewOrder?.sale_mode == 1?'合计金额':'预估金额'}/>
<View className={styles.order_number_desc}>{numText}</View>
</View>
<View className={classnames(styles.order_btn, btnStatus&&styles.ok_order_btn)} onClick={() => submitOrderEven()}>提交订单</View>
</View>
<Popup show={showDesc} showTitle={false} onClose={() => setShowDesc(false)} >
<Remark defaultValue={submitOrderData?.remark} onSave={(e) => getRemark(e)}/>
</Popup>
<View className="common_safe_area_y"></View>
//格式化初始地址
const defaultAddress = useMemo(() => {
const address = preViewOrder?.default_address
return {
province_name: address?.province_name,
city_name: address?.city_name,
district_name: address?.district_name,
address_detail: address?.address_detail,
id: address?.id,
target_user_name: address?.name,
target_user_phone: address?.phone,
shipment_mode: address?.shipment_mode,
take_goods_address: preViewOrder?.take_goods_address,
take_goods_phone: preViewOrder?.take_goods_phone,
}
}, [preViewOrder])
//获取提交格式数据列表
const getDataList = () => {
let list: { shopping_cart_product_color_id: number }[] = []
preViewOrder.product_list?.map((item) => {
item.product_colors?.map((colorItem) => {
list.push({ shopping_cart_product_color_id: colorItem.id })
})
})
setSubmitOrderData((val) => ({ ...val, list }))
}
//获取地址
const getAddress = (e) => {
setSubmitOrderData((val) => ({ ...val, address_id: e.id }))
}
const selectShipmentMode = useCallback((value) => {
setSubmitOrderData((val) => ({ ...val, shipment_mode: value }))
}, [])
//获取备注
const getRemark = useCallback((e) => {
setSubmitOrderData((val) => ({ ...val, remark: e }))
setShowDesc(() => false)
}, [])
//提交按钮是否可用
const btnStatus = useMemo(() => {
return submitOrderData?.shipment_mode == 1 || (submitOrderData?.shipment_mode == 2 && submitOrderData?.address_id)
}, [submitOrderData])
//数量格式
const numText = useMemo(() => {
if (formatPreViewOrder) {
let total_number = formatPreViewOrder?.sale_mode == 0 ? formatPreViewOrder?.total_number : formatPreViewOrder?.total_number / 100
return `${formatPreViewOrder?.total_fabrics} 种面料，${formatPreViewOrder?.total_colors} 种颜色，共 ${total_number} ${formatPreViewOrder?.unit}`
}
}, [formatPreViewOrder])
//订阅消息
const { SubmitOrder } = SUBSCRIPTION_MESSAGE_SCENE
const { openSubscriptionMessage } = UseSubscriptionMessage()
//提交订单
const { fetchData: saleOrderFetchData } = SaleOrderApi()
const submitOrderEven = throttle(async () => {
if (!submitOrderData?.shipment_mode) {
alert.error('请选择收货方式')
return false
}
if (!submitOrderData?.address_id && submitOrderData?.shipment_mode == 2) {
alert.error('请选择地址')
return false
}
let showModalRes = await Taro.showModal({
title: '确定提交订单?',
content: `发货方式为${submitOrderData?.shipment_mode == 1 ? '自提' : '物流'}`,
confirmText: '确定',
cancelText: '取消',
})
if (showModalRes.confirm) {
await openSubscriptionMessage({ scenes: SubmitOrder.value })
const res = await saleOrderFetchData(submitOrderData)
if (res.success) {
goLink('/pages/order/index', { id: res.data.id }, 'redirectTo')
} else {
alert.none(res.msg)
}
}
}, 800)
//页面下拉刷新
usePullDownRefresh(() => {
getSaleOrderPreView()
})
return (
<View className={styles.order_main}>
<AddressInfoDetail orderInfo={defaultAddress} onSelect={getAddress} onChangeShipmentMode={selectShipmentMode} status={1} />
<KindList order={formatPreViewOrderMemo} comfirm={true} />
<View className={styles.order_desc} onClick={() => setShowDesc(true)}>
<View className={styles.order_desc_con}>订单备注</View>
{(submitOrderData?.remark && <View className={styles.order_desc_text}>{submitOrderData?.remark}</View>) || <View className={styles.order_desc_text_hint}>填写备注</View>}
<View className={classnames(styles.miconfont, 'iconfont icon-a-moreback')}></View>
</View>
<View className={styles.submit_order}>
<View className={styles.submit_order_number}>
<SubmitOrderBtn
style={{ color: '#007AFF' }}
number={(preViewOrder?.sale_mode == 1 ? formatPreViewOrder?.total_should_collect_money : formatPreViewOrder?.estimate_amount) / 100}
priceTitle={preViewOrder?.sale_mode == 1 ? '合计金额' : '预估金额'}
/>
<View className={styles.order_number_desc}>{numText}</View>
</View>
)
}
<View className={classnames(styles.order_btn, btnStatus && styles.ok_order_btn)} onClick={() => submitOrderEven()}>
提交订单
</View>
</View>
<Popup show={showDesc} showTitle={false} onClose={() => setShowDesc(false)}>
<Remark defaultValue={submitOrderData?.remark} onSave={(e) => getRemark(e)} />
</Popup>
<View className='common_safe_area_y'></View>
</View>
)
}

433
src/pages/order/components/kindList/index.tsx
View File

@ -1,215 +1,240 @@
import { ORDER_STATUS } from "@/common/enum"
import { formatHashTag, formatPriceDiv, formatWeightDiv } from "@/common/fotmat"
import EstimatedAmount from "@/components/estimatedAmount"
import LabAndImg from "@/components/LabAndImg"
import { Text, View } from "@tarojs/components"
import { memo, useCallback, useMemo, useState } from "react"
import styles from './index.module.scss'
import { ORDER_STATUS } from '@/common/enum'
import { formatHashTag, formatPriceDiv, formatWeightDiv } from '@/common/fotmat'
import EstimatedAmount from '@/components/estimatedAmount'
import LabAndImg from '@/components/LabAndImg'
import { Text, View } from '@tarojs/components'
import { memo, useCallback, useMemo, useState } from 'react'
import styles from './index.module.scss'
type OrderParam = {
estimate_amount: number, //预估金额
list: any[],
sale_mode: number,
sale_mode_name: string,
unit: string,
total_colors: number,
total_fabrics: number,
total_number: number,
status: number, //订单状态
total_sale_price: number, //合计金额
total_weight_error_discount: number, //空差优惠
the_previous_status: number, //取消订单时的订单状态
actual_amount: number, //实付金额
wait_pay_amount: number, //待付金额
refund_amount: number //退款金额
estimate_amount: number //预估金额
list: any[]
sale_mode: number
sale_mode_name: string
unit: string
total_colors: number
total_fabrics: number
total_number: number
status: number //订单状态
total_sale_price: number //合计金额
total_weight_error_discount: number //空差优惠
the_previous_status: number //取消订单时的订单状态
actual_amount: number //实付金额
wait_pay_amount: number //待付金额
refund_amount: number //退款金额
}
type Param = {
order: OrderParam,
comfirm?: boolean //是否是确认订单页面使用
order: OrderParam
comfirm?: boolean //是否是确认订单页面使用
}
export default memo(({order, comfirm = false}:Param) => {
const {
SaleOrderStatusBooking, // 待接单
SaleOrderStatusArranging, // 配布中
SaleOrderStatusArranged, // 已配布
SaleOrderStatusWaitingPayment, // 待付款
SaleOrderStatusWaitingDelivery, // 待发货
SaleOrderStatusWaitingReceipt, // 待收货
SaleOrderStatusAlreadyReceipt, // 已收货
SaleOrderStatusComplete, // 已完成
SaleOrderStatusRefund, // 已退款
SaleOrderStatusCancel, // 已取消
SaleorderstatusWaitingPrePayment, // 预付款
SaleOrderStatusTaking //提货
} = ORDER_STATUS
export default memo(({ order, comfirm = false }: Param) => {
const {
SaleOrderStatusBooking, // 待接单
SaleOrderStatusArranging, // 配布中
SaleOrderStatusArranged, // 已配布
SaleOrderStatusWaitingPayment, // 待付款
SaleOrderStatusWaitingDelivery, // 待发货
SaleOrderStatusWaitingReceipt, // 待收货
SaleOrderStatusAlreadyReceipt, // 已收货
SaleOrderStatusComplete, // 已完成
SaleOrderStatusRefund, // 已退款
SaleOrderStatusCancel, // 已取消
SaleorderstatusWaitingPrePayment, // 预付款
SaleOrderStatusTaking, //提货
} = ORDER_STATUS
//注册金额
type orderPriceListParams = {id: number, label: string, field: string, message: string, validatarFunc: (val: typeof order) => any}
const priceList:orderPriceListParams[] = [
{
id:1,
label:'预估金额',
field: 'estimate_amount',
message: '预估金额按生产商定义的标准匹重计算，仅供参考。详细交易金额以出单为准！',
validatarFunc: (order) => {
return order['estimate_amount'] > 0 && order['total_sale_price'] <= 0
}
},
{
id:2,
label:'合计金额',
field: 'total_sale_price',
message: '包含空差的货款金额',
validatarFunc: (order) => {
return order['total_sale_price'] > 0
}
},
{
id:3,
label:'空差优惠',
field: 'total_weight_error_discount',
message: '扣除空差金额',
validatarFunc: (order) => {
return order['total_weight_error_discount'] > 0
}
},
{
id:5,
label:'实付金额',
field: 'actual_amount',
message: '本单实付总金额',
validatarFunc: (order) => {
return order['actual_amount'] > 0
}
},
{
id:4,
label:'待付金额',
field: 'wait_pay_amount',
message: '扣除空差后的货款金额',
validatarFunc: (order) => {
return order['wait_pay_amount'] > 0
}
},
{
id:6,
label:'退款金额',
field: 'refund_amount',
message: '已退款金额',
validatarFunc: (order) => {
return order['refund_amount'] > 0
}
},
]
//注册金额
type orderPriceListParams = {
id: number
label: string
field: string
message: string
validatarFunc: (val: typeof order) => any
}
const priceList: orderPriceListParams[] = [
{
id: 1,
label: '预估金额',
field: 'estimate_amount',
message: '预估金额按生产商定义的标准匹重计算，仅供参考。详细交易金额以出单为准！',
validatarFunc: (order) => {
return order['estimate_amount'] > 0 && order['total_sale_price'] <= 0
},
},
{
id: 2,
label: '合计金额',
field: 'total_sale_price',
message: '包含空差的货款金额',
validatarFunc: (order) => {
return order['total_sale_price'] > 0
},
},
{
id: 3,
label: '空差优惠',
field: 'total_weight_error_discount',
message: '扣除空差金额',
validatarFunc: (order) => {
return order['total_weight_error_discount'] > 0
},
},
{
id: 5,
label: '实付金额',
field: 'actual_amount',
message: '本单实付总金额',
validatarFunc: (order) => {
return order['actual_amount'] > 0
},
},
{
id: 4,
label: '待付金额',
field: 'wait_pay_amount',
message: '扣除空差后的货款金额',
validatarFunc: (order) => {
return order['wait_pay_amount'] > 0
},
},
{
id: 6,
label: '退款金额',
field: 'refund_amount',
message: '已退款金额',
validatarFunc: (order) => {
return order['refund_amount'] > 0
},
},
]
//订单流程金额展示
const priceConDom = useMemo(() => {
if(!order) return
return (
<>
{
priceList.map(item => {
return <>{item.validatarFunc(order)&&<EstimatedAmount key={item.id} number={order[item.field]} title={item.label} messageTitle={item.message} />}</>
})
}
</>
)
}, [order])
//对应数量
const formatCount = useCallback((item) => {
return order?.sale_mode == 0? item.roll : Number(item.length / 100)
}, [order])
//对应单价
const standardPrice = useCallback(price => {
return formatPriceDiv(price) + '/' + (order?.sale_mode == 1?'m':'kg')
}, [order])
//数量格式
const numText = useMemo(() => {
if(order) {
let total_number = order?.sale_mode == 0?order?.total_number:(order?.total_number/100)
return `${order?.total_fabrics} 种面料，${order?.total_colors} 种颜色，共 ${total_number} ${order?.unit}`
}
}, [order])
//确认订单金额展示
const comfirmPriceConDom = useMemo(() => {
if(!order) return
let item = order.sale_mode == 1?priceList[1]:priceList[0]
return<EstimatedAmount key={item.id} number={order[item.field]} title={item.label} messageTitle={item.message}/>
}, [order])
//确认金额展示
const showPriceConDom = useMemo(() => {
return comfirm?comfirmPriceConDom:priceConDom
}, [order])
//颜色金额小计
const colorPrice = useCallback((item) => {
let res = item.total_sale_price||item.estimate_amount
return formatPriceDiv(res, 100, true)
},[order])
//散剪大约重量
const aboutWeight = useCallback((weight) => {
if(order.sale_mode == 2 ) {
let showWeight = [SaleorderstatusWaitingPrePayment.value, SaleOrderStatusBooking.value, SaleOrderStatusArranging.value].includes(order.status)
return showWeight?<View className={styles.order_list_item_price_dg}>; <Text>≈{formatWeightDiv(weight)}kg</Text></View>:<></>
}
return <></>
}, [order])
//订单流程金额展示
const priceConDom = useMemo(() => {
if (!order) return
return (
<>
<View className={styles.orders_list_title}>{numText}</View>
<View className={styles.orders_list_con}>
{
order?.list?.map(item => {
return <View key={item.product_code} className={styles.order_list}>
<View className={styles.order_list_title}>
<View className={styles.tag}>{order.sale_mode_name}</View>
<View className={styles.title}>{formatHashTag(item.code, item.name)}</View>
<View className={styles.num}>共{item?.product_colors.length}种</View>
</View>
<View className={styles.order_list_scroll}>
{item?.product_colors?.map(colorItem => {
return <View key={colorItem.id} className={styles.order_list_item}>
<View className={styles.order_list_item_img}>
<LabAndImg value={{lab:item.lab,rgb:item.rgb,texture_url:item.texture_url}}/>
</View>
<View className={styles.order_list_item_con}>
<View className={styles.order_list_item_des}>
<View className={styles.order_list_item_title}>
{colorItem.code + ' ' + colorItem.name}
{(colorItem?.return_roll > 0)&&<Text>{`已退${colorItem?.return_roll}条`}</Text>}
{(colorItem?.apply_return_roll > 0)&&<Text>{`待退${colorItem?.apply_return_roll}条`}</Text>}
</View>
<View className={styles.order_list_item_price}>
¥{standardPrice(colorItem.sale_price)}
{aboutWeight(colorItem.estimate_weight)}
</View>
</View>
<View className={styles.order_list_item_count}>
<View className={styles.count_num}>×{formatCount(colorItem)}<text>{order.unit}</text></View>
<View className={styles.count_price}><text>¥</text>{colorPrice(colorItem)}</View>
</View>
</View>
</View>
})}
</View>
</View>
})
}
<View className={styles.order_estimated_amount}>
{showPriceConDom}
</View>
</View>
</>
<>
{priceList.map((item) => {
return <>{item.validatarFunc(order) && <EstimatedAmount key={item.id} number={order[item.field]} title={item.label} messageTitle={item.message} />}</>
})}
</>
)
})
}, [order])
//对应数量
const formatCount = useCallback(
(item) => {
return order?.sale_mode == 0 ? item.roll : Number(item.length / 100)
},
[order],
)
//对应单价
const standardPrice = useCallback(
(price) => {
return formatPriceDiv(price) + '/' + (order?.sale_mode == 1 ? 'm' : 'kg')
},
[order],
)
//数量格式
const numText = useMemo(() => {
if (order) {
let total_number = order?.sale_mode == 0 ? order?.total_number : order?.total_number / 100
return `${order?.total_fabrics} 种面料，${order?.total_colors} 种颜色，共 ${total_number} ${order?.unit}`
}
}, [order])
//确认订单金额展示
const comfirmPriceConDom = useMemo(() => {
if (!order) return
let item = order.sale_mode == 1 ? priceList[1] : priceList[0]
return <EstimatedAmount key={item.id} number={order[item.field]} title={item.label} messageTitle={item.message} />
}, [order])
//确认金额展示
const showPriceConDom = useMemo(() => {
return comfirm ? comfirmPriceConDom : priceConDom
}, [order])
//颜色金额小计
const colorPrice = useCallback(
(item) => {
let res = item.total_sale_price || item.estimate_amount
return formatPriceDiv(res, 100, true)
},
[order],
)
//散剪大约重量
const aboutWeight = useCallback(
(weight) => {
if (order.sale_mode == 2) {
let showWeight = [SaleorderstatusWaitingPrePayment.value, SaleOrderStatusBooking.value, SaleOrderStatusArranging.value].includes(order.status)
return showWeight ? (
<View className={styles.order_list_item_price_dg}>
; <Text>≈{formatWeightDiv(weight)}kg</Text>
</View>
) : (
<></>
)
}
return <></>
},
[order],
)
return (
<>
<View className={styles.orders_list_title}>{numText}</View>
<View className={styles.orders_list_con}>
{order?.list?.map((item) => {
return (
<View key={item.product_code} className={styles.order_list}>
<View className={styles.order_list_title}>
<View className={styles.tag}>{order.sale_mode_name}</View>
<View className={styles.title}>{formatHashTag(item.code, item.name)}</View>
<View className={styles.num}>共{item?.product_colors.length}种</View>
</View>
<View className={styles.order_list_scroll}>
{item?.product_colors?.map((colorItem) => {
return (
<View key={colorItem.id} className={styles.order_list_item}>
<View className={styles.order_list_item_img}>
<LabAndImg value={{ lab: colorItem.lab, rgb: colorItem.rgb, texture_url: colorItem.texture_url }} showStatus={false} />
</View>
<View className={styles.order_list_item_con}>
<View className={styles.order_list_item_des}>
<View className={styles.order_list_item_title}>
{colorItem.code + ' ' + colorItem.name}
{colorItem?.return_roll > 0 && <Text>{`已退${colorItem?.return_roll}条`}</Text>}
{colorItem?.apply_return_roll > 0 && <Text>{`待退${colorItem?.apply_return_roll}条`}</Text>}
</View>
<View className={styles.order_list_item_price}>
¥{standardPrice(colorItem.sale_price)}
{aboutWeight(colorItem.estimate_weight)}
</View>
</View>
<View className={styles.order_list_item_count}>
<View className={styles.count_num}>
×{formatCount(colorItem)}
<text>{order.unit}</text>
</View>
<View className={styles.count_price}>
<text>¥</text>
{colorPrice(colorItem)}
</View>
</View>
</View>
</View>
)
})}
</View>
</View>
)
})}
<View className={styles.order_estimated_amount}>{showPriceConDom}</View>
</View>
</>
)
})

360
src/pages/order/components/scanPay/index.tsx
View File

@ -1,195 +1,197 @@
import { Image, ScrollView, Text, View } from "@tarojs/components";
import { memo, useEffect, useRef, useState } from "react";
import classnames from "classnames";
import styles from './index.module.scss'
import Popup from "@/components/popup";
import Taro from "@tarojs/taro";
import { alert } from "@/common/common";
import { formatDateTime, formatHashTag, formatImgUrl, formatPriceDiv, formatWeightDiv } from "@/common/fotmat";
import useCheckAuthorize from "@/use/useCheckAuthorize";
import { GetPayCode } from "@/api/onlinePay";
import LoadingCard from "@/components/loadingCard";
import { Image, ScrollView, Text, View } from '@tarojs/components'
import { memo, useEffect, useRef, useState } from 'react'
import classnames from 'classnames'
import styles from './index.module.scss'
import Popup from '@/components/popup'
import Taro from '@tarojs/taro'
import { alert } from '@/common/common'
import { formatDateTime, formatHashTag, formatImgUrl, formatPriceDiv, formatWeightDiv } from '@/common/fotmat'
import useCheckAuthorize from '@/use/useCheckAuthorize'
import { GetPayCode } from '@/api/onlinePay'
import LoadingCard from '@/components/loadingCard'
type Param = {
show?: true|false,
onClose?: () => void,
company?: string,
qrcode?: string,
orderInfo?: any,
show?: true | false
onClose?: () => void
company?: string
qrcode?: string
orderInfo?: any
}
type ListParam = {
product_code: string,
product_name: string,
product_color_code: string,
product_color_name: string,
num: string,
weight: string,
length: string,
sale_price: string,
total_price: string
product_code: string
product_name: string
product_color_code: string
product_color_name: string
num: string
weight: string
length: string
sale_price: string
total_price: string
weight_error: string
}
export default memo(({show = true, onClose, company, orderInfo}:Param) => {
const [detail, setDetail] = useState<any>()
useEffect(() => {
if(orderInfo) {
let lists:ListParam[] = []
orderInfo.product_list?.map(pitem => {
pitem?.product_colors?.map(citem => {
lists.push({
product_code: formatHashTag(pitem.code, '', 'name')!,
product_name: pitem.name,
product_color_code: formatHashTag(citem.code)!,
product_color_name: citem.name,
num: citem.roll.toString(),
length: (citem.length/100).toString(),
weight: formatWeightDiv(citem.actual_weight||citem.estimate_weight).toString(),
sale_price: formatPriceDiv(citem.sale_price).toString(),
total_price: formatPriceDiv(citem.estimate_amount).toString(),
})
})
})
setDetail(() => ({
title: "面料销售电子确认单",
company: orderInfo.company_name, //后端公司
order_type: orderInfo.sale_mode_name, //类型：大货
sale_user: orderInfo.sale_user_name, //业务员
order_created_time: formatDateTime(orderInfo.create_time),
order_no: orderInfo.order_no,
shipment_mode: orderInfo.shipment_mode_name, //发货方式
target_user_name: userName(orderInfo), //收件人
target_address: address(orderInfo), //收货地址
target_description: orderInfo.remark, //发货备注
pay_account: orderInfo.offline_remittance_information?.transfer_remittance_account, //专属收款账号
bank_account_name: orderInfo.offline_remittance_information?.account_name, //账户名称
bank_name: orderInfo.offline_remittance_information?.bank_of_deposit, //开户银行
pay_type:"", //支付方式, 可不传
client: orderInfo.purchaser_name, //客户名称
phone: userPhone(orderInfo), //收货手机号码
order_total_length: (orderInfo.total_number/100).toString(), //订单布匹长度
order_total_price: formatPriceDiv(orderInfo.bill_total_sale_price).toString(), //订单价格
order_total_num: (orderInfo.total_number) + '',
qrcode:"", //跳转链接
order_total_weight: formatWeightDiv(orderInfo.total_weight||orderInfo.total_estimate_weight).toString(), //订单布匹重量
list: lists ,
show_qrcode: true, //是否显示码单
export default memo(({ show = true, onClose, company, orderInfo }: Param) => {
const [detail, setDetail] = useState<any>()
estimate_amount: formatPriceDiv(orderInfo.estimate_amount).toString(),
show_estimate_amount: orderInfo.estimate_amount > 0 && orderInfo.total_sale_price <= 0,
total_sale_price: formatPriceDiv(orderInfo.total_sale_price).toString(),
show_total_sale_price: orderInfo.total_sale_price > 0,
total_weight_error_discount: formatPriceDiv(orderInfo.total_weight_error_discount).toString(),
show_total_weight_error_discount: orderInfo.total_weight_error_discount > 0,
actual_amount: formatPriceDiv(orderInfo.actual_amount).toString(),
show_actual_amount: orderInfo.actual_amount > 0,
wait_pay_amount: formatPriceDiv(orderInfo.wait_pay_amount).toString(),
show_wait_pay_amount: orderInfo.wait_pay_amount > 0,
show_barcode: true
}))
}
}, [orderInfo])
//收货地址
const address = (addressInfo) => {
if(addressInfo?.shipment_mode == 2) {
return addressInfo?.province_name?addressInfo.province_name + addressInfo.city_name + addressInfo.district_name + addressInfo.address_detail:''
} else {
return addressInfo?.take_goods_address
}
useEffect(() => {
if (orderInfo) {
let lists: ListParam[] = []
orderInfo.product_list?.map((pitem) => {
pitem?.product_colors?.map((citem) => {
lists.push({
product_code: formatHashTag(pitem.code, '', 'name')!,
product_name: pitem.name,
product_color_code: formatHashTag(citem.code)!,
product_color_name: citem.name,
num: citem.roll.toString(),
length: (citem.length / 100).toString(),
weight: formatWeightDiv(citem.actual_weight || citem.estimate_weight).toString(),
sale_price: formatPriceDiv(citem.sale_price).toString(),
total_price: formatPriceDiv(citem.estimate_amount).toString(),
weight_error: formatWeightDiv(citem.weight_error).toString(),
})
})
})
setDetail(() => ({
title: '面料销售电子确认单',
company: orderInfo.company_name, //后端公司
order_type: orderInfo.sale_mode_name, //类型：大货
sale_user: orderInfo.sale_user_name, //业务员
order_created_time: formatDateTime(orderInfo.create_time),
order_no: orderInfo.order_no,
shipment_mode: orderInfo.shipment_mode_name, //发货方式
target_user_name: userName(orderInfo), //收件人
target_address: address(orderInfo), //收货地址
target_description: orderInfo.remark, //发货备注
pay_account: orderInfo.offline_remittance_information?.transfer_remittance_account, //专属收款账号
bank_account_name: orderInfo.offline_remittance_information?.account_name, //账户名称
bank_name: orderInfo.offline_remittance_information?.bank_of_deposit, //开户银行
pay_type: '', //支付方式, 可不传
client: orderInfo.purchaser_name, //客户名称
phone: userPhone(orderInfo), //收货手机号码
order_total_length: (orderInfo.total_number / 100).toString(), //订单布匹长度
order_total_price: formatPriceDiv(orderInfo.bill_total_sale_price).toString(), //订单价格
order_total_num: orderInfo.total_number + '',
qrcode: '', //跳转链接
order_total_weight: formatWeightDiv(orderInfo.total_weight || orderInfo.total_estimate_weight).toString(), //订单布匹重量
list: lists,
show_qrcode: true, //是否显示码单
estimate_amount: formatPriceDiv(orderInfo.estimate_amount).toString(),
show_estimate_amount: orderInfo.estimate_amount > 0 && orderInfo.total_sale_price <= 0,
total_sale_price: formatPriceDiv(orderInfo.total_sale_price).toString(),
show_total_sale_price: orderInfo.total_sale_price > 0,
total_weight_error_discount: formatPriceDiv(orderInfo.total_weight_error_discount).toString(),
show_total_weight_error_discount: orderInfo.total_weight_error_discount > 0,
actual_amount: formatPriceDiv(orderInfo.actual_amount).toString(),
show_actual_amount: orderInfo.actual_amount > 0,
wait_pay_amount: formatPriceDiv(orderInfo.wait_pay_amount).toString(),
show_wait_pay_amount: orderInfo.wait_pay_amount > 0,
show_barcode: true,
}))
}
}, [orderInfo])
//收件人
const userName = (addressInfo) => {
return addressInfo?.shipment_mode == 2? orderInfo.target_user_name: ''
//收货地址
const address = (addressInfo) => {
if (addressInfo?.shipment_mode == 2) {
return addressInfo?.province_name ? addressInfo.province_name + addressInfo.city_name + addressInfo.district_name + addressInfo.address_detail : ''
} else {
return addressInfo?.take_goods_address
}
}
//手机号
const userPhone = (addressInfo) => {
return addressInfo?.shipment_mode == 2? orderInfo.target_user_phone : orderInfo.take_goods_phone
}
//收件人
const userName = (addressInfo) => {
return addressInfo?.shipment_mode == 2 ? orderInfo.target_user_name : ''
}
//获取支付二维码
const [payCodeImage, setPayCodeImage] = useState<string>('')
const fileData = useRef({
filePath: '',
base64: ''
//手机号
const userPhone = (addressInfo) => {
return addressInfo?.shipment_mode == 2 ? orderInfo.target_user_phone : orderInfo.take_goods_phone
}
//获取支付二维码
const [payCodeImage, setPayCodeImage] = useState<string>('')
const fileData = useRef({
filePath: '',
base64: '',
})
const { fetchData, state } = GetPayCode()
const getCore = async () => {
let res = await fetchData(detail)
const base64 = res.data.base64
setPayCodeImage(() => base64)
const time = new Date().valueOf()
const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64) || []
let filePath = Taro.env.USER_DATA_PATH + '/img' + time + '.' + format
fileData.current.filePath = filePath
fileData.current.base64 = bodyData
const save = Taro.getFileSystemManager()
save.writeFile({
filePath: fileData.current.filePath,
data: fileData.current.base64,
encoding: 'base64',
})
const {fetchData, state} = GetPayCode()
const getCore = async () => {
let res = await fetchData(detail)
const base64 = res.data.base64
setPayCodeImage(() => base64)
const time = new Date().valueOf()
const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64) || [];
let filePath = Taro.env.USER_DATA_PATH + '/img' + time +'.'+ format
fileData.current.filePath = filePath
fileData.current.base64 = bodyData
const save = Taro.getFileSystemManager()
save.writeFile({
filePath: fileData.current.filePath,
data: fileData.current.base64,
encoding: 'base64',
})
}
useEffect(() => {
if(show)
getCore()
}, [show])
}
useEffect(() => {
if (show) getCore()
}, [show])
//检查是否开启保存图片权限
const {check} = useCheckAuthorize({scope:'scope.writePhotosAlbum', msg:'您没授权，无法保存图片'})
const saveImageCheck = async () => {
const res = await check()
res&&saveImage()
}
//检查是否开启保存图片权限
const { check } = useCheckAuthorize({
scope: 'scope.writePhotosAlbum',
msg: '您没授权，无法保存图片',
})
const saveImageCheck = async () => {
const res = await check()
res && saveImage()
}
//保存图片
const saveImage = () => {
alert.loading('正在保存图片')
Taro.saveImageToPhotosAlbum({
filePath: fileData.current.filePath,
success: function (res) {
alert.success('图片保存成功')
},
fail: function (err) {
console.log('err::', err)
}
})
}
//保存图片
const saveImage = () => {
alert.loading('正在保存图片')
Taro.saveImageToPhotosAlbum({
filePath: fileData.current.filePath,
success: function (res) {
alert.success('图片保存成功')
},
fail: function (err) {
console.log('err::', err)
},
})
}
//预览图片
const showImage = () => {
console.log('fileData.current.filePath::', fileData.current.filePath)
Taro.previewImage({
current: fileData.current.filePath, // 当前显示
urls: [fileData.current.filePath] // 需要预览的图片http链接列表
})
}
//复制功能
return (
<View className={styles.scanPay_main}>
<Popup show={show} showTitle={false} onClose={onClose}>
<View className={styles.scanPay_con}>
<View className={classnames('iconfont icon-a-moreback', styles.miconfont_title)} onClick={onClose}></View>
<View className={styles.title}>扫码支付</View>
<View className={styles.desc}>
<Text className={classnames(styles.miconfont, 'iconfont, icon-zhuyi')}></Text>
扫码支付成功后，自动更新状态
</View>
<View className={styles.scanPay_list}>
{(state.loading)&&<LoadingCard/>||
<ScrollView scrollY className={styles.scanPay_list}>
<Image mode="widthFix" src={payCodeImage} onClick={showImage}></Image>
</ScrollView>}
</View>
<View className={styles.btns} onClick={saveImageCheck}>保存电子确认单</View>
</View>
</Popup>
//预览图片
const showImage = () => {
console.log('fileData.current.filePath::', fileData.current.filePath)
Taro.previewImage({
current: fileData.current.filePath, // 当前显示
urls: [fileData.current.filePath], // 需要预览的图片http链接列表
})
}
//复制功能
return (
<View className={styles.scanPay_main}>
<Popup show={show} showTitle={false} onClose={onClose}>
<View className={styles.scanPay_con}>
<View className={classnames('iconfont icon-a-moreback', styles.miconfont_title)} onClick={onClose}></View>
<View className={styles.title}>扫码支付</View>
<View className={styles.desc}>
<Text className={classnames(styles.miconfont, 'iconfont, icon-zhuyi')}></Text>
扫码支付成功后，自动更新状态
</View>
<View className={styles.scanPay_list}>
{(state.loading && <LoadingCard />) || (
<ScrollView scrollY className={styles.scanPay_list}>
<Image mode='widthFix' src={payCodeImage} onClick={showImage}></Image>
</ScrollView>
)}
</View>
<View className={styles.btns} onClick={saveImageCheck}>
保存电子确认单
</View>
</View>
)
})
</Popup>
</View>
)
})

355
src/pages/order/components/scanPayCheck/index.tsx
View File

@ -1,192 +1,193 @@
import { Image, ScrollView, Text, View } from "@tarojs/components";
import { memo, useEffect, useRef, useState } from "react";
import classnames from "classnames";
import styles from './index.module.scss'
import Popup from "@/components/popup";
import Taro from "@tarojs/taro";
import { alert } from "@/common/common";
import { formatDateTime, formatPriceDiv, formatRemoveHashTag, formatWeightDiv } from "@/common/fotmat";
import useCheckAuthorize from "@/use/useCheckAuthorize";
import { GetPayCode } from "@/api/onlinePay";
import LoadingCard from "@/components/loadingCard";
import { Image, ScrollView, Text, View } from '@tarojs/components'
import { memo, useEffect, useRef, useState } from 'react'
import classnames from 'classnames'
import styles from './index.module.scss'
import Popup from '@/components/popup'
import Taro from '@tarojs/taro'
import { alert } from '@/common/common'
import { formatDateTime, formatPriceDiv, formatRemoveHashTag, formatWeightDiv } from '@/common/fotmat'
import useCheckAuthorize from '@/use/useCheckAuthorize'
import { GetPayCode } from '@/api/onlinePay'
import LoadingCard from '@/components/loadingCard'
type Param = {
show?: true|false,
onClose?: () => void,
company?: string,
qrcode?: string,
orderInfo?: any,
show?: true | false
onClose?: () => void
company?: string
qrcode?: string
orderInfo?: any
}
type ListParam = {
product_code: string,
product_name: string,
product_color_code: string,
product_color_name: string,
num: string,
weight: string,
length: string,
sale_price: string,
total_price: string,
weight_error: string
product_code: string
product_name: string
product_color_code: string
product_color_name: string
num: string
weight: string
length: string
sale_price: string
total_price: string
weight_error: string
}
export default memo(({show = true, onClose, company, orderInfo}:Param) => {
const [detail, setDetail] = useState<any>()
useEffect(() => {
if(show) {
getCore()
}
}, [show])
useEffect(() => {
if(orderInfo) {
let lists:ListParam[] = []
orderInfo.product_list?.map(pitem => {
pitem?.product_colors?.map(citem => {
lists.push({
product_code: formatRemoveHashTag(pitem.code),
product_name: pitem.name,
product_color_code: formatRemoveHashTag(citem.code),
product_color_name: citem.name,
num: citem.roll.toString(),
length: (citem.length/100).toString(),
weight: formatWeightDiv(citem.actual_weight||citem.estimate_weight).toString(),
sale_price: formatPriceDiv(citem.sale_price).toString(),
total_price: formatPriceDiv(citem.total_sale_price||citem.estimate_amount).toString(),
weight_error: formatWeightDiv(citem.weight_error).toString()
})
})
})
setDetail(() => ({
title: "面料销售电子确认单",
company: orderInfo.company_name, //后端公司
order_type: orderInfo.sale_mode_name, //类型：大货
sale_user: orderInfo.sale_user_name, //业务员
order_created_time: formatDateTime(orderInfo.create_time),
order_no: orderInfo.order_no,
shipment_mode: orderInfo.shipment_mode_name, //发货方式
target_user_name: userName(orderInfo), //收件人
target_address: address(orderInfo), //收货地址
target_description: orderInfo.remark, //发货备注
pay_account: orderInfo.account, //专属收款账号
bank_account_name: orderInfo.account_name, //账户名称
bank_name: orderInfo.bank_of_deposit, //开户银行
pay_type:"", //支付方式, 可不传
client: orderInfo.purchaser_name, //客户名称
phone: userPhone(orderInfo), //收货手机号码
order_total_length: (orderInfo.total_number/100).toString(), //订单布匹长度
order_total_price: formatPriceDiv(orderInfo.bill_total_sale_price).toString(), //订单价格
order_total_num: (orderInfo.total_number).toString(),
qrcode:"", //跳转链接
order_total_weight: formatWeightDiv(orderInfo.total_weight||orderInfo.total_estimate_weight).toString(), //订单布匹重量
list: lists,
export default memo(({ show = true, onClose, company, orderInfo }: Param) => {
const [detail, setDetail] = useState<any>()
estimate_amount: formatPriceDiv(orderInfo.estimate_amount).toString(),
show_estimate_amount: orderInfo.estimate_amount > 0 && orderInfo.total_sale_price <= 0,
total_sale_price: formatPriceDiv(orderInfo.total_sale_price).toString(),
show_total_sale_price: orderInfo.total_sale_price > 0,
total_weight_error_discount: formatPriceDiv(orderInfo.total_weight_error_discount).toString(),
show_total_weight_error_discount: orderInfo.total_weight_error_discount > 0,
actual_amount: formatPriceDiv(orderInfo.actual_amount).toString(),
show_actual_amount: orderInfo.actual_amount > 0,
wait_pay_amount: formatPriceDiv(orderInfo.wait_pay_amount).toString(),
show_wait_pay_amount: orderInfo.wait_pay_amount > 0,
show_barcode: true,
}))
}
}, [orderInfo])
//收货地址
const address = (addressInfo) => {
if(addressInfo?.shipment_mode == 2) {
return addressInfo?.province_name?addressInfo.province_name + addressInfo.city_name + addressInfo.district_name + addressInfo.address_detail:''
} else {
return addressInfo?.take_goods_address
}
useEffect(() => {
if (show) {
getCore()
}
}, [show])
//收件人
const userName = (addressInfo) => {
return addressInfo?.shipment_mode == 2? orderInfo.target_user_name: ''
}
useEffect(() => {
if (orderInfo) {
let lists: ListParam[] = []
orderInfo.product_list?.map((pitem) => {
pitem?.product_colors?.map((citem) => {
lists.push({
product_code: formatRemoveHashTag(pitem.code),
product_name: pitem.name,
product_color_code: formatRemoveHashTag(citem.code),
product_color_name: citem.name,
num: citem.roll.toString(),
length: (citem.length / 100).toString(),
weight: formatWeightDiv(citem.actual_weight || citem.estimate_weight).toString(),
sale_price: formatPriceDiv(citem.sale_price).toString(),
total_price: formatPriceDiv(citem.total_sale_price || citem.estimate_amount).toString(),
weight_error: formatWeightDiv(citem.weight_error).toString(),
})
})
})
setDetail(() => ({
title: '面料销售电子确认单',
company: orderInfo.company_name, //后端公司
order_type: orderInfo.sale_mode_name, //类型：大货
sale_user: orderInfo.sale_user_name, //业务员
order_created_time: formatDateTime(orderInfo.create_time),
order_no: orderInfo.order_no,
shipment_mode: orderInfo.shipment_mode_name, //发货方式
target_user_name: userName(orderInfo), //收件人
target_address: address(orderInfo), //收货地址
target_description: orderInfo.remark, //发货备注
pay_account: orderInfo.account, //专属收款账号
bank_account_name: orderInfo.account_name, //账户名称
bank_name: orderInfo.bank_of_deposit, //开户银行
pay_type: '', //支付方式, 可不传
client: orderInfo.purchaser_name, //客户名称
phone: userPhone(orderInfo), //收货手机号码
order_total_length: (orderInfo.total_number / 100).toString(), //订单布匹长度
order_total_price: formatPriceDiv(orderInfo.bill_total_sale_price).toString(), //订单价格
order_total_num: orderInfo.total_number.toString(),
qrcode: '', //跳转链接
order_total_weight: formatWeightDiv(orderInfo.total_weight || orderInfo.total_estimate_weight).toString(), //订单布匹重量
list: lists,
//手机号
const userPhone = (addressInfo) => {
return addressInfo?.shipment_mode == 2? orderInfo.target_user_phone : orderInfo.take_goods_phone
estimate_amount: formatPriceDiv(orderInfo.estimate_amount).toString(),
show_estimate_amount: orderInfo.estimate_amount > 0 && orderInfo.total_sale_price <= 0,
total_sale_price: formatPriceDiv(orderInfo.total_sale_price).toString(),
show_total_sale_price: orderInfo.total_sale_price > 0,
total_weight_error_discount: formatPriceDiv(orderInfo.total_weight_error_discount).toString(),
show_total_weight_error_discount: orderInfo.total_weight_error_discount > 0,
actual_amount: formatPriceDiv(orderInfo.actual_amount).toString(),
show_actual_amount: orderInfo.actual_amount > 0,
wait_pay_amount: formatPriceDiv(orderInfo.wait_pay_amount).toString(),
show_wait_pay_amount: orderInfo.wait_pay_amount > 0,
show_barcode: true,
}))
}
//获取支付二维码
const [payCodeImage, setPayCodeImage] = useState<string>('')
const fileData = useRef({
filePath: '',
base64: ''
}, [orderInfo])
//收货地址
const address = (addressInfo) => {
if (addressInfo?.shipment_mode == 2) {
return addressInfo?.province_name ? addressInfo.province_name + addressInfo.city_name + addressInfo.district_name + addressInfo.address_detail : ''
} else {
return addressInfo?.take_goods_address
}
}
//收件人
const userName = (addressInfo) => {
return addressInfo?.shipment_mode == 2 ? orderInfo.target_user_name : ''
}
//手机号
const userPhone = (addressInfo) => {
return addressInfo?.shipment_mode == 2 ? orderInfo.target_user_phone : orderInfo.take_goods_phone
}
//获取支付二维码
const [payCodeImage, setPayCodeImage] = useState<string>('')
const fileData = useRef({
filePath: '',
base64: '',
})
const { fetchData, state } = GetPayCode()
const getCore = async () => {
let res = await fetchData(detail)
const base64 = res.data.base64
setPayCodeImage(() => base64)
const time = new Date().valueOf()
const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64) || []
let filePath = Taro.env.USER_DATA_PATH + '/img' + time + '.' + format
fileData.current.filePath = filePath
fileData.current.base64 = bodyData
const save = Taro.getFileSystemManager()
save.writeFile({
filePath: fileData.current.filePath,
data: fileData.current.base64,
encoding: 'base64',
})
const {fetchData, state} = GetPayCode()
const getCore = async () => {
let res = await fetchData(detail)
const base64 = res.data.base64
setPayCodeImage(() => base64)
const time = new Date().valueOf()
const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64) || [];
let filePath = Taro.env.USER_DATA_PATH + '/img' + time +'.'+ format
fileData.current.filePath = filePath
fileData.current.base64 = bodyData
const save = Taro.getFileSystemManager()
save.writeFile({
filePath: fileData.current.filePath,
data: fileData.current.base64,
encoding: 'base64',
})
}
}
//检查是否开启保存图片权限
const {check} = useCheckAuthorize({scope:'scope.writePhotosAlbum', msg:'您没授权，无法保存图片'})
const saveImageCheck = async () => {
const res = await check()
res&&saveImage()
}
//检查是否开启保存图片权限
const { check } = useCheckAuthorize({ scope: 'scope.writePhotosAlbum', msg: '您没授权，无法保存图片' })
const saveImageCheck = async () => {
const res = await check()
res && saveImage()
}
//保存图片
const saveImage = () => {
alert.loading('正在保存图片')
Taro.saveImageToPhotosAlbum({
filePath: fileData.current.filePath,
success: function () {
alert.success('图片保存成功')
},
fail: function (err) {
console.log('err::', err)
}
})
}
//保存图片
const saveImage = () => {
alert.loading('正在保存图片')
Taro.saveImageToPhotosAlbum({
filePath: fileData.current.filePath,
success: function () {
alert.success('图片保存成功')
},
fail: function (err) {
console.log('err::', err)
},
})
}
//预览图片
const showImage = () => {
console.log('fileData.current.filePath::', fileData.current.filePath)
Taro.previewImage({
current: fileData.current.filePath, // 当前显示
urls: [fileData.current.filePath] // 需要预览的图片http链接列表
})
}
//复制功能
return (
<View className={styles.scanPay_main}>
<Popup show={show} showTitle={false} onClose={onClose}>
<View className={styles.scanPay_con}>
<View className={classnames('iconfont icon-a-moreback', styles.miconfont_title)} onClick={onClose}></View>
<View className={styles.title}>查看销售码单</View>
<View className={styles.scanPay_list}>
{(state.loading)&&<LoadingCard/>||
<ScrollView scrollY className={styles.scanPay_list}>
<Image mode="widthFix" src={payCodeImage} onClick={showImage}></Image>
</ScrollView>}
</View>
<View className={styles.btns} onClick={saveImageCheck}>保存电子确认单</View>
</View>
</Popup>
//预览图片
const showImage = () => {
console.log('fileData.current.filePath::', fileData.current.filePath)
Taro.previewImage({
current: fileData.current.filePath, // 当前显示
urls: [fileData.current.filePath], // 需要预览的图片http链接列表
})
}
//复制功能
return (
<View className={styles.scanPay_main}>
<Popup show={show} showTitle={false} onClose={onClose}>
<View className={styles.scanPay_con}>
<View className={classnames('iconfont icon-a-moreback', styles.miconfont_title)} onClick={onClose}></View>
<View className={styles.title}>查看销售码单</View>
<View className={styles.scanPay_list}>
{(state.loading && <LoadingCard />) || (
<ScrollView scrollY className={styles.scanPay_list}>
<Image mode='widthFix' src={payCodeImage} onClick={showImage}></Image>
</ScrollView>
)}
</View>
<View className={styles.btns} onClick={saveImageCheck}>
保存电子确认单
</View>
</View>
)
})
</Popup>
</View>
)
})

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

@ -1,130 +1,128 @@
.order_main{
min-height: 100%;
background-color:$color_bg_one;
padding: 20px;
padding-bottom: 190px;
.order_main {
min-height: 100%;
background-color: $color_bg_one;
padding: 20px;
padding-bottom: 190px;
box-sizing: border-box;
.order_title {
display: flex;
align-items: center;
padding: 20px 30px;
box-sizing: border-box;
background-color: #fff;
height: 116px;
border-radius: 20px;
margin-top: 20px;
text {
flex: 1;
font-size: $font_size;
font-weight: 700;
}
.order_status {
background-color: #f0f0f0;
width: 148px;
height: 55px;
color: $color_font_three;
text-align: center;
line-height: 55px;
font-size: $font_size_medium;
border-radius: 30px;
&:nth-last-child(1) {
margin-left: 20px;
}
}
}
.order_desc {
display: flex;
align-items: center;
background-color: #fff;
padding: 20px;
min-height: 116px;
border-radius: 20px;
margin-top: 20px;
box-sizing: border-box;
.order_desc_con {
width: 150px;
font-size: $font_size;
font-weight: 700;
}
.order_desc_text,
.order_desc_text_hint {
font-size: $font_size_medium;
.order_title{
display: flex;
align-items: center;
padding: 20px 30px;
box-sizing: border-box;
background-color: #fff;
height: 116px;
border-radius: 20px;
margin-top: 20px;
text{
flex:1;
font-size: $font_size;
font-weight: 700;
}
.order_status{
background-color: #F0F0F0;
width: 148px;
height: 55px;
color: $color_font_three;
text-align: center;
line-height: 55px;
font-size: $font_size_medium;
border-radius: 30px;
&:nth-last-child(1) {
margin-left: 20px;
}
}
margin-right: 10px;
flex: 1;
word-break: break-all;
}
.order_desc{
display: flex;
align-items: center;
background-color: #fff;
padding: 20px;
min-height: 116px;
border-radius: 20px;
margin-top: 20px;
box-sizing: border-box;
.order_desc_con{
width: 150px;
font-size: $font_size;
font-weight: 700;
}
.order_desc_text, .order_desc_text_hint{
font-size: $font_size_medium;
margin-right: 10px;
flex:1;
word-break:break-all;
}
.order_desc_text_hint{
text-align: right;
color: $color_font_two;
}
.miconfont{
font-size: 20px;
color: $color_font_two;
}
.order_desc_text_hint {
text-align: right;
color: $color_font_two;
}
.submit_order_con{
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #fff;
box-shadow: 6px 0px 12px 0px rgba(0,0,0,0.16);
padding: 20px 20px;
box-sizing: border-box;
.order_btn {
width: 152px;
height: 72px;
border: 2px solid #dddddd;
border-radius: 46px;
display: flex;
justify-content: center;
align-items: center;
color: $color_font_three;
&:nth-child(n+2) {
margin-left: 34px;
}
}
.order_btn_select{
color: $color_main;
border: 2px solid $color_main;
}
.order_number_desc{
font-size: $font_size_medium;
color: $color_font_two;
}
.miconfont {
font-size: 20px;
color: $color_font_two;
}
.order_info{
background-color: #fff;
margin-top: 20px;
border-radius: 20px;
padding: 20px;
.order_info_title{
font-size: $font_size;
font-weight: 700;
margin-bottom: 20px;
}
.order_num{
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
.order_num_btn{
font-size: $font_size_medium;
padding: 5px 10px;
border: 2px solid #007cf7;
border-radius: 10px;
color: $color_main;
}
}
text{
font-size: $font_size;
}
}
.submit_order_con {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #fff;
box-shadow: 6px 0px 12px 0px rgba(0, 0, 0, 0.16);
padding: 20px 20px;
box-sizing: border-box;
.order_btn {
width: 152px;
height: 72px;
border: 2px solid #dddddd;
border-radius: 46px;
display: flex;
justify-content: center;
align-items: center;
color: $color_font_three;
&:nth-child(n + 2) {
margin-left: 34px;
}
}
.weight_memo_con{
margin-bottom: 20px;
.order_btn_select {
color: $color_main;
border: 2px solid $color_main;
}
}
.order_number_desc {
font-size: $font_size_medium;
color: $color_font_two;
}
}
.order_info {
background-color: #fff;
margin-top: 20px;
border-radius: 20px;
padding: 20px;
.order_info_title {
font-size: $font_size;
font-weight: 700;
margin-bottom: 20px;
}
.order_num {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
.order_num_btn {
font-size: $font_size_medium;
padding: 5px 10px;
border: 2px solid #007cf7;
border-radius: 10px;
color: $color_main;
}
}
text {
font-size: $font_size;
}
}
.weight_memo_con {
margin-bottom: 20px;
}
}

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

@ -1,331 +1,340 @@
import {
GetSaleOrderDetailApi,
EditSaleOrderRemarkApi,
} from "@/api/order";
import { AddShoppingCartApi } from "@/api/shopCart";
import { SubscriptionMessageApi } from "@/api/user";
import { alert, goLink } from "@/common/common";
import { ORDER_STATUS } from "@/common/enum";
import { formatDateTime, formatImgUrl } from "@/common/fotmat";
import OrderBtns from "@/components/orderBtns";
import Popup from "@/components/popup";
import SearchInput from "@/components/searchInput";
import ShopCart from "@/components/shopCart";
import useLogin from "@/use/useLogin";
import { Text, View } from "@tarojs/components"
import Taro, { useDidShow, usePullDownRefresh, useRouter } from "@tarojs/taro";
import classnames from "classnames";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import AddressInfoDetail from "./components/addressInfoDetail";
import AdvanceOrderState from "./components/advanceOrderState";
import ApplyRefund from "./components/applyRefund";
import KindList from "./components/kindList";
import OrderState from "./components/orderState";
import Payment from "./components/payment";
import Remark from "./components/remark";
import ReturnRecord from "./components/returnRecord";
import ScanPayCheck from "./components/scanPayCheck";
import styles from './index.module.scss'
export default () => {
useLogin()
const [showDesc, setShowDesc] = useState(false)
const router = useRouter()
const orderId = useRef<number>(Number(router.params.id))
useDidShow(() => {
getSaleOrderPreView()
import { GetSaleOrderDetailApi, EditSaleOrderRemarkApi } from '@/api/order'
import { AddShoppingCartApi } from '@/api/shopCart'
import { SubscriptionMessageApi } from '@/api/user'
import { alert, goLink } from '@/common/common'
import { ORDER_STATUS } from '@/common/enum'
import { formatDateTime, formatImgUrl } from '@/common/fotmat'
import OrderBtns from '@/components/orderBtns'
import Popup from '@/components/popup'
import SearchInput from '@/components/searchInput'
import ShopCart from '@/components/shopCart'
import useLogin from '@/use/useLogin'
import { Text, View } from '@tarojs/components'
import Taro, { useDidShow, usePullDownRefresh, useRouter } from '@tarojs/taro'
import classnames from 'classnames'
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import AddressInfoDetail from './components/addressInfoDetail'
import AdvanceOrderState from './components/advanceOrderState'
import ApplyRefund from './components/applyRefund'
import KindList from './components/kindList'
import OrderState from './components/orderState'
import Payment from './components/payment'
import Remark from './components/remark'
import ReturnRecord from './components/returnRecord'
import ScanPayCheck from './components/scanPayCheck'
import styles from './index.module.scss'
export default () => {
useLogin()
const [showDesc, setShowDesc] = useState(false)
const router = useRouter()
const orderId = useRef<number>(Number(router.params.id))
useDidShow(() => {
getSaleOrderPreView()
})
//订单状态枚举
const {
SaleOrderStatusTaking,
SaleOrderStatusWaitingDelivery,
SaleOrderStatusWaitingReceipt, // 待收货
SaleOrderStatusAlreadyReceipt, // 已收货
SaleOrderStatusComplete, // 已完成
SaleOrderStatusRefund, // 已退款
SaleOrderStatusCancel, // 已取消
SaleorderstatusWaitingPrePayment, // 预付款
} = ORDER_STATUS
//获取订单详情
const firstOpen = useRef(true)
const [orderDetail, setOrderDetail] = useState<any>() //获取到的原始数据
const { fetchData: getOrderFetchData } = GetSaleOrderDetailApi()
const getSaleOrderPreView = async () => {
if (orderId.current) {
let res = await getOrderFetchData({ id: orderId.current })
setOrderDetail(res.data)
setOrderRemark(res.data.remark)
//预付款自动打开支付
if (firstOpen.current && SaleorderstatusWaitingPrePayment.value == res.data.status) {
firstOpen.current = false
toPay()
}
}
Taro.stopPullDownRefresh()
// Taro.hideToast()
}
//监听获取到的数据
useEffect(() => {
if (orderDetail) formatData()
}, [orderDetail])
//格式化数据格式
const [formatDetailOrder, setFormatDetailOrder] = useState<any>() //格式化后的数据
const formatData = () => {
setFormatDetailOrder({
...orderDetail,
unit: orderDetail.sale_mode == 0 ? '条' : 'm', //单位
list: orderDetail.product_list,
})
}
const formatPreViewOrderMemo = useMemo(() => {
return formatDetailOrder
}, [formatDetailOrder])
//订单状态枚举
const {
SaleOrderStatusTaking,
SaleOrderStatusWaitingDelivery,
SaleOrderStatusWaitingReceipt, // 待收货
SaleOrderStatusAlreadyReceipt, // 已收货
SaleOrderStatusComplete, // 已完成
SaleOrderStatusRefund, // 已退款
SaleOrderStatusCancel, // 已取消
SaleorderstatusWaitingPrePayment, // 预付款
} = ORDER_STATUS
//获取订单详情
const firstOpen = useRef(true)
const [orderDetail, setOrderDetail] = useState<any>() //获取到的原始数据
const {fetchData: getOrderFetchData} = GetSaleOrderDetailApi()
const getSaleOrderPreView = async () => {
if(orderId.current) {
let res = await getOrderFetchData({id: orderId.current})
setOrderDetail(res.data)
setOrderRemark(res.data.remark)
//预付款自动打开支付
if(firstOpen.current && SaleorderstatusWaitingPrePayment.value == res.data.status) {
firstOpen.current = false
toPay()
}
}
Taro.stopPullDownRefresh()
// Taro.hideToast()
}
//监听获取到的数据
useEffect(() => {
if(orderDetail)
formatData()
}, [orderDetail])
//格式化数据格式
const [formatDetailOrder, setFormatDetailOrder] = useState<any>() //格式化后的数据
const formatData = () => {
setFormatDetailOrder({
...orderDetail,
unit: orderDetail.sale_mode == 0?'条':'m', //单位
list: orderDetail.product_list,
//复制功能
const clipboardData = () => {
Taro.setClipboardData({
data: orderDetail?.order_no || '',
success: function (res) {
Taro.showToast({
icon: 'none',
title: '复制成功',
})
}
const formatPreViewOrderMemo = useMemo(() => {
return formatDetailOrder
}, [formatDetailOrder])
//复制功能
const clipboardData = () => {
Taro.setClipboardData({
data: orderDetail?.order_no||'',
success: function (res) {
Taro.showToast({
icon: 'none',
title: '复制成功'
})
}
})
}
//初始地址数据
const defaultAddress = useMemo(() => {
return {
province_name: orderDetail?.province_name,
city_name: orderDetail?.city_name,
district_name: orderDetail?.district_name,
address_detail: orderDetail?.address_detail,
target_user_name: orderDetail?.target_user_name,
target_user_phone: orderDetail?.target_user_phone,
shipment_mode: orderDetail?.shipment_mode,
id: orderDetail?.id,
sale_mode: orderDetail?.sale_mode,
status: orderDetail?.status,
take_goods_address: orderDetail?.take_goods_address,
take_goods_phone: orderDetail?.take_goods_phone
}
}, [orderDetail])
//订单备注
const {fetchData: remarkFetchData} = EditSaleOrderRemarkApi()
const [orderRemark, setOrderRemark] = useState('')
const getRemark = useCallback(async (e) => {
setOrderRemark(() => e)
let res = await remarkFetchData({remark:e, id: orderId.current})
if(res.success) {
getSaleOrderPreView()
alert.success('提交成功')
} else {
alert.error(res.msg)
}
setShowDesc(() => false)
}, [])
const noCanOpenDescList = useRef([
SaleOrderStatusTaking.value, //提货中
SaleOrderStatusWaitingDelivery.value, //待发货
SaleOrderStatusWaitingReceipt.value, // 待收货
SaleOrderStatusAlreadyReceipt.value, // 已收货
SaleOrderStatusComplete.value, // 已完成
SaleOrderStatusRefund.value, // 已退款
SaleOrderStatusCancel.value, // 已取消
])
const descOpen = () => {
if(noCanOpenDescList.current.includes(orderDetail?.status)) return alert.none('该订单状态不能修改备注')
setShowDesc(() => true)
}
//去付款
const [payMentShow, setPayMentShow] = useState(false)
const toPay = () => {
setPayMentShow(true)
}
//打开地址修改
const addressRef = useRef<any>(null)
//修改收货方式
const getShipmentMode = useCallback(() => {
getSaleOrderPreView()
}, [orderDetail])
//修改地址
const getAddress = useCallback(() => {
getSaleOrderPreView()
}, [orderDetail])
//获取底部按钮点击, 获取按钮状态
const orderStateClick = useCallback((val) => {
if(val == 1 || val == 6 || val == 8) {
getSaleOrderPreView()
}else if(val == 2) {
//待付款
toPay()
} else if(val == 3) {
//申请退款
if(!orderDetail?.av_return_roll) return alert.none('该订单已申请过退款')
setRefundShow(true)
} else if(val == 7) {
//再购
addShopCart()
} else if(val == 9) {
//售后记录
onReturnRecordShow()
} else if(val == 10) {
setShowScanPayCheck(true)
}
}, [orderDetail])
//页面下拉刷新
usePullDownRefresh(() => {
getSaleOrderPreView()
},
})
}
//支付成功
const onPaySuccess = useCallback(() => {
alert.success('支付成功')
getSaleOrderPreView()
closePayShow()
}, [orderDetail])
//关闭支付弹窗
const closePayShow = useCallback(() => {
setPayMentShow(() => false)
}, [orderDetail])
//按钮所需数据
const orderInfo = useMemo(() => {
return {
orderId: orderDetail?.id,
...orderDetail
}
}, [orderDetail])
//刷新页面
const refresh = useCallback(() => {
alert.loading('刷新中')
getSaleOrderPreView()
}, [orderDetail])
//退款申请
const [refundShow, setRefundShow] = useState(false)
const applyRefundClose = useCallback(() => {
setRefundShow(false)
}, [])
//查看物流
const getLogistics = useCallback(() => {
if (orderDetail?.delivery_appendix_url) {
const list = orderDetail?.delivery_appendix_url?.map(item => {
return formatImgUrl(item, '!w800')
})
if(list?.length <= 0) return alert.error('暂无图片')
Taro.previewImage({
current: list[0], // 当前显示
urls: list // 需要预览的图片http链接列表
})
}
}, [orderDetail])
//添加购物车
const [showCart, setShowCart] = useState(false)
const {fetchData:addFetchData} = AddShoppingCartApi()
const addShopCart = async () => {
let color_list:{product_color_id: number, roll?: number, length?: number}[] = []
orderDetail?.product_list.map(pitem => {
pitem?.product_colors.map(citem => {
if(orderDetail?.sale_mode == 0) {
return color_list.push({product_color_id: citem.id, roll: citem.roll})
} else {
return color_list.push({product_color_id: citem.id, length: citem.length})
}
})
})
const state = await addFetchData({
sale_mode: orderDetail?.sale_mode,
color_list
})
if(state.success) {
Taro.showToast({
title:'已加入购物车'
})
setShowCart(true)
} else {
Taro.showToast({
icon:'none',
title: state.msg
})
}
//初始地址数据
const defaultAddress = useMemo(() => {
return {
province_name: orderDetail?.province_name,
city_name: orderDetail?.city_name,
district_name: orderDetail?.district_name,
address_detail: orderDetail?.address_detail,
target_user_name: orderDetail?.target_user_name,
target_user_phone: orderDetail?.target_user_phone,
shipment_mode: orderDetail?.shipment_mode,
id: orderDetail?.id,
sale_mode: orderDetail?.sale_mode,
status: orderDetail?.status,
take_goods_address: orderDetail?.take_goods_address,
take_goods_phone: orderDetail?.take_goods_phone,
}
}, [orderDetail])
//显示售后记录
const [returnRecordShow, setReturnRecordShow] = useState(false)
const onReturnRecordShow = useCallback(() => {
setReturnRecordShow(true)
}, [])
const closeReturnRecord = useCallback(() => {
setReturnRecordShow(false)
}, [])
//订单备注
const { fetchData: remarkFetchData } = EditSaleOrderRemarkApi()
const [orderRemark, setOrderRemark] = useState('')
const getRemark = useCallback(async (e) => {
setOrderRemark(() => e)
let res = await remarkFetchData({ remark: e, id: orderId.current })
if (res.success) {
getSaleOrderPreView()
alert.success('提交成功')
} else {
alert.error(res.msg)
}
setShowDesc(() => false)
}, [])
const noCanOpenDescList = useRef([
SaleOrderStatusTaking.value, //提货中
SaleOrderStatusWaitingDelivery.value, //待发货
SaleOrderStatusWaitingReceipt.value, // 待收货
SaleOrderStatusAlreadyReceipt.value, // 已收货
SaleOrderStatusComplete.value, // 已完成
SaleOrderStatusRefund.value, // 已退款
SaleOrderStatusCancel.value, // 已取消
])
const descOpen = () => {
if (noCanOpenDescList.current.includes(orderDetail?.status)) return alert.none('该订单状态不能修改备注')
setShowDesc(() => true)
}
//显示
const [showScanPayCheck, setShowScanPayCheck] = useState(false)
//去付款
const [payMentShow, setPayMentShow] = useState(false)
const toPay = () => {
setPayMentShow(true)
}
return (
<View className={styles.order_main}>
{(orderDetail?.status != SaleorderstatusWaitingPrePayment.value)&&<OrderState orderInfo={orderDetail}/>||
<AdvanceOrderState orderInfo={orderDetail} onRefresh={refresh}/>}
<View>
<AddressInfoDetail orderInfo={defaultAddress} onLogistics={getLogistics} onSelect={getAddress} onChangeShipmentMode={getShipmentMode} ref={addressRef} />
//打开地址修改
const addressRef = useRef<any>(null)
//修改收货方式
const getShipmentMode = useCallback(() => {
getSaleOrderPreView()
}, [orderDetail])
//修改地址
const getAddress = useCallback(() => {
getSaleOrderPreView()
}, [orderDetail])
//获取底部按钮点击, 获取按钮状态
const orderStateClick = useCallback(
(val) => {
if (val == 1 || val == 6 || val == 8) {
getSaleOrderPreView()
} else if (val == 2) {
//待付款
toPay()
} else if (val == 3) {
//申请退款
if (!orderDetail?.av_return_roll) return alert.none('该订单已申请过退款')
setRefundShow(true)
} else if (val == 7) {
//再购
addShopCart()
} else if (val == 9) {
//售后记录
onReturnRecordShow()
} else if (val == 10) {
setShowScanPayCheck(true)
}
},
[orderDetail],
)
//页面下拉刷新
usePullDownRefresh(() => {
getSaleOrderPreView()
})
//支付成功
const onPaySuccess = useCallback(() => {
alert.success('支付成功')
getSaleOrderPreView()
closePayShow()
}, [orderDetail])
//关闭支付弹窗
const closePayShow = useCallback(() => {
setPayMentShow(() => false)
}, [orderDetail])
//按钮所需数据
const orderInfo = useMemo(() => {
return {
orderId: orderDetail?.id,
...orderDetail,
}
}, [orderDetail])
//刷新页面
const refresh = useCallback(() => {
alert.loading('刷新中')
getSaleOrderPreView()
}, [orderDetail])
//退款申请
const [refundShow, setRefundShow] = useState(false)
const applyRefundClose = useCallback(() => {
setRefundShow(false)
}, [])
//查看物流
const getLogistics = useCallback(() => {
if (orderDetail?.delivery_appendix_url) {
const list = orderDetail?.delivery_appendix_url?.map((item) => {
return formatImgUrl(item, '!w800')
})
if (list?.length <= 0) return alert.error('暂无图片')
Taro.previewImage({
current: list[0], // 当前显示
urls: list, // 需要预览的图片http链接列表
})
}
}, [orderDetail])
//添加购物车
const [showCart, setShowCart] = useState(false)
const { fetchData: addFetchData } = AddShoppingCartApi()
const addShopCart = async () => {
let color_list: { product_color_id: number; roll?: number; length?: number }[] = []
orderDetail?.product_list.map((pitem) => {
pitem?.product_colors.map((citem) => {
if (orderDetail?.sale_mode == 0) {
return color_list.push({ product_color_id: citem.id, roll: citem.roll })
} else {
return color_list.push({ product_color_id: citem.id, length: citem.length })
}
})
})
const state = await addFetchData({
sale_mode: orderDetail?.sale_mode,
color_list,
})
if (state.success) {
Taro.showToast({
title: '已加入购物车',
})
setShowCart(true)
} else {
Taro.showToast({
icon: 'none',
title: state.msg,
})
}
}
//显示售后记录
const [returnRecordShow, setReturnRecordShow] = useState(false)
const onReturnRecordShow = useCallback(() => {
setReturnRecordShow(true)
}, [])
const closeReturnRecord = useCallback(() => {
setReturnRecordShow(false)
}, [])
//显示
const [showScanPayCheck, setShowScanPayCheck] = useState(false)
return (
<View className={styles.order_main}>
{(orderDetail?.status != SaleorderstatusWaitingPrePayment.value && <OrderState orderInfo={orderDetail} />) || (
<AdvanceOrderState orderInfo={orderDetail} onRefresh={refresh} />
)}
<View>
<AddressInfoDetail
orderInfo={defaultAddress}
onLogistics={getLogistics}
onSelect={getAddress}
onChangeShipmentMode={getShipmentMode}
ref={addressRef}
/>
</View>
<KindList order={formatPreViewOrderMemo} />
<View className={styles.order_info}>
<View className={styles.order_info_title}>订单信息</View>
<SearchInput showBorder={false} title='单号' height='50rpx'>
<View className={styles.order_num}>
<Text>{orderDetail?.order_no}</Text>
<View className={styles.order_num_btn} onClick={() => clipboardData()}>
复制
</View>
<KindList order={formatPreViewOrderMemo}/>
<View className={styles.order_info} >
<View className={styles.order_info_title}>订单信息</View>
<SearchInput showBorder={false} title='单号' height='50rpx'>
<View className={styles.order_num}>
<Text>{orderDetail?.order_no}</Text>
<View className={styles.order_num_btn} onClick={() => clipboardData()}>复制</View>
</View>
</SearchInput>
<SearchInput showBorder={false} title='下单时间' height='50rpx'>
<Text>{formatDateTime(orderDetail?.create_time)}</Text>
</SearchInput>
{(orderDetail?.payment_time)&&<SearchInput showBorder={false} title='付款时间' height='50rpx'>
<Text>{formatDateTime(orderDetail?.payment_time)}</Text>
</SearchInput>}
</View>
<View className={styles.order_desc} onClick={descOpen}>
<View className={styles.order_desc_con}>订单备注</View>
{
orderRemark&&<View className={styles.order_desc_text}>{orderDetail?.remark}</View>||
<View className={styles.order_desc_text_hint}>填写备注</View>
}
<View className={classnames(styles.miconfont, 'iconfont icon-a-moreback')}></View>
</View>
{(orderDetail?.status != SaleOrderStatusCancel.value)&&<View className={styles.submit_order_con}>
<OrderBtns orderInfo={orderInfo} onClick={orderStateClick}/>
<View className="common_safe_area_y"></View>
</View> }
<Popup show={showDesc} showTitle={false} onClose={() => setShowDesc(false)}>
<Remark onSave={(e) => getRemark(e)} defaultValue={orderDetail?.remark}/>
</Popup>
<Payment onSubmitSuccess={onPaySuccess} show={payMentShow} onClose={closePayShow} orderInfo={orderDetail} />
<ScanPayCheck show={showScanPayCheck} onClose={() => setShowScanPayCheck(false)} orderInfo={orderDetail}/>
<ApplyRefund show={refundShow} onClose={applyRefundClose} orderId={orderDetail?.id}/>
<ShopCart intoStatus="again" show={showCart} onClose={() => setShowCart(false)}/>
<ReturnRecord show={returnRecordShow} onClose={closeReturnRecord} id={orderDetail?.id}/>
<View className="common_safe_area_y"></View>
</View>
</SearchInput>
<SearchInput showBorder={false} title='下单时间' height='50rpx'>
<Text>{formatDateTime(orderDetail?.create_time)}</Text>
</SearchInput>
{orderDetail?.payment_time && (
<SearchInput showBorder={false} title='付款时间' height='50rpx'>
<Text>{formatDateTime(orderDetail?.payment_time)}</Text>
</SearchInput>
)}
</View>
<View className={styles.order_desc} onClick={descOpen}>
<View className={styles.order_desc_con}>订单备注</View>
{(orderRemark && <View className={styles.order_desc_text}>{orderDetail?.remark}</View>) || (
<View className={styles.order_desc_text_hint}>填写备注</View>
)}
<View className={classnames(styles.miconfont, 'iconfont icon-a-moreback')}></View>
</View>
{orderDetail?.status != SaleOrderStatusCancel.value && (
<View className={styles.submit_order_con}>
<OrderBtns orderInfo={orderInfo} onClick={orderStateClick} />
<View className='common_safe_area_y'></View>
</View>
)
}
)}
<Popup show={showDesc} showTitle={false} onClose={() => setShowDesc(false)}>
<Remark onSave={(e) => getRemark(e)} defaultValue={orderDetail?.remark} />
</Popup>
<Payment onSubmitSuccess={onPaySuccess} show={payMentShow} onClose={closePayShow} orderInfo={orderDetail} />
<ScanPayCheck show={showScanPayCheck} onClose={() => setShowScanPayCheck(false)} orderInfo={orderDetail} />
<ApplyRefund show={refundShow} onClose={applyRefundClose} orderId={orderDetail?.id} />
<ShopCart intoStatus='again' show={showCart} onClose={() => setShowCart(false)} />
<ReturnRecord show={returnRecordShow} onClose={closeReturnRecord} id={orderDetail?.id} />
<View className='common_safe_area_y'></View>
</View>
)
}

72
src/pages/order/orderList/index.module.scss
View File

@ -1,38 +1,38 @@
.order_list_main{
height: 100vh;
background-color: $color_bg_one;
display: flex;
flex-direction: column;
.title{
padding: 0 20px;
background-color: #fff;
box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.16);
border-bottom: 2px solid #e2e2e2;
height: 160px;
.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;
}
}
.order_list_main {
height: 100vh;
background-color: $color_bg_one;
display: flex;
flex-direction: column;
.title {
padding: 0 20px;
background-color: #fff;
box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.16);
border-bottom: 2px solid #e2e2e2;
height: 160px;
.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;
}
}
.order_list{
height: calc(100vh - 160px);
.order_item_con{
margin-top: 20px;
padding: 0 20px;
}
}
.order_list {
height: calc(100vh - 160px);
.order_item_con {
margin-top: 20px;
padding: 0 20px;
}
}
}
}

233
src/pages/order/orderList/index.tsx
View File

@ -1,24 +1,24 @@
import Search from "@/components/search"
import useLogin from "@/use/useLogin"
import {View } from "@tarojs/components"
import Taro, { useDidShow,} from "@tarojs/taro"
import { useCallback, useEffect, useMemo, useRef, useState } from "react"
import styles from './index.module.scss'
import Order from "./components/order"
import InfiniteScroll from "@/components/infiniteScroll"
import { GetOrderListApi, OrderStatusListApi} from '@/api/order'
import { dataLoadingStatus, getFilterData } from "@/common/util"
import OrderStatusList from "./components/orderStatusList"
import { AddShoppingCartApi } from "@/api/shopCart"
import ShopCart from "@/components/shopCart"
import { alert } from "@/common/common"
import { useRouter } from "@tarojs/runtime"
import Payment from "../components/payment"
import ApplyRefund from "../components/applyRefund"
import ReturnRecord from "../components/returnRecord"
import Search from '@/components/search'
import useLogin from '@/use/useLogin'
import { View } from '@tarojs/components'
import Taro, { useDidShow } from '@tarojs/taro'
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import styles from './index.module.scss'
import Order from './components/order'
import InfiniteScroll from '@/components/infiniteScroll'
import { GetOrderListApi, OrderStatusListApi } from '@/api/order'
import { dataLoadingStatus, getFilterData } from '@/common/util'
import OrderStatusList from './components/orderStatusList'
import { AddShoppingCartApi } from '@/api/shopCart'
import ShopCart from '@/components/shopCart'
import { alert } from '@/common/common'
import { useRouter } from '@tarojs/runtime'
import Payment from '../components/payment'
import ApplyRefund from '../components/applyRefund'
import ReturnRecord from '../components/returnRecord'
export default () => {
const {checkLogin} = useLogin()
const { checkLogin } = useLogin()
useDidShow(async () => {
await checkLogin()
})
@ -26,25 +26,25 @@ export default () => {
//传递过来的参数
const router = useRouter()
useEffect(() => {
if(router?.params.status != undefined && router?.params.status !== '') {
setSearchField((e) => ({...e, status: router?.params.status as number}))
if (router?.params.status != undefined && router?.params.status !== '') {
setSearchField((e) => ({ ...e, status: router?.params.status as number }))
} else {
setSearchField((e) => ({...e, status:-1}))
setSearchField((e) => ({ ...e, status: -1 }))
}
}, [router])
//搜索参数
const [searchField, setSearchField] = useState<{status: number|null, page: number, size: number, name: string}>({
const [searchField, setSearchField] = useState<{ status: number | null; page: number; size: number; name: string }>({
status: null,
page : 1,
size : 10,
name:''
page: 1,
size: 10,
name: '',
})
//获取订单状态
const {fetchData: orderStatusListFetchData} = OrderStatusListApi()
const [statusList, setStatusList] = useState<any[]>([{id: -1, name: '全部'}])
const getOrderStatusList = async () => {
const { fetchData: orderStatusListFetchData } = OrderStatusListApi()
const [statusList, setStatusList] = useState<any[]>([{ id: -1, name: '全部' }])
const getOrderStatusList = async () => {
let res = await orderStatusListFetchData()
setStatusList((e) => [...e, ...res.data.list])
}
@ -53,143 +53,142 @@ export default () => {
}, [])
//获取订单列表
const {fetchData: listFetchData, state:orderState} = GetOrderListApi()
const [orderData, setOrderData] = useState<{list:any[], total:number}>({list:[], total:0})
const { fetchData: listFetchData, state: orderState } = GetOrderListApi()
const [orderData, setOrderData] = useState<{ list: any[]; total: number }>({ list: [], total: 0 })
const getOrderList = async () => {
let res = await listFetchData(getFilterData(searchField))
setOrderData((e) => ({...e, list: res.data?.list, total: res.data?.total}))
setOrderData((e) => ({ ...e, list: res.data?.list, total: res.data?.total }))
setRefresherTriggeredStatus(() => false)
}
//监听筛选条件变化
useEffect(() => {
if(searchField.status != null) getOrderList()
if (searchField.status != null) getOrderList()
}, [searchField])
//上拉加载数据
const pageNum = useRef({size: searchField.size, page: searchField.page})
const pageNum = useRef({ size: searchField.size, page: searchField.page })
const getScrolltolower = useCallback(() => {
if(orderData.list.length < orderData.total) {
pageNum.current.page++
const size = pageNum.current.size * pageNum.current.page
setSearchField({...searchField, size })
}
if (orderData.list.length < orderData.total) {
pageNum.current.page++
const size = pageNum.current.size * pageNum.current.page
setSearchField({ ...searchField, size })
}
}, [orderData])
//状态改变
const changeStatus = useCallback((e) => {
pageNum.current.page = 1
setSearchField((value) => ({...value, status:e, size:10}))
setOrderData(() => ({list:[], total:0}))
setSearchField((value) => ({ ...value, status: e, size: 10 }))
setOrderData(() => ({ list: [], total: 0 }))
}, [])
//数据加载状态
const statusMore = useMemo(() => {
return dataLoadingStatus({list:orderData.list, total: orderData.total, status: orderState.loading})
return dataLoadingStatus({ list: orderData.list, total: orderData.total, status: orderState.loading })
}, [orderData, orderState])
//输入了搜索关键字
const getSearchData = useCallback((e) => {
pageNum.current.page = 1
setOrderData(() => ({list:[], total:0}))
setSearchField((val) => ({...val, name:e, size:10}))
setOrderData(() => ({ list: [], total: 0 }))
setSearchField((val) => ({ ...val, name: e, size: 10 }))
}, [])
//列表下拉刷新
const [refresherTriggeredStatus, setRefresherTriggeredStatus] = useState(false)
const getRefresherRefresh = async () => {
pageNum.current.size = 1
setRefresherTriggeredStatus(true)
setSearchField((val) => ({...val, size:10}))
setSearchField((val) => ({ ...val, size: 10 }))
}
//监听点击的按钮
const clickOrderBtn = useCallback(({status, orderInfo}) => {
setCallBackPayOrderInfo(() => orderInfo)
if(status == 1 || status == 6 || status == 8) {
getOrderList()
} else if(status == 2) {
//去支付
toPay()
} else if (status == 3) {
//申请退款
if(!orderInfo?.av_return_roll) return alert.none('该订单已申请过退款')
setRefundShow(true)
} else if (status == 7) {
//购买
addShopCart(orderInfo)
} else if (status == 9) {
onReturnRecordShow()
} else if (status == 10) {
setShowScanPayCheck(true)
}
}, [orderData])
const clickOrderBtn = useCallback(
({ status, orderInfo }) => {
setCallBackPayOrderInfo(() => orderInfo)
if (status == 1 || status == 6 || status == 8) {
getOrderList()
} else if (status == 2) {
//去支付
toPay()
} else if (status == 3) {
//申请退款
if (!orderInfo?.av_return_roll) return alert.none('该订单已申请过退款')
setRefundShow(true)
} else if (status == 7) {
//购买
addShopCart(orderInfo)
} else if (status == 9) {
onReturnRecordShow()
} else if (status == 10) {
setShowScanPayCheck(true)
}
},
[orderData],
)
const [callBackOrderInfo, setCallBackPayOrderInfo] = useState<any>()
//去付款
const [payMentShow, setPayMentShow] = useState(false)
const toPay = () => {
setPayMentShow(true)
setPayMentShow(true)
}
//关闭支付弹窗
const closePayShow = useCallback(() => {
setPayMentShow(() => false)
setPayMentShow(() => false)
}, [])
//支付成功
const onPaySuccess = useCallback(() => {
getOrderList()
closePayShow()
getOrderList()
closePayShow()
}, [])
//添加购物车
const [showCart, setShowCart] = useState(false)
const {fetchData:addFetchData} = AddShoppingCartApi()
const addShopCart = async (item) => {
let color_list:{product_color_id: number, roll?: number, length?: number}[] = []
item?.product_list.map(pitem => {
pitem?.product_colors.map(citem => {
if(item?.sale_mode == 0) {
return color_list.push({product_color_id: citem.id, roll: citem.roll})
} else {
return color_list.push({product_color_id: citem.id, length: citem.length})
}
})
const { fetchData: addFetchData } = AddShoppingCartApi()
const addShopCart = async (item) => {
let color_list: { product_color_id: number; roll?: number; length?: number }[] = []
item?.product_list.map((pitem) => {
pitem?.product_colors.map((citem) => {
if (item?.sale_mode == 0) {
return color_list.push({ product_color_id: citem.id, roll: citem.roll })
} else {
return color_list.push({ product_color_id: citem.id, length: citem.length })
}
})
const state = await addFetchData({
sale_mode: item?.sale_mode,
color_list
})
const state = await addFetchData({
sale_mode: item?.sale_mode,
color_list,
})
if (state.success) {
Taro.showToast({
title: '已加入购物车',
})
if(state.success) {
Taro.showToast({
title:'已加入购物车'
})
setShowCart(true)
} else {
Taro.showToast({
icon:'none',
title: state.msg
})
}
setShowCart(true)
} else {
Taro.showToast({
icon: 'none',
title: state.msg,
})
}
}
//申请退款
const [refundShow, setRefundShow] = useState(false)
const applyRefundClose = useCallback(() => {
setRefundShow(false)
setRefundShow(false)
}, [])
//显示售后记录
const [returnRecordShow, setReturnRecordShow] = useState(false)
const onReturnRecordShow = useCallback(() => {
setReturnRecordShow(true)
setReturnRecordShow(true)
}, [])
const closeReturnRecord = useCallback(() => {
setReturnRecordShow(false)
setReturnRecordShow(false)
}, [])
//显示
@ -198,20 +197,30 @@ export default () => {
return (
<View className={styles.order_list_main}>
<View className={styles.title}>
<Search placeIcon="out" placeholder="搜索商品/名称/颜色/订单号" showBtn={true} changeOnSearch={getSearchData} debounceTime={300}/>
<OrderStatusList list={statusList} onSelect={changeStatus} defaultId={router?.params.status as number}/>
<Search placeIcon='out' placeholder='搜索商品/名称/颜色/订单号' showBtn={true} changeOnSearch={getSearchData} debounceTime={300} />
<OrderStatusList list={statusList} onSelect={changeStatus} defaultId={router?.params.status as number} />
</View>
<View className={styles.order_list}>
<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>
})}
</InfiniteScroll>
<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>
)
})}
</InfiniteScroll>
</View>
<ApplyRefund show={refundShow} onClose={applyRefundClose} orderId={callBackOrderInfo?.id}/>
<ShopCart intoStatus="again" show={showCart} onClose={() => setShowCart(false)} default_sale_mode={callBackOrderInfo?.sale_mode}/>
<ReturnRecord show={returnRecordShow} onClose={closeReturnRecord} id={callBackOrderInfo?.id}/>
<Payment onSubmitSuccess={onPaySuccess} show={payMentShow} onClose={closePayShow} orderInfo={callBackOrderInfo}/>
<ApplyRefund show={refundShow} onClose={applyRefundClose} orderId={callBackOrderInfo?.id} />
<ShopCart intoStatus='again' show={showCart} onClose={() => setShowCart(false)} default_sale_mode={callBackOrderInfo?.sale_mode} />
<ReturnRecord show={returnRecordShow} onClose={closeReturnRecord} id={callBackOrderInfo?.id} />
<Payment onSubmitSuccess={onPaySuccess} show={payMentShow} onClose={closePayShow} orderInfo={callBackOrderInfo} />
</View>
)
}