pet-front-order/pages/personalCenter/service.vue

<template>
	<view class="personal-pet">
		<view v-if="petList.length>0" class="personal-service-list">
			<view v-for="(item,index) in petList" :key="index">
				<view class="personal-service-list-item" @click="goServiceInfo(item)">
					<view style="display: flex;align-items: center;">
						<u-avatar :src="item.photo?item.photo:defaultPhoto" size="46" shape="circle"></u-avatar>
						<view class="personal-service-tips ellipsis">
							{{serviceTips(item)}}
						</view>
					</view>
					<view>
						<u-icon slot="right" name="arrow-right" color="#AAA"></u-icon>
					</view>
				</view>
			</view>
		</view>
		
		<view v-else class="personal-pet-none">
			<img src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/pet/catdog.png" alt="pet"  
			style="width: 149px;height: 124px;" mode="widthFix"/>
			<view class="personal-pet-none-text">这里还没有您的宠物,请点击添加吧~</view>
		</view>
		<view class="personal-pet-add" v-if="petList.length==0">
			<button class="personal-pet-add-btn" @click="addPet">添加宠物</button>
		</view>
		<view class="">
			<u-picker
				:showToolbar='false'
				:show="show"
				:columns="petTypes"
				@change="petTypeChange"
				@cancel="cancel"
				@confirm="confirm"
			></u-picker>
		</view>
	</view>
</template>

<script>
	import { getPetList } from "@/api/system/pet"
	import { getDictList } from "@/api/system/user.js"
	export default{
		data(){
			return{
				petList:[],
				show:false,
				petTypes:[],
				petType:''
			}
		},
		onShow() {
			this.getPetList();
		},
		mounted() {
			this.getPetList();
		},
		methods:{
			getPetList(){
				getPetList({owner:this.openIdStr}).then(res=>{
					if(res&&res.content){
						this.petList=res.content
						if(this.petList.length==0){
							this.getPetTypeList()
						}
					} 
				})
			},
			getPetTypeList(){
				getDictList('pet_type').then(res=>{
					if (res.code == 200) {
						let petType = res.data.map(e=>e.dictLabel)
						this.petTypes=[petType]
						console.log(this.petTypes)
					} else {
						this.$modal.showToast('获取pet type失败')
					}
				})
			},
			addPet(){
				this.show = true;
			},
			cancel() {
				this.show = false
			},
			petTypeChange(e){
				console.log(e)
				this.petType=e.value[0]
			},
			confirm(e) {
				this.show = false
				if(this.petType==='猫猫'){
					uni.navigateTo({
						url: `/pages/personalCenter/petInfo?petType=cat&optionType=add`
					});
				}
				if(this.petType==='狗狗'){
					uni.navigateTo({
						url: `/pages/personalCenter/petInfo?petType=dog&optionType=add`
					});
				}
				if(!this.petType){
					if(e.value[0]==='猫猫'){
						uni.navigateTo({
							url: `/pages/personalCenter/petInfo?petType=cat&optionType=add`
						});
					}
					if(e.value[0]==='狗狗'){
						uni.navigateTo({
							url: `/pages/personalCenter/petInfo?petType=dog&optionType=add`
						});
					}
				}
			},
			serviceTips(item){
				return `完善${item.petType=='dog'?"狗狗":"猫猫"}"${item.name}"的服务信息`
			},
			goServiceInfo(item){
				uni.navigateTo({
					url: `/pages/personalCenter/serviceInfo?petType=${item.petType}&petId=${item.id}`
				});
			}
		}
	}
</script>

<style lang="scss">
	.personal-pet{
		position: relative;
		height: 100%;
		padding-bottom: 58px;
		.personal-pet-add{
			background-color: #FFFFFF;
			padding: 10px 20px 40px;
			width: 100%;
			height: 90px;
			position: fixed;
			bottom: 0;
			z-index: 100;
			display: flex;
			.personal-pet-add-btn{
				width: 100%;
				border-radius: 6px;
				background: #FFB13F;
				font-size: 16px;
				color: #FFFFFF;
			}
		}
		.personal-service-list{
			.personal-service-list-item{
				background-color: #fff;
				margin: 10px 10px 0 10px;
				border-radius: 5px;
				padding: 10px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.personal-service-tips{
					margin-left: 10px;
					color:#333; 
					font-size: 14px;
				}
			}
		}
	
		.personal-pet-none{
			display:flex;
			justify-content: center;
			align-items: center;
			flex-wrap: wrap;
			margin-top: 40%;
			.personal-pet-none-text{
				color: #666;
				text-align: center;
				font-size: 14px;
				width: 100%;
				margin-top: 10px;
			}
		}
		
	}
	
</style>