猫妈狗爸伴宠师小程序前端代码
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

116 lines
4.6 KiB

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