支付页面开发

src/components/checkbox/index.module.scss

@@ -26,6 +26,6 @@
     text-align: center;
     line-height: 40px;
     .miconfont{
-        font-size: 26px;
+        font-size: 32px;
     }
 }

src/components/searchInput/index.tsx

@@ -12,6 +12,8 @@ type Params = {
     changeOnInput?: (string) => void,
     clickOnInput?: () => void,
     children?: ReactNode
+    height?: number,
+    titleStyle?: Object
 
 }
 
@@ -24,7 +26,9 @@ export default memo((props: Params) => {
         placeholder = '请输入',
         showBorder = true,
         changeOnInput,
-        clickOnInput
+        clickOnInput,
+        height = 80,
+        titleStyle = {}
     } = props
 
     let stylen = useMemo(() => {
@@ -34,8 +38,8 @@ export default memo((props: Params) => {
         return {}
     }, [showBorder])
     return (
-        <View className={styles.searchInput_main} style={stylen}>
+        <View className={styles.searchInput_main} style={{height: height + 'rpx'}}>
-            {showTitle&&<View className={styles.searchInput_title}>{title}</View>}
+            {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)}/>
                     ||<View>{props.children}</View>

src/pages/order/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: 26px;
+        }
+        &: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/order/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/order/components/estimatedAmount/index.tsx

@@ -3,6 +3,7 @@ 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,
@@ -10,18 +11,6 @@ type Param = {
     status?: true|false, //true 加大加深
 }
 export default memo(({style, number = 0, status = true, title = ''}: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}>
@@ -32,9 +21,7 @@ export default memo(({style, number = 0, status = true, title = ''}:Param) => {
                         {/* <View className={classnames(styles.message)}>123123123121212312312312312</View> */}
                     </View>
                 </View>
-                <View className={classnames(styles.order_price_num, status&&styles.emphasis_num)} style={style}>
+                <AmountShow status={1} number={number}/>
-                    {priceDom()}
-                </View>
             </View>
         </>
     )

src/pages/order/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/order/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/order/components/orderState/index.module.scss

@@ -35,7 +35,7 @@
             border-left: 2px solid $color_main;
             height: 100%;
             top: 10px;
-            left: 8px;
+            left: 9px;
             position: absolute;
             z-index: 1;
         }

src/pages/order/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/order/components/payment/index.tsx

@@ -0,0 +1,104 @@
+import { Text, View } from "@tarojs/components";
+import { memo, 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";
+
+type Param = {
+    show?: true|false,
+    onClose?: () => void
+}
+export default memo(({show = false, onClose}:Param) => {
+
+    //线下付款
+    const [offlinePayShow, setofflinePayShow] = useState(false)
+    const onShowOfflinePay = () => {
+        setofflinePayShow(true)
+        onClose?.()
+    }
+
+    //扫码支付
+    const [scanPayShow, setScanPayShow] = useState(false)
+    const onShowScanPay = () => {
+        setScanPayShow(true)
+        onClose?.()
+    }
+    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={6000.33}/>
+                    </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>¥6,001.00</Text>
+                                </View>
+                                <View className={styles.payment_list_title_price_item}>
+                                    <Text>已付金额</Text>
+                                    <Text>¥1,801.00</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>
+                                    <View className={styles.payment_list_item_left_price}>金额不足，剩余 ¥0.00</View>
+                                </View>
+                                <MCheckbox  status={true} onSelect={() => console.log()} onClose={() =>console.log()}/>
+                            </View>
+                            <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}>x天账期</View>
+                                    </View>
+                                    <View className={styles.payment_list_item_left_price}>可用额度 ¥3,000.00</View>
+                                </View>
+                                <MCheckbox  status={true} onSelect={() => console.log()} onClose={() =>console.log()}/>
+                            </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}>
+                                <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}>确认交易</View>
+                </View>
+            </Popup>
+            <OfflinePay show={offlinePayShow} onClose={() => setofflinePayShow(false)}/>
+            <ScanPay show={scanPayShow} onClose={() => setScanPayShow(false)}/>
+        </View>
+        
+    )
+})

src/pages/order/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/order/components/scanPay/index.tsx

@@ -0,0 +1,38 @@
+import { Image, ScrollView, 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";
+import { formatImgUrl } from "@/common/fotmat";
+
+type Param = {
+    show?: true|false,
+    onClose?: () => void
+}
+export default memo(({show = true, onClose}:Param) => {
+    //复制功能
+    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>
+                    <ScrollView scrollY className={styles.scanPay_list}>
+                        <Image mode="widthFix" src={formatImgUrl('')}></Image>
+                    </ScrollView>
+                    <View className={styles.btns} onClick={() => {}}>保存电子确认单</View>
+                </View>
+            </Popup>
+        </View>
+        
+    )
+})

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

@@ -33,6 +33,7 @@ export default memo(({style, number = 0}:Param) => {
                 <View className={classnames(styles.order_price_num, styles.emphasis_num)} style={style}>
                     {priceDom()}
                 </View>
+                
             </View>
         </>
     )

src/pages/order/index.tsx

@@ -11,6 +11,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import AddressInfo from "./components/addressInfo";
 import KindList from "./components/kindList";
 import OrderState from "./components/orderState";
+import Payment from "./components/payment";
 import Remark from "./components/remark";
 import WeightMemo from "./components/weightMemo";
 import styles  from './index.module.scss'
@@ -135,6 +136,12 @@ import styles  from './index.module.scss'
         )
         goLink('/pages/editOrder/index')
     }
+
+    //去付款
+    const [payMentShow, setPayMentShow] = useState(false)
+    const toPay = () => {
+        setPayMentShow(true)
+    }
     return (
         <View className={styles.order_main}>
             <View className={styles.weight_memo_con}>
@@ -172,11 +179,12 @@ import styles  from './index.module.scss'
                 <View className={styles.order_btn}>申请退货</View>    
                 <View className={styles.order_btn}>查看物流</View>    
                 <View className={styles.order_btn}>确认收货</View>    
-                <View className={styles.order_btn}>再次购买</View>    
+                <View className={styles.order_btn} onClick={() => toPay()}>去支付</View>    
             </View>        
             <Popup show={showDesc} showTitle={false} onClose={() => setShowDesc(false)} >
                 <Remark onSave={(e) => getRemark(e)}/>
             </Popup>
+            <Payment show={payMentShow} onClose={() => setPayMentShow(false)}/>
             <View className="common_safe_area_y"></View>
         </View>
     )