yshop-pro-uniapp/root/user/user.vue

<template>
  <view class="mine-container">

    <Header :show-return="false">我的</Header>
    <view class="user-top">
      <!-- user info -->
      <view class="userinfo-box">
        <!-- 未登录 -->
        <view
            class="userinfo-box__inner no-login"
            v-if="!(user && user.id)"
            @click="toLogin"
        >
          <view class="flex flex-ai__center">
            <image
                class="head"
                :src="defaultAvatarIcon"
            />
            <view class="user-info">
              点击登录
            </view>
          </view>
        </view>
        <!-- 已登录 -->
        <view
            class="userinfo-box__inner"
            @click="toUserCenter"
            v-else
        >
          <view class="flex flex-ai__center">
            <image
                class="head"
                :src="user.avatar"
            />
            <view class="user-info">
              {{ user.nickname }}
            </view>
          </view>
          <view
              class="sign-box"
              @click.stop="goSignIn">
            <image :src="mySignIn" />
            签到
          </view>
        </view>
      </view>

      <!-- 账户信息 -->
      <view class="account-box">
        <template
            v-for="item in accountList"
            :key="item.id">
          <view
              v-if="user"
              class="account-item"
              @click.stop="handleJump(item)">
            <view class="count">
              {{ user[item.field] || 0 }}
            </view>
            <view class="title">
              {{ item.field === 'integral' ? `我的${ integralName }` : item.label }}
            </view>
          </view>
        </template>

      </view>

      <!-- VIP 信息 未激活 -->
      <view
          class="vip-box vip-none"
          @click="goMemberCenter"
          v-if="!memberLeverInfo.currentLevel">
        <view
            class="vip-box__inner flex flex-ai__center flex-jc__sb"
            :style="{backgroundImage:`url(${myVip1})`}">
          <image
              class="icon"
              :src="noneVip" />
          <view class="vip-text">
            开通享更多特权，省钱又省心
          </view>
          <view class="vip-button">
            立即激活
          </view>
        </view>
      </view>

      <!-- VIP 信息 激活 -->
      <view
          class="vip-box"
          @click="goMemberCenter"
          v-else>
        <view
            class="vip-box__inner "
            :style="{backgroundImage:`url(${myVip1})`}">
          <view class="flex flex-ai__center flex-jc__sb">
            <image
                class="icon"
                :src="memberLeverInfo.currentLevel.iconUrl" />
            <view class="vip-text flex flex-ai__center">
              {{ memberLeverInfo.currentLevel.levelName }}
              <view class="process">
                <view
                    class="schedule"
                    :style="{width: `${memberLeverInfo.needGrowthValue/memberLeverInfo.nextLevel.growthValue}%`}"></view>
              </view>
            </view>
            <view class="vip-button">
              查看权益 >
            </view>
          </view>
          <view class="tips">
            再获取{{ memberLeverInfo.needGrowthValue }}经验，可升级为{{ memberLeverInfo.nextLevel.levelName }}会员
          </view>
        </view>
      </view>
    </view>
    <!-- 大卡片 -->
    <view class="big-card">
      <!-- order card -->
      <GridCard
          :list="orderIconList"
          :dot-info="orderUserCountData"
          title="我的订单"
          button-text="查看所有订单"
          @button-click="toAllOrder"
      />

      <!-- footprint card -->
      <GridCard
          :list="cardOneList"
          :dot-info="orderUserCountData"
      />

      <GridCard
          :list="filterCardTwo"
          :dot-info="orderUserCountData"
      />
    </view>


  </view>
</template>


<script setup>
import { computed, ref } from 'vue'
import Header from '@/components/Header/index.vue'

import { orderUserCount } from '@/api/order'
import { onShow } from '@dcloudio/uni-app'
import { useMainStore } from '@/store/modules/useMainStore'
import { useRouter } from "@/hooks/useRouter";
import { storeToRefs } from "pinia";
import GridCard from "@/root/user/components/GridCard.vue";
import { accountList, cardOneList, cardTwoList, orderIconList } from "@/root/user/index.data";
import { defaultAvatarIcon, mySignIn, myVip1, myVipNone, noneVip } from "@/utils/images";
import { useInterface } from "@/hooks/useInterface";
import { useJump } from "@/hooks/useJump";
import { getIntegralName, getUserMemberLevel } from "@/api/member";

const mainStore = useMainStore()
const {user, integralName} = storeToRefs(mainStore);
const {push} = useRouter()
const {toast} = useInterface();
const {goSignIn, goMemberCenter} = useJump()
const orderUserCountData = ref(null)

