合并分支

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",
+    })
+}

src/app.config.ts

@@ -146,6 +146,18 @@ export default {
       pages: [
         "index"
       ]
+    },
+    {
+      root: "pages/salesAfterList",
+      pages: [
+        "index",
+      ]
+    },
+    {
+      root: "pages/salesAfter",
+      pages: [
+        "index",
+      ]
     }
   ]
 }

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 (
         <ContextBlueTooth>
           <Provider store={store}>
-            {children}
+            {params.children}
           </Provider>
         </ContextBlueTooth>
   )

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.4:40001/lymarket` // 王霞
-// export const BASE_URL = `http://192.168.1.224:50001/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.15:50001/lymarket` // 杰
 
 // CDN
 // 生成密钥

src/common/enum.ts

@@ -1,7 +1,41 @@
+
+//订单状态枚举
 export const ORDER_STATUS = {
-    0:{value:0, label:'申请中'},
+    SaleOrderStatusBooking  : {value:0, label:'待接单'}, // 待接单
-    1:{value:1, label:'配布中'},
+    SaleOrderStatusArranging : {value:1, label:'配布中'}, // 配布中
-    2:{value:2, label:'待发货'},
+    SaleOrderStatusArranged : {value:2, label:'已配布'}, // 已配布
-    3:{value:3, label:'已发货'},
+    SaleOrderStatusWaitingPayment : {value:7, label:'待付款'}, // 待付款
-    4:{value:4, 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:'页面分享'},
 }

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) {
+          //绑定上下级
+        }
+      }
+    })
+  }

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;
+    }   
+    
+}

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<any>({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 (
+        <View className={styles.main}>
+            <View className={styles.reduce} onClick={() => minus()}>-</View>
+            <View className={styles.input}>
+                <Input 
+                    value={String(value.count)}
+                    onInput={onInputEven}
+                    onBlur={onBluerEven}
+                    type='digit'
+                />
+                <View className={styles.unit}>{unit}</View>
+            </View>
+            <View className={styles.plus} onClick={() => onPlus()}>+</View>
+        </View>
+    )
+}

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, //支付方式
+        actual_amount: number, //实付金额
-        realPayPrice: number, //实付金额
+        wait_pay_amount: number, //待付金额
-        pendingPayPrice: 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) => {
+    const orderBtnsShow = useCallback((item) => {
-        if(item.id == 1) {
+        if(orderInfo) {
-           return( orderInfo.realPayPrice == 0 && status <= 4) //在代发货之前没有付过款
+            if(item.id == 1) {
-        } 
+                //取消订单按钮
-        if(item.id == 2) {
+                return( orderInfo.actual_amount == 0 && item.value.includes(orderInfo.status)) //在代发货之前没有付过款
-            return( orderInfo.pendingPayPrice != 0 && status <= 4) //在代发货之前没有付完款
+            } 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 (
         <View className={styles.btns_list}>
-            {orderBtnsList.current.map((item, index) => 
+            {orderBtnsList.current.map((item) => 
-                orderBtnsShow(item, status)&&<View className={styles.btns_item} onClick={() => submitBtns(item.id)}>{item.label}</View>
+                orderBtnsShow(item)&&<View key={item.id} className={styles.btns_item} onClick={() => submitBtns(item.id)}>{item.label}</View>
             )}
         </View>
     )

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;
-
+        position: relative;
-        // &::before{
+        &::before{
-        //     content: "";
+            content: "";
-        //     height: 50px;
+            height: 30px;
-        //     width: 1px;
+            width: 1px;
-        //     background-color: #F0F0F0;
+            background-color: #F0F0F0;
-        // }
+            position: absolute;
+            right: 0;
+        }
     }
     .searchInput_con{
         flex:1;

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 (
-        <View className={styles.searchInput_main} style={{height: height + 'rpx', ...stylen}}>
+        <View className={styles.searchInput_main} style={{height: height + 'rpx', ...stylen,}}>
             {showTitle&&<View className={styles.searchInput_title} style={titleStyle}>{title}</View>}
             <View className={styles.searchInput_con}>
                 {!props.children&&<Input disabled={disabled} placeholder={placeholder} onClick={() => clickOnInput?.()} onInput={(e) => changeOnInput?.(e.detail.value)}/>

src/components/shopCart/index.tsx

@@ -224,7 +224,7 @@ export default ({show = false, onClose}: param) => {
                     </View>
                     <View className={styles.con}>
                         {loading&&<LoadingCard/>}
-                        {!loading&&list?.length > 0&&<InfiniteScroll  moreStatus={false} >
+                        {!loading&&list?.length > 0&&<InfiniteScroll moreStatus={false} >
                             <View className={styles.product_list}>
                                 {list?.map((item, index) => {
                                     return <View key={index} className={classnames(styles.product_item, (selectIndex!=-1&&selectIndex!= item.sale_mode)&&styles.no_product_item_select)}>

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'
+export const CLEAR_ADMINUSERINFO = 'clearAdminUserInfo'
+export const CLEAR_SORTCODE = 'clearSortCode'

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<any>(null)
 
@@ -26,13 +25,13 @@ export default ({list = []}: params) => {
             <Swiper className={styles.swiper_item} circular={true}   onAnimationFinish={(e) => swiperChange(e)}>
             {list.map((item) => {
                 return <SwiperItem key={item.id}>
-                <View className={styles.image_item} >
+                    <View className={styles.image_item} >
-                    <Image mode="aspectFill" src={formatImgUrl(item)}></Image>
+                        <Image mode="aspectFill" src={formatImgUrl(item)}></Image>
-                </View>
+                    </View>
                 </SwiperItem>
             })}
             </Swiper>
-            <View className={styles.page} ref={pageRef}>{pageIndex+'/'+pageCount}</View>
+            {(list.length > 0)&&<View className={styles.page} ref={pageRef}>{pageIndex+'/'+pageCount}</View>}
         </View>
     )
 }

src/pages/details/index.config.ts

@@ -1,5 +1,6 @@
 export default {
   navigationBarTitleText: '详情',
   enablePullDownRefresh: true,
-  backgroundTextStyle: 'dark'
+  backgroundTextStyle: 'dark',
+  enableShareAppMessage: true
 }

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<any>({})
   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 = `
     <img style="width:100%" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic24.nipic.com%2F20121021%2F10910884_100200815001_2.jpg&refer=http%3A%2F%2Fpic24.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652257920&t=9353dda34f18ae2fe6803f3da35954bb">
   `
 
-  
+  //弹窗提示
   const [colorInfo, setColorInfo] = useState<colorItem>()
   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 => {
+  const {setSortCode, userInfo : userObj } = useUserInfo()
-    if (res.from === 'button') {
+  //详情页获取分享短码
-      // 来自页面内转发按钮
+  const {ShareDetail} = SHARE_SCENE
-      console.log(res.target)
+  const {fetchData: fetchDataShortCode} = GetShortCodeApi()
-    }
+  const getShortCode = async () => {
-    return {
+    const {data: resDetail} = await fetchDataShortCode({"share_user_id": userObj.adminUserInfo.user_id, type:ShareDetail.value, product_id: parseInt(params.id)})
-      title: '自定义转发标题',
+    setSortCode({... userObj.sort_code, shareShortDetail: {title: productName as string, code: resDetail.md5_key, img:''}})
-      path: '/pages/details/index?id=10',
+  }
-      imageUrl: ''
-    }
-  })
-  
 
   //开始下单
   const placeOrder = async (e:any) => {
@@ -108,7 +130,6 @@ export default (props:params) => {
   //页面下拉刷新
   usePullDownRefresh(() => {
     getProductDetail()
-    
   })
   
 
@@ -123,13 +144,11 @@ export default (props:params) => {
         <View className={styles.share}>
           <View className={classnames('iconfont icon-fenxiang', styles.miconfont)}></View>
           <View className={styles.text}>分享</View>
-          
           <Button open-type="share" className={styles.shareBtn}></Button>
         </View>
         <View className={styles.collect}>
           <View className={classnames('iconfont icon-shoucang', styles.miconfont, collectStatus&&styles.collected)} onClick={() => changeCollect()}></View>
           <View className={styles.text}>收藏</View>
-          
         </View>
       </View>
       <View className={styles.des_data}>

src/pages/editOrder/index.config.ts

@@ -1,5 +1,6 @@
 export default {
   navigationBarTitleText: '修改地址',
   enablePullDownRefresh: true,
-  backgroundTextStyle: 'dark'
+  backgroundTextStyle: 'dark',
+  enableShareAppMessage: true,
 }

src/pages/index/index.config.ts

@@ -1,3 +1,4 @@
 export default {
   navigationBarTitleText: '首页',
+  enableShareAppMessage: true,
 }

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 (
     <MoveBtn onClick={() => setShowShopCart(!showShopCart)}>

src/pages/order/comfirm.config.ts

@@ -1,3 +1,4 @@
 export default {
-  navigationBarTitleText: '确认订单'
+  navigationBarTitleText: '确认订单',
+  enableShareAppMessage: true,
 }

src/pages/order/comfirm.tsx

@@ -31,7 +31,7 @@ import SubmitOrderBtn from "./components/submitOrderBtn";
     const param = getParam()
     const idsAndSaleModel = useRef<orderPreParam>({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";
         <View className={styles.order_main}>
             <ShipmentMode onSelect={selectShipmentMode}/>
             <AddressInfo onSelect={(e) => getAddress(e)} defaultValue={defaultAddress}/>
-            <KindList value={formatPreViewOrderMemo}/>
+            <KindList order={formatPreViewOrderMemo} comfirm={true}/>
             <View className={styles.order_desc} onClick={() => setShowDesc(true)}>
                 <View className={styles.order_desc_con}>订单备注</View>
                 {

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{
+                
+            }
+        }
+    }
+}
+

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 (
+        <View className={styles.apply_after_sales_main}>
+            <Popup show={showDesc} showTitle={false} onClose={() => setShowDesc(false)} >
+                <View className={styles.apply_after_sales_head}>申请退货</View>
+                <View className={styles.kind_number}><Text>2种面料，3种颜色，共6条</Text></View>
+                <View className={styles.apply_after_sales_con}>
+                    <View className={styles.apply_after_sales_title}>
+                        <View className={styles.tag}>大货</View>
+                        <View className={styles.title}>0770# 21S单面平纹(食毛)</View>
+                    </View>
+                    <View className={styles.color_list}>
+                        <View className={styles.color_item}>
+                            <View className={styles.image}><Image src={formatImgUrl('')}/></View>
+                            <View className={styles.name_and_number}><Text>1# 薄荷绿</Text><Text>x1</Text></View>
+                            <View className={styles.name_and_number}>
+                                <Counter/>
+                            </View>
+                        </View>
+                    </View>
+                </View>
+                <View className="common_safe_area_y"></View>
+            </Popup>
+        </View>
+    )
+})

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)
+        return order?.sale_mode == 0? item.roll : Number(item.length / 100)
-    }, [value])
+    }, [order])
     //对应单价
     const standardPrice = useCallback(price => {
-        return formatPriceDiv(price).toLocaleString() + '/' + (value?.sale_mode == 1?'m':'kg')
+        return formatPriceDiv(price).toLocaleString() + '/' + (order?.sale_mode == 1?'m':'kg')
-    }, [value])
+    }, [order])
 
     //数量格式
     const numText = useMemo(() => {
-        if(value)
+        if(order)
-            return `${value?.total_fabrics}种面料，${value?.total_colors}种颜色，共${value?.total_number}${value?.unit}`
+            return `${order?.total_fabrics}种面料，${order?.total_colors}种颜色，共${order?.total_number}${order?.unit}`
-    }, [value])
+    }, [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 (
+        if(!order) return
-            <>
+        //确认订单
-                {(value&&value.status < 3)&&<EstimatedAmount number={formatPriceDiv(value?.estimate_amount)} title="预估金额" />}     
+        if(comfirm == true) {
-                {(value&&value.status >= 3)&&<EstimatedAmount number={formatPriceDiv(value?.total_sale_price)} titleStatus={false}  numberStatus={0} title="合计金额" />}      
+            return <EstimatedAmount  number={formatPriceDiv(order.estimate_amount)} title="预估金额" />
-                {(value&&value.status >= 3)&&<EstimatedAmount number={formatPriceDiv(value?.total_weight_error_discount)} titleStatus={false} numberStatus={0} title="空差优惠" />}      
+        } 
-                {(value&&value.status >= 3)&&<EstimatedAmount number={formatPriceDiv(value?.total_should_collect_money)} title="应付金额" />} 
+        //订单为取消订单状态
-            </>
+        if(order?.status == SaleOrderStatusCancel.value) {
-        )
+            return (
-    }, [value])
+                <>
+                    {
+                        priceList.map(item => {
+                          return <>{showPrice(item, order?.the_previous_status)&&<EstimatedAmount key={item.id} number={formatPriceDiv(order[item.field])} title={item.label} />}</>
+                        })
+                    }
+                </>
+            )
+        } else {
+            return (
+                <>
+                    {
+                        priceList.map(item => {
+                          return <>{showPrice(item, order?.status)&&<EstimatedAmount key={item.id} number={formatPriceDiv(order[item.field])} title={item.label} />}</>
+                        })
+                    }
+                </>
+            )
+        }   
+    }, [order])
     
     return (
         <>
             <View className={styles.orders_list_title}>{numText}</View>
             <View className={styles.orders_list_con}>
                 {
-                    value?.list?.map(item => {
+                    order?.list?.map(item => {
                         return <View key={item.product_code} className={styles.order_list}>
                             <View className={styles.order_list_title}>
-                                <View className={styles.tag}>{value.sale_mode_name}</View>
+                                <View className={styles.tag}>{order.sale_mode_name}</View>
                                 <View className={styles.title}>{formatHashTag(item.code, item.name)}</View>
                                 <View className={styles.num}>共{item?.product_colors.length}种</View>
                             </View>
@@ -69,7 +147,7 @@ export default memo(({value}:{value?:OrderParam}) => {
                                                 <View className={styles.order_list_item_price}>¥{standardPrice(colorItem.sale_price)}</View>
                                             </View>
                                             <View className={styles.order_list_item_count}>
-                                                <View className={styles.count_num}>×{formatCount(colorItem)}<text>{value.unit}</text></View>
+                                                <View className={styles.count_num}>×{formatCount(colorItem)}<text>{order.unit}</text></View>
                                                 <View className={styles.count_price}><text>¥</text>{formatPriceDiv(colorItem.estimate_amount).toLocaleString()}</View>
                                             </View>
                                         </View>

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,
+    list: {
-    time: string,
+        status: string,
-    tag: string,
+        time: string,
-    desc: 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[]}) => {
                     <Text className={classnames('iconfont icon-a-moreback', styles.miconfonts, showMore&&styles.open_miconfonts)}></Text>
                 </View>}
                 <View className={styles.image_tag}>
-                    {/* <Image mode="aspectFit" src={formatImgUrl('/mall/order_pay_status.png')} className={styles.image}/> */}
+                    {(payment_method == PaymentMethodCashOnDelivery.value)&&<Image mode="aspectFit" src={formatImgUrl('/mall/order_pay_status.png')} className={styles.image}/>}
+                    {(payment_method == PaymentMethodAccountPeriod.value)&&<Image mode="aspectFit" src={formatImgUrl('/mall/order_pay_status_7day.png')} className={styles.image}/>}
                 </View>
             </View>}
         </>

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 = {
+type OrderInfo = {
-    amount: string
+    orderId: number, //应付单id
+    payment_method: 0|PAYMENT_METHOD_PARAM //支付方式
 }
 
-type PayStatus = 0|1|2|3|4|null //0:预存款， 1:账期，2：线下汇款， 3：扫码支付, 4:货到付款
+type PayStatus = 1|2|3|4|5|null //1:预存款， 2:账期，3：线下汇款， 4：扫码支付, 5:货到付款
-export default memo(({show = false, onClose, orderId = 0, onSubmitSuccess}:Param) => {
+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<any>()
     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)
+        if(show&&orderInfo?.orderId) {
-            setSubmitData((val) => ({...val, id: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 (
-            <View className={styles.payment_list_item_left_price}>{(payInfo?.advance_deposit_balance < price)&&'余额不足，' }剩余 ¥{payInfo?.advance_deposit_balance}</View>
+            <View className={styles.payment_list_item_left_price}>{(payInfo?.advance_deposit_balance < price)&&'余额不足，' }剩余 ¥{formatPriceDiv(payInfo?.advance_deposit_balance)}</View>
         )
     }, [payInfo])
 
+    //账期
+    const account_peyment = useMemo(() => {
+        const price = payInfo?.should_collect_money - payInfo?.amount_paid
+        return (
+            <View className={styles.payment_list_item_left_price}>{(payInfo?.account_period_credit_available_line < price)&&'额度不足, '}剩余 ¥{formatPriceDiv(payInfo?.account_period_credit_available_line)}</View>
+        )
+    }, [payInfo])
+
+    //支付方式枚举
+    const {PaymentMethodPreDeposit, PaymentMethodAccountPeriod} = PAYMENT_METHOD
+
     return (
         <View className={styles.payment_main}>
             <Popup show={show} showTitle={false} onClose={onClose} >
@@ -125,18 +141,19 @@ export default memo(({show = false, onClose, orderId = 0, onSubmitSuccess}:Param
                                     </View>
                                     {advance_payment}
                                 </View>
-                                <MCheckbox  status={submitData.payment_method == 0} onSelect={() => advanceSelectData(0)} onClose={() => advanceSelectData(null)}/>
+                                <MCheckbox status={submitData.payment_method == PaymentMethodPreDeposit.value} onSelect={() => advanceSelectData(PaymentMethodPreDeposit.value)} onClose={() => advanceSelectData(null)}/>
                             </View>
-                            <View className={styles.payment_list_item}>
+                            {(orderInfo?.payment_method != PaymentMethodAccountPeriod.value)&&<View className={styles.payment_list_item}>
                                 <View className={styles.payment_list_item_left}>
                                     <View className={styles.payment_list_item_left_name}>
                                         <View className={classnames('iconfont icon-a-tuikuanshouhou', styles.miconfont)}></View>
                                         <View className={styles.payment_list_item_left_text}>{payInfo?.account_period}天账期</View>
                                     </View>
-                                    <View className={styles.payment_list_item_left_price}>可用额度 ¥{payInfo?.account_period_credit_available_line}</View>
+                                    {/* <View className={styles.payment_list_item_left_price}>可用额度 ¥{formatPriceDiv(payInfo?.account_period_credit_available_line)}</View> */}
+                                    {account_peyment}
                                 </View>
-                                <MCheckbox  status={submitData.payment_method == 1} onSelect={() => periodSelectData(1)} onClose={() => periodSelectData(null)}/>
+                                <MCheckbox  status={submitData.payment_method == PaymentMethodAccountPeriod.value} onSelect={() => periodSelectData(PaymentMethodAccountPeriod.value)} onClose={() => periodSelectData(null)}/>
-                            </View>
+                            </View>}
                             <View className={styles.payment_list_item} onClick={onShowOfflinePay}>
                                 <View className={styles.payment_list_item_left}>
                                     <View className={styles.payment_list_item_left_name}>

src/pages/order/index.config.ts

@@ -1,5 +1,6 @@
 export default {
   navigationBarTitleText: '订单详情',
   enablePullDownRefresh: true,
-  backgroundTextStyle: 'dark'
+  backgroundTextStyle: 'dark',
+  enableShareAppMessage: true,
 }

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>(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, //支付方式
+            settle_mode: orderDetail?.settle_mode,
-            realPayPrice: orderDetail?.id, //实付金额
+            actual_amount: orderDetail?.actual_amount, //实付金额
-            pendingPayPrice: orderDetail?.id, //待付金额
+            wait_pay_amount: orderDetail?.wait_pay_amount, //待付金额
         }
     }, [orderDetail])
 
+    //订单状态枚举
+    const {SaleOrderStatusCancel} = ORDER_STATUS
+
+    
+
     return (
         <View className={styles.order_main}>
             {/* <View className={styles.weight_memo_con}>
                 <WeightMemo/>
             </View> */}
-            <OrderState list={orderDetail?.logistics_details}/>
+            <OrderState list={orderDetail?.logistics_details} payment_method={orderDetail?.payment_method}/>
             <View >
                 <AddressInfoDetail orderId={orderDetail?.id} onSelect={getAddress} onChangeShipmentMode={getShipmentMode} ref={addressRef} defaultValue={defaultAddress} shipment_mode={orderDetail?.shipment_mode}/>
             </View>
-            <KindList value={formatPreViewOrderMemo}/>
+            <KindList order={formatPreViewOrderMemo}/>
             <View className={styles.order_info} >
                 <View className={styles.order_info_title}>订单信息</View>
                 <SearchInput showBorder={false} title='单号' height={50}>
@@ -206,14 +219,14 @@ import styles  from './index.module.scss'
                 }
                 <View className={classnames(styles.miconfont, 'iconfont icon-a-moreback')}></View>
             </View>
-            <View className={styles.submit_order}>
+            {(orderDetail?.status != SaleOrderStatusCancel.value)&&<View className={styles.submit_order}>
                 <OrderBtns orderInfo={orderInfo} onClick={orderStateClick}/>
-                {/* <View className={styles.order_btn} onClick={() => toPay()}>去支付</View>     */}
+            </View> }       
-            </View>        
             <Popup show={showDesc} showTitle={false} onClose={() => setShowDesc(false)} >
                 <Remark onSave={(e) => getRemark(e)}/>
             </Popup>
-            <Payment onSubmitSuccess={onPaySuccess} show={payMentShow} onClose={closePayShow} orderId={orderDetail?.should_collect_order_id}/>
+            <Payment onSubmitSuccess={onPaySuccess} show={payMentShow} onClose={closePayShow} orderInfo={payOrderInfo} />
+            <ApplyAfterSales/>
             <View className="common_safe_area_y"></View>
         </View>
     )

src/pages/orderList/components/order/index.module.scss

@@ -117,5 +117,6 @@
         background-color: #F6F6F6;
         border-radius: 10px;
         padding: 10px 22px;
+        margin-top: 20px;
     }
 }

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) => {
                 </View>
                 <View className={styles.color_count_num}>{`${value?.total_fabrics}种面料，${value?.total_colors}种颜色，共${value?.total_number}条`}</View>
             </View>
-            <OrderBtns status={value?.status} onClick={orderBtnsClick} orderId={value?.id as number}/>
+            <OrderBtns orderInfo={orderInfo} onClick={orderBtnsClick}/>
+            
         </View>
     )
 })

src/pages/orderList/index.config.ts

@@ -1,3 +1,4 @@
 export default {
   navigationBarTitleText: '订单列表',
+  enableShareAppMessage: true,
 }

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: calc(100vh - 160px);
-        height: 0;
         .order_item_con{
             margin-top: 20px;
             padding: 0 20px;

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<any[]>([{id: -1, name: '全部'}])
-  const getOrderStatusList = async () => {
+  const getOrderStatusList =  () => {
-    let res = await statusFetchData()
+    const status = Object.values(ORDER_STATUS).map(item => {
-    let list = [...statusList, ...res.data.list||[]]
+      return {id: item.value, name: item.label}
-    setStatusList(() => list)
+    })
+    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<any>()
+  const [payMentShow, setPayMentShow] = useState(false)
+  const toPay = () => {
+      setPayMentShow(true)
+  }
+  //关闭支付弹窗
+  const closePayShow = useCallback(() => {
+      setPayMentShow(() => false)
+  }, [])
+  //支付成功
+  const onPaySuccess = useCallback(() => {
+      getOrderList()
+      closePayShow()
+  }, [])
+
   
   return (
     <View className={styles.order_list_main}>
@@ -107,6 +134,7 @@ export default () => {
             })}
           </InfiniteScroll>
       </View>
+      <Payment onSubmitSuccess={onPaySuccess} show={payMentShow} onClose={closePayShow} orderInfo={payOrderInfo}/>
     </View>
   )
 }

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;
+    }
+}

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<any>()
+    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 (
+        <View>
+            <View className={styles.order_address} onClick={() => changeShow()}>
+                <View className={classnames(styles.order_address_icon, 'iconfont icon-daohang')}></View>
+                {!userInfo&&
+                    <>
+                        <View className={styles.order_address_text_no}>请选择收货地址及信息</View>
+                        <View className={classnames(styles.order_address_more_icon, 'iconfont icon-a-moreback')}></View>
+                    </>
+                ||<>
+                    <View className={styles.order_address_text_con}>
+                        <View className={styles.order_address_text_name}>
+                            <Text>{userInfo?.name}</Text>
+                            <Text>{userInfo?.phone}</Text>
+                        </View>
+                        <View className={styles.order_address_text_title}>{formatAddress}</View>
+                    </View>
+                    <View className={styles.updateBtn}>修改</View>
+                </>}
+            </View>
+            {!disabled&&<Popup show={showAddressList} showTitle={false} onClose={() => setShowAddressList(false)}>
+                <View className={styles.order_address_list}>
+                    <View className={styles.order_address_title}>请选择收货地址</View>
+                    <AddressList onSelect={(item) => getAddress(item)}/>
+                </View>
+            </Popup>}
+        </View>
+    )
+})

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;
+    }
+}

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<any>()
+
+    //地址格式
+    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 (
+        <View>
+            <View className={styles.order_address} onClick={() => changeShow()}>
+                <View className={classnames(styles.order_address_icon, 'iconfont', receivingStatus == 2?'icon-daohang':'icon-fahuo')}></View>
+                <View className={styles.order_address_text_con}>
+                    <View className={styles.order_address_text_title}>
+                        <Text>{formatAddress}</Text>
+                        {(receivingStatus == 2)&&<Text className={classnames(styles.moreIconfont,'iconfont icon-a-moreback')}></Text>}
+                    </View>
+                    <View className={styles.order_address_text_name}>
+                        <Text>{userInfo?.name}</Text>
+                        <Text>{userInfo?.phone}</Text>
+                    </View>
+                </View>
+                <View className={styles.updateBtn}>
+                    <View className={styles.updateBtn_list}>
+                        <View className={classnames(styles.updateBtn_item, receivingStatus==1&&styles.updateBtn_item_select)} onClick={(e) => onReceivingStatus(1,e)}>自提</View>
+                        <View className={classnames(styles.updateBtn_item, receivingStatus==2&&styles.updateBtn_item_select)} onClick={(e) => onReceivingStatus(2,e)}>物流</View>
+                    </View>
+                    <View style={{transform: receivingStatus==1?'translateX(0)':'translateX(100%)'}} className={classnames(styles.updateBtn_select)}></View>
+                </View>
+            </View>
+            <Popup show={showAddressList} showTitle={false} onClose={() => setShowAddressList(false)}>
+                <View className={styles.order_address_list}>
+                    <View className={styles.order_address_title}>请选择收货地址</View>
+                    <AddressList onSelect={getAddress}/>
+                </View>
+            </Popup>
+        </View>
+    )
+}))

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;
+        }
+    }
+}

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 (
+            <>
+                <Text className={styles.price_text}>¥</Text>
+                <Text className={styles.price_text}>{Number(int_num).toLocaleString()}</Text>
+                <Text className={styles.price_text}>.{decimals_num}</Text>
+            </>
+        )
+    }, [number])
+    return (
+        <View className={classnames(styles.order_price_num, status==1&&styles.emphasis_num, status==2&&styles.emphasis_num_big)} >
+            {priceDom()}
+        </View>
+    )
+})

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 {
+
+    }
+}

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 (
+        <>
+            <View className={styles.content_box}>
+                <View className={styles.content_box_title}>{title}</View>
+                <View className={styles.content_box_con}>
+                    {children}
+                </View>
+            </View>
+        </>
+    )
+})

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;
+            }
+        }
+    }
+    
+}

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 (
+        <>  
+            <View className={styles.order_price}>
+                <View className={classnames(styles.order_price_text, titleStatus&&styles.emphasis)}>
+                    <Text>{title}</Text>
+                    <View className={styles.iconfont_msg}>
+                        <Text className={classnames(styles.miconfont, 'iconfont icon-zhushi')}></Text>
+                        {/* <View className={classnames(styles.message)}>123123123121212312312312312</View> */}
+                    </View>
+                </View>
+                <AmountShow status={numberStatus} number={number}/>
+            </View>
+        </>
+    )
+})

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;
+        }
+    }
+}

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 <EstimatedAmount  number={formatPriceDiv(order.estimate_amount)} title="预估金额" />
+        } 
+        //订单为取消订单状态
+        if(order?.status == SaleOrderStatusCancel.value) {
+            return (
+                <>
+                    {
+                        priceList.map(item => {
+                          return <>{showPrice(item, order?.the_previous_status)&&<EstimatedAmount key={item.id} number={formatPriceDiv(order[item.field])} title={item.label} />}</>
+                        })
+                    }
+                </>
+            )
+        } else {
+            return (
+                <>
+                    {
+                        priceList.map(item => {
+                          return <>{showPrice(item, order?.status)&&<EstimatedAmount key={item.id} number={formatPriceDiv(order[item.field])} title={item.label} />}</>
+                        })
+                    }
+                </>
+            )
+        }   
+    }, [order])
+    
+    return (
+        <>
+            <View className={styles.orders_list_title}>{numText}</View>
+            <View className={styles.orders_list_con}>
+                {
+                    order?.list?.map(item => {
+                        return <View key={item.product_code} className={styles.order_list}>
+                            <View className={styles.order_list_title}>
+                                <View className={styles.tag}>{order.sale_mode_name}</View>
+                                <View className={styles.title}>{formatHashTag(item.code, item.name)}</View>
+                                <View className={styles.num}>共{item?.product_colors.length}种</View>
+                            </View>
+                            <View className={styles.order_list_scroll}>
+                                {item?.product_colors?.map(colorItem => {
+                                    return <View key={colorItem.id} className={styles.order_list_item}>
+                                        <View className={styles.order_list_item_img}></View>
+                                        <View className={styles.order_list_item_con}>
+                                            <View className={styles.order_list_item_des}>
+                                                <View className={styles.order_list_item_title}>{colorItem.code + ' ' + colorItem.name}</View>
+                                                <View className={styles.order_list_item_price}>¥{standardPrice(colorItem.sale_price)}</View>
+                                            </View>
+                                            <View className={styles.order_list_item_count}>
+                                                <View className={styles.count_num}>×{formatCount(colorItem)}<text>{order.unit}</text></View>
+                                                <View className={styles.count_price}><text>¥</text>{formatPriceDiv(colorItem.estimate_amount).toLocaleString()}</View>
+                                            </View>
+                                        </View>
+                                    </View>
+                                })}
+                            </View>
+                        </View>
+                    })
+                }
+                <View className={styles.order_estimated_amount}>
+                    {priceConDom}     
+                </View>
+            </View>
+        </>
+    )
+})

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;
+    }
+}

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 (
+        <View className={styles.offlinePay_main}>
+            <Popup show={show} showTitle={false} onClose={onClose} >
+                <View className={styles.offlinePay_con}>
+                    <View className={classnames('iconfont icon-a-moreback', styles.miconfont_title)} onClick={onClose}></View>
+                    <View className={styles.title}>线下汇款</View>
+                    <View className={styles.offlinePay_list}>
+                        <SearchInput showBorder={false} title='开户名称' titleStyle={{fontSize:'23rpx'}}>
+                            <Text className={styles.offlinePay_con_text}>佛山市浩川盛世科技有限公司</Text>
+                        </SearchInput>
+                        <SearchInput showBorder={false} title='开户银行' titleStyle={{fontSize:'23rpx'}}>
+                            <Text className={styles.offlinePay_con_text}>招商银行汾江支行</Text>
+                        </SearchInput>
+                        <SearchInput showBorder={false} title='转账汇款账号' titleStyle={{fontSize:'23rpx'}}>
+                            <Text className={styles.offlinePay_con_text}>62062342120001221231212</Text>
+                        </SearchInput>
+                    </View>
+                    <View className={styles.btns} onClick={clipboardData}>复制信息</View>
+                </View>
+            </Popup>
+        </View>
+        
+    )
+})

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;
+    }
+}

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 (
+        <View className={styles.order_flow_state}>
+            <View className={styles.order_flow_state_text}>{state}</View>
+            <View className={styles.order_flow_state_desc}>{desc}</View>
+        </View>
+    )
+}

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;
+    }
+}

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)&&<View className={styles.order_flow_state}>
+                <View className={classnames(styles.order_status_list, showMore&&styles.order_status_list_show)}>
+                    {dataList.map((item, index) => <View className={styles.order_status_item}>
+                        {(dataList.length > 1)&&<View className={classnames(styles.order_status_tail, (index == 0)&&styles.order_status_tail_end)}></View>}
+                        {(dataList.length != (index + 1))&&<View className={styles.order_status_line}></View>}
+                        <View className={styles.order_status_content}>
+                            <View className={classnames(styles.order_status_title, (index == 0)&&styles.order_status_select)}>{item.status}</View>
+                            <View className={classnames(styles.order_status_time, (index == 0)&&styles.order_status_select)}>{formatDateTime(item.time)}</View>
+                            {/* <View className={classnames(styles.order_status_tag, (index == 0)&&styles.order_status_tag_select)}>{item.tag}</View> */}
+                        </View>
+                        <Text className={classnames(styles.order_status_des, (index == 0)&&styles.order_status_des_select)}>{item.desc}</Text>
+                    </View>)}
+                </View>
+                {(dataList.length > 2) && <View className={styles.more} onClick={() => changeMore()}>
+                    <Text>{showMore&&'收起详情'||'点击查看详情'}</Text>
+                    <Text className={classnames('iconfont icon-a-moreback', styles.miconfonts, showMore&&styles.open_miconfonts)}></Text>
+                </View>}
+                <View className={styles.image_tag}>
+                    {(payment_method == PaymentMethodAccountPeriod.value)&&<Image mode="aspectFit" src={formatImgUrl('/mall/order_pay_status.png')} className={styles.image}/>}
+                    {(payment_method == PaymentMethodCashOnDelivery.value)&&<Image mode="aspectFit" src={formatImgUrl('/mall/order_pay_status_7day.png')} className={styles.image}/>}
+                </View>
+            </View>}
+        </>
+    )
+})

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;
+    }
+}

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<any>()
+    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 (
+            <View className={styles.payment_list_item_left_price}>{(payInfo?.advance_deposit_balance < price)&&'余额不足，' }剩余 ¥{formatPriceDiv(payInfo?.advance_deposit_balance)}</View>
+        )
+    }, [payInfo])
+
+    //账期
+    const account_peyment = useMemo(() => {
+        const price = payInfo?.should_collect_money - payInfo?.amount_paid
+        return (
+            <View className={styles.payment_list_item_left_price}>{(payInfo?.account_period < price)&&'额度不足, '}剩余 ¥{formatPriceDiv(payInfo?.account_period_credit_available_line)}</View>
+        )
+    }, [payInfo])
+
+    //支付方式枚举
+    const {PaymentMethodPreDeposit, PaymentMethodAccountPeriod} = PAYMENT_METHOD
+
+    return (
+        <View className={styles.payment_main}>
+            <Popup show={show} showTitle={false} onClose={onClose} >
+                <View className={styles.payment_con}>
+                    <View className={classnames('iconfont icon-a-moreback', styles.miconfont_title)} onClick={onClose}></View>
+                    <View className={styles.title}>订单支付</View>
+                    <View className={styles.amount}>
+                        <AmountShow status={2} number={formatPriceDiv(payInfo?.should_collect_money - payInfo?.amount_paid)}/>
+                    </View>
+                    <View className={styles.payment_list}>
+                        <View className={styles.payment_list_top_border}></View>
+                        <View className={styles.payment_list_title}>
+                            {/* <Text>向商家发起支付</Text> */}
+                            <View className={styles.payment_list_title_price}>
+                                <View className={styles.payment_list_title_price_item}>
+                                    <Text>订单金额</Text>
+                                    <Text>¥{formatPriceDiv(payInfo?.should_collect_money)}</Text>
+                                </View>
+                                <View className={styles.payment_list_title_price_item}>
+                                    <Text>已付金额</Text>
+                                    <Text>¥{formatPriceDiv(payInfo?.amount_paid)}</Text>
+                                </View>
+                            </View>
+                        </View>
+                        <View className={styles.payment_list_con}>
+                            <View className={styles.payment_list_item}>
+                                <View className={styles.payment_list_item_left}>
+                                    <View className={styles.payment_list_item_left_name}>
+                                        <View className={classnames('iconfont icon-a-tuikuanshouhou', styles.miconfont)}></View>
+                                        <View className={styles.payment_list_item_left_text}>预存款</View>
+                                    </View>
+                                    {advance_payment}
+                                </View>
+                                <MCheckbox status={submitData.payment_method == PaymentMethodPreDeposit.value} onSelect={() => advanceSelectData(PaymentMethodPreDeposit.value)} onClose={() => advanceSelectData(null)}/>
+                            </View>
+                            {(orderInfo?.payment_method != PaymentMethodAccountPeriod.value)&&<View className={styles.payment_list_item}>
+                                <View className={styles.payment_list_item_left}>
+                                    <View className={styles.payment_list_item_left_name}>
+                                        <View className={classnames('iconfont icon-a-tuikuanshouhou', styles.miconfont)}></View>
+                                        <View className={styles.payment_list_item_left_text}>{payInfo?.account_period}天账期</View>
+                                    </View>
+                                    {/* <View className={styles.payment_list_item_left_price}>可用额度 ¥{formatPriceDiv(payInfo?.account_period_credit_available_line)}</View> */}
+                                    {account_peyment}
+                                </View>
+                                <MCheckbox  status={submitData.payment_method == PaymentMethodAccountPeriod.value} onSelect={() => periodSelectData(PaymentMethodAccountPeriod.value)} onClose={() => periodSelectData(null)}/>
+                            </View>}
+                            <View className={styles.payment_list_item} onClick={onShowOfflinePay}>
+                                <View className={styles.payment_list_item_left}>
+                                    <View className={styles.payment_list_item_left_name}>
+                                        <View className={classnames('iconfont icon-a-tuikuanshouhou', styles.miconfont)}></View>
+                                        <View className={styles.payment_list_item_left_text}>线下汇款</View>
+                                    </View>
+                                </View>
+                                <View className={classnames('iconfont icon-a-moreback', styles.miconfont_more)}></View>
+                            </View>
+                            <View className={styles.payment_list_item} onClick={onShowScanPay}>
+                                <View className={styles.payment_list_item_left}>
+                                    <View className={styles.payment_list_item_left_name}>
+                                        <View className={classnames('iconfont icon-a-tuikuanshouhou', styles.miconfont)}></View>
+                                        <View className={styles.payment_list_item_left_text}>扫码支付</View>
+                                    </View>
+                                </View>
+                                <View className={classnames('iconfont icon-a-moreback', styles.miconfont_more)}></View>
+                            </View>
+                        </View>
+                    </View>
+                    <View className={styles.btns} onClick={submitPay}>确认交易</View>
+                </View>
+            </Popup>
+            <OfflinePay show={offlinePayShow} onClose={() => setofflinePayShow(false)}/>
+            <ScanPay show={scanPayShow} onClose={() => setScanPayShow(false)}/>
+        </View>
+        
+    )
+})

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;
+    }       
+}

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 (
+        <View className={styles.order_popup}>
+            <View className={styles.order_popup_title}>编辑备注</View>
+            <View className={styles.order_popup_input}>
+                <Textarea placeholder="请添加备注" maxlength={descData.count} cursorSpacing={100} onInput={(e) => getDesc(e)} onBlur={(e) => onBlur?.(e)}></Textarea>
+                <View className={styles.descDataNum}>{descData.number}/{descData.count}</View>
+            </View>
+            <View className={styles.order_save_address} onClick={() => setSave()}>保存</View>
+        </View>
+    )
+}

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;
+    }
+}

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<string>('')
+    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 (
+        <View className={styles.scanPay_main}>
+            <Popup show={show} showTitle={false} onClose={onClose}>
+                <View className={styles.scanPay_con}>
+                    <View className={classnames('iconfont icon-a-moreback', styles.miconfont_title)} onClick={onClose}></View>
+                    <View className={styles.title}>扫码支付</View>
+                    <View className={styles.desc}>
+                        <Text className={classnames(styles.miconfont, 'iconfont, icon-zhuyi')}></Text>
+                        扫码支付成功后，自动更新状态
+                    </View>
+                    <View className={styles.scanPay_list}>
+                        {(state.loading)&&<LoadingCard/>||
+                        <ScrollView scrollY className={styles.scanPay_list}>
+                            <Image mode="widthFix" src={payCodeImage} onClick={showImage}></Image>
+                        </ScrollView>}
+                    </View>
+                    <View className={styles.btns} onClick={saveImageCheck}>保存电子确认单</View>
+                </View>
+            </Popup>
+        </View>
+        
+    )
+})

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;
+        }
+    }

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 (
+        <View className={styles.order_title}>
+          <Text>收货方式</Text>
+          {shipmentMode.current.map(item => {
+              return <View className={classnames(styles.order_status, (selectValue == item.value)&&styles.order_status_selected)} onClick={() => selectShipmentMode(item.value)}>{item.label}</View>
+          })}              
+      </View>
+    )
+})

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;
+            }
+        }
+    }
+    
+}

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 (
+            <>
+                <Text>¥</Text>
+                <Text>{Number(int_num).toLocaleString()}</Text>
+                <Text>.{decimals_num}</Text>
+            </>
+        )
+    }, [number])
+    return (
+        <>
+            <View className={styles.order_price}>
+                <View className={classnames(styles.order_price_text, styles.emphasis)}>
+                    <Text>应付金额</Text>
+                    <View className={styles.iconfont_msg}>
+                        <Text className={classnames(styles.miconfont, 'iconfont icon-a-tuikuanshouhou')}></Text>
+                        {/* <View className={classnames(styles.message)}>123123123121212312312312312</View> */}
+                    </View>
+                </View>
+                <View className={classnames(styles.order_price_num, styles.emphasis_num)} style={style}>
+                    {priceDom()}
+                </View>
+                
+            </View>
+        </>
+    )
+})

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;
+        }
+    }
+}

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 (
+        <View className={styles.weight_memo}>
+            <View className={styles.weight_memo_item} onClick={() => onCheck?.()}>
+                <View className={styles.title}>
+                    <Text className={classnames("iconfont icon-a-yuanmadanmadanguanli", styles.miconfont_check)}></Text>
+                    <Text>陆盈纺织</Text>
+                </View>
+                <View className={styles.desc}>
+                    <Text>查看原码单</Text>
+                    <Text className={classnames("iconfont icon-a-moreback", styles.miconfont_more)}></Text>
+                </View>
+            </View>
+            <View className={styles.weight_memo_item} onClick={() => onCustom?.()}>
+                <View className={styles.title}>
+                    <Text className={classnames("iconfont icon-a-yuanmadanmadanguanli", styles.miconfont_custom)}></Text>
+                    <Text>我的码单</Text>
+                </View>
+                <View className={styles.desc}>
+                    <Text>自定义</Text>
+                    <Text className={classnames("iconfont icon-a-moreback", styles.miconfont_more)}></Text>
+                </View>
+            </View>
+        </View>
+    )
+})

