x-forend/src/pages/my/index.vue

<route lang="json5" type="page">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '个人中心',
  },
}
</route>

<template>
  <view class="my-page">
    <NavBar />
    <view class="flex flex-col items-center justify-center mt-30">
      <Avatar
        class="w-80 h-80 mx-auto"
        :src="userStore.userInfo?.member_portrait"
        @click="uploadAvatar"
      />
      <view class="text-16 mt-10">{{ userStore.userInfo?.member_username }}</view>
      <!-- <view class="text-12 mt-8">账号：{{ userStore.userInfo?.member_username }}</view> -->
    </view>
    <view class="flex justify-center text-center mt-15">
      <view class="">
        <view class="text-30 font-bold">{{ userStore.userInfo?.member_dividend }}</view>
        <view class="text-14 mt-10 text-#3B81F3">我的分红</view>
      </view>
      <view class="ml-30">
        <view class="text-30 font-bold">{{ userStore.userInfo?.member_currency }}</view>
        <view class="text-14 mt-10 text-#3B81F3">数字人民币</view>
      </view>
    </view>

    <view class="flex px-15 mt-15">
      <view
        class="flex py-30 justify-center items-center rounded-tl-10 rounded-br-10 flex-1 bg-[linear-gradient(180deg,#D9EBFF,#9EDAFF)] border-1 border-#5FAEFF80 border-solid"
        @click="handleWithdrawal"
      >
        <image class="w-40 h-40" src="@/static/images/my/withdrawal.png" mode="aspectFit" />
        <view
          class="text-white text-14 px-15 py-5 ml-15 rounded-full bg-[linear-gradient(45deg,#3B81F3_0%,#37E6EC_100%)]"
        >
          提现
        </view>
      </view>
      <!-- <view
        class="ml-10 flex py-30 justify-center items-center rounded-tl-10 rounded-br-10 flex-1 bg-[linear-gradient(180deg,#D9EBFF,#9EDAFF)] border-1 border-#5FAEFF80 border-solid"
        @click="handleWithdrawalRecord"
      >
        <image class="w-40 h-40" src="@/static/images/my/top-up.png" mode="aspectFit" />
        <view
          class="text-white text-14 px-15 py-5 ml-15 rounded-full bg-[linear-gradient(45deg,#3B81F3_0%,#37E6EC_100%)]"
        >
          提现记录
        </view>
      </view> -->
      <view
        class="ml-10 flex py-30 justify-center items-center rounded-tl-10 rounded-br-10 flex-1 bg-[linear-gradient(180deg,#D9EBFF,#9EDAFF)] border-1 border-#5FAEFF80 border-solid"
        @click="handleRecharge"
      >
        <image class="w-40 h-40" src="@/static/images/my/top-up.png" mode="aspectFit" />
        <view
          class="text-white text-14 px-15 py-5 ml-15 rounded-full bg-[linear-gradient(45deg,#3B81F3_0%,#37E6EC_100%)]"
        >
          充值
        </view>
      </view>
    </view>

    <image
      class="w-330 h-123 mx-auto mt-15 block"
      src="@/static/images/my/recommend.png"
      mode="aspectFill"
      @click="handlePurchaseMember"
    />

    <view class="mt-15 grid grid-cols-2 gap-10 p-15">
      <view
        @click="handleTeam"
        class="flex justify-center rounded-tl-10 rounded-br-10 bg-[linear-gradient(45deg,#EFF7FF,#D1E8FF)] p-15 border border-#BEDCFF border-solid"
      >
        <image class="w-24 h-24" src="@/static/images/my/team.png" mode="aspectFit" />
        <view class="text-14 text-#333 ml-10">我的邀请</view>
      </view>
      <view
        @click="handleAsset"
        class="flex justify-center rounded-tl-10 rounded-br-10 bg-[linear-gradient(45deg,#EFF7FF,#D1E8FF)] p-15 border border-#BEDCFF border-solid"
      >
        <image class="w-24 h-24" src="@/static/images/my/house.png" mode="aspectFit" />
        <view class="text-14 text-#333 ml-10">我的资产</view>
      </view>

      <view
        @click="handleRealName"
        class="flex justify-center rounded-tl-10 rounded-br-10 bg-[linear-gradient(45deg,#EFF7FF,#D1E8FF)] p-15 border border-#BEDCFF border-solid"
      >
        <image class="w-24 h-24" src="@/static/images/my/realname.png" mode="aspectFit" />
        <view class="text-14 text-#333 ml-10">实名认证</view>
      </view>
      <view
        @click="handleBankCard"
        class="flex justify-center rounded-tl-10 rounded-br-10 bg-[linear-gradient(45deg,#EFF7FF,#D1E8FF)] p-15 border border-#BEDCFF border-solid"
      >
        <image class="w-24 h-24" src="@/static/images/my/kefu.png" mode="aspectFit" />
        <view class="text-14 text-#333 ml-10">我的银行卡</view>
      </view>
    </view>

    <view
      class="mt-50 mx-auto w-294 bg-[linear-gradient(45deg,#3B81F3,#37E6EC)] rounded-full text-center text-14 text-white py-15 mt-15"
      @click="handleLogout"
    >
      退出登录
    </view>
  </view>
</template>

<script lang="ts" setup>
import Avatar from '@/components/Avatar.vue'
import NavBar from '@/components/NavBar.vue'
import { loginRoute } from '@/interceptors/route'
import { logoutAPI, updateUserAPI } from '@/service'
import { useUserStore } from '@/store/user'

const userStore = useUserStore()

const handleLogout = async () => {
  // logoutAPI()
  userStore.logout()
  uni.reLaunch({
    url: loginRoute,
  })
}
const handleRecharge = () => {
  uni.navigateTo({
    url: '/pages-sub/recharge/index',
  })
}

const handleWithdrawal = () => {
  uni.navigateTo({
    url: '/pages-sub/withdrawal/index',
  })
}

const handleTeam = () => {
  uni.navigateTo({
    url: '/pages-sub/team/index',
  })
}

const handleRealName = () => {
  uni.navigateTo({
    url: '/pages-sub/realname/index',
  })
}

const handleAsset = () => {
  uni.navigateTo({
    url: '/pages-sub/asset/index',
  })
}

const handleBankCard = () => {
  uni.navigateTo({
    url: '/pages-sub/withdrawal-type/index',
  })
}

const handlePurchaseMember = () => {
  uni.navigateTo({
    url: '/pages-sub/purchase-member/index',
  })
}

const handleWithdrawalRecord = () => {
  uni.navigateTo({
    url: '/pages-sub/withdrawal-detail/index',
  })
}

const { data, run } = useUpload<any>()
const uploadAvatar = () => {
  run()
}

watch(data, async (newVal) => {
  const path = JSON.parse(newVal)?.data?.path
  await updateUserAPI({
    member_portrait: path,
  })
  userStore.loadUserInfo()
})
</script>

<style lang="scss" scoped>
.my-page {
  min-height: 100vh;
  padding-bottom: 100rpx;
  background-image: url('@/static/images/bg.png');
  background-position: top;
  background-size: cover;
}
</style>