<template>
  <sail-page type="loading-view" title="昵称" isHead>
    <div slot="content">
        <div class="NickName">
            <div class="weui-cells zero-top">
              <div class="weui-cell">
                    <div class="weui-cell__bd">
                        <input class="weui-input" type="text" v-model="loginInfo.nickname" placeholder="请输入昵称">
                    </div>
                </div>
            </div>
        </div>
        <van-button size="large" @click="handleNickName" :loading="registLoading" class="submit-btn">确认</van-button>
    </div>
  </sail-page>
</template>

<script>
import { mapState } from "vuex";
import sailPage from "@/components/sail-page.vue";
import { Toast } from "vant";
export default {
  components: {
    sailPage
  },
  computed: {
    ...mapState({
      loginInfo: state => state.loginModule.loginInfo
    })
  },
  data: function(){
    return {
      registLoading:false,
      user:{
        "cardCode": "string",
        "headImg": "string",
        "nickname": "娄神",
        "updateFlag": 1,
        "userName": "string"
      }
    }; 
  },
  methods: {
    handleNickName(){
      this.registLoading = true;
      this.user.cardCode = this.loginInfo.cardCode;
      this.user.headImg = this.loginInfo.headImg;
      this.user.nickname = this.loginInfo.nickname;
      this.user.userName = this.loginInfo.loginName;
      this.$store
        .dispatch("updateUserModule/updateUser", this.user)
        .then(res => {
          this.registLoading = false;
          if (res) {
            Toast.success({
              duration: 1000,
              message: "修改昵称成功"
            });
            this.$store.commit("loginModule/CHANGE_NICK_NAME", this.user.nickname);
            setTimeout(() => {
              this.$router.push({ path: "/MyPersonalInfor" }); // -> 编程式跳转
            }, 1000);
            //
          }
        });
    }
  }
};
</script>
<style lang="less">
  
</style>
<style lang="less" scoped>
  .NickName {
    margin-top: 15px;
  }
</style>