禾匠微信小程序登陆，带头像和昵称VUE修改记录

匠微信小程序登陆，带头像和昵称VUE修改记录
很多人问路径是哪里呢？
路径地址：components/basic-component/app-layout/app-user-login/app-user-login.vue

禾匠微信小程序登陆，带头像和昵称VUE修改记录-第1张图片-78模板网 - 一个分享技术、记录生活的个人技术博客
<template>
  <view
    class="login-1 dir-left-nowrap main-center cross-center"
    :class="showLoginModal ? 'show' : ''"
  >
    <view v-if="!islogin">
      <image :src="auth_page && auth_page.pic_url"></image>
      <view>
        <app-hotspot :hotspot="auth_page.hotspot_link">
          <!-- <button @click="link"></button> -->
        </app-hotspot>
      </view>
      <view>
        <app-hotspot :hotspot="auth_page.hotspot_cancel">
          <button @click="cancel"></button>
        </app-hotspot>
      </view>
      <view >
        <app-hotspot :hotspot="auth_page.hotspot">
          <!-- #ifdef MP -->
          <button
                            @click="getUserInfoClick"
                    >
        </button>
          <!-- #endif -->
          <!-- #ifdef H5 -->
          <view @click="getUserInfo"></view>
          <!-- #endif -->
        </app-hotspot>
      </view>
    </view>
<view v-if="islogin">
  <view>完善信息</view>
  <image mode="aspectFill" :src="avatarUrl==''?'../../../../static/image/user_mr.png':avatarUrl"></image>
  <button @chooseavatar="chooseAvatar" open-type="chooseAvatar">选择头像</button>
  <input id="nickname-input" type="nickname" @blur="bindblur" @input="bindinput" placeholder="请输入昵称"/>
  <view @click="wxlogin">完成</view>
</view>
  </view>
