xmhjc-applet/pages/myinfo/myinfo.vue

<template>
  <view class="myinfo">
    <!-- 顶部信息 -->
    <view class="myinfo_top">
      <view @click="tologin()" class="userImg">
        <u--image width='128rpx' height="128rpx" :src="myinfo.img" shape="circle"></u--image>
      </view>  
      <view @click="tologin()" class="myinfo_text">
        <view class="myinfo_name">
          <text class="userName" >{{myinfo.name}}</text>
          <!-- <view class="myinfo_id">
            id：{{myinfo.id}}
          </view> -->
        </view>
        <!-- <view class="myinfo_qm">
          {{myinfo.qm}}
        </view> -->
      </view>
      
        <view @click="toUserInfo()">
            <u--image width="40rpx" height="40rpx" src="/static/myinfo/iconm_bianj.png" ></u--image>
        </view>
    </view>

    <!-- 中段菜单 -->
    <view class="myinfo_menus">
          <view class="myinfo_title">
            常用功能
          </view>
        <view class="menus">
          <view v-for="item in list" :key="item.id">
            <view class="menus_item" @click="openLink(item)">
              <u-badge v-if="item.name == '我的订单'" :absolute="true" :offset='offset' 
              numberType="overflow" type="error" max="99" :value="myinfo.orderCount"></u-badge>
              <u--image width="64rpx" height="64rpx" :src="item.url" ></u--image>
              {{item.name}}
            </view>
          </view>
        </view>
    </view>

    <!-- 下段菜单 -->
    <view class="myinfo_menus">
          <view class="myinfo_title">
            其他
          </view>
        <view class="menus_foot">
          <view @click="openLink(item)" v-for="item in list2" :key="item.id">
            <view class="menus_foot_item">
              <view style="display: flex;align-items: center;">
                <u--image width="48rpx" height="48rpx" :src="item.url" ></u--image>
                <view style="margin-left: 20rpx;">{{item.name}}</view>
              </view>
              <u--image width="48rpx" height="48rpx" src="/static/myinfo/btn_right.png" ></u--image>
            </view>
          </view>
        </view>
    </view>
    <view v-if="showGetwxinfo" class="wxinfo">
        <view class='getwxinput'>
            <input type='nickname' name='nickname' :value='userInfo.nickname' @blur="onchangenickname" placeholder="点击获取微信昵称" />
        </view>

        <button type="balanced" open-type="chooseAvatar" @chooseavatar="onChooseavatar">
          点击获取头像
        </button>

        </view>
  </view>
</template>

