smart-admin/rc-busness/components/address.vue

<template>
  <div>
    <div class="usercontend">
      <div class="rc-max-width--xl">
        <h2>{{ title }}</h2>
        <div class="rc-max-width--xl rc-people">
          <span>收货人:</span>
          <input
            type="text"
            placeholder="请输入收货人姓名"
            v-model="userpeople"
          />
        </div>
        <div class="rc-max-width--xl rc-phone">
          <span>手机号码:</span>
          <input
            type="text"
            placeholder="请输入11位手机号码"
            v-model="tel"
            :error-message="usertel"
          />
        </div>
        <div class="rc-max-width--xl rc-address">
          <span>所在地区:</span>
          <!-- <input type="text" placeholder="请选择所在地区"> -->
          <addressInput
            @getmenu="onGetMenu"
            @closeDialog="handleClose1"
            :dialogInfo1="dialogInfo1"
            :defaultValues="defaultValues"
          ></addressInput>
        </div>
        <div class="rc-max-width--xl rc-useaddress">
          <span>详细地址:</span>
          <!-- <input
            type="text"
            placeholder="小区、门牌号等"
            class="userinput"
           
          /> -->
          <textarea
            rows="10"
            v-model="alladdress"
            cols="30"
            placeholder="请输入详细地址"
          ></textarea>
        </div>
      </div>
    </div>
    <div class="rc-button">
      <span @click="openclose()">取消</span>
      <em @click="register()">确认</em>
    </div>
    <!-- <div class="rc-button">
      <div class="rc-footbutton" @click="onAdd()">
        <span>新增收货地址</span>
      </div>
    </div> -->
  </div>
</template>

<script>
import addressInput from "~/components/addressInput.vue";
import { memberAddress } from "../ajax/getData";
export default {
  data() {
    return {
      title: "新增收货地址",
      defaultValues: [],
      chosenAddressId: "1",
      usermessage: null,
      checked: true,
      tel: "",
      id: "",
      alladdress: "",
      userid: null,
      usermessage: null,
      dialogInfo1: false,
      userpeople: "",
      provinceId: "",
      cityId: "",
      districtId: "",
      list: [
        {
          id: 1,
          name: "张三",
          tel: "13000000000",
          address: "浙江省杭州市西湖区文三路 138 号",
          isDefault: true,
        },
        {
          id: 2,
          name: "李四",
          tel: "1310000000",
          address: "浙江省杭州市拱墅区莫干山路 50 号",
        },
        {
          id: 3,
          name: "李四",
          tel: "1310000000",
          address: "浙江省杭州市拱墅区莫干山路 50 号",
        },
      ],
    };
  },
  props: ["editAddressData"],
  methods: {
    onGetMenu(values) {
      // console.log(values, +"111111");
      // let user = values[2].id;
      // user = user.split("-");

      if (this.id == "") {
        this.provinceId = values[0].id;
        this.cityId = values[1].id;
        this.districtId = values[2].id;
      } else {
        let user = values[2].id;
        user = user.split("-");
        this.provinceId = user[0];
        this.cityId = user[1];
        this.districtId = user[2];
      }
    },
    handleClose1() {
      this.dialogInfo1 = false;
    },

    register() {
      console.log(this.tel);
      if (!/^[1][3,4,5,7,8][0-9]{9}$/.test(this.tel) || this.tel === "") {
        this.$message({
          type: "warning",
          message: "手机号码输入有误",
        });
        return;
      } else if (this.alladdress === "") {
        this.$message({
          type: "warning",
          message: "请输入详细地址",
        });
        return;
      } else if (this.userpeople === "") {
        this.$message({
          type: "warning",
          message: "请输入姓名",
        });
        return;
      } else if (this.provinceId === "") {
        this.$message({
          type: "warning",
          message: "请选择省区",
        });
        return;
      } else if (this.cityId === "") {
        this.$message({
          type: "warning",
          message: "请选择市区",
        });
        return;
      } else if (this.districtId === "") {
        this.$message({
          type: "warning",
          message: "请选择详细的区域",
        });
        return;
      } else {
        this.editaddress();
      }
    },
    openclose() {
      this.$emit("isClose", false);
    },

    //添加
    async editaddress(item) {
      let useradd = {
        memberId: this.userid,
        detailAddress: this.alladdress,
        recipient: this.userpeople,
        recipientPhone: this.tel,
        provinceId: this.provinceId,
        cityId: this.cityId,
        districtId: this.districtId,
      };
      if (this.id != "") useradd["id"] = this.id;
      let saveType = this.editAddressData.saveType ? "update" : "add";
      let res = await memberAddress(saveType, useradd);
      if (res.msg == "SUCCESS") {
        let typemess = saveType == "update" ? "修改地址成功" : "地址添加成功";
        this.$message({
          type: "warning",
          message: typemess,
        });
        this.$emit("isClose", false);
      } else {
        this.$message({
          type: "warning",
          message: res.msg,
        });
      }
    },

    editInfo() {
      if (this.editAddressData.saveType == "edit") {
        this.title = "修改收货地址";
        this.tel = this.editAddressData.tel;
        this.alladdress = this.editAddressData.detailAddress;
        this.userid = this.editAddressData.memberId;
        this.userpeople = this.editAddressData.name;
        this.provinceId = this.editAddressData.provinceId;
        this.cityId = this.editAddressData.cityId;
        this.districtId = this.editAddressData.districtId;
        this.defaultValues = [
          {
            id: this.provinceId,
            name: this.editAddressData.provinceName,
          },
          {
            id: this.cityId,
            name: this.editAddressData.cityName,
          },
          {
            id: this.districtId,
            name: this.editAddressData.districtName,
          },
        ];
      }
    },
  },
  components: {
    addressInput,
  },
  computed: {
    usertel() {
      if (this.tel === "") {
        return "";
      } else if (!/^[1][3,4,5,7,8][0-9]{9}$/.test(this.tel)) {
        return "手机号格式错误";
      } else {
        return "";
      }
    },
  },
  created() {
    this.title =
      this.editAddressData.saveType == "edit" ? "修改收货地址" : "新增收货地址";
    this.tel = this.editAddressData.tel;
    this.alladdress = this.editAddressData.detailAddress;
    this.userid = this.editAddressData.memberId;
    this.userpeople = this.editAddressData.name;
    this.provinceId = this.editAddressData.provinceId;
    this.cityId = this.editAddressData.cityId;
    this.districtId = this.editAddressData.districtId;
    this.defaultValues = [
      {
        id: this.provinceId,
        name: this.editAddressData.provinceName,
      },
      {
        id: this.cityId,
        name: this.editAddressData.cityName,
      },
      {
        id: this.districtId,
        name: this.editAddressData.districtName,
      },
    ];
  },
  mounted() {
    this.usermessage = JSON.parse(localStorage.getItem("userInfo"));
    this.userid = this.usermessage.data.id;
    this.id = this.editAddressData.id;
  },
};
</script>

<style lang="less" scoped >
@import url("../assets/css/global.less");
@import url("../assets/css/addaddress.less");
</style>