designer-hub/packages/app/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 CardMenu from '@/components/card-menu.vue'
import SectionHeading from '@/components/section-heading.vue'
import { designer, settled, treaty, vipBg, memberTextV1 } from '../../core/libs/pngs'
import {
  integral,
  coupon,
  order,
  agent,
  setting,
  vip,
  scan,
  memberIconV1,
} from '../../core/libs/svgs'
import { getMemberUserInfo, getTasks } from '../../core/libs/requests'
import { useUserStore } from '../../store'
import { storeToRefs } from 'pinia'
import { isEmpty } from 'radash'
import TasksCard from './components/tasks-card.vue'

const userStore = useUserStore()
const { isLogined, userInfo } = storeToRefs(userStore)
const { setUserInfo } = userStore
const { data, run } = useRequest(getMemberUserInfo)
const { data: taskData, run: getTaskData } = useRequest(() => getTasks({}), {
  initialData: { list: [] },
})
const menus = ref([
  { title: '积分明细', icon: integral, path: '/pages/mine/points/index' },
  { title: '优惠券包', icon: coupon, path: '/pages/mine/coupons/index' },
  { title: '我的订单', icon: order, path: '/pages/mine/orders/index' },
  { title: '专属客服', icon: agent },
  { title: '个人设置', icon: setting, path: '/pages/mine/setting/index' },
])
const pieces = ref([
  {
    title: '设计师成长计划',
    desc: '赋能设计共同成长',
    icon: designer,
    class: 'items-start! pb-0 pr-0',
    iconSize: 102,
    gridItemClass: 'col-start-1 row-start-1 row-end-3',
  },
  {
    title: '材料商入驻',
    desc: '提供优质材料商',
    icon: settled,
    class: 'flex-row! pb-0 pr-0',
    iconSize: 68,
    gridItemClass: 'col-start-2 row-start-1',
    path: '/pages/material/settled-in/index',
  },
  {
    title: '筑巢荟公约',
    desc: '共同遵守平台公约',
    icon: treaty,
    class: 'col-start-2 row-start-2 flex-row! pb-0',
    iconSize: 44,
    gridItemClass: 'col-start-2 row-start-2',
    path: '/pages/mine/convention/index',
  },
])

const avatar = computed(() =>
  !isEmpty(userInfo.value.avatar) ? userInfo.value.avatar : 'https://via.placeholder.com/72x72',
)
const nickNameClickHandle = async () => {
  if (isLogined.value) return
  uni.navigateTo({ url: '/pages/login/index' })
}
onShow(async () => {
  if (isLogined.value) {
    await run()
    setUserInfo({
      ...userInfo.value,
      ...data.value,
    })
  }
})
const handleToAuthentication = () => {
  if (!isLogined.value) return
  uni.navigateTo({ url: '/pages/mine/authentication/index' })
}
const handleToHomepage = () => {
  uni.navigateTo({ url: '/pages/mine/homepage/index' })
}
const handleMenuClick = (path) => {
  path && uni.navigateTo({ url: path })
}
onMounted(async () => {
  // await run()
  // console.log(data.value)
  await getTaskData()
})
const navBarProps = ref({ customClass: 'bg-transparent!' })
onPageScroll(({ scrollTop }: { scrollTop: number }) => {
  // console.log(scrollTop)
  navBarProps.value.customClass = scrollTop === 0 ? 'bg-transparent!' : ''
})
</script>

<template>
  <view>
    <wd-navbar
      fixed
      safeAreaInsetTop
      custom-class="bg-transparent!"
      :bordered="false"
      v-bind="navBarProps"
    >
      <template #left>
        <wd-button type="text" size="small" custom-class="p-0!" :round="false">
          <wd-img width="25" height="25" :src="scan" custom-class="vertical-bottom"></wd-img>
        </wd-button>
      </template>
    </wd-navbar>
    <div
      class="bg-black/30 backdrop-blur-[60px] flex flex-col justify-end box-border bg-[url(https://image.zhuchaohui.com/zhucaohui/723968e69b86768f546f5df6cf03f25e2aa5c989e4f781a4fe90079dedd39fdd.jpg)]"
      :class="[userInfo.userStatusEnabled ? 'aspect-[0.94/1] pb-44' : 'aspect-[1.15/1] pb-20']"
    >
      <div class="my-6.5 px-3.5 flex">
        <img class="w-[72px] h-[72px] rounded-full border border-white" :src="avatar" />
        <div class="ms-3.5 ml-3.5">
          <div
            class="text-white text-xl font-normal font-['PingFang SC'] leading-normal"
            @click="nickNameClickHandle"
          >
            {{ !isLogined ? '请点击登录' : userInfo?.nickname }}
          </div>
          <div
            v-if="!userInfo.userStatusEnabled"
            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
            v-if="userInfo.userStatusEnabled"
            class="flex items-center text-white"
            @click="handleToHomepage"
          >
            <div
              class="text-center text-white text-sm font-normal font-['PingFang SC'] leading-normal"
            >
              个人主页
            </div>
            <wd-icon name="arrow-right"></wd-icon>
          </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" v-if="!userInfo.userStatusEnabled">
      <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">
          <wd-img custom-class="vertical-bottom" :src="vip" width="35" mode="widthFix"></wd-img>
          <div
            class="ml-2 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"
            @click="handleToAuthentication()"
          >
            <div
              class="text-[#9e5934] text-[13px] font-normal font-['PingFang SC'] leading-relaxed"
            >
              去认证
            </div>
          </div>
        </div>
      </div>
    </div>
    <template v-else>
      <div class="relative top--36">
        <div
          class="mx-3.5 absolute left-0 right-0 top--4 h-[180px] bg-gradient-to-r from-[#141414] to-[#4b4b49] rounded-tl-[10px] rounded-tr-[10px] p-3.5 box-border"
          :class="['text-[#8FB8DB]']"
        >
          <div class="flex items-center">
            <wd-img class="" width="20" height="20" :src="memberIconV1"></wd-img>
            <wd-img class="" width="108" height="27" :src="memberTextV1"></wd-img>
            <div class="flex-1"></div>
            <div
              class="h-[22px] bg-gradient-to-r from-[#333333] to-[#20201e] rounded-tl-[20px] rounded-bl-[20px] mr--3.5 px-2"
            >
              <div class="text-xs font-normal font-['PingFang SC'] leading-relaxed">
                更多等级权益
              </div>
            </div>
          </div>
          <div class="flex items-end mt-10">
            <div>
              <span class="text-4xl font-normal font-['D-DIN Exp']">{{ userInfo.point }}</span>
              <span class="text-center text-xs font-normal font-['PingFang SC']">积分</span>
            </div>
            <div class="flex-1"></div>
            <div class="text-sm font-normal font-['PingFang SC']">
              会员号：{{ userInfo.userId }}
            </div>
          </div>
        </div>
      </div>
      <!-- <div class="relative h-4 box-border bg-transparent rounded-b-[50%] z-1"></div> -->
    </template>
    <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, path }, i) in menus" :key="i">
          <div class="flex flex-col items-center" @click="handleMenuClick(path)">
            <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>
      <TasksCard custom-class="my-6" :items="taskData.list"></TasksCard>
      <SectionHeading custom-class="my-6" title="和筑巢荟一起共同成长"></SectionHeading>
      <CardMenu :items="pieces" custom-class="grid-cols-2" />
    </view>
  </view>
</template>

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