pet-front/pages/userManage/index.vue

<template>
	<view>
			<view class="user-header">
				<view class="flex flex-between login">
					<view style="width: 120rpx;">
						<up-image class="mr20" width="120rpx" height="120rpx" :src="userInfo.userImage || 'https://image.hhlm1688.com/img/work/log/headImage.png'"
							shape="circle"></up-image>
					</view>

					<view style="width: calc(100% - 120rpx); padding-left: 20rpx;box-sizing: border-box;">
						<view class="base-leavel">
							<text>{{isLogin ? userInfo.userName : "欢迎来到版宠师"}}</text>
						</view>
						<view v-if="isLogin">
							<image v-if="petMaster" class="role-tag" :src="petMaster" mode="aspectFill"></image>
							<image v-if="partnerMaster" class="role-tag" :src="partnerMaster" mode="aspectFill"></image>
						</view>
						<!-- <view>
							手机号:{{ userInfo?.userTelephone }}
						</view> -->
					</view>

					<!-- <view style="width: 140rpx">
						<up-button v-else @click="logout" :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> -->
									<up-image :show-loading="true" src="/static/images/user/a2.png"
									style="margin-right: 14rpx;"
										width="50rpx" height="50rpx"></up-image>
									服务酬劳
								</view>
								<view class="mb20">{{ isLogin ? userInfo.price || '0' : '--' }}元</view>
								<view class="flex flex-between but">
									<view @click="handleWithdraw">提现</view>
									<view>|</view>
									<view @click="handleRunningWater">明细</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> -->
									
									<up-image :show-loading="true" src="/static/images/user/a1.png"
									style="margin-right: 14rpx;"
									width="50rpx" height="50rpx"></up-image>
									
									保证金
								</view>
								<view class="mb20">{{ isLogin ? userInfo.baoPrice || '0' : '--' }}元</view>
								<view @click="handleBail" 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 @click="handleMyPet" style="color: #707070">更多 ></view>
					</view>
					<view>
						<view v-if="isLogin && petList.length">
							<scroll-view scroll-x class="pet-scroll-container" show-scrollbar="false">
								<view class="pet-scroll-content">
									<view class="cw-box radius20 pd20 flex pet-item"
									v-for="(pet, inde) in petList"
									@click="handleEditPet(pet)"
									:key="pet.id">
										<up-image class="mr20" width="120rpx" style="flex-shrink: 0" height="120rpx"
											:src="pet?.headImage" shape="circle"></up-image>
										<view style="width: 280rpx">
											<view class="font32 mb20 pet-name-container">
												{{ pet.nickName }}
												<text class="pet-gender" :class="{'pet-gender-male': pet.sex === 0, 'pet-gender-female': pet.sex === 1}">
													{{ pet.sex === 0 ? '♂' : '♀' }}
												</text>
											</view>
											<view class="font24 ellipsis">{{ pet.type }} | {{ pet.age }}</view>
										</view>
									</view>
								</view>
							</scroll-view>
						</view>
						
						<view class="no-pet-tip radius20 pd20 flex" v-else>
							<up-image class="mr20" width="80rpx" height="80rpx" src="https://image.hhlm1688.com/img/work/log/headImage.png" shape="circle"></up-image>
							<view class="no-pet-text">{{isLogin ? '您还没有添加您的爱宠信息呢' : '登录后查看您的爱宠'}}</view>
							<view class="add-pet-btn" @click="handleMyPet">{{isLogin ? '去添加' : '去登录'}}</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="handleEvaluate">
							<!-- <up-image class="mb20" src="https://cdn.catmdogd.com/Work/image/work/icon1.png" width="68rpx"
								height="68rpx"></up-image> -->
							
								<image class="mb20" 
								src="/static/images/user/1.png"
								style="width: 58rpx;height: 58rpx;"
								></image>
							<view>我的评价</view>
						</view>
						<view @click="platformProtocol" 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> -->
							
								<image class="mb20"
								src="/static/images/user/2.png"
								style="width: 58rpx;height: 58rpx;"
								></image>
							<view>平台协议</view>
						</view>
						<button plain class="btn-share" open-type="contact">
							<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> -->
									
									<image class="mb20"
									src="/static/images/user/4.png"
									style="width: 58rpx;height: 58rpx;"
									></image>
									<view>联系客服</view>
								</view>
						</button>
						<button plain class="btn-share" open-type="share">
							<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> -->
									
									<image class="mb20"
									src="/static/images/user/5.png"
									style="width: 58rpx;height: 58rpx;"
									></image>
								<view>分享好友</view>
							</view>
						</button>
					</view>
					<!-- <view class="flex flex-between font28 flex-wrap mt20">
						<view class="icon-list" @click="logout">
							<up-image class="mb20"
								src="https://cdn.catmdogd.com/2025/04/01ab556ca51d2a4f82896c1e6fd0034a8b7shDr3f7qeDQ527d93075294e7237cee8b6c7d613be8.png"
								width="68rpx" height="68rpx" bgColor="#ffffff"></up-image>
							<view>退出登录</view>
						</view>
					</view> -->
				</view>
			</view>
	</view>

	<up-popup :show="show" @close="close" :round="10">
		<view style="padding: 10rpx 20rpx;height: 50vh;overflow-y: scroll;" v-html="content"></view>
	</up-popup>

	<Modal @confirm="confirmLogout" @cancel="cancelLogout" ref="modal">
		<template>
			<view class="tip">
				确认退出登录?
			</view>
		</template>
	</Modal>

	<!-- 客服组件 -->
	<CustomerService />
