designer-hub/src/pages/mine/index.vue

<route lang="json5">
{ layout: 'tabbar', style: { navigationBarTitleText: '我的', navigationStyle: 'custom' } }
</route>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import Card from '@/components/card.vue'
import CardMenu from '@/components/card-menu.vue'
import SectionHeading from '@/components/section-heading.vue'
import StartMenuButton from '@/components/start-menu-button.vue'
import { designer, settled, treaty, vipBg } from '@/core/libs/pngs'
import { integral, coupon, order, agent, setting, wechat, award, camera } from '@/core/libs/svgs'
import { getMemberUserInfo } from '@/core/libs/requests'

const { data, run } = useRequest(getMemberUserInfo)
const menus = ref([
  { title: '积分明细', icon: integral },
  { title: '优惠券包', icon: coupon },
  { title: '我的订单', icon: order },
  { title: '专属客服', icon: agent },
  { title: '个人设置', icon: setting },
])
const pieces = ref([
  {
    title: '设计师成长计划',
    desc: '赋能设计共同成长',
    icon: designer,
    class: 'items-start! pb-0 pr-0 col-start-1 row-start-1 row-end-3',
    iconSize: 102,
  },
  {
    title: '材料商入驻',
    desc: '提供优质材料商',
    icon: settled,
    class: 'flex-row! pb-0 pr-0 col-start-2 row-start-1',
    iconSize: 68,
  },
  {
    title: '筑巢荟公约',
    desc: '共同遵守平台公约',
    icon: treaty,
    class: 'col-start-2 row-start-2 flex-row! pb-0',
    iconSize: 44,
  },
])
onMounted(async () => {
  await run()
  console.log(data)
})
</script>

<template>
  <view>
    <div class="bg-black/30 backdrop-blur-[60px] aspect-[1.15/1]">
      <StartMenuButton />
      <div class="my-6.5 px-3.5 flex">
        <img
          class="w-[72px] h-[72px] rounded-full border border-white"
          src="https://via.placeholder.com/72x72"
        />
        <div class="ms-3.5 ml-3.5">
          <div class="text-white text-xl font-normal font-['PingFang SC'] leading-normal">
            用户SEI142
          </div>
          <div
            class="mt-2 w-[63px] h-[26px] bg-black/10 rounded-[20px] border border-white/60 flex items-center justify-center"
          >
            <div
              class="text-center text-white text-xs font-normal font-['PingFang SC'] leading-normal"
            >
              未认证
            </div>
          </div>
        </div>
      </div>
      <div class="px-3.5 flex items-center">
        <div class="flex items-center">
          <div class="text-white text-base font-normal font-['PingFang SC'] leading-normal mr-1">
            36
          </div>
          <div
            class="text-center text-[#e9e7e4] text-xs font-normal font-['PingFang SC'] leading-normal"
          >
            分享
          </div>
        </div>

        <div class="h-4 w-[2px] mx-4 bg-[#e9e7e4]"></div>

        <div class="flex items-center">
          <div class="text-white text-base font-normal font-['PingFang SC'] leading-normal mr-1">
            36
          </div>
          <div
            class="text-center text-[#e9e7e4] text-xs font-normal font-['PingFang SC'] leading-normal"
          >
            分享
          </div>
        </div>

        <div class="h-4 w-[2px] mx-4 bg-[#e9e7e4]"></div>

        <div class="flex items-center">
          <div class="text-white text-base font-normal font-['PingFang SC'] leading-normal mr-1">
            36
          </div>
          <div
            class="text-center text-[#e9e7e4] text-xs font-normal font-['PingFang SC'] leading-normal"
          >
            分享
          </div>
        </div>
      </div>
    </div>
    <div class="relative top--18">
      <div class="mx-3.5 box-border absolute left-0 right-0 top-0">
        <wd-img :src="vipBg" width="100%" mode="widthFix"></wd-img>
      </div>
      <div class="mx-3.5 box-border absolute left-0 right-0 top-0 p-3.5">
        <div class="flex items-center">
          <div
            class="text-center text-[#faeac6] text-sm font-normal font-['PingFang SC'] leading-normal"
          >
            查看会员等级权益
          </div>
          <div class="flex-1"></div>
          <div
            class="w-[83px] h-[29px] bg-gradient-to-l from-[#ffdab6] to-[#ffebd5] rounded-[30px] flex items-center justify-center"
          >
            <div
              class="text-[#9e5934] text-[13px] font-normal font-['PingFang SC'] leading-relaxed"
            >
              去认证
            </div>
          </div>
        </div>
      </div>
    </div>
    <view class="bg-neutral-100 relative bottom-4 rounded-t-2xl py-1 px-3.5">
      <div class="flex justify-around my-6">
        <template v-for="({ title, icon }, i) in menus" :key="i">
          <div class="flex flex-col items-center">
            <div class="relative flex-col justify-start items-start inline-flex">
              <wd-img :src="icon" width="24" height="24" custom-class="vertical-bottom"></wd-img>
            </div>
            <div
              class="mt-2 text-black/90 text-[12.86px] font-normal font-['PingFang SC'] leading-relaxed"
            >
              {{ title }}
            </div>
          </div>
        </template>
      </div>
      <SectionHeading title="和筑巢荟一起共同成长"></SectionHeading>
      <CardMenu :items="pieces" custom-class="grid-cols-2" />
    </view>
  </view>
</template>

<style scoped lang="scss"></style>