xuan/TestEShopDist
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" /> /// <reference path="node_modules/@tarojs/plugin-platform-weapp/types/shims-weapp.d.ts" />
declare module '*.png'; declare module '*.png'
declare module '*.gif'; declare module '*.gif'
declare module '*.jpg'; declare module '*.jpg'
declare module '*.jpeg'; declare module '*.jpeg'
declare module '*.svg'; declare module '*.svg'
declare module '*.css'; declare module '*.css'
declare module '*.less'; declare module '*.less'
declare module '*.scss'; declare module '*.scss'
declare module '*.sass'; declare module '*.sass'
declare module '*.styl'; declare module '*.styl'
declare namespace NodeJS { declare namespace NodeJS {
interface ProcessEnv { interface ProcessEnv {

17
src/api/onlinePay.ts
View File

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

14
src/common/constant.js
View File

@ -21,19 +21,23 @@ export const UPLOAD_CDN_URL = `https://v0.api.upyun.com/`
// cdn // 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://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 //在线支付图片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://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 //appid
export const WX_APPID = 'wx68d92d7cbf0b6963' export const WX_APPID = 'wx68d92d7cbf0b6963'
//场景值 //场景值
export const SCENE = { export const SCENE = {
SearchScene : 0 //商城面料搜索 SearchScene: 0, //商城面料搜索
} }

139
src/common/util.ts
View File

@ -1,56 +1,60 @@
import { formatImgUrl } from "./fotmat"; import { formatImgUrl } from './fotmat'
import { analysisShortCodeApi } from "./shortCode"; import { analysisShortCodeApi } from './shortCode'
import Taro from '@tarojs/taro' import Taro from '@tarojs/taro'
/** /**
* 防抖 * 防抖
* @param {*} fn * @param {*} fn
* @param {*} delay * @param {*} delay
* @returns * @returns
*/ */
export const debounce = (fn, delay) => { export const debounce = (fn, delay) => {
let timer:any = null; let timer: any = null
return (...param) => { return (...param) => {
if (timer) clearTimeout(timer); if (timer) clearTimeout(timer)
timer = setTimeout(() => { timer = setTimeout(() => {
fn(...param); fn(...param)
}, delay); }, delay)
}; }
} }
/** /**
* 节流 * 节流
* @param {*} fn * @param {*} fn
* @param {*} delay * @param {*} delay
* @returns * @returns
*/ */
export const throttle = (fn, delay) => { export const throttle = (fn, delay) => {
let pre = 0; let pre = 0
return (...params) => { return (...params) => {
let now = new Date().getTime(); let now = new Date().getTime()
if (now - pre > delay) { if (now - pre > delay) {
fn(...params); fn(...params)
pre = now; pre = now
} }
}; }
} }
/** /**
* 批量过滤对象值为空的属性 * 批量过滤对象值为空的属性
* @param {Object} val 需要过滤的对象 * @param {Object} val 需要过滤的对象
* @param {Array} arr 排除过滤的属性 * @param {Array} arr 排除过滤的属性
* @returns * @returns
*/ */
export const getFilterData = (val = {}, arr: string[] = []) => { export const getFilterData = (val = {}, arr: string[] = []) => {
let res = {} let res = {}
for(let key in val) { for (let key in val) {
if(val[key]!==undefined&&val[key]!==null&&val[key]!==''&&(!arr.includes(key))){ if (
if(typeof val[key] == 'number'){ val[key] !== undefined &&
if(!isNaN(val[key])) { val[key] !== null &&
val[key] !== '' &&
!arr.includes(key)
) {
if (typeof val[key] == 'number') {
if (!isNaN(val[key])) {
res[key] = val[key] res[key] = val[key]
} }
} else{ } else {
res[key] = val[key] res[key] = val[key]
} }
} }
@ -59,23 +63,23 @@ export const throttle = (fn, delay) => {
} }
/** /**
* 对象深拷贝 * 对象深拷贝
* @param {*} object * @param {*} object
* @returns * @returns
*/ */
export const copyObject = (object)=>{ export const copyObject = (object) => {
if(object.constructor==Object){ if (object.constructor == Object) {
let keys = Object.keys(object); let keys = Object.keys(object)
let newObject = {}; let newObject = {}
keys.map(key=>{ keys.map((key) => {
newObject[key]= copyObject(object[key]); newObject[key] = copyObject(object[key])
}) })
return newObject; return newObject
}else if(object.constructor==Array){ } else if (object.constructor == Array) {
return object.map(item=>{ return object.map((item) => {
return copyObject(item); return copyObject(item)
}) })
}else{ } else {
return object; return object
} }
} }
@ -91,13 +95,21 @@ export const throttle = (fn, delay) => {
!wh400 !wh400
!w600 !w600
*/ */
export const screenshot = (url, suffix="!w200")=>{ export const screenshot = (url, suffix = '!w200') => {
return url+suffix; return url + suffix
} }
//获取数据加载状态 //0:数据从无到有加载数据，1，没有任何数据， 2：下拉加载，3：下拉没有数据 //获取数据加载状态 //0:数据从无到有加载数据，1，没有任何数据， 2：下拉加载，3：下拉没有数据
export const dataLoadingStatus = ({list = [], total = 0, status = false}:{list:any[], total:number, status:true|false}) => { export const dataLoadingStatus = ({
if(list.length == 0 && status) { list = [],
total = 0,
status = false,
}: {
list: any[]
total: number
status: true | false
}) => {
if (list.length == 0 && status) {
return 0 return 0
} else if (list.length == 0 && !status) { } else if (list.length == 0 && !status) {
return 1 return 1
@ -106,30 +118,39 @@ export const throttle = (fn, delay) => {
} else { } else {
return 3 return 3
} }
} }
//全局分享监听 //全局分享监听
export const shareShop = () => { export const shareShop = () => {
const page = Taro.getCurrentInstance().page const page = Taro.getCurrentInstance().page
//当有分享参数时，绑定上下级 //当有分享参数时，绑定上下级
if(page && page.options?.share) { if (page && page.options?.share) {
analysisShortCodeApi(page.options.share) analysisShortCodeApi(page.options.share)
} }
if(page && page.onShareAppMessage) { if (page && page.onShareAppMessage) {
page.onShareAppMessage = (res) => { page.onShareAppMessage = (res) => {
let path = '' let path = ''
let title = '' let title = ''
let imageUrl = '' let imageUrl = ''
let sortCode = Taro.getStorageSync('sort_code')?JSON.parse(Taro.getStorageSync('sort_code')):'' let sortCode = Taro.getStorageSync('sort_code')
let pageInfo:any = page ? JSON.parse(Taro.getStorageSync('sort_code'))
if(res.from === 'button') { : ''
let pageInfo: any = page
//商品详情分享
if (pageInfo.route === 'pages/details/index') {
path = `/pages/details/index?share=${sortCode.shareShortDetail.code}` path = `/pages/details/index?share=${sortCode.shareShortDetail.code}`
title = sortCode.shareShortDetail.title title = sortCode.shareShortDetail.title
imageUrl = sortCode.shareShortDetail.img imageUrl = sortCode.shareShortDetail.img
} else { } 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 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 { return {
title, 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" interface Params {
import { ReactNode, useEffect, useMemo, useRef, useState } from "react" children?: ReactNode
import { dataLoadingStatus, getFilterData } from "@/common/util"; query?: object
import { alert, isEmptyObject } from "@/common/common"; 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)=>{ export default (props: Params) => {
const { query={} } = props; const { query = {} } = props
useEffect(()=>{ useEffect(() => {
refreshDataRef.current = refreshData; refreshDataRef.current = refreshData
dataRef.current = data; dataRef.current = data
getData({moreStatus: true},{moreStatus: true}); getData({ moreStatus: true }, { moreStatus: true })
}, []) }, [])
useEffect(()=>{ useEffect(() => {
if(!isEmptyObject(query)){ if (!isEmptyObject(query)) {
setData({list: [],total: 0}); setData({ list: [], total: 0 })
getData({moreStatus: true},{moreStatus: true}); getData({ moreStatus: true }, { moreStatus: true })
} }
},[query]) }, [query])
const getData = async (startStatus, endStatus)=>{ const getData = async (startStatus, endStatus) => {
const tRefreshDataRef = refreshDataRef.current as any; const tRefreshDataRef = refreshDataRef.current as any
setRefreshData({ setRefreshData({
...tRefreshDataRef, ...tRefreshDataRef,
...startStatus, ...startStatus,
loading: true loading: true,
}) })
const result = await props.fetchData({ const result = await props.fetchData({
...query, ...query,
page: tRefreshDataRef.page, page: tRefreshDataRef.page,
size: tRefreshDataRef.size, size: tRefreshDataRef.size,
}); })
if(result.success){ if (result.success) {
// 返回数据 // 返回数据
props.change&&props.change(result); props.change && props.change(result)
if(result.data.total<=0){ if (result.data.total <= 0) {
setRefreshData({ setRefreshData({
...tRefreshDataRef, ...tRefreshDataRef,
...endStatus, ...endStatus,
loading: false loading: false,
}) })
}else{ } else {
setData({ setData({
list: result.data.list, list: result.data.list,
// list: tRefreshDataRef.page>1?(dataRef.current as any).list.concat(result.data.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({ setRefreshData({
...tRefreshDataRef, ...tRefreshDataRef,
refreshStatus: false, refreshStatus: false,
moreStatus: false, moreStatus: false,
loading: false loading: false,
}) })
} }
}else{ } else {
alert.none(result.msg); alert.none(result.msg)
setRefreshData({ setRefreshData({
...tRefreshDataRef, ...tRefreshDataRef,
refreshStatus: false, refreshStatus: false,
moreStatus: true, moreStatus: true,
loading: false loading: false,
}) })
} }
} }
// 加载刷新数据 // 加载刷新数据
const [refreshData, setRefreshData] = useState({ const [refreshData, setRefreshData] = useState({
@ -74,52 +73,59 @@ export default (props: Params)=>{
moreStatus: false, moreStatus: false,
page: 1, page: 1,
size: 10, size: 10,
loading: false loading: false,
}) })
const refreshDataRef = useRef({}); const refreshDataRef = useRef({})
// 渲染（数据） // 渲染（数据）
const [data, setData] = useState({ const [data, setData] = useState({
list: [], list: [],
total: 0 total: 0,
}); })
const dataRef = useRef({}); const dataRef = useRef({})
// 下拉刷新 // 下拉刷新
const handleRefresh = async ()=>{ const handleRefresh = async () => {
let tRefreshData = refreshDataRef.current as any; let tRefreshData = refreshDataRef.current as any
setRefreshData({ setRefreshData({
...tRefreshData, ...tRefreshData,
page: 1, page: 1,
size: 10, size: 10,
}) })
getData({refreshStatus: true,moreStatus: false},{refreshStatus: false,moreStatus: true}); getData({ refreshStatus: true, moreStatus: false }, { refreshStatus: false, moreStatus: true })
} }
// 加载更多 // 加载更多
const handleMoreLoad = async ()=>{ const handleMoreLoad = async () => {
let t = (dataRef.current as any); let t = dataRef.current as any
let tRefreshData = refreshDataRef.current as any; let tRefreshData = refreshDataRef.current as any
if(t.list.length<t.total){ if (t.list.length < t.total) {
setRefreshData({ setRefreshData({
...tRefreshData, ...tRefreshData,
page: ++tRefreshData.page, page: ++tRefreshData.page,
size: ++tRefreshData.page*tRefreshData.size, size: ++tRefreshData.page * tRefreshData.size,
}) })
getData({ getData(
moreStatus: true {
},{ moreStatus: true,
moreStatus: true },
}); {
moreStatus: true,
},
)
} }
} }
//数据加载状态 //数据加载状态
const statusMore = useMemo(() => { 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]) }, [refreshData.loading])
return ( return (
<InfiniteScroll refresherEnabled={true} refresherTriggered={refreshData.refreshStatus} moreStatus={refreshData.moreStatus} <InfiniteScroll
selfOnRefresherRefresh={handleRefresh} selfonScrollToLower={handleMoreLoad} statusMore={statusMore}> refresherEnabled={true}
{props.children} refresherTriggered={refreshData.refreshStatus}
moreStatus={refreshData.moreStatus}
selfOnRefresherRefresh={handleRefresh}
selfonScrollToLower={handleMoreLoad}
statusMore={statusMore}>
{props.children}
</InfiniteScroll> </InfiniteScroll>
) )
} }

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

@ -1,53 +1,50 @@
import { DelFavoriteProductApi, DetailFavoriteProductApi, MoveFavoriteProductApi } from "@/api/favorite"; import { DelFavoriteProductApi, DetailFavoriteProductApi, MoveFavoriteProductApi } from '@/api/favorite'
import { alert } from "@/common/common"; import { alert } from '@/common/common'
import { getFilterData } from "@/common/util"; import { getFilterData } from '@/common/util'
import Product from "../components/product"; import Product from '../components/product'
import Search from "@/components/search" import Search from '@/components/search'
import { Text, View } from "@tarojs/components" import { Text, View } from '@tarojs/components'
import Taro, { useRouter } from "@tarojs/taro"; import Taro, { useRouter } from '@tarojs/taro'
import classnames from "classnames"; import classnames from 'classnames'
import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import styles from './index.module.scss' import styles from './index.module.scss'
import MCheckbox from "@/components/checkbox"; import MCheckbox from '@/components/checkbox'
import AddCollection from "@/components/addCollection"; import AddCollection from '@/components/addCollection'
export default () => { export default () => {
const router = useRouter() const router = useRouter()
//获取收藏夹面料 //获取收藏夹面料
const {fetchData: fetchDataDetailFavoriteProduct} = DetailFavoriteProductApi() const { fetchData: fetchDataDetailFavoriteProduct } = DetailFavoriteProductApi()
const [colorInfo, setColorInfo] = useState<any>({}) const [colorInfo, setColorInfo] = useState<any>({})
const getFavoriteInfo = async () => { const getFavoriteInfo = async () => {
let res = await fetchDataDetailFavoriteProduct(searchData) let res = await fetchDataDetailFavoriteProduct(searchData)
if(res.success) { if (res.success) {
Taro.setNavigationBarTitle({ Taro.setNavigationBarTitle({
title: res.data.name title: res.data.name,
}) })
setColorInfo(res.data) 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) => { const onSearch = useCallback((e) => {
setSearchData((val) => ({...val, code_or_name: e})) setSearchData((val) => ({ ...val, code_or_name: e }))
}, []) }, [])
useEffect(() => { useEffect(() => {
let id = router.params.id || 0 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(() => { useEffect(() => {
if(searchData.id) getFavoriteInfo() if (searchData.id) getFavoriteInfo()
}, [searchData]) }, [searchData])
const productList = useMemo(() => { const productList = useMemo(() => {
return colorInfo.product_color_list return colorInfo.product_color_list
}, [colorInfo]) }, [colorInfo])
//获取选中的id //获取选中的id
const [ids, setIds] = useState<number[]>([]) const [ids, setIds] = useState<number[]>([])
const getSelectIds = useCallback((val) => { const getSelectIds = useCallback((val) => {
@ -65,13 +62,13 @@ export default () => {
setSelectStatus(3) setSelectStatus(3)
}, []) }, [])
const [selectStatus, setSelectStatus] = useState<1|2|3>(3) const [selectStatus, setSelectStatus] = useState<1 | 2 | 3>(3)
useEffect(() => { useEffect(() => {
if(colorInfo.product_color_list?.length) { if (colorInfo.product_color_list?.length) {
if(ids.length == colorInfo.product_color_list.length) { if (ids.length == colorInfo.product_color_list.length) {
setSelectStatus(1) setSelectStatus(1)
setAllSelectStatus(true) 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) setSelectStatus(2)
setAllSelectStatus(false) setAllSelectStatus(false)
} else { } else {
@ -79,8 +76,7 @@ export default () => {
setAllSelectStatus(false) setAllSelectStatus(false)
} }
} }
}, [ids, colorInfo]) }, [ids, colorInfo])
const [collectionShow, setCollectionShow] = useState(false) const [collectionShow, setCollectionShow] = useState(false)
const closeCollection = useCallback(() => { const closeCollection = useCallback(() => {
@ -88,11 +84,15 @@ export default () => {
}, []) }, [])
//移动面料 //移动面料
const {fetchData: fetchDataMoveFavoriteProduct} = MoveFavoriteProductApi() const { fetchData: fetchDataMoveFavoriteProduct } = MoveFavoriteProductApi()
const onAdd = async (val) => { const onAdd = async (val) => {
if(ids.length == 0) return alert.none('请选择要移动面料') if (ids.length == 0) return alert.none('请选择要移动面料')
let res = await fetchDataMoveFavoriteProduct({source_favorite_id: searchData.id ,target_favorite_id: val.id, product_id:ids}) let res = await fetchDataMoveFavoriteProduct({
if(res.success) { source_favorite_id: searchData.id,
target_favorite_id: val.id,
product_id: ids,
})
if (res.success) {
getFavoriteInfo() getFavoriteInfo()
setCollectionShow(false) setCollectionShow(false)
alert.success('修改成功') alert.success('修改成功')
@ -100,43 +100,46 @@ export default () => {
} }
//取消收藏 //取消收藏
const {fetchData: delFavoriteProductFetchData} = DelFavoriteProductApi() const { fetchData: delFavoriteProductFetchData } = DelFavoriteProductApi()
const delCollectioin = async () => { const delCollectioin = async () => {
if(ids.length == 0) return alert.none('请选择要取消面料') if (ids.length == 0) return alert.none('请选择要取消面料')
let showModalRes = await Taro.showModal({ let showModalRes = await Taro.showModal({
title: '是否要取消收藏', title: '是否要取消收藏',
confirmText: '是', confirmText: '是',
cancelText: '否', cancelText: '否',
}) })
if(showModalRes.confirm) { if (showModalRes.confirm) {
let res = await delFavoriteProductFetchData({favorite_id: searchData.id, product_id:ids}) let res = await delFavoriteProductFetchData({ favorite_id: searchData.id, product_id: ids })
if(res.success) { if (res.success) {
getFavoriteInfo() getFavoriteInfo()
alert.none('已取消收藏') alert.none('已取消收藏')
} }
} }
} }
return ( return (
<View className={styles.collection_main}> <View className={styles.collection_main}>
<View className={styles.search}> <View className={styles.search}>
<Search style={{width: '100%'}} debounceTime={300} changeOnSearch={onSearch} placeholder="请输入面料关键词" /> <Search style={{ width: '100%' }} debounceTime={300} changeOnSearch={onSearch} placeholder='请输入面料关键词' />
</View> </View>
<View className={styles.operation}> <View className={styles.operation}>
<View className={styles.operation_check}> <View className={styles.operation_check}>
<MCheckbox status={allSelectStatus} onSelect={() => selectCallBack()} onClose={() => colseCallBack()}/> <MCheckbox status={allSelectStatus} onSelect={() => selectCallBack()} onClose={() => colseCallBack()} />
<Text className={styles.allSelect}>全选</Text> <Text className={styles.allSelect}>全选</Text>
</View> </View>
<View className={styles.operation_check_right}> <View className={styles.operation_check_right}>
<Text className={styles.operation_check_move} onClick={() => setCollectionShow(true)}>移动到</Text> <Text className={styles.operation_check_move} onClick={() => setCollectionShow(true)}>
<Text className={styles.operation_check_cancel} onClick={delCollectioin}>取消收藏</Text> 移动到
</View> </Text>
<Text className={styles.operation_check_cancel} onClick={delCollectioin}>
取消收藏
</Text>
</View> </View>
<View className={styles.class_list}>
<Product productList={productList} onSelectIds={getSelectIds} selectStatus={selectStatus} openCheckBox={true}/>
</View> </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> </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" export default () => {
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 ()=>{
useLogin() useLogin()
const {fetchData, state} = depositListApi(); const { fetchData, state } = depositListApi()
// 渲染（数据） // 渲染（数据）
const [data, setData] = useState({ const [data, setData] = useState({
list: [], list: [],
total: 0 total: 0,
}); })
// 数据更新 // 数据更新
const handleChange = useCallback((result)=>{ const handleChange = useCallback((result) => {
setData({ setData({
list: result.data.list, list: result.data.list,
total: result.data.total total: result.data.total,
}) })
}, []) }, [])
return ( return (
<View className="credit-used"> <View className='credit-used'>
<InfiniteScrollPaging fetchData={fetchData} change={handleChange}> <InfiniteScrollPaging fetchData={fetchData} change={handleChange}>
{ {data.list?.map((item, index) => {
data.list?.map((item,index)=>{ let res: any = item
return ( return (
<View key={index} className="credit-used-list"> res.amount_received_this_time != 0 && (
<View className="credit-used-list-left"> <View key={index} className='credit-used-list'>
<View className="credit-used-list-type">{(item as any).type_name}</View> <View className='credit-used-list-left'>
<View className="credit-used-list-date">{formatDateTime((item as any).create_time)}</View> <View className='credit-used-list-type'>{res.type_name}</View>
<View className='credit-used-list-date'>{formatDateTime(res.create_time)}</View>
</View> </View>
<View className="credit-used-list-right"> <View className='credit-used-list-right'>
<View className="credit-used-list-right-price"> <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'}`}> <View
{[1,2,3].includes((item as any).type as never)?"+":"-"}{formatPriceDiv((item as any).amount_received_this_time)} 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>
{/* <View className="credit-used-list-orderno">处理中</View> */} {/* <View className="credit-used-list-orderno">处理中</View> */}
</View> </View>
<Text className="iconfont icon-a-moreback"></Text> <Text className='iconfont icon-a-moreback'></Text>
</View> </View>
</View> </View>
) )
}) )
} })}
{/* {data.length>0&&<View className="credit-used-list"></View>} */} {/* {data.length>0&&<View className="credit-used-list"></View>} */}
<View className="credit-used-list"></View> <View className='credit-used-list'></View>
</InfiniteScrollPaging> </InfiniteScrollPaging>
</View> </View>
) )

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

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

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

@ -1,133 +1,132 @@
.order_main{ .order_main {
min-height: 100%; min-height: 100%;
background-color:$color_bg_one; background-color: $color_bg_one;
padding: 20px; padding: 20px;
padding-bottom: 190px; padding-bottom: 190px;
box-sizing: border-box;
.order_title {
display: flex;
align-items: center;
padding: 20px 30px;
box-sizing: border-box; box-sizing: border-box;
background-color: #fff;
.order_title{ height: 116px;
display: flex; border-radius: 20px;
align-items: center; margin-top: 20px;
padding: 20px 30px; text {
box-sizing: border-box; flex: 1;
background-color: #fff; font-size: $font_size;
height: 116px; font-weight: 700;
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;
}
} }
.order_desc{ .order_status {
display: flex; background-color: #f0f0f0;
align-items: center; width: 148px;
background-color: #fff; height: 55px;
padding: 20px; color: $color_font_three;
min-height: 116px; text-align: center;
border-radius: 20px; line-height: 55px;
margin-top: 20px; font-size: $font_size_medium;
box-sizing: border-box; border-radius: 30px;
.order_desc_con{ &:nth-last-child(1) {
width: 150px; margin-left: 20px;
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{ .order_status_selected {
display: flex; color: $color_main;
position: fixed; border: 1px solid $color_main;
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; .order_desc {
margin-top: 20px; display: flex;
border-radius: 20px; align-items: center;
padding: 20px; background-color: #fff;
.order_info_title{ padding: 20px;
font-size: $font_size; min-height: 116px;
font-weight: 700; border-radius: 20px;
margin-bottom: 20px; margin-top: 20px;
box-sizing: border-box;
} .order_desc_con {
.order_num{ width: 150px;
display: flex; font-size: $font_size;
justify-content: space-between; font-weight: 700;
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_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 { SaleOrderPreViewApi, SaleOrderApi } from '@/api/order'
import { formatPriceDiv } from "@/common/fotmat"; import { formatPriceDiv } from '@/common/fotmat'
import Popup from "@/components/popup"; import Popup from '@/components/popup'
import { View } from "@tarojs/components" import { View } from '@tarojs/components'
import Taro, { useDidShow, usePullDownRefresh} from "@tarojs/taro"; import Taro, { useDidShow, usePullDownRefresh } from '@tarojs/taro'
import classnames from "classnames"; import classnames from 'classnames'
import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import KindList from "./components/kindList"; import KindList from './components/kindList'
import Remark from "./components/remark"; import Remark from './components/remark'
import styles from './comfirm.module.scss' import styles from './comfirm.module.scss'
import { getParam } from "@/common/system"; import { getParam } from '@/common/system'
import { alert, goLink } from "@/common/common"; import { alert, goLink } from '@/common/common'
import SubmitOrderBtn from "./components/submitOrderBtn"; import SubmitOrderBtn from './components/submitOrderBtn'
import AddressInfoDetail from "./components/addressInfoDetail"; import AddressInfoDetail from './components/addressInfoDetail'
import { SubscriptionMessageApi } from "@/api/user"; import { SubscriptionMessageApi } from '@/api/user'
import { SUBSCRIPTION_MESSAGE_SCENE } from "@/common/enum"; import { SUBSCRIPTION_MESSAGE_SCENE } from '@/common/enum'
import { UseSubscriptionMessage } from "@/use/useCommon"; import { UseSubscriptionMessage } from '@/use/useCommon'
import { throttle } from "@/common/util"; 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>()
//获取购物车传过来的id export default () => {
type orderPreParam = {shopping_cart_product_color_list:{shopping_cart_product_color_id:number}[], sale_mode:number} const [showDesc, setShowDesc] = useState(false)
const param = getParam() //下单信息
const idsAndSaleModel = useRef<orderPreParam>({shopping_cart_product_color_list:[], sale_mode:0}) type OrderParams = { address_id?: number; remark?: string; sale_mode?: number; shipment_mode?: number; list?: any[] }
useDidShow(async () => { const [submitOrderData, setSubmitOrderData] = useState<OrderParams>()
idsAndSaleModel.current = {shopping_cart_product_color_list:[], sale_mode:0} //初始化
idsAndSaleModel.current.sale_mode = Number(param?.sale_mode) //获取购物车传过来的id
param?.ids?.split('-')?.map(item => { type orderPreParam = {
return idsAndSaleModel.current.shopping_cart_product_color_list?.push({ shopping_cart_product_color_list: { shopping_cart_product_color_id: number }[]
shopping_cart_product_color_id: Number(item) sale_mode: number
}) }
}) const param = getParam()
getSaleOrderPreView() const idsAndSaleModel = useRef<orderPreParam>({ shopping_cart_product_color_list: [], sale_mode: 0 })
setSubmitOrderData((val) => ({...val, sale_mode:param?.sale_mode})) 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 [preViewOrder, setPreViewOrder] = useState<any>() //获取到的原始数据
const {fetchData} = SaleOrderPreViewApi() const { fetchData } = SaleOrderPreViewApi()
const getSaleOrderPreView = async () => { const getSaleOrderPreView = async () => {
if(idsAndSaleModel.current.shopping_cart_product_color_list?.length > 0) { if (idsAndSaleModel.current.shopping_cart_product_color_list?.length > 0) {
let res = await fetchData(idsAndSaleModel.current) let res = await fetchData(idsAndSaleModel.current)
setPreViewOrder(res.data) setPreViewOrder(res.data)
}
} }
}
//监听获取到的数据 //监听获取到的数据
useEffect(() => { useEffect(() => {
if(preViewOrder) { if (preViewOrder) {
formatData() formatData()
getDataList() getDataList()
setSubmitOrderData((val) => ({...val, address_id:preViewOrder.default_address.id, shipment_mode:preViewOrder.shipment_mode||2})) setSubmitOrderData((val) => ({
} ...val,
}, [preViewOrder]) address_id: preViewOrder.default_address.id,
shipment_mode: preViewOrder.shipment_mode || 2,
//格式化数据格式 }))
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(() => { }, [preViewOrder])
return formatPreViewOrder
}, [formatPreViewOrder])
//格式化初始地址 //格式化数据格式
const defaultAddress = useMemo(() => { const [formatPreViewOrder, setFormatPreViewOrder] = useState<any>() //格式化后的数据
const address = preViewOrder?.default_address const formatData = () => {
return { setFormatPreViewOrder({
province_name: address?.province_name, estimate_amount: preViewOrder.estimate_amount, //预估金额
city_name: address?.city_name, sale_mode: preViewOrder.sale_mode,
district_name: address?.district_name, sale_mode_name: preViewOrder.sale_mode_name,
address_detail: address?.address_detail, total_colors: preViewOrder.total_colors, //总颜色数量
id: address?.id, total_number: preViewOrder.total_number, //总数量
target_user_name: address?.name, total_fabrics: preViewOrder.total_fabrics, //面料数量
target_user_phone: address?.phone, unit: preViewOrder.sale_mode == 0 ? '条' : 'm', //单位
shipment_mode: address?.shipment_mode, list: preViewOrder.product_list,
take_goods_address: preViewOrder?.take_goods_address, total_should_collect_money: preViewOrder.total_should_collect_money, //应收金额
take_goods_phone: preViewOrder?.take_goods_phone, total_sale_price: preViewOrder.total_sale_price, //合计金额
}
}, [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 formatPreViewOrderMemo = useMemo(() => {
return formatPreViewOrder
}, [formatPreViewOrder])
return ( //格式化初始地址
<View className={styles.order_main}> const defaultAddress = useMemo(() => {
<AddressInfoDetail orderInfo={defaultAddress} onSelect={getAddress} onChangeShipmentMode={selectShipmentMode} status={1}/> const address = preViewOrder?.default_address
<KindList order={formatPreViewOrderMemo} comfirm={true}/> return {
<View className={styles.order_desc} onClick={() => setShowDesc(true)}> province_name: address?.province_name,
<View className={styles.order_desc_con}>订单备注</View> city_name: address?.city_name,
{ district_name: address?.district_name,
submitOrderData?.remark&&<View className={styles.order_desc_text}>{submitOrderData?.remark}</View>|| address_detail: address?.address_detail,
<View className={styles.order_desc_text_hint}>填写备注</View> id: address?.id,
} target_user_name: address?.name,
<View className={classnames(styles.miconfont, 'iconfont icon-a-moreback')}></View> target_user_phone: address?.phone,
</View> shipment_mode: address?.shipment_mode,
<View className={styles.submit_order}> take_goods_address: preViewOrder?.take_goods_address,
<View className={styles.submit_order_number}> take_goods_phone: preViewOrder?.take_goods_phone,
<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> }, [preViewOrder])
</View>
<View className={classnames(styles.order_btn, btnStatus&&styles.ok_order_btn)} onClick={() => submitOrderEven()}>提交订单</View> //获取提交格式数据列表
</View> const getDataList = () => {
<Popup show={showDesc} showTitle={false} onClose={() => setShowDesc(false)} > let list: { shopping_cart_product_color_id: number }[] = []
<Remark defaultValue={submitOrderData?.remark} onSave={(e) => getRemark(e)}/> preViewOrder.product_list?.map((item) => {
</Popup> item.product_colors?.map((colorItem) => {
<View className="common_safe_area_y"></View> 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>
) <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 { ORDER_STATUS } from '@/common/enum'
import { formatHashTag, formatPriceDiv, formatWeightDiv } from "@/common/fotmat" import { formatHashTag, formatPriceDiv, formatWeightDiv } from '@/common/fotmat'
import EstimatedAmount from "@/components/estimatedAmount" import EstimatedAmount from '@/components/estimatedAmount'
import LabAndImg from "@/components/LabAndImg" import LabAndImg from '@/components/LabAndImg'
import { Text, View } from "@tarojs/components" import { Text, View } from '@tarojs/components'
import { memo, useCallback, useMemo, useState } from "react" import { memo, useCallback, useMemo, useState } from 'react'
import styles from './index.module.scss' import styles from './index.module.scss'
type OrderParam = { type OrderParam = {
estimate_amount: number, //预估金额 estimate_amount: number //预估金额
list: any[], list: any[]
sale_mode: number, sale_mode: number
sale_mode_name: string, sale_mode_name: string
unit: string, unit: string
total_colors: number, total_colors: number
total_fabrics: number, total_fabrics: number
total_number: number, total_number: number
status: number, //订单状态 status: number //订单状态
total_sale_price: number, //合计金额 total_sale_price: number //合计金额
total_weight_error_discount: number, //空差优惠 total_weight_error_discount: number //空差优惠
the_previous_status: number, //取消订单时的订单状态 the_previous_status: number //取消订单时的订单状态
actual_amount: number, //实付金额 actual_amount: number //实付金额
wait_pay_amount: number, //待付金额 wait_pay_amount: number //待付金额
refund_amount: number //退款金额 refund_amount: number //退款金额
} }
type Param = { type Param = {
order: OrderParam, order: OrderParam
comfirm?: boolean //是否是确认订单页面使用 comfirm?: boolean //是否是确认订单页面使用
} }
export default memo(({order, comfirm = false}:Param) => { export default memo(({ order, comfirm = false }: Param) => {
const {
const { SaleOrderStatusBooking, // 待接单
SaleOrderStatusBooking, // 待接单 SaleOrderStatusArranging, // 配布中
SaleOrderStatusArranging, // 配布中 SaleOrderStatusArranged, // 已配布
SaleOrderStatusArranged, // 已配布 SaleOrderStatusWaitingPayment, // 待付款
SaleOrderStatusWaitingPayment, // 待付款 SaleOrderStatusWaitingDelivery, // 待发货
SaleOrderStatusWaitingDelivery, // 待发货 SaleOrderStatusWaitingReceipt, // 待收货
SaleOrderStatusWaitingReceipt, // 待收货 SaleOrderStatusAlreadyReceipt, // 已收货
SaleOrderStatusAlreadyReceipt, // 已收货 SaleOrderStatusComplete, // 已完成
SaleOrderStatusComplete, // 已完成 SaleOrderStatusRefund, // 已退款
SaleOrderStatusRefund, // 已退款 SaleOrderStatusCancel, // 已取消
SaleOrderStatusCancel, // 已取消 SaleorderstatusWaitingPrePayment, // 预付款
SaleorderstatusWaitingPrePayment, // 预付款 SaleOrderStatusTaking, //提货
SaleOrderStatusTaking //提货 } = ORDER_STATUS
} = ORDER_STATUS
//注册金额 //注册金额
type orderPriceListParams = {id: number, label: string, field: string, message: string, validatarFunc: (val: typeof order) => any} type orderPriceListParams = {
const priceList:orderPriceListParams[] = [ id: number
{ label: string
id:1, field: string
label:'预估金额', message: string
field: 'estimate_amount', validatarFunc: (val: typeof order) => any
message: '预估金额按生产商定义的标准匹重计算，仅供参考。详细交易金额以出单为准！', }
validatarFunc: (order) => { const priceList: orderPriceListParams[] = [
return order['estimate_amount'] > 0 && order['total_sale_price'] <= 0 {
} id: 1,
}, label: '预估金额',
{ field: 'estimate_amount',
id:2, message: '预估金额按生产商定义的标准匹重计算，仅供参考。详细交易金额以出单为准！',
label:'合计金额', validatarFunc: (order) => {
field: 'total_sale_price', return order['estimate_amount'] > 0 && order['total_sale_price'] <= 0
message: '包含空差的货款金额', },
validatarFunc: (order) => { },
return order['total_sale_price'] > 0 {
} id: 2,
}, label: '合计金额',
{ field: 'total_sale_price',
id:3, message: '包含空差的货款金额',
label:'空差优惠', validatarFunc: (order) => {
field: 'total_weight_error_discount', return order['total_sale_price'] > 0
message: '扣除空差金额', },
validatarFunc: (order) => { },
return order['total_weight_error_discount'] > 0 {
} id: 3,
}, label: '空差优惠',
{ field: 'total_weight_error_discount',
id:5, message: '扣除空差金额',
label:'实付金额', validatarFunc: (order) => {
field: 'actual_amount', return order['total_weight_error_discount'] > 0
message: '本单实付总金额', },
validatarFunc: (order) => { },
return order['actual_amount'] > 0 {
} id: 5,
}, label: '实付金额',
{ field: 'actual_amount',
id:4, message: '本单实付总金额',
label:'待付金额', validatarFunc: (order) => {
field: 'wait_pay_amount', return order['actual_amount'] > 0
message: '扣除空差后的货款金额', },
validatarFunc: (order) => { },
return order['wait_pay_amount'] > 0 {
} id: 4,
}, label: '待付金额',
{ field: 'wait_pay_amount',
id:6, message: '扣除空差后的货款金额',
label:'退款金额', validatarFunc: (order) => {
field: 'refund_amount', return order['wait_pay_amount'] > 0
message: '已退款金额', },
validatarFunc: (order) => { },
return order['refund_amount'] > 0 {
} id: 6,
}, label: '退款金额',
field: 'refund_amount',
] message: '已退款金额',
validatarFunc: (order) => {
return order['refund_amount'] > 0
},
},
]
//订单流程金额展示 //订单流程金额展示
const priceConDom = useMemo(() => { const priceConDom = useMemo(() => {
if(!order) return 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])
return ( return (
<> <>
<View className={styles.orders_list_title}>{numText}</View> {priceList.map((item) => {
<View className={styles.orders_list_con}> return <>{item.validatarFunc(order) && <EstimatedAmount key={item.id} number={order[item.field]} title={item.label} messageTitle={item.message} />}</>
{ })}
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>
</>
) )
}) }, [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 { Image, ScrollView, Text, View } from '@tarojs/components'
import { memo, useEffect, useRef, useState } from "react"; import { memo, useEffect, useRef, useState } from 'react'
import classnames from "classnames"; import classnames from 'classnames'
import styles from './index.module.scss' import styles from './index.module.scss'
import Popup from "@/components/popup"; import Popup from '@/components/popup'
import Taro from "@tarojs/taro"; import Taro from '@tarojs/taro'
import { alert } from "@/common/common"; import { alert } from '@/common/common'
import { formatDateTime, formatHashTag, formatImgUrl, formatPriceDiv, formatWeightDiv } from "@/common/fotmat"; import { formatDateTime, formatHashTag, formatImgUrl, formatPriceDiv, formatWeightDiv } from '@/common/fotmat'
import useCheckAuthorize from "@/use/useCheckAuthorize"; import useCheckAuthorize from '@/use/useCheckAuthorize'
import { GetPayCode } from "@/api/onlinePay"; import { GetPayCode } from '@/api/onlinePay'
import LoadingCard from "@/components/loadingCard"; import LoadingCard from '@/components/loadingCard'
type Param = { type Param = {
show?: true|false, show?: true | false
onClose?: () => void, onClose?: () => void
company?: string, company?: string
qrcode?: string, qrcode?: string
orderInfo?: any, orderInfo?: any
} }
type ListParam = { type ListParam = {
product_code: string, product_code: string
product_name: string, product_name: string
product_color_code: string, product_color_code: string
product_color_name: string, product_color_name: string
num: string, num: string
weight: string, weight: string
length: string, length: string
sale_price: string, sale_price: string
total_price: string total_price: string
weight_error: string
} }
export default memo(({show = true, onClose, company, orderInfo}:Param) => { export default memo(({ show = true, onClose, company, orderInfo }: Param) => {
const [detail, setDetail] = useState<any>() 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, //是否显示码单
estimate_amount: formatPriceDiv(orderInfo.estimate_amount).toString(), useEffect(() => {
show_estimate_amount: orderInfo.estimate_amount > 0 && orderInfo.total_sale_price <= 0, if (orderInfo) {
total_sale_price: formatPriceDiv(orderInfo.total_sale_price).toString(), let lists: ListParam[] = []
show_total_sale_price: orderInfo.total_sale_price > 0, orderInfo.product_list?.map((pitem) => {
total_weight_error_discount: formatPriceDiv(orderInfo.total_weight_error_discount).toString(), pitem?.product_colors?.map((citem) => {
show_total_weight_error_discount: orderInfo.total_weight_error_discount > 0, lists.push({
actual_amount: formatPriceDiv(orderInfo.actual_amount).toString(), product_code: formatHashTag(pitem.code, '', 'name')!,
show_actual_amount: orderInfo.actual_amount > 0, product_name: pitem.name,
wait_pay_amount: formatPriceDiv(orderInfo.wait_pay_amount).toString(), product_color_code: formatHashTag(citem.code)!,
show_wait_pay_amount: orderInfo.wait_pay_amount > 0, product_color_name: citem.name,
show_barcode: true num: citem.roll.toString(),
})) length: (citem.length / 100).toString(),
} weight: formatWeightDiv(citem.actual_weight || citem.estimate_weight).toString(),
}, [orderInfo]) sale_price: formatPriceDiv(citem.sale_price).toString(),
total_price: formatPriceDiv(citem.estimate_amount).toString(),
//收货地址 weight_error: formatWeightDiv(citem.weight_error).toString(),
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 { setDetail(() => ({
return addressInfo?.take_goods_address 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) => { const address = (addressInfo) => {
return addressInfo?.shipment_mode == 2? orderInfo.target_user_name: '' 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) => { const userName = (addressInfo) => {
return addressInfo?.shipment_mode == 2? orderInfo.target_user_phone : orderInfo.take_goods_phone return addressInfo?.shipment_mode == 2 ? orderInfo.target_user_name : ''
} }
//获取支付二维码 //手机号
const [payCodeImage, setPayCodeImage] = useState<string>('') const userPhone = (addressInfo) => {
const fileData = useRef({ return addressInfo?.shipment_mode == 2 ? orderInfo.target_user_phone : orderInfo.take_goods_phone
filePath: '', }
base64: ''
//获取支付二维码
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 () => { useEffect(() => {
let res = await fetchData(detail) if (show) getCore()
const base64 = res.data.base64 }, [show])
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])
//检查是否开启保存图片权限 //检查是否开启保存图片权限
const {check} = useCheckAuthorize({scope:'scope.writePhotosAlbum', msg:'您没授权，无法保存图片'}) const { check } = useCheckAuthorize({
const saveImageCheck = async () => { scope: 'scope.writePhotosAlbum',
const res = await check() msg: '您没授权，无法保存图片',
res&&saveImage() })
} const saveImageCheck = async () => {
const res = await check()
res && saveImage()
}
//保存图片 //保存图片
const saveImage = () => { const saveImage = () => {
alert.loading('正在保存图片') alert.loading('正在保存图片')
Taro.saveImageToPhotosAlbum({ Taro.saveImageToPhotosAlbum({
filePath: fileData.current.filePath, filePath: fileData.current.filePath,
success: function (res) { success: function (res) {
alert.success('图片保存成功') alert.success('图片保存成功')
}, },
fail: function (err) { fail: function (err) {
console.log('err::', err) console.log('err::', err)
} },
}) })
} }
//预览图片 //预览图片
const showImage = () => { const showImage = () => {
console.log('fileData.current.filePath::', fileData.current.filePath) console.log('fileData.current.filePath::', fileData.current.filePath)
Taro.previewImage({ Taro.previewImage({
current: fileData.current.filePath, // 当前显示 current: fileData.current.filePath, // 当前显示
urls: [fileData.current.filePath] // 需要预览的图片http链接列表 urls: [fileData.current.filePath], // 需要预览的图片http链接列表
}) })
} }
//复制功能 //复制功能
return ( return (
<View className={styles.scanPay_main}> <View className={styles.scanPay_main}>
<Popup show={show} showTitle={false} onClose={onClose}> <Popup show={show} showTitle={false} onClose={onClose}>
<View className={styles.scanPay_con}> <View className={styles.scanPay_con}>
<View className={classnames('iconfont icon-a-moreback', styles.miconfont_title)} onClick={onClose}></View> <View className={classnames('iconfont icon-a-moreback', styles.miconfont_title)} onClick={onClose}></View>
<View className={styles.title}>扫码支付</View> <View className={styles.title}>扫码支付</View>
<View className={styles.desc}> <View className={styles.desc}>
<Text className={classnames(styles.miconfont, 'iconfont, icon-zhuyi')}></Text> <Text className={classnames(styles.miconfont, 'iconfont, icon-zhuyi')}></Text>
扫码支付成功后，自动更新状态 扫码支付成功后，自动更新状态
</View> </View>
<View className={styles.scanPay_list}> <View className={styles.scanPay_list}>
{(state.loading)&&<LoadingCard/>|| {(state.loading && <LoadingCard />) || (
<ScrollView scrollY className={styles.scanPay_list}> <ScrollView scrollY className={styles.scanPay_list}>
<Image mode="widthFix" src={payCodeImage} onClick={showImage}></Image> <Image mode='widthFix' src={payCodeImage} onClick={showImage}></Image>
</ScrollView>} </ScrollView>
</View> )}
<View className={styles.btns} onClick={saveImageCheck}>保存电子确认单</View> </View>
</View> <View className={styles.btns} onClick={saveImageCheck}>
</Popup> 保存电子确认单
</View>
</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 { Image, ScrollView, Text, View } from '@tarojs/components'
import { memo, useEffect, useRef, useState } from "react"; import { memo, useEffect, useRef, useState } from 'react'
import classnames from "classnames"; import classnames from 'classnames'
import styles from './index.module.scss' import styles from './index.module.scss'
import Popup from "@/components/popup"; import Popup from '@/components/popup'
import Taro from "@tarojs/taro"; import Taro from '@tarojs/taro'
import { alert } from "@/common/common"; import { alert } from '@/common/common'
import { formatDateTime, formatPriceDiv, formatRemoveHashTag, formatWeightDiv } from "@/common/fotmat"; import { formatDateTime, formatPriceDiv, formatRemoveHashTag, formatWeightDiv } from '@/common/fotmat'
import useCheckAuthorize from "@/use/useCheckAuthorize"; import useCheckAuthorize from '@/use/useCheckAuthorize'
import { GetPayCode } from "@/api/onlinePay"; import { GetPayCode } from '@/api/onlinePay'
import LoadingCard from "@/components/loadingCard"; import LoadingCard from '@/components/loadingCard'
type Param = { type Param = {
show?: true|false, show?: true | false
onClose?: () => void, onClose?: () => void
company?: string, company?: string
qrcode?: string, qrcode?: string
orderInfo?: any, orderInfo?: any
} }
type ListParam = { type ListParam = {
product_code: string, product_code: string
product_name: string, product_name: string
product_color_code: string, product_color_code: string
product_color_name: string, product_color_name: string
num: string, num: string
weight: string, weight: string
length: string, length: string
sale_price: string, sale_price: string
total_price: string, total_price: string
weight_error: string weight_error: string
} }
export default memo(({show = true, onClose, company, orderInfo}:Param) => { export default memo(({ show = true, onClose, company, orderInfo }: Param) => {
const [detail, setDetail] = useState<any>() 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,
estimate_amount: formatPriceDiv(orderInfo.estimate_amount).toString(), useEffect(() => {
show_estimate_amount: orderInfo.estimate_amount > 0 && orderInfo.total_sale_price <= 0, if (show) {
total_sale_price: formatPriceDiv(orderInfo.total_sale_price).toString(), getCore()
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
}
} }
}, [show])
//收件人 useEffect(() => {
const userName = (addressInfo) => { if (orderInfo) {
return addressInfo?.shipment_mode == 2? orderInfo.target_user_name: '' 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,
//手机号 estimate_amount: formatPriceDiv(orderInfo.estimate_amount).toString(),
const userPhone = (addressInfo) => { show_estimate_amount: orderInfo.estimate_amount > 0 && orderInfo.total_sale_price <= 0,
return addressInfo?.shipment_mode == 2? orderInfo.target_user_phone : orderInfo.take_goods_phone 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 [payCodeImage, setPayCodeImage] = useState<string>('') //收货地址
const fileData = useRef({ const address = (addressInfo) => {
filePath: '', if (addressInfo?.shipment_mode == 2) {
base64: '' 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 { check } = useCheckAuthorize({ scope: 'scope.writePhotosAlbum', msg: '您没授权，无法保存图片' })
const saveImageCheck = async () => { const saveImageCheck = async () => {
const res = await check() const res = await check()
res&&saveImage() res && saveImage()
} }
//保存图片 //保存图片
const saveImage = () => { const saveImage = () => {
alert.loading('正在保存图片') alert.loading('正在保存图片')
Taro.saveImageToPhotosAlbum({ Taro.saveImageToPhotosAlbum({
filePath: fileData.current.filePath, filePath: fileData.current.filePath,
success: function () { success: function () {
alert.success('图片保存成功') alert.success('图片保存成功')
}, },
fail: function (err) { fail: function (err) {
console.log('err::', err) console.log('err::', err)
} },
}) })
} }
//预览图片 //预览图片
const showImage = () => { const showImage = () => {
console.log('fileData.current.filePath::', fileData.current.filePath) console.log('fileData.current.filePath::', fileData.current.filePath)
Taro.previewImage({ Taro.previewImage({
current: fileData.current.filePath, // 当前显示 current: fileData.current.filePath, // 当前显示
urls: [fileData.current.filePath] // 需要预览的图片http链接列表 urls: [fileData.current.filePath], // 需要预览的图片http链接列表
}) })
} }
//复制功能 //复制功能
return ( return (
<View className={styles.scanPay_main}> <View className={styles.scanPay_main}>
<Popup show={show} showTitle={false} onClose={onClose}> <Popup show={show} showTitle={false} onClose={onClose}>
<View className={styles.scanPay_con}> <View className={styles.scanPay_con}>
<View className={classnames('iconfont icon-a-moreback', styles.miconfont_title)} onClick={onClose}></View> <View className={classnames('iconfont icon-a-moreback', styles.miconfont_title)} onClick={onClose}></View>
<View className={styles.title}>查看销售码单</View> <View className={styles.title}>查看销售码单</View>
<View className={styles.scanPay_list}> <View className={styles.scanPay_list}>
{(state.loading)&&<LoadingCard/>|| {(state.loading && <LoadingCard />) || (
<ScrollView scrollY className={styles.scanPay_list}> <ScrollView scrollY className={styles.scanPay_list}>
<Image mode="widthFix" src={payCodeImage} onClick={showImage}></Image> <Image mode='widthFix' src={payCodeImage} onClick={showImage}></Image>
</ScrollView>} </ScrollView>
</View> )}
<View className={styles.btns} onClick={saveImageCheck}>保存电子确认单</View> </View>
</View> <View className={styles.btns} onClick={saveImageCheck}>
</Popup> 保存电子确认单
</View>
</View> </View>
) </Popup>
}) </View>
)
})

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

@ -1,130 +1,128 @@
.order_main{ .order_main {
min-height: 100%; min-height: 100%;
background-color:$color_bg_one; background-color: $color_bg_one;
padding: 20px; padding: 20px;
padding-bottom: 190px; padding-bottom: 190px;
box-sizing: border-box;
.order_title {
display: flex;
align-items: center;
padding: 20px 30px;
box-sizing: border-box; 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{ margin-right: 10px;
display: flex; flex: 1;
align-items: center; word-break: break-all;
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{ .order_desc_text_hint {
display: flex; text-align: right;
align-items: center; color: $color_font_two;
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;
}
} }
.submit_order_con{ .miconfont {
position: fixed; font-size: 20px;
bottom: 0; color: $color_font_two;
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;
}
} }
.order_info{ }
background-color: #fff; .submit_order_con {
margin-top: 20px; position: fixed;
border-radius: 20px; bottom: 0;
padding: 20px; left: 0;
.order_info_title{ width: 100%;
font-size: $font_size; background-color: #fff;
font-weight: 700; box-shadow: 6px 0px 12px 0px rgba(0, 0, 0, 0.16);
margin-bottom: 20px; padding: 20px 20px;
box-sizing: border-box;
} .order_btn {
.order_num{ width: 152px;
display: flex; height: 72px;
justify-content: space-between; border: 2px solid #dddddd;
align-items: center; border-radius: 46px;
width: 100%; display: flex;
.order_num_btn{ justify-content: center;
font-size: $font_size_medium; align-items: center;
padding: 5px 10px; color: $color_font_three;
border: 2px solid #007cf7; &:nth-child(n + 2) {
border-radius: 10px; margin-left: 34px;
color: $color_main; }
}
}
text{
font-size: $font_size;
}
} }
.weight_memo_con{ .order_btn_select {
margin-bottom: 20px; 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 { import { GetSaleOrderDetailApi, EditSaleOrderRemarkApi } from '@/api/order'
GetSaleOrderDetailApi, import { AddShoppingCartApi } from '@/api/shopCart'
EditSaleOrderRemarkApi, import { SubscriptionMessageApi } from '@/api/user'
} from "@/api/order"; import { alert, goLink } from '@/common/common'
import { AddShoppingCartApi } from "@/api/shopCart"; import { ORDER_STATUS } from '@/common/enum'
import { SubscriptionMessageApi } from "@/api/user"; import { formatDateTime, formatImgUrl } from '@/common/fotmat'
import { alert, goLink } from "@/common/common"; import OrderBtns from '@/components/orderBtns'
import { ORDER_STATUS } from "@/common/enum"; import Popup from '@/components/popup'
import { formatDateTime, formatImgUrl } from "@/common/fotmat"; import SearchInput from '@/components/searchInput'
import OrderBtns from "@/components/orderBtns"; import ShopCart from '@/components/shopCart'
import Popup from "@/components/popup"; import useLogin from '@/use/useLogin'
import SearchInput from "@/components/searchInput"; import { Text, View } from '@tarojs/components'
import ShopCart from "@/components/shopCart"; import Taro, { useDidShow, usePullDownRefresh, useRouter } from '@tarojs/taro'
import useLogin from "@/use/useLogin"; import classnames from 'classnames'
import { Text, View } from "@tarojs/components" import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import Taro, { useDidShow, usePullDownRefresh, useRouter } from "@tarojs/taro"; import AddressInfoDetail from './components/addressInfoDetail'
import classnames from "classnames"; import AdvanceOrderState from './components/advanceOrderState'
import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import ApplyRefund from './components/applyRefund'
import AddressInfoDetail from "./components/addressInfoDetail"; import KindList from './components/kindList'
import AdvanceOrderState from "./components/advanceOrderState"; import OrderState from './components/orderState'
import ApplyRefund from "./components/applyRefund"; import Payment from './components/payment'
import KindList from "./components/kindList"; import Remark from './components/remark'
import OrderState from "./components/orderState"; import ReturnRecord from './components/returnRecord'
import Payment from "./components/payment"; import ScanPayCheck from './components/scanPayCheck'
import Remark from "./components/remark"; import styles from './index.module.scss'
import ReturnRecord from "./components/returnRecord";
import ScanPayCheck from "./components/scanPayCheck"; export default () => {
import styles from './index.module.scss' useLogin()
const [showDesc, setShowDesc] = useState(false)
export default () => { const router = useRouter()
useLogin() const orderId = useRef<number>(Number(router.params.id))
const [showDesc, setShowDesc] = useState(false) useDidShow(() => {
const router = useRouter() getSaleOrderPreView()
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 { const clipboardData = () => {
SaleOrderStatusTaking, Taro.setClipboardData({
SaleOrderStatusWaitingDelivery, data: orderDetail?.order_no || '',
SaleOrderStatusWaitingReceipt, // 待收货 success: function (res) {
SaleOrderStatusAlreadyReceipt, // 已收货 Taro.showToast({
SaleOrderStatusComplete, // 已完成 icon: 'none',
SaleOrderStatusRefund, // 已退款 title: '复制成功',
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 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(() => { const defaultAddress = useMemo(() => {
alert.success('支付成功') return {
getSaleOrderPreView() province_name: orderDetail?.province_name,
closePayShow() city_name: orderDetail?.city_name,
}, [orderDetail]) district_name: orderDetail?.district_name,
address_detail: orderDetail?.address_detail,
//关闭支付弹窗 target_user_name: orderDetail?.target_user_name,
const closePayShow = useCallback(() => { target_user_phone: orderDetail?.target_user_phone,
setPayMentShow(() => false) shipment_mode: orderDetail?.shipment_mode,
}, [orderDetail]) id: orderDetail?.id,
sale_mode: orderDetail?.sale_mode,
//按钮所需数据 status: orderDetail?.status,
const orderInfo = useMemo(() => { take_goods_address: orderDetail?.take_goods_address,
return { take_goods_phone: orderDetail?.take_goods_phone,
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
})
}
} }
}, [orderDetail])
//显示售后记录 //订单备注
const [returnRecordShow, setReturnRecordShow] = useState(false) const { fetchData: remarkFetchData } = EditSaleOrderRemarkApi()
const onReturnRecordShow = useCallback(() => { const [orderRemark, setOrderRemark] = useState('')
setReturnRecordShow(true) const getRemark = useCallback(async (e) => {
}, []) setOrderRemark(() => e)
const closeReturnRecord = useCallback(() => { let res = await remarkFetchData({ remark: e, id: orderId.current })
setReturnRecordShow(false) 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}> const addressRef = useRef<any>(null)
{(orderDetail?.status != SaleorderstatusWaitingPrePayment.value)&&<OrderState orderInfo={orderDetail}/>||
<AdvanceOrderState orderInfo={orderDetail} onRefresh={refresh}/>} //修改收货方式
<View> const getShipmentMode = useCallback(() => {
<AddressInfoDetail orderInfo={defaultAddress} onLogistics={getLogistics} onSelect={getAddress} onChangeShipmentMode={getShipmentMode} ref={addressRef} /> 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> </View>
<KindList order={formatPreViewOrderMemo}/> </View>
<View className={styles.order_info} > </SearchInput>
<View className={styles.order_info_title}>订单信息</View> <SearchInput showBorder={false} title='下单时间' height='50rpx'>
<SearchInput showBorder={false} title='单号' height='50rpx'> <Text>{formatDateTime(orderDetail?.create_time)}</Text>
<View className={styles.order_num}> </SearchInput>
<Text>{orderDetail?.order_no}</Text> {orderDetail?.payment_time && (
<View className={styles.order_num_btn} onClick={() => clipboardData()}>复制</View> <SearchInput showBorder={false} title='付款时间' height='50rpx'>
</View> <Text>{formatDateTime(orderDetail?.payment_time)}</Text>
</SearchInput> </SearchInput>
<SearchInput showBorder={false} title='下单时间' height='50rpx'> )}
<Text>{formatDateTime(orderDetail?.create_time)}</Text> </View>
</SearchInput> <View className={styles.order_desc} onClick={descOpen}>
{(orderDetail?.payment_time)&&<SearchInput showBorder={false} title='付款时间' height='50rpx'> <View className={styles.order_desc_con}>订单备注</View>
<Text>{formatDateTime(orderDetail?.payment_time)}</Text> {(orderRemark && <View className={styles.order_desc_text}>{orderDetail?.remark}</View>) || (
</SearchInput>} <View className={styles.order_desc_text_hint}>填写备注</View>
</View> )}
<View className={styles.order_desc} onClick={descOpen}> <View className={classnames(styles.miconfont, 'iconfont icon-a-moreback')}></View>
<View className={styles.order_desc_con}>订单备注</View> </View>
{ {orderDetail?.status != SaleOrderStatusCancel.value && (
orderRemark&&<View className={styles.order_desc_text}>{orderDetail?.remark}</View>|| <View className={styles.submit_order_con}>
<View className={styles.order_desc_text_hint}>填写备注</View> <OrderBtns orderInfo={orderInfo} onClick={orderStateClick} />
} <View className='common_safe_area_y'></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> </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{ .order_list_main {
height: 100vh; height: 100vh;
background-color: $color_bg_one; background-color: $color_bg_one;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.title{ .title {
padding: 0 20px; padding: 0 20px;
background-color: #fff; background-color: #fff;
box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.16); box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.16);
border-bottom: 2px solid #e2e2e2; border-bottom: 2px solid #e2e2e2;
height: 160px; height: 160px;
.order_status_list{ .order_status_list {
font-size: $font_size; font-size: $font_size;
color: #9E9E9E; color: #9e9e9e;
margin-top: 20px; margin-top: 20px;
.order_status_item{ .order_status_item {
padding: 20px; padding: 20px;
box-sizing: border-box; box-sizing: border-box;
} }
.selected{ .selected {
font-weight: 700; font-weight: 700;
color: #000; color: #000;
border-bottom: 4px solid #707070; border-bottom: 4px solid #707070;
} }
.order_list_scroll{ .order_list_scroll {
white-space: nowrap; white-space: nowrap;
display: flex; display: flex;
} }
}
} }
.order_list{ }
height: calc(100vh - 160px); .order_list {
.order_item_con{ height: calc(100vh - 160px);
margin-top: 20px; .order_item_con {
padding: 0 20px; 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 Search from '@/components/search'
import useLogin from "@/use/useLogin" import useLogin from '@/use/useLogin'
import {View } from "@tarojs/components" import { View } from '@tarojs/components'
import Taro, { useDidShow,} from "@tarojs/taro" import Taro, { useDidShow } from '@tarojs/taro'
import { useCallback, useEffect, useMemo, useRef, useState } from "react" import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import styles from './index.module.scss' import styles from './index.module.scss'
import Order from "./components/order" import Order from './components/order'
import InfiniteScroll from "@/components/infiniteScroll" import InfiniteScroll from '@/components/infiniteScroll'
import { GetOrderListApi, OrderStatusListApi} from '@/api/order' import { GetOrderListApi, OrderStatusListApi } from '@/api/order'
import { dataLoadingStatus, getFilterData } from "@/common/util" import { dataLoadingStatus, getFilterData } from '@/common/util'
import OrderStatusList from "./components/orderStatusList" import OrderStatusList from './components/orderStatusList'
import { AddShoppingCartApi } from "@/api/shopCart" import { AddShoppingCartApi } from '@/api/shopCart'
import ShopCart from "@/components/shopCart" import ShopCart from '@/components/shopCart'
import { alert } from "@/common/common" import { alert } from '@/common/common'
import { useRouter } from "@tarojs/runtime" import { useRouter } from '@tarojs/runtime'
import Payment from "../components/payment" import Payment from '../components/payment'
import ApplyRefund from "../components/applyRefund" import ApplyRefund from '../components/applyRefund'
import ReturnRecord from "../components/returnRecord" import ReturnRecord from '../components/returnRecord'
export default () => { export default () => {
const {checkLogin} = useLogin() const { checkLogin } = useLogin()
useDidShow(async () => { useDidShow(async () => {
await checkLogin() await checkLogin()
}) })
@ -26,25 +26,25 @@ export default () => {
//传递过来的参数 //传递过来的参数
const router = useRouter() const router = useRouter()
useEffect(() => { useEffect(() => {
if(router?.params.status != undefined && router?.params.status !== '') { if (router?.params.status != undefined && router?.params.status !== '') {
setSearchField((e) => ({...e, status: router?.params.status as number})) setSearchField((e) => ({ ...e, status: router?.params.status as number }))
} else { } else {
setSearchField((e) => ({...e, status:-1})) setSearchField((e) => ({ ...e, status: -1 }))
} }
}, [router]) }, [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, status: null,
page : 1, page: 1,
size : 10, size: 10,
name:'' name: '',
}) })
//获取订单状态 //获取订单状态
const {fetchData: orderStatusListFetchData} = OrderStatusListApi() const { fetchData: orderStatusListFetchData } = OrderStatusListApi()
const [statusList, setStatusList] = useState<any[]>([{id: -1, name: '全部'}]) const [statusList, setStatusList] = useState<any[]>([{ id: -1, name: '全部' }])
const getOrderStatusList = async () => { const getOrderStatusList = async () => {
let res = await orderStatusListFetchData() let res = await orderStatusListFetchData()
setStatusList((e) => [...e, ...res.data.list]) setStatusList((e) => [...e, ...res.data.list])
} }
@ -53,143 +53,142 @@ export default () => {
}, []) }, [])
//获取订单列表 //获取订单列表
const {fetchData: listFetchData, state:orderState} = GetOrderListApi() const { fetchData: listFetchData, state: orderState } = GetOrderListApi()
const [orderData, setOrderData] = useState<{list:any[], total:number}>({list:[], total:0}) const [orderData, setOrderData] = useState<{ list: any[]; total: number }>({ list: [], total: 0 })
const getOrderList = async () => { const getOrderList = async () => {
let res = await listFetchData(getFilterData(searchField)) 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) setRefresherTriggeredStatus(() => false)
} }
//监听筛选条件变化 //监听筛选条件变化
useEffect(() => { useEffect(() => {
if(searchField.status != null) getOrderList() if (searchField.status != null) getOrderList()
}, [searchField]) }, [searchField])
//上拉加载数据 //上拉加载数据
const pageNum = useRef({size: searchField.size, page: searchField.page}) const pageNum = useRef({ size: searchField.size, page: searchField.page })
const getScrolltolower = useCallback(() => { const getScrolltolower = useCallback(() => {
if(orderData.list.length < orderData.total) { if (orderData.list.length < orderData.total) {
pageNum.current.page++ pageNum.current.page++
const size = pageNum.current.size * pageNum.current.page const size = pageNum.current.size * pageNum.current.page
setSearchField({...searchField, size }) setSearchField({ ...searchField, size })
} }
}, [orderData]) }, [orderData])
//状态改变 //状态改变
const changeStatus = useCallback((e) => { const changeStatus = useCallback((e) => {
pageNum.current.page = 1 pageNum.current.page = 1
setSearchField((value) => ({...value, status:e, size:10})) setSearchField((value) => ({ ...value, status: e, size: 10 }))
setOrderData(() => ({list:[], total:0})) setOrderData(() => ({ list: [], total: 0 }))
}, []) }, [])
//数据加载状态 //数据加载状态
const statusMore = useMemo(() => { 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]) }, [orderData, orderState])
//输入了搜索关键字 //输入了搜索关键字
const getSearchData = useCallback((e) => { const getSearchData = useCallback((e) => {
pageNum.current.page = 1 pageNum.current.page = 1
setOrderData(() => ({list:[], total:0})) setOrderData(() => ({ list: [], total: 0 }))
setSearchField((val) => ({...val, name:e, size:10})) setSearchField((val) => ({ ...val, name: e, size: 10 }))
}, []) }, [])
//列表下拉刷新 //列表下拉刷新
const [refresherTriggeredStatus, setRefresherTriggeredStatus] = useState(false) const [refresherTriggeredStatus, setRefresherTriggeredStatus] = useState(false)
const getRefresherRefresh = async () => { const getRefresherRefresh = async () => {
pageNum.current.size = 1 pageNum.current.size = 1
setRefresherTriggeredStatus(true) setRefresherTriggeredStatus(true)
setSearchField((val) => ({...val, size:10})) setSearchField((val) => ({ ...val, size: 10 }))
} }
//监听点击的按钮 //监听点击的按钮
const clickOrderBtn = useCallback(({status, orderInfo}) => { const clickOrderBtn = useCallback(
setCallBackPayOrderInfo(() => orderInfo) ({ status, orderInfo }) => {
if(status == 1 || status == 6 || status == 8) { setCallBackPayOrderInfo(() => orderInfo)
getOrderList() if (status == 1 || status == 6 || status == 8) {
} else if(status == 2) { getOrderList()
//去支付 } else if (status == 2) {
toPay() //去支付
} else if (status == 3) { toPay()
//申请退款 } else if (status == 3) {
if(!orderInfo?.av_return_roll) return alert.none('该订单已申请过退款') //申请退款
setRefundShow(true) if (!orderInfo?.av_return_roll) return alert.none('该订单已申请过退款')
} else if (status == 7) { setRefundShow(true)
//购买 } else if (status == 7) {
addShopCart(orderInfo) //购买
} else if (status == 9) { addShopCart(orderInfo)
onReturnRecordShow() } else if (status == 9) {
} else if (status == 10) { onReturnRecordShow()
setShowScanPayCheck(true) } else if (status == 10) {
} setShowScanPayCheck(true)
}, [orderData]) }
},
[orderData],
)
const [callBackOrderInfo, setCallBackPayOrderInfo] = useState<any>() const [callBackOrderInfo, setCallBackPayOrderInfo] = useState<any>()
//去付款 //去付款
const [payMentShow, setPayMentShow] = useState(false) const [payMentShow, setPayMentShow] = useState(false)
const toPay = () => { const toPay = () => {
setPayMentShow(true) setPayMentShow(true)
} }
//关闭支付弹窗 //关闭支付弹窗
const closePayShow = useCallback(() => { const closePayShow = useCallback(() => {
setPayMentShow(() => false) setPayMentShow(() => false)
}, []) }, [])
//支付成功 //支付成功
const onPaySuccess = useCallback(() => { const onPaySuccess = useCallback(() => {
getOrderList() getOrderList()
closePayShow() closePayShow()
}, []) }, [])
//添加购物车 //添加购物车
const [showCart, setShowCart] = useState(false) const [showCart, setShowCart] = useState(false)
const {fetchData:addFetchData} = AddShoppingCartApi() const { fetchData: addFetchData } = AddShoppingCartApi()
const addShopCart = async (item) => { const addShopCart = async (item) => {
let color_list:{product_color_id: number, roll?: number, length?: number}[] = [] let color_list: { product_color_id: number; roll?: number; length?: number }[] = []
item?.product_list.map(pitem => { item?.product_list.map((pitem) => {
pitem?.product_colors.map(citem => { pitem?.product_colors.map((citem) => {
if(item?.sale_mode == 0) { if (item?.sale_mode == 0) {
return color_list.push({product_color_id: citem.id, roll: citem.roll}) return color_list.push({ product_color_id: citem.id, roll: citem.roll })
} else { } else {
return color_list.push({product_color_id: citem.id, length: citem.length}) return color_list.push({ product_color_id: citem.id, length: citem.length })
} }
})
}) })
const state = await addFetchData({ })
sale_mode: item?.sale_mode, const state = await addFetchData({
color_list sale_mode: item?.sale_mode,
color_list,
})
if (state.success) {
Taro.showToast({
title: '已加入购物车',
}) })
if(state.success) { setShowCart(true)
Taro.showToast({ } else {
title:'已加入购物车' Taro.showToast({
}) icon: 'none',
setShowCart(true) title: state.msg,
} else { })
Taro.showToast({ }
icon:'none',
title: state.msg
})
}
} }
//申请退款 //申请退款
const [refundShow, setRefundShow] = useState(false) const [refundShow, setRefundShow] = useState(false)
const applyRefundClose = useCallback(() => { const applyRefundClose = useCallback(() => {
setRefundShow(false) setRefundShow(false)
}, []) }, [])
//显示售后记录 //显示售后记录
const [returnRecordShow, setReturnRecordShow] = useState(false) const [returnRecordShow, setReturnRecordShow] = useState(false)
const onReturnRecordShow = useCallback(() => { const onReturnRecordShow = useCallback(() => {
setReturnRecordShow(true) setReturnRecordShow(true)
}, []) }, [])
const closeReturnRecord = useCallback(() => { const closeReturnRecord = useCallback(() => {
setReturnRecordShow(false) setReturnRecordShow(false)
}, []) }, [])
//显示 //显示
@ -198,20 +197,30 @@ export default () => {
return ( return (
<View className={styles.order_list_main}> <View className={styles.order_list_main}>
<View className={styles.title}> <View className={styles.title}>
<Search placeIcon="out" placeholder="搜索商品/名称/颜色/订单号" showBtn={true} changeOnSearch={getSearchData} debounceTime={300}/> <Search placeIcon='out' placeholder='搜索商品/名称/颜色/订单号' showBtn={true} changeOnSearch={getSearchData} debounceTime={300} />
<OrderStatusList list={statusList} onSelect={changeStatus} defaultId={router?.params.status as number}/> <OrderStatusList list={statusList} onSelect={changeStatus} defaultId={router?.params.status as number} />
</View> </View>
<View className={styles.order_list}> <View className={styles.order_list}>
<InfiniteScroll statusMore={statusMore} selfonScrollToLower={getScrolltolower} refresherEnabled={true} refresherTriggered={refresherTriggeredStatus} selfOnRefresherRefresh={getRefresherRefresh}> <InfiniteScroll
{orderData?.list?.map(item => { statusMore={statusMore}
return <View key={item.id} className={styles.order_item_con}> <Order value={item} onClickBtn={clickOrderBtn}/></View> selfonScrollToLower={getScrolltolower}
})} refresherEnabled={true}
</InfiniteScroll> 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> </View>
<ApplyRefund show={refundShow} onClose={applyRefundClose} orderId={callBackOrderInfo?.id}/> <ApplyRefund show={refundShow} onClose={applyRefundClose} orderId={callBackOrderInfo?.id} />
<ShopCart intoStatus="again" show={showCart} onClose={() => setShowCart(false)} default_sale_mode={callBackOrderInfo?.sale_mode}/> <ShopCart intoStatus='again' show={showCart} onClose={() => setShowCart(false)} default_sale_mode={callBackOrderInfo?.sale_mode} />
<ReturnRecord show={returnRecordShow} onClose={closeReturnRecord} id={callBackOrderInfo?.id}/> <ReturnRecord show={returnRecordShow} onClose={closeReturnRecord} id={callBackOrderInfo?.id} />
<Payment onSubmitSuccess={onPaySuccess} show={payMentShow} onClose={closePayShow} orderInfo={callBackOrderInfo}/> <Payment onSubmitSuccess={onPaySuccess} show={payMentShow} onClose={closePayShow} orderInfo={callBackOrderInfo} />
</View> </View>
) )
} }