src/pages/salesAfter/index.config.ts

@@ -0,0 +1,6 @@
+export default {
+  navigationBarTitleText: '售后详情',
+  enablePullDownRefresh: true,
+  backgroundTextStyle: 'dark',
+  enableShareAppMessage: true,
+}

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;
+    }
+
+}

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>(Number(router.params.id))
+    useDidShow(() => {
+        getSaleOrderPreView()
+    })
+
+    //获取订单详情
+    const [orderDetail, setOrderDetail] = useState<any>() //获取到的原始数据
+    const {fetchData: getOrderFetchData} = GetSaleOrderDetailApi()
+    const getSaleOrderPreView = async () => {
+        if(orderId.current) {
+            let res = await getOrderFetchData({id: orderId.current})
+            setOrderDetail(res.data)
+        }
+        Taro.stopPullDownRefresh()       
+    }
+
+    //监听获取到的数据
+    useEffect(() => {
+        if(orderDetail)
+            formatData()
+    }, [orderDetail])
+
+    //格式化数据格式
+    const [formatDetailOrder, setFormatDetailOrder] = useState<any>() //格式化后的数据
+    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 (
+        <View className={styles.order_main}>
+            <OrderState list={orderDetail?.logistics_details} payment_method={orderDetail?.payment_method}/>
+            <KindList order={formatPreViewOrderMemo}/>
+            <OrderDes/>
+            {(orderDetail?.status != SaleOrderStatusCancel.value)&&<View className={styles.submit_order}>
+                <OrderBtns orderInfo={orderInfo} onClick={orderStateClick}/>
+            </View>}       
+            <AfterSalePricture/>
+            <View className="common_safe_area_y"></View>
+        </View>
+    )
+ }
+
+ const OrderDes = memo(({val = ''}:{val?:string}) => {
+    //复制功能
+    const clipboardData = () => {
+        Taro.setClipboardData({
+            data: val,
+            success: function (res) {
+                Taro.showToast({
+                    icon: 'none',
+                    title: '复制成功'
+                })
+            }
+        })
+    }
+    return (
+        <View className={styles.order_info} >
+            <View className={styles.order_info_title}>订单信息</View>
+            <SearchInput showBorder={false} title='售后单号' height={50}>
+                <View className={styles.order_num}>
+                    <Text>RA-LY-2204240002</Text>
+                    <View className={styles.order_num_btn} onClick={() => clipboardData()}>复制</View>
+                </View>
+            </SearchInput>
+            <SearchInput showBorder={false} title='订单号' height={50}>
+                <View className={styles.order_num}>
+                    <Text>XS-LY-2204210002</Text>
+                    <View className={styles.order_num_btn} onClick={() => clipboardData()}>复制</View>
+                </View>
+            </SearchInput>
+            <SearchInput showBorder={false} title='退款说明' height={50}>
+                <Text>其他问题</Text>
+            </SearchInput>
+            <SearchInput showBorder={false} title='其它说明' height={50}>
+                <Text>板布疵点太多</Text>
+            </SearchInput>
+            <SearchInput showBorder={false} title='申请时间' height={50}>
+                <Text>2022-04-24 08:32:39</Text>
+            </SearchInput>
+        </View>
+    )
+ })
+
+ const AfterSalePricture = memo(() => {
+     //预览图片
+    const showImage = () => {
+        Taro.previewImage({
+            current: formatImgUrl(''), // 当前显示
+            urls: [formatImgUrl('')] // 需要预览的图片http链接列表
+        })
+    }
+    return (
+        <ContentBox title="售后图片">
+            <View className={styles.after_sale_picture_list}>
+                <View className={styles.after_sale_picture_item} onClick={showImage}>
+                    <Image src={formatImgUrl('')} />
+                </View>
+                <View className={styles.after_sale_picture_item} onClick={showImage}>
+                    <Image src={formatImgUrl('')}/>
+                </View>
+                <View className={styles.after_sale_picture_item}>
+                    <Image src={formatImgUrl('')}/>
+                </View>
+                <View className={styles.after_sale_picture_item}>
+                    <Image src={formatImgUrl('')}/>
+                </View>
+                <View className={styles.after_sale_picture_item}>
+                    <Image src={formatImgUrl('')}/>
+                </View>
+                <View className={styles.after_sale_picture_item}>
+                    <Image src={formatImgUrl('')}/>
+                </View>
+            </View>
+        </ContentBox>
+    )
+ })

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;
+            }
+        }
+    }
+}

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 (
+        <View className={styles.order_item}>
+            <View className={styles.header} onClick={() => goLink('/pages/salesAfter/index', {id: value?.id})}>
+                <View className={styles.user}>
+                <Image src={`${userInfo?.adminUserInfo?.avatar_url}`}/>
+                <Text className={styles.name}>{userInfo?.adminUserInfo?.user_name}</Text>
+                </View>
+                <View className={styles.order_num}>
+                <Text>订单号：{value?.order_no}</Text>
+                <Text className={classnames(styles.miconfont, 'iconfont, icon-a-moreback')}></Text>
+                </View>
+                <OrderStatusTag status={1}/>
+            </View>
+            <View className={styles.product_con} onClick={() => goLink('/pages/salesAfter/index', {id: value?.id})}>
+                <View className={styles.product_title}>
+                    <View className={styles.product_tag}>{value?.sale_mode_name}</View>
+                    <View className={styles.product_name}>{formatHashTag(value?.product_list[0].code, value?.product_list[0].name)}</View>
+                    <View className={styles.product_status}>{value?.status_name}</View>
+                </View>
+                <View className={styles.product_list}>
+                    <View className={styles.image}>
+                    <Image src={formatImgUrl(value?.product_list[0].product_colors[0].texture_url)}/>
+                    <View className={styles.color_num}>{value?.product_list[0].product_colors[0].code}</View>
+                    </View>
+                    <View className={styles.color_list}>
+                        {value?.product_list[0].product_colors.map((itemColor, index) => {
+                                return (
+                                    (index <= 1)&&<View className={styles.color_item}>
+                                        <View className={styles.color_title}>{formatHashTag(itemColor.code, itemColor.name)}</View>
+                                        <View className={styles.color_price}>{standardPrice(itemColor.sale_price, value.sale_mode)}</View>
+                                        <View className={styles.color_num}>×{formatCount(itemColor, value.sale_mode)}条</View>
+                                    </View>
+                                )
+                            })
+                        }
+                        <View className={styles.color_item}>
+                            <View className={styles.color_more}>……</View>
+                            <View className={styles.color_more}>……</View>
+                            <View className={styles.color_more}>……</View>
+                        </View>
+                    </View>
+                </View>
+                <View className={styles.color_count_num}>{`${value?.total_fabrics}种面料，${value?.total_colors}种颜色，共${value?.total_number}条`}</View>
+                <View className={styles.order_number}>
+                    <Text>已申请退款</Text>
+                    <Text>订单号：LY2278204399678</Text>
+                </View>
+            </View>
+            <OrderBtns orderInfo={orderInfo} onClick={orderBtnsClick}/>
+        </View>
+    )
+})
+

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;
+    }
+}

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 (
+        <View className={styles.order_status_list}>
+          <ScrollView scrollX  scrollIntoView={`tabs_${selectInfo.tabId}`} scrollWithAnimation={true}>
+            <View className={styles.order_list_scroll}> 
+              {list.map((item, index) => {
+                return <View key={item.id} id={`tabs_${item.id}`} onClick={() => clickEvent({item, index})}  className={classnames(styles.order_status_item, (selectInfo.selected==item.id)&&styles.selected)}>{item.name}</View>
+              })}
+            </View>
+          </ScrollView>
+        </View>
+    )
+})
+

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;
+}

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)&&<View className={classnames(styles.tag, status == 1?styles.refund_tag :styles.saleReturn_tag)}>
+                <View className={classnames(styles.miconfont,  'iconfont icon-yucunkuan')}></View>
+                <Text>{ status == 1?'退款':'退货'}</Text>
+            </View>}
+        </>
+    )
+})

