uniAppXCX/pages/mine/mine.vue

<template>
  <view style="overflow: scroll; background-color: #232428">
    <img
      src="https://file.rongcyl.cn/festatic/bkm/mine/mine_bgt.png"
      style="width: 100%; height: 658rpx; position: absolute; z-index: 99"
    />
    <div style="width: 100%; height: 658rpx; z-index: 100; position: relative">
      <div
        :style="{
          color: '#fff',
          'margin-top': menuButton.top + 'px',
          'line-height': menuButton.height + 'px',
          textAlign: 'center',
        }"
      >
        我的
      </div>
      <div class="flex pt-3 px-5">
        <img @click="toUserInfo" style="width: 116rpx; height: 116rpx" :src="userInfo.avatar" class="rounded-full" />
        <div style="color: #bbbcc3" class="ml-3" v-if="hasLogin">
          <div>
            <span>{{ userInfo.nickname || '' }}</span>
            <span style="color: #9e9e9e" class="fs12 ml-4">ID:{{ userId || '' }}</span>
          </div>
          <div class="relative inline-block" style="width: 100rpx; height: 60rpx">
            <img src="https://file.rongcyl.cn/festatic/bkm/mine/vip2.png" style="width: 100rpx; height: 60rpx" />
            <div
              class="absolute fs13"
              style="top: 0; height: 60rpx; right: 15rpx; color: #713b08; z-index: 999; line-height: 60rpx"
            >
              1
            </div>
          </div>
        </div>

        <div class="text-white" @click="toLogin" v-else>点击登录</div>
      </div>
      <div class="flex justify-around text-white mt-4 items-center text-center">
        <div class="">
          <div class="fs16 bold">{{ 999 }}</div>
          <div class="fs14">积分</div>
        </div>
        <div class="">
          <div class="fs16 bold">{{ 999 }}</div>
          <div class="fs14">优惠券</div>
        </div>
      </div>
      <img
        src="https://file.rongcyl.cn/festatic/bkm/mine/vip.png"
        style="width: 152rpx; height: 170rpx; position: absolute"
        :style="{ top: vipTop, right: '15rpx' }"
      />
    </div>
    <div
      style="
        margin-top: -320rpx;
        height: calc(100vh - 358rpx);
        width: 100vw;
        position: relative;
        z-index: 100;
        background: url(https://file.rongcyl.cn/festatic/bkm/mine/mine_bg.png) no-repeat;
        background-size: cover;
        color: #bbbcc3;
        padding: 0 30rpx;
        box-sizing: border-box;
        padding-top: 100rpx;
      "
    >
      <div class="flex justify-between items-center">
        <div class="fs14">我的订单</div>
        <div class="flex items-center">
          <span class="fs12">查看全部</span>
          <img
            class="ml-2 inline-block"
            src="https://file.rongcyl.cn/festatic/bkm/arrow.png"
            style="width: 28rpx; height: 28rpx"
          />
        </div>
      </div>
      <div class="flex justify-around my-5 fs12 text-center">
        <div>
          <img src="https://file.rongcyl.cn/festatic/bkm/mine/t1.png" style="width: 100rpx; height: 100rpx" />
          <div class="mt-1">待发货</div>
        </div>
        <div>
          <img src="https://file.rongcyl.cn/festatic/bkm/mine/t2.png" style="width: 100rpx; height: 100rpx" />
          <div class="mt-1">待收货</div>
        </div>
        <div>
          <img src="https://file.rongcyl.cn/festatic/bkm/mine/t3.png" style="width: 100rpx; height: 100rpx" />
          <div class="mt-1">已完成</div>
        </div>
        <div>
          <img src="https://file.rongcyl.cn/festatic/bkm/mine/t4.png" style="width: 100rpx; height: 100rpx" />
          <div class="mt-1">消费记录</div>
        </div>
      </div>
      <div class="flex justify-between fs14 items-center border-t border-zinc-600" style="height: 92rpx">
        <div class="flex items-center">
          <img
            src="https://file.rongcyl.cn/festatic/bkm/mine/s1.png"
            class="inline-block mr-2"
            style="width: 32rpx; height: 32rpx"
          />
          <span>常见问题</span>
        </div>
        <img
          src="https://file.rongcyl.cn/festatic/bkm/arrow.png"
          style="width: 28rpx; height: 28rpx; display: inline-block"
        />
      </div>
      <div class="flex justify-between fs14 items-center border-t border-zinc-600" style="height: 92rpx">
        <div class="flex items-center">
          <img
            src="https://file.rongcyl.cn/festatic/bkm/mine/s2.png"
            class="inline-block mr-2"
            style="width: 32rpx; height: 32rpx"
          />
          <span>意见反馈</span>
        </div>
        <img
          src="https://file.rongcyl.cn/festatic/bkm/arrow.png"
          style="width: 28rpx; height: 28rpx; display: inline-block"
        />
      </div>
      <div class="flex justify-between fs14 items-center border-t border-zinc-600" style="height: 92rpx">
        <div class="flex items-center">
          <img
            src="https://file.rongcyl.cn/festatic/bkm/mine/s3.png"
            class="inline-block mr-2"
            style="width: 32rpx; height: 32rpx"
          />
          <span>加入群组</span>
        </div>
        <img
          src="https://file.rongcyl.cn/festatic/bkm/arrow.png"
          style="width: 28rpx; height: 28rpx; display: inline-block"
        />
      </div>
      <div class="flex justify-between fs14 items-center border-t border-zinc-600" style="height: 92rpx">
        <div class="flex items-center">
          <img
            src="https://file.rongcyl.cn/festatic/bkm/mine/s4.png"
            class="inline-block mr-2"
            style="width: 32rpx; height: 32rpx"
          />
          <span>联系客服</span>
        </div>
        <img
          src="https://file.rongcyl.cn/festatic/bkm/arrow.png"
          style="width: 28rpx; height: 28rpx; display: inline-block"
        />
      </div>
      <div class="flex justify-between fs14 items-center border-t border-zinc-600" style="height: 92rpx">
        <div class="flex items-center">
          <img
            src="https://file.rongcyl.cn/festatic/bkm/mine/s5.png"
            class="inline-block mr-2"
            style="width: 32rpx; height: 32rpx"
          />
          <span>地址管理</span>
        </div>
        <img
          src="https://file.rongcyl.cn/festatic/bkm/arrow.png"
          style="width: 28rpx; height: 28rpx; display: inline-block"
        />
      </div>
      <div class="flex justify-between fs14 items-center border-t border-zinc-600" style="height: 92rpx">
        <div class="flex items-center">
          <img
            src="https://file.rongcyl.cn/festatic/bkm/mine/s6.png"
            class="inline-block mr-2"
            style="width: 32rpx; height: 32rpx"
          />
          <span>游戏规则</span>
        </div>
        <img
          src="https://file.rongcyl.cn/festatic/bkm/arrow.png"
          style="width: 28rpx; height: 28rpx; display: inline-block"
        />
      </div>
      <div class="flex justify-between fs14 items-center border-t border-b border-zinc-600" style="height: 92rpx">
        <div class="flex items-center">
          <img
            src="https://file.rongcyl.cn/festatic/bkm/mine/s7.png"
            class="inline-block mr-2"
            style="width: 32rpx; height: 32rpx"
          />
          <span>用户协议</span>
        </div>
        <img
          src="https://file.rongcyl.cn/festatic/bkm/arrow.png"
          style="width: 28rpx; height: 28rpx; display: inline-block"
        />
      </div>
    </div>
    <uni-popup class="popup" ref="popup" type="center">
      <image
        class="qrcodeImg"
        :show-menu-by-longpress="true"
        :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,
      safeAreaTop: 0,
      menuButton: {
        top: 0,
        height: 0,
      },
    }
  },
  created() {
    const { top, height } = wx.getMenuButtonBoundingClientRect()
    this.menuButton.top = top
    this.menuButton.height = height
    wx.getSystemInfo({
      success: res => {
        console.log(res.safeArea)
        this.safeAreaTop = res.safeArea.top + 'px'
      },
    })
  },
  computed: {
    vipTop() {
      return this.menuButton.height + 15 + 'px'
    },
  },
  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;
  }
}

.qrcodeImg {
  width: 70vw;
  border-radius: 5px;
}
</style>