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

<template>
  <div>
    <ul class="address">
      <li>
        <span>收货人:</span>
        <input
          type="text"
          placeholder="请输入收货人姓名"
          v-model="userpeople"
        />
      </li>
      <li>
        <span>手机号码:</span>
        <input
          type="text"
          placeholder="请输入11位手机号码"
          v-model="tel"
          :error-message="usertel"
        />
      </li>
      <li>
        <span>所在地区:</span>
        <addressInput
          @getmenu="onGetMenu"
          @closeDialog="handleClose1"
          :dialogInfo1="dialogInfo1"
          :defaultValues="defaultValues"
        ></addressInput>
      </li>
      <li>
        <span>详细地址:</span>
        <textarea v-model="alladdress" placeholder="请输入详细地址"></textarea>
      </li>
    </ul>
    <div class="btn_cont">
      <span class="btn1" @click="openclose()">取消</span>
      <span class="btn2" @click="register()">确认</span>
    </div>
  </div>
</template>

<script>
import addressInput from "~/components/addressInput.vue";
import { memberAddress } from "../ajax/getData";
import { mapState } from 'vuex';
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: "",
    };
  },
  props: ["editAddressData"],
  methods: {
    onGetMenu(values) {
      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() {
      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.alladdress === "") {
        this.$message({
          type: "warning",
          message: "请输入详细地址",
        });
        return;
      } else if (!this.userpeople || 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,
        });
      }
    },
  },
  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 "";
      }
    },
	...mapState({
		userInfo : state => state.user.userInfo,
	})
  },
  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.usermessage = this.userInfo;
    this.userid = this.usermessage.id;
    this.id = this.editAddressData.id;
  },
};
</script>

<style lang="less" scoped >
.address {
  text-align: left;
  font-size: 16px;
  color: 333333;
  li {
    display: flex;
    padding: 8px;
    span {
      display: block;
      width: 110px;
      font-weight: bold;
      margin-top: 12px;
    }
  }
  input {
    width: 100%;
    height: 45px;
    border: 1px solid #808285;
    color: #999999;
    font-size: 16px;
    padding-left: 16px;
  }
  textarea {
    width: 100%;
    border: 1px solid #808285;
    color: #999999;
    font-size: 16px;
    padding: 8px 0 0 16px;
    height: 118px;
  }
  .ts-area-picker-containe {
    width: 100%;
  }
}
.btn_cont {
  text-align: center;
  padding: 20px;
}
.btn1,
.btn2 {
  padding: 10px 62px;
  display: inline-block;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  border-radius: 30px;
  margin: 0 20px;
}
.btn1 {
  border: 2px solid #e2001a;
  color: #e2001a;
}
.btn2 {
  background: #e2001a;
  color: #ffffff;
}
//手机端
@media screen and (max-width: 768px) {
  .btn1,
  .btn2 {
    padding: 10px 32px;
    margin: 0 10px;
  }
  .address {
  input {
    border-top: none;
    border-left: none;
    border-right: none;
  }
  textarea {
    border-top: none;
    border-left: none;
    border-right: none;
    height: 38px;
  }
  }
}
</style>