<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>
|