vist_go_uniApp/packageShop/pages/address-edit/index.vue

<template>
  <view class="address-edit">
    <u-form :model="form" ref="form">
      <u-form-item label="收货人" prop="name" required>
        <u-input v-model="form.name" placeholder="请输入收货人姓名" />
      </u-form-item>
      
      <u-form-item label="手机号码" prop="phone" required>
        <u-input v-model="form.phone" placeholder="请输入手机号码" type="number" maxlength="11" />
      </u-form-item>
      
      <u-form-item label="所在地区" prop="region" required @click="showRegionPicker = true">
        <view class="region-select">
          <text v-if="form.province">{{form.province + form.city + form.district}}</text>
          <text v-else class="placeholder">请选择所在地区</text>
          <u-icon name="arrow-right"></u-icon>
        </view>
      </u-form-item>
      
      <u-form-item label="详细地址" prop="address" required>
        <u-textarea v-model="form.address" placeholder="请输入详细地址信息" />
      </u-form-item>
      
      <u-form-item>
        <u-switch v-model="form.isDefault" activeColor="#D93025">
          <text slot="label" class="switch-label">设为默认地址</text>
        </u-switch>
      </u-form-item>
    </u-form>

    <view class="submit-btn">
      <u-button type="primary" @click="submit" color="#D93025">保存</u-button>
    </view>

    <u-picker
      :show="showRegionPicker"
      :columns="regionColumns"
      @confirm="confirmRegion"
      @cancel="showRegionPicker = false"
      title="选择地区">
    </u-picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        phone: '',
        province: '',
        city: '',
        district: '',
        address: '',
        isDefault: false
      },
      showRegionPicker: false,
      regionColumns: [
        // 这里需要接入省市区数据
        // 可以使用第三方包或者自行维护数据
      ],
      rules: {
        name: [{
          required: true,
          message: '请输入收货人姓名',
          trigger: ['blur', 'change']
        }],
        phone: [{
          required: true,
          message: '请输入手机号码',
          trigger: ['blur', 'change']
        }, {
          pattern: /^1[3-9]\d{9}$/,
          message: '请输入正确的手机号码',
          trigger: ['blur', 'change']
        }],
        region: [{
          required: true,
          message: '请选择所在地区',
          trigger: ['blur', 'change']
        }],
        address: [{
          required: true,
          message: '请输入详细地址',
          trigger: ['blur', 'change']
        }]
      }
    }
  },
  onLoad(options) {
    if (options.id) {
      this.getAddressDetail(options.id)
    }
  },
  methods: {
    async getAddressDetail(id) {
      try {
        const res = await this.$api.address.detail(id)
        Object.assign(this.form, res.data)
      } catch (e) {
        this.$u.toast('获取地址信息失败')
      }
    },
    confirmRegion(e) {
      const [province, city, district] = e.value
      this.form.province = province
      this.form.city = city
      this.form.district = district
      this.showRegionPicker = false
    },
    async submit() {
      try {
        await this.$refs.form.validate()
        const api = this.form.id ? 'update' : 'add'
        await this.$api.address[api](this.form)
        this.$u.toast(this.form.id ? '修改成功' : '添加成功')
        setTimeout(() => {
          uni.navigateBack()
        }, 1500)
      } catch (e) {
        if (e.errors) return
        this.$u.toast(this.form.id ? '修改失败' : '添加失败')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.address-edit {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 20rpx;
  
  :deep(.u-form) {
    background: #fff;
    border-radius: 12rpx;
    padding: 20rpx;
    
    .u-form-item {
      padding: 20rpx 0;
    }
  }
  
  .region-select {
    display: flex;
    align-items: center;
    justify-content: space-between;
    
    .placeholder {
      color: #c0c4cc;
    }
  }
  
  .switch-label {
    font-size: 28rpx;
    margin-right: 20rpx;
  }
  
  .submit-btn {
    margin-top: 40rpx;
    padding: 0 20rpx;
  }
}
</style>