猫妈狗爸伴宠师小程序前端代码
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.
 
 
 
 

128 lines
4.3 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 pd4 radius20 mb28">
<view class=" mb28 flex flex-between">
<view class="font36">我的宠物</view>
<view style="color: #707070">更多 ></view>
</view>
<view>
<up-button v-if="!getIsLogin()" @click="handleLogin" class="mb20" size="large"
style="width: 600rpx;height: 135rpx;" type="primary" text="登录后管理宠物" shape=""
color="#FFF4E5"></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" @click="toNext">
<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 class="icon-list">
<up-image class="mb20" :show-loading="true"
src="https://t9.baidu.com/it/u=2834693008,3232051400&fm=193" 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')
}
const toNext = () => {
uni.navigateTo({
url: "/otherPages/orderTakingManage/evaluate/index"
})
}
</script>
<style scoped lang="scss">
@import "index";
</style>