小程序之实现好看的表单提交页面

原创

用户6493868

发布于 2022-03-07 13:00:48

3K00

代码可运行

文章被收录于专栏：vue封装H5vue封装H5

运行总次数：0

代码可运行

页面效果

实现步骤

引入组件

  "usingComponents": {
    "van-field": "@vant/weapp/field/index",
    "van-popup": "@vant/weapp/popup/index",
    "van-area": "@vant/weapp/area/index",
    "van-toast": "@vant/weapp/toast/index"
  },

页面显示

在wxml文件中添加如下代码

<view class="form">
  <van-cell-group>
    <van-field
    label="客户单位"
    value="{{ usercompany }}"
    placeholder="请输入您的单位名称"
    type="textarea"
    autosize
    clearable
    required
    bind:change="getUserCompany"
    />
    <van-field
		value="{{ address }}"
		required
		label="地址"
		placeholder="请点击选择"
		clickable
    readonly
		bindtap="showAddress"
    border="{{ false }}"
		/>
    <van-field
    label=""
    value="{{ details }}"
    placeholder="请输入详细地址"
    type="textarea"
    autosize
    clearable
    bind:change="getDetails"
    />
    <van-field
    label="负责人"
    value="{{ username }}"
    placeholder="请输入负责人姓名"
    autosize
    clearable
    required
    bind:change="getUsername"
    />
    <van-field
    label="联系电话"
    value="{{ userphone }}"
    placeholder="请输入手机号码"
    autosize
    clearable
    required
    maxlength="11"
    bind:change="getPhone"
    />
    <van-field
    label="产品"
    value="{{ productname }}"
    placeholder="请输入产品名称"
    type="textarea"
    autosize
    clearable
    required
    bind:change="getProductname"
    />
    <van-field
    label="故障描述"
    value="{{ repairnote }}"
    placeholder="请简单描述故障情况"
    type="textarea"
    autosize
    clearable
    input-class="textarea"
    required
    bind:change="getRepairnote"
    />
  </van-cell-group>
  <!-- 地区弹出层 -->
  <van-popup show="{{showAddress}}" round position="bottom">
    <van-area title="请选择地区" area-list="{{areaList}}" bind:confirm="onAddressConfirm" bind:cancel="onAddressCancel" />
  </van-popup>
  <view class="release" bindtap="addRepair">立即报修</view>
  <van-toast id="van-toast" />
</view>