使用dcloud全家桶开发公众号H5系统

表单界面实现

小韦云科技-区块链+小程序+公众号+商城+分销+直播+企业官网+外贸电商-为您提供优质的开发服务-电话/微信联系:18123611282

导入uni-ui

进入uni-ui插件界面

https://ext.dcloud.net.cn/plugin?id=55

使用 HBuilderX 导入插件 按钮进入bctos-weixin-h5项目,后面我们需要使用到里面的uniForms, uniEasyinput等组件

界面模板实现

可以先使用schema2code插件生成前端界面,再在这基础上修改会省事很多。

下面直接上模板代码

完整的代码请在官方插件市场下载:https://ext.dcloud.net.cn/plugin?id=4829

<template>
    <view class="uni-container">
        <view class="top-ad">
            <image style="width: 100%; height: 100px;" mode="aspectFit" src="../../static/head.jpg"></image>
        </view>

        <uni-forms ref="form" :value="formData" validate-trigger="submit" err-show-type="toast">
            <view class="white-rounded">
                <view style="padding: 1px 15px;">
                    <view class="nei-romkuan">
                        <uni-easyinput disabled placeholder="服务内容: 工商注册代办 (经营范围:服务类)"></uni-easyinput>
                    </view>
                    <view class="nei-romkuan">
                        <view class="uni-column">
                            <text>*</text>电子邮箱 (xxx@xxx.com)
                        </view>
                        <uni-easyinput v-model="formData.email" placeholder=" 请输入" />
                    </view>
                    <view class="nei-romkuan">
                        <view class="uni-column">
                            <text>*</text>手机号码 ( 本人身份证实名的手机号码 )
                        </view>
                        <uni-easyinput v-model="formData.mobile" placeholder="请输入" />
                    </view>
                </view>
            </view>
            <view class="white-rounded white-rounded2">
                <view class="kuan50">
                    <uni-file-picker file-mediatype="image" return-type="object" v-model="formData.idcard_0"
                        :list-styles="styles" :image-styles="styles2"></uni-file-picker>
                    <view class="shenfen-zheng">上传身份证正面</view>
                </view>
                <view class="kuan50">
                    <uni-file-picker file-mediatype="image" return-type="object" v-model="formData.idcard_1"
                        :list-styles="styles" :image-styles="styles2" />
                    <view class="shenfen-zheng">上传身份证背面</view>
                </view>
            </view>
            <view class="uni-button-group">
                <button type="primary" class="uni-button" @click="submit">微信支付(788.00元)</button>
            </view>
        </uni-forms>
    </view>
</template>

内容比较明了,就是一个表单页面,只不过加了些排版。

本文由小韦云原创,转载请注明出处:https://bctos.cn/doc/18/1967,否则追究其法律责任

关键词:表单 schema2code uni-ui

广告位招商