
<view class="page" data-weui-theme="{{theme}}">
    <mp-toptips msg="{{error}}" type="error" show="{{error}}"></mp-toptips>
 <mp-form-page title="表单结构" subtitle="展示表单页面的信息结构样式, 分别由头部区域/控件区域/提示区域/操作区域和底部信息区域组成。">
        <mp-form id="form" rules="{{rules}}" models="{{formData}}">
            <mp-cells title="单选列表项">
                <mp-checkbox-group prop="radio" multi="{{false}}" bindchange="radioChange">
                    <mp-checkbox wx:for="{{radioItems}}" wx:key="value" label="{{item.name}}" value="{{item.value}}" checked="{{item.checked}}"></mp-checkbox>
                </mp-checkbox-group>
            </mp-cells>
            <mp-cells title="复选列表项">
                <mp-checkbox-group prop="checkbox" multi="{{true}}" bindchange="checkboxChange">
                    <mp-checkbox wx:for="{{checkboxItems}}" wx:key="value" label="{{item.name}}" value="{{item.value}}" checked="{{item.checked}}"></mp-checkbox>
                </mp-checkbox-group>
            </mp-cells>
               <mp-cells title="表单" footer="底部说明文字底部说明文字">
                <mp-cell prop="name" title="姓名" ext-class="">
                    <input bindinput="formInputChange" data-field="name" class="weui-input" placeholder="请输入姓名"/>
                </mp-cell>
                <mp-cell prop="qq" title="qq" ext-class="">
                    <input bindinput="formInputChange" data-field="qq" class="weui-input" placeholder="请输入qq"/>
                </mp-cell>
                <mp-cell prop="mobile" title="手机号" ext-class=" weui-cell_vcode">
                    <input bindinput="formInputChange" data-field="mobile" class="weui-input" placeholder="请输入手机号"/>
                    <button slot="footer" type="default" class="weui-vcode-btn">获取验证码</button>
                </mp-cell>
                <mp-cell prop="date" title="日期" ext-class="">
                    <picker data-field="date" mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
                        <view class="weui-input">{{date}}</view>
                    </picker>
                </mp-cell>
                <mp-cell prop="vcode" title="验证码" ext-class=" weui-cell_vcode">
                    <input bindinput="formInputChange" data-field="vcode" class="weui-input" placeholder="请输入验证码"/>
                    <image slot="footer" class="weui-vcode-img" src="../../images/vcode.jpg" style="width: 108px"></image>
                </mp-cell>
            </mp-cells>
            <mp-cells title="提交后表单项报错">
                <mp-cell show-error prop="idcard" title="卡号" ext-class="">
                    <input bindinput="formInputChange" data-field="idcard" class="weui-input" placeholder="请输入卡号"/>
                </mp-cell>
            </mp-cells>
            <mp-cells title="开关">
                <mp-cell title="标题文字" ext-class="">
                    <switch slot="footer" checked />
                </mp-cell>
            </mp-cells>
            <mp-cells title="文本框">
                <mp-cell title="标题文字" ext-class="">
                    <input class="weui-input" placeholder="请输入文本" />
                </mp-cell>
            </mp-cells>
            <mp-cells title="文本域">
                <mp-cell has-header="{{false}}" has-footer="{{false}}" title="" ext-class="">
                    <textarea class="weui-textarea" placeholder="请输入文本" style="height: 3.3em" />
                    <view class="weui-textarea-counter">0/200</view>
                </mp-cell>
            </mp-cells>
            <mp-cells title="选择">
                <mp-cell ext-class="weui-cell_select weui-cell_select-before">
                    <view slot="title" style="width: 105px">
                        <picker bindchange="bindCountryCodeChange" value="{{countryCodeIndex}}" range="{{countryCodes}}">
                        <view class="weui-select">{{countryCodes[countryCodeIndex]}}</view>
                        </picker>
                    </view>
                    <input class="weui-input" placeholder="请输入号码" />
                </mp-cell>
            </mp-cells>
            <mp-cells title="选择">
                <mp-cell has-header="{{false}}" ext-class="weui-cell_select">
                    <picker bindchange="bindAccountChange" value="{{accountIndex}}" range="{{accounts}}">
                        <view class="weui-select">{{accounts[accountIndex]}}</view>
                    </picker>
                        </mp-cell>
                <mp-cell ext-class="weui-cell_select weui-cell_select-after">
                    <view slot="title" class="weui-label">国家/地区</view>
                    <picker bindchange="bindCountryChange" value="{{countryIndex}}" range="{{countries}}">
                        <view class="weui-select">{{countries[countryIndex]}}</view>
                    </picker>
                </mp-cell>
            </mp-cells>
        </mp-form>

        <checkbox-group slot="tips" bindchange="bindAgreeChange">
            <label class="weui-agree">
                <checkbox class="weui-agree__checkbox-check" />
                <text class="weui-agree__checkbox"></text>
                <view class="weui-agree__text">阅读并同意<navigator>《相关条款》</navigator></view>
            </label>
        </checkbox-group>
        <view slot="button">
            <button class="weui-btn" type="primary" bindtap="submitForm">确定</button>
        </view>
    </mp-form-page>
</view>