🦄 refactor:订单列表对接100%

src/api/order.ts

@@ -1,4 +1,6 @@
 import { useRequest } from "@/use/useHttp"
+import { CAP_HTML_TO_IMAGE_BASE_URL } from '@/common/constant'
+
 export const mpenumsaleorderstatus = () => {
     return useRequest({
         url: `/v1/mp/enum/sale/order/status`,
@@ -12,7 +14,7 @@ export const mpenumsaleorderstatus = () => {
  */
 export const OrderListApi = () => {
     return useRequest({
-        url: `/v1/mp/saleOrder/list`,
+        url: `/v2/mp/saleOrder/list`,
         method: "get",
     })
 }
@@ -48,3 +50,62 @@ export const mpenumsaleUserlist = () => {
         method: "get"
     })
 }
+//订单详情
+export const mpsaleOrder = () => {
+    return useRequest({
+        url: `/v2/mp/saleOrder`,
+        method: "get"
+    })
+}
+//取消订单
+export const mpsaleOrdercancel = () => {
+    return useRequest({
+        url: `/v1/mp/saleOrder/cancel`,
+        method: "put",
+    })
+}
+//再次购买
+export const mpshoppingCartproductColorlist = () => {
+    return useRequest({
+        url: `/v1/mp/shoppingCart/productColor/list`,
+        method: "post",
+    })
+}
+//获取账期付款
+export const orderPaymentorderPaymentMethodInfo = () => {
+    return useRequest({
+        url: `/v1/mp/orderPayment/orderPaymentMethodInfo`,
+        method: "get",
+    })
+}
+//预收单获取接口信息
+export const orderPaymentpreCollectOrderorderPaymentMethodInfo = () => {
+    return useRequest({
+        url: `/v1/mp/orderPayment/preCollectOrder/orderPaymentMethodInfo`,
+        method: "get",
+    })
+}
+//确认交易
+export const orderPaymentorderPaymentSubmission = () => {
+    return useRequest({
+        url: `/v1/mp/orderPayment/orderPaymentSubmission`,
+        method: "put",
+    })
+}
+//订单预支付提交
+export const orderPaymentpreCollectOrderorderPaymentSubmission = () => {
+    return useRequest({
+        url: `/v1/mp/orderPayment/preCollectOrder/orderPaymentSubmission`,
+        method: "put",
+    })
+}
+/**
+ * 获取在线支付二维码
+ */
+ export const GetPayCode = () => {
+    return useRequest({
+      url: `/xima-caphtml/caphtml`,
+      base_url: CAP_HTML_TO_IMAGE_BASE_URL,
+      method: 'post',
+    })
+  }

src/components/BottomBtns/index.module.scss

@@ -44,5 +44,7 @@
         font-family: PingFangSC-Regular, PingFang SC;
         font-weight: 400;
         color: #4581FF;
+        text-align: center;
+        line-height: 72px;
     }
 }

src/components/BottomBtns/index.tsx

@@ -8,9 +8,9 @@ interface prosObj {
         status?: Number,
         payment_method?: Number
     }
