pet-front/pages/userManage/index.vue

<template>
	<view>
		<view class="user-header">
			<view class="flex flex-between login">
				<view class="flex">
					<up-image class="mr20" width="120rpx" height="120rpx" :src="userInfo.userImage"
						shape="circle"></up-image>
					<view>{{getIsLogin()?userInfo.userName:"欢迎来到版宠师"}}</view>
				</view>
				<view style="width: 140rpx">
					<up-button v-if="!getIsLogin()" @click="handleLogin" :customStyle="{borderColor:'#fff'}"
						type="primary" text="请登录" shape="circle" color="#FFBF60"></up-button>
					<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>
								服务酬劳
							</view>
							<view class="mb20">{{ userInfo.price }}</view>
							<view class="flex flex-between but">
								<view @click="toWithdrawDeposit">提现</view>
								<view>|</view>
								<view @click="toRunningWater">明细</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">{{ userInfo.baoPrice }}</view>
							<view @click="toBail" 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="toMyPet" 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="pet?.headImage" shape="circle"></up-image>
						<view style="width: 418rpx">
							<view class="font32 mb20">{{ pet.type }}</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 @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>
						<view>平台协议</view>
					</view>
					<view @click="openCustomerServiceChat" 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>

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

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

	onShow(() => {
		if (!getIsLogin()) {
			uni.navigateTo({
				url: "/pages/login/index"
			})
		}
		getPetList();
	})
	
	onMounted(() => {
		content.value = configList.value?.['home-agreement']?.paramValueArea || ""
	})

	const store = useStore();
	const isLogin = ref(false)
	const userInfo = computed(() => {
		return store.getters.userInfo
	})
	const configList = computed(() => {
		return store.getters.configList;;
	})
	const pet = ref({})
	const show = ref(false)
	const content = 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"
		})
	}

	const toRunningWater = () => {
		uni.navigateTo({
			url: "/otherPages/myOrdersManage/transaction/index"
		})
	}

	const getPetList = async () => {
		let response = await petList();
		pet.value = response?.data[0] || {};
	}

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

	// 跳转提现
	const toWithdrawDeposit = () => {
		uni.navigateTo({
			url: "/otherPages/myOrdersManage/withdrawal/index"
		})
	}

	//跳转保证金
	const toBail = () => {
		uni.navigateTo({
			url: "/otherPages/myOrdersManage/bond/index"
		})
	}

	// 跳转我的宠物
	const toMyPet = () => {
		uni.navigateTo({
			url: '/otherPages/userManage/pet/index'
		});
	}

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

	const platformProtocol = () => {
		show.value = true;
	}

	// 定义 openCustomerServiceChat 方法，用于唤起客服会话界面
	const openCustomerServiceChat = () => {
		uni.openCustomerServiceChat({
			extInfo: {
				url: "https://work.weixin.qq.com/kfid/kfc135d138d063817e1"
			},
			sessionFrom: '1000',
			// 成功回调函数
			success: function(res) {
				console.log('成功打开客服会话', res);
			},
			// 失败回调函数
			fail: function(err) {
				console.error('打开客服会话失败', err);
			}
		});
	};
</script>
<style scoped lang="scss">
	@import "index";
</style>