caimei-distribution-www/src/views/order-list/address-edit.vue

<template>
  <div>
    <nav-bar title="编辑地址" @click-left="$router.back()" />
    <div class="address-add">
      <van-form>
        <van-field v-model="formData.name" label="姓名" placeholder="请输入姓名" />
        <van-field v-model="formData.tel" label="手机号" placeholder="请输入手机号" maxlength="11"/>
        <van-field
          readonly
          clickable
          label="城市"
          :value="formData.town"
          placeholder="选择省/市/区"
          @click="showPicker = true"
        />
        <van-field v-model="formData.address" label="详细地址" placeholder="请输入详细地址" />
        <van-field name="switch" label="是否选为默认地址">
          <template #input>
            <van-switch v-model="formData.isDefault" size="20" />
          </template>
        </van-field>
      </van-form>
      <div class="btn">
        <van-button color="#FF5B00" @click="onSave">保存</van-button>
      </div>
      <div class="btn" v-if="formData.id">
        <van-button @click="onDelete">删除</van-button>
      </div>
    </div>
    <van-popup v-model="showPicker" round position="bottom">
      <van-picker
        show-toolbar
        :columns="columns"
        @cancel="showPicker = false"
        @confirm="onConfirm"
        value-key="name"
        :loading="loading"
      />
    </van-popup>
  </div>
</template>

<script>
import { addressSave, addressDelete } from '@/api/institutionApi/address'

export default {
  data () {
    return {
      formData: {
        town: '',
        address: '',
        name: '',
        tel: '',
        isDefault: true,
        addressId: ''
      },
      showPicker: false,
      loading: false,
      columns: this.$store.getters.addressAll,
      townId: 0
    }
  },
  mounted () {
    if (this.$route.query.addressInfo) {
      const form = JSON.parse(this.$route.query.addressInfo)
      this.formData = form
      this.townId = form.townId
      this.formData.town = `${form.province}/${form.city}/${form.town}`
      this.formData.address = form.addressMine
    }
  },
  methods: {
    async onSave () {
      const form = {
        addressId: this.formData.id || '',
        userId: this.$store.getters.userId,
        townId: this.townId,
        receiver: this.formData.name,
        mobile: this.formData.tel,
        address: this.formData.address,
        defaultFlag: this.formData.isDefault ? 1 : 0
      }
      const data = await addressSave(form)
      console.log(data)
      this.$router.back()
    },
    async onDelete () {
      try {
        await addressDelete({ userId: this.$store.getters.userId, addressId: this.formData.id })
        this.$router.back()
      } catch (error) {
        console.log(error)
      }
    },
    onConfirm ($event, value) {
      console.log($event, value)
      this.formData.town = $event.join('/')
      this.townId = this.columns[value[0]].children[value[1]].children[value[2]].id
      console.log(this.townId)
      this.showPicker = false
    }
  }
}
</script>

<style lang="scss" scoped>
.address-add {
  padding: 3vw;
  min-height: 100vh;
  ::v-deep .van-form {
    border-radius: 1.2vw;
    overflow: hidden;
    margin-bottom: 4vw;
  }
  ::v-deep .van-field__label {
    white-space: nowrap;
  }
  .van-switch {
    margin-left: 20vw;
  }
  .van-button {
    margin-bottom: 4vw;
    border-radius: 10vw;
    width: 80vw;
  }
  .btn {
    width: 100%;
    display: flex;
    justify-content: center;
  }
}
</style>