导入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>

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