<script>
import {myInfo,modifyInfo} from '@/http/api/common.js'
export default {
  data() {
    return {
      offset:[-10,-10],
      myinfo:{
        name:'未登录',
        id:'0',
        qm:'无',
        orderCount:'0',
        isVendor:'0',
        cartCount:'0',
        img:'https://cdn.uviewui.com/uview/album/1.jpg',
      },
      userInfo:{
          nickname:'',
          avatar:''
      },
      list:[
        {
          id:1,
          url:'/static/myinfo/iconm_xiaoxi.png',
          name:'消息中心',
          linkto:'/pages/myinfo/notifiesPage'
        },
        {
          id:2,
          url:'/static/myinfo/iconm_gouwu.png',
          name:'购物车',
          openType:'switchTab',
          linkto:'/pages/market/market'
        },
        {
          id:3,
          url:'/static/myinfo/icon_dingdang.png',
          name:'我的订单',
          linkto:'/pages/market/allOrder'
        },
        {
          id:4,
          url:'/static/myinfo/icomm_jilu.png',
          name:'浏览记录',
          linkto:'/pages/market/BrowsingHistory?showType=jilu'
        },
      ],
      list2:[
        {
          id:1,
          url:'/static/myinfo/icomx_wodgongy.png',
          name:'供应申报',
          linkto:'/supplierPages/pages/supplier/SupplyDeclaration'
        },
        {
          id:2,
          url:'/static/myinfo/icomx_gysrz.png',
          name:'供应商入驻',
          linkto:'/supplierPages/pages/supplier/SupplierEntryForm'
        },
        {
          id:3,
          url:'/static/myinfo/icomx_souc.png',
          name:'我的收藏',
          linkto:'/pages/market/BrowsingHistory?showType=shouchang'
        },
        {
          id:31,
          url:'/static/myinfo/iconx_wodwd.png',
          name:'我的问答',
          linkto:'/pages/home/exchangeNew?showType=mywenda'
        },
        {
          id:4,
          url:'/static/myinfo/icomx_dizhi.png',
          name:'我的地址',
          linkto:'/pages/myinfo/address'
        },
        {
          id:5,
          url:'/static/myinfo/icomx_message.png',
          name:'意见反馈',
          linkto:'/pages/myinfo/userInfo?showType=fangkui'
        },
        // {
        //   id:4,
        //   url:'/static/myinfo/iconx_xitongg.png',
        //   name:'设置'
        // },
      ],
      showGetwxinfo:false,
    }
  },
  onShow() {
    if(uni.getStorageSync('AppAuthorization')){
      // 获取个人信息
      this.getmyInfo()
    }
  },
  methods: {
    async getmyInfo(){
      let res = await myInfo()
      console.log(res?.data?.data?.image);
      if (!res.data.data.image || res.data.data.image == '') {
        this.showGetwxinfo = true
        return
      }else{
         this.showGetwxinfo = false
      }
      if (res.data.code == 200) {
        this.myinfo.name = res.data.data.nickName
        this.myinfo.img = res.data.data.image
        this.myinfo.orderCount = res.data.data?.orderCount || 0
        this.myinfo.isVendor= res.data.data?.isVendor || 0
        this.myinfo.cartCount = res.data.data?.cartCount || 0
        
        uni.setStorageSync('shoppingCartTotal',this.myinfo.cartCount)
        if (this.myinfo.cartCount != 0) {
          uni.setTabBarBadge({
            index: 3,
            text: this.myinfo.cartCount
          });
        }else{
					uni.hideTabBarRedDot({
						index: 3,
					});
				}
        
        
      }
    },
    onchangenickname(e){
      this.userInfo.nickname = e.detail.value
    },
    async onChooseavatar(e) {	
       
        let avatarUrl = 'data:image/jpeg;base64,' +   uni.getFileSystemManager().readFileSync(e.detail.avatarUrl,'base64')

        this.userInfo.avatar = avatarUrl
        let res = await modifyInfo({
            nickname:this.userInfo.nickname,
            images:this.userInfo.avatar
        })
        if (res.data.code == 200) {
          this.getmyInfo()
        }
        this.showGetwxinfo=false
    },
    uploadFilePromise(file) {
        return new Promise((resolve, reject) => {
            let a = uni.uploadFile({
                url: env.BASEURL + '/open/upload/uploadFile', // 仅为示例，非真实的接口地址
                filePath: file.url,
                name: 'file',
                success: (res) => {
                    const fileData = JSON.parse(res.data)
                    if (fileData.code == 500) {
                        resolve('')
                    }else{
                        const fileData = JSON.parse(res.data)
                        resolve(fileData.data.fileUrl)
                    }
                }
            });
        })
    },
    tologin(){
      if(uni.getStorageSync('AppAuthorization')){
        //登录
        return
      }
      uni.navigateTo({
          url: '/pages/myinfo/login'
      });
    },
    toUserInfo(){
      if(!uni.getStorageSync('AppAuthorization')){
        uni.navigateTo({
          url: '/pages/myinfo/login'
        });
        //登录
        return
      }
      uni.navigateTo({
          url: '/pages/myinfo/userInfo'
      });
    },
    openLink(data){
      console.log(data.name,data.openType);
      if (data?.linkto) {
          if (data.openType == 'switchTab') {
             uni.switchTab({
                url: data.linkto
            });
          }else{
            if (data.name == '供应商入驻' && this.myinfo?.isVendor == '1') {
              uni.showToast({
                title: '您已经入驻供应商了',
                icon: 'none'
              });
            }else{
              uni.navigateTo({
                  url: data.linkto
              });
            }
          }
      }
    }
  }
}
</script>

<style>
.myinfo{
  background: linear-gradient(180deg, #D3E5FF 0%, rgba(246,246,246,0.2) 100%);
}
.userImg{
  width: 128rpx;
  height: 128rpx;
}
.userName{
  min-width: 64rpx;
  height: 45rpx;
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
  line-height: 36rpx;
}
.myinfo_top{
    display: flex;
    width: 90vw;
    margin: 0 auto;
    align-items: center;
    padding-top: 40rpx;
}
.myinfo_text{
  margin-left: 40rpx;
  min-width: 460rpx;

}
.myinfo_name{
  display: flex;
  align-items: center;
}
.myinfo_id{
  margin-left: 20rpx;
  width: 145rpx;
  height: 40rpx;
  background: linear-gradient(180deg, #46A6FF 0%, #96CBFB 100%);
  border-radius: 24rpx 24rpx 24rpx 24rpx;
  opacity: 1;

  text-align: center;
  font-size: 24rpx;
  font-weight: 400;
  color: #FFFFFF;
  line-height: 36rpx;
}
.myinfo_qm{
  height: 40rpx;
  font-size: 28rpx;
  font-weight: 400;
  color: #999999;
  line-height: 36rpx;
}
.myinfo_menus{
  width: 90vw;
  margin: 0 auto;
  background-color: white;
  margin-top: 40rpx;
  
  border-radius: 24rpx 24rpx 24rpx 24rpx;
  opacity: 1;
}
.myinfo_title{
  font-size: 40rpx;
  padding: 30rpx 0 30rpx 40rpx;

  width: 128rpx;
  height: 45rpx;
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
  line-height: 45rpx;
}
.menus_item{
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 28rpx;
  font-weight: 400;
  color: #333333;
  line-height: 36rpx;
  position: relative
}
.menus{
  padding-bottom: 40rpx;
  display: flex;
  justify-content: space-around;
}
.menus_foot{
  width: 90%;
  margin: 0 auto;
}
.menus_foot_item{
  display: flex;
  align-items: center;
  height: 100rpx;
  justify-content: space-between;
}
.getwxinput{
  text-align: center;
  margin: 20rpx 0;
}
.wxinfo{
  position: fixed;
    z-index: 10000;
    top: 30vh;
    width: 600rpx;
    height: 330rpx;
    left: 55rpx;
    background: #e7e7e7;
    border-radius: 10rpx;
    padding: 20rpx;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
</style>