ngds/frontendEle/src/views/config/receive-address-edit.vue

<template>
  <div v-loading="loading">
    <div class="white-box">
      <el-form ref="form" :model="form" label-width="100px" style="width:500px;">
        <el-form-item>
          <template slot="label">
            <span class="text-danger">*</span>
            Consignee<!-- 收货人 -->
          </template>
          <el-input v-model="form.consignee"></el-input>
        </el-form-item>
        <el-form-item>
          <template slot="label">
            <span class="text-danger">*</span>
            Phone number<!-- 手机号 -->
          </template>
          <el-input v-model="form.mobile"></el-input>
        </el-form-item>
        <el-form-item prop="areaSelected">
          <template slot="label">
            <span class="text-danger">*</span>
            region<!-- 地区 -->
          </template>
          <el-cascader
            size="large"
            :options="regionData"
            v-model="form.areaSelected">
          </el-cascader>
        </el-form-item>
        <el-form-item>
          <template slot="label">
            <span class="text-danger">*</span>
            Detailed address<!-- 详细地址 -->
          </template>
          <el-input v-model="form.address"></el-input>
        </el-form-item>
        <el-form-item>
          <template slot="label">
            Default<!-- 是否默认 -->
          </template>
          <el-switch v-model="form.isDefault" ></el-switch>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" :loading="submitButtonStat">Confirm<!-- 确认 --></el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue'
  import store from '@/utils/vuexStore'
  import network from '@/utils/network'
  import tool from '@/utils/tool'
  import userInfo from '@/utils/userInfo'

  export default {
    name: 'config_receive-address-edit',
    mounted() {
      if (this.$route.name === 'config_receive-address-add'){
        this.loading = false
      } else {
        this.getData()
      }
      console.log(this.regionData)
    },
    data() {
      return {
        regionData: store.state.regionInfo.regionData,
        form: {
          consignee: '',
          mobile: '',
          areaSelected: [],
          address: '',
          isDefault: false,
        },
        loading: true,
        submitButtonStat: false,
      }
    },
    methods: {
      onSubmit() {
        this.submitButtonStat = true
        let path = 'config/receive-address-add'
        let postData = {
          consignee: this.form.consignee,
          mobile: this.form.mobile,
          province: this.form.areaSelected[0] ? this.form.areaSelected[0] : '',
          city: this.form.areaSelected[1] ? this.form.areaSelected[1] : '',
          county: this.form.areaSelected[2] ? this.form.areaSelected[2] : '',
          address: this.form.address,
          isDefault: this.form.isDefault,
        }
        if (this.$route.name === 'config_receive-address-edit'){
          path = 'config/receive-address-edit'
          postData = {
            id: this.$route.params.id,
            consignee: this.form.consignee,
            mobile: this.form.mobile,
            province: this.form.areaSelected[0] ? this.form.areaSelected[0] : '',
            city: this.form.areaSelected[1] ? this.form.areaSelected[1] : '',
            county: this.form.areaSelected[2] ? this.form.areaSelected[2] : '',
            address: this.form.address,
            isDefault: this.form.isDefault,
          }
        }
        return network.postData(path, postData).then(response => {
          this.$message({
            message: response,
            type: 'success'
          })
          this.submitButtonStat = false
          this.$router.go(-1)
        }).catch(() => {
          this.submitButtonStat = false
        })
      },
      getData() {
        network.getData(`config/receive-address-one/${this.$route.params.id}`).then(response=>{
          console.log(response)
          this.form.consignee = response.CONSIGNEE
          this.form.mobile = response.MOBILE
          this.form.areaSelected[0] = response.PROVINCE
          this.form.areaSelected[1] = response.CITY
          this.form.areaSelected[2] = response.COUNTY
          this.form.address = response.ADDRESS
          this.form.isDefault = response.IS_DEFAULT === '1' ? true : false
          this.loading = false
        })
      },
    }
  }
</script>

<style scoped>

</style>