pet-front-order/pages/companionPetList/companionPetInfo.vue

<template>
	<view class="home-content">
		<view class="card-container">
			<view class="companion-info">
				<view class="companion-info-img">
					<image class="people-img" slot='cover'
						:src="companionInfo&&companionInfo.staffImages&&companionInfo.staffImages.length>0?companionInfo.staffImages[0].url:defaultStaffIamge">
					</image>
				</view>
				<view class="companion-info-detail">
					<view class="companion-info-left">
						<text class="companion-info-left-title">{{companionInfo.name}}</text>
						<view>
							<img :src="companionInfo.gender==1?'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/pet/sex_m.png':
										'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/pet/sex_f.png'" alt="sex"
								style="width: 40rpx;height: 40rpx;" />
						</view>
					</view>
					<view class="companion-info-right" @click="onClickFav">
						<view v-if="collect">
							<uni-icons type="star-filled" size="18" color="#FFB13F"></uni-icons>
							<text style="font-size: 16px; color: #FFB13F; margin-left: 6rpx;">已收藏</text>
						</view>
						<view v-else>
							<uni-icons type="star" size="18" color="#7D8196"></uni-icons>
							<text style="font-size: 16px; color: #7D8196; margin-left: 6rpx;">收藏</text>
						</view>
					</view>
				</view>
			</view>
			<view class="companion-info-des">
				<text class="companion-info-des-text">
					<!-- {{companionInfo.shortDescription}} -->
					你好，我叫小鱼，养过两只猫，目前养了只布偶，女猫，两岁了，11斤，工作比较自由，方便喂养咪咪，很高兴认识你和你的猫
				</text>
			</view>
			<view class="personal-pet">
				<uni-card :is-shadow="false" padding=0 margin="10px">
					<view class="service-new-title" slot="title">
						<view class="service-new-title-left">
							<view class="service-new-flag"></view>
							<view>他的宠物</view>
						</view>
					</view>
					<view class="split-line"></view>
					<view class="service-new-pet-content">
						<view v-for="(item,index) in petList" :key="index">
							<view class="personal-pet-list-item">
								<view class="personal-pet-info">
									<view>
										<u-avatar :src="item.photo?item.photo:defaultStaffIamge" size="60"
											shape="circle"></u-avatar>
									</view>
									<view class="personal-pet-info-1">
										<view class="personal-pet-info-2">
											<view class="personal-pet-name">
												{{item.name}}
											</view>
											<view class="personal-pet-sex">
												<img :src="item.gender=='男生'?'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/pet/sex_m.png':
															'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/pet/sex_f.png'" alt="sex"
													style="width: 20px;height: 20px;" />
											</view>
										</view>
										<view class="personal-pet-info-3" style="width: 100%;">
											<view v-if="item.breed" class="ellipsis" style="max-width: 45%;">
												{{item.breed}}
											</view>
											<view v-if="item.age" class="personal-pet-info-age"
												style="max-width: 60px;">
												{{item.age}}岁
											</view>
											<view v-if="item.weight" class="ellipsis">
												{{item.weight}}KG
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
						<!-- <view style="display: flex;">
							<view style="width: 28%;">
								<image class="pet-img" slot='cover'
									:src="companionInfo&&companionInfo.staffImages&&companionInfo.staffImages.length>0?companionInfo.staffImages[0].url:defaultStaffIamge">
								</image>
							</view>
							<view>
								<view>
									<text style="font-size: 16px; margin-right: 4px;">{{companionInfo.name}}</text>
									<uni-icons type="person" size="20" color="#FFB13F"></uni-icons>
								</view>
								<view>
									<text style="font-size: 14px;color: #AAA">
										中华田园猫 | 1岁 | 体重1KG
									</text>
								</view>
							</view>
						</view> -->
					</view>
				</uni-card>
			</view>
			<view>
				<image @click="changeOrderType" style="height: 132rpx; width: 710rpx; margin: 0 20rpx 0 20rpx;"
					slot='cover'
					src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/petServiceOrder/CMDFServiceDetail.png">
					<!-- <uni-card padding=0>
					<view class="service-new-pet-content" style="padding: 10px 0 5px 0;">
						<view style="display: flex;">
							<view>
								<image class="service-img" slot='cover' :src="defaultStaffIamge">
								</image>
							</view>
							<view
								style="display: flex; margin-left: 10px; align-items: center; justify-content: space-between; width: 100%;">
								<view>
									<view>
										<text
											style="font-weight: 500; font-size: 28rpx; color: #333333; line-height: 33rpx;">宠物服务详解</text>
									</view>
									<view>
										<text style="font-size: 12px;color: #AAA">
											服务介绍、收费标准、常见问题、服务记录
										</text>
									</view>
								</view>
								<view>
									<uni-icons type="right" size="20" color="#AAA"></uni-icons>
								</view>
							</view>
						</view>
					</view>
				</uni-card> -->
			</view>
			<!-- 			<view class="personal-pet" style="padding-bottom: 10px;">
				<uni-card :is-shadow="false" padding=0 margin="10px">
					<view class="service-new-title" slot="title">
						<view class="service-new-title-left">
							<view class="service-new-flag"></view>
							<view>近期评价</view>
						</view>
					</view>
					<view class="split-line"></view>
					<view class="service-new-pet-content">
						<view v-for="(item,index) in rewardList" :key="index">
							<view class="reward-list-item">
								<view class="reward-info">
									<view>
										<u-avatar :src="item.photo?item.photo:defaultStaffIamge" size="60"
											shape="circle"></u-avatar>
									</view>
									<view class="reward-info-1">
										<view class="reward-info-2">
											<view class="reward-name">
												{{item.name}}
											</view>
											<view class="star">
												<uni-rate :readonly="true" size="18" :value="item.star" />
											</view>
										</view>
										<view class="reward-info-3" style="width: 100%;">
											<view>
												{{item.time}}
											</view>
											<view>
												{{item.des}}
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</uni-card>
			</view> -->
			<view class="service-record" style="padding-bottom: 55px;">
				<uni-card :is-shadow="false" padding=0 margin="10px">
					<view class="service-record-title" slot="title">
						<view class="service-record-title-left">
							<view class="service-record-flag"></view>
							<view>服务记录</view>
						</view>
					</view>
					<view class="split-line"></view>
					<view class="service-record-content">
						<view v-for="(item,index) in serviceRecordList" :key="index">
							<view class="service-record-item">
								<view class="service-record-info">
									<view>
										<u-avatar :src="item.photo?item.photo:defaultStaffIamge" size="40"
											shape="circle"></u-avatar>
									</view>
									<view class="service-record-info-1">
										<view class="service-record-info-2">
											<view class="service-record-info-title">
												<view class="service-record-name">
													{{item.name}}
												</view>
											</view>
											<view class="service-record-location">
												<text style="color: #FFB13F;">{{item.location}}</text>
											</view>
										</view>
										<view class="service-record-info-3" style="width: 100%;">
											<view class="ellipsis">
												{{item.type == 1 ? '上门喂猫' : '上门遛狗'}}
											</view>
											<view style="margin: 0 10rpx 0 10rpx;">
												|
											</view>
											<view class="ellipsis">
												{{item.time}}
											</view>
										</view>
										<view class="service-record-info-4" style="width: 100%;">
											<view class="ellipsis" style="max-width: 225px;">
												宠物：{{item.petName}}
											</view>
										</view>
									</view>
								</view>
								<view class="service-record-des">
									{{item.des}}
								</view>
								<view class="service-record-pet-images">
									<view v-for="(img,index) in item.imageList" :key="index">
										<image class="service-record-pet-images-item" slot='cover' :src="img.url">
										</image>
									</view>
								</view>
							</view>
							<view class="split-line"></view>
						</view>
					</view>
				</uni-card>
			</view>
			<view class="bottom-btn-sticky" style="padding: 10rpx 40rpx 0 40rpx;">
				<!-- <button class="bottom-btn" @click="getOrder">立即预约</button> -->
				<image style="width: 670rpx; height: 80rpx;" slot='cover' src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/petServiceOrder/orderNow.png" />
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getCompanionInfo
	} from "@/api/system/companion"
	import uniRate from '@/uni_modules/uni-rate/components/uni-rate/uni-rate.vue';
	export default {
		data() {
			return {
				currentCompanionPetId: '',
				companionInfo: null,
				defaultStaffIamge: 'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/banner/gold_people.png',
				collect: false,
				petList: [{
					gender: '女生',
					name: '大咪',
					breed: '中华田园猫',
					age: '12',
					weight: '13.5'
				}, {
					gender: '女生',
					name: '大咪',
					breed: '中华田园猫',
					age: '12',
					weight: '13.5'
				}],
				rewardList: [{
					name: '小咪',
					star: 3,
					time: '2025-1-1 18:00',
					des: '服务贴心，态度热情，非常满意',
				}, {
					name: '中咪',
					star: 4,
					time: '2025-1-1 18:00',
					des: '服务贴心，态度热情，非常满意',
				}, {
					name: '大咪',
					star: 5,
					time: '2025-1-1 18:00',
					des: '服务贴心，态度热情，非常满意',
				}],
				serviceRecordList: [{
					name: '修狗',
					location: '重庆市',
					type: 1,
					time: '2025-1-15 18:09:32',
					petName: '修狗',
					des: '猫咪正常饮食，无任何异常，排尿较少，可能天气原因， 服务过程全程与主人视频。',
					imageList: [{
							url: 'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/banner/gold_people.png'
						},
						{
							url: 'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/banner/gold_people.png'
						},
						{
							url: 'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/banner/gold_people.png'
						},
						{
							url: 'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/banner/gold_people.png'
						},
						{
							url: 'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/banner/gold_people.png'
						}
					]
				}, {
					name: '修猫',
					location: '上海市',
					type: 2,
					time: '2025-1-15 18:09:32',
					petName: '修猫',
					des: '猫咪正常饮食，无任何异常，排尿较少，可能天气原因， 服务过程全程与主人视频。',
					imageList: [{
							url: 'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/banner/gold_people.png'
						},
						{
							url: 'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/banner/gold_people.png'
						},
						{
							url: 'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/banner/gold_people.png'
						}
					],
				}, {
					name: '修修补补',
					location: '上海市',
					type: 2,
					time: '2025-1-15 18:09:32',
					petName: '修猫',
					des: '猫咪正常饮食，无任何异常，排尿较少，可能天气原因， 服务过程全程与主人视频。',
					imageList: [{
							url: 'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/banner/gold_people.png'
						},
						{
							url: 'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/banner/gold_people.png'
						},
						{
							url: 'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/banner/gold_people.png'
						},
						{
							url: 'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/banner/gold_people.png'
						}
					],
				}]
			}
		},
		components: {
			uniRate,
		},
		onLoad: function(option) {
			this.currentCompanionPetId = option.id;
		},
		mounted() {
			this.getCurrentCompanionPetInfo(this.currentCompanionPetId)
		},
		methods: {
			onClickFav() {
				this.collect = !this.collect
				this.$forceUpdate()
			},
			getCurrentCompanionPetInfo(id) {
				getCompanionInfo(id).then(response => {
					if (response && response.code == 200) {
						console.log('getCurrentCompanionPetInfo', response);
						this.companionInfo = response.data
					}
					console.log('getCurrentCompanionPetInfo', response);
				})
			},
			getOrder() {
				uni.navigateTo({
					// url: '/pages/newOrder/serviceNew2',
					url: `/pages/newOrder/serviceNew2?userName=${this.companionInfo.name}&servicerId=${this.companionInfo.id}`,
				});
			},
		}
	}
