422 lines
9.3 KiB
Vue
422 lines
9.3 KiB
Vue
<route lang="json5">
|
||
{
|
||
style: {
|
||
navigationBarTitleText: '我的页面',
|
||
navigationStyle: 'custom',
|
||
},
|
||
needLogin: true,
|
||
}
|
||
</route>
|
||
|
||
<template>
|
||
<view class="my-page-container">
|
||
<view
|
||
class="background"
|
||
:style="{ backgroundImage: `url(${imgUrl('@/static/my/my-bg.png')})` }"
|
||
></view>
|
||
<image :src="imgUrl('@/static/my/cat-dog.png')" class="cat-dog"></image>
|
||
<view class="bg"></view>
|
||
<view class="my-avatar">
|
||
<wd-img
|
||
:width="100"
|
||
:height="100"
|
||
round
|
||
mode="aspectFill"
|
||
:src="userInfo.avatar == '' ? imgUrl('@/static/my/avatar.jpg') : imgUrl(userInfo.avatar)"
|
||
></wd-img>
|
||
<view class="info">
|
||
<view class="name">{{ userInfo.nickname }}</view>
|
||
<view class="description">爱猫猫，爱狗狗</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="stats-container card">
|
||
<view class="stat-item" v-for="(item, index) in stats" :key="index">
|
||
<view class="stat-number">{{ item.number }}</view>
|
||
<view class="stat-label">{{ item.label }}</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="services-container card">
|
||
<view
|
||
class="service-item"
|
||
v-for="(service, index) in services"
|
||
@click="toPath(service.path)"
|
||
:key="index"
|
||
>
|
||
<view class="service-box">
|
||
<wd-img
|
||
v-if="service.label == '我的服务'"
|
||
:width="42"
|
||
:height="40"
|
||
:src="imgUrl(service.icon)"
|
||
class="service-icon"
|
||
/>
|
||
<wd-img
|
||
v-else
|
||
:width="38"
|
||
:height="40"
|
||
:src="imgUrl(service.icon)"
|
||
class="service-icon"
|
||
/>
|
||
</view>
|
||
<view class="service-label">{{ service.label }}</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 判断该用户是否为宠托师 -->
|
||
<view v-if="userInfo.isPetNursery" class="services-container card">
|
||
<button class="w-full bg-[#ffc107]" @click="toPath('/pages/order/take')">接单页面</button>
|
||
</view>
|
||
|
||
<view class="pets-container card">
|
||
<view class="pets-title">我的宠物</view>
|
||
<view class="pets-list scroll-x overflow-x-auto" scroll-x>
|
||
<view class="pet-item" v-for="(pet, index) in pets" @click="editPet(pet)" :key="index">
|
||
<wd-img :width="60" :height="60" round :src="pet.icon" class="pet-avatar" />
|
||
<view class="pet-label">{{ pet.name }}</view>
|
||
</view>
|
||
<view class="pet-item add-pet" @click="toPath('/pages/pet/pet-add-page')">
|
||
<w-avatar :size="80" class="pet-avatar add-avatar">
|
||
<view class="add-icon">+</view>
|
||
</w-avatar>
|
||
<view class="pet-label">添加</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="settings-container card">
|
||
<view class="list">
|
||
<view
|
||
class="list-item"
|
||
v-for="(item, index) in items"
|
||
@click="toPath(item.to)"
|
||
:key="index"
|
||
>
|
||
<view class="icon">
|
||
<image :src="imgUrl(item.icon)" class="item-icon" />
|
||
</view>
|
||
<view class="label">{{ item.label }}</view>
|
||
<view class="arrow">
|
||
<wd-icon name="arrow-right"></wd-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 引入自定义Tabbar文件 -->
|
||
<Tabbar />
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue'
|
||
import { useUserStore } from '@/store/user'
|
||
import { baseUrl, imgUrl, toast } from '@/utils/commUtils'
|
||
import { httpGet } from '@/utils/http' // 假设你已经封装好了这个方法
|
||
import Tabbar from '@/components/Tabbar.vue'
|
||
|
||
const userStore = useUserStore()
|
||
|
||
const userInfo = userStore.userInfo
|
||
|
||
const stats = ref([
|
||
{ number: 0, label: '粉丝' },
|
||
{ number: 0, label: '关注' },
|
||
{ number: 0, label: '收藏' },
|
||
{ number: 0, label: '获赞' },
|
||
])
|
||
|
||
const services = [
|
||
{ icon: '@/static/my/order.png', label: '我的订单', path: '/pages/order/index' },
|
||
{ icon: '@/static/my/pet.png', label: '我的服务', path: '/pages/service/my-service' },
|
||
{ icon: '@/static/my/wash.png', label: '我的评价', path: '/pages/order/index' },
|
||
{ icon: '@/static/my/service.png', label: '售后服务', path: '/pages/order/index' },
|
||
]
|
||
|
||
const pets = ref([])
|
||
|
||
onShow(async () => {
|
||
await fetchActivities()
|
||
await fetchPets()
|
||
})
|
||
|
||
// 获取社区活动的信息
|
||
const fetchActivities = async () => {
|
||
try {
|
||
const response = await httpGet('/posts/community')
|
||
if (response.code == 200) {
|
||
const index = 0
|
||
for (const key in response.data) {
|
||
if (response.data[key]) {
|
||
stats.value[index] = { number: response.data[key], label: key }
|
||
}
|
||
}
|
||
} else {
|
||
console.log(response)
|
||
}
|
||
} catch (error) {
|
||
console.log(error)
|
||
}
|
||
}
|
||
|
||
const fetchPets = async () => {
|
||
try {
|
||
const response = await httpGet('/petInfo/select', { userId: userStore.userInfo.id })
|
||
pets.value = response.records.map((pet) => ({
|
||
...pet,
|
||
icon: baseUrl + pet.profileUrl,
|
||
}))
|
||
} catch (error) {
|
||
uni.showToast({ title: '网络错误，请重试', icon: 'error' })
|
||
}
|
||
}
|
||
|
||
const editPet = (pet) => {
|
||
uni.navigateTo({
|
||
url: `/pages/pet/pet-add-page?id=${pet.id}&name=${pet.name}&icon=${pet.icon}&breed=${pet.breed}&color=${pet.color}&birthday=${pet.birthday}&gender=${pet.gender}&userId=${pet.userId}`,
|
||
})
|
||
}
|
||
|
||
const items = [
|
||
{ icon: '@/static/my/send.png', label: '我的发布', to: '/pages/publish/index' },
|
||
{
|
||
icon: '@/static/my/handshake.png',
|
||
label: '帮助中心',
|
||
to: '/pages/others/official-account',
|
||
},
|
||
{
|
||
icon: '@/static/my/feedback.png',
|
||
label: '建议反馈',
|
||
to: '/pages/others/official-account',
|
||
},
|
||
{
|
||
icon: '@/static/my/badge.png',
|
||
label: '宠托师认证',
|
||
to: '/pages/certification/index',
|
||
},
|
||
{ icon: '@/static/my/address.png', label: '我的地址', to: '/pages/address/index' },
|
||
{ icon: '@/static/my/settings.png', label: '设置', to: '/pages/settings/index' },
|
||
{ icon: '@/static/my/address.png', label: '地址', to: '/pages/map/index' },
|
||
]
|
||
|
||
const toPath = (path) => {
|
||
uni.navigateTo({
|
||
url: path,
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.my-page-container {
|
||
position: relative;
|
||
width: 100%;
|
||
overflow: scroll;
|
||
|
||
.bg {
|
||
position: absolute;
|
||
top: 250px;
|
||
z-index: -1;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: #fbfbfb;
|
||
}
|
||
|
||
.card {
|
||
margin: 10rpx;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.background {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: -1;
|
||
width: 100%;
|
||
height: 30%;
|
||
background-repeat: no-repeat;
|
||
background-size: cover;
|
||
}
|
||
|
||
.cat-dog {
|
||
position: absolute;
|
||
top: 140px;
|
||
right: 0;
|
||
width: 120px;
|
||
height: 127px;
|
||
}
|
||
|
||
.my-avatar {
|
||
display: grid;
|
||
grid-template-columns: auto 1fr;
|
||
grid-gap: 10px;
|
||
align-items: center;
|
||
padding-top: 130px;
|
||
padding-left: 30px;
|
||
|
||
.info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.name {
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.description {
|
||
font-size: 16px;
|
||
color: #666;
|
||
}
|
||
}
|
||
|
||
.stats-container {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
padding: 20px 0;
|
||
background-color: #fff;
|
||
|
||
.stat-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.stat-number {
|
||
font-size: 20px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.stat-label {
|
||
font-size: 14px;
|
||
color: #666;
|
||
}
|
||
}
|
||
|
||
.services-container {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
padding: 20px 0;
|
||
background-color: #fff;
|
||
|
||
.service-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.service-box {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 105rpx;
|
||
height: 100rpx;
|
||
padding: 8px;
|
||
cursor: pointer;
|
||
background-color: #fcd038;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.service-icon {
|
||
width: 100%;
|
||
object-fit: cover;
|
||
border-radius: inherit;
|
||
}
|
||
|
||
.service-label {
|
||
padding-top: 8px;
|
||
font-size: 14px;
|
||
color: #666;
|
||
}
|
||
}
|
||
|
||
.pets-container {
|
||
padding: 20px;
|
||
background-color: #fff;
|
||
|
||
.pets-title {
|
||
margin-bottom: 10px;
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.pets-list {
|
||
display: flex;
|
||
gap: 30rpx;
|
||
}
|
||
|
||
.pet-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.pet-avatar {
|
||
border: 2px solid #fcd038;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.add-avatar {
|
||
width: 102rpx;
|
||
height: 102rpx;
|
||
background-color: #fff;
|
||
border: 2px dashed #fcd038;
|
||
}
|
||
|
||
.add-icon {
|
||
font-size: 36px;
|
||
line-height: 45px;
|
||
color: #fcd038;
|
||
text-align: center;
|
||
}
|
||
|
||
.pet-label {
|
||
font-size: 14px;
|
||
color: #666;
|
||
}
|
||
}
|
||
|
||
.settings-container {
|
||
background-color: #f5f5f5;
|
||
|
||
.list {
|
||
margin-bottom: 10px;
|
||
overflow: hidden;
|
||
background-color: #fff;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.list-item {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 15px 10px;
|
||
border-bottom: 1px solid #eee;
|
||
}
|
||
|
||
.list-item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.icon {
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.item-icon {
|
||
width: 20px;
|
||
height: 20px;
|
||
}
|
||
|
||
.label {
|
||
flex: 1;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.arrow {
|
||
font-size: 16px;
|
||
color: #b2b2b2;
|
||
}
|
||
}
|
||
}
|
||
</style>
|