-    cancle?: () => void,
+    cancle?: (any) => void,
-    nextBuy?: () => void,
+    nextBuy?: (any) => void,
-    toPay?: () => void,
+    toPay?: (any) => void,
 }
 
 export default memo((props: prosObj) => {
@@ -67,13 +67,13 @@ export default memo((props: prosObj) => {
     return (
         <View className={style.flexBox}>
             {
-                showCancel && <View className={style.cancle} onClick={() => cancle?.()}>取消订单</View>
+                showCancel && <View className={style.cancle} onClick={(e) => cancle?.(e)}>取消订单</View>
             }
             {
-                showBuy && <View className={style.nextBuy} onClick={() => nextBuy?.()}>再次购买</View>
+                showBuy && <View className={style.nextBuy} onClick={(e) => nextBuy?.(e)}>再次购买</View>
             }
             {
-                canBuy && <View className={style.toBuy} onClick={() => toPay?.()}>去付款</View>
+                canBuy && <View className={style.toBuy} onClick={(e) => toPay?.(e)}>去付款</View>
             }
 
         </View>

src/components/shoppingCart/index.module.scss

@@ -116,11 +116,21 @@
             }
         }
 
-        .kongOne {
+
-            height: 100px;
-        }
     }
 
+    .kongOne {
+        height: 200px;
+    }
+
+    .loading_more {
+        height: 300px;
+        padding-bottom: 200px;
+        display: flex;
+        align-items: center;
+        width: 100%;
+        justify-content: center;
+    }
 
     .posBox {
         width: 100%;

src/components/shoppingCart/index.tsx

@@ -7,6 +7,7 @@ import Popup from '@/components/popup'
 import Goods from "@/components/goodsItem"
 import BottomCustomer from "@/components/BottomCustomer"
 import VirtualList from '@tarojs/components/virtual-list'
+import DotLoading from "@/components/dotLoading"
 
 interface prosObj {
     showPopup?: false | true,
@@ -125,21 +126,30 @@ export default memo(forwardRef((props: prosObj, ref) => {
                 <View className={styles.searchBox}>
                     <Search placeholder='请输入搜索布料' showBtn={false} changeOnSearch={getSearchData} debounceTime={300} />
                 </View>
-                <View className={styles.scrollviewBig}>
+                {
-                    <VirtualList
+                    goodList.length > 0 && <>
-                        className={styles.scrollview}
+                        <View className={styles.scrollviewBig}>
-                        height={300} /* 列表的高度 */
+                            <VirtualList
-                        width='100%' /* 列表的宽度 */
+                                className={styles.scrollview}
-                        itemData={goodList} /* 渲染列表的数据 */
+                                height={300} /* 列表的高度 */
-                        itemCount={goodList.length + 0} /*  渲染列表的长度 */
+                                width='100%' /* 列表的宽度 */
-                        itemSize={100} /* 列表单项的高度  */
+                                itemData={goodList} /* 渲染列表的数据 */
-                        overscanCount={1}>
+                                itemCount={goodList.length + 0} /*  渲染列表的长度 */
-                        {rows}
+                                itemSize={100} /* 列表单项的高度  */
-                    </VirtualList>
+                                overscanCount={1}>
-                    <View className={styles.kongOne}></View>
+                                {rows}
-                </View>
+                            </VirtualList>
 
+                        </View>
 
+                        <View className={styles.kongOne}></View>
+                    </>
+                }
+                {
+                    goodList.length === 0 && <>
+                        <View className={styles.loading_more}>加载中<DotLoading /></View>
+                    </>
+                }
                 <View className={styles.posBox}>
                     <BottomCustomer clientName={clientName} clientId={clientId} isDisabled={selectTotal > 0 && clientName !== '' ? false : true} handSure={() => { handSure() }}></BottomCustomer>
                 </View>

src/custom-tab-bar/index.module.scss

@@ -8,7 +8,7 @@
   flex-flow: row nowrap;
   padding-bottom: env(safe-area-inset-bottom);
   background-color: #fff;
-  z-index: 9999;
+  z-index: 98;
   box-shadow: 0 11px 7px 8px #c2c2c2;
   &-line {
     position: absolute;

src/pages/index/index.tsx

@@ -98,7 +98,7 @@ export default () => {
             return it
         })
         setTypeList([...typeList])
-
+        setGoodlist([])
     }
     const [goodList, setGoodlist] = useState<any[]>([])
     const { fetchData: colorlistFetch } = mpproductcolorlist()

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

@@ -0,0 +1,172 @@
+.popupBox {
+    position: relative;
+    z-index: 99999;
+    background: #f7f7f7;
+    bottom: 0;
+
+    .contBox {
+        width: 670px;
+        padding-bottom: 30px;
+        // height: 739px;
+        background: #FFFFFF;
+        margin-top: 32px;
+        margin-left: 40px;
+        overflow: hidden;
+
+        .topMoney {
+            font-size: 48px;
+            font-family: PingFangSC-Medium, PingFang SC;
+            font-weight: 500;
+            color: #337FFF;
+            width: 100%;
+            text-align: center;
+            margin-bottom: 60px;
+        }
+
+        .itemMoney {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: 32px;
+
+            .leftFont {
+                font-size: 28px;
+                font-family: PingFangSC-Regular, PingFang SC;
+                font-weight: 400;
+                color: #000000;
+                margin-left: 40px;
+            }
+
+            .rightFont {
+                margin-right: 40px;
+                font-size: 28px;
+                font-family: PingFangSC-Regular, PingFang SC;
+                font-weight: 400;
+                color: #000000;
+            }
+        }
+
+        .line {
+            width: 590px;
+            height: 1px;
+            background: #000000;
+            opacity: 0.1;
+            margin-left: 40px;
+            margin-bottom: 32px;
+        }
+
+        .itemBox {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: 64px;
+
+            .leftItem {
+                margin-left: 40px;
+                display: flex;
+                align-items: center;
+
+                .leftCrile {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    width: 56px;
+                    height: 56px;
+                    border-radius: 50%;
+                    background: #4a7fff;
+
+                    .lujing {
+                        color: #FFFFFF;
+                        font-size: 35px;
+                    }
+                }
+
+                .rightLeft {
+                    margin-left: 30px;
+
+
+                    .title {
+                        font-size: 28px;
+                        font-family: PingFangSC-Regular, PingFang SC;
+                        font-weight: 400;
+                        color: #000000;
+                    }
+
+                    .nums {
+                        font-size: 22px;
+                        font-family: PingFangSC-Regular, PingFang SC;
+                        font-weight: 400;
+                        color: #000000;
+                    }
+                }
+            }
+
+            .checkYuan {
+                width: 40px;
+                height: 40px;
+                border: 2px solid #D5D5D5;
+                margin-right: 40px;
+                border-radius: 50%;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+
+                .gou {
+                    font-size: 20px;
+                    color: #FFFFFF;
+                }
+
+            }
+
+            .activeChecked {
+                background: #337fff;
+                width: 40px;
+                height: 40px;
+                border: 2px solid #337fff;
+                margin-right: 40px;
+                border-radius: 50%;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+
+                .gou {
+                    font-size: 20px;
+                    color: #FFFFFF;
+                }
+            }
+
+            .chakanquanbukehu {
+                margin-right: 40px;
+                color: #000000;
+                font-size: 50px;
+            }
+        }
+
+
+    }
+
+
+
+}
+
+.sure {
+    margin-top: 35px;
+    margin-left: 40px;
+    width: 670px;
+    height: 80px;
+    background: #337FFF;
+    border-radius: 44px;
+    font-size: 28px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #FFFFFF;
+    text-align: center;
+    line-height: 80px;
+}
+
+.pic {
+    width: 702px;
+    height: 1500px;
+    border-radius: 16px;
+    border: 1px solid #f7f7f7;
+}

src/pages/order/components/PayPopup/index.tsx

@@ -0,0 +1,174 @@
+
+import { ScrollView, View, Image } from '@tarojs/components'
+import { memo, useCallback, useEffect, useMemo, useState, useRef } from 'react'
+import styles from './index.module.scss'
+import classnames from 'classnames'
+import BottomBtns from '@/components/BottomBtns'
+import { formatPriceDiv, formatImgUrl } from '@/common/fotmat'
+import Taro from '@tarojs/taro'
+import Popup from '@/components/popup'
+import useCheckAuthorize from '@/use/useCheckAuthorize'
+import { alert } from '@/common/common'
+
+interface Props {
+    showPopup: true | false,
+    popupClose?: () => void,
+    obj: {
+        wait_pay_amount?: number | string,
+        actual_amount?: number | string,
+        total_sale_price?: number | string,
+        should_collect_order_id?: number | string,
+        pre_collect_order_id?: number | string,
+        status?: number | string,
+    },
+    showSide?: boolean,
+    list?: any[],
+    clickItem?: (any) => void,
+    handsurePay?: (any) => void,
+    title: string,
+    picUrl?: string
+}
+
+export default memo((props: Props) => {
+    const {
+        showSide = true,
+        showPopup = false,
+        popupClose,
+        obj = {
+            wait_pay_amount: '',
+            actual_amount: '',
+            total_sale_price: ''
+        },
+        clickItem,
+        handsurePay,
+        list = [],
+        title = '待支付款项',
+        picUrl = ''
+    } = props
+
+    const fileData = useRef({
+        filePath: '',
+        base64: '',
+    })
+
+    //预览图片
+    const showImage = () => {
+        const time = new Date().valueOf()
+        const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(picUrl) || []
+        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',
+        })
+        Taro.previewImage({
+            current: fileData.current.filePath, // 当前显示
+            urls: [fileData.current.filePath], // 需要预览的图片http链接列表
+        })
+    }
+
+
+    //检查是否开启保存图片权限
+    const { check } = useCheckAuthorize({ scope: 'scope.writePhotosAlbum', msg: '您没授权，无法保存图片' })
+    const saveImageCheck = async () => {
+        const res = await check()
+        res && saveImage()
+    }
+
+    //保存图片
+    const saveImage = () => {
+        alert.loading('正在保存图片')
+        Taro.saveImageToPhotosAlbum({
+            filePath: fileData.current.filePath,
+            success: function () {
+                alert.success('图片保存成功')
+            },
+            fail: function (err) {
+                console.log('err::', err)
+            },
+        })
+    }
+
+    return (
+        <View className={styles.popupBox}>
+            <Popup show={showPopup} title={title} onClose={() => popupClose?.()}>
+                {
+                    showSide &&
+                    <View className={styles.contBox}>
+                        <View className={styles.topMoney}>
+                            ￥{formatPriceDiv(obj.wait_pay_amount)}
+                        </View>
+                        <View className={styles.itemMoney}>
+                            <View className={styles.leftFont}>
+                                订单金额
+                            </View>
+                            <View className={styles.rightFont}>
+                                ￥{formatPriceDiv(obj.total_sale_price)}
+                            </View>
+                        </View>
+                        <View className={styles.itemMoney}>
+                            <View className={styles.leftFont}>
+                                已付金额
+                            </View>
+                            <View className={styles.rightFont}>
+                                ￥{formatPriceDiv(obj.actual_amount)}
+                            </View>
+                        </View>
+                        <View className={styles.line}></View>
+                        {
+                            list.map((item, index) => {
+                                return (
+                                    <View className={styles.itemBox} key={index} onClick={() => clickItem?.(item)}>
+                                        <View className={styles.leftItem}>
+                                            <View className={styles.leftCrile}>
+                                                <View className={classnames('iconfont', item.iconfont, styles.lujing)}></View>
+                                            </View>
+                                            <View className={styles.rightLeft}>
+                                                <View className={styles.title}>{item.name}</View>
+                                                {
+                                                    item.fonts && <View className={styles.nums}>{item.fonts}{
+                                                        item.money !== "" ? "￥" : ""
+                                                    }{item.money}</View>
+                                                }
+                                            </View>
+                                        </View>
+                                        {
+                                            item.name !== '扫码支付' &&
+                                            <View className={item.checked ? styles.activeChecked : styles.checkYuan}>
+                                                <View className={classnames('iconfont', 'icon-lujing', styles.gou)}></View>
+                                            </View>
+                                        }
+                                        {
+                                            item.name === '扫码支付' &&
+                                            <View className={classnames('iconfont', 'icon-chakanquanbukehu', styles.chakanquanbukehu)}></View>
+                                        }
+                                    </View>
+                                )
+                            })
+                        }
+
+                    </View>
+
+                }
+                {
+                    showSide && <View className={styles.sure} onClick={() => handsurePay?.(props?.obj)}>确认交易</View>
+                }
+                {
+                    !showSide &&
+                    <ScrollView enhanced scrollY style={{ height: '700rpx', marginLeft: '24rpx' }}>
+                        <View className={styles.pic}>
+                            <Image lazyLoad mode='widthFix' style={{ width: '100%', height: '100%' }} src={picUrl} onClick={() => showImage()}></Image>
+                        </View>
+                    </ScrollView>
+
+                }
+                {
+                    !showSide && <View className={styles.sure} onClick={() => saveImageCheck()}>保存图片</View>
+                }
+            </Popup >
+        </View >
+    )
+})

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

@@ -2,7 +2,7 @@
     margin-top: 38px;
     overflow: hidden;
     width: 702px;
-    height: 536px;
+    height: 560px;
     background: #FFFFFF;
     border-radius: 16px;
     margin-left: 24px;
@@ -14,11 +14,13 @@
         margin-top: 24px;
 
         .orderNo {
+
             font-size: 28px;
             font-family: PingFangSC-Medium, PingFang SC;
             font-weight: 500;
             color: #000000;
             margin-left: 32px;
+
         }
 
         .status {
@@ -93,6 +95,11 @@
                     align-items: center;
 
                     .productName {
+                        width: 285px;
+                        height: 34px;
+                        overflow: hidden;
+                        white-space: nowrap;
+                        text-overflow: ellipsis;
                         margin-right: 8px;
                         font-size: 28px;
                         font-family: PingFangSC-Regular, PingFang SC;

src/pages/order/components/itemList/index.tsx

@@ -3,73 +3,78 @@ import { memo, useCallback, useEffect, useMemo, useState } from 'react'
 import styles from './index.module.scss'
 import classnames from 'classnames'
 import BottomBtns from '@/components/BottomBtns'
+import { formatPriceDiv } from '@/common/fotmat'
+import Taro from '@tarojs/taro'
 
 interface propsObj {
-    obj: object
+    obj: any,
+    cancle?: (arg: any, obj: any) => void,
+    nextBuy?: (arg: any, obj: any) => void,
+    toPay?: (arg: any, obj: any) => void
 }
 
 
 export default memo((props: propsObj) => {
-
+    const navTo = (e) => {
-    const {
+        Taro.navigateTo({
-        obj = {}
+            url: '/pages/orderDetails/index?id=' + props?.obj?.id
-    } = props
+        })
-
-    const cancle = (item) => {
-
-    }
-    const nextBuy = (item) => {
-
     }
 
-    const toPay = (item) => {
-
-    }
 
     return (
-        <View className={styles.itemBox}>
+        <View className={styles.itemBox} onClick={(e) => navTo(e)}>
             <View className={styles.topItem}>
-                <View className={styles.orderNo}>单号：XS-LY-2208220092</View>
+                <View className={styles.orderNo}>单号：{props?.obj?.order_no}</View>
-                <View className={styles.status}>待接单</View>
+                <View className={styles.status}>{props?.obj?.status_name}</View>
             </View>
-            <View className={styles.pussName}>钟雨乔JENNIEEEEE</View>
+            <View className={styles.pussName}>{props?.obj?.purchaser_name}</View>
             <View className={styles.line}></View>
             <View className={styles.contBox}>
-                <View className={styles.leftCont}>
+                <View className={styles.leftCont} style={{ backgroundColor: `rgb(${props?.obj?.product_list[0]?.product_colors[0]?.rgb?.r} ${props?.obj?.product_list[0]?.product_colors[0]?.rgb?.g} ${props?.obj?.product_list[0]?.product_colors[0]?.rgb?.b})` }}>
-                    <View className={styles.leftContNums}>颜色 (1)</View>
+                    <View className={styles.leftContNums}>颜色 ({props?.obj?.total_colors})</View>
                 </View>
                 <View className={styles.rightCont}>
                     <View className={styles.rightTop}>
                         <View className={styles.productBox}>
-                            <View className={styles.productName}>9265# 26S全棉双卫衣</View>
+                            <View className={styles.productName}>{props?.obj?.product_list[0]?.code} {props?.obj?.product_list[0]?.name}</View>
-                            <View className={styles.productMode}>大货</View>
+                            <View className={styles.productMode}>{props?.obj?.sale_mode === 0 ? '大货' : props?.obj?.sale_mode === 1 ? '剪版' : '散剪'}</View>
                         </View>
-                        <View className={styles.shipMode}>物流</View>
+                        <View className={styles.shipMode}>{props?.obj?.shipment_mode_name}</View>
                     </View>
                     <View className={styles.colorsBox}>
-                        <View className={styles.colorNameOne}>051# 花灰白</View>
+                        <View className={styles.colorNameOne}>{props?.obj?.product_list[0]?.product_colors[0]?.code} {props?.obj?.product_list[0]?.product_colors[0]?.name}</View>
-                        <View className={styles.colorName}>x5m</View>
+                        <View className={styles.colorName}>x{props?.obj?.sale_mode === 0 ? props?.obj?.product_list[0]?.product_colors[0]?.roll : props?.obj?.product_list[0]?.product_colors[0]?.length / 100} {props?.obj?.sale_mode === 0 ? '条' : 'm'}</View>
-                        <View className={styles.colorNameTwo}>¥ 37.50/kg</View>
+                        <View className={styles.colorNameTwo}>¥ {props?.obj?.product_list[0]?.product_colors[0]?.sale_price / 100}/kg</View>
                     </View>
+                    {
+                        props?.obj?.product_list[0]?.product_colors?.length > 1 && <>
+                            <View className={styles.colorsBox}>
+                                <View className={styles.colorNameOne}>{props?.obj?.product_list[0]?.product_colors[1]?.code} {props?.obj?.product_list[0]?.product_colors[1]?.name}</View>
+                                <View className={styles.colorName}>x{props?.obj?.sale_mode === 0 ? props?.obj?.product_list[0]?.product_colors[1]?.roll : props?.obj?.product_list[0]?.product_colors[1]?.length / 100} {props?.obj?.sale_mode === 0 ? '条' : 'm'}</View>
+                                <View className={styles.colorNameTwo}>¥ {props?.obj?.product_list[0]?.product_colors[1]?.sale_price / 100}/kg</View>
+                            </View>
+                        </>
+                    }
                 </View>
             </View>
             <View className={styles.lineOne}></View>
             <View className={styles.bottomMsg}>
                 <View className={styles.msgLeft}>布料信息：</View>
-                <View className={styles.msgRight}>2 种面料，4 种颜色，共 5 米</View>
+                <View className={styles.msgRight}>{props?.obj?.total_fabrics} 种面料，{props?.obj?.total_colors} 种颜色，共 {props?.obj?.sale_mode === 0 ? props?.obj?.total_number : props?.obj?.total_number / 100} {props?.obj?.sale_mode === 0 ? '条' : 'm'}</View>
             </View>
             <View className={styles.bottomMsg}>
                 <View className={styles.msgLeft}>预估金额：</View>
-                <View className={styles.msgRightOne}>¥3564.00</View>
+                <View className={styles.msgRightOne}>¥{formatPriceDiv(props?.obj?.estimate_amount)}</View>
             </View>
             <View className={styles.bottomBox}>
                 <BottomBtns
-                    obj={obj}
+                    obj={props?.obj}
-                    cancle={() => cancle(obj)}
+                    cancle={(e) => props?.cancle?.(e, props?.obj)}
-                    nextBuy={() => nextBuy(obj)}
+                    nextBuy={(e) => props?.nextBuy?.(e, props?.obj)}
-                    toPay={() => toPay(obj)}
+                    toPay={(e) => props?.toPay?.(e, props?.obj)}
                 ></BottomBtns>
             </View>
-        </View >
+        </View>
     )
 })

src/pages/order/index.module.scss

@@ -34,6 +34,8 @@
 }
 
 .popupBox {
+    padding-bottom: calc($customTabBarHeight + env(safe-area-inset-bottom));
+
     .topBox {
         display: flex;
         padding-left: 48px;
@@ -193,7 +195,7 @@
         height: 160px;
         background: #FFFFFF;
         position: fixed;
-        bottom: 0;
+        bottom: calc($customTabBarHeight + env(safe-area-inset-bottom));
         z-index: 99;
         display: flex;
         padding-top: 16px;
@@ -241,6 +243,11 @@
             line-height: 80px;
         }
     }
+
+    // .areaBox {
+    //     height: calc($customTabBarHeight + env(safe-area-inset-bottom));
+    //     width: 100%;
+    // }
 }
 
 

src/pages/order/index.tsx

@@ -8,8 +8,19 @@ import styles from "./index.module.scss"
 import classnames from "classnames";
 import Popup from '@/components/popup'
 import InfiniteScroll from '@/components/infiniteScroll'
-import Taro, { useDidShow } from '@tarojs/taro'
+import Taro, { faceVerifyForPay, useDidShow } from '@tarojs/taro'
 import ItemList from './components/itemList'
+import {
+  mpsaleOrdercancel,
+  mpshoppingCartproductColorlist,
+  orderPaymentorderPaymentMethodInfo,
+  orderPaymentpreCollectOrderorderPaymentMethodInfo,
+  orderPaymentorderPaymentSubmission,
+  orderPaymentpreCollectOrderorderPaymentSubmission,
+  GetPayCode
+} from '@/api/order'
+import PayPopup from './components/PayPopup'
+import { formatDateTime, formatHashTag, formatImgUrl, formatPriceDiv, formatWeightDiv } from '@/common/fotmat'
 
 export default () => {
   //页码和页数
@@ -227,6 +238,331 @@ export default () => {
   useEffect(() => {
     getOrderStatusList()
   }, [])
+
+  const { fetchData: cancelFetch } = mpsaleOrdercancel()
+  //取消订单
+  const cancle = async (e, item) => {
+    e.stopPropagation();
+    Taro.showModal({
+      content: "确定要取消吗？",
+      confirmText: "确认",
+      cancelText: "取消",
+      success: async function (res) {
+        if (res.confirm) {
+          Taro.showLoading({
+            title: '请稍等...',
+            mask: true
+          })
+          const res = await cancelFetch({ id: item.id })
+          if (res.msg === 'success') {
+            Taro.showToast({
+              title: '取消成功'
+            })
+            Taro.hideLoading()
+            getOrderList()
+          } else {
+            Taro.showToast({
+              title: res.msg,
+              icon: 'error'
+            })
+          }
+        }
+      }
+    })
+  }
+  //再次购买
+  const { fetchData: buyFetch } = mpshoppingCartproductColorlist()
+  const nextBuy = async (e, item) => {
+    e.stopPropagation();
+    Taro.showLoading({
+      title: '请稍等...',
+      mask: true
+    })
+    let arr: any = []
+    item.product_list.forEach(item => {
+      item.product_colors.forEach(it => {
+        arr.push({
+          length: it.length,
+          roll: it.roll,
+          product_color_id: it.id
+        })
+      })
+    })
+    let query = {
+      purchaser_id: item.purchaser_id,
+      sale_mode: item.sale_mode,
+      color_list: arr
+    }
+    const res = await buyFetch(query)
+    if (res.msg === 'success') {
+      Taro.showToast({
+        title: '加入购物车成功!'
+      })
+      Taro.hideLoading()
+      getOrderList()
+    } else {
+      Taro.showToast({
+        title: res.msg,
+        icon: 'error'
+      })
+    }
+  }
+  //去支付逻辑
+  const { fetchData: infoOneFetch } = orderPaymentorderPaymentMethodInfo()
+  const { fetchData: infoTwoFetch } = orderPaymentpreCollectOrderorderPaymentMethodInfo()
+  const [itemObj, setItemObj] = useState<any>({})
+  const [payList, setPayList] = useState<any[]>([
+    {
+      id: 2,
+      iconfont: "icon-xianxiahuizong",
+      name: "预存款",
+      fonts: "可用额度 ",
+      money: "",
+      isCheck: false,
+    },
+    {
+      id: 5,
+      iconfont: "icon-xianxiahuizong",
+      name: "货到付款",
+      fonts: "发货后3天内付款",
+      isCheck: false,
+      money: "",
+    },
+    {
+      id: 3,
+      iconfont: "icon-xianxiahuizong",
+      name: "x天账期",
+      fonts: "可用额度 ",
+      money: "",
+      isCheck: false,
+    },
+    {
+      iconfont: "icon-saomiao",
+      name: "扫码支付",
+    },
+  ])
+  const toPay = async (e, item) => {
+    e.stopPropagation();
+
+    setItemObj(item)
+    if (item.status !== 10) {
+      let res = await infoOneFetch({ id: item.should_collect_order_id })
+      payList.map((item) => {
+        if (item.id === 3) {
+          item.name = `${res.data.account_period}天账期`;
+          item.fonts = `可用额度${formatPriceDiv(
+            res.data.account_period_credit_available_line
+          ).toLocaleString()}`;
+        }
+        if (item.id === 2) {
+          item.fonts = `可用额度${formatPriceDiv(
+            res.data.advance_deposit_balance
+          ).toLocaleString()}`;
+        }
+        return item;
+      });
+      setPayList([...payList])
+      if (item.is_shipper_picks_up) {
+        const obj = payList.filter((item) => {
+          return item.id === 6;
+        });
+        console.log(obj, "456456");
+        if (obj.length === 0) {
+          payList.unshift({
+            id: 6,
+            iconfont: "icon-xianxiahuizong",
+            name: "货主自提",
+            fonts: "",
+            money: "",
+            isCheck: false,
+          });
+          setPayList([...payList])
+        }
+      }
+    } else {
+      let res = await infoTwoFetch({ id: item.pre_collect_order_id })
+      const arr: any = [];
+      arr.push(
+        {
+          id: 2,
+          iconfont: "icon-xianxiahuizong",
+          name: "预存款",
+          fonts: `可用额度${formatPriceDiv(
+            res.data.advance_deposit_balance
+          ).toLocaleString()}`,
+          money: "",
+          isCheck: false,
+        },
+        {
+          iconfont: "icon-saomiao",
+          name: "扫码支付",
+        }
+      );
+      if (item.is_shipper_picks_up) {
+        const obj = arr.filter((item) => {
+          return item.id === 6;
+        });
+        if (obj.length === 0) {
+          arr.unshift({
+            id: 6,
+            iconfont: "icon-xianxiahuizong",
+            name: "货主自提",
+            fonts: "",
+            money: "",
+            isCheck: false,
+          });
+        }
+      }
+      setPayList([...arr])
+    }
+    setShowSide(true)
+    setShowPay(true)
+  }
+
+  //选择支付方式
+  const clickItem = (item) => {
+    if (item.name === '扫码支付') { handScanpay() }
+    payList.map(it => {
+      if (item.id === it.id) {
+        it.checked = true
+      } else {
+        it.checked = false
+      }
+      return it
+    })
+    setPayList([...payList])
+  }
+
+
+  //扫码支付
+  const [showSide, setShowSide] = useState(true)
+  const [title, setTitle] = useState('')
+  const [picUrl, setPicUrl] = useState('')
+  const { fetchData: payFetch } = GetPayCode()
+  const handScanpay = async () => {
+    const list: any = [];
+    itemObj.product_list.forEach((item) => {
+      item.product_colors.forEach((it) => {
+        list.push({
+          product_code: item.code,
+          product_name: item.name,
+          product_color_code: it.product_color_code,
+          product_color_name: it.product_color_name,
+          num: it.roll.toString(),
+          weight: formatWeightDiv(it.actual_weight).toString(),
+          sale_price: (it.sale_price / 100).toString(),
+          total_price:
+            it.actual_amount !== 0
+              ? (it.actual_amount / 100).toString()
+              : (it.estimate_amount / 100).toString(),
+          length: (it.length / 100).toString(),
+          weight_error: formatWeightDiv(it.weight_error).toString(),
+        });
+      });
+    });
+    const query = {
+      list: list,
+      title: "面料销售电子确认单",
+      show_qrcode: true,
+      show_barcode: true,
+      show_wait_pay_amount: true,
+      order_type: itemObj.sale_mode_name,
+      shipment_mode: itemObj.shipment_mode_name,
+      company: itemObj.title_purchaser_name,
+      sale_user: itemObj.sale_user_name,
+      order_created_time: formatDateTime(itemObj.create_time),
+      order_no: itemObj.order_no,
+      target_user_name: itemObj.target_user_name,
+      target_address: itemObj.address_detail,
+      target_description: itemObj.remark,
+      pay_account: itemObj.transfer_remittance_account,
+      bank_account_name: itemObj.account_name,
+      bank_name: itemObj.bank_of_deposit,
+      pay_type: itemObj.settle_mode_name,
+      client: itemObj.purchaser_name,
+      phone: itemObj.target_user_phone,
+      order_total_length: (itemObj.total_number / 100).toString(),
+      order_total_price: (
+        itemObj.bill_total_sale_price / 100
+      ).toString(),
+      total_weight_error_discount: (
+        itemObj.total_weight_error_discount / 100
+      ).toString(),
+      order_total_num: itemObj.total_number.toString(),
+      qrcode: "",
+      order_total_weight: (itemObj.total_weight / 1000).toString(),
+      estimate_amount: (itemObj.estimate_amount / 100).toString(),
+      total_sale_price: (itemObj.total_sale_price / 100).toString(),
+      show_total_sale_price: true,
+      show_total_weight_error_discount: true,
+      actual_amount: (itemObj.payment_amount / 100).toString(),
+      wait_pay_amount: (itemObj.wait_pay_amount / 100).toString(),
+      order_total_weight_error: (
+        itemObj.total_weight_error / 1000
+      ).toString(),
+    };
+    const res = await payFetch(query)
+    if (res.data) {
+      console.log(res.data.base64)
+      setShowSide(false)
+      setTitle('查看销售码单')
+      setPicUrl(res.data.base64)
+    }
+  }
+
+
+  //确认交易
+  const { fetchData: payOneFetch } = orderPaymentorderPaymentSubmission()
+  const { fetchData: payTwoFetch } = orderPaymentpreCollectOrderorderPaymentSubmission()
+  const handsurePay = (obj) => {
+    let arr: any = []
+    // if (obj.status !== 10) {
+    arr = payList.filter(item => {
+      return item.checked
+    })
+    if (!arr.length) {
+      Taro.showToast({
+        title: '请选择后再提交',
+        icon: 'error'
+      })
+      return false
+    }
+
+    Taro.showModal({
+      content: "确定交易吗？",
+      confirmText: "确认",
+      cancelText: "取消",
+      success: async function (res) {
+        if (res.confirm) {
+          Taro.showLoading({
+            title: '请稍等...',
+            mask: true
+          })
+          const restult = await obj.status !== 10 ? payOneFetch({ id: Number(obj.should_collect_order_id), payment_method: Number(arr[0]?.id) }) : payTwoFetch({ id: Number(obj.pre_collect_order_id), payment_method: Number(arr[0]?.id) })
+          if (restult?.msg === 'success') {
+            Taro.showToast({
+              title: '交易成功'
+            })
+            Taro.hideLoading()
+            setShowPay(false)
+            getOrderList()
+          } else {
+            Taro.showToast({
+              title: restult?.msg,
+              icon: 'error'
+            })
+          }
+        }
+
+      }
+    })
+
+    // }
+  }
+
+  //显示支付
+  const [showPay, setShowPay] = useState(false)
+
   return (
     <View>
       <View style={{ background: '#FFFFFF', paddingLeft: '20rpx', paddingBottom: '20rpx', position: 'sticky', top: '0', zIndex: '99' }}>
@@ -250,7 +586,13 @@ export default () => {
           {orderData?.list?.map((item, index) => {
             return (
               <View key={item.id} className={styles.order_item_con}>
-                <ItemList obj={item} key={index}></ItemList>
+                <ItemList
+                  obj={item}
+                  key={index}
+                  cancle={(e, item) => cancle(e, item)}
+                  nextBuy={(e, item) => nextBuy(e, item)}
+                  toPay={(e, item) => toPay(e, item)}
+                ></ItemList>
               </View>
             )
           })}
@@ -314,8 +656,20 @@ export default () => {
             <Button className={styles.resetBox} onClick={() => { handReset() }}> 重置</Button >
             <Button className={classnames(isDisabled ? styles.button : styles.activeButton)} disabled={isDisabled} onClick={() => { handSure?.() }}> 确认</Button >
           </View>
+          {/* <View className={styles.areaBox}></View> */}
         </View>
       </Popup>
-    </View>
+      <PayPopup
+        list={payList}
+        obj={itemObj}
+        showPopup={showPay}
+        popupClose={() => setShowPay(false)}
+        clickItem={(item) => clickItem(item)}
+        handsurePay={(obj) => handsurePay(obj)}
+        showSide={showSide}
+        title={title}
+        picUrl={picUrl}
+      ></PayPopup>
+    </View >
   )
 }

src/pages/searchPage/index.module.scss

@@ -1,3 +1,7 @@
+page {
+    background: #ffff;
+}
+
 .main {
     background: #ffff;
 

src/styles/iconfont.scss

@@ -1,9 +1,9 @@
 /* CDN 服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
 @font-face {
-  font-family: 'iconfont';  /* Project id 3619513 */
+  font-family: 'iconfont';
-  src: url('//at.alicdn.com/t/c/font_3619513_g8r6ax9bp1n.woff2?t=1662609560991') format('woff2'),
+  /* Project id 3619513 */
-       url('//at.alicdn.com/t/c/font_3619513_g8r6ax9bp1n.woff?t=1662609560991') format('woff'),
+  src: url('iconfont.ttf?t=1663065236955') format('truetype');
-       url('//at.alicdn.com/t/c/font_3619513_g8r6ax9bp1n.ttf?t=1662609560991') format('truetype');
+
 }
 
 .iconfont {
@@ -14,6 +14,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-lujing:before {
+  content: "\e63e";
+}
+
 .icon-yewuyuanqizi:before {
   content: "\e639";
 }
@@ -228,5 +232,4 @@
 
 .icon-gouwu:before {
   content: "\e607";
-}
+}
-