# ohos-card-form

**Repository Path**: chinasoft2_ohos/ohos-card-form

## Basic Information

- **Project Name**: ohos-card-form
- **Description**: 表单是一个现成的卡形式布局
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 2
- **Created**: 2021-05-13
- **Last Updated**: 2021-12-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# ohos-card-form

#### 项目介绍
- 项目名称：ohos-card-form
- 所属系列：openharmony的第三方组件适配移植
- 功能：表单是一个现成的卡形式布局。
- 项目移植状态：主功能完成
- 调用差异：无
- 开发版本：sdk6，DevEco Studio 2.2 Beta1
- 基线版本： Release Tags 5.1.1

#### 效果演示
<img src="img/aaaa.gif"></img>

#### 安装教程

1.在项目根目录下的build.gradle文件中，
 ```
 allprojects {
    repositories {
        maven {
            url 'https://s01.oss.sonatype.org/content/repositories/releases/'
        }
    }
 }
```
2.在entry模块的build.gradle文件中，
 ```
 dependencies {
    implementation('com.gitee.chinasoft_ohos:ohos_card_form:1.0.0')
    ......
 }
```

#### 使用说明

组件主要由SupportedCardTypesView实现银行卡图标切换和CardForm实现卡信息输入框组成。

卡片表单是一个线性布局，您可以添加到您的布局：
 ```
 <DirectionalLayout
     ohos:height="match_content"
     ohos:width="match_parent"
     ohos:orientation="vertical">

     <com.braintreepayments.cardform.view.SupportedCardTypesView
          ohos:id="$+id:supported_card_types"
          ohos:height="match_content"
          ohos:width="match_parent"
          ohos:top_padding="20vp"/>

     <com.braintreepayments.cardform.view.CardForm
          ohos:id="$+id:card_form"
          ohos:height="match_content"
          ohos:width="match_parent"
          ohos:bottom_margin="300vp"/>
 </DirectionalLayout>
```
要初始化视图并更改用户进入所需的字段，请使用所需的字段方法和。
```
private static final CardType[] SUPPORTED_CARD_TYPES = {CardType.VISA, CardType.MASTERCARD,
        CardType.DISCOVER, CardType.AMEX, CardType.DINERS_CLUB, CardType.JCB,
        CardType.MAESTRO, CardType.UNIONPAY, CardType.HIPER, CardType.HIPERCARD};

    private SupportedCardTypesView mSupportedCardTypesView;
    private CardForm mCardForm;

    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);
        mSupportedCardTypesView = (SupportedCardTypesView) findComponentById(ResourceTable.Id_supported_card_types);
        mSupportedCardTypesView.setSupportedCardTypes(SUPPORTED_CARD_TYPES);

        mCardForm = (CardForm) findComponentById(ResourceTable.Id_card_form);
        mCardForm.cardRequired(true)
                .maskCardNumber(true)
                .maskCvv(true)
                .expirationRequired(true)
                .cvvRequired(true)
                .postalCodeRequired(true)
                .mobileNumberRequired(true)
                .saveCardCheckBoxChecked(true)
                .saveCardCheckBoxVisible(true)
                .cardholderName(CardForm.FIELD_REQUIRED)
                .mobileNumberExplanation("Make sure SMS is enabled for this mobile number")
                .setup(this);
        mCardForm.setOnCardFormSubmitListener(this);
        mCardForm.setOnCardTypeChangedListener(this);
    }
```
要访问表单中的值，每个字段都有获取器：
```
mCardForm.getCardNumber();
mCardForm.getExpirationMonth();
mCardForm.getExpirationYear();
mCardForm.getCvv();
mCardForm.getCardholderName();
mCardForm.getPostalCode();
mCardForm.getCountryCode();
mCardForm.getMobileNumber();
```
检查输入内容是否有效
```
CardForm CardForm#isValid()

```

#### 测试信息

CodeCheck代码测试无异常

CloudTest代码测试无异常

病毒安全检测通过

当前版本demo功能与原组件基本无差异

#### 版本迭代

- 1.0.0

#### 版权和许可信息

 ```
  Card Form is open source and available under the MIT license. See the [LICENSE](LICENSE) file for more info.
 ```