</script>

<style lang="scss">
	.home-content {
		background: linear-gradient(360deg, #F5F5F7 82%, #FFBF60 99%);

		.card-container {
			margin: 0;
			padding: 0;

			.uni-card {
				border-radius: 16rpx;
			}

			.companion-info {
				display: flex;

				.companion-info-img {
					margin: 20rpx 20rpx 20rpx 40rpx;

					.people-img {
						width: 168rpx;
						height: 168rpx;
						border: #FEA714 5rpx solid;
						border-radius: 168rpx;
					}
				}

				.companion-info-detail {
					width: 70%;
					display: flex;
					align-items: center;

					.companion-info-left {
						display: flex;
						width: 70%;

						.companion-info-left-title {
							color: #333;
							font-size: 32rpx;
							line-height: 32rpx;
							margin-right: 10rpx;
							font-weight: 900;
							font-style: normal;
						}
					}
				}

			}

			.companion-info-des {
				background-color: #FFF4E5;
				margin: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 16rpx;

				.companion-info-des-text {
					color: #FFB13F;
					margin: 20rpx 34rpx 20rpx 34rpx;
				}
			}

			.bottom-btn-sticky {
				z-index: 10;
				position: fixed;
				bottom: 40rpx;

				/* 距离底部的距离 */
				// right: 32rpx;
				/* 距离右侧的距离 */
				// width: 50px;
				// /* 按钮的宽度 */
				// height: 50px;
				.bottom-btn {
					width: 670rpx;
					height: 80rpx;
					border-radius: 120rpx;
					background: #FFB13F;
					font-size: 32rpx;
					color: #FFFFFF;
				}
			}

			.pet-img {
				width: 70px;
				height: 70px;
				border: #FFBF60 1px solid;
				border-radius: 35px;
			}

			.personal-pet-list-item {
				// margin: 10px 10px 0 10px;
				// border-radius: 5px;
				padding: 10px 0px 10px 0;

				.personal-pet-info {
					display: flex;
					align-items: center;
					justify-content: flex-start;

					.personal-pet-info-1 {
						margin-left: 10px;

						.personal-pet-info-2 {
							display: flex;
							flex-wrap: wrap;

							.personal-pet-name {
								color: #333;
								font-size: 16px;
								margin-right: 10px;
							}
						}

						.personal-pet-info-3 {
							display: flex;
							align-items: baseline;
							font-size: 14px;
							margin-top: 5px;
							color: #7D8196;

							.personal-pet-info-age {
								padding: 0 10px;
								margin: 0 10px;
								border-left: solid 2px #7D8196;
								border-right: solid 2px #7D8196;
							}

						}

					}

				}

				.personal-pet-info-disposition {
					padding: 10px;
					color: #7D8196;
					font-size: 14px;
					background: #f9f9f9;
					border-radius: 5px;
					margin-top: 10px;
				}

				.personal-pet-info-btns {
					display: flex;
					justify-content: flex-end;
					margin-top: 10px;

					.personal-pet-info-btn {
						display: flex;
						font-size: 14px;
						color: #7D8196;
						margin-left: 20px;
					}
				}
			}

			.reward-list-item {
				padding: 10px 0px 10px 0;

				.reward-info {
					display: flex;
					// align-items: center;
					justify-content: flex-start;

					.reward-info-1 {
						margin-left: 10px;
						width: 100%;

						.reward-info-2 {
							display: flex;
							flex-wrap: wrap;

							.reward-name {
								color: #333;
								font-size: 16px;
								width: 60%;
							}
						}

						.reward-info-3 {
							align-items: baseline;
							font-size: 14px;
							margin-top: 5px;
							color: #7D8196;
						}

					}

				}

				.personal-pet-info-disposition {
					padding: 10px;
					color: #7D8196;
					font-size: 14px;
					background: #f9f9f9;
					border-radius: 5px;
					margin-top: 10px;
				}

				.personal-pet-info-btns {
					display: flex;
					justify-content: flex-end;
					margin-top: 10px;

					.personal-pet-info-btn {
						display: flex;
						font-size: 14px;
						color: #7D8196;
						margin-left: 20px;
					}
				}
			}

			.service-img {
				width: 60px;
				height: 60px;
				// border: #FFBF60 1px solid;
				// border-radius: 35px;
			}

			.personal-pet {
				width: 100%;

				.service-new-title {
					display: flex;
					font-weight: 500;
					font-size: 28rpx;
					color: #333333;
					line-height: 33rpx;
					margin: 42rpx 0 30rpx;
					justify-content: space-between;

					.service-new-title-left {
						display: flex;
						align-items: center;

						.service-new-flag {
							width: 8rpx;
							height: 32rpx;
							background: #FFBF60;
							border-radius: 30rpx 30rpx 30rpx 30rpx;
							margin-right: 10rpx;
						}
					}
				}

				.split-line {
					width: 100%;
					height: 1rpx;
					background: #EFEFEF;
				}

				.service-new-pet-content {
					// padding: 20rpx;
				}
			}

			.service-record {
				width: 100%;

				.service-record-title {
					display: flex;
					font-weight: 500;
					font-size: 28rpx;
					color: #333333;
					line-height: 33rpx;
					margin: 42rpx 0 30rpx;
					justify-content: space-between;

					.service-record-title-left {
						display: flex;
						align-items: center;

						.service-record-flag {
							width: 8rpx;
							height: 32rpx;
							background: #FFBF60;
							border-radius: 30rpx 30rpx 30rpx 30rpx;
							margin-right: 10rpx;
						}
					}
				}

				.split-line {
					width: 100%;
					height: 1rpx;
					background: #EFEFEF;
				}

				.service-record-content {
					// padding: 20rpx;

					.service-record-item {
						padding: 10px 0px 0px 0;

						.service-record-info {
							display: flex;
							align-items: center;
							justify-content: flex-start;

							.service-record-info-1 {
								margin-left: 10px;
								width: 100%;

								.service-record-info-2 {
									display: flex;
									flex-wrap: wrap;

									.service-record-info-title {
										display: flex;
										flex-wrap: wrap;
										width: 80%;
									}

									.service-record-name {
										color: #333;
										font-size: 28rpx;
										// line-height: 28rpx;
										font-weight: 500;
										font-style: normal;
									}

									.service-record-location {
										color: #FFAA48;
										font-size: 28rpx;
										font-weight: 400;
										// line-height: 32rpx;
									}
								}

								.service-record-info-3 {
									display: flex;
									align-items: baseline;
									font-size: 24rpx;
									// line-height: 32rpx;
									color: #7D8196;
									font-weight: 400;
								}

								.service-record-info-4 {
									display: flex;
									align-items: baseline;
									font-size: 24rpx;
									// margin-top: 10px;
									color: #7D8196;
									font-weight: 400;
									line-height: 32rpx;
								}

							}
						}

						.service-record-des {
							margin: 20rpx 0 20rpx 0;
							font-size: 28rpx;
							font-weight: 400;
							color: #333;
						}

						.service-record-pet-images {
							margin: 20rpx 0 20rpx 0;
							display: flex;
							flex-wrap: wrap;

							.service-record-pet-images-item {
								width: 152rpx;
								height: 152rpx;
								border-radius: 20rpx;
								margin-right: 10rpx;
							}
						}
					}
				}
			}
		}
	}
</style>