uk_front/components/addAddressDialog.vue

<template>
  <div>
    <el-dialog :lock-scroll="false"
      title="Add address"
      :visible.sync="dialogFormVisible"
      width="700px"
    >
      <el-form :model="data" :rules="rules" ref="ruleForm">
        <el-form-item prop="country">
          <label>Country/Region</label>
          <el-input v-model="data.country"></el-input>
          <!-- <br />
          <el-cascader
            v-model="form.country"
            :options="options"
            @change="handleChange"
          ></el-cascader> -->
        </el-form-item>
        <el-form-item prop="name">
          <label>Full name</label>
          <el-input v-model="data.name"></el-input>
        </el-form-item>
        <el-form-item prop="phone">
          <label>Phone number</label>
          <el-input v-model="data.phone"></el-input>
        </el-form-item>
        <el-form-item prop="address">
          <label>Address</label>
          <el-input
            v-model="data.address"
            placeholder="Street address,P.O.box,company name,c/o"
          ></el-input>
          <!-- <el-input v-model="form.address2" placeholder="Apt,Suite,Unit,Building,Floor"></el-input> -->
        </el-form-item>
        <el-form-item prop="post_code">
          <label>Postcode</label>
          <el-input v-model="data.post_code"></el-input>
        </el-form-item>
        <el-form-item prop="city">
          <label>City/Suburb</label>
          <el-input
            v-model="data.city"
            placeholder="Choose city by suburb"
          ></el-input>
          <!-- <el-select
            v-model="data.city"
            placeholder="Choose city by suburb"
            style="width: 100%"
          >
            <el-option
              v-for="item in cityList"
              :key="item.id"
              :label="item.name"
              :value="item.name"
            >
            </el-option>
          </el-select> -->
        </el-form-item>
        <el-form-item prop="state">
          <label>State/Territory</label>
          <el-input
            v-model="data.state"
            placeholder="Choose state by territory"
          ></el-input>
          <!-- <el-select
            v-model="data.state"
            placeholder="Choose state by territory"
            style="width: 100%"
          >
            <el-option
              v-for="item in stateList"
              :key="item.id"
              :label="item.name"
              :value="item.name"
            >
            </el-option>
          </el-select> -->
        </el-form-item>
        <el-form-item prop="is_default">
          <el-checkbox v-model="data.is_default">
            Make this my default address
          </el-checkbox>
        </el-form-item>
        <el-form-item>
          <label>Delivery instruction(optional)</label>
          <div style="color: #86d4e9; line-height: 14px">
            <i class="el-icon-arrow-down" style="color: #a2a2a2"></i>
            And preferences,notes,access codes and more
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="submit('ruleForm')">Add address</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    componentVisible: {
      type: Number,
      default: 2,
    },
    data: {
      type: Object,
      default: () => {
        return {
          country: "Australia",
          name: "",
          phone: "",
          address: "",
          post_code: "",
          city: "",
          state: "",
          is_default: null,
        };
      },
    },
  },
  data() {
    return {
      value: [],
      options: [],
      rules: {
        country: [
          {
            required: true,
            message: "Please enter your country",
            trigger: "blur",
          },
        ],
        name: [
          {
            required: true,
            message: "Please enter your name",
            trigger: "blur",
          },
        ],
        phone: [
          {
            required: true,
            message: "Please enter your phone number",
            trigger: "blur",
          },
        ],
        address: [
          {
            required: true,
            message: "Please enter your address",
            trigger: "blur",
          },
        ],
        post_code: [
          {
            required: true,
            message: "Please enter post_code",
            trigger: "blur",
          },
        ],
        city: [
          { required: true, message: "Please enter city", trigger: "blur" },
        ],
        state: [
          { required: true, message: "Please enter state", trigger: "blur" },
        ],
      },
      cityList: [
        { id: 1, name: "Sydney" },
        { id: 2, name: "Adelaide Mail Centre" },
        { id: 3, name: "Melbourne" },
        { id: 4, name: "Eastern Suburbs Mc" },
        { id: 5, name: "Hobart" },
        { id: 6, name: "Perth" },
        { id: 7, name: "Launceston" },
        { id: 8, name: "Brisbane" },
        { id: 9, name: "Northern Suburbs Mc" },
        { id: 10, name: "Strawberry Hills" },
        { id: 11, name: "Springfield" },
        { id: 12, name: "Waterloo" },
        { id: 13, name: "Richmond" },
        { id: 14, name: "Haymarket" },
        { id: 15, name: "Red Hill" },
        { id: 16, name: "Brisbane GPO Boxes" },
        { id: 17, name: "Mayfield" },
        { id: 18, name: "Australia Square" },
        { id: 19, name: "Woodstock" },
        { id: 20, name: "Sydney South" },
        { id: 21, name: "The Gap" },
        { id: 22, name: "Kingston" },
        { id: 23, name: "Kensington" },
        { id: 24, name: "Darlington" },
      ],
      stateList: [
        { id: 1, name: "Australian Capital Territory" },
        { id: 2, name: "New South Wales" },
        { id: 3, name: "Northern Territory" },
        { id: 4, name: "Queensland" },
        { id: 5, name: "South Australia" },
        { id: 6, name: "Tasmania" },
        { id: 7, name: "Victoria" },
        { id: 8, name: "Western Australia" },
      ],

    };
  },
  computed: {
    dialogFormVisible: {
      get: function () {
        return this.dialogVisible;
      },
      set: function (val) {
        this.$emit("update:dialogVisible", val);
      },
    },
  },
  methods: {
    submit(ruleForm) {
      this.$refs[ruleForm].validate((valid) => {
        if (valid) {
          if (this.componentVisible == 2) {
            this.addAddress();
            if (this.$route.fullPath.includes('product-builder')) return
            this.$router.push({path:'/home/myDetail',query:{type:"third"}})
          } else if (this.componentVisible == 3) {
            this.editAddress();
            this.$router.push({path:'/home/myDetail',query:{type:"third"}})
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    addAddress() {
      this.$axios
        .post("/api/address/add", this.data)
        .then((res) => {
          if (res.code === 1) {
            this.$notify({
              title: "success",
              message: "Submitted successfully",
              type: "success",
              duration: 3000,
            });
            this.dialogFormVisible = false;
            this.update();
          }
        })
        .catch((error) => {
          this.$message.error(error.response.data.msg);
        });
    },
    editAddress() {
      this.$axios
        .post("/api/address/edit", this.data)
        .then((res) => {
          if (res.code === 1) {
            this.$notify({
              title: "success",
              message: "Submitted successfully",
              type: "success",
              duration: 3000,
            });
            this.dialogFormVisible = false;
            this.update();
          }
        })
        .catch((error) => {
          this.$message.error(error.response.data.msg);
        });
    },
    update() {
      this.$emit("update", true);
    },
  },
};
</script>

<style lang="scss" scoped>
:deep(.el-dialog) {
  .el-dialog__header .el-dialog__title {
    font-size: 24px;
    font-weight: bold;
  }
  .el-dialog__body {
    padding: 0 20px 20px;
    .el-form-item {
      margin-bottom: 0;
      .el-form-item__content {
        label {
          font-weight: 600;
        }
        .el-cascader {
          width: 100%;
        }
        .el-input {
          margin-bottom: 5px;
        }
        .el-form-item__error {
          top: 90%;
        }
      }
    }
  }
  .el-dialog__footer .dialog-footer {
    display: flex;
    justify-content: flex-start;
    .el-button {
      background: #ffd814;
    }
  }
}
</style>