const filterCardTwo = computed(() => {
  if (!user.value) return []
  // 判断是否又核销权限
  if (user.value.writeOffAuthority) {
    return cardTwoList
  } else {
    return cardTwoList.filter(item => item.label !== '订单核销')
  }
})

function toAllOrder() {
  if (!user.value) return toast({title: '请先登录'})
  push({url: '/pages/orderList/orderList'}, {data: {type: -1}})
}

function toUserCenter() {
  if (!user.value) return toast({title: '请先登录'})
  push({url: '/pages/userInfo/index'})
}

function toLogin() {
  push({url: '/pages/login/guid'})
}

const handleOrderUserCount = async () => {
  orderUserCountData.value = await orderUserCount()
}

// =============================== 会员信息 ====================================
const memberLeverInfo = ref({
  currentGrowthValue: 0,
  currentLevel: null,
  needGrowthValue: 0,
  nextLevel: null
})

async function doGetUserMemberLevel() {
  memberLeverInfo.value = await getUserMemberLevel()
}


function handleJump(item) {
  if (!item.path) return toast({title: '暂未开放~'})
  if (typeof item.path === 'function') {
    item.path()
  }
}

onShow(() => {
  mainStore.getUserInfo()
  handleOrderUserCount()
  doGetUserMemberLevel()
})


</script>

<style
    lang="scss"
    scoped
>
.mine-container {
  background-color: #ffffff;

  .user-top {
    padding-bottom: 22rpx;
    background: url("https://b2c-pro-static-dev.zkthink.com/static/my/bg-top.png") no-repeat bottom center / 100% auto;
  }

  .userinfo-box {
    @include usePadding(32, 0);
    width: 100%;
    margin: 50rpx 0 0 0;

    &__inner {
      @include useFlex(space-between, center);

      .head {
        width: 120rpx;
        height: 120rpx;
        border-radius: 50%;
        border: 5rpx solid #fff;
      }

      .user-info {
        @include useFlex(space-between, center);
        padding-left: 30rpx;
        font-size: 34rpx;
      }

      .sign-box {
        @include useFlex(center, center);
        @include usePadding(16, 12);
        border: 1rpx solid #E5E5E5;
        font-weight: bold;
        font-size: 24rpx;
        border-radius: 50rpx;

        image {
          width: 40rpx;
          height: 40rpx;
        }
      }

      &.no-login {

      }
    }

  }

  .account-box {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 32rpx 0;

    .account-item {
      @include useFlex(center, center, column);
      font-weight: bold;
      font-size: 32rpx;
      color: #333;
      position: relative;


      &:after {
        content: '';
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 1rpx;
        height: 50%;
        background: $tips-color;
      }

      &:last-child {
        &:after {
          width: 0;
        }
      }

      .title {
        color: $tips-color;
        font-size: 24rpx;
        font-weight: normal;
      }
    }
  }

  .vip-box {
    width: 100%;
    height: 132rpx;
    @include usePadding(32, 0);

    &__inner {
      @include usePadding(32, 25);
      width: 100%;
      height: 100%;
      background-repeat: no-repeat;
      background-size: 100% 100%;

      .icon {
        width: 56rpx;
        height: 56rpx;
      }

      .vip-text {
        width: 60%;
        color: #FFF8E8;
        font-weight: bold;
        font-size: 28rpx;

        .process {
          flex-grow: 1;
          height: 10rpx;
          margin-left: 12rpx;
          border-radius: 10rpx;
          overflow: hidden;
          background: rgba(255, 255, 255, 0.1);
          position: relative;

          .schedule {
            height: 100%;
            background: #FFF8E8;
            border-radius: 10rpx;
            left: 0;
            top: 0;
          }
        }
      }

      .vip-button {
        @include usePadding(0, 10);
        color: #FFF8E8;
        font-size: 24rpx;
        border-radius: 8rpx;
      }

      .tips {
        margin-top: 10rpx;
        color: #FFF8E8;
        font-size: 20rpx
      }
    }
  }

  .vip-none {
    .vip-button {
      @include usePadding(24, 10);
      background: linear-gradient(45deg, #FAEECB, #F2D7A9);
      color: #272A3F;
      font-size: 24rpx;
      border-radius: 8rpx;
    }

  }

  .big-card {
    width: 100%;
    background: #f6f6f6;
    border-radius: 30rpx 30rpx 0 0;
    margin-top: -22rpx;
    @include usePadding(32, 32);

  }
}

</style>