pet-front/pages/userManage/index.vue

<template>
  <view>
    <view class="user-header">
      <view class="flex flex-between login">
        <view class="flex">
          <up-image class="mr20" width="120rpx" height="120rpx" src="https://cdn.uviewui.com/uview/album/1.jpg"
                    shape="circle"></up-image>
          <view>{{!getIsLogin()?userInfo.name:"欢迎来到版宠师"}}</view>
        </view>
        <view style="width: 140rpx" v-if="!getIsLogin()">
          <up-button @click="handleLogin" :customStyle="{borderColor:'#fff'}" type="primary" text="请登录"
                     shape="circle"
                     color="#FFBF60"></up-button>
        </view>
      </view>
      <view class="header-money">
        <view class="header-money-list">
          <view class="header-money-item flex flex-evenly">
            <view style="text-align: center">
              <view class="mb20 flex">
                <up-image :show-loading="true" src="https://cdn.catmdogd.com/Work/image/work/icon4.png" width="68rpx"
                          height="68rpx"></up-image>
                服务酬劳
              </view>
              <view class="mb20">--</view>
              <view class="flex flex-between but">
                <view>提现</view>
                <view>|</view>
                <view>明细</view>
              </view>
            </view>
            <view style="text-align: center">
              <view class="mb20 flex">
                <up-image :show-loading="true" src="https://cdn.catmdogd.com/Work/image/work/icon4.png" width="68rpx"
                          height="68rpx"></up-image>
                保证金
              </view>
              <view class="mb20">--</view>
              <view class="but">保证金中心</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="user-container">
      <view class="bgf pd40 radius20 mb28">
        <view class=" mb28 flex flex-between">
          <view class="font36">我的宠物</view>
          <view style="color: #3c9cff">更多 ></view>
        </view>
        <view>
          <up-button v-if="!getIsLogin()" @click="handleLogin" class="mb20" size="large" style="width: 500rpx"
                     type="primary"
                     text="登录后管理宠物" shape="circle"
                     color="linear-gradient(to right, rgb(255 ,191 ,96 ,1), rgb(255, 51, 186))"></up-button>
          <up-button v-if="getIsLogin()" class="mb20" size="large" style="width: 500rpx" type="primary"
                     text="请添加您的爱宠"
                     shape="circle"
                     color="linear-gradient(to right, rgb(255 ,191 ,96 ,1), rgb(255, 51, 186))"></up-button>
          <view v-if="isLogin" class="cw-box radius20 pd20 flex">
            <up-image class="mr20" width="140rpx" style="flex-shrink: 0" height="140rpx"
                      src="https://cdn.uviewui.com/uview/album/1.jpg"
                      shape="circle"></up-image>
            <view style="width: 418rpx">
              <view class="font32 mb20">阿拉斯加</view>
              <view class="font24 ellipsis">澳大利亚雾猫（澳洲，原“斑点雾猫”）| 1 个月</view>
            </view>
          </view>
        </view>
      </view>
      <view class="bgf pd40 radius20">
        <view class="font36 mb28">服务中心</view>
        <view class="flex flex-between font28 flex-wrap">
          <view class="icon-list">
            <up-image class="mb20" src="https://cdn.catmdogd.com/Work/image/work/icon1.png"
                      width="68rpx"
                      height="68rpx"></up-image>
            <view>优惠卷</view>
          </view>
          <view class="icon-list">
            <up-image class="mb20" :show-loading="true" src="https://cdn.catmdogd.com/Work/image/work/icon2.png"
                      width="68rpx"
                      height="68rpx"></up-image>
            <view>平台协议</view>
          </view>
          <view class="icon-list">
            <up-image class="mb20" :show-loading="true" src="https://cdn.catmdogd.com/Work/image/work/icon3.png"
                      width="68rpx"
                      height="68rpx"></up-image>
            <view>订阅通知</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import {ref} from "vue"
import {getIsLogin, getStorage, getToken} from "../../utils/auth";
import tab from "../../plugins/tab";

const isLogin = ref(false)
const userInfo = ref({})
if (getIsLogin() && getToken()) {
  userInfo.value = getStorage("userInfo")
  isLogin.value = true
}
const handleLogin = () => {
  tab.navigateTo('/pages/login/index')
}

</script>
<style scoped lang="scss">
@import "index";
</style>