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"
          v-if="hasLogin"
          class="rounded-full"
        />
        <img
          style="width: 116rpx; height: 116rpx; border: 4rpx solid #fff; background-color: #bbbcc3; opacity: 0.4"
          v-if="!hasLogin"
          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"
            >
              {{ userInfoDetail.userLevel || 0 }}
            </div>
          </div>
        </div>

        <div class="text-white mt-4 ml-3" @click="toLogin" v-else>点击登录</div>
      </div>
      <div class="flex justify-around text-white mt-4 items-center text-center">
        <div class="" @click="$navigateTo('/pages/integralRecord/integralRecord')">
          <div class="fs16 bold">{{ userInfoDetail.integral || 0 }}</div>
          <div class="fs14">积分</div>
        </div>
        <div class="" @click="$navigateTo('/pages/coupon/coupon')">
          <div class="fs16 bold">{{ userInfoDetail.couponNum || 0 }}</div>
          <div class="fs14">优惠券</div>
        </div>
      </div>
      <img
        @click="$navigateTo('/pages/vip/vip')"
        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;
      "
    >
      <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>
      <div class="flex justify-between items-center">
        <div class="fs14">我的订单</div>
        <div class="flex items-center">
          <span class="fs12" @click="$navigateTo('/pages/order/order')">查看全部</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 @click="$navigateTo('/pages/order/order?type=1')">
          <img src="https://file.rongcyl.cn/festatic/bkm/mine/t2.png" style="width: 100rpx; height: 100rpx" />
          <div class="mt-1">待付款</div>
        </div>
        <div @click="$navigateTo('/pages/order/order?type=2')">
          <img src="https://file.rongcyl.cn/festatic/bkm/mine/t1.png" style="width: 100rpx; height: 100rpx" />
          <div class="mt-1">待发货</div>
        </div>
        <div @click="$navigateTo('/pages/order/order?type=3')">
          <img src="https://file.rongcyl.cn/festatic/bkm/mine/t3.png" style="width: 100rpx; height: 100rpx" />
          <div class="mt-1">待收货</div>
        </div>
        <div @click="$navigateTo('/pages/consumptionRecords/consumptionRecords')">
          <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
        @click="showQRcode"
        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>
      <button
        open-type="contact"
        class="btn 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"
        />
      </button>
      <div
        class="flex justify-between fs14 items-center border-t border-zinc-600"
        style="height: 92rpx"
        @click="pageTo('/pages/addressManage/addressManage')"
      >
        <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
        @click="$navigateTo('/pages/rule/rule', { type: 0 })"
        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
        @click="$navigateTo('/pages/userAgreement/userAgreement')"
        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>
  </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: #232428;
  color: #bbbcc3;
  padding: 0;
  &::after {
    // border: none;
  }
}

.qrcodeImg {
  width: 70vw;
  position: relative;
  z-index: 1000;
  border-radius: 10rpx;
}
</style>