index.jsx 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
  1. import React, { Component } from "react";
  2. import Taro from "@tarojs/taro";
  3. import { View, Button } from "@tarojs/components";
  4. import { AtInput, AtModal, AtModalHeader, AtModalContent, AtModalAction, } from "taro-ui";
  5. import { addAccount, editAccount } from '../../../utils/servers/servers';
  6. import BankModal from '../../common/bankModal'
  7. import './index.less';
  8. import "taro-ui/dist/style/components/modal.scss";
  9. class AccountModal extends Component {
  10. constructor(props) {
  11. super(props);
  12. this.state = {
  13. data: {},
  14. isshowDrawer: false,
  15. }
  16. }
  17. componentDidMount() {
  18. const { data = {} } = this.props
  19. this.setState({
  20. data
  21. })
  22. }
  23. // 新增||修改 账户
  24. onSubmit(type, status) {
  25. const { data } = this.state
  26. const { onClose, isSub = false, onOk } = this.props
  27. if (!data.name) {
  28. Taro.showToast({ title: '请填写账户姓名!', icon: 'none' });
  29. return
  30. }
  31. if (!data.bank) {
  32. Taro.showToast({ title: '请填写银行名称!', icon: 'none' });
  33. return
  34. }
  35. if (!data.openBank) {
  36. Taro.showToast({ title: '请填写开户银行!', icon: 'none' });
  37. return
  38. }
  39. if (!data.accounts) {
  40. Taro.showToast({ title: '请填写银行账户!', icon: 'none' });
  41. return
  42. }
  43. var num = /^\d*$/
  44. if (data.accounts.length < 16 || data.accounts.length > 19 || !num.test(data.accounts)) {
  45. Taro.showToast({ title: '请填写正确的银行账户!', icon: 'none' });
  46. return
  47. }
  48. Taro.showLoading({ title: '保存中...' });
  49. type == "edit"
  50. ? editAccount({
  51. id: data.id,
  52. bank: data.bank,
  53. openBank: data.openBank,
  54. accounts: data.accounts,
  55. name: data.name,
  56. status,
  57. }).then(v => {
  58. Taro.hideLoading()
  59. if (v.error.length === 0) {
  60. Taro.showToast({ title: '保存成功', icon: 'none' });
  61. onClose();
  62. } else {
  63. Taro.showToast({ title: v.error[0].message, icon: 'none' })
  64. }
  65. }).catch(() => {
  66. Taro.hideLoading()
  67. Taro.showToast({
  68. title: '系统错误,请稍后再试',
  69. icon: 'none'
  70. })
  71. })
  72. : addAccount({
  73. bank: data.bank,
  74. openBank: data.openBank,
  75. accounts: data.accounts,
  76. name: data.name,
  77. status,
  78. }).then(v => {
  79. Taro.hideLoading()
  80. if (v.error.length === 0) {
  81. isSub
  82. ? onOk(v.data)
  83. : (
  84. Taro.showToast({ title: '保存成功', icon: 'none' }),
  85. onClose()
  86. )
  87. } else {
  88. Taro.showToast({ title: v.error[0].message, icon: 'none' })
  89. }
  90. }).catch(() => {
  91. Taro.hideLoading()
  92. Taro.showToast({
  93. title: '系统错误,请稍后再试',
  94. icon: 'none'
  95. })
  96. })
  97. }
  98. openshowDrawer() {
  99. Taro.showLoading({
  100. title: '加载中...',
  101. mask: false,
  102. })
  103. this.setState({
  104. isshowDrawer: true,
  105. })
  106. setTimeout(function () {
  107. Taro.hideLoading()
  108. }, 500);
  109. }
  110. closeshowDrawer() {
  111. this.setState({
  112. isshowDrawer: false,
  113. })
  114. }
  115. getHot(i) {
  116. const { data = {}, } = this.state
  117. data.bank = i.name
  118. this.setState({
  119. isshowDrawer: false,
  120. })
  121. }
  122. render() {
  123. const { data = {}, } = this.state
  124. const { visible = "", onClose } = this.props;
  125. return (
  126. <View>
  127. <AtModal
  128. isOpened={visible != ""}
  129. closeOnClickOverlay={false}
  130. >
  131. <AtModalHeader>{visible == "add" ? "新增收款账户" : visible == "edit" && "编辑收款账户"}</AtModalHeader>
  132. <AtModalContent>
  133. <View className="modal">
  134. <View>
  135. <AtInput
  136. required
  137. name='name'
  138. title='账户姓名:'
  139. type='text'
  140. placeholder='请输入账户姓名'
  141. value={data.name}
  142. onChange={e => { data.name = e }}
  143. />
  144. </View>
  145. <View onClick={() => {
  146. this.openshowDrawer()
  147. }}>
  148. <AtInput
  149. required
  150. editable={false}
  151. name='address'
  152. title='银行名称:'
  153. type='text'
  154. placeholder='请选择银行名称'
  155. value={data.bank}
  156. onChange={e => { data.bank = e }}
  157. />
  158. </View>
  159. <View>
  160. <AtInput
  161. required
  162. name='bank'
  163. title='开户银行:'
  164. type='text'
  165. placeholder='请输入开户银行'
  166. value={data.openBank}
  167. onChange={e => { data.openBank = e }}
  168. />
  169. </View>
  170. <View>
  171. <AtInput
  172. required
  173. name='code'
  174. title='银行账户:'
  175. type='number'
  176. placeholder='请输入银行账户'
  177. value={data.accounts}
  178. onChange={e => { data.accounts = e }}
  179. />
  180. </View>
  181. </View>
  182. </AtModalContent>
  183. <AtModalAction>
  184. <Button onClick={onClose}>取消</Button>
  185. <Button onClick={this.onSubmit.bind(this, visible, 1)}>保存并设置为默认账户</Button>
  186. <Button onClick={this.onSubmit.bind(this, visible, 0)}>保存账户</Button>
  187. </AtModalAction>
  188. </AtModal>
  189. <BankModal
  190. closeshowDrawer={this.closeshowDrawer.bind(this)}
  191. isshowDrawer={this.state.isshowDrawer}
  192. getHot={this.getHot.bind(this)}
  193. />
  194. </View>
  195. );
  196. }
  197. }
  198. export default AccountModal;