uniAppXCX/pages/mine/mine.vue

<template>
  <view class="container">
    <view class="user">
      <view class="userInfo">
        <image @click="toUserInfo" class="userPhoto" :src="userInfo.avatar"></image>
        <uni-badge class="message" :text="massageNum" absolute="rightTop" size="small" :max-num="99" :offset="[4, 4]">
          <image
            class="icon"
            :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/mine/massage.png'"
            mode="widthFix"
            @click="$navigateTo('/pages/message/message')"
          ></image>
        </uni-badge>
        <view class="info">
          <view class="name" v-if="hasLogin">
            {{ userInfo.nickname || '' }}
          </view>
          <view class="loginText" @click="toLogin" v-else>点击登录</view>
          <view class="id">
            ID:
            <span v-if="hasLogin">{{ userId || '' }}</span>
            <image
              class="copy"
              :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/mine/copy.png'"
              mode="widthFix"
            ></image>
          </view>
        </view>
      </view>
      <view class="row">
        <view class="box">
          <view class="value" style="color: #ff2c43">
            {{ userInfoDetail.integral || 0 }}
          </view>
          <view class="label">积分</view>
        </view>
        <view class="box" @click="$navigateTo('/pages/coupon/coupon')">
          <view class="value">
            {{ userInfoDetail.couponNum || 0 }}
          </view>
          <view class="label">优惠卷</view>
        </view>
      </view>
    </view>
    <view class="menus">
      <view class="title">
        <image :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/mine/title.png'" mode=""></image>
      </view>
      <view class="menuList">
        <view class="menu" @click="pageTo('/pages/addressManage/addressManage')">
          <image :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/mine/menu1.png'"></image>
          <span>地址管理</span>
        </view>
        <view class="menu" @click="pageTo('/pages/consumptionRecords/consumptionRecords')">
          <image :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/mine/menu2.png'"></image>
          <span>消费记录</span>
        </view>
        <view class="menu" @click="showQRcode">
          <image :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/mine/menu3.png'"></image>
          <span>加群交流</span>
        </view>
        <view class="menu" @click="$navigateTo('/pages/rule/rule', { type: 0 })">
          <image :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/mine/menu4.png'"></image>
          <span>游戏规则</span>
        </view>
        <view class="menu" @click="$navigateTo('/pages/userAgreement/userAgreement')">
          <image :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/mine/menu5.png'"></image>
          <span>用户协议</span>
        </view>
        <button class="menu btn" open-type="contact">
          <image :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/mine/menu6.png'"></image>
          <span>联系客服</span>
        </button>
      </view>
    </view>
    <uni-popup class="popup" ref="popup" type="center">
      <image class="qrcodeImg" :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/QRcode.png'" mode="widthFix" />
    </uni-popup>
  </view>
</template>

<script>
import { userInfoApi } from '@/api/user.js'
import { messageListApi } from '@/api/message.js'
export default {
  data() {
    return {
      isLogin: false,
      userInfo: null,
      userId: '-',
      hasLogin: false,
      userInfoDetail: {},
      massageNum: 0,
    }
  },
  onShow() {
    // this.userInfo = wx.getStorageSync('userInfo');
    this.userId = wx.getStorageSync('userId')
    //获取用户的登录信息
    if (wx.getStorageSync('token')) {
      this.hasLogin = true
      getApp().globalData.hasLogin = true
      // 获取用户信息详情
      this.getUserInfo()
      this.getMassage()
    } else {
      this.userInfo = null
      this.hasLogin = false
      getApp().globalData.hasLogin = false
      this.userInfoDetail = {}
    }
  },
  methods: {
    getMassage() {
      let params = {
        page: 1,
        limit: 1,
        status: 0,
      }
      messageListApi(params).then(res => {
        this.massageNum = res.data.total
      })
    },
    toUserInfo() {
      this.$navigateTo('/pages/user/user')
      if (this.isLogin) {
        this.$navigateTo('/pages/user/user')
      }
    },
    getUserInfo() {
      userInfoApi().then(res => {
        console.log(res, '详细用户信息')
        this.userInfoDetail = res.data
        // wx.setStorageSync('userInfo', res.data)
        this.userInfo = res.data
      })
    },
    toLogin() {
      wx.navigateTo({ url: '/pages/login/login' })
    },
    pageTo(url) {
      wx.navigateTo({ url: url })
    },
    showQRcode() {
      this.$refs.popup.open()
    },
  },
}
</script>

<style scoped lang="scss">
.btn {
  border: none;
  outline: none;
  background-color: #fff;

  &::after {
    border: none;
  }
}
.container {
  background: #9ec8f9;
  padding: 0 10px;
  overflow: scroll;
}

.user {
  background: #fff;
  border-radius: 10px;
  padding: 0 10px;
  position: relative;
  margin-top: 10vw;

  .userInfo {
    display: flex;

    .message {
      position: absolute;
      right: 10px;
      top: 8px;
      .icon {
        width: 30px;
      }
    }
    .userPhoto {
      width: 74px;
      height: 74px;
      border-radius: 50%;
      border: solid 3px #6bafff;
      position: relative;
      top: -20px;
      background: #dedede;
    }

    .info {
      padding: 10px;

      .name {
        font-weight: 600;
      }

      .loginText {
        font-weight: 600;
      }

      .id {
        margin-top: 5px;
        font-size: 13px;
        display: flex;
        align-items: center;

        .copy {
          width: 14px;
          margin-left: 5px;
        }
      }
    }
  }

  .row {
    display: flex;
    justify-content: space-around;

    .box {
      display: flex;
      flex-direction: column;
      text-align: center;
      padding: 20px 10px;

      .label {
        margin-top: 5px;
        font-size: 15px;
      }

      .value {
        font-size: 20px;
        font-weight: 600;
      }
    }
  }
}

.menus {
  margin-top: 20px;
  background: #fff;
  border-radius: 10px;

  // padding: 0 10px;
  .title {
    position: relative;
    left: -10px;
    top: -10px;
    width: calc(100% + 10px);
    height: 55px;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .menuList {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding: 20px 20px 0 20px;

    .menu {
      margin-bottom: 30px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      image {
        width: 36px;
        height: 36px;
      }

      span {
        margin-top: 10px;
        font-size: 14px;
      }
    }
  }
}
.qrcodeImg {
  width: 70vw;
  border-radius: 5px;
}
</style>