Browse Source

银行选择

dev01 2 years ago
parent
commit
0497c5b6d8

+ 93 - 60
src/components/common/accountModal/index.jsx

@@ -1,9 +1,11 @@
 import React, { Component } from "react";
 import Taro from "@tarojs/taro";
 import { View, Button } from "@tarojs/components";
-import { AtInput, AtModal, AtModalHeader, AtModalContent, AtModalAction } from "taro-ui";
+import { AtInput, AtModal, AtModalHeader, AtModalContent, AtModalAction, } from "taro-ui";
 import { addAccount, editAccount } from '../../../utils/servers/servers';
+import BankModal from '../../common/bankModal'
 
+import './index.less';
 import "taro-ui/dist/style/components/modal.scss";
 
 class AccountModal extends Component {
@@ -11,6 +13,7 @@ class AccountModal extends Component {
     super(props);
     this.state = {
       data: {},
+      isshowDrawer: false,
     }
   }
 
@@ -98,69 +101,99 @@ class AccountModal extends Component {
 
   }
 
+  openshowDrawer() {
+    this.setState({
+      isshowDrawer: true,
+    })
+  }
+
+  closeshowDrawer() {
+    this.setState({
+      isshowDrawer: false,
+    })
+  }
+
+  getHot(i) {
+    const { data = {}, } = this.state
+    data.bank = i.name
+    this.setState({
+      isshowDrawer: false,
+    })
+  }
+
   render() {
-    const { data = {} } = this.state
+    const { data = {}, } = this.state
     const { visible = "", onClose } = this.props;
     return (
-      <AtModal
-        isOpened={visible != ""}
-        closeOnClickOverlay={false}
-      >
-        <AtModalHeader>{visible == "add" ? "新增收款账户" : visible == "edit" && "编辑收款账户"}</AtModalHeader>
-        <AtModalContent>
-          <View className="modal">
-            <View>
-              <AtInput
-                required
-                name='name'
-                title='账户姓名:'
-                type='text'
-                placeholder='请输入账户姓名'
-                value={data.name}
-                onChange={e => { data.name = e }}
-              />
-            </View>
-            <View>
-              <AtInput
-                required
-                name='address'
-                title='银行名称:'
-                type='text'
-                placeholder='请输入银行名称'
-                value={data.bank}
-                onChange={e => { data.bank = e }}
-              />
-            </View>
-            <View>
-              <AtInput
-                required
-                name='bank'
-                title='开户银行:'
-                type='text'
-                placeholder='请输入开户银行'
-                value={data.openBank}
-                onChange={e => { data.openBank = e }}
-              />
-            </View>
-            <View>
-              <AtInput
-                required
-                name='code'
-                title='银行账户:'
-                type='number'
-                placeholder='请输入银行账户'
-                value={data.accounts}
-                onChange={e => { data.accounts = e }}
-              />
+      <View>
+        <AtModal
+          isOpened={visible != ""}
+          closeOnClickOverlay={false}
+        >
+          <AtModalHeader>{visible == "add" ? "新增收款账户" : visible == "edit" && "编辑收款账户"}</AtModalHeader>
+          <AtModalContent>
+            <View className="modal">
+              <View>
+                <AtInput
+                  required
+                  name='name'
+                  title='账户姓名:'
+                  type='text'
+                  placeholder='请输入账户姓名'
+                  value={data.name}
+                  onChange={e => { data.name = e }}
+                />
+              </View>
+              <View onClick={() => {
+                this.openshowDrawer()
+              }}>
+                <AtInput
+                  required
+                  editable={false}
+                  name='address'
+                  title='银行名称:'
+                  type='text'
+                  placeholder='请选择银行名称'
+                  value={data.bank}
+                  onChange={e => { data.bank = e }}
+                />
+              </View>
+              <View>
+                <AtInput
+                  required
+                  name='bank'
+                  title='开户银行:'
+                  type='text'
+                  placeholder='请输入开户银行'
+                  value={data.openBank}
+                  onChange={e => { data.openBank = e }}
+                />
+              </View>
+              <View>
+                <AtInput
+                  required
+                  name='code'
+                  title='银行账户:'
+                  type='number'
+                  placeholder='请输入银行账户'
+                  value={data.accounts}
+                  onChange={e => { data.accounts = e }}
+                />
+              </View>
             </View>
-          </View>
-        </AtModalContent>
-        <AtModalAction>
-          <Button onClick={onClose}>取消</Button>
-          <Button onClick={this.onSubmit.bind(this, visible, 1)}>保存并设置为默认账户</Button>
-          <Button onClick={this.onSubmit.bind(this, visible, 0)}>保存账户</Button>
-        </AtModalAction>
-      </AtModal>
+          </AtModalContent>
+          <AtModalAction>
+            <Button onClick={onClose}>取消</Button>
+            <Button onClick={this.onSubmit.bind(this, visible, 1)}>保存并设置为默认账户</Button>
+            <Button onClick={this.onSubmit.bind(this, visible, 0)}>保存账户</Button>
+          </AtModalAction>
+        </AtModal>
+        <BankModal
+          closeshowDrawer={this.closeshowDrawer.bind(this)}
+          isshowDrawer={this.state.isshowDrawer}
+          getHot={this.getHot.bind(this)}
+        />
+      </View>
     );
   }
 }