</template>

<script setup>
	import {
		computed,
		onMounted,
		ref
	} from "vue"
	import {
		getIsLogin,
		getStorage,
		getToken,
		removeIsLogin
	} from "../../utils/auth";
	import { getLoginStatus } from "@/utils/useMixin.js"
	import tab from "../../plugins/tab";
	import Modal from "@/components/Modal/index.vue"
	import {
		useStore
	} from "vuex"
	import {
		onShow,
		onShareAppMessage,
	} from "@dcloudio/uni-app"
	import {
		getpetList
	} from "@/api/pet/index.js"

	onShow(() => {
		checkLoginStatus();
		if (isLogin.value) {
			getPet();
		}
	})

	onMounted(() => {
		content.value = configList.value?.['home_agreement']?.paramValueArea || ""

		// 分享好友
		onShareAppMessage(() => {
			return {
				title: configList.value.applet_info.paramValueText, // 分享标题
				imageUrl: configList.value.applet_info.paramValueImage, // 分享图片地址，非必须
				path: '/pages/workbenchManage/index', // 分享路径
			};
		})
	})

	const store = useStore();
	const isLogin = ref(false)
	const userInfo = computed(() => {
		return store.getters.userInfo
	})
	const configList = computed(() => {
		return store.getters.configList;;
	})
	const petList = ref([])
	const show = ref(false)
	const content = ref("")
	const modal = ref(null)

	const LEVEL_AND_KEY_FIELDS_MAPPING = {
		'1': 'primary',
		'2': 'intermediate',
		'3': 'senior',
	}

	// 按伴宠师等级选中图标
	const petMaster = computed(() => {
		if (!isLogin.value) return ''
		const { userBcs, userBcsRole } = userInfo.value

		if (!userBcs) {
			return ''
		}

		const key = `pet_${LEVEL_AND_KEY_FIELDS_MAPPING[userBcsRole]}`

		return configList.value?.[key]?.paramValueImage
	})
	// 按合伙人等级选中图标
	const partnerMaster = computed(() => {
		if (!isLogin.value) return ''
		const { userHh } = userInfo.value

		if (!userHh) {
			return ''
		}

		const key = `partner_${LEVEL_AND_KEY_FIELDS_MAPPING[userHh]}`

		return configList.value?.[key]?.paramValueImage
	})

	// 检查登录状态
	const checkLoginStatus = () => {
		if (getIsLogin() && getToken()) {
			isLogin.value = true
		} else {
			isLogin.value = false
		}
	}

	// 检查登录状态，未登录则跳转登录
	const checkLoginAndRedirect = () => {
		if (!isLogin.value) {
			uni.navigateTo({
				url: "/pages/login/index"
			})
			return false
		}
		return true
	}

	// 处理评价点击
	const handleEvaluate = () => {
		if (!checkLoginAndRedirect()) return
		uni.navigateTo({
			url: "/otherPages/orderTakingManage/evaluate/index"
		})
	}

	// 处理流水明细点击
	const handleRunningWater = () => {
		if (!checkLoginAndRedirect()) return
		uni.navigateTo({
			url: "/otherPages/myOrdersManage/transaction/index"
		})
	}

	// 处理提现点击
	const handleWithdraw = () => {
		if (!checkLoginAndRedirect()) return
		uni.navigateTo({
			url: "/otherPages/binding/withdrawal/index?type=1"
		})
	}

	// 处理保证金点击
	const handleBail = () => {
		if (!checkLoginAndRedirect()) return
		uni.navigateTo({
			url: "/otherPages/myOrdersManage/bond/index"
		})
	}

	// 处理我的宠物点击
	const handleMyPet = () => {
		if (!checkLoginAndRedirect()) return
		uni.navigateTo({
			url: '/otherPages/userManage/pet/index'
		});
	}

	// 处理编辑宠物点击
	const handleEditPet = (item) => {
		if (!checkLoginAndRedirect()) return
		if (item.petType === '猫咪' || item.petType === 0) {
			uni.navigateTo({
				url: `/otherPages/userManage/pet/petInfo?petType=0&optionType=edit&petId=${item.id}`
			})
		}
		if (item.petType === '狗狗' || item.petType === 1) {
			uni.navigateTo({
				url: `/otherPages/userManage/pet/petInfo?petType=1&optionType=edit&petId=${item.id}`
			})
		}
	};

	const getPet = async () => {
		if (!isLogin.value) return;
		
		let response = await getpetList({
			userId: userInfo.value.userId
		});
		petList.value = response?.data || [];
	}

	const logout = () => {
		modal.value.open();
	}

	const close = () => {
		show.value = false;
	}

	const confirmLogout = () => {
		store.commit("setUserInfo", {});
		uni.removeStorageSync("token")
		uni.removeStorageSync("baseInfo")
		removeIsLogin();
		uni.navigateTo({
			url: "/pages/login/index"
		})
	}

	const platformProtocol = () => {
		uni.navigateTo({
			url: '/pages/userManage/mine/home_agreement'
		})
		return
		// show.value = true;
	}

	const cancelLogout = () => {
		// 取消退出登录回调
	}



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

	.tip {
		text-align: center;
		padding-bottom: 20rpx;
	}
</style>