From e2b0b0c52b92a3012c52f70bc1eb646286f23280 Mon Sep 17 00:00:00 2001 From: czm <2192718639@qq.com> Date: Fri, 29 Jul 2022 20:48:15 +0800 Subject: [PATCH] =?UTF-8?q?=E5=95=86=E5=9F=8E=E6=B5=8B=E8=AF=95=E7=89=88v8?= =?UTF-8?q?=5F1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .prettierrc.js | 10 + global.d.ts | 20 +- src/api/onlinePay.ts | 17 +- src/common/constant.js | 14 +- src/common/util.ts | 139 ++-- src/components/InfiniteScrollPaging/index.tsx | 138 ++-- .../collection/collectionClass/index.tsx | 121 ++-- src/pages/depositList/index.tsx | 67 +- src/pages/index/index.tsx | 27 +- src/pages/order/comfirm.module.scss | 255 ++++--- src/pages/order/comfirm.tsx | 389 ++++++----- src/pages/order/components/kindList/index.tsx | 433 ++++++------ src/pages/order/components/scanPay/index.tsx | 360 +++++----- .../order/components/scanPayCheck/index.tsx | 355 +++++----- src/pages/order/index.module.scss | 244 ++++--- src/pages/order/index.tsx | 649 +++++++++--------- src/pages/order/orderList/index.module.scss | 72 +- src/pages/order/orderList/index.tsx | 233 ++++--- 18 files changed, 1821 insertions(+), 1722 deletions(-) create mode 100644 .prettierrc.js diff --git a/.prettierrc.js b/.prettierrc.js new file mode 100644 index 0000000..4276115 --- /dev/null +++ b/.prettierrc.js @@ -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', +} diff --git a/global.d.ts b/global.d.ts index e529ac5..0d31604 100644 --- a/global.d.ts +++ b/global.d.ts @@ -1,15 +1,15 @@ /// -declare module '*.png'; -declare module '*.gif'; -declare module '*.jpg'; -declare module '*.jpeg'; -declare module '*.svg'; -declare module '*.css'; -declare module '*.less'; -declare module '*.scss'; -declare module '*.sass'; -declare module '*.styl'; +declare module '*.png' +declare module '*.gif' +declare module '*.jpg' +declare module '*.jpeg' +declare module '*.svg' +declare module '*.css' +declare module '*.less' +declare module '*.scss' +declare module '*.sass' +declare module '*.styl' declare namespace NodeJS { interface ProcessEnv { diff --git a/src/api/onlinePay.ts b/src/api/onlinePay.ts index 8b847d2..00cf6f0 100644 --- a/src/api/onlinePay.ts +++ b/src/api/onlinePay.ts @@ -1,14 +1,13 @@ -import { CAP_HTML_TO_IMAGE_BASE_URL } from "@/common/constant" -import { useRequest } from "@/use/useHttp" +import { CAP_HTML_TO_IMAGE_BASE_URL } from '@/common/constant' +import { useRequest } from '@/use/useHttp' /** * 获取在线支付二维码 */ - export const GetPayCode = () => { - return useRequest({ - url: `/xima-caphtml/caphtml`, - base_url: CAP_HTML_TO_IMAGE_BASE_URL, - method: "post", - }) +export const GetPayCode = () => { + return useRequest({ + url: `/xima-caphtml/caphtml`, + base_url: CAP_HTML_TO_IMAGE_BASE_URL, + method: 'post', + }) } - diff --git a/src/common/constant.js b/src/common/constant.js index 4512c59..49183c2 100644 --- a/src/common/constant.js +++ b/src/common/constant.js @@ -21,19 +21,23 @@ export const UPLOAD_CDN_URL = `https://v0.api.upyun.com/` // cdn // export const IMG_CND_Prefix = CURRENT_ENV.includes('development')? "https://test.cdn.zzfzyc.com":"https://cdn.zzfzyc.com" -export const IMG_CND_Prefix = CURRENT_ENV.includes('development')? "https://test.cdn.zzfzyc.com":"https://test.cdn.zzfzyc.com" +export const IMG_CND_Prefix = CURRENT_ENV.includes('development') + ? 'https://test.cdn.zzfzyc.com' + : 'https://test.cdn.zzfzyc.com' //在线支付图片baseUrl // export const CAP_HTML_TO_IMAGE_BASE_URL = CURRENT_ENV.includes('development')? "https://test.zzfzyc.com":"https://www.zzfzyc.com" -export const CAP_HTML_TO_IMAGE_BASE_URL = CURRENT_ENV.includes('development')? "https://test.zzfzyc.com":"https://test.zzfzyc.com" +export const CAP_HTML_TO_IMAGE_BASE_URL = CURRENT_ENV.includes('development') + ? 'https://test.zzfzyc.com' + : 'https://test.zzfzyc.com' // 上传图片视频 -export const CDN_UPLOAD_IMG = `${UPLOAD_CDN_URL || ''}`; +export const CDN_UPLOAD_IMG = `${UPLOAD_CDN_URL || ''}` //appid export const WX_APPID = 'wx68d92d7cbf0b6963' //场景值 export const SCENE = { - SearchScene : 0 //商城面料搜索 -} \ No newline at end of file + SearchScene: 0, //商城面料搜索 +} diff --git a/src/common/util.ts b/src/common/util.ts index 357e5d9..4eb402d 100644 --- a/src/common/util.ts +++ b/src/common/util.ts @@ -1,56 +1,60 @@ -import { formatImgUrl } from "./fotmat"; -import { analysisShortCodeApi } from "./shortCode"; +import { formatImgUrl } from './fotmat' +import { analysisShortCodeApi } from './shortCode' import Taro from '@tarojs/taro' /** * 防抖 - * @param {*} fn - * @param {*} delay - * @returns + * @param {*} fn + * @param {*} delay + * @returns */ export const debounce = (fn, delay) => { - let timer:any = null; + let timer: any = null return (...param) => { - if (timer) clearTimeout(timer); + if (timer) clearTimeout(timer) timer = setTimeout(() => { - fn(...param); - }, delay); - }; + fn(...param) + }, delay) + } } /** * 节流 - * @param {*} fn - * @param {*} delay - * @returns + * @param {*} fn + * @param {*} delay + * @returns */ export const throttle = (fn, delay) => { - let pre = 0; + let pre = 0 return (...params) => { - let now = new Date().getTime(); + let now = new Date().getTime() if (now - pre > delay) { - fn(...params); - pre = now; + fn(...params) + pre = now } - }; + } } - /** * 批量过滤对象值为空的属性 * @param {Object} val 需要过滤的对象 * @param {Array} arr 排除过滤的属性 - * @returns + * @returns */ - export const getFilterData = (val = {}, arr: string[] = []) => { +export const getFilterData = (val = {}, arr: string[] = []) => { let res = {} - for(let key in val) { - if(val[key]!==undefined&&val[key]!==null&&val[key]!==''&&(!arr.includes(key))){ - if(typeof val[key] == 'number'){ - if(!isNaN(val[key])) { + for (let key in val) { + if ( + val[key] !== undefined && + val[key] !== null && + val[key] !== '' && + !arr.includes(key) + ) { + if (typeof val[key] == 'number') { + if (!isNaN(val[key])) { res[key] = val[key] } - } else{ + } else { res[key] = val[key] } } @@ -59,23 +63,23 @@ export const throttle = (fn, delay) => { } /** * 对象深拷贝 - * @param {*} object - * @returns + * @param {*} object + * @returns */ - export const copyObject = (object)=>{ - if(object.constructor==Object){ - let keys = Object.keys(object); - let newObject = {}; - keys.map(key=>{ - newObject[key]= copyObject(object[key]); - }) - return newObject; - }else if(object.constructor==Array){ - return object.map(item=>{ - return copyObject(item); - }) - }else{ - return object; +export const copyObject = (object) => { + if (object.constructor == Object) { + let keys = Object.keys(object) + let newObject = {} + keys.map((key) => { + newObject[key] = copyObject(object[key]) + }) + return newObject + } else if (object.constructor == Array) { + return object.map((item) => { + return copyObject(item) + }) + } else { + return object } } @@ -91,13 +95,21 @@ export const throttle = (fn, delay) => { !wh400 !w600 */ - export const screenshot = (url, suffix="!w200")=>{ - return url+suffix; - } +export const screenshot = (url, suffix = '!w200') => { + return url + suffix +} - //获取数据加载状态 //0:数据从无到有加载数据，1，没有任何数据， 2：下拉加载，3：下拉没有数据 - export const dataLoadingStatus = ({list = [], total = 0, status = false}:{list:any[], total:number, status:true|false}) => { - if(list.length == 0 && status) { +//获取数据加载状态 //0:数据从无到有加载数据，1，没有任何数据， 2：下拉加载，3：下拉没有数据 +export const dataLoadingStatus = ({ + list = [], + total = 0, + status = false, +}: { + list: any[] + total: number + status: true | false +}) => { + if (list.length == 0 && status) { return 0 } else if (list.length == 0 && !status) { return 1 @@ -106,30 +118,39 @@ export const throttle = (fn, delay) => { } else { return 3 } - } +} - //全局分享监听 - export const shareShop = () => { +//全局分享监听 +export const shareShop = () => { const page = Taro.getCurrentInstance().page //当有分享参数时，绑定上下级 - if(page && page.options?.share) { + if (page && page.options?.share) { analysisShortCodeApi(page.options.share) } - if(page && page.onShareAppMessage) { + if (page && page.onShareAppMessage) { page.onShareAppMessage = (res) => { let path = '' let title = '' let imageUrl = '' - let sortCode = Taro.getStorageSync('sort_code')?JSON.parse(Taro.getStorageSync('sort_code')):'' - let pageInfo:any = page - if(res.from === 'button') { + let sortCode = Taro.getStorageSync('sort_code') + ? JSON.parse(Taro.getStorageSync('sort_code')) + : '' + let pageInfo: any = page + //商品详情分享 + if (pageInfo.route === 'pages/details/index') { path = `/pages/details/index?share=${sortCode.shareShortDetail.code}` title = sortCode.shareShortDetail.title imageUrl = sortCode.shareShortDetail.img } else { - path = (pageInfo.route === 'pages/user/index')?`/pages/user/index?share=${sortCode.shareShortPage.code}`:`/pages/index/index?share=${sortCode.shareShortPage.code}` + path = + pageInfo.route === 'pages/user/index' + ? `/pages/user/index?share=${sortCode.shareShortPage.code}` + : `/pages/index/index?share=${sortCode.shareShortPage.code}` title = sortCode.shareShortPage.title - imageUrl = (pageInfo.route === 'pages/user/index')?formatImgUrl('/mall/share_img_02.png') : sortCode.shareShortPage.img + imageUrl = + pageInfo.route === 'pages/user/index' + ? sortCode.shareShortPage.img + : formatImgUrl('/mall/share_img_02.png') } return { title, @@ -138,4 +159,4 @@ export const throttle = (fn, delay) => { } } } -} \ No newline at end of file +} diff --git a/src/components/InfiniteScrollPaging/index.tsx b/src/components/InfiniteScrollPaging/index.tsx index dc20d57..354044d 100644 --- a/src/components/InfiniteScrollPaging/index.tsx +++ b/src/components/InfiniteScrollPaging/index.tsx @@ -1,72 +1,71 @@ +import InfiniteScroll from '@/components/infiniteScroll' +import { ReactNode, useEffect, useMemo, useRef, useState } from 'react' +import { dataLoadingStatus, getFilterData } from '@/common/util' +import { alert, isEmptyObject } from '@/common/common' -import InfiniteScroll from "@/components/infiniteScroll" -import { ReactNode, useEffect, useMemo, useRef, useState } from "react" -import { dataLoadingStatus, getFilterData } from "@/common/util"; -import { alert, isEmptyObject } from "@/common/common"; - -interface Params{ - children?: ReactNode, - query?: object, - fetchData: (data: object)=>any, - change?: (data: any)=>void +interface Params { + children?: ReactNode + query?: object + fetchData: (data: object) => any + change?: (data: any) => void } -export default (props: Params)=>{ - const { query={} } = props; - useEffect(()=>{ - refreshDataRef.current = refreshData; - dataRef.current = data; - getData({moreStatus: true},{moreStatus: true}); +export default (props: Params) => { + const { query = {} } = props + useEffect(() => { + refreshDataRef.current = refreshData + dataRef.current = data + getData({ moreStatus: true }, { moreStatus: true }) }, []) - useEffect(()=>{ - if(!isEmptyObject(query)){ - setData({list: [],total: 0}); - getData({moreStatus: true},{moreStatus: true}); - } - },[query]) - const getData = async (startStatus, endStatus)=>{ - const tRefreshDataRef = refreshDataRef.current as any; + useEffect(() => { + if (!isEmptyObject(query)) { + setData({ list: [], total: 0 }) + getData({ moreStatus: true }, { moreStatus: true }) + } + }, [query]) + const getData = async (startStatus, endStatus) => { + const tRefreshDataRef = refreshDataRef.current as any setRefreshData({ ...tRefreshDataRef, ...startStatus, - loading: true + loading: true, }) const result = await props.fetchData({ - ...query, + ...query, page: tRefreshDataRef.page, size: tRefreshDataRef.size, - }); - if(result.success){ + }) + if (result.success) { // 返回数据 - props.change&&props.change(result); - if(result.data.total<=0){ + props.change && props.change(result) + if (result.data.total <= 0) { setRefreshData({ ...tRefreshDataRef, ...endStatus, - loading: false + loading: false, }) - }else{ + } else { setData({ list: result.data.list, // list: tRefreshDataRef.page>1?(dataRef.current as any).list.concat(result.data.list):result.data.list, - total: result.data.total + total: result.data.total, }) setRefreshData({ ...tRefreshDataRef, refreshStatus: false, moreStatus: false, - loading: false + loading: false, }) } - }else{ - alert.none(result.msg); - setRefreshData({ - ...tRefreshDataRef, - refreshStatus: false, - moreStatus: true, - loading: false - }) - } + } else { + alert.none(result.msg) + setRefreshData({ + ...tRefreshDataRef, + refreshStatus: false, + moreStatus: true, + loading: false, + }) + } } // 加载刷新数据 const [refreshData, setRefreshData] = useState({ @@ -74,52 +73,59 @@ export default (props: Params)=>{ moreStatus: false, page: 1, size: 10, - loading: false + loading: false, }) - const refreshDataRef = useRef({}); + const refreshDataRef = useRef({}) // 渲染（数据） const [data, setData] = useState({ list: [], - total: 0 - }); - const dataRef = useRef({}); + total: 0, + }) + const dataRef = useRef({}) // 下拉刷新 - const handleRefresh = async ()=>{ - let tRefreshData = refreshDataRef.current as any; + const handleRefresh = async () => { + let tRefreshData = refreshDataRef.current as any setRefreshData({ ...tRefreshData, page: 1, size: 10, }) - getData({refreshStatus: true,moreStatus: false},{refreshStatus: false,moreStatus: true}); + getData({ refreshStatus: true, moreStatus: false }, { refreshStatus: false, moreStatus: true }) } // 加载更多 - const handleMoreLoad = async ()=>{ - let t = (dataRef.current as any); - let tRefreshData = refreshDataRef.current as any; - if(t.list.length { + let t = dataRef.current as any + let tRefreshData = refreshDataRef.current as any + if (t.list.length < t.total) { setRefreshData({ ...tRefreshData, page: ++tRefreshData.page, - size: ++tRefreshData.page*tRefreshData.size, + size: ++tRefreshData.page * tRefreshData.size, }) - getData({ - moreStatus: true - },{ - moreStatus: true - }); + getData( + { + moreStatus: true, + }, + { + moreStatus: true, + }, + ) } } //数据加载状态 const statusMore = useMemo(() => { - return dataLoadingStatus({list:data.list, total: data.total, status: refreshData.loading}) + return dataLoadingStatus({ list: data.list, total: data.total, status: refreshData.loading }) }, [refreshData.loading]) - return ( - - {props.children} + + {props.children} ) } diff --git a/src/pages/collection/collectionClass/index.tsx b/src/pages/collection/collectionClass/index.tsx index 3d695e4..0908427 100644 --- a/src/pages/collection/collectionClass/index.tsx +++ b/src/pages/collection/collectionClass/index.tsx @@ -1,53 +1,50 @@ -import { DelFavoriteProductApi, DetailFavoriteProductApi, MoveFavoriteProductApi } from "@/api/favorite"; -import { alert } from "@/common/common"; -import { getFilterData } from "@/common/util"; -import Product from "../components/product"; -import Search from "@/components/search" -import { Text, View } from "@tarojs/components" -import Taro, { useRouter } from "@tarojs/taro"; -import classnames from "classnames"; -import { useCallback, useEffect, useMemo, useRef, useState } from "react"; -import styles from './index.module.scss' -import MCheckbox from "@/components/checkbox"; -import AddCollection from "@/components/addCollection"; - +import { DelFavoriteProductApi, DetailFavoriteProductApi, MoveFavoriteProductApi } from '@/api/favorite' +import { alert } from '@/common/common' +import { getFilterData } from '@/common/util' +import Product from '../components/product' +import Search from '@/components/search' +import { Text, View } from '@tarojs/components' +import Taro, { useRouter } from '@tarojs/taro' +import classnames from 'classnames' +import { useCallback, useEffect, useMemo, useRef, useState } from 'react' +import styles from './index.module.scss' +import MCheckbox from '@/components/checkbox' +import AddCollection from '@/components/addCollection' export default () => { - const router = useRouter() //获取收藏夹面料 - const {fetchData: fetchDataDetailFavoriteProduct} = DetailFavoriteProductApi() + const { fetchData: fetchDataDetailFavoriteProduct } = DetailFavoriteProductApi() const [colorInfo, setColorInfo] = useState({}) const getFavoriteInfo = async () => { - let res = await fetchDataDetailFavoriteProduct(searchData) - if(res.success) { - Taro.setNavigationBarTitle({ - title: res.data.name - }) - setColorInfo(res.data) - } + let res = await fetchDataDetailFavoriteProduct(searchData) + if (res.success) { + Taro.setNavigationBarTitle({ + title: res.data.name, + }) + setColorInfo(res.data) + } } //获取搜索数据 - const [searchData, setSearchData] = useState({id:0, code_or_name: ''}) + const [searchData, setSearchData] = useState({ id: 0, code_or_name: '' }) const onSearch = useCallback((e) => { - setSearchData((val) => ({...val, code_or_name: e})) + setSearchData((val) => ({ ...val, code_or_name: e })) }, []) useEffect(() => { let id = router.params.id || 0 - if(id) setSearchData((e) => ({...e, id: parseInt(id as string)})) + if (id) setSearchData((e) => ({ ...e, id: parseInt(id as string) })) }, []) useEffect(() => { - if(searchData.id) getFavoriteInfo() + if (searchData.id) getFavoriteInfo() }, [searchData]) const productList = useMemo(() => { return colorInfo.product_color_list }, [colorInfo]) - //获取选中的id const [ids, setIds] = useState([]) const getSelectIds = useCallback((val) => { @@ -65,13 +62,13 @@ export default () => { setSelectStatus(3) }, []) - const [selectStatus, setSelectStatus] = useState<1|2|3>(3) + const [selectStatus, setSelectStatus] = useState<1 | 2 | 3>(3) useEffect(() => { - if(colorInfo.product_color_list?.length) { - if(ids.length == colorInfo.product_color_list.length) { + if (colorInfo.product_color_list?.length) { + if (ids.length == colorInfo.product_color_list.length) { setSelectStatus(1) setAllSelectStatus(true) - } else if ( 0 < ids.length && ids.length < colorInfo.product_color_list.length){ + } else if (0 < ids.length && ids.length < colorInfo.product_color_list.length) { setSelectStatus(2) setAllSelectStatus(false) } else { @@ -79,8 +76,7 @@ export default () => { setAllSelectStatus(false) } } - }, [ids, colorInfo]) - + }, [ids, colorInfo]) const [collectionShow, setCollectionShow] = useState(false) const closeCollection = useCallback(() => { @@ -88,11 +84,15 @@ export default () => { }, []) //移动面料 - const {fetchData: fetchDataMoveFavoriteProduct} = MoveFavoriteProductApi() + const { fetchData: fetchDataMoveFavoriteProduct } = MoveFavoriteProductApi() const onAdd = async (val) => { - if(ids.length == 0) return alert.none('请选择要移动面料') - let res = await fetchDataMoveFavoriteProduct({source_favorite_id: searchData.id ,target_favorite_id: val.id, product_id:ids}) - if(res.success) { + if (ids.length == 0) return alert.none('请选择要移动面料') + let res = await fetchDataMoveFavoriteProduct({ + source_favorite_id: searchData.id, + target_favorite_id: val.id, + product_id: ids, + }) + if (res.success) { getFavoriteInfo() setCollectionShow(false) alert.success('修改成功') @@ -100,43 +100,46 @@ export default () => { } //取消收藏 - const {fetchData: delFavoriteProductFetchData} = DelFavoriteProductApi() + const { fetchData: delFavoriteProductFetchData } = DelFavoriteProductApi() const delCollectioin = async () => { - if(ids.length == 0) return alert.none('请选择要取消面料') + if (ids.length == 0) return alert.none('请选择要取消面料') let showModalRes = await Taro.showModal({ - title: '是否要取消收藏', - confirmText: '是', - cancelText: '否', + title: '是否要取消收藏', + confirmText: '是', + cancelText: '否', }) - if(showModalRes.confirm) { - let res = await delFavoriteProductFetchData({favorite_id: searchData.id, product_id:ids}) - if(res.success) { + if (showModalRes.confirm) { + let res = await delFavoriteProductFetchData({ favorite_id: searchData.id, product_id: ids }) + if (res.success) { getFavoriteInfo() alert.none('已取消收藏') } } - } return ( - + - - selectCallBack()} onClose={() => colseCallBack()}/> - 全选 - - - setCollectionShow(true)}>移动到 - 取消收藏 - + + selectCallBack()} onClose={() => colseCallBack()} /> + 全选 + + + setCollectionShow(true)}> + 移动到 + + + 取消收藏 + - - - + + + + ) - } \ No newline at end of file +} diff --git a/src/pages/depositList/index.tsx b/src/pages/depositList/index.tsx index 3ef5918..4173f14 100644 --- a/src/pages/depositList/index.tsx +++ b/src/pages/depositList/index.tsx @@ -1,57 +1,58 @@ +import AddressList from '@/components/AddressList' +import InfiniteScrollPaging from '@/components/InfiniteScrollPaging' +import { Button, Canvas, ScrollView, Text, View } from '@tarojs/components' +import Taro, { useReady } from '@tarojs/taro' +import { useCallback, useEffect, useState } from 'react' +import { depositListApi } from '@/api/deposit' +import './index.scss' +import { formatDateTime, formatPriceDiv } from '@/common/fotmat' +import useLogin from '@/use/useLogin' -import AddressList from "@/components/AddressList" -import InfiniteScrollPaging from "@/components/InfiniteScrollPaging" -import { Button, Canvas, ScrollView, Text, View } from "@tarojs/components" -import Taro, { useReady } from "@tarojs/taro" -import { useCallback, useEffect, useState } from "react" -import { depositListApi } from "@/api/deposit" -import "./index.scss" -import { formatDateTime, formatPriceDiv } from "@/common/fotmat" -import useLogin from "@/use/useLogin" - -export default ()=>{ +export default () => { useLogin() - const {fetchData, state} = depositListApi(); + const { fetchData, state } = depositListApi() // 渲染（数据） const [data, setData] = useState({ list: [], - total: 0 - }); + total: 0, + }) // 数据更新 - const handleChange = useCallback((result)=>{ + const handleChange = useCallback((result) => { setData({ list: result.data.list, - total: result.data.total + total: result.data.total, }) }, []) return ( - + - { - data.list?.map((item,index)=>{ - return ( - - - {(item as any).type_name} - {formatDateTime((item as any).create_time)} - + {data.list?.map((item, index) => { + let res: any = item + return ( + res.amount_received_this_time != 0 && ( + + + {res.type_name} + {formatDateTime(res.create_time)} - - - - {[1,2,3].includes((item as any).type as never)?"+":"-"}{formatPriceDiv((item as any).amount_received_this_time)} + + + + {[1, 2, 3].includes(res.type as never) ? '+' : '-'} + {formatPriceDiv(res.amount_received_this_time)} {/* 处理中 */} - + ) - }) - } + ) + })} {/* {data.length>0&&} */} - + ) diff --git a/src/pages/index/index.tsx b/src/pages/index/index.tsx index 93d3183..00aa5ca 100644 --- a/src/pages/index/index.tsx +++ b/src/pages/index/index.tsx @@ -14,7 +14,6 @@ import useLogin from '@/use/useLogin' import { dataLoadingStatus } from '@/common/util' export default () => { - useLogin() useEffect(() => { categoryList() @@ -29,7 +28,6 @@ export default () => { setKindData({ ...kindData, list: res.data.list, defaultId: res.data.list[0].id }) setFiltrate({ ...filtrate, product_kind_id: res.data.list[0].id }) } - } //获取面料列表 @@ -46,17 +44,14 @@ export default () => { } //监听查询条件 useEffect(() => { - if (filtrate.product_kind_id) - getProductList() + if (filtrate.product_kind_id) getProductList() }, [filtrate]) - //点击面料类型 const getProductKindId = useCallback((e) => { pageNum.current.page = 1 setProductData({ list: [], total: 0 }) setFiltrate((list) => ({ ...list, size: 5, product_kind_id: e.id })) - // setHasMore(true) }, []) //上拉加载数据 @@ -70,7 +65,6 @@ export default () => { } }, [productData]) - const [showShopCart, setShowShopCart] = useState(false) //列表下拉刷新 @@ -87,27 +81,36 @@ export default () => { return dataLoadingStatus({ list: productData.list, total: productData.total, status: productState.loading }) }, [productData, productState.loading]) - return ( setShowShopCart(!showShopCart)}> - goLink('/pages/collection/index')}>我的收藏 + goLink('/pages/collection/index')}> + 我的收藏 + goLink('/pages/searchList/search')}> - getRefresherRefresh()}> + getRefresherRefresh()}> setShowShopCart(false)} /> - ) } - diff --git a/src/pages/order/comfirm.module.scss b/src/pages/order/comfirm.module.scss index 56db54b..b43e26c 100644 --- a/src/pages/order/comfirm.module.scss +++ b/src/pages/order/comfirm.module.scss @@ -1,133 +1,132 @@ -.order_main{ - min-height: 100%; - background-color:$color_bg_one; - padding: 20px; - padding-bottom: 190px; +.order_main { + min-height: 100%; + background-color: $color_bg_one; + padding: 20px; + padding-bottom: 190px; + box-sizing: border-box; + + .order_title { + display: flex; + align-items: center; + padding: 20px 30px; box-sizing: border-box; - - .order_title{ - display: flex; - align-items: center; - padding: 20px 30px; - box-sizing: border-box; - background-color: #fff; - height: 116px; - border-radius: 20px; - margin-top: 20px; - text{ - flex:1; - font-size: $font_size; - font-weight: 700; - } - .order_status{ - background-color: #F0F0F0; - width: 148px; - height: 55px; - color: $color_font_three; - text-align: center; - line-height: 55px; - font-size: $font_size_medium; - border-radius: 30px; - &:nth-last-child(1) { - margin-left: 20px; - } - } - .order_status_selected{ - color: $color_main; - border: 1px solid $color_main; - } + background-color: #fff; + height: 116px; + border-radius: 20px; + margin-top: 20px; + text { + flex: 1; + font-size: $font_size; + font-weight: 700; } - .order_desc{ - display: flex; - align-items: center; - background-color: #fff; - padding: 20px; - min-height: 116px; - border-radius: 20px; - margin-top: 20px; - box-sizing: border-box; - .order_desc_con{ - width: 150px; - font-size: $font_size; - font-weight: 700; - } - .order_desc_text, .order_desc_text_hint{ - font-size: $font_size_medium; - margin-right: 10px; - flex:1; - } - .order_desc_text_hint{ - text-align: right; - color: $color_font_two; - } - .miconfont{ - font-size: 20px; - color: $color_font_two; - } + .order_status { + background-color: #f0f0f0; + width: 148px; + height: 55px; + color: $color_font_three; + text-align: center; + line-height: 55px; + font-size: $font_size_medium; + border-radius: 30px; + &:nth-last-child(1) { + margin-left: 20px; + } } - .submit_order{ - display: flex; - position: fixed; - bottom: 0; - left: 0; - justify-content: space-between; - width: 100%; - height: 175px; - align-items: center; - background-color: #fff; - box-shadow: 6px 0px 12px 0px rgba(0,0,0,0.16); - padding: 20px 50px; - box-sizing: border-box; - padding-bottom: constant(safe-area-inset-bottom); - padding-bottom: env(safe-area-inset-bottom); - .submit_order_number{ - padding: 20px 0; - } - .order_btn { - width: 250px; - height: 90px; - opacity: 0.6; - background: linear-gradient(38deg,#007aff, #4fa6ff 100%, #68b4ff 100%); - border-radius: 46px; - display: flex; - justify-content: center; - align-items: center; - color: #fff; - } - .ok_order_btn { - opacity: 1; - } - .order_number_desc{ - font-size: $font_size_medium; - color: $color_font_two; - } + .order_status_selected { + color: $color_main; + border: 1px solid $color_main; } - .order_info{ - background-color: #fff; - margin-top: 20px; - border-radius: 20px; - padding: 20px; - .order_info_title{ - font-size: $font_size; - font-weight: 700; - margin-bottom: 20px; - - } - .order_num{ - display: flex; - justify-content: space-between; - align-items: center; - .order_num_btn{ - font-size: $font_size_medium; - padding: 5px 10px; - border: 2px solid #007cf7; - border-radius: 10px; - color: $color_main; - } - } - text{ - font-size: $font_size; - } - + } + .order_desc { + display: flex; + align-items: center; + background-color: #fff; + padding: 20px; + min-height: 116px; + border-radius: 20px; + margin-top: 20px; + box-sizing: border-box; + .order_desc_con { + width: 150px; + font-size: $font_size; + font-weight: 700; } -} \ No newline at end of file + .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; + } + } +} diff --git a/src/pages/order/comfirm.tsx b/src/pages/order/comfirm.tsx index b3fa751..7e2a243 100644 --- a/src/pages/order/comfirm.tsx +++ b/src/pages/order/comfirm.tsx @@ -1,200 +1,209 @@ -import { SaleOrderPreViewApi, SaleOrderApi } from "@/api/order"; -import { formatPriceDiv } from "@/common/fotmat"; -import Popup from "@/components/popup"; -import { View } from "@tarojs/components" -import Taro, { useDidShow, usePullDownRefresh} from "@tarojs/taro"; -import classnames from "classnames"; -import { useCallback, useEffect, useMemo, useRef, useState } from "react"; -import KindList from "./components/kindList"; -import Remark from "./components/remark"; -import styles from './comfirm.module.scss' -import { getParam } from "@/common/system"; -import { alert, goLink } from "@/common/common"; -import SubmitOrderBtn from "./components/submitOrderBtn"; -import AddressInfoDetail from "./components/addressInfoDetail"; -import { SubscriptionMessageApi } from "@/api/user"; -import { SUBSCRIPTION_MESSAGE_SCENE } from "@/common/enum"; -import { UseSubscriptionMessage } from "@/use/useCommon"; -import { throttle } from "@/common/util"; - - export default () => { - - const [showDesc, setShowDesc] = useState(false) - //下单信息 - type OrderParams = {address_id?: number, remark?: string, sale_mode?: number, shipment_mode?: number, list?: any[]} - const [submitOrderData, setSubmitOrderData] = useState() +import { SaleOrderPreViewApi, SaleOrderApi } from '@/api/order' +import { formatPriceDiv } from '@/common/fotmat' +import Popup from '@/components/popup' +import { View } from '@tarojs/components' +import Taro, { useDidShow, usePullDownRefresh } from '@tarojs/taro' +import classnames from 'classnames' +import { useCallback, useEffect, useMemo, useRef, useState } from 'react' +import KindList from './components/kindList' +import Remark from './components/remark' +import styles from './comfirm.module.scss' +import { getParam } from '@/common/system' +import { alert, goLink } from '@/common/common' +import SubmitOrderBtn from './components/submitOrderBtn' +import AddressInfoDetail from './components/addressInfoDetail' +import { SubscriptionMessageApi } from '@/api/user' +import { SUBSCRIPTION_MESSAGE_SCENE } from '@/common/enum' +import { UseSubscriptionMessage } from '@/use/useCommon' +import { throttle } from '@/common/util' - //获取购物车传过来的id - type orderPreParam = {shopping_cart_product_color_list:{shopping_cart_product_color_id:number}[], sale_mode:number} - const param = getParam() - const idsAndSaleModel = useRef({shopping_cart_product_color_list:[], sale_mode:0}) - useDidShow(async () => { - idsAndSaleModel.current = {shopping_cart_product_color_list:[], sale_mode:0} //初始化 - idsAndSaleModel.current.sale_mode = Number(param?.sale_mode) - param?.ids?.split('-')?.map(item => { - return idsAndSaleModel.current.shopping_cart_product_color_list?.push({ - shopping_cart_product_color_id: Number(item) - }) - }) - getSaleOrderPreView() - setSubmitOrderData((val) => ({...val, sale_mode:param?.sale_mode})) +export default () => { + const [showDesc, setShowDesc] = useState(false) + //下单信息 + type OrderParams = { address_id?: number; remark?: string; sale_mode?: number; shipment_mode?: number; list?: any[] } + const [submitOrderData, setSubmitOrderData] = useState() + + //获取购物车传过来的id + type orderPreParam = { + shopping_cart_product_color_list: { shopping_cart_product_color_id: number }[] + sale_mode: number + } + const param = getParam() + const idsAndSaleModel = useRef({ shopping_cart_product_color_list: [], sale_mode: 0 }) + useDidShow(async () => { + idsAndSaleModel.current = { shopping_cart_product_color_list: [], sale_mode: 0 } //初始化 + idsAndSaleModel.current.sale_mode = Number(param?.sale_mode) + param?.ids?.split('-')?.map((item) => { + return idsAndSaleModel.current.shopping_cart_product_color_list?.push({ + shopping_cart_product_color_id: Number(item), + }) }) + getSaleOrderPreView() + setSubmitOrderData((val) => ({ ...val, sale_mode: param?.sale_mode })) + }) - //获取销售预览订单 - const [preViewOrder, setPreViewOrder] = useState() //获取到的原始数据 - const {fetchData} = SaleOrderPreViewApi() - const getSaleOrderPreView = async () => { - if(idsAndSaleModel.current.shopping_cart_product_color_list?.length > 0) { - let res = await fetchData(idsAndSaleModel.current) - setPreViewOrder(res.data) - } + //获取销售预览订单 + const [preViewOrder, setPreViewOrder] = useState() //获取到的原始数据 + const { fetchData } = SaleOrderPreViewApi() + const getSaleOrderPreView = async () => { + if (idsAndSaleModel.current.shopping_cart_product_color_list?.length > 0) { + let res = await fetchData(idsAndSaleModel.current) + setPreViewOrder(res.data) } + } - //监听获取到的数据 - useEffect(() => { - if(preViewOrder) { - formatData() - getDataList() - setSubmitOrderData((val) => ({...val, address_id:preViewOrder.default_address.id, shipment_mode:preViewOrder.shipment_mode||2})) - } - }, [preViewOrder]) - - //格式化数据格式 - const [formatPreViewOrder, setFormatPreViewOrder] = useState() //格式化后的数据 - const formatData = () => { - setFormatPreViewOrder({ - estimate_amount: preViewOrder.estimate_amount, //预估金额 - sale_mode: preViewOrder.sale_mode, - sale_mode_name: preViewOrder.sale_mode_name, - total_colors: preViewOrder.total_colors, //总颜色数量 - total_number: preViewOrder.total_number, //总数量 - total_fabrics: preViewOrder.total_fabrics, //面料数量 - unit: preViewOrder.sale_mode == 0?'条':'m', //单位 - list: preViewOrder.product_list, - total_should_collect_money: preViewOrder.total_should_collect_money, //应收金额 - total_sale_price: preViewOrder.total_sale_price //合计金额 - }) + //监听获取到的数据 + useEffect(() => { + if (preViewOrder) { + formatData() + getDataList() + setSubmitOrderData((val) => ({ + ...val, + address_id: preViewOrder.default_address.id, + shipment_mode: preViewOrder.shipment_mode || 2, + })) } - const formatPreViewOrderMemo = useMemo(() => { - return formatPreViewOrder - }, [formatPreViewOrder]) + }, [preViewOrder]) - //格式化初始地址 - const defaultAddress = useMemo(() => { - const address = preViewOrder?.default_address - return { - province_name: address?.province_name, - city_name: address?.city_name, - district_name: address?.district_name, - address_detail: address?.address_detail, - id: address?.id, - target_user_name: address?.name, - target_user_phone: address?.phone, - shipment_mode: address?.shipment_mode, - take_goods_address: preViewOrder?.take_goods_address, - take_goods_phone: preViewOrder?.take_goods_phone, - } - }, [preViewOrder]) - - //获取提交格式数据列表 - const getDataList = () => { - let list:{shopping_cart_product_color_id:number}[] = [] - preViewOrder.product_list?.map(item => { - item.product_colors?.map(colorItem => { - list.push({shopping_cart_product_color_id:colorItem.id}) - }) - }) - setSubmitOrderData((val) => ({...val, list})) - } - - //获取地址 - const getAddress = (e) => { - setSubmitOrderData((val) => ({...val, address_id:e.id})) - } - - const selectShipmentMode = useCallback((value) => { - setSubmitOrderData((val) => ({...val, shipment_mode:value})) - }, []) - - //获取备注 - const getRemark = useCallback((e) => { - setSubmitOrderData((val) => ({...val, remark:e})) - setShowDesc(() => false) - }, []) - - //提交按钮是否可用 - const btnStatus = useMemo(() => { - return submitOrderData?.shipment_mode == 1 || (submitOrderData?.shipment_mode == 2 && submitOrderData?.address_id) - }, [submitOrderData]) - - //数量格式 - const numText = useMemo(() => { - if(formatPreViewOrder) { - let total_number = formatPreViewOrder?.sale_mode == 0?formatPreViewOrder?.total_number:(formatPreViewOrder?.total_number/100) - return `${formatPreViewOrder?.total_fabrics} 种面料，${formatPreViewOrder?.total_colors} 种颜色，共 ${total_number} ${formatPreViewOrder?.unit}` - } - }, [formatPreViewOrder]) - - //订阅消息 - const {SubmitOrder} = SUBSCRIPTION_MESSAGE_SCENE - const {openSubscriptionMessage} = UseSubscriptionMessage() - - //提交订单 - const {fetchData: saleOrderFetchData} = SaleOrderApi() - const submitOrderEven = throttle(async () => { - if(!submitOrderData?.shipment_mode) { - alert.error('请选择收货方式') - return false - } - if(!submitOrderData?.address_id&&submitOrderData?.shipment_mode == 2) { - alert.error('请选择地址') - return false - } - let showModalRes = await Taro.showModal({ - title: '确定提交订单?', - content: `发货方式为${submitOrderData?.shipment_mode == 1?'自提':'物流'}`, - confirmText: '确定', - cancelText: '取消', - }) - if(showModalRes.confirm) { - await openSubscriptionMessage({scenes: SubmitOrder.value}) - const res = await saleOrderFetchData(submitOrderData) - if(res.success) { - goLink('/pages/order/index',{id: res.data.id}, 'redirectTo') - } else { - alert.none(res.msg) - } - } - }, 800) - - //页面下拉刷新 - usePullDownRefresh(() => { - getSaleOrderPreView() + //格式化数据格式 + const [formatPreViewOrder, setFormatPreViewOrder] = useState() //格式化后的数据 + const formatData = () => { + setFormatPreViewOrder({ + estimate_amount: preViewOrder.estimate_amount, //预估金额 + sale_mode: preViewOrder.sale_mode, + sale_mode_name: preViewOrder.sale_mode_name, + total_colors: preViewOrder.total_colors, //总颜色数量 + total_number: preViewOrder.total_number, //总数量 + total_fabrics: preViewOrder.total_fabrics, //面料数量 + unit: preViewOrder.sale_mode == 0 ? '条' : 'm', //单位 + list: preViewOrder.product_list, + total_should_collect_money: preViewOrder.total_should_collect_money, //应收金额 + total_sale_price: preViewOrder.total_sale_price, //合计金额 }) + } + const formatPreViewOrderMemo = useMemo(() => { + return formatPreViewOrder + }, [formatPreViewOrder]) - return ( - - - - setShowDesc(true)}> - 订单备注 - { - submitOrderData?.remark&&{submitOrderData?.remark}|| - 填写备注 - } - - - - - - {numText} - - submitOrderEven()}>提交订单 - - setShowDesc(false)} > - getRemark(e)}/> - - + //格式化初始地址 + const defaultAddress = useMemo(() => { + const address = preViewOrder?.default_address + return { + province_name: address?.province_name, + city_name: address?.city_name, + district_name: address?.district_name, + address_detail: address?.address_detail, + id: address?.id, + target_user_name: address?.name, + target_user_phone: address?.phone, + shipment_mode: address?.shipment_mode, + take_goods_address: preViewOrder?.take_goods_address, + take_goods_phone: preViewOrder?.take_goods_phone, + } + }, [preViewOrder]) + + //获取提交格式数据列表 + const getDataList = () => { + let list: { shopping_cart_product_color_id: number }[] = [] + preViewOrder.product_list?.map((item) => { + item.product_colors?.map((colorItem) => { + list.push({ shopping_cart_product_color_id: colorItem.id }) + }) + }) + setSubmitOrderData((val) => ({ ...val, list })) + } + + //获取地址 + const getAddress = (e) => { + setSubmitOrderData((val) => ({ ...val, address_id: e.id })) + } + + const selectShipmentMode = useCallback((value) => { + setSubmitOrderData((val) => ({ ...val, shipment_mode: value })) + }, []) + + //获取备注 + const getRemark = useCallback((e) => { + setSubmitOrderData((val) => ({ ...val, remark: e })) + setShowDesc(() => false) + }, []) + + //提交按钮是否可用 + const btnStatus = useMemo(() => { + return submitOrderData?.shipment_mode == 1 || (submitOrderData?.shipment_mode == 2 && submitOrderData?.address_id) + }, [submitOrderData]) + + //数量格式 + const numText = useMemo(() => { + if (formatPreViewOrder) { + let total_number = formatPreViewOrder?.sale_mode == 0 ? formatPreViewOrder?.total_number : formatPreViewOrder?.total_number / 100 + return `${formatPreViewOrder?.total_fabrics} 种面料，${formatPreViewOrder?.total_colors} 种颜色，共 ${total_number} ${formatPreViewOrder?.unit}` + } + }, [formatPreViewOrder]) + + //订阅消息 + const { SubmitOrder } = SUBSCRIPTION_MESSAGE_SCENE + const { openSubscriptionMessage } = UseSubscriptionMessage() + + //提交订单 + const { fetchData: saleOrderFetchData } = SaleOrderApi() + const submitOrderEven = throttle(async () => { + if (!submitOrderData?.shipment_mode) { + alert.error('请选择收货方式') + return false + } + if (!submitOrderData?.address_id && submitOrderData?.shipment_mode == 2) { + alert.error('请选择地址') + return false + } + let showModalRes = await Taro.showModal({ + title: '确定提交订单?', + content: `发货方式为${submitOrderData?.shipment_mode == 1 ? '自提' : '物流'}`, + confirmText: '确定', + cancelText: '取消', + }) + if (showModalRes.confirm) { + await openSubscriptionMessage({ scenes: SubmitOrder.value }) + const res = await saleOrderFetchData(submitOrderData) + if (res.success) { + goLink('/pages/order/index', { id: res.data.id }, 'redirectTo') + } else { + alert.none(res.msg) + } + } + }, 800) + + //页面下拉刷新 + usePullDownRefresh(() => { + getSaleOrderPreView() + }) + + return ( + + + + setShowDesc(true)}> + 订单备注 + {(submitOrderData?.remark && {submitOrderData?.remark}) || 填写备注} + + + + + + {numText} - ) - } + submitOrderEven()}> + 提交订单 + + + setShowDesc(false)}> + getRemark(e)} /> + + + + ) +} diff --git a/src/pages/order/components/kindList/index.tsx b/src/pages/order/components/kindList/index.tsx index 6023d56..c4e5617 100644 --- a/src/pages/order/components/kindList/index.tsx +++ b/src/pages/order/components/kindList/index.tsx @@ -1,215 +1,240 @@ -import { ORDER_STATUS } from "@/common/enum" -import { formatHashTag, formatPriceDiv, formatWeightDiv } from "@/common/fotmat" -import EstimatedAmount from "@/components/estimatedAmount" -import LabAndImg from "@/components/LabAndImg" -import { Text, View } from "@tarojs/components" -import { memo, useCallback, useMemo, useState } from "react" -import styles from './index.module.scss' +import { ORDER_STATUS } from '@/common/enum' +import { formatHashTag, formatPriceDiv, formatWeightDiv } from '@/common/fotmat' +import EstimatedAmount from '@/components/estimatedAmount' +import LabAndImg from '@/components/LabAndImg' +import { Text, View } from '@tarojs/components' +import { memo, useCallback, useMemo, useState } from 'react' +import styles from './index.module.scss' type OrderParam = { - estimate_amount: number, //预估金额 - list: any[], - sale_mode: number, - sale_mode_name: string, - unit: string, - total_colors: number, - total_fabrics: number, - total_number: number, - status: number, //订单状态 - total_sale_price: number, //合计金额 - total_weight_error_discount: number, //空差优惠 - the_previous_status: number, //取消订单时的订单状态 - actual_amount: number, //实付金额 - wait_pay_amount: number, //待付金额 - refund_amount: number //退款金额 + estimate_amount: number //预估金额 + list: any[] + sale_mode: number + sale_mode_name: string + unit: string + total_colors: number + total_fabrics: number + total_number: number + status: number //订单状态 + total_sale_price: number //合计金额 + total_weight_error_discount: number //空差优惠 + the_previous_status: number //取消订单时的订单状态 + actual_amount: number //实付金额 + wait_pay_amount: number //待付金额 + refund_amount: number //退款金额 } type Param = { - order: OrderParam, - comfirm?: boolean //是否是确认订单页面使用 + order: OrderParam + comfirm?: boolean //是否是确认订单页面使用 } -export default memo(({order, comfirm = false}:Param) => { - - const { - SaleOrderStatusBooking, // 待接单 - SaleOrderStatusArranging, // 配布中 - SaleOrderStatusArranged, // 已配布 - SaleOrderStatusWaitingPayment, // 待付款 - SaleOrderStatusWaitingDelivery, // 待发货 - SaleOrderStatusWaitingReceipt, // 待收货 - SaleOrderStatusAlreadyReceipt, // 已收货 - SaleOrderStatusComplete, // 已完成 - SaleOrderStatusRefund, // 已退款 - SaleOrderStatusCancel, // 已取消 - SaleorderstatusWaitingPrePayment, // 预付款 - SaleOrderStatusTaking //提货 - } = ORDER_STATUS +export default memo(({ order, comfirm = false }: Param) => { + const { + SaleOrderStatusBooking, // 待接单 + SaleOrderStatusArranging, // 配布中 + SaleOrderStatusArranged, // 已配布 + SaleOrderStatusWaitingPayment, // 待付款 + SaleOrderStatusWaitingDelivery, // 待发货 + SaleOrderStatusWaitingReceipt, // 待收货 + SaleOrderStatusAlreadyReceipt, // 已收货 + SaleOrderStatusComplete, // 已完成 + SaleOrderStatusRefund, // 已退款 + SaleOrderStatusCancel, // 已取消 + SaleorderstatusWaitingPrePayment, // 预付款 + SaleOrderStatusTaking, //提货 + } = ORDER_STATUS - //注册金额 - type orderPriceListParams = {id: number, label: string, field: string, message: string, validatarFunc: (val: typeof order) => any} - const priceList:orderPriceListParams[] = [ - { - id:1, - label:'预估金额', - field: 'estimate_amount', - message: '预估金额按生产商定义的标准匹重计算，仅供参考。详细交易金额以出单为准！', - validatarFunc: (order) => { - return order['estimate_amount'] > 0 && order['total_sale_price'] <= 0 - } - }, - { - id:2, - label:'合计金额', - field: 'total_sale_price', - message: '包含空差的货款金额', - validatarFunc: (order) => { - return order['total_sale_price'] > 0 - } - }, - { - id:3, - label:'空差优惠', - field: 'total_weight_error_discount', - message: '扣除空差金额', - validatarFunc: (order) => { - return order['total_weight_error_discount'] > 0 - } - }, - { - id:5, - label:'实付金额', - field: 'actual_amount', - message: '本单实付总金额', - validatarFunc: (order) => { - return order['actual_amount'] > 0 - } - }, - { - id:4, - label:'待付金额', - field: 'wait_pay_amount', - message: '扣除空差后的货款金额', - validatarFunc: (order) => { - return order['wait_pay_amount'] > 0 - } - }, - { - id:6, - label:'退款金额', - field: 'refund_amount', - message: '已退款金额', - validatarFunc: (order) => { - return order['refund_amount'] > 0 - } - }, - - ] + //注册金额 + type orderPriceListParams = { + id: number + label: string + field: string + message: string + validatarFunc: (val: typeof order) => any + } + const priceList: orderPriceListParams[] = [ + { + id: 1, + label: '预估金额', + field: 'estimate_amount', + message: '预估金额按生产商定义的标准匹重计算，仅供参考。详细交易金额以出单为准！', + validatarFunc: (order) => { + return order['estimate_amount'] > 0 && order['total_sale_price'] <= 0 + }, + }, + { + id: 2, + label: '合计金额', + field: 'total_sale_price', + message: '包含空差的货款金额', + validatarFunc: (order) => { + return order['total_sale_price'] > 0 + }, + }, + { + id: 3, + label: '空差优惠', + field: 'total_weight_error_discount', + message: '扣除空差金额', + validatarFunc: (order) => { + return order['total_weight_error_discount'] > 0 + }, + }, + { + id: 5, + label: '实付金额', + field: 'actual_amount', + message: '本单实付总金额', + validatarFunc: (order) => { + return order['actual_amount'] > 0 + }, + }, + { + id: 4, + label: '待付金额', + field: 'wait_pay_amount', + message: '扣除空差后的货款金额', + validatarFunc: (order) => { + return order['wait_pay_amount'] > 0 + }, + }, + { + id: 6, + label: '退款金额', + field: 'refund_amount', + message: '已退款金额', + validatarFunc: (order) => { + return order['refund_amount'] > 0 + }, + }, + ] - //订单流程金额展示 - const priceConDom = useMemo(() => { - if(!order) return - return ( - <> - { - priceList.map(item => { - return <>{item.validatarFunc(order)&&} - }) - } - - ) - }, [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 - }, [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?; ≈{formatWeightDiv(weight)}kg:<> - } - return <> - }, [order]) - + //订单流程金额展示 + const priceConDom = useMemo(() => { + if (!order) return return ( - <> - {numText} - - { - order?.list?.map(item => { - return - - {order.sale_mode_name} - {formatHashTag(item.code, item.name)} - 共{item?.product_colors.length}种 - - - {item?.product_colors?.map(colorItem => { - return - - - - - - - {colorItem.code + ' ' + colorItem.name} - {(colorItem?.return_roll > 0)&&{`已退${colorItem?.return_roll}条`}} - {(colorItem?.apply_return_roll > 0)&&{`待退${colorItem?.apply_return_roll}条`}} - - - ¥{standardPrice(colorItem.sale_price)} - {aboutWeight(colorItem.estimate_weight)} - - - - ×{formatCount(colorItem)}{order.unit} - ¥{colorPrice(colorItem)} - - - - })} - - - }) - } - - {showPriceConDom} - - - + <> + {priceList.map((item) => { + return <>{item.validatarFunc(order) && } + })} + ) -}) \ No newline at end of file + }, [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 + }, [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 ? ( + + ; ≈{formatWeightDiv(weight)}kg + + ) : ( + <> + ) + } + return <> + }, + [order], + ) + + return ( + <> + {numText} + + {order?.list?.map((item) => { + return ( + + + {order.sale_mode_name} + {formatHashTag(item.code, item.name)} + 共{item?.product_colors.length}种 + + + {item?.product_colors?.map((colorItem) => { + return ( + + + + + + + + {colorItem.code + ' ' + colorItem.name} + {colorItem?.return_roll > 0 && {`已退${colorItem?.return_roll}条`}} + {colorItem?.apply_return_roll > 0 && {`待退${colorItem?.apply_return_roll}条`}} + + + ¥{standardPrice(colorItem.sale_price)} + {aboutWeight(colorItem.estimate_weight)} + + + + + ×{formatCount(colorItem)} + {order.unit} + + + ¥ + {colorPrice(colorItem)} + + + + + ) + })} + + + ) + })} + {showPriceConDom} + + + ) +}) diff --git a/src/pages/order/components/scanPay/index.tsx b/src/pages/order/components/scanPay/index.tsx index 25af78c..91aa2a1 100644 --- a/src/pages/order/components/scanPay/index.tsx +++ b/src/pages/order/components/scanPay/index.tsx @@ -1,195 +1,197 @@ -import { Image, ScrollView, Text, View } from "@tarojs/components"; -import { memo, useEffect, useRef, useState } from "react"; -import classnames from "classnames"; -import styles from './index.module.scss' -import Popup from "@/components/popup"; -import Taro from "@tarojs/taro"; -import { alert } from "@/common/common"; -import { formatDateTime, formatHashTag, formatImgUrl, formatPriceDiv, formatWeightDiv } from "@/common/fotmat"; -import useCheckAuthorize from "@/use/useCheckAuthorize"; -import { GetPayCode } from "@/api/onlinePay"; -import LoadingCard from "@/components/loadingCard"; - +import { Image, ScrollView, Text, View } from '@tarojs/components' +import { memo, useEffect, useRef, useState } from 'react' +import classnames from 'classnames' +import styles from './index.module.scss' +import Popup from '@/components/popup' +import Taro from '@tarojs/taro' +import { alert } from '@/common/common' +import { formatDateTime, formatHashTag, formatImgUrl, formatPriceDiv, formatWeightDiv } from '@/common/fotmat' +import useCheckAuthorize from '@/use/useCheckAuthorize' +import { GetPayCode } from '@/api/onlinePay' +import LoadingCard from '@/components/loadingCard' type Param = { - show?: true|false, - onClose?: () => void, - company?: string, - qrcode?: string, - orderInfo?: any, - + show?: true | false + onClose?: () => void + company?: string + qrcode?: string + orderInfo?: any } type ListParam = { - product_code: string, - product_name: string, - product_color_code: string, - product_color_name: string, - num: string, - weight: string, - length: string, - sale_price: string, - total_price: string + product_code: string + product_name: string + product_color_code: string + product_color_name: string + num: string + weight: string + length: string + sale_price: string + total_price: string + weight_error: string } -export default memo(({show = true, onClose, company, orderInfo}:Param) => { - const [detail, setDetail] = useState() - - useEffect(() => { - if(orderInfo) { - let lists:ListParam[] = [] - orderInfo.product_list?.map(pitem => { - pitem?.product_colors?.map(citem => { - lists.push({ - product_code: formatHashTag(pitem.code, '', 'name')!, - product_name: pitem.name, - product_color_code: formatHashTag(citem.code)!, - product_color_name: citem.name, - num: citem.roll.toString(), - length: (citem.length/100).toString(), - weight: formatWeightDiv(citem.actual_weight||citem.estimate_weight).toString(), - sale_price: formatPriceDiv(citem.sale_price).toString(), - total_price: formatPriceDiv(citem.estimate_amount).toString(), - }) - }) - }) - setDetail(() => ({ - title: "面料销售电子确认单", - company: orderInfo.company_name, //后端公司 - order_type: orderInfo.sale_mode_name, //类型：大货 - sale_user: orderInfo.sale_user_name, //业务员 - order_created_time: formatDateTime(orderInfo.create_time), - order_no: orderInfo.order_no, - shipment_mode: orderInfo.shipment_mode_name, //发货方式 - target_user_name: userName(orderInfo), //收件人 - target_address: address(orderInfo), //收货地址 - target_description: orderInfo.remark, //发货备注 - pay_account: orderInfo.offline_remittance_information?.transfer_remittance_account, //专属收款账号 - bank_account_name: orderInfo.offline_remittance_information?.account_name, //账户名称 - bank_name: orderInfo.offline_remittance_information?.bank_of_deposit, //开户银行 - pay_type:"", //支付方式, 可不传 - client: orderInfo.purchaser_name, //客户名称 - phone: userPhone(orderInfo), //收货手机号码 - order_total_length: (orderInfo.total_number/100).toString(), //订单布匹长度 - order_total_price: formatPriceDiv(orderInfo.bill_total_sale_price).toString(), //订单价格 - order_total_num: (orderInfo.total_number) + '', - qrcode:"", //跳转链接 - order_total_weight: formatWeightDiv(orderInfo.total_weight||orderInfo.total_estimate_weight).toString(), //订单布匹重量 - list: lists , - show_qrcode: true, //是否显示码单 +export default memo(({ show = true, onClose, company, orderInfo }: Param) => { + const [detail, setDetail] = useState() - estimate_amount: formatPriceDiv(orderInfo.estimate_amount).toString(), - show_estimate_amount: orderInfo.estimate_amount > 0 && orderInfo.total_sale_price <= 0, - total_sale_price: formatPriceDiv(orderInfo.total_sale_price).toString(), - show_total_sale_price: orderInfo.total_sale_price > 0, - total_weight_error_discount: formatPriceDiv(orderInfo.total_weight_error_discount).toString(), - show_total_weight_error_discount: orderInfo.total_weight_error_discount > 0, - actual_amount: formatPriceDiv(orderInfo.actual_amount).toString(), - show_actual_amount: orderInfo.actual_amount > 0, - wait_pay_amount: formatPriceDiv(orderInfo.wait_pay_amount).toString(), - show_wait_pay_amount: orderInfo.wait_pay_amount > 0, - show_barcode: true - })) - } - }, [orderInfo]) - - //收货地址 - const address = (addressInfo) => { - if(addressInfo?.shipment_mode == 2) { - return addressInfo?.province_name?addressInfo.province_name + addressInfo.city_name + addressInfo.district_name + addressInfo.address_detail:'' - } else { - return addressInfo?.take_goods_address - } + useEffect(() => { + if (orderInfo) { + let lists: ListParam[] = [] + orderInfo.product_list?.map((pitem) => { + pitem?.product_colors?.map((citem) => { + lists.push({ + product_code: formatHashTag(pitem.code, '', 'name')!, + product_name: pitem.name, + product_color_code: formatHashTag(citem.code)!, + product_color_name: citem.name, + num: citem.roll.toString(), + length: (citem.length / 100).toString(), + weight: formatWeightDiv(citem.actual_weight || citem.estimate_weight).toString(), + sale_price: formatPriceDiv(citem.sale_price).toString(), + total_price: formatPriceDiv(citem.estimate_amount).toString(), + weight_error: formatWeightDiv(citem.weight_error).toString(), + }) + }) + }) + setDetail(() => ({ + title: '面料销售电子确认单', + company: orderInfo.company_name, //后端公司 + order_type: orderInfo.sale_mode_name, //类型：大货 + sale_user: orderInfo.sale_user_name, //业务员 + order_created_time: formatDateTime(orderInfo.create_time), + order_no: orderInfo.order_no, + shipment_mode: orderInfo.shipment_mode_name, //发货方式 + target_user_name: userName(orderInfo), //收件人 + target_address: address(orderInfo), //收货地址 + target_description: orderInfo.remark, //发货备注 + pay_account: orderInfo.offline_remittance_information?.transfer_remittance_account, //专属收款账号 + bank_account_name: orderInfo.offline_remittance_information?.account_name, //账户名称 + bank_name: orderInfo.offline_remittance_information?.bank_of_deposit, //开户银行 + pay_type: '', //支付方式, 可不传 + client: orderInfo.purchaser_name, //客户名称 + phone: userPhone(orderInfo), //收货手机号码 + order_total_length: (orderInfo.total_number / 100).toString(), //订单布匹长度 + order_total_price: formatPriceDiv(orderInfo.bill_total_sale_price).toString(), //订单价格 + order_total_num: orderInfo.total_number + '', + qrcode: '', //跳转链接 + order_total_weight: formatWeightDiv(orderInfo.total_weight || orderInfo.total_estimate_weight).toString(), //订单布匹重量 + list: lists, + show_qrcode: true, //是否显示码单 + estimate_amount: formatPriceDiv(orderInfo.estimate_amount).toString(), + show_estimate_amount: orderInfo.estimate_amount > 0 && orderInfo.total_sale_price <= 0, + total_sale_price: formatPriceDiv(orderInfo.total_sale_price).toString(), + show_total_sale_price: orderInfo.total_sale_price > 0, + total_weight_error_discount: formatPriceDiv(orderInfo.total_weight_error_discount).toString(), + show_total_weight_error_discount: orderInfo.total_weight_error_discount > 0, + actual_amount: formatPriceDiv(orderInfo.actual_amount).toString(), + show_actual_amount: orderInfo.actual_amount > 0, + wait_pay_amount: formatPriceDiv(orderInfo.wait_pay_amount).toString(), + show_wait_pay_amount: orderInfo.wait_pay_amount > 0, + show_barcode: true, + })) } + }, [orderInfo]) - //收件人 - const userName = (addressInfo) => { - return addressInfo?.shipment_mode == 2? orderInfo.target_user_name: '' + //收货地址 + const address = (addressInfo) => { + if (addressInfo?.shipment_mode == 2) { + return addressInfo?.province_name ? addressInfo.province_name + addressInfo.city_name + addressInfo.district_name + addressInfo.address_detail : '' + } else { + return addressInfo?.take_goods_address } + } - //手机号 - const userPhone = (addressInfo) => { - return addressInfo?.shipment_mode == 2? orderInfo.target_user_phone : orderInfo.take_goods_phone - } - + //收件人 + const userName = (addressInfo) => { + return addressInfo?.shipment_mode == 2 ? orderInfo.target_user_name : '' + } - //获取支付二维码 - const [payCodeImage, setPayCodeImage] = useState('') - const fileData = useRef({ - filePath: '', - base64: '' + //手机号 + const userPhone = (addressInfo) => { + return addressInfo?.shipment_mode == 2 ? orderInfo.target_user_phone : orderInfo.take_goods_phone + } + + //获取支付二维码 + const [payCodeImage, setPayCodeImage] = useState('') + const fileData = useRef({ + filePath: '', + base64: '', + }) + const { fetchData, state } = GetPayCode() + const getCore = async () => { + let res = await fetchData(detail) + const base64 = res.data.base64 + setPayCodeImage(() => base64) + const time = new Date().valueOf() + const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64) || [] + let filePath = Taro.env.USER_DATA_PATH + '/img' + time + '.' + format + fileData.current.filePath = filePath + fileData.current.base64 = bodyData + const save = Taro.getFileSystemManager() + save.writeFile({ + filePath: fileData.current.filePath, + data: fileData.current.base64, + encoding: 'base64', }) - const {fetchData, state} = GetPayCode() - const getCore = async () => { - let res = await fetchData(detail) - const base64 = res.data.base64 - setPayCodeImage(() => base64) - const time = new Date().valueOf() - const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64) || []; - let filePath = Taro.env.USER_DATA_PATH + '/img' + time +'.'+ format - fileData.current.filePath = filePath - fileData.current.base64 = bodyData - const save = Taro.getFileSystemManager() - save.writeFile({ - filePath: fileData.current.filePath, - data: fileData.current.base64, - encoding: 'base64', - }) - } - useEffect(() => { - if(show) - getCore() - }, [show]) + } + useEffect(() => { + if (show) getCore() + }, [show]) - //检查是否开启保存图片权限 - const {check} = useCheckAuthorize({scope:'scope.writePhotosAlbum', msg:'您没授权，无法保存图片'}) - const saveImageCheck = async () => { - const res = await check() - res&&saveImage() - } + //检查是否开启保存图片权限 + const { check } = useCheckAuthorize({ + scope: 'scope.writePhotosAlbum', + msg: '您没授权，无法保存图片', + }) + const saveImageCheck = async () => { + const res = await check() + res && saveImage() + } - //保存图片 - const saveImage = () => { - alert.loading('正在保存图片') - Taro.saveImageToPhotosAlbum({ - filePath: fileData.current.filePath, - success: function (res) { - alert.success('图片保存成功') - }, - fail: function (err) { - console.log('err::', err) - } - }) - } + //保存图片 + const saveImage = () => { + alert.loading('正在保存图片') + Taro.saveImageToPhotosAlbum({ + filePath: fileData.current.filePath, + success: function (res) { + alert.success('图片保存成功') + }, + fail: function (err) { + console.log('err::', err) + }, + }) + } - //预览图片 - const showImage = () => { - console.log('fileData.current.filePath::', fileData.current.filePath) - Taro.previewImage({ - current: fileData.current.filePath, // 当前显示 - urls: [fileData.current.filePath] // 需要预览的图片http链接列表 - }) - } - - //复制功能 - return ( - - - - - 扫码支付 - - - 扫码支付成功后，自动更新状态 - - - {(state.loading)&&|| - - - } - - 保存电子确认单 - - + //预览图片 + const showImage = () => { + console.log('fileData.current.filePath::', fileData.current.filePath) + Taro.previewImage({ + current: fileData.current.filePath, // 当前显示 + urls: [fileData.current.filePath], // 需要预览的图片http链接列表 + }) + } + + //复制功能 + return ( + + + + + 扫码支付 + + + 扫码支付成功后，自动更新状态 + + + {(state.loading && ) || ( + + + + )} + + + 保存电子确认单 + - - ) -}) \ No newline at end of file + + + ) +}) diff --git a/src/pages/order/components/scanPayCheck/index.tsx b/src/pages/order/components/scanPayCheck/index.tsx index 6b0fbe8..c457532 100644 --- a/src/pages/order/components/scanPayCheck/index.tsx +++ b/src/pages/order/components/scanPayCheck/index.tsx @@ -1,192 +1,193 @@ -import { Image, ScrollView, Text, View } from "@tarojs/components"; -import { memo, useEffect, useRef, useState } from "react"; -import classnames from "classnames"; -import styles from './index.module.scss' -import Popup from "@/components/popup"; -import Taro from "@tarojs/taro"; -import { alert } from "@/common/common"; -import { formatDateTime, formatPriceDiv, formatRemoveHashTag, formatWeightDiv } from "@/common/fotmat"; -import useCheckAuthorize from "@/use/useCheckAuthorize"; -import { GetPayCode } from "@/api/onlinePay"; -import LoadingCard from "@/components/loadingCard"; +import { Image, ScrollView, Text, View } from '@tarojs/components' +import { memo, useEffect, useRef, useState } from 'react' +import classnames from 'classnames' +import styles from './index.module.scss' +import Popup from '@/components/popup' +import Taro from '@tarojs/taro' +import { alert } from '@/common/common' +import { formatDateTime, formatPriceDiv, formatRemoveHashTag, formatWeightDiv } from '@/common/fotmat' +import useCheckAuthorize from '@/use/useCheckAuthorize' +import { GetPayCode } from '@/api/onlinePay' +import LoadingCard from '@/components/loadingCard' type Param = { - show?: true|false, - onClose?: () => void, - company?: string, - qrcode?: string, - orderInfo?: any, - + show?: true | false + onClose?: () => void + company?: string + qrcode?: string + orderInfo?: any } type ListParam = { - product_code: string, - product_name: string, - product_color_code: string, - product_color_name: string, - num: string, - weight: string, - length: string, - sale_price: string, - total_price: string, - weight_error: string + product_code: string + product_name: string + product_color_code: string + product_color_name: string + num: string + weight: string + length: string + sale_price: string + total_price: string + weight_error: string } -export default memo(({show = true, onClose, company, orderInfo}:Param) => { - const [detail, setDetail] = useState() - - useEffect(() => { - if(show) { - getCore() - } - }, [show]) - - useEffect(() => { - if(orderInfo) { - let lists:ListParam[] = [] - orderInfo.product_list?.map(pitem => { - pitem?.product_colors?.map(citem => { - lists.push({ - product_code: formatRemoveHashTag(pitem.code), - product_name: pitem.name, - product_color_code: formatRemoveHashTag(citem.code), - product_color_name: citem.name, - num: citem.roll.toString(), - length: (citem.length/100).toString(), - weight: formatWeightDiv(citem.actual_weight||citem.estimate_weight).toString(), - sale_price: formatPriceDiv(citem.sale_price).toString(), - total_price: formatPriceDiv(citem.total_sale_price||citem.estimate_amount).toString(), - weight_error: formatWeightDiv(citem.weight_error).toString() - }) - }) - }) - setDetail(() => ({ - title: "面料销售电子确认单", - company: orderInfo.company_name, //后端公司 - order_type: orderInfo.sale_mode_name, //类型：大货 - sale_user: orderInfo.sale_user_name, //业务员 - order_created_time: formatDateTime(orderInfo.create_time), - order_no: orderInfo.order_no, - shipment_mode: orderInfo.shipment_mode_name, //发货方式 - target_user_name: userName(orderInfo), //收件人 - target_address: address(orderInfo), //收货地址 - target_description: orderInfo.remark, //发货备注 - pay_account: orderInfo.account, //专属收款账号 - bank_account_name: orderInfo.account_name, //账户名称 - bank_name: orderInfo.bank_of_deposit, //开户银行 - pay_type:"", //支付方式, 可不传 - client: orderInfo.purchaser_name, //客户名称 - phone: userPhone(orderInfo), //收货手机号码 - order_total_length: (orderInfo.total_number/100).toString(), //订单布匹长度 - order_total_price: formatPriceDiv(orderInfo.bill_total_sale_price).toString(), //订单价格 - order_total_num: (orderInfo.total_number).toString(), - qrcode:"", //跳转链接 - order_total_weight: formatWeightDiv(orderInfo.total_weight||orderInfo.total_estimate_weight).toString(), //订单布匹重量 - list: lists, +export default memo(({ show = true, onClose, company, orderInfo }: Param) => { + const [detail, setDetail] = useState() - estimate_amount: formatPriceDiv(orderInfo.estimate_amount).toString(), - show_estimate_amount: orderInfo.estimate_amount > 0 && orderInfo.total_sale_price <= 0, - total_sale_price: formatPriceDiv(orderInfo.total_sale_price).toString(), - show_total_sale_price: orderInfo.total_sale_price > 0, - total_weight_error_discount: formatPriceDiv(orderInfo.total_weight_error_discount).toString(), - show_total_weight_error_discount: orderInfo.total_weight_error_discount > 0, - actual_amount: formatPriceDiv(orderInfo.actual_amount).toString(), - show_actual_amount: orderInfo.actual_amount > 0, - wait_pay_amount: formatPriceDiv(orderInfo.wait_pay_amount).toString(), - show_wait_pay_amount: orderInfo.wait_pay_amount > 0, - show_barcode: true, - })) - } - }, [orderInfo]) - - //收货地址 - const address = (addressInfo) => { - if(addressInfo?.shipment_mode == 2) { - return addressInfo?.province_name?addressInfo.province_name + addressInfo.city_name + addressInfo.district_name + addressInfo.address_detail:'' - } else { - return addressInfo?.take_goods_address - } + useEffect(() => { + if (show) { + getCore() } + }, [show]) - //收件人 - const userName = (addressInfo) => { - return addressInfo?.shipment_mode == 2? orderInfo.target_user_name: '' - } + useEffect(() => { + if (orderInfo) { + let lists: ListParam[] = [] + orderInfo.product_list?.map((pitem) => { + pitem?.product_colors?.map((citem) => { + lists.push({ + product_code: formatRemoveHashTag(pitem.code), + product_name: pitem.name, + product_color_code: formatRemoveHashTag(citem.code), + product_color_name: citem.name, + num: citem.roll.toString(), + length: (citem.length / 100).toString(), + weight: formatWeightDiv(citem.actual_weight || citem.estimate_weight).toString(), + sale_price: formatPriceDiv(citem.sale_price).toString(), + total_price: formatPriceDiv(citem.total_sale_price || citem.estimate_amount).toString(), + weight_error: formatWeightDiv(citem.weight_error).toString(), + }) + }) + }) + setDetail(() => ({ + title: '面料销售电子确认单', + company: orderInfo.company_name, //后端公司 + order_type: orderInfo.sale_mode_name, //类型：大货 + sale_user: orderInfo.sale_user_name, //业务员 + order_created_time: formatDateTime(orderInfo.create_time), + order_no: orderInfo.order_no, + shipment_mode: orderInfo.shipment_mode_name, //发货方式 + target_user_name: userName(orderInfo), //收件人 + target_address: address(orderInfo), //收货地址 + target_description: orderInfo.remark, //发货备注 + pay_account: orderInfo.account, //专属收款账号 + bank_account_name: orderInfo.account_name, //账户名称 + bank_name: orderInfo.bank_of_deposit, //开户银行 + pay_type: '', //支付方式, 可不传 + client: orderInfo.purchaser_name, //客户名称 + phone: userPhone(orderInfo), //收货手机号码 + order_total_length: (orderInfo.total_number / 100).toString(), //订单布匹长度 + order_total_price: formatPriceDiv(orderInfo.bill_total_sale_price).toString(), //订单价格 + order_total_num: orderInfo.total_number.toString(), + qrcode: '', //跳转链接 + order_total_weight: formatWeightDiv(orderInfo.total_weight || orderInfo.total_estimate_weight).toString(), //订单布匹重量 + list: lists, - //手机号 - const userPhone = (addressInfo) => { - return addressInfo?.shipment_mode == 2? orderInfo.target_user_phone : orderInfo.take_goods_phone + estimate_amount: formatPriceDiv(orderInfo.estimate_amount).toString(), + show_estimate_amount: orderInfo.estimate_amount > 0 && orderInfo.total_sale_price <= 0, + total_sale_price: formatPriceDiv(orderInfo.total_sale_price).toString(), + show_total_sale_price: orderInfo.total_sale_price > 0, + total_weight_error_discount: formatPriceDiv(orderInfo.total_weight_error_discount).toString(), + show_total_weight_error_discount: orderInfo.total_weight_error_discount > 0, + actual_amount: formatPriceDiv(orderInfo.actual_amount).toString(), + show_actual_amount: orderInfo.actual_amount > 0, + wait_pay_amount: formatPriceDiv(orderInfo.wait_pay_amount).toString(), + show_wait_pay_amount: orderInfo.wait_pay_amount > 0, + show_barcode: true, + })) } - - //获取支付二维码 - const [payCodeImage, setPayCodeImage] = useState('') - const fileData = useRef({ - filePath: '', - base64: '' + }, [orderInfo]) + + //收货地址 + const address = (addressInfo) => { + if (addressInfo?.shipment_mode == 2) { + return addressInfo?.province_name ? addressInfo.province_name + addressInfo.city_name + addressInfo.district_name + addressInfo.address_detail : '' + } else { + return addressInfo?.take_goods_address + } + } + + //收件人 + const userName = (addressInfo) => { + return addressInfo?.shipment_mode == 2 ? orderInfo.target_user_name : '' + } + + //手机号 + const userPhone = (addressInfo) => { + return addressInfo?.shipment_mode == 2 ? orderInfo.target_user_phone : orderInfo.take_goods_phone + } + + //获取支付二维码 + const [payCodeImage, setPayCodeImage] = useState('') + const fileData = useRef({ + filePath: '', + base64: '', + }) + const { fetchData, state } = GetPayCode() + const getCore = async () => { + let res = await fetchData(detail) + const base64 = res.data.base64 + setPayCodeImage(() => base64) + const time = new Date().valueOf() + const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64) || [] + let filePath = Taro.env.USER_DATA_PATH + '/img' + time + '.' + format + fileData.current.filePath = filePath + fileData.current.base64 = bodyData + const save = Taro.getFileSystemManager() + save.writeFile({ + filePath: fileData.current.filePath, + data: fileData.current.base64, + encoding: 'base64', }) - const {fetchData, state} = GetPayCode() - const getCore = async () => { - let res = await fetchData(detail) - const base64 = res.data.base64 - setPayCodeImage(() => base64) - const time = new Date().valueOf() - const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64) || []; - let filePath = Taro.env.USER_DATA_PATH + '/img' + time +'.'+ format - fileData.current.filePath = filePath - fileData.current.base64 = bodyData - const save = Taro.getFileSystemManager() - save.writeFile({ - filePath: fileData.current.filePath, - data: fileData.current.base64, - encoding: 'base64', - }) - } - + } - //检查是否开启保存图片权限 - const {check} = useCheckAuthorize({scope:'scope.writePhotosAlbum', msg:'您没授权，无法保存图片'}) - const saveImageCheck = async () => { - const res = await check() - res&&saveImage() - } + //检查是否开启保存图片权限 + const { check } = useCheckAuthorize({ scope: 'scope.writePhotosAlbum', msg: '您没授权，无法保存图片' }) + const saveImageCheck = async () => { + const res = await check() + res && saveImage() + } - //保存图片 - const saveImage = () => { - alert.loading('正在保存图片') - Taro.saveImageToPhotosAlbum({ - filePath: fileData.current.filePath, - success: function () { - alert.success('图片保存成功') - }, - fail: function (err) { - console.log('err::', err) - } - }) - } + //保存图片 + const saveImage = () => { + alert.loading('正在保存图片') + Taro.saveImageToPhotosAlbum({ + filePath: fileData.current.filePath, + success: function () { + alert.success('图片保存成功') + }, + fail: function (err) { + console.log('err::', err) + }, + }) + } - //预览图片 - const showImage = () => { - console.log('fileData.current.filePath::', fileData.current.filePath) - Taro.previewImage({ - current: fileData.current.filePath, // 当前显示 - urls: [fileData.current.filePath] // 需要预览的图片http链接列表 - }) - } - - //复制功能 - return ( - - - - - 查看销售码单 - - {(state.loading)&&|| - - - } - - 保存电子确认单 - - + //预览图片 + const showImage = () => { + console.log('fileData.current.filePath::', fileData.current.filePath) + Taro.previewImage({ + current: fileData.current.filePath, // 当前显示 + urls: [fileData.current.filePath], // 需要预览的图片http链接列表 + }) + } + + //复制功能 + return ( + + + + + 查看销售码单 + + {(state.loading && ) || ( + + + + )} + + + 保存电子确认单 + - ) -}) \ No newline at end of file + + + ) +}) diff --git a/src/pages/order/index.module.scss b/src/pages/order/index.module.scss index 50d8249..9220587 100644 --- a/src/pages/order/index.module.scss +++ b/src/pages/order/index.module.scss @@ -1,130 +1,128 @@ -.order_main{ - min-height: 100%; - background-color:$color_bg_one; - padding: 20px; - padding-bottom: 190px; +.order_main { + min-height: 100%; + background-color: $color_bg_one; + padding: 20px; + padding-bottom: 190px; + box-sizing: border-box; + + .order_title { + display: flex; + align-items: center; + padding: 20px 30px; box-sizing: border-box; + background-color: #fff; + height: 116px; + border-radius: 20px; + margin-top: 20px; + text { + flex: 1; + font-size: $font_size; + font-weight: 700; + } + .order_status { + background-color: #f0f0f0; + width: 148px; + height: 55px; + color: $color_font_three; + text-align: center; + line-height: 55px; + font-size: $font_size_medium; + border-radius: 30px; + &:nth-last-child(1) { + margin-left: 20px; + } + } + } + .order_desc { + display: flex; + align-items: center; + background-color: #fff; + padding: 20px; + min-height: 116px; + border-radius: 20px; + margin-top: 20px; + box-sizing: border-box; + .order_desc_con { + width: 150px; + font-size: $font_size; + font-weight: 700; + } + .order_desc_text, + .order_desc_text_hint { + font-size: $font_size_medium; - .order_title{ - display: flex; - align-items: center; - padding: 20px 30px; - box-sizing: border-box; - background-color: #fff; - height: 116px; - border-radius: 20px; - margin-top: 20px; - text{ - flex:1; - font-size: $font_size; - font-weight: 700; - } - .order_status{ - background-color: #F0F0F0; - width: 148px; - height: 55px; - color: $color_font_three; - text-align: center; - line-height: 55px; - font-size: $font_size_medium; - border-radius: 30px; - &:nth-last-child(1) { - margin-left: 20px; - } - } + margin-right: 10px; + flex: 1; + word-break: break-all; } - .order_desc{ - display: flex; - align-items: center; - background-color: #fff; - padding: 20px; - min-height: 116px; - border-radius: 20px; - margin-top: 20px; - box-sizing: border-box; - .order_desc_con{ - width: 150px; - font-size: $font_size; - font-weight: 700; - } - .order_desc_text, .order_desc_text_hint{ - font-size: $font_size_medium; - - margin-right: 10px; - flex:1; - word-break:break-all; - } - .order_desc_text_hint{ - text-align: right; - color: $color_font_two; - } - .miconfont{ - font-size: 20px; - color: $color_font_two; - } + .order_desc_text_hint { + text-align: right; + color: $color_font_two; } - .submit_order_con{ - position: fixed; - bottom: 0; - left: 0; - width: 100%; - background-color: #fff; - box-shadow: 6px 0px 12px 0px rgba(0,0,0,0.16); - padding: 20px 20px; - box-sizing: border-box; - .order_btn { - width: 152px; - height: 72px; - border: 2px solid #dddddd; - border-radius: 46px; - display: flex; - justify-content: center; - align-items: center; - color: $color_font_three; - &:nth-child(n+2) { - margin-left: 34px; - } - } - .order_btn_select{ - color: $color_main; - border: 2px solid $color_main; - } - .order_number_desc{ - font-size: $font_size_medium; - color: $color_font_two; - } + .miconfont { + font-size: 20px; + color: $color_font_two; } - .order_info{ - background-color: #fff; - margin-top: 20px; - border-radius: 20px; - padding: 20px; - .order_info_title{ - font-size: $font_size; - font-weight: 700; - margin-bottom: 20px; - - } - .order_num{ - display: flex; - justify-content: space-between; - align-items: center; - width: 100%; - .order_num_btn{ - font-size: $font_size_medium; - padding: 5px 10px; - border: 2px solid #007cf7; - border-radius: 10px; - color: $color_main; - } - } - text{ - font-size: $font_size; - } - + } + .submit_order_con { + position: fixed; + bottom: 0; + left: 0; + width: 100%; + background-color: #fff; + box-shadow: 6px 0px 12px 0px rgba(0, 0, 0, 0.16); + padding: 20px 20px; + box-sizing: border-box; + .order_btn { + width: 152px; + height: 72px; + border: 2px solid #dddddd; + border-radius: 46px; + display: flex; + justify-content: center; + align-items: center; + color: $color_font_three; + &:nth-child(n + 2) { + margin-left: 34px; + } } - .weight_memo_con{ - margin-bottom: 20px; + .order_btn_select { + color: $color_main; + border: 2px solid $color_main; } - -} \ No newline at end of file + .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; + } +} diff --git a/src/pages/order/index.tsx b/src/pages/order/index.tsx index 040098a..3be5a80 100644 --- a/src/pages/order/index.tsx +++ b/src/pages/order/index.tsx @@ -1,331 +1,340 @@ -import { - GetSaleOrderDetailApi, - EditSaleOrderRemarkApi, -} from "@/api/order"; -import { AddShoppingCartApi } from "@/api/shopCart"; -import { SubscriptionMessageApi } from "@/api/user"; -import { alert, goLink } from "@/common/common"; -import { ORDER_STATUS } from "@/common/enum"; -import { formatDateTime, formatImgUrl } from "@/common/fotmat"; -import OrderBtns from "@/components/orderBtns"; -import Popup from "@/components/popup"; -import SearchInput from "@/components/searchInput"; -import ShopCart from "@/components/shopCart"; -import useLogin from "@/use/useLogin"; -import { Text, View } from "@tarojs/components" -import Taro, { useDidShow, usePullDownRefresh, useRouter } from "@tarojs/taro"; -import classnames from "classnames"; -import { useCallback, useEffect, useMemo, useRef, useState } from "react"; -import AddressInfoDetail from "./components/addressInfoDetail"; -import AdvanceOrderState from "./components/advanceOrderState"; -import ApplyRefund from "./components/applyRefund"; -import KindList from "./components/kindList"; -import OrderState from "./components/orderState"; -import Payment from "./components/payment"; -import Remark from "./components/remark"; -import ReturnRecord from "./components/returnRecord"; -import ScanPayCheck from "./components/scanPayCheck"; -import styles from './index.module.scss' - - export default () => { - useLogin() - const [showDesc, setShowDesc] = useState(false) - const router = useRouter() - const orderId = useRef(Number(router.params.id)) - useDidShow(() => { - getSaleOrderPreView() +import { GetSaleOrderDetailApi, EditSaleOrderRemarkApi } from '@/api/order' +import { AddShoppingCartApi } from '@/api/shopCart' +import { SubscriptionMessageApi } from '@/api/user' +import { alert, goLink } from '@/common/common' +import { ORDER_STATUS } from '@/common/enum' +import { formatDateTime, formatImgUrl } from '@/common/fotmat' +import OrderBtns from '@/components/orderBtns' +import Popup from '@/components/popup' +import SearchInput from '@/components/searchInput' +import ShopCart from '@/components/shopCart' +import useLogin from '@/use/useLogin' +import { Text, View } from '@tarojs/components' +import Taro, { useDidShow, usePullDownRefresh, useRouter } from '@tarojs/taro' +import classnames from 'classnames' +import { useCallback, useEffect, useMemo, useRef, useState } from 'react' +import AddressInfoDetail from './components/addressInfoDetail' +import AdvanceOrderState from './components/advanceOrderState' +import ApplyRefund from './components/applyRefund' +import KindList from './components/kindList' +import OrderState from './components/orderState' +import Payment from './components/payment' +import Remark from './components/remark' +import ReturnRecord from './components/returnRecord' +import ScanPayCheck from './components/scanPayCheck' +import styles from './index.module.scss' + +export default () => { + useLogin() + const [showDesc, setShowDesc] = useState(false) + const router = useRouter() + const orderId = useRef(Number(router.params.id)) + useDidShow(() => { + getSaleOrderPreView() + }) + + //订单状态枚举 + const { + SaleOrderStatusTaking, + SaleOrderStatusWaitingDelivery, + SaleOrderStatusWaitingReceipt, // 待收货 + SaleOrderStatusAlreadyReceipt, // 已收货 + SaleOrderStatusComplete, // 已完成 + SaleOrderStatusRefund, // 已退款 + SaleOrderStatusCancel, // 已取消 + SaleorderstatusWaitingPrePayment, // 预付款 + } = ORDER_STATUS + + //获取订单详情 + const firstOpen = useRef(true) + const [orderDetail, setOrderDetail] = useState() //获取到的原始数据 + 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() //格式化后的数据 + const formatData = () => { + setFormatDetailOrder({ + ...orderDetail, + unit: orderDetail.sale_mode == 0 ? '条' : 'm', //单位 + list: orderDetail.product_list, }) + } + const formatPreViewOrderMemo = useMemo(() => { + return formatDetailOrder + }, [formatDetailOrder]) - //订单状态枚举 - const { - SaleOrderStatusTaking, - SaleOrderStatusWaitingDelivery, - SaleOrderStatusWaitingReceipt, // 待收货 - SaleOrderStatusAlreadyReceipt, // 已收货 - SaleOrderStatusComplete, // 已完成 - SaleOrderStatusRefund, // 已退款 - SaleOrderStatusCancel, // 已取消 - SaleorderstatusWaitingPrePayment, // 预付款 - } = ORDER_STATUS - - //获取订单详情 - const firstOpen = useRef(true) - const [orderDetail, setOrderDetail] = useState() //获取到的原始数据 - 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() //格式化后的数据 - const formatData = () => { - setFormatDetailOrder({ - ...orderDetail, - unit: orderDetail.sale_mode == 0?'条':'m', //单位 - list: orderDetail.product_list, + //复制功能 + const clipboardData = () => { + Taro.setClipboardData({ + data: orderDetail?.order_no || '', + success: function (res) { + Taro.showToast({ + icon: 'none', + title: '复制成功', }) - } - const formatPreViewOrderMemo = useMemo(() => { - return formatDetailOrder - }, [formatDetailOrder]) - - //复制功能 - const clipboardData = () => { - Taro.setClipboardData({ - data: orderDetail?.order_no||'', - success: function (res) { - Taro.showToast({ - icon: 'none', - title: '复制成功' - }) - } - }) - } - - //初始地址数据 - const defaultAddress = useMemo(() => { - return { - province_name: orderDetail?.province_name, - city_name: orderDetail?.city_name, - district_name: orderDetail?.district_name, - address_detail: orderDetail?.address_detail, - target_user_name: orderDetail?.target_user_name, - target_user_phone: orderDetail?.target_user_phone, - shipment_mode: orderDetail?.shipment_mode, - id: orderDetail?.id, - sale_mode: orderDetail?.sale_mode, - status: orderDetail?.status, - take_goods_address: orderDetail?.take_goods_address, - take_goods_phone: orderDetail?.take_goods_phone - } - }, [orderDetail]) - - //订单备注 - const {fetchData: remarkFetchData} = EditSaleOrderRemarkApi() - const [orderRemark, setOrderRemark] = useState('') - const getRemark = useCallback(async (e) => { - setOrderRemark(() => e) - let res = await remarkFetchData({remark:e, id: orderId.current}) - if(res.success) { - getSaleOrderPreView() - alert.success('提交成功') - } else { - alert.error(res.msg) - } - setShowDesc(() => false) - }, []) - const noCanOpenDescList = useRef([ - SaleOrderStatusTaking.value, //提货中 - SaleOrderStatusWaitingDelivery.value, //待发货 - SaleOrderStatusWaitingReceipt.value, // 待收货 - SaleOrderStatusAlreadyReceipt.value, // 已收货 - SaleOrderStatusComplete.value, // 已完成 - SaleOrderStatusRefund.value, // 已退款 - SaleOrderStatusCancel.value, // 已取消 - ]) - const descOpen = () => { - if(noCanOpenDescList.current.includes(orderDetail?.status)) return alert.none('该订单状态不能修改备注') - setShowDesc(() => true) - } - - //去付款 - const [payMentShow, setPayMentShow] = useState(false) - const toPay = () => { - setPayMentShow(true) - } - - //打开地址修改 - const addressRef = useRef(null) - - //修改收货方式 - const getShipmentMode = useCallback(() => { - getSaleOrderPreView() - }, [orderDetail]) - - //修改地址 - const getAddress = useCallback(() => { - getSaleOrderPreView() - }, [orderDetail]) - - //获取底部按钮点击, 获取按钮状态 - const orderStateClick = useCallback((val) => { - if(val == 1 || val == 6 || val == 8) { - getSaleOrderPreView() - }else if(val == 2) { - //待付款 - toPay() - } else if(val == 3) { - //申请退款 - if(!orderDetail?.av_return_roll) return alert.none('该订单已申请过退款') - setRefundShow(true) - } else if(val == 7) { - //再购 - addShopCart() - } else if(val == 9) { - //售后记录 - onReturnRecordShow() - } else if(val == 10) { - setShowScanPayCheck(true) - } - - }, [orderDetail]) - - //页面下拉刷新 - usePullDownRefresh(() => { - getSaleOrderPreView() + }, }) + } - //支付成功 - const onPaySuccess = useCallback(() => { - alert.success('支付成功') - getSaleOrderPreView() - closePayShow() - }, [orderDetail]) - - //关闭支付弹窗 - const closePayShow = useCallback(() => { - setPayMentShow(() => false) - }, [orderDetail]) - - //按钮所需数据 - const orderInfo = useMemo(() => { - return { - orderId: orderDetail?.id, - ...orderDetail - } - }, [orderDetail]) - - //刷新页面 - const refresh = useCallback(() => { - alert.loading('刷新中') - getSaleOrderPreView() - }, [orderDetail]) - - //退款申请 - const [refundShow, setRefundShow] = useState(false) - const applyRefundClose = useCallback(() => { - setRefundShow(false) - }, []) - - //查看物流 - const getLogistics = useCallback(() => { - if (orderDetail?.delivery_appendix_url) { - const list = orderDetail?.delivery_appendix_url?.map(item => { - return formatImgUrl(item, '!w800') - }) - if(list?.length <= 0) return alert.error('暂无图片') - Taro.previewImage({ - current: list[0], // 当前显示 - urls: list // 需要预览的图片http链接列表 - }) - } - }, [orderDetail]) - - //添加购物车 - const [showCart, setShowCart] = useState(false) - const {fetchData:addFetchData} = AddShoppingCartApi() - const addShopCart = async () => { - let color_list:{product_color_id: number, roll?: number, length?: number}[] = [] - orderDetail?.product_list.map(pitem => { - pitem?.product_colors.map(citem => { - if(orderDetail?.sale_mode == 0) { - return color_list.push({product_color_id: citem.id, roll: citem.roll}) - } else { - return color_list.push({product_color_id: citem.id, length: citem.length}) - } - }) - }) - const state = await addFetchData({ - sale_mode: orderDetail?.sale_mode, - color_list - }) - if(state.success) { - Taro.showToast({ - title:'已加入购物车' - }) - setShowCart(true) - } else { - Taro.showToast({ - icon:'none', - title: state.msg - }) - } - + //初始地址数据 + const defaultAddress = useMemo(() => { + return { + province_name: orderDetail?.province_name, + city_name: orderDetail?.city_name, + district_name: orderDetail?.district_name, + address_detail: orderDetail?.address_detail, + target_user_name: orderDetail?.target_user_name, + target_user_phone: orderDetail?.target_user_phone, + shipment_mode: orderDetail?.shipment_mode, + id: orderDetail?.id, + sale_mode: orderDetail?.sale_mode, + status: orderDetail?.status, + take_goods_address: orderDetail?.take_goods_address, + take_goods_phone: orderDetail?.take_goods_phone, } + }, [orderDetail]) - //显示售后记录 - const [returnRecordShow, setReturnRecordShow] = useState(false) - const onReturnRecordShow = useCallback(() => { - setReturnRecordShow(true) - }, []) - const closeReturnRecord = useCallback(() => { - setReturnRecordShow(false) - }, []) + //订单备注 + const { fetchData: remarkFetchData } = EditSaleOrderRemarkApi() + const [orderRemark, setOrderRemark] = useState('') + const getRemark = useCallback(async (e) => { + setOrderRemark(() => e) + let res = await remarkFetchData({ remark: e, id: orderId.current }) + if (res.success) { + getSaleOrderPreView() + alert.success('提交成功') + } else { + alert.error(res.msg) + } + setShowDesc(() => false) + }, []) + const noCanOpenDescList = useRef([ + SaleOrderStatusTaking.value, //提货中 + SaleOrderStatusWaitingDelivery.value, //待发货 + SaleOrderStatusWaitingReceipt.value, // 待收货 + SaleOrderStatusAlreadyReceipt.value, // 已收货 + SaleOrderStatusComplete.value, // 已完成 + SaleOrderStatusRefund.value, // 已退款 + SaleOrderStatusCancel.value, // 已取消 + ]) + const descOpen = () => { + if (noCanOpenDescList.current.includes(orderDetail?.status)) return alert.none('该订单状态不能修改备注') + setShowDesc(() => true) + } - //显示 - const [showScanPayCheck, setShowScanPayCheck] = useState(false) + //去付款 + const [payMentShow, setPayMentShow] = useState(false) + const toPay = () => { + setPayMentShow(true) + } - return ( - - {(orderDetail?.status != SaleorderstatusWaitingPrePayment.value)&&|| - } - - + //打开地址修改 + const addressRef = useRef(null) + + //修改收货方式 + const getShipmentMode = useCallback(() => { + getSaleOrderPreView() + }, [orderDetail]) + + //修改地址 + const getAddress = useCallback(() => { + getSaleOrderPreView() + }, [orderDetail]) + + //获取底部按钮点击, 获取按钮状态 + const orderStateClick = useCallback( + (val) => { + if (val == 1 || val == 6 || val == 8) { + getSaleOrderPreView() + } else if (val == 2) { + //待付款 + toPay() + } else if (val == 3) { + //申请退款 + if (!orderDetail?.av_return_roll) return alert.none('该订单已申请过退款') + setRefundShow(true) + } else if (val == 7) { + //再购 + addShopCart() + } else if (val == 9) { + //售后记录 + onReturnRecordShow() + } else if (val == 10) { + setShowScanPayCheck(true) + } + }, + [orderDetail], + ) + + //页面下拉刷新 + usePullDownRefresh(() => { + getSaleOrderPreView() + }) + + //支付成功 + const onPaySuccess = useCallback(() => { + alert.success('支付成功') + getSaleOrderPreView() + closePayShow() + }, [orderDetail]) + + //关闭支付弹窗 + const closePayShow = useCallback(() => { + setPayMentShow(() => false) + }, [orderDetail]) + + //按钮所需数据 + const orderInfo = useMemo(() => { + return { + orderId: orderDetail?.id, + ...orderDetail, + } + }, [orderDetail]) + + //刷新页面 + const refresh = useCallback(() => { + alert.loading('刷新中') + getSaleOrderPreView() + }, [orderDetail]) + + //退款申请 + const [refundShow, setRefundShow] = useState(false) + const applyRefundClose = useCallback(() => { + setRefundShow(false) + }, []) + + //查看物流 + const getLogistics = useCallback(() => { + if (orderDetail?.delivery_appendix_url) { + const list = orderDetail?.delivery_appendix_url?.map((item) => { + return formatImgUrl(item, '!w800') + }) + if (list?.length <= 0) return alert.error('暂无图片') + Taro.previewImage({ + current: list[0], // 当前显示 + urls: list, // 需要预览的图片http链接列表 + }) + } + }, [orderDetail]) + + //添加购物车 + const [showCart, setShowCart] = useState(false) + const { fetchData: addFetchData } = AddShoppingCartApi() + const addShopCart = async () => { + let color_list: { product_color_id: number; roll?: number; length?: number }[] = [] + orderDetail?.product_list.map((pitem) => { + pitem?.product_colors.map((citem) => { + if (orderDetail?.sale_mode == 0) { + return color_list.push({ product_color_id: citem.id, roll: citem.roll }) + } else { + return color_list.push({ product_color_id: citem.id, length: citem.length }) + } + }) + }) + const state = await addFetchData({ + sale_mode: orderDetail?.sale_mode, + color_list, + }) + if (state.success) { + Taro.showToast({ + title: '已加入购物车', + }) + setShowCart(true) + } else { + Taro.showToast({ + icon: 'none', + title: state.msg, + }) + } + } + + //显示售后记录 + const [returnRecordShow, setReturnRecordShow] = useState(false) + const onReturnRecordShow = useCallback(() => { + setReturnRecordShow(true) + }, []) + const closeReturnRecord = useCallback(() => { + setReturnRecordShow(false) + }, []) + + //显示 + const [showScanPayCheck, setShowScanPayCheck] = useState(false) + + return ( + + {(orderDetail?.status != SaleorderstatusWaitingPrePayment.value && ) || ( + + )} + + + + + + 订单信息 + + + {orderDetail?.order_no} + clipboardData()}> + 复制 - - - 订单信息 - - - {orderDetail?.order_no} - clipboardData()}>复制 - - - - {formatDateTime(orderDetail?.create_time)} - - {(orderDetail?.payment_time)&& - {formatDateTime(orderDetail?.payment_time)} - } - - - 订单备注 - { - orderRemark&&{orderDetail?.remark}|| - 填写备注 - } - - - {(orderDetail?.status != SaleOrderStatusCancel.value)&& - - - } - setShowDesc(false)}> - getRemark(e)} defaultValue={orderDetail?.remark}/> - - - setShowScanPayCheck(false)} orderInfo={orderDetail}/> - - setShowCart(false)}/> - - + + + + {formatDateTime(orderDetail?.create_time)} + + {orderDetail?.payment_time && ( + + {formatDateTime(orderDetail?.payment_time)} + + )} + + + 订单备注 + {(orderRemark && {orderDetail?.remark}) || ( + 填写备注 + )} + + + {orderDetail?.status != SaleOrderStatusCancel.value && ( + + + - ) - } + )} + setShowDesc(false)}> + getRemark(e)} defaultValue={orderDetail?.remark} /> + + + setShowScanPayCheck(false)} orderInfo={orderDetail} /> + + setShowCart(false)} /> + + + + ) +} diff --git a/src/pages/order/orderList/index.module.scss b/src/pages/order/orderList/index.module.scss index e8f528a..a106442 100644 --- a/src/pages/order/orderList/index.module.scss +++ b/src/pages/order/orderList/index.module.scss @@ -1,38 +1,38 @@ -.order_list_main{ - height: 100vh; - background-color: $color_bg_one; - display: flex; - flex-direction: column; - .title{ - padding: 0 20px; - background-color: #fff; - box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.16); - border-bottom: 2px solid #e2e2e2; - height: 160px; - .order_status_list{ - font-size: $font_size; - color: #9E9E9E; - margin-top: 20px; - .order_status_item{ - padding: 20px; - box-sizing: border-box; - } - .selected{ - font-weight: 700; - color: #000; - border-bottom: 4px solid #707070; - } - .order_list_scroll{ - white-space: nowrap; - display: flex; - } - } +.order_list_main { + height: 100vh; + background-color: $color_bg_one; + display: flex; + flex-direction: column; + .title { + padding: 0 20px; + background-color: #fff; + box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.16); + border-bottom: 2px solid #e2e2e2; + height: 160px; + .order_status_list { + font-size: $font_size; + color: #9e9e9e; + margin-top: 20px; + .order_status_item { + padding: 20px; + box-sizing: border-box; + } + .selected { + font-weight: 700; + color: #000; + border-bottom: 4px solid #707070; + } + .order_list_scroll { + white-space: nowrap; + display: flex; + } } - .order_list{ - height: calc(100vh - 160px); - .order_item_con{ - margin-top: 20px; - padding: 0 20px; - } + } + .order_list { + height: calc(100vh - 160px); + .order_item_con { + margin-top: 20px; + padding: 0 20px; } -} \ No newline at end of file + } +} diff --git a/src/pages/order/orderList/index.tsx b/src/pages/order/orderList/index.tsx index 1588961..d50bd1e 100644 --- a/src/pages/order/orderList/index.tsx +++ b/src/pages/order/orderList/index.tsx @@ -1,24 +1,24 @@ -import Search from "@/components/search" -import useLogin from "@/use/useLogin" -import {View } from "@tarojs/components" -import Taro, { useDidShow,} from "@tarojs/taro" -import { useCallback, useEffect, useMemo, useRef, useState } from "react" -import styles from './index.module.scss' -import Order from "./components/order" -import InfiniteScroll from "@/components/infiniteScroll" -import { GetOrderListApi, OrderStatusListApi} from '@/api/order' -import { dataLoadingStatus, getFilterData } from "@/common/util" -import OrderStatusList from "./components/orderStatusList" -import { AddShoppingCartApi } from "@/api/shopCart" -import ShopCart from "@/components/shopCart" -import { alert } from "@/common/common" -import { useRouter } from "@tarojs/runtime" -import Payment from "../components/payment" -import ApplyRefund from "../components/applyRefund" -import ReturnRecord from "../components/returnRecord" +import Search from '@/components/search' +import useLogin from '@/use/useLogin' +import { View } from '@tarojs/components' +import Taro, { useDidShow } from '@tarojs/taro' +import { useCallback, useEffect, useMemo, useRef, useState } from 'react' +import styles from './index.module.scss' +import Order from './components/order' +import InfiniteScroll from '@/components/infiniteScroll' +import { GetOrderListApi, OrderStatusListApi } from '@/api/order' +import { dataLoadingStatus, getFilterData } from '@/common/util' +import OrderStatusList from './components/orderStatusList' +import { AddShoppingCartApi } from '@/api/shopCart' +import ShopCart from '@/components/shopCart' +import { alert } from '@/common/common' +import { useRouter } from '@tarojs/runtime' +import Payment from '../components/payment' +import ApplyRefund from '../components/applyRefund' +import ReturnRecord from '../components/returnRecord' export default () => { - const {checkLogin} = useLogin() + const { checkLogin } = useLogin() useDidShow(async () => { await checkLogin() }) @@ -26,25 +26,25 @@ export default () => { //传递过来的参数 const router = useRouter() useEffect(() => { - if(router?.params.status != undefined && router?.params.status !== '') { - setSearchField((e) => ({...e, status: router?.params.status as number})) + if (router?.params.status != undefined && router?.params.status !== '') { + setSearchField((e) => ({ ...e, status: router?.params.status as number })) } else { - setSearchField((e) => ({...e, status:-1})) + setSearchField((e) => ({ ...e, status: -1 })) } }, [router]) //搜索参数 - const [searchField, setSearchField] = useState<{status: number|null, page: number, size: number, name: string}>({ + const [searchField, setSearchField] = useState<{ status: number | null; page: number; size: number; name: string }>({ status: null, - page : 1, - size : 10, - name:'' + page: 1, + size: 10, + name: '', }) //获取订单状态 - const {fetchData: orderStatusListFetchData} = OrderStatusListApi() - const [statusList, setStatusList] = useState([{id: -1, name: '全部'}]) - const getOrderStatusList = async () => { + const { fetchData: orderStatusListFetchData } = OrderStatusListApi() + const [statusList, setStatusList] = useState([{ id: -1, name: '全部' }]) + const getOrderStatusList = async () => { let res = await orderStatusListFetchData() setStatusList((e) => [...e, ...res.data.list]) } @@ -53,143 +53,142 @@ export default () => { }, []) //获取订单列表 - const {fetchData: listFetchData, state:orderState} = GetOrderListApi() - const [orderData, setOrderData] = useState<{list:any[], total:number}>({list:[], total:0}) + const { fetchData: listFetchData, state: orderState } = GetOrderListApi() + const [orderData, setOrderData] = useState<{ list: any[]; total: number }>({ list: [], total: 0 }) const getOrderList = async () => { let res = await listFetchData(getFilterData(searchField)) - setOrderData((e) => ({...e, list: res.data?.list, total: res.data?.total})) + setOrderData((e) => ({ ...e, list: res.data?.list, total: res.data?.total })) setRefresherTriggeredStatus(() => false) } //监听筛选条件变化 useEffect(() => { - if(searchField.status != null) getOrderList() + if (searchField.status != null) getOrderList() }, [searchField]) //上拉加载数据 - const pageNum = useRef({size: searchField.size, page: searchField.page}) + const pageNum = useRef({ size: searchField.size, page: searchField.page }) const getScrolltolower = useCallback(() => { - if(orderData.list.length < orderData.total) { - pageNum.current.page++ - const size = pageNum.current.size * pageNum.current.page - setSearchField({...searchField, size }) - } + if (orderData.list.length < orderData.total) { + pageNum.current.page++ + const size = pageNum.current.size * pageNum.current.page + setSearchField({ ...searchField, size }) + } }, [orderData]) //状态改变 const changeStatus = useCallback((e) => { pageNum.current.page = 1 - setSearchField((value) => ({...value, status:e, size:10})) - setOrderData(() => ({list:[], total:0})) + setSearchField((value) => ({ ...value, status: e, size: 10 })) + setOrderData(() => ({ list: [], total: 0 })) }, []) - //数据加载状态 const statusMore = useMemo(() => { - return dataLoadingStatus({list:orderData.list, total: orderData.total, status: orderState.loading}) + return dataLoadingStatus({ list: orderData.list, total: orderData.total, status: orderState.loading }) }, [orderData, orderState]) //输入了搜索关键字 const getSearchData = useCallback((e) => { pageNum.current.page = 1 - setOrderData(() => ({list:[], total:0})) - setSearchField((val) => ({...val, name:e, size:10})) + setOrderData(() => ({ list: [], total: 0 })) + setSearchField((val) => ({ ...val, name: e, size: 10 })) }, []) - //列表下拉刷新 const [refresherTriggeredStatus, setRefresherTriggeredStatus] = useState(false) const getRefresherRefresh = async () => { pageNum.current.size = 1 setRefresherTriggeredStatus(true) - setSearchField((val) => ({...val, size:10})) + setSearchField((val) => ({ ...val, size: 10 })) } //监听点击的按钮 - const clickOrderBtn = useCallback(({status, orderInfo}) => { - setCallBackPayOrderInfo(() => orderInfo) - if(status == 1 || status == 6 || status == 8) { - getOrderList() - } else if(status == 2) { - //去支付 - toPay() - } else if (status == 3) { - //申请退款 - if(!orderInfo?.av_return_roll) return alert.none('该订单已申请过退款') - setRefundShow(true) - } else if (status == 7) { - //购买 - addShopCart(orderInfo) - } else if (status == 9) { - onReturnRecordShow() - } else if (status == 10) { - setShowScanPayCheck(true) - } - }, [orderData]) - + const clickOrderBtn = useCallback( + ({ status, orderInfo }) => { + setCallBackPayOrderInfo(() => orderInfo) + if (status == 1 || status == 6 || status == 8) { + getOrderList() + } else if (status == 2) { + //去支付 + toPay() + } else if (status == 3) { + //申请退款 + if (!orderInfo?.av_return_roll) return alert.none('该订单已申请过退款') + setRefundShow(true) + } else if (status == 7) { + //购买 + addShopCart(orderInfo) + } else if (status == 9) { + onReturnRecordShow() + } else if (status == 10) { + setShowScanPayCheck(true) + } + }, + [orderData], + ) const [callBackOrderInfo, setCallBackPayOrderInfo] = useState() //去付款 const [payMentShow, setPayMentShow] = useState(false) const toPay = () => { - setPayMentShow(true) + setPayMentShow(true) } //关闭支付弹窗 const closePayShow = useCallback(() => { - setPayMentShow(() => false) + setPayMentShow(() => false) }, []) //支付成功 const onPaySuccess = useCallback(() => { - getOrderList() - closePayShow() + getOrderList() + closePayShow() }, []) //添加购物车 const [showCart, setShowCart] = useState(false) - const {fetchData:addFetchData} = AddShoppingCartApi() - const addShopCart = async (item) => { - let color_list:{product_color_id: number, roll?: number, length?: number}[] = [] - item?.product_list.map(pitem => { - pitem?.product_colors.map(citem => { - if(item?.sale_mode == 0) { - return color_list.push({product_color_id: citem.id, roll: citem.roll}) - } else { - return color_list.push({product_color_id: citem.id, length: citem.length}) - } - }) + const { fetchData: addFetchData } = AddShoppingCartApi() + const addShopCart = async (item) => { + let color_list: { product_color_id: number; roll?: number; length?: number }[] = [] + item?.product_list.map((pitem) => { + pitem?.product_colors.map((citem) => { + if (item?.sale_mode == 0) { + return color_list.push({ product_color_id: citem.id, roll: citem.roll }) + } else { + return color_list.push({ product_color_id: citem.id, length: citem.length }) + } }) - const state = await addFetchData({ - sale_mode: item?.sale_mode, - color_list + }) + const state = await addFetchData({ + sale_mode: item?.sale_mode, + color_list, + }) + if (state.success) { + Taro.showToast({ + title: '已加入购物车', }) - if(state.success) { - Taro.showToast({ - title:'已加入购物车' - }) - setShowCart(true) - } else { - Taro.showToast({ - icon:'none', - title: state.msg - }) - } - + setShowCart(true) + } else { + Taro.showToast({ + icon: 'none', + title: state.msg, + }) + } } //申请退款 const [refundShow, setRefundShow] = useState(false) const applyRefundClose = useCallback(() => { - setRefundShow(false) + setRefundShow(false) }, []) //显示售后记录 const [returnRecordShow, setReturnRecordShow] = useState(false) const onReturnRecordShow = useCallback(() => { - setReturnRecordShow(true) + setReturnRecordShow(true) }, []) const closeReturnRecord = useCallback(() => { - setReturnRecordShow(false) + setReturnRecordShow(false) }, []) //显示 @@ -198,20 +197,30 @@ export default () => { return ( - - + + - - {orderData?.list?.map(item => { - return - })} - + + {orderData?.list?.map((item) => { + return ( + + {' '} + + + ) + })} + - - setShowCart(false)} default_sale_mode={callBackOrderInfo?.sale_mode}/> - - + + setShowCart(false)} default_sale_mode={callBackOrderInfo?.sale_mode} /> + + ) }