</template>
<script>
import Vue from "vue";
import { mapState } from "vuex";
import appHotspot from "../../../basic-component/app-hotspot/app-hotspot.vue";
export default {
  name: "app-user-login",
  components: {
    appHotspot,
  },
  data() {
    return {
islogin:false,
avatarUrl:'',
nickName:''
};
  },
  computed: {
    openType() {
      // #ifdef MP-ALIPAY
      return "getAuthorize";
      // #endif
      return "getUserInfo";
    },
    ...mapState("mallConfig", {
      auth_page: (state) => state.auth_page,
    }),
    ...mapState({
      showLoginModal: function (state) {
        return state.user.showLoginModal;
      },
    }),
  },
  created() {
    const vm = this;
    Vue.use({
      install(Vue, options) {
        Vue.prototype.$layout = {
          getUserInfo() {
            vm.showLoginModal = true;
            return new Promise((resolve, reject) => {
              vm.getUserInfo = (e) => {};
            });
          },
        };
      },
    });
  },
  methods: {
    link() {
      this.$store.commit("user/showLoginModal", false);
    },
chooseAvatar(e){
console.log(e);
this.avatarUrl =e.detail.avatarUrl;
let {
avatarUrl
} = e.detail;
uni.uploadFile({
url: this.$api.upload.file,
filePath: avatarUrl,
name: 'file',
header: {},
success: uploadFileRes => {
// 注意：这里返回的uploadFileRes.data 为JSON 需要自己去转换
console.log(uploadFileRes)
let data = JSON.parse(uploadFileRes.data);
console.log("updata",data);
if (data.code === 0) {
this.avatarUrl = data.data.url;
}
},
fail: (error) => {
uni.showToast({
title: error,
duration: 2000
});
},
complete: () => {
uni.hideLoading();
}
});
},
wxlogin(){
    const resolve = this.$user.getUserInfoResolve;
var that = this;
if(this.avatarUrl==''||this.avatarUrl==undefined){
uni.showToast({
title:'请选择头像',
icon:'none'
});
return false;
}
if(this.nickName==''){
uni.showToast({
title:'请输入昵称',
icon:'none'
});
return false;
}
wx.getUserProfile({
  desc: "用于完善会员资料", // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
  success: (res) => {
    wx.getUserInfo({
      success: (res2) => {
console.log(res);
var rawData = JSON.parse(res.rawData);
console.log("rawData",rawData);
rawData.nickName = that.nickName;
rawData.avatarUrl = that.avatarUrl;
var rawDatas = JSON.stringify(rawData);
res2.rawData = rawDatas;
console.log(rawDatas);
        let ob = {
          detail: res2,
        };
        resolve(ob);
      },
      fail: (res2) => {},
    });
  },
  fail: (res) => {
    console.log("fail", res);
  },
});
},
    cancel() {
      this.$store.commit("user/showLoginModal", false);
      this.$user.getUserInfoReject("getUserInfo fail: cancel.");
      let pages = getCurrentPages();
      let list = ["/pages/index/index", "/pages/user-center/user-center"];
      // #ifdef MP
      let url = this.$platDiff.route();
      // #endif
      // #ifdef H5
      let { hash } = window.location;
      hash = hash.split("#")[1];
      let url = hash;
      if (url === "/") {
        url = "/pages/index/index";
      }
      // #endif
      if (list.includes(url)) {
        // #ifdef MP
        url = this.$platDiff.routeWithOption();
        // #endif
        // #ifdef H5
        url = window.location.hash;
        // #endif
        uni.redirectTo({
          url: url,
        });
      } else if (pages.length >= 2) {
        uni.navigateBack({
          delta: 1,
        });
      } else {
        uni.redirectTo({
          url: "/pages/index/index",
        });
      }
    },
    // #ifdef MP
    getUserInfoClick(e) {
console.log(e);
//return false;
      // #ifdef MP-WEIXIN
       this.islogin = !this.islogin;
      // #endif
      // #ifdef MP-TOUTIAO
      this.getUserInfo(e);
      // #endif
    },
    // #endif
bindblur(e) {
this.nickName = e.detail.value; // 获取微信昵称
},
bindinput(e){
this.nickName = e.detail.value; //这里要注意如果只用blur方法的话用户在输入玩昵称后直接点击保存按钮，会出现修改不成功的情况。
},
    getUserInfo(e) {
      // #ifdef H5
      if (this.$jwx.isWechat()) {
        this.$request({
          url: this.$api.registered.url,
          method: "get",
          data: {
            scope: "snsapi_userinfo",
            response_type: "code",
            url: `${window.location.href}`,
          },
        }).then((res) => {
          if (res.code === 0) {
            this.$storage.setStorageSync("_USER_SIGN", true);
            window.location.replace(res.data.url);
          } else {
            uni.navigateTo({
              url: "/pages/registered/sign",
            });
          }
        });
      } else {
        uni.navigateTo({
          url: "/pages/registered/sign",
        });
      }
      // #endif
      // #ifdef MP
      this.$store.commit("user/showLoginModal", false);
      const resolve = this.$user.getUserInfoResolve;
      const reject = this.$user.getUserInfoReject;
      this.$event.on(this.$const.EVENT_USER_LOGIN, true).then(() => {
        this.$jump({
          open_type: "reload",
        });
      });
      // #ifdef MP-WEIXIN
      // if (e.detail.errMsg !== 'getUserInfo:ok') {
      //     this.$store.commit('user/showLoginModal', true);
      //     return reject(e.detail.errMsg);
      // } else {
      //     return resolve(e);
      // }
      // #endif
      // #ifdef MP-ALIPAY
      my.getOpenUserInfo({
        success(openUserInfo) {
          const response = JSON.parse(openUserInfo.response);
          e.detail = {
            rawData: JSON.stringify(response.response),
            encryptedData: "",
            iv: "",
            signature: "",
          };
          return resolve(e);
        },
        fail(failE) {
          console.log("getOpenUserInfo:", failE);
        },
      });
      // #endif
      // #ifdef MP-BAIDU
      e.detail.rawData = JSON.stringify(e.detail.userInfo);
      e.detail.encryptedData = "";
      e.detail.iv = "";
      e.detail.signature = "";
      return resolve(e);
      // #endif
      // #ifdef MP-TOUTIAO
      uni.login({
        success() {
          uni.getUserInfo({
            success(result) {
              e.detail = {
                rawData: result.rawData,
                encryptedData: "",
                iv: "",
                signature: "",
              };
              return resolve(e);
            },
            fail(e) {
              console.log("getUserInfo fail:", e);
            },
          });
        },
        fail(e) {
          console.log("login fail:", e);
        },
      });
      // #endif
      // #endif
    },
    // #ifdef H5
    getUrlParam(name) {
      let url = window.location.href.split("#")[0];
      let search = url.split("?")[1];
      if (search) {
        let r = search
          .substr(0)
          .match(new RegExp("(^|&)" + name + "=([^&]*)(&|$)"));
        if (r !== null) return unescape(r[2]);
        return null;
      } else {
        return null;
      }
    },
    // #endif
  },
};
</script>
<style scoped>
$login-padding: #{200rpx} #{50rpx};
.shopping{
height: 900rpx;
width: 100%;
border-radius: 30rpx;
background: #fff;
padding: 50rpx 30rpx;
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
}
.shopping .pop_title{
    text-align: center;
    font-size: 32rpx;
    font-weight: 700;
    color: #333;
}
.shopping .user_img{
    margin-top: 30rpx;
    width: 170rpx;
    height: 170rpx;
    border-radius: 50%;
}
.shopping .buttons {
    padding: 0rpx;
    width: 200rpx;
    height: 68rpx;
    background: rgba(0,0,0,.2);
    border-radius: 36rpx;
    font-size: 28rpx;
    color: #fff;
    line-height: 68rpx;
    margin-top: 10rpx;
}
.shopping .ipt{
    width: 500rpx;
    height: 70rpx;
    background: #f2f2f2;
    border-radius: 35rpx;
    font-size: 28rpx;
    margin-top: 50rpx;
    padding: 0rpx 20rpx;
    box-sizing: border-box;
}
.shopping .submit_box{
width: 400rpx;
height: 100rpx;
background: #ff4544;
border-radius: 50rpx;
font-size: 32rpx;
color: #fff;
text-align: center;
line-height: 100rpx;
margin-top: 200rpx;
}
.login-1 {
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  padding: $login-padding;
  visibility: hidden;
  opacity: 0;
  transition: opacity 200ms;
  .login-btn {
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
    padding: 0;
  }
  .login-content {
    position: relative;
    width: #{650rpx};
    height: #{700rpx};
  }
  .login-img {
    width: #{650rpx};
    height: #{700rpx};
  }
}
.login-1.show {
  visibility: visible;
  opacity: 1;
}
</style>