template view view class=form u-form model=form ref=uForm label-width=150 u-form-item label=联系姓名 required=true prop=name u-input v-model=formname placeholder=请输入姓名 u-form-item u-form

<p>页面组件名为 AddressModify，实现的功能为添加或修改收货地址。页面主要由一个表单和一个底部提交按钮组成，表单包括联系姓名、联系电话、选择城市、详细地址和是否默认五个字段。选择城市为一个自定义组件 city-select，点击选择城市后弹出城市选择器。</p>
<p>在页面的 onLoad 生命周期中，通过传递过来的 addId 参数判断是否为修改地址，如果是则调用接口获取地址信息并填充到表单中。</p>
<p>表单的验证使用了 uView 提供的 u-form 组件和自定义验证规则，当表单验证通过后，根据是否传递过来 addId 参数判断是新增地址还是修改地址，并调用不同的接口进行处理。</p>
<p>关键代码：</p>
<ol>
<li>使用 u-form 组件实现表单</li>
</ol>
<u-form :model="form" ref="uForm" label-width="150">
  <u-form-item label="联系姓名" :required="true" prop="name"> 
    <u-input v-model="form.name" placeholder="请输入姓名" />
  </u-form-item>
  <u-form-item label="联系电话" :required="true" prop="tel"> 
    <u-input v-model="form.tel" placeholder="请输入电话" />
  </u-form-item>
  <u-form-item label="选择城市" :required="true" prop="city">
    <view class="" @click="value = true">
      <view class="" v-if="form.city">
        {{ form.city}}
      </view>
      <view class="" v-else style="color: #c0c4cc;">
        请选择城市
      </view>
    </view>
  </u-form-item>
  <u-form-item label="详细地址" :required="true" prop="detailAdd"> 
    <u-input v-model="form.detailAdd"  placeholder="请输入详细地址"/>
  </u-form-item>
  <u-form-item label="是否默认"> 
    <u-switch v-model="form.is_default"></u-switch> 
  </u-form-item>
</u-form>
<ol start="2">
<li>使用 uView 提供的验证规则验证表单</li>
</ol>
<p>rules: {
name: [
{
required: true,
message: '请输入联系姓名',
trigger: ['change','blur'],
}
],
tel: [
{
required: true,
message: '请输入联系电话',
trigger: ['change','blur'],
},
{
validator: (rule, value, callback) =&gt; {
return this.$u.test.mobile(value);
},
message: '手机号码不正确',
trigger: ['change','blur'],
}
],
city: [
{
required: true,
message: '请输入市县区',
trigger: ['change','blur'],
}
],
detailAdd: [
{
required: true,
message: '请输入详细地址',
trigger: ['change','blur'],
}
],
},
onReady() {
this.$refs.uForm.setRules(this.rules);
},
submit(){
this.$refs.uForm.validate(async valid =&gt; {
if (valid) {
// ...
} else {
this.$u.toast('请填一些必填项哦')
}
})
}</p>
<ol start="3">
<li>自定义组件 city-select 实现城市选择器</li>
</ol>
<p>&lt;city-select v-model=&quot;value&quot; @city-change=&quot;cityChange&quot;&gt;</city-select></p>
<ol start="4">
<li>调用不同的接口进行新增或修改地址</li>
</ol>
<p>// 新增地址
let params = {
name: this.form.name,
address: this.form.detailAdd,
phone: this.form.tel,
province: this.province,
city: this.city,
county: this.county,
is_default: this.form.is_default == true ? 1: 0
}
await this.$u.api.addressAdd(params)</p>
<p>// 修改地址
let params = {
name: this.form.name,
address: this.form.detailAdd,
phone: this.form.tel,
province: this.province,
city: this.city,
county: this.county,
is_default: this.form.is_default == true ? 1: 0
}
await this.$u.api.addressModify(this.addId,params)</p>
<p>样式：</p>
<style lang="scss" scoped>
.submit{
  width: 80%;
  height: 100rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #05b955;
  color: #fff;
}
.bottom{
  width: 100%;
  display: flex;
  justify-content: center;
}
.form{
  margin-left: 40rpx;
}
</style>
<p>组件内外部通信说明：</p>
<ol>
<li>
<p>在页面组件内部，通过 v-model 绑定 value 变量控制城市选择器的显示和隐藏。</p>
</li>
<li>
<p>在 city-select 组件内部，通过调用 $emit('city-change', e) 方法将选择的城市信息传递给父组件 AddressModify。</p>
</li>
<li>
<p>在 AddressModify 组件内部，通过监听 city-change 事件获取选择的城市信息，并更新表单中的城市字段</p>
</li>
</ol>