vist_go_uniApp/packageUser/pages/address/edit.vue

<template>
  <view class="address-edit">
    <u-form :model="form" ref="form" :rules="rules">
      <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="#F95B5B">
          <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="#F95B5B">保存</u-button>
      <u-button v-if="form.id" @click="deleteAddress" type="error">删除</u-button>
    </view>

    <u-picker
      :show="showRegionPicker"
      :columns="regionColumns"
      @confirm="confirmRegion"
      @cancel="showRegionPicker = false"
      title="选择地区">
    </u-picker>
    
    <u-modal
      :show="showDeleteModal"
      @confirm="confirmDelete"
      @cancel="showDeleteModal = false"
      title="删除确认"
      content="确定要删除该收货地址吗？"
      showCancelButton>
    </u-modal>
  </view>
</template>

<script>
import { addressDetail, addressDel, addressSubmit } from '../../../config/api.js';

export default {
  data() {
    return {
      form: {
        name: '',
        phone: '',
        province: '',
        city: '',
        district: '',
        address: '',
        isDefault: false
      },
      showRegionPicker: false,
      showDeleteModal: 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 addressDetail({ id })
        if (res.code === 200 && res.data) {
          this.form = res.data
        }
      } catch (e) {
        uni.$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
    },
    deleteAddress() {
      this.showDeleteModal = true
    },
    async confirmDelete() {
      try {
        const res = await addressDel({
          ids: this.form.id
        })
        if (res.code === 200) {
          uni.$u.toast('删除成功')
          setTimeout(() => {
            uni.navigateBack()
          }, 1500)
        }
      } catch (e) {
        uni.$u.toast('删除失败')
      }
      this.showDeleteModal = false
    },
    async submit() {
      try {
        await this.$refs.form.validate()
        const res = await addressSubmit(this.form)
        if (res.code === 200) {
          uni.$u.toast(this.form.id ? '修改成功' : '添加成功')
          setTimeout(() => {
            uni.navigateBack()
          }, 1500)
        }
      } catch (e) {
        if (e.errors) return
        uni.$u.toast(this.form.id ? '修改失败' : '添加失败')
      }
    }
  }
}
</script>

<style lang="scss">
.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;
    
    .u-button {
      margin-bottom: 20rpx;
    }
  }
}
</style>