支付页面开发

2022-05-23 20:31:38 +08:00
parent 07e4c028d1
commit a3780aba0f
14 changed files with 504 additions and 21 deletions
@@ -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;
+    }
+}
@@ -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>
+        
+    )
+})