<template>
  <div class="container">
    <div class="weiquanlist">
      <div class="weiquanitem flextwo">
        <div class="weiguitou flexone">
          <div class="left">用户头像</div>
          <!--  @click="chooseImage" -->
        </div>

        <div class="flexone">
          <div class="right rightavatar">
            <input
              type="file"
              class="shangtu"
              accept="image/*"
              @change="afterRead"
            />
            <img
              :src="avatar == '' ? '../../static/headtou.png' : avatar"
              class="avator"
              alt=""
            />
          </div>
          <img src="../../../assets/youjiantou.png" alt="" class="youjian" />
        </div>
      </div>
      <div class="weiquanitem flextwo">
        <div class="weiguitou flexone">
          <div class="left">昵称</div>
        </div>

        <div class="nameitemright flexone">
          <div class="nameitemk">
            <input type="text" placeholder="请输入昵称" v-model="nickname" />
          </div>
          <!-- <img src="../../../assets/youjiantou.png" alt="" class="youjian" /> -->
        </div>
      </div>
      <div class="weiquanitem flextwo">
        <div class="weiguitou flexone">
          <div class="left">地址</div>
        </div>
        <div class="nameitemright flexone">
          <div class="nameitemk">
            <input type="text" placeholder="请输入地址" v-model="address" />
          </div>
          <!-- <img src="../../../assets/youjiantou.png" alt="" class="youjian" /> -->
        </div>
      </div>
     
      <!-- <div class="weiquanitem flextwo">
        <div class="weiguitou flexone">
          <div>性别</div>
          <div class="nameitem">女</div>
        </div>
        <img src="../../../assets/youjiantou.png" alt="" class="youjian" />
      </div>
      <div class="weiquanitem flextwo">
        <div class="weiguitou flexone">
          <div>年龄</div>
          <div class="nameitem">23</div>
        </div>
        <img src="../../../assets/youjiantou.png" alt="" class="youjian" />
      </div>
      <div class="weiquanitem flextwo">
        <div class="weiguitou flexone">
          <div>生日</div>
          <div class="nameitem">11月30日</div>
        </div>

        <img src="../../../assets/youjiantou.png" alt="" class="youjian" />
      </div>
      <div class="weiquanitem flextwo">
        <div class="weiguitou flexone">
          <div>星座</div>
          <div class="nameitem">射手座</div>
        </div>

        <img src="../../../assets/youjiantou.png" alt="" class="youjian" />
      </div> -->
    </div>
    <div class="tuichu" @click="save">保存</div>
    <van-loading type="spinner" color="#1989fa" v-if="cardzheng" />
  </div>
</template>

<script>
import Vue from "vue";
import { Toast, Uploader, Loading } from "vant";
import "vant/lib/index.css";
Vue.use(Loading);
Vue.use(Toast);
Vue.use(Uploader);
export default {
  data() {
    return {
      avatar: '',
      cardzheng: false,
      nickname: '',
      address: ''
    }
  },
  created() {
    this.avatar = localStorage.getItem("avatar")
    this.address = localStorage.getItem("address")
    this.nickname = localStorage.getItem("nickname")
  },
  methods: {
    // 上传图片
    afterRead(e) {
      console.log(e);
      let file = e.target.files[0];
      let that = this;
      that.cardzheng = true;

      var formdata = new FormData();
      formdata.append("file", file);

      var url = "/api/common/upload";
      let param = {
        id: 1
      };

      that.$uploadFile
        .post(url, formdata)
        .then(function (res) {
          that.cardzheng = false;
          console.log(res);
          that.cardzheng = false;
          let url = "https://app.chinesenooddles.com" + res.data.url;
          that.avatar = url;
          console.log(that.avatar)
          that.chuanimage = res.data.url;
        })
        .catch(err => {
          console.log(err);
        });
    },
    save() {
      let that = this;
      if (that.avatar == '') {
        Toast("请上传头像")
        return false
      }
      if (that.nickname == '') {
        Toast("请输入昵称")
        return false
      }
      var url = '/api/member/update_user';
      var params = {
        avatar: that.avatar,
        nickname: that.nickname,
        address: that.address
      }
      console.log('7766554', params)
      that.$axios.post(url, params).then((res) => {
        console.log(res);
        Toast("提交成功")

        setTimeout(function () {
          that.$router.go(-1)
        }, 1500)


      }).catch((err) => {
        console.log(err)

      })
    }
  }
};
</script>
<style scoped>
@import "../../style/homepage.css";
.van-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99;
}
.avator {
  width: 0.92rem;
  height: 0.92rem;
  border-radius: 50%;
  /* margin-left: 0.2rem; */
}

.left {
  width: 1.3rem;
}
.nameitemk {
  flex: 1;
  margin-right: 0.2rem;
  color: #191919;
  font-size: 0.28rem;
}
.nameitemk input {
  text-align: right;
  width: 100%;
}
.nameitemright {
  flex: 1;
}
.rightavatar {
  position: relative;
  margin-right: 0.2rem;
}
.shangtu {
  width: 0.78rem;
  height: 0.78rem;
  position: absolute;
  left: 0;
  top: 0;
  background: transparent;
  border: none;
  outline: none;
  opacity: 0;
}
</style>