nanhuashi_applet/pages/my/index.vue

<template>
	<div class="content">
    <u-navbar
        title="南华禅寺灯会云游"
        @rightClick="rightClick"
        :autoBack="true" >
        </u-navbar>
    <div class="avatarUrl">
      <button class="but" type="balanced" open-type="chooseAvatar" @chooseavatar="onChooseavatar">
        <img :src="userInfo.avatarUrl" class="refreshIcon"></img>
      </button>
    </div>
    <div class="userName">
      <text>昵称：</text>
      <input style="    text-align: left;width: 100px" :clearable="false" type="nickname" class="weui-input" :value="userInfo.nickName" @blur="bindblur"
        placeholder="请输入昵称" @input="bindinput" />
    </div>		<view class="fixed bottom-48 w-full text-center">
      <view  class="absolute" style="left: calc(50% - 112px);bottom: 100px">
        <u--image src="https://4dscene.4dage.com/new4dkk/deng/static/img/btn_enter@2x.png" width="224px" height="55px"></u--image>
      </view>
			<view class="butText text-center" @click="handleHome">退出登录</view>
		</view>
    <tabbar ref="tabbar" />
	</div>
</template>

<script>
// import uButton from "uview-ui/components/u-button/u-button.vue";
import tabbar from "components/tabbar/index.vue";
import { userInfo, updateWxUser, logout } from "@/common/api.js";
// import uNavbar from "uview-ui/components/u-navbar/u-navbar.vue";
import { mapState } from "vuex";
export default {
  components: {
    tabbar,
    // uButton
    // uNavbar
  },
  data() {
    return {
      title: "Hello World",
      avatarUrl: "",
      userName: "",
      show: false,
    };
  },
  computed: {
    ...mapState(["userInfo"]),
  },
  onLoad(e) {
    console.log(e, "onChooseAvatar");
    let that = this;
    this.$store.commit("changeUseinf", userInfo);
    userInfo({}).then((res) => {
      // uni.$u.toast("登录成功");
      // state.token = res.token;
    });
    if (e.scanCode) {
      //进入扫码
      that.$refs.tabbar.handleItem({name: "扫码打卡"}, 4)
      // uni.scanCode({
      //   onlyFromCamera: true,
      //   success: function (res) {
      //     console.log("条码类型：" + res.scanType);
      //     console.log("条码内容：" + res.result, that.$refs.tabbar);
      //     that.$refs.tabbar.show = true;
      //     // that.$store.commit("changeActive", index);
      //   },
      //   fail: function (e) {
      //     console.log("扫码失败", e, that.$refs.tabbar.show);
      //     // this.$store.commit("changeActive", 4);
      //     that.$refs.tabbar.show = true;
      //   },
      // });
    }
  },
  // // 在小程序的JS文件中定义接口
  // wx.miniProgram.onMessageToH5 = function (event) {
  //   console.log('收到来自H5页面的消息：', event.data);
  //   // 在这里处理接收到的消息
  // },
  methods: {
    onChooseavatar(e) {
      console.log(e, "onChooseAvatar");
      this.avatarUrl = e.detail.avatarUrl;
      this.upload_file(e.detail.avatarUrl);
    },
    upload_file(e) {
      wx.showLoading({
        title: "上传中",
      });

      let self = this;
      wx.uploadFile({
        url: "https://sit-nanhuacs.4dage.com/api/wx/upload",
        filePath: e, //图片路径
        name: "file",
        header: {
          "Content-Type": "multipart/form-data",
          token: uni.getStorageSync("token"),
        },
        formData: {
          type: "img",
        },
        success: function (a) {
          let res = a.data;
          res = JSON.parse(res);
            console.log(res, "data");
          if (res.code == 0) {
            const { data } = res;
            let avatarUrl = 'https://sit-nanhuacs.4dage.com' + data.filePath;
            self.avatar = 'https://sit-nanhuacs.4dage.com' + data.filePath;
            self.cdnUrl = 'https://sit-nanhuacs.4dage.com' + data.filePath;
            updateWxUser({ ...self.userInfo, avatarUrl: avatarUrl }).then((res) => {
              console.log(res);
              self.$store.commit("changeUseinf", userInfo);
              // if (res.code == 0) {
              //   uni.$u.toast("修改成功");
              // } else {
              //   uni.$u.toast("修改失败");
              // }
            });
          }

          wx.hideLoading();
          wx.showToast({
            title: "上传成功",
            icon: "success",
            duration: 3000,
          });
        },
        fail: function (a) {
          wx.hideLoading();
          wx.showToast({
            title: "上传失败",
            icon: "none",
            duration: 3000,
          });
        },
      });
    },
    bindblur(e) {
      console.log(e);
      let userName = e.detail.value;
      updateWxUser({ ...this.userInfo,nickName: userName}).then((res) => {
        this.$store.commit("changeUseinf", userInfo);
        console.log(res);
      });
    },
    bindinput(e) {
      console.log(e);
     },
    savaInfo() {
      let that = this;
      updateWxUser({ ...this.userInfo,nickname: this.userName, avatarUrl: this.avatar }).then((res) => {
        console.log(res);
      });
    },
    handleHome() {
      console.log("开启云上观灯", uni);
      logout().then((res) => {
        uni.$u.route("/pages/home/index");
      });
    },
    close() {
      this.show = false;
      // console.log('close');
    },
    open() {
      // this.show = false;
    },
  },
};
</script>

<style lang="scss">
.content {
  width: 100%;
  height: 100vh;
  position: relative;
  background: url(https://4dscene.4dage.com/new4dkk/deng/static/img/bg03@2x.png)
    100% 100% no-repeat;
  background-size: cover;
  .userName {
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .avatarUrl {
    width: 126px;
    height: 126px;
    box-shadow: 0px 4px 9px 0px rgba(0, 0, 0, 0.25);
    border-radius: 0px 0px 0px 0px;
    border: 5px solid #ffffff;
    border-radius: 50%;
    margin: 146px auto 40px auto;
    .but {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      padding: 0;
      .refreshIcon {
        width: 100%;
        border-radius: 50%;
        height: 100%;
      }
    }
  }

  .butText {
    font-weight: 400;
    font-size: 24px;
    color: #ffffff;
    line-height: 36px;
    text-shadow: 0px 0px 8px #fff9b1, 0px 0px 27px #fff9b1, 0px 0px 4px #d86332;
    font-style: normal;
    text-transform: none;
    position: relative;
    top: -110px;
    z-index: 10;
  }
}
</style>