xmhjc-applet/pages/myinfo/myinfo.vue

<template>
  <view class="myinfo">
    <!-- 顶部信息 -->
    <view class="myinfo_top">
      <view 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>
</template>

<script>
import {myInfo} from '@/http/api/common.js'
export default {
  data() {
    return {
      offset:[-10,-10],
      myinfo:{
        name:'未登录',
        id:'0',
        qm:'无',
        orderCount:'0',
        img:'https://cdn.uviewui.com/uview/album/1.jpg',
      },
      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_souc.png',
          name:'我的收藏',
          linkto:'/pages/market/BrowsingHistory?showType=shouchang'
        },
        {
          id:2,
          url:'/static/myinfo/icomx_dizhi.png',
          name:'我的地址',
          linkto:'/pages/myinfo/address'
        },
        {
          id:3,
          url:'/static/myinfo/icomx_message.png',
          name:'意见反馈',
          linkto:'/pages/myinfo/userInfo?showType=fangkui'
        },
        // {
        //   id:4,
        //   url:'/static/myinfo/iconx_xitongg.png',
        //   name:'设置'
        // },
      ]
    }
  },
  onShow() {
    if(uni.getStorageSync('AppAuthorization')){
      // 获取个人信息
      this.getmyInfo()
    }
  },
  methods: {
    async getmyInfo(){
      let res = await myInfo()
      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
        
      }
    },
    tologin(){
      if(uni.getStorageSync('AppAuthorization')){
        //登录
        return
      }
      uni.navigateTo({
          url: '/pages/myinfo/login'
      });
    },
    toUserInfo(){
      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{
              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;
}
</style>