diff --git a/src/api/share.ts b/src/api/share.ts new file mode 100644 index 0000000..aaecc87 --- /dev/null +++ b/src/api/share.ts @@ -0,0 +1,31 @@ +import { useRequest } from "@/use/useHttp" + +/** + * 分享短码 + */ + export const GetShortCodeApi = () => { + return useRequest({ + url: `/v1/mall/shortCode/add`, + method: "post", + }) +} + +/** + * 解析短码 + */ + export const AnalysisShortCodeApi = () => { + return useRequest({ + url: `/v1/mall/shortCode`, + method: "get", + }) +} + +/** + * 绑定上下级 + */ +export const BindShortCodeApi = () => { + return useRequest({ + url: `/v1/mall/shortCode/bind`, + method: "post", + }) +} \ No newline at end of file diff --git a/src/app.config.ts b/src/app.config.ts index 2d92a16..61bd39e 100644 --- a/src/app.config.ts +++ b/src/app.config.ts @@ -146,6 +146,18 @@ export default { pages: [ "index" ] + }, + { + root: "pages/salesAfterList", + pages: [ + "index", + ] + }, + { + root: "pages/salesAfter", + pages: [ + "index", + ] } ] } diff --git a/src/app.tsx b/src/app.tsx index c5cff86..0b1ad6c 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -2,15 +2,52 @@ import { FC } from 'react' import ContextBlueTooth from "@/use/contextBlueTooth" import { Provider } from 'react-redux' import configStore from './store' - import './app.scss' +import Taro, { useDidShow} from '@tarojs/taro' +import { analysisShortCodeApi } from './common/shortCode' const store = configStore() -const App:FC = ({children}) => { +const App:FC = (params) => { + + Taro.showShareMenu({ + withShareTicket: true + }) + + useDidShow(() => { + console.log('params:',params) + }) + + const page = Taro.getCurrentInstance().page + console.log('res:::', page) + if(page && page.onShareAppMessage) { + //当有分享参数时，绑定上下级 + if(page.options?.share) { + analysisShortCodeApi(page.options.share) + } + page.onShareAppMessage = (res) => { + let path = '' + let title = '' + let imageUrl = '' + let sortCode = Taro.getStorageSync('sort_code')?JSON.parse(Taro.getStorageSync('sort_code')):'' + if(res.from === 'button') { + path = `/pages/details/index?share=${sortCode.shareShortDetail.code}` + title = sortCode.shareShortDetail.title + } else { + path = `/pages/index/index?share=${sortCode.shareShortPage.code}` + title = sortCode.shareShortPage.title + } + return { + title, + path, + imageUrl, + } + } + } + return ( - {children} + {params.children} ) diff --git a/src/common/constant.js b/src/common/constant.js index 0a47de3..40b4cdc 100644 --- a/src/common/constant.js +++ b/src/common/constant.js @@ -8,9 +8,9 @@ // export const BASE_URL = `http://192.168.1.30:40001/lymarket` // 发 // export const BASE_URL = `https://dev.zzfzyc.com/lymarket` // 开发环境 // export const BASE_URL = `https://www.zzfzyc.com/lymarket` // 正式环境 -export const BASE_URL = `http://192.168.1.5:40001/lymarket` // 王霞 -// export const BASE_URL = `http://192.168.1.224:50001/lymarket` // 添 -// export const BASE_URL = `http://192.168.1.15:50001/lymarket` // 添 +// export const BASE_URL = `http://192.168.1.4:40001/lymarket` // 王霞 +export const BASE_URL = `http://192.168.1.224:50001/lymarket` // 添 +// export const BASE_URL = `http://192.168.1.15:50001/lymarket` // 杰 // CDN // 生成密钥 diff --git a/src/common/enum.ts b/src/common/enum.ts index df57d45..00a8ec1 100644 --- a/src/common/enum.ts +++ b/src/common/enum.ts @@ -1,7 +1,41 @@ + +//订单状态枚举 export const ORDER_STATUS = { - 0:{value:0, label:'申请中'}, - 1:{value:1, label:'配布中'}, - 2:{value:2, label:'待发货'}, - 3:{value:3, label:'已发货'}, - 4:{value:4, label:'已完成'} + SaleOrderStatusBooking : {value:0, label:'待接单'}, // 待接单 + SaleOrderStatusArranging : {value:1, label:'配布中'}, // 配布中 + SaleOrderStatusArranged : {value:2, label:'已配布'}, // 已配布 + SaleOrderStatusWaitingPayment : {value:7, label:'待付款'}, // 待付款 + SaleOrderStatusWaitingDelivery : {value:3, label:'待发货'}, // 待发货 + SaleOrderStatusWaitingReceipt : {value:8, label:'待收货'}, // 待收货 + SaleOrderStatusAlreadyReceipt : {value:9, label:'已收货'}, // 已收货 + SaleOrderStatusComplete : {value:4, label:'已完成'}, // 已完成 + SaleOrderStatusRefund : {value:6, label:'已退款'}, // 已退款 + SaleOrderStatusCancel : {value:5, label:'已取消'}, // 已取消 +} + +//售后单状态枚举 +export const AFTER_ORDER_STATUS = { + SaleOrderStatusBooking : {value:0, label:'申请中'}, + SaleOrderStatusArranging : {value:1, label:'退货中'}, + SaleOrderStatusArranged : {value:2, label:'待验布'}, + SaleOrderStatusWaitingPayment : {value:7, label:'退款中'}, + SaleOrderStatusWaitingDelivery : {value:3, label:'已退款'}, + SaleOrderStatusWaitingReceipt : {value:8, label:'已取消'}, + SaleOrderStatusAlreadyReceipt : {value:9, label:'已拒绝'}, +} + +//支付方式 +export const PAYMENT_METHOD = { + PaymentMethodPreDeposit: {value:1, label:'预存款'}, + PaymentMethodAccountPeriod : {value:2, label:'账期'}, + PaymentMethodofflineRemittance: {value:3, label:'线下汇款'}, + PaymentMethodScanCodeToPay: {value:4, label:'扫码支付'}, + PaymentMethodCashOnDelivery: {value:5, label:'货到付款'}, +} +export type PAYMENT_METHOD_PARAM = 1|2|3|4|5 + +//分享场景枚举 +export const SHARE_SCENE = { + ShareDetail: {value:1, label:'详情分享'}, + SharePage : {value:2, label:'页面分享'}, } \ No newline at end of file diff --git a/src/common/shortCode/index.js b/src/common/shortCode/index.js new file mode 100644 index 0000000..7e32a27 --- /dev/null +++ b/src/common/shortCode/index.js @@ -0,0 +1,33 @@ +import Taro from "@tarojs/taro" +import { BASE_URL } from "../constant" + +//解析短码（主要用于右上角按钮分享） +export const analysisShortCodeApi = (val) => { + //解析短码 + Taro.request({ + url:BASE_URL+'/v1/mall/shortCode', + method:"GET", + data:{md5_key: val}, + success:(res) => { + if(res.data.code == 0) { + //绑定上下级 + bindParent(res.data.data.share_user_id) + } + } + }) +} + +//绑定上下级 +const bindParent = (share_user_id) => { + //绑定上下级 + Taro.request({ + url:BASE_URL+'/v1/mall/shortCode/bind', + method:"POST", + data:{share_user_id: share_user_id}, + success:(res) => { + if(res.data.code == 0) { + //绑定上下级 + } + } + }) + } \ No newline at end of file diff --git a/src/components/counter/index.module.scss b/src/components/counter/index.module.scss new file mode 100644 index 0000000..fe96cca --- /dev/null +++ b/src/components/counter/index.module.scss @@ -0,0 +1,37 @@ + +.main{ + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + .reduce, .plus{ + font-size: $font_size_big; + color: $color_main; + width: 46px; + height: 46px; + display: flex; + align-items: center; + justify-content:center; + font-size: 50px; + background-color: $color_main; + color: #fff; + border-radius: 8px; + } + .input{ + display: flex; + align-items: flex-end; + background-color: #fff; + padding: 5px 10px; + box-sizing: border-box; + width: 106px; + border-radius: 10px; + } + input{ + font-size: $font_size_medium; + } + .unit{ + font-size: $font_size_min; + color: $color_font_two; + } + +} \ No newline at end of file diff --git a/src/components/counter/index.tsx b/src/components/counter/index.tsx new file mode 100644 index 0000000..d7f632d --- /dev/null +++ b/src/components/counter/index.tsx @@ -0,0 +1,111 @@ +import { Input, View } from "@tarojs/components" +import { useEffect, useMemo, useRef, useState } from "react" +import Big from 'big.js' +import styles from "./index.module.scss" +type params = { + minNum?: number, //最小值 + maxNum?: number, //最大值 + step?: number, //步长 + defaultNum?: number, //默认值 + digits?: number //多少位小数 + onChange?:(val:number) => void, + onBlue?:(val:number) => void, //失去焦点触发 + onClickBtn?:(val:number) => void, + unit?: string +} +export default ({minNum = 0, maxNum = 100, step=1, digits = 0, defaultNum = 0, onChange, onBlue, onClickBtn, unit = ''}: params) => { + const [value, setValue] = useState({count:defaultNum}) + + const onPlus = () => { + let {count} = value + let num_res = Big(count).add(step).toNumber() + num_res = num_res >= maxNum?maxNum:num_res + num_res = formatDigits(num_res) + setValue({...value, count:num_res}) + onChange?.(parseFloat(num_res)) + onClickBtn?.(parseFloat(num_res)) + } + const minus = () => { + let {count} = value + let num_res = Big(count).minus(step).toNumber() + num_res = num_res < minNum?0:num_res + setValue({...value, count:num_res}) + onChange?.(parseFloat(num_res)) + onClickBtn?.(parseFloat(num_res)) + } + + //保留小数 + const formatDigits = (num) => { + num = num + '' + if(num.includes('.')&&digits > 0) { + console.log('num::',num.includes('.')) + let res = num.split('.') + let last_num = res[1].substr(0, digits) + return res[0] + '.' + last_num + } + return parseFloat(num) + } + + //检查数据 + const checkData = (val) => { + let num = parseFloat(val) + if(num > maxNum) return maxNum + if(num < minNum) return minNum + return val + } + + + const onInputEven = (e) => { + let res = e.detail.value + if(res === '') { + setValue({...value, count:minNum}) + onChange?.(minNum) + } + else if(!isNaN(Number(res))) { + let count = formatDigits(res) + count = checkData(count) + setValue({...value, count}) + onChange?.(parseFloat(count as string)) + } else { + let num = parseFloat(res) + if(!isNaN(num)) { + let count = formatDigits(num) + count = checkData(count) + setValue({...value, count}) + onChange?.(count as number) + } else { + setValue({...value, count:defaultNum}) + onChange?.(defaultNum) + } + + } + } + + const onBluerEven = () => { + let num = parseFloat(value.count) + if(!isNaN(num)) { + let count = formatDigits(num) + count = checkData(count) + setValue({...value, count}) + onBlue?.(count as number) + } else { + setValue({...value, count:defaultNum}) + onBlue?.(defaultNum) + } + } + return ( + + minus()}>- + + + {unit} + + onPlus()}>+ + + ) +} \ No newline at end of file diff --git a/src/components/orderBtns/index.tsx b/src/components/orderBtns/index.tsx index 4ae23d6..f098520 100644 --- a/src/components/orderBtns/index.tsx +++ b/src/components/orderBtns/index.tsx @@ -1,5 +1,6 @@ import { CancelOrderApi } from "@/api/order" import { alert } from "@/common/common" +import { ORDER_STATUS } from "@/common/enum" import { View } from "@tarojs/components" import Taro from "@tarojs/taro" import { useCallback, useRef, memo } from "react" @@ -7,63 +8,83 @@ import styles from './index.module.scss' type Param = { orderInfo: { - status?: number, //订单状态 + status: number, //订单状态 orderId: number, //订单id - payModel: number, //支付方式 - realPayPrice: number, //实付金额 - pendingPayPrice: number, //待付金额 - }, + actual_amount: number, //实付金额 + wait_pay_amount: number, //待付金额 + }|null, onClick?: (val: number) => void //点击后触发的事件，返回订单状态 } + +// export const OrderBtnsemus = [{id:1, label:'取消订单'},{id:2, label:'去付款'},{id:3, label:'申请退款'},{id:4, label:'查看物流'}, {id:5, label:'申请退货'}, {id:6, label:'确认收货'}, {id:7, label:'再次购买'}] export default memo(({orderInfo, onClick}:Param) => { + const { + SaleOrderStatusBooking, + SaleOrderStatusArranging, + SaleOrderStatusArranged, + SaleOrderStatusWaitingDelivery, + SaleOrderStatusComplete, + SaleOrderStatusCancel, + SaleOrderStatusRefund, + SaleOrderStatusWaitingPayment, + SaleOrderStatusWaitingReceipt, + SaleOrderStatusAlreadyReceipt + } = ORDER_STATUS //订单按钮按订单状态归类 const orderBtnsList = useRef([ { id: 1, - value: [0, 1, 2, 3, 4], //取消订单按钮对应： 待接单，待配布，已配布, 待付款， 待发货 + value: [SaleOrderStatusBooking.value, SaleOrderStatusArranging.value, SaleOrderStatusArranged.value, SaleOrderStatusWaitingPayment.value, SaleOrderStatusWaitingDelivery.value], //取消订单按钮对应： 待接单，配布中，已配布, 待付款， 待发货 label: '取消订单' }, { id: 2, - value: [3, 4], //去付款按钮对应：待付款， 待发货 + value: [SaleOrderStatusWaitingPayment.value, SaleOrderStatusWaitingDelivery.value, SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusComplete.value], //去付款按钮对应：待付款， 待发货, 待收货, 已收货, 已完成 label: '去付款' }, { id: 3, - value: [4], //取消订单按钮对应： 待发货 + value: [SaleOrderStatusWaitingDelivery.value], //取消订单按钮对应： 待发货 label: '申请退款' }, { id: 4, - value: [5, 6, 7, 8], //取消订单按钮对应： 待收货, 已收货, 已完成, 已退款 + value: [SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusComplete.value, SaleOrderStatusRefund.value], //取消订单按钮对应： 待收货, 已收货, 已完成, 已退款 label: '查看物流' }, { id: 5, - value: [5, 6, 8], //取消订单按钮对应： 待收货, 已收货, 已退款 + value: [SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusRefund.value], //取消订单按钮对应： 待收货, 已收货, 已退款 label: '申请退货' }, { id: 6, - value: [5], //取消订单按钮对应： 待收货 + value: [SaleOrderStatusWaitingReceipt.value], //取消订单按钮对应： 待收货 label: '确认收货' }, { id: 7, - value: [5,6,7,8], //取消订单按钮对应： 待收货，已收货，已完成, 已退款 + value: [SaleOrderStatusWaitingReceipt.value,SaleOrderStatusAlreadyReceipt.value,SaleOrderStatusComplete.value,SaleOrderStatusRefund.value], //取消订单按钮对应： 待收货，已收货，已完成, 已退款 label: '再次购买' } ]) //判断是否显示该按钮 - const orderBtnsShow = useCallback((item, status) => { - if(item.id == 1) { - return( orderInfo.realPayPrice == 0 && status <= 4) //在代发货之前没有付过款 - } - if(item.id == 2) { - return( orderInfo.pendingPayPrice != 0 && status <= 4) //在代发货之前没有付完款 + const orderBtnsShow = useCallback((item) => { + if(orderInfo) { + if(item.id == 1) { + //取消订单按钮 + return( orderInfo.actual_amount == 0 && item.value.includes(orderInfo.status)) //在代发货之前没有付过款 + } else if (item.id == 2) { + //去付款按钮 + return( orderInfo.wait_pay_amount != 0 && item.value.includes(orderInfo.status)) //只要没有付完款就显示 + } else if(item.id == 3) { + //申请退款 + return (orderInfo.actual_amount != 0 && item.value.includes(orderInfo.status)) //在代发货之前付过款 + } else { + return item.value.includes(orderInfo.status) + } } - return item.value.includes(status) - },[]) + },[orderInfo]) //点击按钮操作 const submitBtns = (val) => { @@ -73,12 +94,12 @@ export default memo(({orderInfo, onClick}:Param) => { //取消订单 const {fetchData: cancelFetchData} = CancelOrderApi() - const cancelOrder = () => { + const cancelOrder = () => { Taro.showModal({ title: '要取消该订单吗？', success: async function (res) { if (res.confirm) { - let res = await cancelFetchData({id: orderInfo.orderId}) + let res = await cancelFetchData({id: orderInfo?.orderId}) if(res.success) { alert.success('取消成功') onClick?.(1) @@ -94,8 +115,8 @@ export default memo(({orderInfo, onClick}:Param) => { return ( - {orderBtnsList.current.map((item, index) => - orderBtnsShow(item, status)&& submitBtns(item.id)}>{item.label} + {orderBtnsList.current.map((item) => + orderBtnsShow(item)&& submitBtns(item.id)}>{item.label} )} ) diff --git a/src/components/searchInput/index.module.scss b/src/components/searchInput/index.module.scss index c381191..dcdd256 100644 --- a/src/components/searchInput/index.module.scss +++ b/src/components/searchInput/index.module.scss @@ -3,25 +3,25 @@ display: flex; align-items: center; min-height: 62px; - padding: 10px 0; border-bottom: 1px solid #F0F0F0; .searchInput_title { - width: 150px; + min-width: 145px; min-height: 50px; font-size: 28px; - border-right: 1px solid #F0F0F0; color: $color_font_two; margin-right: 20px; padding-left: 20px; display: flex; align-items: center; - - // &::before{ - // content: ""; - // height: 50px; - // width: 1px; - // background-color: #F0F0F0; - // } + position: relative; + &::before{ + content: ""; + height: 30px; + width: 1px; + background-color: #F0F0F0; + position: absolute; + right: 0; + } } .searchInput_con{ flex:1; diff --git a/src/components/searchInput/index.tsx b/src/components/searchInput/index.tsx index 4fe82cd..2fbaebf 100644 --- a/src/components/searchInput/index.tsx +++ b/src/components/searchInput/index.tsx @@ -13,7 +13,8 @@ type Params = { clickOnInput?: () => void, children?: ReactNode height?: number, - titleStyle?: Object + titleStyle?: Object, + styleObj?: Object } @@ -38,7 +39,7 @@ export default memo((props: Params) => { return {} }, [showBorder]) return ( - + {showTitle&&{title}} {!props.children&& clickOnInput?.()} onInput={(e) => changeOnInput?.(e.detail.value)}/> diff --git a/src/components/shopCart/index.tsx b/src/components/shopCart/index.tsx index 3caff3d..1ca3aa5 100644 --- a/src/components/shopCart/index.tsx +++ b/src/components/shopCart/index.tsx @@ -224,7 +224,7 @@ export default ({show = false, onClose}: param) => { {loading&&} - {!loading&&list?.length > 0&& + {!loading&&list?.length > 0&& {list?.map((item, index) => { return diff --git a/src/constants/userInfo.ts b/src/constants/userInfo.ts index b2f5338..88982c6 100644 --- a/src/constants/userInfo.ts +++ b/src/constants/userInfo.ts @@ -2,7 +2,9 @@ export const SET_USERINFO = 'setUserInfo' export const SET_ADMINUSERINFO = 'setAdminUserInfo' export const SET_TOKEN = 'setToken' export const SET_SESSIONKEY = 'setSessionkey' +export const SET_SORTCODE = 'setSortCode' export const CLEAR_TOKEN = 'clearToken' export const CLEAR_SESSIONKEY = 'clearSessionkey' export const CLEAR_USERINFO = 'clearUserInfo' -export const CLEAR_ADMINUSERINFO = 'clearAdminUserInfo' \ No newline at end of file +export const CLEAR_ADMINUSERINFO = 'clearAdminUserInfo' +export const CLEAR_SORTCODE = 'clearSortCode' \ No newline at end of file diff --git a/src/pages/details/components/swiper/index.tsx b/src/pages/details/components/swiper/index.tsx index be07358..a0cb48e 100644 --- a/src/pages/details/components/swiper/index.tsx +++ b/src/pages/details/components/swiper/index.tsx @@ -4,12 +4,11 @@ import { useMemo, useRef, useState } from "react" import styles from './index.module.scss' type item = {title:string, img:string, url:string, id:number} - type params = { list?: item[] } + export default ({list = []}: params) => { - const [pageIndex, setPageIndex] = useState(1) const pageRef = useRef(null) @@ -26,13 +25,13 @@ export default ({list = []}: params) => { swiperChange(e)}> {list.map((item) => { return - - - + + + })} - {pageIndex+'/'+pageCount} + {(list.length > 0)&&{pageIndex+'/'+pageCount}} ) } \ No newline at end of file diff --git a/src/pages/details/index.config.ts b/src/pages/details/index.config.ts index f0757fd..20c0853 100644 --- a/src/pages/details/index.config.ts +++ b/src/pages/details/index.config.ts @@ -1,5 +1,6 @@ export default { navigationBarTitleText: '详情', enablePullDownRefresh: true, - backgroundTextStyle: 'dark' + backgroundTextStyle: 'dark', + enableShareAppMessage: true } diff --git a/src/pages/details/index.tsx b/src/pages/details/index.tsx index c845f9e..b7afb2c 100644 --- a/src/pages/details/index.tsx +++ b/src/pages/details/index.tsx @@ -1,5 +1,5 @@ -import { Button, CustomWrapper, Image, RichText, ScrollView, Swiper, SwiperItem, Text, View } from '@tarojs/components' +import { Button, CustomWrapper, Image, RichText, Text, View } from '@tarojs/components' import Taro, { useDidShow, usePullDownRefresh, useRouter, useShareAppMessage } from '@tarojs/taro'; import classnames from "classnames"; import DesSwiper from './components/swiper'; @@ -7,56 +7,81 @@ import OrderCount from './components/orderCount'; import ShopCart from '@/components/shopCart'; import Preview,{colorItem} from './components/preview'; import styles from './index.module.scss' -import { useEffect, useMemo, useState } from 'react'; +import { useEffect, useMemo, useRef, useState } from 'react'; import {formatHashTag, formatImgUrl} from '@/common/fotmat' -import useManualPullDownRefresh from '@/use/useManualPullDownRefresh'; -import { goLink } from '@/common/common'; -import useUserInfo from '@/use/useUserInfo'; import {GetProductDetailApi} from '@/api/material' import useLogin from '@/use/useLogin'; +import { AnalysisShortCodeApi, BindShortCodeApi, GetShortCodeApi } from '@/api/share'; +import { SHARE_SCENE } from '@/common/enum'; +import useUserInfo from '@/use/useUserInfo'; type item = {title:string, img:string, url:string, id:number} -type params = { +type Params = { list?: item[] swiperOnClick?: (val: item) => void, style?: Object } -export default (props:params) => { +export default (props:Params) => { const {checkLogin, getPhoneNumber, userInfo} = useLogin() + //获取参数(有两种参数：1.商品id, 2.页面分享) + const router = useRouter() + const [params, setParams] = useState({id: '', share: null}) + + //判断是否是分享过来的参数 + const judgeParam = async () => { + if(router.params.id) { + setParams({...params, id:router.params.id}) + }else if(router.params.share) { + analysisShortCode() + } + } + + //解析短码参数 + const {fetchData: fetchDataAnalysisShortCode} = AnalysisShortCodeApi() + const analysisShortCode = async () => { + let res = await fetchDataAnalysisShortCode({md5_key: router.params.share}) + setParams({id: res.data.product_id, share: res.data}) + } + useDidShow(() => { checkLogin() + judgeParam() }) - const router = useRouter() - + useEffect(() => { + if(params.id) { + getProductDetail() + } + }, [params]) + //获取数据 const [productInfo, setProductInfo] = useState({}) const {fetchData} = GetProductDetailApi() - useEffect(() => { - getProductDetail() - }, []) const getProductDetail = async () => { - let {data} = await fetchData({id: router.params.id}) + let {data} = await fetchData({id: params.id}) setProductInfo(data) Taro.stopPullDownRefresh() } + useEffect(() => { + if(productInfo.code) getShortCode() + }, [productInfo]) + + //面料名称 const productName = useMemo(() => { return formatHashTag(productInfo.code, productInfo.name) },[productInfo]) const [showCart, setShowCart] = useState(false) - const [showOrderCount, setShowOrderCount] = useState(false) - const html = ` ` - + //弹窗提示 const [colorInfo, setColorInfo] = useState() const [showPreview, setShowPreview] = useState(false) const getColorItem = (item) => { @@ -67,6 +92,7 @@ export default (props:params) => { setShowPreview(true) } + //收藏功能 const [collectStatus, setCollectStatus] = useState(false) const changeCollect = () => { setCollectStatus(!collectStatus) @@ -77,18 +103,14 @@ export default (props:params) => { }) } - useShareAppMessage(res => { - if (res.from === 'button') { - // 来自页面内转发按钮 - console.log(res.target) - } - return { - title: '自定义转发标题', - path: '/pages/details/index?id=10', - imageUrl: '' - } - }) - + const {setSortCode, userInfo : userObj } = useUserInfo() + //详情页获取分享短码 + const {ShareDetail} = SHARE_SCENE + const {fetchData: fetchDataShortCode} = GetShortCodeApi() + const getShortCode = async () => { + const {data: resDetail} = await fetchDataShortCode({"share_user_id": userObj.adminUserInfo.user_id, type:ShareDetail.value, product_id: parseInt(params.id)}) + setSortCode({... userObj.sort_code, shareShortDetail: {title: productName as string, code: resDetail.md5_key, img:''}}) + } //开始下单 const placeOrder = async (e:any) => { @@ -108,7 +130,6 @@ export default (props:params) => { //页面下拉刷新 usePullDownRefresh(() => { getProductDetail() - }) @@ -123,13 +144,11 @@ export default (props:params) => { 分享 - changeCollect()}> 收藏 - diff --git a/src/pages/editOrder/index.config.ts b/src/pages/editOrder/index.config.ts index 1c3223c..52979d7 100644 --- a/src/pages/editOrder/index.config.ts +++ b/src/pages/editOrder/index.config.ts @@ -1,5 +1,6 @@ export default { navigationBarTitleText: '修改地址', enablePullDownRefresh: true, - backgroundTextStyle: 'dark' + backgroundTextStyle: 'dark', + enableShareAppMessage: true, } diff --git a/src/pages/index/index.config.ts b/src/pages/index/index.config.ts index 86e3b2e..c0922b9 100644 --- a/src/pages/index/index.config.ts +++ b/src/pages/index/index.config.ts @@ -1,3 +1,4 @@ export default { navigationBarTitleText: '首页', + enableShareAppMessage: true, } diff --git a/src/pages/index/index.tsx b/src/pages/index/index.tsx index de0e0b0..77a2031 100644 --- a/src/pages/index/index.tsx +++ b/src/pages/index/index.tsx @@ -8,10 +8,9 @@ import ShopCart from '@/components/shopCart' import { goLink } from '@/common/common' import styles from './index.module.scss' import React, { useEffect, useMemo, useRef, useState } from 'react' -import Taro, { Events, useDidShow, usePullDownRefresh, useRouter } from '@tarojs/taro' +import Taro, { Events, useDidShow, usePullDownRefresh} from '@tarojs/taro' import {GetProductKindListApi, GetProductListApi} from '@/api/material' import useLogin from '@/use/useLogin' -import LoadingCard from '@/components/loadingCard' import { dataLoadingStatus } from '@/common/util' export default () => { @@ -96,7 +95,7 @@ export default () => { //数据加载状态 const statusMore = useMemo(() => { return dataLoadingStatus({list:productData.list, total: productData.total, status: productState.loading}) - }, [productData]) + }, [productData, productState.loading]) return ( setShowShopCart(!showShopCart)}> diff --git a/src/pages/order/comfirm.config.ts b/src/pages/order/comfirm.config.ts index b0cb522..67ce23e 100644 --- a/src/pages/order/comfirm.config.ts +++ b/src/pages/order/comfirm.config.ts @@ -1,3 +1,4 @@ export default { - navigationBarTitleText: '确认订单' + navigationBarTitleText: '确认订单', + enableShareAppMessage: true, } diff --git a/src/pages/order/comfirm.tsx b/src/pages/order/comfirm.tsx index 3dd3e12..e8a8a45 100644 --- a/src/pages/order/comfirm.tsx +++ b/src/pages/order/comfirm.tsx @@ -31,7 +31,7 @@ import SubmitOrderBtn from "./components/submitOrderBtn"; const param = getParam() const idsAndSaleModel = useRef({shopping_cart_product_color_list:[], sale_mode:0}) useDidShow(async () => { - // await checkLogin() + 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({ @@ -163,7 +163,7 @@ import SubmitOrderBtn from "./components/submitOrderBtn"; getAddress(e)} defaultValue={defaultAddress}/> - + setShowDesc(true)}> 订单备注 { diff --git a/src/pages/order/components/applyAfterSales/index.module.scss b/src/pages/order/components/applyAfterSales/index.module.scss new file mode 100644 index 0000000..594b36e --- /dev/null +++ b/src/pages/order/components/applyAfterSales/index.module.scss @@ -0,0 +1,63 @@ + +.apply_after_sales_main{ + .apply_after_sales_head{ + font-size: 30px; + text-align: center; + padding: 20px 0; + font-weight: 700; + } + .kind_number{ + width: 100%; + padding: 20px; + box-sizing: border-box; + text{ + background-color: #F6F6F6; + border-radius: 10px; + font-size: $font_size_medium; + padding: 5px 0; + text-align: center; + width: 100%; + display: block; + color: $color_font_three; + } + } + .apply_after_sales_con{ + padding: 0 20px; + .apply_after_sales_title{ + display: flex; + align-items: center; + .tag{ + font-size: $font_size_min; + background-color: #CDE5FF; + padding: 5px 10px; + border-radius: 6px; + color: $color_main; + } + .title{ + font-weight: 700; + font-size: $font_size; + margin-left: 20px; + flex:1; + } + } + .color_list { + .color_item{ + display: flex; + align-items: center; + } + .image{ + width: 70px; + height: 70px; + image{ + width: 100%; + height: 100%; + border-radius: 50%; + } + } + .name_and_number{ + + } + } + } +} + diff --git a/src/pages/order/components/applyAfterSales/index.tsx b/src/pages/order/components/applyAfterSales/index.tsx new file mode 100644 index 0000000..1c6e31a --- /dev/null +++ b/src/pages/order/components/applyAfterSales/index.tsx @@ -0,0 +1,35 @@ +import { Image, Text, View } from "@tarojs/components"; +import { memo, useState } from "react"; +import classnames from "classnames"; +import styles from './index.module.scss' +import Popup from "@/components/popup"; +import { formatImgUrl } from "@/common/fotmat"; +import Counter from "@/components/counter"; + +export default memo(() => { + const [showDesc, setShowDesc] = useState(true) + return ( + + setShowDesc(false)} > + 申请退货 + 2种面料，3种颜色，共6条 + + + 大货 + 0770# 21S单面平纹(食毛) + + + + + 1# 薄荷绿x1 + + + + + + + + + + ) +}) \ No newline at end of file diff --git a/src/pages/order/components/kindList/index.tsx b/src/pages/order/components/kindList/index.tsx index e6ea05a..e93be35 100644 --- a/src/pages/order/components/kindList/index.tsx +++ b/src/pages/order/components/kindList/index.tsx @@ -1,3 +1,4 @@ +import { ORDER_STATUS } from "@/common/enum" import { formatHashTag, formatPriceDiv } from "@/common/fotmat" import { View } from "@tarojs/components" import { memo, useCallback, useMemo } from "react" @@ -17,45 +18,122 @@ type OrderParam = { total_sale_price: number, //销售金额 total_should_collect_money: number, //应收金额 total_weight_error_discount: number, //空差优惠 - + the_previous_status: number, //取消订单时的订单状态 + actual_amount: number //实付金额 } -export default memo(({value}:{value?:OrderParam}) => { +type Param = { + order: OrderParam, + comfirm?: boolean //是否是确认订单页面使用 +} + +export default memo(({order, comfirm = false}:Param) => { //对应数量 const formatCount = useCallback((item) => { - return value?.sale_mode == 0? item.roll : Number(item.length / 100) - }, [value]) + return order?.sale_mode == 0? item.roll : Number(item.length / 100) + }, [order]) //对应单价 const standardPrice = useCallback(price => { - return formatPriceDiv(price).toLocaleString() + '/' + (value?.sale_mode == 1?'m':'kg') - }, [value]) + return formatPriceDiv(price).toLocaleString() + '/' + (order?.sale_mode == 1?'m':'kg') + }, [order]) //数量格式 const numText = useMemo(() => { - if(value) - return `${value?.total_fabrics}种面料，${value?.total_colors}种颜色，共${value?.total_number}${value?.unit}` - }, [value]) + if(order) + return `${order?.total_fabrics}种面料，${order?.total_colors}种颜色，共${order?.total_number}${order?.unit}` + }, [order]) + + const { + SaleOrderStatusBooking, // 待接单 + SaleOrderStatusArranging, // 配布中 + SaleOrderStatusArranged, // 已配布 + SaleOrderStatusWaitingPayment, // 待付款 + SaleOrderStatusWaitingDelivery, // 待发货 + SaleOrderStatusWaitingReceipt, // 待收货 + SaleOrderStatusAlreadyReceipt, // 已收货 + SaleOrderStatusComplete, // 已完成 + SaleOrderStatusRefund, // 已退款 + SaleOrderStatusCancel, // 已取消 + } = ORDER_STATUS + + //金额列表枚举 + const priceList = [ + { + id:1, + value:[SaleOrderStatusBooking.value, SaleOrderStatusArranging.value], + label:'预估金额', + field: 'estimate_amount' + }, + { + id:2, + value:[SaleOrderStatusArranged.value, SaleOrderStatusWaitingPayment.value, SaleOrderStatusWaitingDelivery.value, SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusComplete.value, SaleOrderStatusRefund.value, SaleOrderStatusCancel.value], + label:'合计金额', + field: 'total_sale_price' + }, + { + id:3, + value:[SaleOrderStatusWaitingPayment.value, SaleOrderStatusWaitingDelivery.value, SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusComplete.value, SaleOrderStatusRefund.value, SaleOrderStatusCancel.value], + label:'空差优惠', + field: 'total_weight_error_discount' + }, + { + id:4, + value:[ SaleOrderStatusWaitingPayment.value], + label:'应付金额', + field: 'total_should_collect_money' + }, + { + id:5, + value:[SaleOrderStatusWaitingDelivery.value, SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusComplete.value, SaleOrderStatusRefund.value, SaleOrderStatusCancel.value], + label:'实付金额', + field: 'actual_amount' + } + ] + + //是否显示价格 + const showPrice = useCallback((priceInfo, status) => { + return priceInfo.value.includes(status) + }, [order]) const priceConDom = useMemo(() => { - return ( - <> - {(value&&value.status < 3)&&} - {(value&&value.status >= 3)&&} - {(value&&value.status >= 3)&&} - {(value&&value.status >= 3)&&} - - ) - }, [value]) + if(!order) return + //确认订单 + if(comfirm == true) { + return + } + //订单为取消订单状态 + if(order?.status == SaleOrderStatusCancel.value) { + return ( + <> + { + priceList.map(item => { + return <>{showPrice(item, order?.the_previous_status)&&} + }) + } + + ) + } else { + return ( + <> + { + priceList.map(item => { + return <>{showPrice(item, order?.status)&&} + }) + } + + ) + } + }, [order]) return ( <> {numText} { - value?.list?.map(item => { + order?.list?.map(item => { return - {value.sale_mode_name} + {order.sale_mode_name} {formatHashTag(item.code, item.name)} 共{item?.product_colors.length}种 @@ -69,7 +147,7 @@ export default memo(({value}:{value?:OrderParam}) => { ¥{standardPrice(colorItem.sale_price)} - ×{formatCount(colorItem)}{value.unit} + ×{formatCount(colorItem)}{order.unit} ¥{formatPriceDiv(colorItem.estimate_amount).toLocaleString()} diff --git a/src/pages/order/components/orderState/index.tsx b/src/pages/order/components/orderState/index.tsx index 0ba593d..18ac43d 100644 --- a/src/pages/order/components/orderState/index.tsx +++ b/src/pages/order/components/orderState/index.tsx @@ -3,13 +3,29 @@ import { memo, useMemo, useState } from "react" import styles from './index.module.scss' import classnames from "classnames"; import { formatDateTime, formatImgUrl } from "@/common/fotmat"; +import { PAYMENT_METHOD, PAYMENT_METHOD_PARAM } from "@/common/enum"; + + + type Param = { - status: string, - time: string, - tag: string, - desc: string + list: { + status: string, + time: string, + tag: string, + desc: string + }[], + payment_method: 0|PAYMENT_METHOD_PARAM, + } -export default memo(({list = []}:{list?:Param[]}) => { + +//支付方式枚举 +const { + PaymentMethodAccountPeriod, + PaymentMethodCashOnDelivery, +} = PAYMENT_METHOD + +export default memo(({list = [], payment_method = 0}:Param) => { + const [showMore, setShowMore] = useState(false) const changeMore = () => { setShowMore(() => !showMore) @@ -38,7 +54,8 @@ export default memo(({list = []}:{list?:Param[]}) => { } - {/* */} + {(payment_method == PaymentMethodCashOnDelivery.value)&&} + {(payment_method == PaymentMethodAccountPeriod.value)&&} } diff --git a/src/pages/order/components/payment/index.tsx b/src/pages/order/components/payment/index.tsx index 3d6f42a..86d4306 100644 --- a/src/pages/order/components/payment/index.tsx +++ b/src/pages/order/components/payment/index.tsx @@ -1,5 +1,5 @@ import { Text, View } from "@tarojs/components"; -import { memo, useEffect, useMemo, useState } from "react"; +import { memo, useCallback, useEffect, useMemo, useState } from "react"; import AmountShow from "../amountShow"; import classnames from "classnames"; import styles from './index.module.scss' @@ -11,20 +11,22 @@ import ScanPay from "../scanPay"; import { GetOrderPayApi, SubmitOrderPayApi } from "@/api/orderPay"; import { formatPriceDiv } from "@/common/fotmat"; import {alert} from "@/common/common" +import { PAYMENT_METHOD, PAYMENT_METHOD_PARAM } from "@/common/enum"; type Param = { show?: true|false, onClose?: () => void, - orderId?: number, //应付单id - onSubmitSuccess?: () => void //支付成功 + onSubmitSuccess?: () => void, //支付成功 + orderInfo?: OrderInfo } -type PayInfo = { - amount: string +type OrderInfo = { + orderId: number, //应付单id + payment_method: 0|PAYMENT_METHOD_PARAM //支付方式 } -type PayStatus = 0|1|2|3|4|null //0:预存款， 1:账期，2：线下汇款， 3：扫码支付, 4:货到付款 -export default memo(({show = false, onClose, orderId = 0, onSubmitSuccess}:Param) => { +type PayStatus = 1|2|3|4|5|null //1:预存款， 2:账期，3：线下汇款， 4：扫码支付, 5:货到付款 +export default memo(({show = false, onClose, orderInfo, onSubmitSuccess}:Param) => { //提交参数 const [submitData, setSubmitData] = useState<{id:number, payment_method: PayStatus}>({ @@ -50,19 +52,21 @@ export default memo(({show = false, onClose, orderId = 0, onSubmitSuccess}:Param const [payInfo, setPayInfo] = useState() const {fetchData: orderFetchData} = GetOrderPayApi() const getOrderPay = async () => { - let {data} = await orderFetchData({id: orderId}) + let {data} = await orderFetchData({id: orderInfo?.orderId}) setPayInfo(() => data) } useEffect(() => { - if(show&&orderId) - setSubmitData((val) => ({...val, id:orderId})) + if(show&&orderInfo?.orderId) { + setSubmitData((val) => ({...val, id:orderInfo.orderId})) getOrderPay() - }, [show, orderId]) + } + }, [show, orderInfo]) //预存款选择 - const advanceSelectData = (val) => { + const advanceSelectData = useCallback((val) => { setSubmitData((e) => ({...e, payment_method:val})) - } + }, []) + //账期选择 const periodSelectData = (val) => { setSubmitData((e) => ({...e, payment_method:val})) @@ -85,13 +89,25 @@ export default memo(({show = false, onClose, orderId = 0, onSubmitSuccess}:Param } } + //预付款 const advance_payment = useMemo(() => { - const price = formatPriceDiv(payInfo?.should_collect_money - payInfo?.amount_paid) + const price = payInfo?.should_collect_money - payInfo?.amount_paid return ( - {(payInfo?.advance_deposit_balance < price)&&'余额不足，' }剩余 ¥{payInfo?.advance_deposit_balance} + {(payInfo?.advance_deposit_balance < price)&&'余额不足，' }剩余 ¥{formatPriceDiv(payInfo?.advance_deposit_balance)} ) }, [payInfo]) + //账期 + const account_peyment = useMemo(() => { + const price = payInfo?.should_collect_money - payInfo?.amount_paid + return ( + {(payInfo?.account_period_credit_available_line < price)&&'额度不足, '}剩余 ¥{formatPriceDiv(payInfo?.account_period_credit_available_line)} + ) + }, [payInfo]) + + //支付方式枚举 + const {PaymentMethodPreDeposit, PaymentMethodAccountPeriod} = PAYMENT_METHOD + return ( @@ -125,18 +141,19 @@ export default memo(({show = false, onClose, orderId = 0, onSubmitSuccess}:Param {advance_payment} - advanceSelectData(0)} onClose={() => advanceSelectData(null)}/> + advanceSelectData(PaymentMethodPreDeposit.value)} onClose={() => advanceSelectData(null)}/> - + {(orderInfo?.payment_method != PaymentMethodAccountPeriod.value)&& {payInfo?.account_period}天账期 - 可用额度 ¥{payInfo?.account_period_credit_available_line} + {/* 可用额度 ¥{formatPriceDiv(payInfo?.account_period_credit_available_line)} */} + {account_peyment} - periodSelectData(1)} onClose={() => periodSelectData(null)}/> - + periodSelectData(PaymentMethodAccountPeriod.value)} onClose={() => periodSelectData(null)}/> + } diff --git a/src/pages/order/index.config.ts b/src/pages/order/index.config.ts index b518f53..030cb10 100644 --- a/src/pages/order/index.config.ts +++ b/src/pages/order/index.config.ts @@ -1,5 +1,6 @@ export default { navigationBarTitleText: '订单详情', enablePullDownRefresh: true, - backgroundTextStyle: 'dark' + backgroundTextStyle: 'dark', + enableShareAppMessage: true, } diff --git a/src/pages/order/index.tsx b/src/pages/order/index.tsx index abeee6e..060dc54 100644 --- a/src/pages/order/index.tsx +++ b/src/pages/order/index.tsx @@ -5,6 +5,7 @@ import { } from "@/api/order"; import { GetOrderPayApi } from "@/api/orderPay"; import { alert, goLink } from "@/common/common"; +import { ORDER_STATUS } from "@/common/enum"; import { formatDateTime, formatPriceDiv } from "@/common/fotmat"; import OrderBtns from "@/components/orderBtns"; import Popup from "@/components/popup"; @@ -15,8 +16,8 @@ import classnames from "classnames"; import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import order from "../orderList/components/order"; import AddressInfoDetail from "./components/addressInfoDetail"; +import ApplyAfterSales from "./components/applyAfterSales"; import KindList from "./components/kindList"; -import orderState from "./components/orderState"; import OrderState from "./components/orderState"; import Payment from "./components/payment"; import Remark from "./components/remark"; @@ -24,10 +25,8 @@ import styles from './index.module.scss' export default () => { const [showDesc, setShowDesc] = useState(false) - const router = useRouter() const orderId = useRef(Number(router.params.id)) - useDidShow(() => { getSaleOrderPreView() }) @@ -66,6 +65,9 @@ import styles from './index.module.scss' total_sale_price: orderDetail.total_sale_price, //销售金额 total_should_collect_money: orderDetail.total_should_collect_money, //应收金额 total_weight_error_discount: orderDetail.total_weight_error_discount, //空差优惠 + actual_amount: orderDetail.actual_amount, //实付金额 + the_previous_status: orderDetail.the_previous_status, //取消订单时的订单状态 + }) } const formatPreViewOrderMemo = useMemo(() => { @@ -114,6 +116,12 @@ import styles from './index.module.scss' setShowDesc(() => false) }, []) + //支付所需数据 + const payOrderInfo = useMemo(() => { + if(orderDetail) + return {orderId: orderDetail.should_collect_order_id, payment_method:orderDetail.payment_method } + }, [orderDetail]) + //去付款 const [payMentShow, setPayMentShow] = useState(false) const toPay = () => { @@ -165,24 +173,29 @@ import styles from './index.module.scss' //按钮所需数据 const orderInfo = useMemo(() => { return { - status: orderDetail?.status, + status: orderDetail?.status, //订单状态 orderId: orderDetail?.id, - payModel: orderDetail?.id, //支付方式 - realPayPrice: orderDetail?.id, //实付金额 - pendingPayPrice: orderDetail?.id, //待付金额 + settle_mode: orderDetail?.settle_mode, + actual_amount: orderDetail?.actual_amount, //实付金额 + wait_pay_amount: orderDetail?.wait_pay_amount, //待付金额 } }, [orderDetail]) + //订单状态枚举 + const {SaleOrderStatusCancel} = ORDER_STATUS + + + return ( {/* */} - + - + 订单信息 @@ -206,14 +219,14 @@ import styles from './index.module.scss' } - + {(orderDetail?.status != SaleOrderStatusCancel.value)&& - {/* toPay()}>去支付 */} - + } setShowDesc(false)} > getRemark(e)}/> - + + ) diff --git a/src/pages/orderList/components/order/index.module.scss b/src/pages/orderList/components/order/index.module.scss index e453de3..85e1123 100644 --- a/src/pages/orderList/components/order/index.module.scss +++ b/src/pages/orderList/components/order/index.module.scss @@ -117,5 +117,6 @@ background-color: #F6F6F6; border-radius: 10px; padding: 10px 22px; + margin-top: 20px; } } \ No newline at end of file diff --git a/src/pages/orderList/components/order/index.tsx b/src/pages/orderList/components/order/index.tsx index 7ad9512..7bff925 100644 --- a/src/pages/orderList/components/order/index.tsx +++ b/src/pages/orderList/components/order/index.tsx @@ -1,14 +1,15 @@ import { goLink } from "@/common/common"; import { formatHashTag, formatImgUrl, formatPriceDiv } from "@/common/fotmat"; import OrderBtns from "@/components/orderBtns"; +import Payment from "@/pages/order/components/payment"; import { useSelector } from "@/reducers/hooks"; import { Image, Text, View } from "@tarojs/components" import classnames from "classnames"; -import { memo, useCallback, useMemo, useRef } from "react"; +import { memo, useCallback, useMemo, useRef, useState } from "react"; import styles from './index.module.scss' type Param = { - value?: { + value: { order_no: string, sale_mode: number, sale_mode_name: string, @@ -19,9 +20,13 @@ type Param = { total_colors: number, total_number: number, status: 0, - id: number + id: number, + payment_method: number, //支付方式 + actual_amount: number, //实付金额 + wait_pay_amount: number //待付金额 + should_collect_order_id: number //应付单id }, - onClickBtn?: (val:number) => void + onClickBtn?: (val:{status:number, orderInfo:Param['value']}) => void } export default memo(({value, onClickBtn}: Param) => { const userInfo = useSelector(state => state.userInfo) @@ -36,7 +41,17 @@ export default memo(({value, onClickBtn}: Param) => { //点击订单按钮 const orderBtnsClick = useCallback((status) => { - onClickBtn?.(status) + onClickBtn?.({status, orderInfo:value}) + }, [value]) + + //按钮所需数据 + const orderInfo = useMemo(() => { + return { + status: value?.status, //订单状态 + orderId: value?.id, + actual_amount: value?.actual_amount, //实付金额 + wait_pay_amount: value?.wait_pay_amount, //待付金额 + } }, [value]) return ( @@ -83,7 +98,8 @@ export default memo(({value, onClickBtn}: Param) => { {`${value?.total_fabrics}种面料，${value?.total_colors}种颜色，共${value?.total_number}条`} - + + ) }) diff --git a/src/pages/orderList/index.config.ts b/src/pages/orderList/index.config.ts index c47055c..ef55be9 100644 --- a/src/pages/orderList/index.config.ts +++ b/src/pages/orderList/index.config.ts @@ -1,3 +1,4 @@ export default { navigationBarTitleText: '订单列表', + enableShareAppMessage: true, } diff --git a/src/pages/orderList/index.module.scss b/src/pages/orderList/index.module.scss index f7222c8..e8f528a 100644 --- a/src/pages/orderList/index.module.scss +++ b/src/pages/orderList/index.module.scss @@ -1,5 +1,5 @@ .order_list_main{ - min-height: 100vh; + height: 100vh; background-color: $color_bg_one; display: flex; flex-direction: column; @@ -8,6 +8,7 @@ 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; @@ -28,8 +29,7 @@ } } .order_list{ - flex:1; - height: 0; + height: calc(100vh - 160px); .order_item_con{ margin-top: 20px; padding: 0 20px; diff --git a/src/pages/orderList/index.tsx b/src/pages/orderList/index.tsx index 866597b..dee8c57 100644 --- a/src/pages/orderList/index.tsx +++ b/src/pages/orderList/index.tsx @@ -10,6 +10,8 @@ import InfiniteScroll from "@/components/infiniteScroll" import {GetOrderStatusListApi, GetOrderListApi} from '@/api/order' import { dataLoadingStatus, getFilterData } from "@/common/util" import OrderStatusList from "./components/orderStatusList" +import Payment from "../order/components/payment" +import { ORDER_STATUS } from "@/common/enum" export default () => { const {checkLogin} = useLogin() @@ -26,12 +28,13 @@ export default () => { }) //获取订单状态 - const {fetchData: statusFetchData} = GetOrderStatusListApi() + // const {fetchData: statusFetchData} = GetOrderStatusListApi() const [statusList, setStatusList] = useState([{id: -1, name: '全部'}]) - const getOrderStatusList = async () => { - let res = await statusFetchData() - let list = [...statusList, ...res.data.list||[]] - setStatusList(() => list) + const getOrderStatusList = () => { + const status = Object.values(ORDER_STATUS).map(item => { + return {id: item.value, name: item.label} + }) + setStatusList((e) => [...e, ...status]) } useEffect(() => { getOrderStatusList() @@ -82,10 +85,7 @@ export default () => { setSearchField((val) => ({...val, name:e, size:10})) }, []) - const clickOrderBtn = useCallback((state) => { - getOrderList() - }, [orderData]) - + //列表下拉刷新 const [refresherTriggeredStatus, setRefresherTriggeredStatus] = useState(false) const getRefresherRefresh = async () => { @@ -93,6 +93,33 @@ export default () => { setRefresherTriggeredStatus(true) setSearchField((val) => ({...val, size:10})) } + + //监听点击的按钮 + const clickOrderBtn = useCallback(({status, orderInfo}) => { + if(status == 2) { + //去支付 + setPayOrderInfo({orderId:orderInfo.should_collect_order_id, payment_method:orderInfo.payment_method}) + toPay() + } + }, [orderData]) + + + //去付款 + const [payOrderInfo, setPayOrderInfo] = useState() + const [payMentShow, setPayMentShow] = useState(false) + const toPay = () => { + setPayMentShow(true) + } + //关闭支付弹窗 + const closePayShow = useCallback(() => { + setPayMentShow(() => false) + }, []) + //支付成功 + const onPaySuccess = useCallback(() => { + getOrderList() + closePayShow() + }, []) + return ( @@ -107,6 +134,7 @@ export default () => { })} + ) } diff --git a/src/pages/salesAfter/components/addressInfo/index.module.scss b/src/pages/salesAfter/components/addressInfo/index.module.scss new file mode 100644 index 0000000..4e9ea21 --- /dev/null +++ b/src/pages/salesAfter/components/addressInfo/index.module.scss @@ -0,0 +1,71 @@ +.order_address{ + height: 178px; + background: #ffffff; + border-radius: 20px; + display: flex; + align-items: center; + padding: 30px; + box-sizing: border-box; + margin-top: 20px; + .order_address_icon{ + font-size: 76px; + color: $color_main; + } + .order_address_text_con{ + flex:1; + padding: 0 30px; + box-sizing: border-box; + .order_address_text_title{ + font-size: $font_size_medium; + margin-top: 10px; + @include common_ellipsis; + } + .order_address_text_name{ + + align-items: center; + text{ + &:nth-child(1) { + color: #000; + font-weight: 700; + font-size: $color_font_one; + margin-right: 40px; + } + &:nth-child(2) { + color: $color_font_one; + font-size: $font_size_medium; + } + } + } + } + .updateBtn{ + font-size: $font_size_medium; + color: $color_font_three; + width: 96px; + height: 52px; + border: 2px solid #dddddd; + border-radius: 28px; + text-align: center; + line-height: 52px; + } + .order_address_text_no{ + flex: 1; + font-size: $font_size; + font-weight: 700; + margin-left: 30px; + } + .order_address_more_icon{ + color: $color_font_three; + font-size: $font_size; + } + +} +.order_address_list { + height: 900px; + .order_address_title{ + font-size: $font_size; + font-weight: 700; + width: 100%; + text-align: center; + padding: 20px 0 30px 0; + } +} \ No newline at end of file diff --git a/src/pages/salesAfter/components/addressInfo/index.tsx b/src/pages/salesAfter/components/addressInfo/index.tsx new file mode 100644 index 0000000..4225fea --- /dev/null +++ b/src/pages/salesAfter/components/addressInfo/index.tsx @@ -0,0 +1,76 @@ +import AddressList from "@/components/AddressList"; +import Popup from "@/components/popup"; +import { Text, View } from "@tarojs/components" +import classnames from "classnames"; +import { memo, useCallback, useEffect, useMemo, useState } from "react"; +import styles from './index.module.scss' + +export type AddressInfoParam = { + province_name: string, + city_name: string, + district_name: string, + address_detail: string, + id?: number, + name: string, + phone: string +} +type Param = { + onSelect?: (val:any) => void, //选择 + defaultValue?: AddressInfoParam|null //默认值 + disabled?: false|true //true禁用后只用于展示 +} + +export default memo(({onSelect, defaultValue = null, disabled = false}: Param) => { + const [showAddressList, setShowAddressList] = useState(false) + + useEffect(() => { + setUserInfo(() => defaultValue) + }, [defaultValue]) + + //选择地址 + const [userInfo, setUserInfo] = useState() + const getAddress = useCallback((val) => { + setShowAddressList(() => false) + setUserInfo(() => val) + onSelect?.(val) + }, []) + + //地址格式 + const formatAddress = useMemo(() => { + if(userInfo) + return userInfo.province_name + userInfo.city_name + userInfo.district_name + userInfo.address_detail + }, [userInfo]) + + const changeShow = () => { + if(!disabled) + setShowAddressList(() => true) + } + return ( + + changeShow()}> + + {!userInfo&& + <> + 请选择收货地址及信息 + + + ||<> + + + {userInfo?.name} + {userInfo?.phone} + + {formatAddress} + + 修改 + } + + {!disabled&& setShowAddressList(false)}> + + 请选择收货地址 + getAddress(item)}/> + + } + + ) +}) \ No newline at end of file diff --git a/src/pages/salesAfter/components/addressInfoDetail/index.module.scss b/src/pages/salesAfter/components/addressInfoDetail/index.module.scss new file mode 100644 index 0000000..68e6171 --- /dev/null +++ b/src/pages/salesAfter/components/addressInfoDetail/index.module.scss @@ -0,0 +1,112 @@ +.order_address{ + height: 178px; + background: #ffffff; + border-radius: 20px; + display: flex; + align-items: center; + padding: 30px; + box-sizing: border-box; + margin-top: 20px; + position: relative; + .order_address_icon{ + font-size: 50px; + color: $color_main; + position: absolute; + top: 35px; + left: 20px; + } + .order_address_text_con{ + flex:1; + padding-left: 50px; + box-sizing: border-box; + height: 100%; + display: flex; + flex-direction: column; + justify-content: space-between; + .order_address_text_title{ + font-size: $font_size_medium; + margin-top: 10px; + @include common_ellipsis; + display: flex; + align-items: center; + justify-content: space-between; + .moreIconfont{ + font-size: 20px; + } + } + .order_address_text_name{ + + align-items: center; + text{ + &:nth-child(1) { + color: #000; + font-weight: 700; + font-size: $color_font_one; + margin-right: 40px; + } + &:nth-child(2) { + color: $color_font_one; + font-size: $font_size_medium; + } + } + } + } + .updateBtn{ + width:200px; + font-size: $font_size_min; + background-color: #F0F0F0; + height: 64px; + border-radius: 24px; + color: $color_font_two; + position: absolute; + bottom: 10px; + right: 10px; + z-index: 999; + .updateBtn_list{ + position: absolute; + display: flex; + z-index: 5; + width: 100%; + .updateBtn_item_select{ + color: #fff; + } + } + .updateBtn_item{ + flex:1; + text-align: center; + line-height: 64px; + } + .updateBtn_select{ + color: #fff; + background-color: $color_main; + border-radius: 24px; + position: absolute; + width: 100px; + height: 61px; + z-index: 1; + transition: all 0.3s ease-in-out; + } + + } + .order_address_text_no{ + flex: 1; + font-size: $font_size; + font-weight: 700; + margin-left: 30px; + } + .order_address_more_icon{ + color: $color_font_three; + font-size: $font_size; + } + +} +.order_address_list { + height: 900px; + .order_address_title{ + font-size: $font_size; + font-weight: 700; + width: 100%; + text-align: center; + padding: 20px 0 30px 0; + } +} \ No newline at end of file diff --git a/src/pages/salesAfter/components/addressInfoDetail/index.tsx b/src/pages/salesAfter/components/addressInfoDetail/index.tsx new file mode 100644 index 0000000..7290ae6 --- /dev/null +++ b/src/pages/salesAfter/components/addressInfoDetail/index.tsx @@ -0,0 +1,122 @@ +import { EditSaleOrderAddressApi, EditSaleOrderShipmentModeApi } from "@/api/order"; +import { alert } from "@/common/common"; +import { debounce } from "@/common/util"; +import AddressList from "@/components/AddressList"; +import Popup from "@/components/popup"; +import { Text, View } from "@tarojs/components" +import classnames from "classnames"; +import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useState } from "react"; +import styles from './index.module.scss' + +export type AddressInfoParam = { + province_name: string, + city_name: string, + district_name: string, + address_detail: string, + id?: number, + name: string, + phone: string, +} +type Param = { + onSelect?: (val:any) => void, //选择 + defaultValue?: AddressInfoParam|null, //默认值 + disabled?: false|true, //true禁用后只用于展示 + shipment_mode?: 1|2, //1自提 2物流 + onChangeShipmentMode?: (val: number) => void, //返回收货方式 + orderId?: number //订单id +} + +export default memo(forwardRef(({onSelect, onChangeShipmentMode, defaultValue = null, orderId = 0, shipment_mode = 1}: Param, ref) => { + const [showAddressList, setShowAddressList] = useState(false) + + useEffect(() => { + setUserInfo(() => defaultValue) + }, [defaultValue]) + + const [userInfo, setUserInfo] = useState() + + //地址格式 + const formatAddress = useMemo(() => { + if(userInfo) + return userInfo.province_name + userInfo.city_name + userInfo.district_name + userInfo.address_detail + }, [userInfo]) + + const changeShow = () => { + if(receivingStatus == 2) + setShowAddressList(() => true) + } + + useEffect(() => { + setReceivingStatus(() => shipment_mode) + }, [shipment_mode]) + + //把内部方法提供给外部 + useImperativeHandle(ref, () => ({ + changeShow + })) + + //收货方法,1:自提，2物流 + const [receivingStatus, setReceivingStatus] = useState(1) + const {fetchData: shipmentModeFetchData} = EditSaleOrderShipmentModeApi() + const onReceivingStatus = (value, e) => { + e.stopPropagation() + changeReceivingStatus(value) + } + const changeReceivingStatus = debounce(async (value) => { + alert.loading('正在修改') + const res = await shipmentModeFetchData({id: orderId, shipment_mode:value}) + if(res.success) { + alert.success('收货方式修改成功') + onChangeShipmentMode?.(value) + setReceivingStatus(value) + } else { + alert.none(res.msg) + } + }, 10) + + //修改地址 + const {fetchData: addressFetchData} = EditSaleOrderAddressApi() + const getAddress = async (value) => { + alert.loading('正在修改') + const res = await addressFetchData({id: orderId, address_id: value.id}) + if(res.success) { + alert.success('地址修改成功') + onSelect?.(value) + setShowAddressList(() => false) + setUserInfo(() => value) + } else { + alert.none(res.msg) + } + } + + return ( + + changeShow()}> + + + + {formatAddress} + {(receivingStatus == 2)&&} + + + {userInfo?.name} + {userInfo?.phone} + + + + + onReceivingStatus(1,e)}>自提 + onReceivingStatus(2,e)}>物流 + + + + + setShowAddressList(false)}> + + 请选择收货地址 + + + + + ) +})) \ No newline at end of file diff --git a/src/pages/salesAfter/components/amountShow/index.module.scss b/src/pages/salesAfter/components/amountShow/index.module.scss new file mode 100644 index 0000000..647e203 --- /dev/null +++ b/src/pages/salesAfter/components/amountShow/index.module.scss @@ -0,0 +1,35 @@ +.order_price_num{ + color: $color_main; + font-weight: 700; + text{ + &:nth-child(1) { + font-size: $font_size_min; + } + &:nth-child(2) { + font-size: $font_size; + } + &:nth-child(3) { + font-size: $font_size_medium; + } + } +} +.emphasis_num{ + .price_text{ + &:nth-child(2) { + font-size: $font_size_big; + } + } +} +.emphasis_num_big{ + .price_text{ + &:nth-child(1) { + font-size: $font_size_big; + } + &:nth-child(2) { + font-size: 60px; + } + &:nth-child(1) { + font-size: $font_size_big; + } + } +} \ No newline at end of file diff --git a/src/pages/salesAfter/components/amountShow/index.tsx b/src/pages/salesAfter/components/amountShow/index.tsx new file mode 100644 index 0000000..877f7df --- /dev/null +++ b/src/pages/salesAfter/components/amountShow/index.tsx @@ -0,0 +1,28 @@ +import { Text, View } from "@tarojs/components"; +import { memo, useCallback } from "react"; +import styles from './index.module.scss' +import classnames from "classnames"; + +type Param = { + number: number, //数字 + status: 0|1|2 //0 小型，1中型，2大 +} +export default memo(({number = 0, status = 1}:Param) => { + const priceDom = useCallback(() => { + let res = number.toFixed(2).split('.') + let int_num = parseInt(res[0]) + '' + let decimals_num = res[1] + return ( + <> + ¥ + {Number(int_num).toLocaleString()} + .{decimals_num} + + ) + }, [number]) + return ( + + {priceDom()} + + ) +}) \ No newline at end of file diff --git a/src/pages/salesAfter/components/contentBox/index.module.scss b/src/pages/salesAfter/components/contentBox/index.module.scss new file mode 100644 index 0000000..a5a2fc0 --- /dev/null +++ b/src/pages/salesAfter/components/contentBox/index.module.scss @@ -0,0 +1,14 @@ +.content_box { + background-color: #fff; + margin-top: 20px; + border-radius: 20px; + padding: 20px; + .content_box_title{ + font-size: $font_size; + font-weight: 700; + margin-bottom: 20px; + } + .content_box_con { + + } +} \ No newline at end of file diff --git a/src/pages/salesAfter/components/contentBox/index.tsx b/src/pages/salesAfter/components/contentBox/index.tsx new file mode 100644 index 0000000..8a81420 --- /dev/null +++ b/src/pages/salesAfter/components/contentBox/index.tsx @@ -0,0 +1,20 @@ +import {View } from "@tarojs/components"; +import { memo, ReactDOM, ReactNode } from "react"; +import styles from './index.module.scss' + +type Param = { + children?: ReactNode, + title?: string +} +export default memo(({children, title=''}: Param) => { + return ( + <> + + {title} + + {children} + + + + ) +}) \ No newline at end of file diff --git a/src/pages/salesAfter/components/estimatedAmount/index.module.scss b/src/pages/salesAfter/components/estimatedAmount/index.module.scss new file mode 100644 index 0000000..4b4a958 --- /dev/null +++ b/src/pages/salesAfter/components/estimatedAmount/index.module.scss @@ -0,0 +1,70 @@ +.order_price{ + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + &:nth-last-child(n+2) { + margin-bottom: 30px; + } + .order_price_text{ + font-size: $font_size_medium; + // margin-right: 10px; + display: flex; + .iconfont_msg{ + position: relative; + } + .miconfont{ + font-size: 26px; + font-weight: normal; + margin-left: 5px; + } + .message{ + position: absolute; + top: -50px; + background: #A8B3BD; + z-index: 9; + min-height: 50px; + border-radius: 10px; + padding: 10px; + box-sizing: border-box; + &::before{ + z-index: 1; + position: absolute; + bottom: -7px; + left: 10px; + width: 15px; + height: 15px; + content: " "; + transform: rotate(45deg); + background: #A8B3BD; + box-sizing: border-box; + } + } + } + .emphasis{ + font-weight: 700; + } + .order_price_num{ + color: $color_main; + font-weight: 700; + text{ + &:nth-child(1) { + font-size: $font_size_min; + } + &:nth-child(2) { + font-size: 26px; + } + &:nth-child(3) { + font-size: $font_size_medium; + } + } + } + .emphasis_num{ + text{ + &:nth-child(2) { + font-size: $font_size_big; + } + } + } + +} \ No newline at end of file diff --git a/src/pages/salesAfter/components/estimatedAmount/index.tsx b/src/pages/salesAfter/components/estimatedAmount/index.tsx new file mode 100644 index 0000000..04bc49a --- /dev/null +++ b/src/pages/salesAfter/components/estimatedAmount/index.tsx @@ -0,0 +1,29 @@ +import { Text, View } from "@tarojs/components" +import { memo, useCallback, useEffect, useMemo } from "react" +import {formatKbPrice} from '@/common/common' +import classnames from "classnames"; +import styles from './index.module.scss' +import AmountShow from "../amountShow"; +type Param = { + style?: Object, + number?: number, + title?: string, + titleStatus?: true|false, //true 标题加大加深 + numberStatus?: 0|1|2, //数字尺寸 +} +export default memo(({style, number = 0, titleStatus = true, title = '', numberStatus = 1}:Param) => { + return ( + <> + + + {title} + + + {/* 123123123121212312312312312 */} + + + + + + ) +}) \ No newline at end of file diff --git a/src/pages/salesAfter/components/kindList/index.module.scss b/src/pages/salesAfter/components/kindList/index.module.scss new file mode 100644 index 0000000..be8f53f --- /dev/null +++ b/src/pages/salesAfter/components/kindList/index.module.scss @@ -0,0 +1,109 @@ + +.orders_list_title{ + padding: 20px 20px 10px 20px; + color: $color_font_two; + font-size: $font_size_medium; +} +.orders_list_con{ + + background-color: #fff; + border-radius: 20px; + padding: 20px; + .order_list{ + &:nth-child(n+2) { + margin-top: 30px; + } + .order_list_title{ + display: flex; + align-items: center; + .tag{ + font-size: $font_size_min; + background-color: #CDE5FF; + padding: 5px 10px; + border-radius: 6px; + color: $color_main; + } + .title{ + font-weight: 700; + font-size: $font_size; + margin-left: 20px; + flex:1; + } + .num{ + color: $color_font_two; + font-size: $font_size_min; + } + } + } + .order_list_scroll{ + margin-top: 30px; + + .order_list_item { + display: flex; + &:nth-child(2) { + margin-top: 30px; + } + .order_list_item_img{ + width: 126px; + height: 126px; + border-radius: 20px; + background-color: red; + } + .order_list_item_con{ + display: flex; + width: 100%; + flex:1; + border-bottom: 1px solid #f0f0f0; + height: 150px; + padding-top: 20px; + box-sizing: border-box; + } + .order_list_item_des{ + flex:1; + box-sizing: border-box; + padding-left: 30px; + .order_list_item_title{ + font-weight: 700; + font-size: $font_size; + margin-bottom: 15px; + } + .order_list_item_price{ + font-size: 26px; + color: $color_font_three; + } + } + .order_list_item_count{ + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-end; + .count_num{ + color: $color_main; + font-size: $font_size; + margin-bottom: 15px; + font-weight: 400; + text{ + font-size: $font_size_min; + } + } + .count_price { + font-size: $font_size; + font-weight: 700; + text{ + font-size: $font_size_min; + } + } + } + } + } + .order_estimated_amount{ + display: flex; + align-items: flex-end; + flex-direction: column; + padding: 30px 0; + .order_price_des{ + font-size: $font_size_medium; + color: $color_font_two; + } + } +} diff --git a/src/pages/salesAfter/components/kindList/index.tsx b/src/pages/salesAfter/components/kindList/index.tsx new file mode 100644 index 0000000..e93be35 --- /dev/null +++ b/src/pages/salesAfter/components/kindList/index.tsx @@ -0,0 +1,166 @@ +import { ORDER_STATUS } from "@/common/enum" +import { formatHashTag, formatPriceDiv } from "@/common/fotmat" +import { View } from "@tarojs/components" +import { memo, useCallback, useMemo } from "react" +import EstimatedAmount from "../estimatedAmount" +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_should_collect_money: number, //应收金额 + total_weight_error_discount: number, //空差优惠 + the_previous_status: number, //取消订单时的订单状态 + actual_amount: number //实付金额 +} + +type Param = { + order: OrderParam, + comfirm?: boolean //是否是确认订单页面使用 +} + +export default memo(({order, comfirm = false}:Param) => { + //对应数量 + const formatCount = useCallback((item) => { + return order?.sale_mode == 0? item.roll : Number(item.length / 100) + }, [order]) + //对应单价 + const standardPrice = useCallback(price => { + return formatPriceDiv(price).toLocaleString() + '/' + (order?.sale_mode == 1?'m':'kg') + }, [order]) + + //数量格式 + const numText = useMemo(() => { + if(order) + return `${order?.total_fabrics}种面料，${order?.total_colors}种颜色，共${order?.total_number}${order?.unit}` + }, [order]) + + const { + SaleOrderStatusBooking, // 待接单 + SaleOrderStatusArranging, // 配布中 + SaleOrderStatusArranged, // 已配布 + SaleOrderStatusWaitingPayment, // 待付款 + SaleOrderStatusWaitingDelivery, // 待发货 + SaleOrderStatusWaitingReceipt, // 待收货 + SaleOrderStatusAlreadyReceipt, // 已收货 + SaleOrderStatusComplete, // 已完成 + SaleOrderStatusRefund, // 已退款 + SaleOrderStatusCancel, // 已取消 + } = ORDER_STATUS + + //金额列表枚举 + const priceList = [ + { + id:1, + value:[SaleOrderStatusBooking.value, SaleOrderStatusArranging.value], + label:'预估金额', + field: 'estimate_amount' + }, + { + id:2, + value:[SaleOrderStatusArranged.value, SaleOrderStatusWaitingPayment.value, SaleOrderStatusWaitingDelivery.value, SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusComplete.value, SaleOrderStatusRefund.value, SaleOrderStatusCancel.value], + label:'合计金额', + field: 'total_sale_price' + }, + { + id:3, + value:[SaleOrderStatusWaitingPayment.value, SaleOrderStatusWaitingDelivery.value, SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusComplete.value, SaleOrderStatusRefund.value, SaleOrderStatusCancel.value], + label:'空差优惠', + field: 'total_weight_error_discount' + }, + { + id:4, + value:[ SaleOrderStatusWaitingPayment.value], + label:'应付金额', + field: 'total_should_collect_money' + }, + { + id:5, + value:[SaleOrderStatusWaitingDelivery.value, SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusComplete.value, SaleOrderStatusRefund.value, SaleOrderStatusCancel.value], + label:'实付金额', + field: 'actual_amount' + } + ] + + //是否显示价格 + const showPrice = useCallback((priceInfo, status) => { + return priceInfo.value.includes(status) + }, [order]) + + const priceConDom = useMemo(() => { + if(!order) return + //确认订单 + if(comfirm == true) { + return + } + //订单为取消订单状态 + if(order?.status == SaleOrderStatusCancel.value) { + return ( + <> + { + priceList.map(item => { + return <>{showPrice(item, order?.the_previous_status)&&} + }) + } + + ) + } else { + return ( + <> + { + priceList.map(item => { + return <>{showPrice(item, order?.status)&&} + }) + } + + ) + } + }, [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} + ¥{standardPrice(colorItem.sale_price)} + + + ×{formatCount(colorItem)}{order.unit} + ¥{formatPriceDiv(colorItem.estimate_amount).toLocaleString()} + + + + })} + + + }) + } + + {priceConDom} + + + + ) +}) \ No newline at end of file diff --git a/src/pages/salesAfter/components/offlinePay/index.module.scss b/src/pages/salesAfter/components/offlinePay/index.module.scss new file mode 100644 index 0000000..f84e995 --- /dev/null +++ b/src/pages/salesAfter/components/offlinePay/index.module.scss @@ -0,0 +1,46 @@ +$top:170px; +.offlinePay_main{ + .offlinePay_con{ + padding: 20px; + background-color: #F6F6F6; + border-radius: 20px; + .miconfont_title{ + transform: rotate(-180deg); + position: absolute; + left: 20px; + top: 27px; + font-size: 37px; + color: $color_font_three; + z-index: 99; + } + } + .title{ + font-size: $font_size_big; + color: #000000; + text-align: center; + font-weight: 700; + position: relative; + + } + + .offlinePay_list{ + border-radius: 10px; + padding: 60px 0; + .offlinePay_con_text{ + font-size: $font_size; + font-weight: 700; + } + } + .btns{ + background: #007aff; + border-radius: 40px; + width: 668px; + height: 82px; + text-align: center; + line-height: 80px; + width: 100%; + color: #fff; + font-size: 32px; + margin-top: 30px; + } +} \ No newline at end of file diff --git a/src/pages/salesAfter/components/offlinePay/index.tsx b/src/pages/salesAfter/components/offlinePay/index.tsx new file mode 100644 index 0000000..4022374 --- /dev/null +++ b/src/pages/salesAfter/components/offlinePay/index.tsx @@ -0,0 +1,52 @@ +import { Text, View } from "@tarojs/components"; +import { memo } from "react"; +import AmountShow from "../amountShow"; +import classnames from "classnames"; +import styles from './index.module.scss' + +import MCheckbox from "@/components/checkbox"; +import Popup from "@/components/popup"; +import SearchInput from "@/components/searchInput"; +import Taro from "@tarojs/taro"; + +type Param = { + show?: true|false, + onClose?: () => void +} +export default memo(({show = true, onClose}:Param) => { + //复制功能 + const clipboardData = () => { + Taro.setClipboardData({ + data: '开户名称:佛山市浩川盛世科技有限公司; 开户银行:招商银行汾江支行; 转账汇款账号:62062342120001221231212', + success: function (res) { + Taro.showToast({ + icon: 'none', + title: '复制成功' + }) + } + }) + } + return ( + + + + + 线下汇款 + + + 佛山市浩川盛世科技有限公司 + + + 招商银行汾江支行 + + + 62062342120001221231212 + + + 复制信息 + + + + + ) +}) \ No newline at end of file diff --git a/src/pages/salesAfter/components/orderState copy/index.module.scss b/src/pages/salesAfter/components/orderState copy/index.module.scss new file mode 100644 index 0000000..78bda44 --- /dev/null +++ b/src/pages/salesAfter/components/orderState copy/index.module.scss @@ -0,0 +1,18 @@ +.order_flow_state{ + display: flex; + align-items: center; + padding: 0 30px; + height: 116px; + background-color: #fff; + border-radius: 20px; + .order_flow_state_text{ + color: $color_main; + font-size:$font_size; + font-weight: 700; + } + .order_flow_state_desc{ + color: $color_font_three; + font-size: $font_size_medium; + margin-left: 50px; + } +} \ No newline at end of file diff --git a/src/pages/salesAfter/components/orderState copy/index.tsx b/src/pages/salesAfter/components/orderState copy/index.tsx new file mode 100644 index 0000000..58fec4d --- /dev/null +++ b/src/pages/salesAfter/components/orderState copy/index.tsx @@ -0,0 +1,14 @@ +import { View } from "@tarojs/components" +import styles from './index.module.scss' + +export default ({ + state = '', + desc = '' +}) => { + return ( + + {state} + {desc} + + ) +} \ No newline at end of file diff --git a/src/pages/salesAfter/components/orderState/index.module.scss b/src/pages/salesAfter/components/orderState/index.module.scss new file mode 100644 index 0000000..90dbcbb --- /dev/null +++ b/src/pages/salesAfter/components/orderState/index.module.scss @@ -0,0 +1,105 @@ +.order_flow_state{ + background-color: #fff; + border-radius: 20px; + padding: 20px; + box-sizing:border-box; + position: relative; + overflow: hidden; + .order_status_list{ + max-height: 250px; + overflow: hidden; + transition: all 0.3s ease-in-out; + } + .order_status_list_show { + max-height: 1000px !important; + } + .order_status_item{ + position: relative; + padding-left: 50px; + &:nth-last-child(n+2) { + padding-bottom: 30px; + } + .order_status_tail_end, .order_status_tail{ + width: 15px; + height: 15px; + border: 2px solid $color_main; + background-color: #fff; + border-radius: 50%; + position:absolute; + left: 0; + top: 10px; + z-index: 10; + } + .order_status_tail_end{ + background-color: $color_main; + } + .order_status_line{ + border-left: 2px solid $color_main; + height: 100%; + top: 10px; + left: 9px; + position: absolute; + z-index: 1; + } + .order_status_content{ + display: flex; + align-items: center; + .order_status_title{ + color: $color_font_two; + font-size: $font_size; + font-weight: 700; + } + .order_status_time{ + color: $color_font_two; + font-size: $font_size_medium; + padding: 0 20px; + } + .order_status_tag{ + font-size: $font_size_min; + background: #F0F0F0; + border-radius: 6px; + padding: 5px 10px; + color: $color_font_two; + } + .order_status_select{ + color: $color_main; + } + .order_status_tag_select{ + color: $color_main; + } + } + .order_status_des{ + color: $color_font_two; + font-size: $font_size_medium; + } + .order_status_des_select{ + color: $color_font_one; + } + } + .more{ + width: 100%; + text-align: center; + font-size: $font_size_min; + color: $color_font_one; + padding-top: 20px; + .miconfonts{ + display: inline-block; + font-size: 25px; + transform:rotate(90deg); + } + .open_miconfonts{ + transform:rotate(-90deg); + } + } + .image_tag{ + width: 140px; + height: 144px; + .image{ + width: 140px; + height: 144px; + } + position: absolute; + top: -10px; + right: -10px; + } +} \ No newline at end of file diff --git a/src/pages/salesAfter/components/orderState/index.tsx b/src/pages/salesAfter/components/orderState/index.tsx new file mode 100644 index 0000000..82ed17f --- /dev/null +++ b/src/pages/salesAfter/components/orderState/index.tsx @@ -0,0 +1,63 @@ +import { Image, Text, View } from "@tarojs/components" +import { memo, useMemo, useState } from "react" +import styles from './index.module.scss' +import classnames from "classnames"; +import { formatDateTime, formatImgUrl } from "@/common/fotmat"; +import { PAYMENT_METHOD, PAYMENT_METHOD_PARAM } from "@/common/enum"; + + + +type Param = { + list: { + status: string, + time: string, + tag: string, + desc: string + }[], + payment_method: 0|PAYMENT_METHOD_PARAM, + +} + +//支付方式枚举 +const { + PaymentMethodAccountPeriod, + PaymentMethodCashOnDelivery, +} = PAYMENT_METHOD + +export default memo(({list = [], payment_method = 0}:Param) => { + + const [showMore, setShowMore] = useState(false) + const changeMore = () => { + setShowMore(() => !showMore) + } + const dataList = useMemo(() => { + return list.reverse() + }, [list]) + + return ( + <> + {(dataList.length > 0)&& + + {dataList.map((item, index) => + {(dataList.length > 1)&&} + {(dataList.length != (index + 1))&&} + + {item.status} + {formatDateTime(item.time)} + {/* {item.tag} */} + + {item.desc} + )} + + {(dataList.length > 2) && changeMore()}> + {showMore&&'收起详情'||'点击查看详情'} + + } + + {(payment_method == PaymentMethodAccountPeriod.value)&&} + {(payment_method == PaymentMethodCashOnDelivery.value)&&} + + } + + ) +}) \ No newline at end of file diff --git a/src/pages/salesAfter/components/payment/index.module.scss b/src/pages/salesAfter/components/payment/index.module.scss new file mode 100644 index 0000000..340b0ed --- /dev/null +++ b/src/pages/salesAfter/components/payment/index.module.scss @@ -0,0 +1,126 @@ +$top:190px; +.payment_main{ + .payment_con{ + padding: 20px; + background-color: #F6F6F6; + border-radius: 20px; + .miconfont_title{ + transform: rotate(-180deg); + position: absolute; + left: 20px; + top: 27px; + font-size: 37px; + color: $color_font_three; + z-index: 99; + } + + } + .title{ + font-size: $font_size_big; + color: #000000; + text-align: center; + font-weight: 700; + position: relative; + + } + .amount{ + text-align: center; + padding: 25px 0; + } + + .payment_list{ + background-color: #fff; + // box-shadow: 2px 2px 6px 0px rgba(0,0,0,0.16); + min-height: 300px; + border-radius: 10px; + padding-bottom: 100px; + position: relative; + background: radial-gradient(circle 20px at left $top, transparent 20px, #fff 20px + 3px) left 0px/60% no-repeat , + radial-gradient(circle 20px at right $top, transparent 20px, #fff 20px + 3px) right 0px/60% no-repeat; + filter: drop-shadow(2px 2px 6px rgba(0, 0, 0, .16)); + position: relative; + &::before{ + content: ''; + position: absolute; + border-bottom: 3px dashed #ccc; + top: $top; + width: calc(100% - 100px); + left:0; + right: 0; + margin: auto; + + } + .payment_list_top_border{ + height: 32px; + width: 100%; + background: linear-gradient(215deg,#cde5ff 2%, #cde5ff 2%, #68b4ff 72%); + border-radius: 10px 10px 0px 0px; + } + .payment_list_title{ + text-align: center; + padding: 30px 0 50px 0; + font-size: $font_size; + color: $color_font_three; + .payment_list_title_price_item{ + display: flex; + justify-content: space-between; + padding: 0 90px; + &:nth-child(1) { + margin-bottom: 15px; + } + } + text{ + &:nth-child(2) { + color: $color_main; + } + } + } + .payment_list_con{ + padding: 20px 30px 0 30px; + .payment_list_item{ + display: flex; + justify-content: space-between; + align-items: center; + height: 123px; + &:nth-last-child(n+2) { + border-bottom: 2px solid #F3F3F3; + } + } + .payment_list_item_left{ + display: flex; + flex-direction: column; + font-size: $font_size; + .payment_list_item_left_name{ + display: flex; + align-items: center; + } + .miconfont{ + font-size: 30px; + color: #FFC300; + padding-right: 10px; + } + .payment_list_item_left_price{ + font-size: $font_size_min; + color: $color_font_two; + padding-left: 35px; + padding-top: 5px; + } + } + .miconfont_more{ + font-size: 20px; + } + } + } + .btns{ + background: #007aff; + border-radius: 40px; + width: 668px; + height: 82px; + text-align: center; + line-height: 80px; + width: 100%; + color: #fff; + font-size: 32px; + margin-top: 30px; + } +} \ No newline at end of file diff --git a/src/pages/salesAfter/components/payment/index.tsx b/src/pages/salesAfter/components/payment/index.tsx new file mode 100644 index 0000000..8af70dc --- /dev/null +++ b/src/pages/salesAfter/components/payment/index.tsx @@ -0,0 +1,185 @@ +import { Text, View } from "@tarojs/components"; +import { memo, useCallback, useEffect, useMemo, useState } from "react"; +import AmountShow from "../amountShow"; +import classnames from "classnames"; +import styles from './index.module.scss' + +import MCheckbox from "@/components/checkbox"; +import Popup from "@/components/popup"; +import OfflinePay from "../offlinePay"; +import ScanPay from "../scanPay"; +import { GetOrderPayApi, SubmitOrderPayApi } from "@/api/orderPay"; +import { formatPriceDiv } from "@/common/fotmat"; +import {alert} from "@/common/common" +import { PAYMENT_METHOD, PAYMENT_METHOD_PARAM } from "@/common/enum"; + +type Param = { + show?: true|false, + onClose?: () => void, + onSubmitSuccess?: () => void, //支付成功 + orderInfo?: OrderInfo +} + +type OrderInfo = { + orderId: number, //应付单id + payment_method: 0|PAYMENT_METHOD_PARAM //支付方式 +} + +type PayStatus = 1|2|3|4|5|null //1:预存款， 2:账期，3：线下汇款， 4：扫码支付, 5:货到付款 +export default memo(({show = false, onClose, orderInfo, onSubmitSuccess}:Param) => { + + //提交参数 + const [submitData, setSubmitData] = useState<{id:number, payment_method: PayStatus}>({ + id:0, + payment_method: null + }) + + //线下付款 + const [offlinePayShow, setofflinePayShow] = useState(false) + const onShowOfflinePay = () => { + setofflinePayShow(true) + onClose?.() + } + + //扫码支付 + const [scanPayShow, setScanPayShow] = useState(false) + const onShowScanPay = () => { + setScanPayShow(true) + onClose?.() + } + + //获取支付方式数据 + const [payInfo, setPayInfo] = useState() + const {fetchData: orderFetchData} = GetOrderPayApi() + const getOrderPay = async () => { + let {data} = await orderFetchData({id: orderInfo?.orderId}) + setPayInfo(() => data) + } + useEffect(() => { + if(show&&orderInfo?.orderId) { + setSubmitData((val) => ({...val, id:orderInfo.orderId})) + getOrderPay() + } + }, [show, orderInfo]) + + //预存款选择 + const advanceSelectData = useCallback((val) => { + setSubmitData((e) => ({...e, payment_method:val})) + }, []) + + //账期选择 + const periodSelectData = (val) => { + setSubmitData((e) => ({...e, payment_method:val})) + } + + //提交支付 + const {fetchData: submitFetchData} = SubmitOrderPayApi() + const submitPay = async () => { + if(submitData.payment_method === null) { + alert.error('请选择支付方式') + return false + } + alert.loading('正在支付') + let res = await submitFetchData(submitData) + if(res.success) { + alert.success('支付成功') + onSubmitSuccess?.() + } else { + alert.none(res.msg) + } + } + + //预付款 + const advance_payment = useMemo(() => { + const price = payInfo?.should_collect_money - payInfo?.amount_paid + return ( + {(payInfo?.advance_deposit_balance < price)&&'余额不足，' }剩余 ¥{formatPriceDiv(payInfo?.advance_deposit_balance)} + ) + }, [payInfo]) + + //账期 + const account_peyment = useMemo(() => { + const price = payInfo?.should_collect_money - payInfo?.amount_paid + return ( + {(payInfo?.account_period < price)&&'额度不足, '}剩余 ¥{formatPriceDiv(payInfo?.account_period_credit_available_line)} + ) + }, [payInfo]) + + //支付方式枚举 + const {PaymentMethodPreDeposit, PaymentMethodAccountPeriod} = PAYMENT_METHOD + + return ( + + + + + 订单支付 + + + + + + + {/* 向商家发起支付 */} + + + 订单金额 + ¥{formatPriceDiv(payInfo?.should_collect_money)} + + + 已付金额 + ¥{formatPriceDiv(payInfo?.amount_paid)} + + + + + + + + + 预存款 + + {advance_payment} + + advanceSelectData(PaymentMethodPreDeposit.value)} onClose={() => advanceSelectData(null)}/> + + {(orderInfo?.payment_method != PaymentMethodAccountPeriod.value)&& + + + + {payInfo?.account_period}天账期 + + {/* 可用额度 ¥{formatPriceDiv(payInfo?.account_period_credit_available_line)} */} + {account_peyment} + + periodSelectData(PaymentMethodAccountPeriod.value)} onClose={() => periodSelectData(null)}/> + } + + + + + 线下汇款 + + + + + + + + + 扫码支付 + + + + + + + 确认交易 + + + setofflinePayShow(false)}/> + setScanPayShow(false)}/> + + + ) +}) \ No newline at end of file diff --git a/src/pages/salesAfter/components/remark/index.module.scss b/src/pages/salesAfter/components/remark/index.module.scss new file mode 100644 index 0000000..d624050 --- /dev/null +++ b/src/pages/salesAfter/components/remark/index.module.scss @@ -0,0 +1,48 @@ +.order_popup{ + display: flex; + flex-direction: column; + align-items: center; + padding: 20px 0; + .order_popup_title{ + color: $font_size_big; + font-weight: 700; + color: #000000; + padding-bottom: 20px; + } + .order_popup_input{ + width: 100%; + padding: 0 25px; + box-sizing: border-box; + margin-top: 43px; + position: relative; + .descDataNum{ + position: absolute; + right: 40px; + bottom: 10px; + height: 39px; + font-size: $font_size_medium; + color: $color_font_two; + } + textarea{ + background-color: #f3f3f3; + border-radius: 10px; + width: 100%; + height: 313px; + padding: 20px; + padding-bottom: 50px; + box-sizing: border-box; + font-size: $font_size; + border: 2px solid #e6e6e6; + } + } + .order_save_address{ + height: 82px; + background: #007aff; + border-radius: 40px; + width: 668px; + text-align: center; + line-height: 82px; + color: #fff; + margin-top: 60px; + } +} \ No newline at end of file diff --git a/src/pages/salesAfter/components/remark/index.tsx b/src/pages/salesAfter/components/remark/index.tsx new file mode 100644 index 0000000..14d981b --- /dev/null +++ b/src/pages/salesAfter/components/remark/index.tsx @@ -0,0 +1,38 @@ +import Popup from "@/components/popup" +import { Textarea, View } from "@tarojs/components" +import { useCallback, useState } from "react" +import styles from './index.module.scss' + +type Param = { + onBlur?: (val:any) => void + onSave?: (val: string) => void +} +export default ({onBlur, onSave}:Param) => { + const [descData, setDescData] = useState({ + number: 0, + value: '', + count: 200 + }) + const getDesc = useCallback((e) => { + let value = e.detail.value + let res = value + if(value.length > descData.count) { + res = value.slice(0, descData.count) + } + setDescData({...descData, number:res.length, value: res}) + },[]) + + const setSave = () => { + onSave?.(descData.value) + } + return ( + + 编辑备注 + + + {descData.number}/{descData.count} + + setSave()}>保存 + + ) +} \ No newline at end of file diff --git a/src/pages/salesAfter/components/scanPay/index.module.scss b/src/pages/salesAfter/components/scanPay/index.module.scss new file mode 100644 index 0000000..dcb356d --- /dev/null +++ b/src/pages/salesAfter/components/scanPay/index.module.scss @@ -0,0 +1,54 @@ +$top:170px; +.scanPay_main{ + .scanPay_con{ + padding: 20px; + background-color: #F6F6F6; + border-radius: 20px; + .miconfont_title{ + transform: rotate(-180deg); + position: absolute; + left: 20px; + top: 27px; + font-size: 37px; + color: $color_font_three; + z-index: 99; + + } + } + .title{ + font-size: $font_size_big; + color: #000000; + text-align: center; + font-weight: 700; + position: relative; + } + .desc{ + font-size: $font_size_min; + color: $color_main; + text-align: center; + padding: 10px 0; + .miconfont{ + font-size: 25px; + } + } + + .scanPay_list{ + border-radius: 10px; + height: 900px; + image{ + width: 100%; + } + } + .btns{ + background: #007aff; + border-radius: 40px; + width: 668px; + height: 82px; + text-align: center; + line-height: 80px; + width: 100%; + color: #fff; + font-size: 32px; + margin-top: 30px; + } +} \ No newline at end of file diff --git a/src/pages/salesAfter/components/scanPay/index.tsx b/src/pages/salesAfter/components/scanPay/index.tsx new file mode 100644 index 0000000..d6fb06e --- /dev/null +++ b/src/pages/salesAfter/components/scanPay/index.tsx @@ -0,0 +1,161 @@ +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 { formatImgUrl } 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 +} + + +type Item = { + product_code: string, + product_name: string, + product_color_code: string, + product_color_name: string, + num: string, + weight: string, + sale_price: string, + total_price: string +} +type CodeParam = { + title: string, + company: string, + order_type: string, + sale_user: string, + order_created_time: string, + order_no: string, + department: string, + shipment_mode: string, + target_user_name: string, + target_address: string, + target_description: string, + pay_account: string, + bank_account_name: string, + bank_name: string, + pay_type: string, + client: string, + phone: string, + order_total_length: string, + order_total_price: string, + qrcode: string, + order_total_weight: string, + list: Item[] +} +export default memo(({show = true, onClose}:Param) => { + + //获取支付二维码 + const [payCodeImage, setPayCodeImage] = useState('') + const fileData = useRef({ + filePath: '', + base64: '' + }) + const {fetchData, state} = GetPayCode() + const getCore = async () => { + let res = await fetchData({ + title: "面料销售电子确认单", + company: "什么什么公司123", + order_type: "散剪", + sale_user: "小崔", + order_created_time:"2022/02/01 12:32:13", + order_no:"XS-211005888", + department:"嘻嘻嘻", + shipment_mode:"自提", + target_user_name:"大崔", + target_address:"阿斯顿发斯蒂芬", + target_description:"无", + pay_account:"1234567890123450001", + bank_account_name:"佛山市浩川长盛科技有限公司", + bank_name:"招商银行佛山分行禅城支行", + pay_type:"现结", + client:"客户名称", + phone:"15818085802", + order_total_length:"12", + order_total_price:"63000", + qrcode:"https://www.zzfzyc.com/checkorder/XS-211005888", + order_total_weight:"300.00", + list: [{product_code:'5215',product_name:'26S双纱亲水滑爽棉',product_color_code:'053',product_color_name:'洋红',num:'4',weight:'123.23',sale_price:'43',total_price:'4510.7'}] + }) + 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]) + + //检查是否开启保存图片权限 + 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 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/salesAfter/components/shipmentMode/index.module.scss b/src/pages/salesAfter/components/shipmentMode/index.module.scss new file mode 100644 index 0000000..5f818f9 --- /dev/null +++ b/src/pages/salesAfter/components/shipmentMode/index.module.scss @@ -0,0 +1,33 @@ + + .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; + } + } \ No newline at end of file diff --git a/src/pages/salesAfter/components/shipmentMode/index.tsx b/src/pages/salesAfter/components/shipmentMode/index.tsx new file mode 100644 index 0000000..235591c --- /dev/null +++ b/src/pages/salesAfter/components/shipmentMode/index.tsx @@ -0,0 +1,28 @@ +import { Text, View } from "@tarojs/components" +import styles from './index.module.scss' +import classnames from "classnames"; +import { memo, useRef, useState } from "react"; + +type Param = { + onSelect?:(val:number) => void +} +export default memo(({onSelect}: Param) => { + //收货方法 1:自提，2：物流 + const shipmentMode = useRef([ + {value:1, label:'上门自提', selected:false}, + {value:2, label:'物流', selected:false} + ]) + const [selectValue, setSelectValue] = useState() + const selectShipmentMode = (value) => { + setSelectValue(() => value) + onSelect?.(value) + } + return ( + + 收货方式 + {shipmentMode.current.map(item => { + return selectShipmentMode(item.value)}>{item.label} + })} + + ) +}) \ No newline at end of file diff --git a/src/pages/salesAfter/components/submitOrderBtn/index.module.scss b/src/pages/salesAfter/components/submitOrderBtn/index.module.scss new file mode 100644 index 0000000..c5ac9ed --- /dev/null +++ b/src/pages/salesAfter/components/submitOrderBtn/index.module.scss @@ -0,0 +1,69 @@ +.order_price{ + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + &:nth-last-child(n+2) { + margin-bottom: 30px; + } + .order_price_text{ + font-size: $font_size_medium; + // margin-right: 10px; + display: flex; + .iconfont_msg{ + position: relative; + } + .miconfont{ + font-size: 30px; + font-weight: normal; + } + .message{ + position: absolute; + top: -50px; + background: #A8B3BD; + z-index: 9; + min-height: 50px; + border-radius: 10px; + padding: 10px; + box-sizing: border-box; + &::before{ + z-index: 1; + position: absolute; + bottom: -7px; + left: 10px; + width: 15px; + height: 15px; + content: " "; + transform: rotate(45deg); + background: #A8B3BD; + box-sizing: border-box; + } + } + } + .emphasis{ + font-weight: 700; + } + .order_price_num{ + color: $color_main; + font-weight: 700; + text{ + &:nth-child(1) { + font-size: $font_size_min; + } + &:nth-child(2) { + font-size: 26px; + } + &:nth-child(3) { + font-size: $font_size_medium; + } + } + } + .emphasis_num{ + text{ + &:nth-child(2) { + font-size: $font_size_big; + } + } + } + +} \ No newline at end of file diff --git a/src/pages/salesAfter/components/submitOrderBtn/index.tsx b/src/pages/salesAfter/components/submitOrderBtn/index.tsx new file mode 100644 index 0000000..db9b432 --- /dev/null +++ b/src/pages/salesAfter/components/submitOrderBtn/index.tsx @@ -0,0 +1,40 @@ +import { Text, View } from "@tarojs/components" +import { memo, useCallback, useEffect, useMemo } from "react" +import {formatKbPrice} from '@/common/common' +import classnames from "classnames"; +import styles from './index.module.scss' +type Param = { + style?: Object, + number?: number +} +export default memo(({style, number = 0}:Param) => { + const priceDom = useCallback(() => { + let res = number.toFixed(2).split('.') + let int_num = parseInt(res[0]) + '' + let decimals_num = res[1] + return ( + <> + ¥ + {Number(int_num).toLocaleString()} + .{decimals_num} + + ) + }, [number]) + return ( + <> + + + 应付金额 + + + {/* 123123123121212312312312312 */} + + + + {priceDom()} + + + + + ) +}) \ No newline at end of file diff --git a/src/pages/salesAfter/components/weightMemo/index.module.scss b/src/pages/salesAfter/components/weightMemo/index.module.scss new file mode 100644 index 0000000..3c74511 --- /dev/null +++ b/src/pages/salesAfter/components/weightMemo/index.module.scss @@ -0,0 +1,39 @@ + +.weight_memo{ + background-color: #fff; + border-radius: 20px; + padding: 0 20px; + .weight_memo_item{ + display: flex; + justify-content: space-between; + height: 130px; + &:nth-child(1) { + border-bottom: 1px solid #f3f3f3; + } + .title, .desc{ + display: flex; + align-items: center; + } + .title { + font-size: $font_size; + font-weight: 700; + } + .desc{ + color: $color_font_two; + font-size: $font_size_medium; + } + .miconfont_check, .miconfont_custom{ + font-size: 37px; + color: $color_main; + font-weight: normal; + padding-right: 10px; + } + .miconfont_custom{ + color:#FFC300; + } + .miconfont_more{ + font-size: 30px; + padding-left: 10px; + } + } +} \ No newline at end of file diff --git a/src/pages/salesAfter/components/weightMemo/index.tsx b/src/pages/salesAfter/components/weightMemo/index.tsx new file mode 100644 index 0000000..7cbfd13 --- /dev/null +++ b/src/pages/salesAfter/components/weightMemo/index.tsx @@ -0,0 +1,36 @@ +import Popup from "@/components/popup" +import { Text, Textarea, View } from "@tarojs/components" +import { memo, useCallback, useState } from "react" +import styles from './index.module.scss' +import classnames from "classnames"; + +type Param = { + onCheck?: () => void + onCustom?: () => void +} +export default memo(({onCheck, onCustom}:Param) => { + return ( + + onCheck?.()}> + + + 陆盈纺织 + + + 查看原码单 + + + + onCustom?.()}> + + + 我的码单 + + + 自定义 + + + + + ) +}) \ No newline at end of file diff --git a/src/pages/salesAfter/index.config.ts b/src/pages/salesAfter/index.config.ts new file mode 100644 index 0000000..5000759 --- /dev/null +++ b/src/pages/salesAfter/index.config.ts @@ -0,0 +1,6 @@ +export default { + navigationBarTitleText: '售后详情', + enablePullDownRefresh: true, + backgroundTextStyle: 'dark', + enableShareAppMessage: true, +} diff --git a/src/pages/salesAfter/index.module.scss b/src/pages/salesAfter/index.module.scss new file mode 100644 index 0000000..f44eb04 --- /dev/null +++ b/src/pages/salesAfter/index.module.scss @@ -0,0 +1,153 @@ +.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; + color: $color_font_two; + margin-right: 10px; + flex:1; + word-break:break-all; + } + .order_desc_text_hint{ + text-align: right; + } + .miconfont{ + font-size: 20px; + color: $color_font_two; + } + } + .submit_order{ + display: flex; + position: fixed; + bottom: 0; + left: 0; + justify-content: flex-end; + width: 100%; + height: 175px; + align-items: center; + background-color: #fff; + box-shadow: 6px 0px 12px 0px rgba(0,0,0,0.16); + padding: 20px 20px; + box-sizing: border-box; + padding-bottom: constant(safe-area-inset-bottom); + padding-bottom: env(safe-area-inset-bottom); + .order_btn { + width: 152px; + height: 72px; + border: 2px solid #dddddd; + border-radius: 46px; + display: flex; + justify-content: center; + align-items: center; + color: $color_font_three; + &:nth-child(n+2) { + margin-left: 34px; + } + } + .order_btn_select{ + color: $color_main; + border: 2px solid $color_main; + } + .order_number_desc{ + font-size: $font_size_medium; + color: $color_font_two; + } + } + .order_info{ + background-color: #fff; + 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; + border: 2px solid #007cf7; + border-radius: 10px; + color: $color_main; + } + } + text{ + font-size: $font_size; + } + + } + + .after_sale_picture_list{ + display: grid; + grid-template-columns: repeat(5, 102px); + justify-items: center; + grid-row-gap:20px; + grid-column-gap: calc((100% - 102px*5)/4); + .after_sale_picture_item{ + width: 102px; + height: 102px; + image{ + width:100%; + height: 100%; + border-radius: 10px; + } + } + } + + + .weight_memo_con{ + margin-bottom: 20px; + } + +} \ No newline at end of file diff --git a/src/pages/salesAfter/index.tsx b/src/pages/salesAfter/index.tsx new file mode 100644 index 0000000..aff512d --- /dev/null +++ b/src/pages/salesAfter/index.tsx @@ -0,0 +1,188 @@ +import { + GetSaleOrderDetailApi, + EditSaleOrderRemarkApi, +} from "@/api/order"; +import { GetOrderPayApi } from "@/api/orderPay"; +import { alert, goLink } from "@/common/common"; +import { ORDER_STATUS } from "@/common/enum"; +import { formatDateTime, formatImgUrl, formatPriceDiv } from "@/common/fotmat"; +import OrderBtns from "@/components/orderBtns"; +import SearchInput from "@/components/searchInput"; +import { Image, Text, Textarea, View } from "@tarojs/components" +import Taro, {useDidShow, usePullDownRefresh, useRouter } from "@tarojs/taro"; +import classnames from "classnames"; +import { useCallback, useEffect, useMemo, useRef, useState, memo } from "react"; +import ContentBox from "./components/contentBox"; +import KindList from "./components/kindList"; +import OrderState from "./components/orderState"; +import styles from './index.module.scss' + + export default () => { + + const router = useRouter() + const orderId = useRef(Number(router.params.id)) + useDidShow(() => { + getSaleOrderPreView() + }) + + //获取订单详情 + const [orderDetail, setOrderDetail] = useState() //获取到的原始数据 + const {fetchData: getOrderFetchData} = GetSaleOrderDetailApi() + const getSaleOrderPreView = async () => { + if(orderId.current) { + let res = await getOrderFetchData({id: orderId.current}) + setOrderDetail(res.data) + } + Taro.stopPullDownRefresh() + } + + //监听获取到的数据 + useEffect(() => { + if(orderDetail) + formatData() + }, [orderDetail]) + + //格式化数据格式 + const [formatDetailOrder, setFormatDetailOrder] = useState() //格式化后的数据 + const formatData = () => { + setFormatDetailOrder({ + estimate_amount: orderDetail.estimate_amount, //预估金额 + sale_mode: orderDetail.sale_mode, + sale_mode_name: orderDetail.sale_mode_name, + total_colors: orderDetail.total_colors, //总颜色数量 + total_number: orderDetail.total_number, //总数量 + total_fabrics: orderDetail.total_fabrics, //面料数量 + unit: orderDetail.sale_mode == 0?'条':'m', //单位 + list: orderDetail.product_list, + status: orderDetail.status, //订单状态 + total_sale_price: orderDetail.total_sale_price, //销售金额 + total_should_collect_money: orderDetail.total_should_collect_money, //应收金额 + total_weight_error_discount: orderDetail.total_weight_error_discount, //空差优惠 + actual_amount: orderDetail.actual_amount, //实付金额 + the_previous_status: orderDetail.the_previous_status, //取消订单时的订单状态 + }) + } + const formatPreViewOrderMemo = useMemo(() => { + return formatDetailOrder + }, [formatDetailOrder]) + + + //获取底部按钮点击, 获取按钮状态 + const orderStateClick = useCallback((val) => { + if(val == 1) { + //取消订单 + getSaleOrderPreView() + } + if(val == 2) { + + } + }, [orderDetail]) + + //页面下拉刷新 + usePullDownRefresh(() => { + getSaleOrderPreView() + }) + + + //按钮所需数据 + const orderInfo = useMemo(() => { + return { + status: orderDetail?.status, //订单状态 + orderId: orderDetail?.id, + settle_mode: orderDetail?.settle_mode, + actual_amount: orderDetail?.actual_amount, //实付金额 + wait_pay_amount: orderDetail?.wait_pay_amount, //待付金额 + } + }, [orderDetail]) + + //订单状态枚举 + const {SaleOrderStatusCancel} = ORDER_STATUS + + return ( + + + + + {(orderDetail?.status != SaleOrderStatusCancel.value)&& + + } + + + + ) + } + + const OrderDes = memo(({val = ''}:{val?:string}) => { + //复制功能 + const clipboardData = () => { + Taro.setClipboardData({ + data: val, + success: function (res) { + Taro.showToast({ + icon: 'none', + title: '复制成功' + }) + } + }) + } + return ( + + 订单信息 + + + RA-LY-2204240002 + clipboardData()}>复制 + + + + + XS-LY-2204210002 + clipboardData()}>复制 + + + + 其他问题 + + + 板布疵点太多 + + + 2022-04-24 08:32:39 + + + ) + }) + + const AfterSalePricture = memo(() => { + //预览图片 + const showImage = () => { + Taro.previewImage({ + current: formatImgUrl(''), // 当前显示 + urls: [formatImgUrl('')] // 需要预览的图片http链接列表 + }) + } + return ( + + + + + + + + + + + + + + + + + + + + + + + ) + }) diff --git a/src/pages/salesAfterList/components/order/index.module.scss b/src/pages/salesAfterList/components/order/index.module.scss new file mode 100644 index 0000000..ece7c61 --- /dev/null +++ b/src/pages/salesAfterList/components/order/index.module.scss @@ -0,0 +1,144 @@ +.order_item{ + background-color: #fff; + border-radius: 20px; + padding: 20px; + box-sizing: border-box; + .header{ + display: flex; + align-items: center; + .user{ + display: flex; + align-items: center; + .name { + color: #000; + font-weight: 700; + margin-left: 15px; + font-size: $font_size; + } + image{ + width: 70px; + height: 70px; + border-radius: 50%; + } + } + .order_num { + flex: 1; + font-size: $font_size_medium; + color: $color_font_one; + text-align: right; + padding-right: 30px; + display: flex; + justify-content: flex-end; + align-items: center; + .miconfont { + font-size: 20px; + } + } + .tag{ + font-size: $font_size_min; + padding: 5px 15px; + background-color: $color_main; + color: #fff; + border-radius: 0px 20px 0px 20px; + } + } + .product_title{ + display: flex; + align-items: center; + padding: 35px 0; + .product_tag{ + background-color: #CDE5FF; + font-size: $font_size_min; + padding: 5px 10px; + color: $color_main; + border-radius: 6px; + } + .product_name{ + flex:1; + font-size: $font_size; + font-weight: 700; + padding-left: 20px; + } + .product_status{ + font-size: $font_size; + color: $color_main; + } + } + .product_list{ + display: flex; + .image{ + width: 126px; + height: 126px; + background: #e5ad3a; + border-radius: 20px 20px 0px 0px; + position: relative; + image{ + width: 100%; + height: 100%; + border-radius: 20px 20px 0px 0px; + } + .color_num { + background: rgba(0,0,0, 0.5); + border-radius: 50px 0px 0px 0px; + font-size: $font_size_min; + color: #fff; + position: absolute; + right:0; + bottom:0; + padding: 5px 10px; + box-sizing: border-box; + } + } + .color_list{ + flex:1; + padding-left: 30px; + .color_item{ + display: flex; + justify-content: space-between; + font-size: $font_size_min; + color: $color_font_three; + align-items: center; + margin-bottom: 20px; + .color_title{ + font-weight: 700; + font-size: $font_size; + color: #000; + } + .color_more{ + color: $color_font_three; + } + } + } + + } + .color_count_num{ + font-size: $font_size_min; + color: $color_font_two; + background-color: #F6F6F6; + border-radius: 10px; + padding: 10px 22px; + margin-top: 20px; + } + .order_number{ + display: flex; + background-color: #F6F6F6; + padding: 20px; + margin-top: 20px; + align-items: center; + font-size: $font_size_medium; + border-radius: 10px; + text{ + &:nth-child(1) { + + font-weight: 700; + color: $color_font_three; + border-right: 2px solid #CCCCCC; + padding-right: 20px; + } + &:nth-child(2) { + padding-left: 20px; + color: $color_font_one; + } + } + } +} \ No newline at end of file diff --git a/src/pages/salesAfterList/components/order/index.tsx b/src/pages/salesAfterList/components/order/index.tsx new file mode 100644 index 0000000..30cf95b --- /dev/null +++ b/src/pages/salesAfterList/components/order/index.tsx @@ -0,0 +1,109 @@ +import { goLink } from "@/common/common"; +import { formatHashTag, formatImgUrl, formatPriceDiv } from "@/common/fotmat"; +import OrderBtns from "@/components/orderBtns"; +import { useSelector } from "@/reducers/hooks"; +import { Image, Text, View } from "@tarojs/components" +import classnames from "classnames"; +import { memo, useCallback, useMemo, useRef, useState } from "react"; +import OrderStatusTag from "../orderStatusTag"; +import styles from './index.module.scss' + +type Param = { + value: { + order_no: string, + sale_mode: number, + sale_mode_name: string, + status_name: string, + shipment_mode_name: string, + product_list: any[], + total_fabrics: number, + total_colors: number, + total_number: number, + status: 0, + id: number, + payment_method: number, //支付方式 + actual_amount: number, //实付金额 + wait_pay_amount: number //待付金额 + should_collect_order_id: number //应付单id + }, + onClickBtn?: (val:{status:number, orderInfo:Param['value']}) => void +} +export default memo(({value, onClickBtn}: Param) => { + const userInfo = useSelector(state => state.userInfo) + //对应数量 + const formatCount = useCallback((item, sale_mode) => { + return sale_mode == 0? item.roll : Number(item.length / 100) + }, [value]) + //对应单价 + const standardPrice = useCallback((price, sale_mode) => { + return formatPriceDiv(price).toLocaleString() + '/' + (sale_mode == 1?'m':'kg') + }, [value]) + + //点击订单按钮 + const orderBtnsClick = useCallback((status) => { + onClickBtn?.({status, orderInfo:value}) + }, [value]) + + //按钮所需数据 + const orderInfo = useMemo(() => { + return { + status: value?.status, //订单状态 + orderId: value?.id, + actual_amount: value?.actual_amount, //实付金额 + wait_pay_amount: value?.wait_pay_amount, //待付金额 + } + }, [value]) + + return ( + + goLink('/pages/salesAfter/index', {id: value?.id})}> + + + {userInfo?.adminUserInfo?.user_name} + + + 订单号：{value?.order_no} + + + + + goLink('/pages/salesAfter/index', {id: value?.id})}> + + {value?.sale_mode_name} + {formatHashTag(value?.product_list[0].code, value?.product_list[0].name)} + {value?.status_name} + + + + + {value?.product_list[0].product_colors[0].code} + + + {value?.product_list[0].product_colors.map((itemColor, index) => { + return ( + (index <= 1)&& + {formatHashTag(itemColor.code, itemColor.name)} + {standardPrice(itemColor.sale_price, value.sale_mode)} + ×{formatCount(itemColor, value.sale_mode)}条 + + ) + }) + } + + …… + …… + …… + + + + {`${value?.total_fabrics}种面料，${value?.total_colors}种颜色，共${value?.total_number}条`} + + 已申请退款 + 订单号：LY2278204399678 + + + + + ) +}) + diff --git a/src/pages/salesAfterList/components/orderStatusList/index.module.scss b/src/pages/salesAfterList/components/orderStatusList/index.module.scss new file mode 100644 index 0000000..47de83d --- /dev/null +++ b/src/pages/salesAfterList/components/orderStatusList/index.module.scss @@ -0,0 +1,18 @@ +.order_status_list{ + font-size: $font_size; + color: #9E9E9E; + margin-top: 20px; + .order_status_item{ + padding: 20px; + box-sizing: border-box; + } + .selected{ + font-weight: 700; + color: #000; + border-bottom: 4px solid #707070; + } + .order_list_scroll{ + white-space: nowrap; + display: flex; + } +} \ No newline at end of file diff --git a/src/pages/salesAfterList/components/orderStatusList/index.tsx b/src/pages/salesAfterList/components/orderStatusList/index.tsx new file mode 100644 index 0000000..3e12f6f --- /dev/null +++ b/src/pages/salesAfterList/components/orderStatusList/index.tsx @@ -0,0 +1,46 @@ +import { ScrollView, View } from "@tarojs/components" +import { memo, useEffect, useState } from "react" +import styles from './index.module.scss' +import classnames from "classnames"; + +type Param = { + list: {id: number, name: string}[], + defaultId?: number|null, + onSelect?: (val: number) => void +} +export default memo(({list = [], defaultId = null, onSelect}: Param) => { + const [selectInfo, setSelectInfo] = useState({ + selected: -1, //当前选中的id + tabId: '', //需要滚动到的id + }) + useEffect(() => { + if(defaultId) { + const index = list?.findIndex(item => { + console.log(item.id, defaultId) + return item.id == defaultId + }) + if(index !== -1) { + const num = index > 0?( index - 1) : 0 + setSelectInfo((e) => ({...e, tabId:list[num].id.toString()})) + } + } + }, [defaultId]) + const clickEvent = ({item, index}: {item:any, index:number}) => { + const num = index > 0?( index - 1) : 0 + setSelectInfo((e) => ({...e, tabId:list[num].id.toString(), selected: item.id})) + onSelect?.(item.id) + } + + return ( + + + + {list.map((item, index) => { + return clickEvent({item, index})} className={classnames(styles.order_status_item, (selectInfo.selected==item.id)&&styles.selected)}>{item.name} + })} + + + + ) +}) + diff --git a/src/pages/salesAfterList/components/orderStatusTag/index.module.scss b/src/pages/salesAfterList/components/orderStatusTag/index.module.scss new file mode 100644 index 0000000..df84721 --- /dev/null +++ b/src/pages/salesAfterList/components/orderStatusTag/index.module.scss @@ -0,0 +1,21 @@ +.tag{ + font-size: $font_size_min; + padding: 5px 15px; + background-color: $color_main; + color: #fff; + border-radius: 0px 20px 0px 20px; + display: flex; + align-items: center; + .miconfont{ + font-size: 30px; + } + +} +.saleReturn_tag{ + background-color: #E4E4FF; + color: #1818B4; +} +.refund_tag { + background-color: #FFE6CE; + color: #EE7500; +} \ No newline at end of file diff --git a/src/pages/salesAfterList/components/orderStatusTag/index.tsx b/src/pages/salesAfterList/components/orderStatusTag/index.tsx new file mode 100644 index 0000000..5664c7c --- /dev/null +++ b/src/pages/salesAfterList/components/orderStatusTag/index.tsx @@ -0,0 +1,19 @@ +import { Text, View } from "@tarojs/components" +import { memo } from "react" +import classnames from "classnames"; +import styles from './index.module.scss' + + +type Param = { + status?: 0|1|2 //0默认不处理, 1退款，2退货 +} +export default memo(({status = 0}:Param) => { + return ( + <> + {(status !== 0)&& + + { status == 1?'退款':'退货'} + } + + ) +}) \ No newline at end of file diff --git a/src/pages/salesAfterList/index.config.ts b/src/pages/salesAfterList/index.config.ts new file mode 100644 index 0000000..d4c9fc3 --- /dev/null +++ b/src/pages/salesAfterList/index.config.ts @@ -0,0 +1,4 @@ +export default { + navigationBarTitleText: '退货/售后', + enableShareAppMessage: true, +} diff --git a/src/pages/salesAfterList/index.module.scss b/src/pages/salesAfterList/index.module.scss new file mode 100644 index 0000000..e8f528a --- /dev/null +++ b/src/pages/salesAfterList/index.module.scss @@ -0,0 +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{ + height: calc(100vh - 160px); + .order_item_con{ + margin-top: 20px; + padding: 0 20px; + } + } +} \ No newline at end of file diff --git a/src/pages/salesAfterList/index.tsx b/src/pages/salesAfterList/index.tsx new file mode 100644 index 0000000..f5c59c7 --- /dev/null +++ b/src/pages/salesAfterList/index.tsx @@ -0,0 +1,139 @@ +import Search from "@/components/search" +import useLogin from "@/use/useLogin" +import { Image, ScrollView, Text, View } from "@tarojs/components" +import Taro, { useDidShow, usePullDownRefresh, useRouter } from "@tarojs/taro" +import { useCallback, useEffect, useMemo, useRef, useState } from "react" +import styles from './index.module.scss' +import classnames from "classnames"; +import Order from "./components/order" +import InfiniteScroll from "@/components/infiniteScroll" +import {GetOrderStatusListApi, GetOrderListApi} from '@/api/order' +import { dataLoadingStatus, getFilterData } from "@/common/util" +import OrderStatusList from "./components/orderStatusList" +import Payment from "../order/components/payment" +import { AFTER_ORDER_STATUS } from "@/common/enum" + +export default () => { + const {checkLogin} = useLogin() + useDidShow(async () => { + await checkLogin() + }) + + //搜索参数 + const [searchField, setSearchField] = useState({ + status: -1, + page : 1, + size : 10, + Name:'' + }) + + //获取订单状态 + const [statusList, setStatusList] = useState([{id: -1, name: '全部'}]) + const getOrderStatusList = () => { + const status = Object.values(AFTER_ORDER_STATUS).map(item => { + return {id: item.value, name: item.label} + }) + setStatusList((e) => [...e, ...status]) + } + useEffect(() => { + getOrderStatusList() + }, []) + + //获取订单列表 + 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({list: res.data.list, total: res.data.total}) + setRefresherTriggeredStatus(() => false) + } + + + //监听筛选条件变化 + useEffect(() => { + getOrderList() + }, [searchField]) + + //上拉加载数据 + 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 }) + } + }, [orderData]) + + //状态改变 + const changeStatus = useCallback((e) => { + pageNum.current.page = 1 + 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}) + }, [orderData, orderState]) + + //输入了搜索关键字 + const getSearchData = useCallback((e) => { + pageNum.current.page = 1 + 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})) + } + + //监听点击的按钮 + const clickOrderBtn = useCallback(({status, orderInfo}) => { + if(status == 2) { + //去支付 + setPayOrderInfo({orderId:orderInfo.should_collect_order_id, payment_method:orderInfo.payment_method}) + toPay() + } + }, [orderData]) + + + //去付款 + const [payOrderInfo, setPayOrderInfo] = useState() + const [payMentShow, setPayMentShow] = useState(false) + const toPay = () => { + setPayMentShow(true) + } + //关闭支付弹窗 + const closePayShow = useCallback(() => { + setPayMentShow(() => false) + }, []) + //支付成功 + const onPaySuccess = useCallback(() => { + getOrderList() + closePayShow() + }, []) + + + return ( + + + + + + + + {orderData?.list.map(item => { + return + })} + + + + + ) +} diff --git a/src/pages/search/index.config.ts b/src/pages/search/index.config.ts index 2a9c72b..eac2247 100644 --- a/src/pages/search/index.config.ts +++ b/src/pages/search/index.config.ts @@ -1,3 +1,4 @@ export default { - navigationBarTitleText: '搜索' + navigationBarTitleText: '搜索', + enableShareAppMessage: true, } diff --git a/src/pages/searchList/search.config.ts b/src/pages/searchList/search.config.ts index 6241274..eac2247 100644 --- a/src/pages/searchList/search.config.ts +++ b/src/pages/searchList/search.config.ts @@ -1,3 +1,4 @@ export default { navigationBarTitleText: '搜索', + enableShareAppMessage: true, } diff --git a/src/pages/searchList/search.tsx b/src/pages/searchList/search.tsx index 301c413..7505bcd 100644 --- a/src/pages/searchList/search.tsx +++ b/src/pages/searchList/search.tsx @@ -8,7 +8,7 @@ import { useEffect, useRef, useState } from 'react'; import {GetHotSearchApi, GetSearchHistoryApi, AddSearchHistoryApi} from "@/api/search" import { SCENE } from '@/common/constant'; import useLogin from '@/use/useLogin'; -import Taro, { useDidShow } from '@tarojs/taro'; +import Taro, { useDidShow, useShareAppMessage } from '@tarojs/taro'; type searchDataParam = {'search_key':''} export default () => { diff --git a/src/pages/searchList/searchList.tsx b/src/pages/searchList/searchList.tsx index 2fe2769..7acb9fe 100644 --- a/src/pages/searchList/searchList.tsx +++ b/src/pages/searchList/searchList.tsx @@ -64,7 +64,7 @@ export default () => { //数据加载状态 const statusMore = useMemo(() => { return dataLoadingStatus({list:materialList.list, total: materialList.total, status: materialState.loading}) - }, [materialList]) + }, [materialList, materialState]) //输入了搜索关键字 const getSearchData = useCallback((e) => { diff --git a/src/pages/user/index.tsx b/src/pages/user/index.tsx index f41333b..06b76c7 100644 --- a/src/pages/user/index.tsx +++ b/src/pages/user/index.tsx @@ -4,6 +4,8 @@ import styles from './index.module.scss' import classnames from "classnames"; import { useSelector } from "@/reducers/hooks"; import { GetAdminUserInfoApi } from "@/api/user"; +import { goLink } from "@/common/common"; + export default () => { @@ -15,7 +17,6 @@ export default () => { ) } - // 头部 | 订单 const Header = memo(() => { let menu = [{ text: "待配布", icon: "icon-daipeibu" }, { text: "待付款", icon: "icon-daifukuan" }, @@ -71,7 +72,7 @@ const Header = memo(() => { 订单 - 全部 + goLink('/pages/orderList/index')}>全部 { diff --git a/src/reducers/userInfo.ts b/src/reducers/userInfo.ts index 5fbd4db..bcf3724 100644 --- a/src/reducers/userInfo.ts +++ b/src/reducers/userInfo.ts @@ -5,10 +5,12 @@ import { SET_ADMINUSERINFO, SET_TOKEN, SET_SESSIONKEY, + SET_SORTCODE, CLEAR_TOKEN, CLEAR_USERINFO, CLEAR_SESSIONKEY, CLEAR_ADMINUSERINFO, + CLEAR_SORTCODE } from '../constants/userInfo' export type UserParam = { @@ -36,14 +38,20 @@ export type UserAdminParam = { user_name?: string, wechat_user_open_id?: number is_authorize_name?: false|true, - is_authorize_phone?: false|true + is_authorize_phone?: false|true, +} + +export type SortCodeParam = { + shareShortDetail?: {title:string, code: string, img: string}, //详情分享页面短码 + shareShortPage?: {title:string, code: string, img: string}, //右上角分享页面短码 } export type DataParam = { token?: string session_key?: string, userInfo: UserParam, - adminUserInfo: UserAdminParam + adminUserInfo: UserAdminParam, + sort_code: SortCodeParam } type Action = { @@ -52,12 +60,12 @@ type Action = { } - const INIT_USER = { userInfo: Taro.getStorageSync('userInfo')?JSON.parse(Taro.getStorageSync('userInfo')):null, adminUserInfo: Taro.getStorageSync('adminUserInfo')?JSON.parse(Taro.getStorageSync('adminUserInfo')):null, token: Taro.getStorageSync('token')||'', session_key: Taro.getStorageSync('session_key')||'', + sort_code: Taro.getStorageSync('sort_code')?JSON.parse(Taro.getStorageSync('sort_code')):null, } export default function counter (state = INIT_USER, action: Action) { @@ -75,6 +83,9 @@ export default function counter (state = INIT_USER, action: Action) { case SET_SESSIONKEY: Taro.setStorageSync('session_key',data?.session_key) return {...state,...data} + case SET_SORTCODE: + Taro.setStorageSync('sort_code',JSON.stringify(data?.sort_code)) + return {...state,...data} case CLEAR_TOKEN: Taro.removeStorageSync('token') return {...state, token:''} @@ -87,6 +98,9 @@ export default function counter (state = INIT_USER, action: Action) { case CLEAR_ADMINUSERINFO: Taro.removeStorageSync('adminUserInfo') return {...state, adminUserInfo: null} + case CLEAR_SORTCODE: + Taro.removeStorageSync('sort_code') + return {...state, sortCode: null} default: return state } diff --git a/src/use/useHttp.ts b/src/use/useHttp.ts index ead24a2..2663ab8 100644 --- a/src/use/useHttp.ts +++ b/src/use/useHttp.ts @@ -168,7 +168,6 @@ export const useRequest = (options:option = { msg, data } = result.data - console.log(code, msg, data, statusCode); if (statusCode === 200) { stateRef.current.success = (code === 0 ? true : false) stateRef.current.code = code diff --git a/src/use/useLogin.ts b/src/use/useLogin.ts index aa662d7..7085254 100644 --- a/src/use/useLogin.ts +++ b/src/use/useLogin.ts @@ -1,18 +1,14 @@ -import { useEffect, useState } from "react" -import {BASE_URL, WX_APPID } from "@/common/constant" import useUserInfo from "./useUserInfo" import Taro, { useRouter } from "@tarojs/taro" -import { LoginApi } from "@/api/login" import { GetWxUserInfoApi, GetAdminUserInfoApi, GetPhoneNumberApi } from "@/api/user" -import qs from 'qs'; import useLoginRequest from "./useLoginRequest" +import { SHARE_SCENE } from "@/common/enum" +import { GetShortCodeApi } from "@/api/share" export default () => { - const {setUserInfo, setAdminUserInfo, userInfo} = useUserInfo() - - useEffect(() => { - console.log('userInfo::',userInfo.token) - }, [userInfo]) + const {setUserInfo, setAdminUserInfo, setSortCode, userInfo} = useUserInfo() + + console.log('userInfo:::', userInfo) //登录请求 (调用这个就不能再useHttp中使用，当前这个hook, 否则会死循环内存溢出) // const {fetchData} = LoginApi() @@ -33,6 +29,7 @@ export default () => { const getAdminUserInfo = async () => { let res = await useFetchData() setAdminUserInfo(res.data) + getShortCode(res.data.user_id) } //登录加checkLogin检查 @@ -45,7 +42,7 @@ export default () => { Taro.checkSession({ success: async () => { reslove(true) - if(!userInfo.adminUserInfo) getAdminUserInfo() + if(!userInfo.adminUserInfo) getAdminUserInfo() }, fail: async () => { await wxLogin() @@ -84,7 +81,6 @@ export default () => { } else { reject(user_res.msg) } - }, fail:(e) => { reject(e) @@ -115,6 +111,14 @@ export default () => { }) } + //获取分享码(右上角分享码) + const {SharePage} = SHARE_SCENE + const {fetchData: fetchDataShortCode} = GetShortCodeApi() + const getShortCode = async (user_id) => { + const {data: resPage} = await fetchDataShortCode({"share_user_id": user_id, type:SharePage.value}) + setSortCode({...userInfo.sort_code, shareShortPage: {title: '陆盈电子商城', code: resPage.md5_key, img:''}}) + } + return { checkLogin, wxLogin, diff --git a/src/use/useUserInfo.ts b/src/use/useUserInfo.ts index 9e03fc7..025bef6 100644 --- a/src/use/useUserInfo.ts +++ b/src/use/useUserInfo.ts @@ -1,6 +1,6 @@ import { useDispatch, useSelector } from 'react-redux' -import { CLEAR_SESSIONKEY, SET_USERINFO, SET_TOKEN, SET_SESSIONKEY, CLEAR_USERINFO, CLEAR_TOKEN, SET_ADMINUSERINFO} from '@/constants/userInfo' -import {DataParam, UserParam, UserAdminParam} from '@/reducers/userInfo' +import { CLEAR_SESSIONKEY, SET_USERINFO, SET_TOKEN, SET_SESSIONKEY, CLEAR_USERINFO, CLEAR_TOKEN, SET_ADMINUSERINFO, SET_SORTCODE} from '@/constants/userInfo' +import {DataParam, UserParam, UserAdminParam, SortCodeParam} from '@/reducers/userInfo' export default () => { const userInfo = useSelector((state:DataParam) => state.userInfo) as DataParam const dispatch = useDispatch() @@ -21,6 +21,10 @@ export default () => { dispatch({type:SET_ADMINUSERINFO, data:{adminUserInfo}}) } + const setSortCode = (sortCode:SortCodeParam) => { + dispatch({type:SET_SORTCODE, data:{sort_code:sortCode}}) + } + const removeUserInfo = () => { dispatch({type:CLEAR_USERINFO}) } @@ -41,6 +45,7 @@ export default () => { removeUserInfo, removeToken, removeSessionKey, + setSortCode, userInfo, //响应式数据返回 } } \ No newline at end of file