itsm-wx-repair/src/views/myModify.vue

<template>
  <div>
    <div class="label">
      {{ value.name }}
    </div>
    <cube-textarea
      v-model="value.value"
      :placeholder="'请输入你的' + value.name"
    ></cube-textarea>
    <div class="chehui">
      <div class="btn" @click="sub()">保&nbsp;存</div>
    </div>
    <promp-ting
      :conents="promptingConent"
      :status="promptingStatus"
    ></promp-ting>
  </div>
</template>
<script>
import PrompTing from "./../views/prompting.vue";
export default {
  data() {
    return {
      loginUser: JSON.parse(localStorage.getItem("loginUser")),
      data: "",
      value: { type: "", value: "" },
      promptingConent: "",
      promptingStatus: ""
    };
  },
  methods: {
    getAddData() {
      switch (this.$route.params.data) {
        case "houseNumber":
          this.value = {
            type: "houseNumber",
            name: "详细地址",
            value: this.loginUser.houseNumber
          };
          break;
        case "phone":
          this.value = {
            type: "phone",
            name: "联系电话",
            value: this.loginUser.phone
          };
          break;
      }
    },
    sub() {
      if (!this.value.value && this.value.type == "phone") {
        this.$createDialog({
          type: "alert",
          title: "保存失败",
          content: this.value.name + "不能为空",
          icon: "cubeic-wrong"
        }).show();
      } else {
        var that = this;
        let url = "",
          postData = {};
        switch (this.value.type) {
          case "houseNumber":
            url = "service/user/updHouseNum";
            postData = {
              reqId: that.loginUser.id,
              houseNum: that.value.value
            };
            break;
          case "phone":
            url = "service/user/updPhone";
            postData = {
              reqId: that.loginUser.id,
              phone: that.value.value
            };
            break;
        }
        this.$http.post(url, postData).then(function(res) {
          if (res.status == 200) {
            that.promptingConent = "恭喜您,修改" + that.value.name + "成功!";
            that.promptingStatus = true;
            $("#fade").fadeIn();
            setTimeout(function() {
              $("#fade").fadeOut();
            }, 2000);
            that.loginUser[that.value.type] = that.value.value;
            var loginUserStr = JSON.stringify(that.loginUser);
            localStorage.setItem("loginUser", loginUserStr);
            that.dialog = that
              .$createDialog({
                type: "alert",
                title: "修改成功",
                content: "点击确定返回我的信息",
                icon: "cubeic-right",
                onConfirm: (e, promptValue) => {
                  // that.$router.push({ path: "/main/my" });
                  that.$router.go(-1);
                }
              })
              .show();
          } else {
            that.promptingConent = "修改失败,请稍后再试!";
            that.promptingStatus = false;
            $("#fade").fadeIn();
            setTimeout(function() {
              $("#fade").fadeOut();
            }, 2000);
          }
        });
      }
    }
  },
  created() {
    this.getAddData();
  },
  mounted() {},
  components: {
    PrompTing
  }
};
</script>
<style scoped>
.label {
  background-color: rgb(238, 238, 238);
  height: 0.6rem;
  line-height: 0.6rem;
  padding-left: 0.24rem;
  font-size: 0.24rem;
  color: #666666;
}
.chehui {
  height: 1.3rem;
  width: 100%;
  border-top: 0.01rem rgb(223, 222, 222) solid;
  background-color: rgb(248, 248, 248);
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.chehui .btn {
  width: 90%;
  height: 1rem;
  background-color: #005395;
  border-radius: 10px;
  line-height: 1rem;
  color: white;
  font-size: 0.36rem;
  text-align: center;
}
</style>