src/pages/salesAfterList/index.config.ts

@@ -0,0 +1,4 @@
+export default {
+  navigationBarTitleText: '退货/售后',
+  enableShareAppMessage: true,
+}

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;
+        }
+    }
+}

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<any[]>([{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<any>()
+  const [payMentShow, setPayMentShow] = useState(false)
+  const toPay = () => {
+      setPayMentShow(true)
+  }
+  //关闭支付弹窗
+  const closePayShow = useCallback(() => {
+      setPayMentShow(() => false)
+  }, [])
+  //支付成功
+  const onPaySuccess = useCallback(() => {
+      getOrderList()
+      closePayShow()
+  }, [])
+
+  
+  return (
+    <View className={styles.order_list_main}>
+      <View className={styles.title}>
+        <Search placeIcon="out" placeholder="搜索商品/名称/颜色/订单号" showBtn={true}  changeOnSearch={getSearchData} debounceTime={300}/>
+        <OrderStatusList list={statusList} onSelect={changeStatus} defaultId={1}/>
+      </View> 
+      <View className={styles.order_list}>
+          <InfiniteScroll statusMore={statusMore} selfonScrollToLower={getScrolltolower} refresherEnabled={true} refresherTriggered={refresherTriggeredStatus} selfOnRefresherRefresh={getRefresherRefresh}>
+            {orderData?.list.map(item => {
+              return <View key={item.id} className={styles.order_item_con}> <Order value={item} onClickBtn={clickOrderBtn}/></View>
+            })}
+          </InfiniteScroll>
+      </View>
+      <Payment onSubmitSuccess={onPaySuccess} show={payMentShow} onClose={closePayShow} orderInfo={payOrderInfo}/>
+    </View>
+  )
+}

src/pages/search/index.config.ts

@@ -1,3 +1,4 @@
 export default {
-  navigationBarTitleText: '搜索'
+  navigationBarTitleText: '搜索',
+  enableShareAppMessage: true,
 }

src/pages/searchList/search.config.ts

@@ -1,3 +1,4 @@
 export default {
   navigationBarTitleText: '搜索',
+  enableShareAppMessage: true,
 }

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 () => {

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) => {

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 () => {
 		</View>
 	)
 }
-
 // 头部 | 订单
 const Header = memo(() => {
 	let menu = [{ text: "待配布", icon: "icon-daipeibu" }, { text: "待付款", icon: "icon-daifukuan" },
@@ -71,7 +72,7 @@ const Header = memo(() => {
 				<View className={styles['card-main']}>
 					<View className={styles['card-main-title']}>
 						<View>订单</View>
-						<Text>全部</Text>
+						<Text onClick={() => goLink('/pages/orderList/index')}>全部</Text>
 					</View>
 					<View className={styles['card-main-title-content']}>
 						{

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
     }

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

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()
+    const {setUserInfo, setAdminUserInfo, setSortCode, userInfo} = useUserInfo()
-    
+
-    useEffect(() => {
+    console.log('userInfo:::', userInfo)
-        console.log('userInfo::',userInfo.token)
-    }, [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,

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 { CLEAR_SESSIONKEY, SET_USERINFO,  SET_TOKEN, SET_SESSIONKEY, CLEAR_USERINFO, CLEAR_TOKEN, SET_ADMINUSERINFO, SET_SORTCODE} from '@/constants/userInfo'
-import {DataParam, UserParam, UserAdminParam} from '@/reducers/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, //响应式数据返回
     }
 }