+ 4 - 0
src/components/common/accountModal/index.less

@@ -0,0 +1,4 @@
+
+.at-input--disabled {
+  opacity: 1 !important;
+}

+ 87 - 0
src/components/common/bankModal/index.jsx

@@ -0,0 +1,87 @@
+import React, { Component } from "react";
+import Taro from "@tarojs/taro";
+import { View, Button } from "@tarojs/components";
+import { AtInput, AtModal, AtModalHeader, AtModalContent, AtModalAction, AtDrawer, AtIndexes } from "taro-ui";
+import { bankList } from '../../../utils/tools/config';
+
+import './index.less';
+import "taro-ui/dist/style/components/toast.scss";
+import "taro-ui/dist/style/components/indexes.scss";
+import "taro-ui/dist/style/components/list.scss";
+
+class BankModal extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isshowDrawer: false,
+      hotList: [
+        { 'name': '中国银行' },
+        { 'name': '中国工商银行' },
+        { 'name': '中国农业银行' },
+        { 'name': '中国建设银行' },
+        { 'name': '招商银行' },
+        { 'name': '交通银行' },
+        { 'name': '长沙银行' },
+        { 'name': '中国邮政储蓄银行' },
+      ],
+    }
+  }
+
+  componentDidMount() {
+
+  }
+
+  onClick(i) {
+    const { getHot } = this.props;
+    getHot(i)
+  }
+
+
+  render() {
+    const { hotList, } = this.state
+    const { isshowDrawer, closeshowDrawer, getHot } = this.props;
+    return (
+      <View className="bank">
+        <AtDrawer
+          width="100%"
+          className='drawer'
+          show={isshowDrawer}
+          mask
+        >
+          <View className='top'>
+            <View className='top-left'></View>
+            <View className='top-title'>银行选择</View>
+            <View className='top-right' onClick={(e) => closeshowDrawer()}>✖️</View>
+          </View>
+          <AtIndexes
+            topKey='常'
+            list={bankList}
+            onClick={this.onClick.bind(this)}
+          >
+            <View className='custom'>
+              <View className="tops"></View>
+              <View className='at-indexes__list-title' >常用银行</View>
+              <View className='drawer-hot'>
+                {
+                  hotList.map((item, index) => (
+                    <View
+                      key={index}
+                      className='drawer-hot-item'
+                      onClick={() => getHot(item)}
+                    >
+                      <View className='font'>
+                        {item.name}
+                      </View>
+                    </View>
+                  ))
+                }
+              </View>
+            </View>
+          </AtIndexes>
+        </AtDrawer>
+      </View>
+    );
+  }
+}
+
+export default BankModal;

+ 54 - 0
src/components/common/bankModal/index.less

@@ -0,0 +1,54 @@
+.bank {
+  position: fixed;
+  height: 100vh;
+  z-index: 9999;
+
+  .drawer {
+
+    .top {
+      width: 94%;
+      background: #fff;
+      padding: 10px 3%;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+      // position: fixed;
+      // z-index: 99;
+
+      .top-title {}
+
+      .top-left {
+        width: 50px;
+        height: 50px;
+      }
+
+      .top-right {
+        width: 50px;
+        height: 50px;
+      }
+    }
+
+    .custom {
+
+      .drawer-hot {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        padding: 24px;
+
+        .drawer-hot-item {
+          min-width: 200px;
+          border: 1px solid #7F7F7F;
+          margin: 0 10px 10px 0;
+          padding: 10px;
+          font-size: 28px;
+          text-align: center;
+
+        }
+
+      }
+    }
+  }
+
+}

File diff suppressed because it is too large
+ 983 - 5
src/utils/tools/config.js