app-AgricultureSmart/uniapp/components/my-login/my-login.vue

<template>
  <view class="container">
<!--  背景  -->
<!--    <image src="/static/home/BG.jpg" style="position: absolute;height: 100px;width: 96%;left: 2%" @load="loadImg($event)"></image>-->
<!--    <img src="../../static/home/BG.jpg" class="myImg" alt="">-->
    <view>
      <!-- <van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png"  size="130px"/> -->
      <!-- <uni-icons type="contact-filled" size="100" color="#AFAFAF"></uni-icons> -->
      <!-- <button type="primary" class="btn-login" @click="getUserProfile">一键登录</button> -->
      <!-- <text class="tips-text">登录后尽享更多权益</text> -->
      <!--        <image class="avatar" :src="avatarUrl"></image>-->
      <button @click="test" open-type="login" type="primary">
        去登录界面按钮
      </button>
      <button @click="toLogin" type="primary">按钮新的</button>
      <button @click="test" type="default">获取用户信息</button>
<!--      <input type="nickname" class="weui-input" placeholder="请输入昵称"/>-->
    </view>

  </view>
</template>

<script>
const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'

import {mapMutations,mapActions} from "vuex"
export default {
  name:"my-login",
  data() {
    return {
      avatarUrl: defaultAvatarUrl,
    };
  },
  methods: {
    ...mapMutations('m_user',{updateUserInfo : 'updateUserInfo'}),
    ...mapMutations('m_user',{updateToken:'updateToken'}),
    // ...mapActions('m_info',{updateLoggedStatus:"updateLoggedStatus"}),
    test(){
      // console.log('test')
      // console.log()
    },
    // 获取用户信息的方法
    getUserInfo(e){
      console.log(e);
      // return
    },
    getUserProfile(){

      uni.getUserProfile({
        desc: '获取你的昵称、头像、地区及性别',
        lang:'zh_CN',
        success:res=>{
          console.log(res.userInfo,"aaa");
          console.log('更新');
          this.updateUserInfo(res.userInfo)
          this.updateLoggedStatus(true)
          this.getToken(res)
        },
        fail: (e) => {
          return uni.$showMsg('您取消了登录授权')
        }
      })

    },
    async getToken(info){
      this.updateToken('Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1aWQiOjIzLCJpYXQiOjE1NjQ3MzAwNzksImV4cCI6MTAwMTU2NDczMDA3OH0.YPt-XeLnjV-_1ITaXGY2FhxmCe4NvXuRnRB8OMCfnPo')
      // this.updateToken('eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJhdWQiOiIxLUFETUlOIiwiZXhwIjoxNzM5MDk4Njc4fQ.AY9lfdw6dySsEd7TCCS9POx69OyH3Jpm1at0xOq6H8o')

      uni.showToast({
        title: '登录成功',
        icon: 'success',
        duration: 2000
      });
      this.navigateBack()
    },
    navigateBack(){
      if(this.redirectInfo&&this.redirectInfo.openType==='switchTab'){
        uni.switchTab({
          url:this.redirectInfo.from,
          complete: () => {
            this.upddateRedirectInfo(null)
          }
        })
      }
    },
    toLogin(){
      console.log('toLogin')
      let self =this
      uni.navigateTo({
        url: '/subpkg/login/login' ,// 跳转至 subpkg 中的 selShop 页面
        success() {
          console.log('url跳转成功')
          setTimeout(() => {
            self.getToken();

          }, 500); // 延迟 1000 毫秒（即 1 秒）后调用 getToken() 函数
        },
        fail() {
          console.log('url跳转失败')
        }
      });
    },
    onChooseAvatar(e) {
      const { avatarUrl } = e.detail
      // this.setData({
      //   avatarUrl,
      // })
      this.avatarUrl=avatarUrl
      console.log('少时诵诗书少时诵诗书是撒是撒是撒是撒是撒是撒是撒是撒是撒')
      // return
    }
  },created() {
    console.log('页面created执行')
  },
  beforeUpdate() {
    console.log('页面beforeUpdate执行')
  },
  mounted() {
    console.log('页面mounted执行')
  },
}


// export default {
//   data() {
//     return {};
//   },
//   // mounted () {
//   //   console.log('加载中')
//   //   //开启加载
//   //   console.log('加载中')
//   //   uni.showLoading({
//   //     title: '加载中...',
//   //     mask: true
//   //   })
//   // },
//   methods: {
//     created() {
//       console.log('页面created执行:',this.num);
//     },
//     beforeMount() {
//       console.log('页面beforeMount执行:',this.num);
//     },
//     // 此方法会在图片加载完成后触发
//     loadImg (e) {
//       uni.hideLoading()
//       console.log('图片信息', e)
//     }
//     }
// }
</script>

<style lang="scss">
//.container{
//  //display: flex;
//  .myImg{
//    //border-image-width: 80px;
//    width: 100px;
//    //height: 100vh;
//  }
//}

.login-container{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 750rpx;
  background-color: #f8f8f8;
  position: relative;
  overflow: hidden;
  &::after{
    content: ' ';
    display: block;
    width: 100%;
    height: 40px;
    background-color: white;
    position: absolute;
    bottom: 0;
    left: 0;
    border-radius: 100%;
    transform: translateY(50%);
  }
  .btn-login{
    width: 90%;
    border-radius: 100px;
    margin: 15px 0;
    background-color: #c00000;
  }
  .tips-text{
    font-size: 12px;
    color: gray;
  }
}
</style>