xuexiaole-mobile/src/pages/mine/patriarch-card.vue

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { bindApplyStore, useUserStore } from '@/store'
import { storeToRefs } from 'pinia'
import router from '@/router/router'
import recharge from './Components/recharge/index.vue'

const { userInfo } = storeToRefs(useUserStore())
const { bindApplyList } = storeToRefs(bindApplyStore())
const id_apply = 1
const id_recharge = 2

const OSS_URL = import.meta.env.VITE_OSS_HOST
const defaultAvatar = `${OSS_URL}/urm/default_avatar.png`
const list = ref([
  {
    id: id_apply,
    title: '绑定申请',
    photo: `${OSS_URL}/urm/my_binding_apply.png`,
    show: true,
    url: '/pages/mine/bindApply/index',
  },
  {
    id: id_recharge,
    title: '乐贝充值',
    photo: `${OSS_URL}/urm/my_award_manage.png`,
    show: true,
  },
  // {
  //   title: '扫码绑定',
  //   photo: `${OSS_URL}/urm/my_scan_binding.png`,
  //   show: true,
  //   url: '/pages/home/bindDevice/index',
  // },
  // {
  //   title: '电子保修卡',
  //   photo: `${OSS_URL}/urm/my_warranty.png`,
  //   show: true,
  //   url: '/pages/mine/warranty/index',
  // },
  // {
  //     title: '使用攻略',
  //     photo: `${OSS_URL}/urm/my_use_guideline.png`,
  //     show: true,
  //     url: '',
  // },
  // {
  //   title: '任务管理',
  //   photo: `${OSS_URL}/urm/my_task_manage.png`,
  //   show: true,
  //   url: '/pages/mine/taskManage/index',
  // },
  // {
  //   title: '奖励管理',
  //   photo: `${OSS_URL}/urm/my_award_manage.png`,
  //   show: true,
  //   url: '/pages/mine/awardManage/index',
  // },
])

const showRecharge = ref(false)
function handleJump(i: any) {
  if (i.url) {
    router.navigateTo({
      path: i.url,
    })
  } else if (i.id === id_recharge) {
    showRecharge.value = true
  }
}
// 完善信息
function handlePrefectInfo() {
  // router.navigateTo({
  //   path: `/pages/mine/prefectInformation/index`,
  //   query: { type: '1' },
  // })
}

onMounted(() => {})
</script>

<template>
  <view class="patriarch_card">
    <view class="info" @click="handlePrefectInfo">
      <image
        :src="userInfo.avatarUrl ? userInfo.avatarUrl : defaultAvatar"
        mode=""
        class="header"
      ></image>
      <view class="right">
        <view class="right-top">
          <text class="name">{{ userInfo.nickName }}</text>
          <text class="identity">家长</text>
        </view>
        <view class="right-bottom">
          <text
            >乐贝：<text class="currency">{{ userInfo.currency }}</text></text
          >
        </view>
      </view>
    </view>
    <view class="function">
      <template v-for="i in list" :key="i.title">
        <view v-if="i.show" class="function_item" @click="handleJump(i)">
          <view class="photo_box">
            <image :src="i.photo" mode="" class="photo"></image>
            <text v-if="i.id === id_apply && bindApplyList?.length" class="unread">
              {{ bindApplyList?.length }}
            </text>
          </view>
          <text class="title">{{ i.title }}</text>
        </view>
      </template>
    </view>
    <recharge v-model="showRecharge" />
  </view>
</template>

<style lang="scss" scoped>
.patriarch_card {
  padding: 30rpx;
  background-color: #fff;
  border-radius: 20rpx;

  .info {
    display: flex;
    align-items: center;
    gap: 30rpx;

    .header {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
    }

    .right {
      display: flex;
      flex-direction: column;
      gap: 10rpx;
      justify-content: ce;

      .right-top {
        display: flex;
        gap: 10rpx;
        align-items: center;

        .name {
          display: inline-block;
          font-weight: 500;
          font-size: 32rpx;
          line-height: 48rpx;
          color: rgba(51, 51, 51, 1);
        }

        .identity {
          display: block;
          height: 30rpx;
          padding: 0 10rpx;
          background-color: rgba(93, 185, 255, 1);
          border-radius: 6rpx;
          font-size: 22rpx;
          line-height: 30rpx;
          color: #fff;
        }
      }

      .right-bottom {
        font-size: 28rpx;
        line-height: 40rpx;
        color: $font-aux-color;

        .currency {
          color: #333;
        }
      }
    }
  }

  .function {
    padding: 0 5rpx;
    display: flex;
    flex-wrap: wrap;

    .function_item {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 30rpx 28rpx 0 0;
      width: 130rpx;

      &:nth-child(4n) {
        margin-right: 0;
      }

      .photo_box {
        position: relative;
        display: block;
        width: 80rpx;
        height: 80rpx;

        .photo {
          width: 80rpx;
          height: 80rpx;
        }

        .unread {
          $unread-wh: 24rpx;
          display: block;
          position: absolute;
          text-align: center;
          line-height: $unread-wh;
          right: 0;
          top: 0;
          width: $unread-wh;
          height: $unread-wh;
          font-size: $unread-wh - 6rpx;
          background-color: rgba(255, 40, 40, 1);
          border-radius: 50%;
          color: white;
        }
      }

      .title {
        display: block;
        margin-top: 20rpx;
        font-weight: 400;
        font-size: 26rpx;
        color: rgba(102, 102, 102, 1);
        line-height: 36rpx;
      }
    }
  }
}
</style>