页面效果
2022-03-07_205916.png实现步骤
引入组件
代码语言：javascript复制 "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文件中添加如下代码
代码语言：javascript复制<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>
