jje_uniapp/pages/my/index.vue

<template>
  <view class="page" :style="{'height':height}">
    <view class="backImage">
      <image class="backImage" src="/static/me/u655.png"></image>
    </view>
    <view class="content">

      <view class="userInfo flex-row justify-between  ">
        <view class="flex-row">
          <view class="userPhoto" @click="navigateToPage('/myPages/userInfo/index')">
            <image class="userPhoto" :src="userInfo.selfPhotoUrl || '/static/me/ud4.png'"></image>
          </view>
          <view class="userTitle flex-col justify-center" @click="navigateToPage('/myPages/userInfo/index')">
            <text class="nickName">HI,亲爱的{{ userInfo.ncikName }}</text>
            <text class="xinxTitle">{{userInfo.no}}</text>
          </view>
        </view>

        <view class="qrcodeView flex-col justify-center" @click="navigateToPage('/pages/qrCode/index')">
          <image class="qrcode" src="/static/me/u5.png"></image>
          <text class="qrcodeTitle">会员码</text>
        </view>

      </view>

      <view class="sudoku flex-col">
        <view class="balance-name">
          <text>我的资产</text>
        </view>
        <view class="balance flex-row justify-around">
          <view class="balanceItem" @click="navigateToPage('/myPages/recharge/index')">
            <view class="icon flex-row justify-center">
              <u-icon name="/static/me/u701.png" color="red" size="30"></u-icon>
            </view>
            <view class="name">
              余额
            </view>
            <view class="num">
              <text>{{ userInfo.balance || 0 }}</text>
            </view>
          </view>
          <view class="balanceItem">
            <view class="icon flex-row justify-center">
              <u-icon name="/static/me/u680.png" color="red" size="30"></u-icon>
            </view>
            <view class="name">
              积分
            </view>
            <view class="num">
              <text>{{ userInfo.integral || 0 }}</text>
            </view>
          </view>
          <view class="balanceItem" @click="navigateToPage('/orderPages/myCoupon/index')">
            <view class="icon flex-row justify-center">
              <u-icon name="/static/me/u687.png" color="red" size="30"></u-icon>
            </view>
            <view class="name">
              优惠券
            </view>
            <view class="num">
              <text>{{ userInfo.coupon || 0 }}</text>
            </view>
          </view>
          <view class="balanceItem" @click="navigateToPage('/storePages/myRights/index')">
            <view class="icon flex-row justify-center">
              <u-icon name="/static/me/u694.png" color="red" size="30"></u-icon>
            </view>
            <view class="name">
              我的权益卡
            </view>
            <view class="num">
              <text>{{ userInfo.equityCardTotal || 0 }}</text>
            </view>
          </view>
        </view>

      </view>

      <view class="group">
        <uni-list>
          <uni-list-item  :clickable="true" :title="item.title" showArrow :thumb="item.thumb" thumb-size="sm"
                         :rightText="item.rightText" v-for="(item,index) in group1" :key="index" @click="clickListItem(item)"/>
        </uni-list>
      </view>

      <!--				<view class="group">-->
      <!--					<uni-list>-->
      <!--						<uni-list-item :to="item.to" :title="item.title" showArrow :thumb="item.thumb" thumb-size="sm"  v-for="(item,index) in group2" :key="index" />-->
      <!--					</uni-list>-->
      <!--				</view>-->


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

<script>
import tabBar from "../../components/tabBar/tabBar";

export default {
  components: {
    tabBar
  },
  data() {
    return {
      group1: [
        // {thumb:'/static/me/u1796.png',title:'贡献奖励记录',rightText:'',to:''},
        // {thumb:'/static/me/u1803.png',title:'实名认证',rightText:'',to:'/myPages/realNameAuth/index'},
        {thumb: '/static/me/u1812.png', title: '服务对象管理', rightText: '', to: '/myPages/ServiceObjectManagement/index'},
        {thumb: '/static/me/u3.png', title: '邀请有礼', rightText: '', to: '/myPages/promotionCenter/index'},
        {thumb: '/static/me/u1833.png', title: '资产找回', rightText: '', to: '/myPages/systemSwitch/index'},
        {thumb: '/static/me/u826.png', title: '储值服务', rightText: '', to: '/myPages/recharge/index'},
        {thumb: '/static/me/u701.png', title: '交易记录', rightText: '', to: '/myPages/transactionRecord/index'},
        {thumb: '/static/me/u11.png', title: '会员须知', rightText: '', to: '/myPages/aboutOur/index'},
        // {thumb: '/static/me/familyCard_icon.png', title: '亲情卡', rightText: '', to: '/myPages/familyCard/index'}
      ],
      group2: [

        // {thumb:'/static/me/u10.png',title:'个人信息',rightText:'',to:'/myPages/userInfo/index'},
        // {thumb:'/static/me/u101.png',title:'设置',rightText:'',to:'/myPages/setting/index'}
      ],
      height: '',
      title: 'Hello',
      tabIndex: 4,
      userInfo: {}
    }
  },

  // 分享到朋友圈
  onShareTimeline() {
  },
  // 分享到用户
  onShareAppMessage(OBJECT) {
  },
  onLoad() {

    //
    // uni.hideTabBar({
    //   animation: false
    // })
    let sysInfo = uni.getSystemInfoSync()
    this.height = sysInfo.windowHeight + 'px'
  },

  onShow() {
    // this.userInfo = uni.getStorageSync('userInfo')
    // if (this.userInfo.isAttestation){
    // 	this.group1[0].rightText = '已认证'
    // }else {
    // 	this.group1[0].rightText = '未实名认证，去认证'
    // }
    this.getUserInfo()
  },

  methods: {
    clickListItem(e){
      console.log(e)
        uni.navigateTo({
          url:e.to
        })
    },
    getUserInfo() {
      this.$api.getUserInfo().then(res => {
        console.log('++++++++++++获取用户信息++++++++++++++++++', res)
        uni.setStorageSync('userInfo', res.data.data)
        this.userInfo = res.data.data
        this.getImgUrlByOssId(this.userInfo.selfPhoto)
      })
    },

    getImgUrlByOssId(Id) {
      if (Id) {
        this.$api.getImage(Id).then(res => {
          this.userInfo.selfPhotoUrl = res.data.data[0].url.replace(/^http:/, "https:")
          this.$set(this.userInfo)
        });
      }
    },
    navigateToPage(url) {
      uni.navigateTo({
        url: url
      })
    },


  }
}
</script>

<style>
@import '/common/css/common.css';
@import './index.rpx.css';
</style>