<template>
  <view class="changeNickname">
    <view class="bg">
      <image
        class="bgImg"
        src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/HomeBackground.png"
        mode="scaleToFill"
      />
    </view>
    <view class="Return" @click="onBack">
      <image
        class="ReturnImg"
        src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Return.png"
        mode="scaleToFill"
      />
    </view>
    <view class="title">修改昵称</view>
    <view class="contentbox">
      <view class="content">
        <!--  -->
        <input
          type="nickname"
          class="weui-input"
          placeholder="请输入昵称"
          @blur="inputName"
          v-model="name"
        />
        <!--  -->
        <view class="btn" @click="onSubmit">确认修改</view>
      </view>
    </view>
  </view>
</template>

<script>
import { goEasylogin, goEasylogout } from "../../../components/goEasyTool/tool.js";
import request from "../../../components/request.js";
export default {
  data() {
    return {
      name: "",
      id: "",
    };
  },
  onLoad(options) {
    // 页面加载时执行
    this.name = options.name;
    this.id = options.id;
  },
  methods: {
    // 提交修改
    onSubmit() {
      if (this.name.trim() === "") {
        wx.showToast({
          title: "昵称不能为空",
          icon: "none",
          duration: 1000,
        });
        return;
      }
      uni.showLoading({
        title: "修改中...",
        mask: true,
      });
      goEasylogout(this.$goeasy);
      request({
        url: "user/updateUserInfo",
        method: "POST",
        data: {
          id: this.id,
          nickName: this.name,
        },
        userInfo: true,
      }).then((ress) => {
        console.log("修改调用返回", ress);
        if (ress.code === 200) {
          uni.showToast({
            title: "修改成功",
            icon: "success",
          });
          uni.setStorageSync("userinfo", ress.data);
          goEasylogin(
            this.$goeasy,
            String(ress.data.id),
            ress.data.headerIcon,
            ress.data.nickName
          );
          uni.hideLoading();
          //```````````````````````````````````````````````````````````````````````登录成功后跳转回原页面 或 首页
          uni.navigateBack({
            delta: 1,
          });
          //````````````````````````````````````````````````````````````````````
        } else {
          uni.hideLoading();
          uni.showToast({
            title: ress.msg,
            icon: "none",
          });
        }
      });
    },
    // 输入昵称
    inputName(e) {
      this.name = e.detail.value;
    },
    // 返回上一页
    onBack() {
      wx.navigateBack({
        delta: 1,
      });
    },
  },
};
</script>

<style scoped>
.bg {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: -1;
}
.bgImg {
  width: 100%;
  height: 100%;
}
.Return {
  position: fixed;
  left: 35rpx;
  top: 120rpx;
  width: 46rpx;
  height: 46rpx;
  z-index: 2;
}
.title {
  position: fixed;
  top: 120rpx;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 34rpx;
  color: #100e0f;
  font-weight: bold;
  z-index: 1;
}
.ReturnImg {
  width: 100%;
  height: 100%;
}
.contentbox {
  position: absolute;
  top: 200rpx;
  left: 0rpx;
  right: 0rpx;
  bottom: 0rpx;
}
.content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.weui-input {
  width: 80%;
  height: 80rpx;
  margin-top: 40rpx;
  border-bottom: 1px solid #ccc;
}
.btn {
  width: 80%;
  height: 80rpx;
  margin-top: 50rpx;
  background: linear-gradient(135deg, #00afb2, #4fcacd);
  color: #fff;
  text-align: center;
  line-height: 80rpx;
  border-radius: 40rpx;
  font-size: 30rpx;
  border: none;
  cursor: pointer;
}
</style>
