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

<template>
	<view class="home-content">
		<view class="card-container">
			<view class="float-button">
				<image @click="changeOrderType" style="width: 112rpx; height: 112rpx;" slot='cover'
					src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/petServiceOrder/SystemOrderCircle.png">
			</view>
			<view>
				<view class="top-select">
					<view style="width: 50%;">
						<view class="top-select-left" @click="getLocationInfo">
							<uni-icons type="location-filled" size="20" color="#FFB13F"></uni-icons>
							<text v-if="isCheckLocation"
								style="color: #FFB13F ;font-size: 28rpx;font-weight: 400; line-height: 28rpx; width: 280rpx; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">{{locationName}}</text>
							<text v-else style="color: #AAAAAA;font-size: 28rpx;font-weight: 400;">选择地址</text>
						</view>
					</view>
					<view style="width: 50%;">
						<view class="top-select-right" @click="toggleCalendar('bottom')">
							<image style="width: 32rpx; height: 32rpx; margin-right: 10rpx;" slot='cover'
								src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/petServiceOrder/Calendar.png">
								<text v-if="isCheckTime" style="color: #FFB13F;font-size: 28rpx;font-weight: 400;">
									{{selectedDateShowText}}共{{selectedDate.length}}天</text>
								<text v-else style="color: #AAAAAA;font-size: 28rpx;font-weight: 400;">选择时间</text>
						</view>
						<view>
							<uni-popup ref="popup" background-color="#fff" @change="changePopup">
								<view class="popupBottom">
									<uni-calendar ref="calendar" class="uni-calendar--hook" :selected="selectedDate"
										:startDate="startDate" :endDate="endDate" :showMonth="false"
										@change="changeCalendar" @confirm="changeCalendar" @close="close" />
									<view style="display: flex; justify-content: center; align-items: center;">
										<!-- <button class="bottom-btn" @click="closePopup">确定</button> -->
										<image @click="closePopup" style="width: 670rpx; height: 80rpx;" slot='cover' src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/petServiceOrder/yesButton.png" />
									</view>
								</view>
							</uni-popup>
						</view>
					</view>
				</view>
			</view>
			<view style="display: flex; margin: 10rpx 20rpx 0 20rpx">
				<view>
					<image v-show="isCatCheck" @click="changeSelectedPet('cat')"
						style="width: 224rpx; height: 96rpx; margin-right: 20rpx;" slot='cover'
						src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/petServiceOrder/CatCheck.png" />
					<image v-show="!isCatCheck" @click="changeSelectedPet('cat')"
						style="width: 224rpx; height: 96rpx; margin-right: 20rpx;" slot='cover'
						src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/petServiceOrder/CatUncheck.png" />
				</view>
				<view>
					<image v-show="isDogCheck" @click="changeSelectedPet('dog')"
						style="width: 224rpx; height: 96rpx; margin-right: 20rpx;" slot='cover'
						src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/petServiceOrder/DogCheck.png" />
					<image v-show="!isDogCheck" @click="changeSelectedPet('dog')"
						style="width: 224rpx; height: 96rpx; margin-right: 20rpx;" slot='cover'
						src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/petServiceOrder/DogUncheck.png" />
				</view>
				<uni-easyinput style="border-radius: 84rpx; width: 224rpx; height: 96rpx;" borderColor="#FFB13F"
					prefixIcon="search" v-model="value" placeholder="输入名称" @iconClick="iconClick"></uni-easyinput>
				<!-- <view style="width: 50%;" class="card">
					<uni-data-checkbox multiple selectedColor="#FFB13F" v-model="selectedPet" :localdata="catOrdog"
						@change="changeSelectedPet"></uni-data-checkbox>
				</view>
				<view style="width: 50%;">
					<uni-easyinput style="border-radius: 30rpx;" borderColor="#FFB13F" prefixIcon="search"
						v-model="value" placeholder="搜索" @iconClick="iconClick"></uni-easyinput>
				</view> -->
				<!-- <checkbox-group>
					<label>
						<checkbox value="cb" checked="true" color="#FFB13F" style="transform:scale(0.7)" />选中
					</label>
					<label>
						<checkbox class="color_FFB13F" value="cb" color="#FFB13F" style="transform:scale(0.7)" />未选中
					</label>
				</checkbox-group> -->
			</view>
			<view>
				<view v-if="companionList.length > 0">
					<uni-row :span="12" v-for="(item,index) in companionList" :key="index">
						<uni-card :is-shadow="false" padding=0 margin="10px">
							<view class="personal-list-item">
								<view class="personal-info">
									<view @click="getInfo(item.id)">
										<image class="people-img" slot='cover'
											:src="item&&item.staffImages&&item.staffImages.length>0?item.staffImages[0].url:defaultStaffIamge">
										</image>
									</view>
									<view class="personal-info-1">
										<view class="personal-info-2">
											<view class="personal-info-title" @click="getInfo(item.id)">
												<view class="personal-name">
													{{item.name}}
												</view>
												<view class="personal-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-star" @click="checkIsLike">
												<text style="color: #FFB13F;">客户点赞数{{likeNum}}</text>
												<uni-icons v-if="isLike" type="hand-up-filled" size="20"
													color="#FFB13F"></uni-icons>
												<uni-icons v-else type="hand-up" size="20" color="#FFB13F"></uni-icons>
											</view>
										</view>
										<view class="personal-info-3" style="width: 100%;">
											<view class="ellipsis">
												距离{{item.id}}km
											</view>
										</view>
										<view class="personal-info-4" style="width: 100%;">
											<view class="ellipsis" style="max-width: 225px;">
												简介：{{item.shortDescription}}
											</view>
										</view>
									</view>
								</view>
							</view>
							<view>
								<view class="personal-item-bottom">
									<text class="personal-item-bottom-text">养宠4年 | 评价11条 | 服务小结13份</text>
								</view>
							</view>
						</uni-card>
					</uni-row>
				</view>
				<view v-else
					style="display: flex; justify-content: center; align-items: center; height: 100px; font-size: 16px; font-weight: bold;">
					暂无数据
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue';
	import uniFab from '@/uni_modules/uni-fab/components/uni-fab/uni-fab.vue'
	import {
		getCompanionList,
		getCompanionInfo
	} from "@/api/system/companion"
	export default {
		data() {
			return {
				allInfo: {
					isCheckLocation: false,
					locationName: '',
					locationLatitude: '',
					locationLongitude: '',
					locationAddress: '',
					selectedDate: [],
					isCheckTime: false,
				},
				selectedDate: [],
				startDate: '',
				endDate: '',
				isCheckLocation: false,
				locationName: '',
				locationLatitude: '',
				locationLongitude: '',
				locationAddress: '',
				isCheckTime: false,
				selectedDateShowText: '',
				isCatCheck: true,
				isDogCheck: true,
				petTypes: ['1', '2'],
				value: '',
				companionList: [],
				isLike: false,
				likeNum: 560,
				defaultStaffIamge: 'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/banner/gold_people.png',
			}
		},
		components: {
			uniPopup,
		},
		onLoad: function(option) {
			let info = JSON.parse(decodeURIComponent(option.info));
			this.allInfo = info
			console.log('this.allInfo', this.allInfo);
			this.setInfo()
			this.getCompanionList()
		},
		mounted() {
			this.getCalendarDate();
		},
		methods: {
			setInfo() {
				this.isCheckLocation = this.allInfo.isCheckLocation
				this.locationName = this.allInfo.locationName
				this.locationLatitude = this.allInfo.locationLatitude
				this.locationLongitude = this.allInfo.locationLongitude
				this.locationAddress = this.allInfo.locationAddress
				this.selectedDate = this.allInfo.selectedDate
				this.isCheckTime = this.allInfo.isCheckTime
				if (this.allInfo.selectedDate.length == 1) {
					this.selectedDateShowText = this.allInfo.selectedDate[0].date.replace(/-/g, "/") + ' '
				} else if (this.allInfo.selectedDate.length > 1) {
					this.selectedDateShowText = this.allInfo.selectedDate[0].date.replace(/-/g, "/") + '...' + ' '
				}
			},
			checkIsLike() {
				this.isLike = !this.isLike
				this.$forceUpdate()
			},
			changeOrderType() {
				uni.navigateTo({
					url: '/pages/newOrder/serviceNew2'
				});
			},
			getInfo(id) {
				if (id) {
					uni.navigateTo({
						// url: '/pages/companionPetList/companionPetInfo',
						url: `/pages/companionPetList/companionPetInfo?id=${id}`
					});
				}
			},
			trigger(e) {
				uni.showModal({
					title: '提示',
					content: `激活状态：${e.item.active};选中项：${e.item.text}`,
					success(res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			fabClick() {
				uni.showToast({
					title: '点击了悬浮按钮',
					icon: 'none'
				});
			},
			getCompanionList() {
				// let data = {
				// 	longitude: this.locationLongitude,
				// 	latitude: this.locationLatitude,
				// 	petTypes: this.selectedPet,
				// 	staffName: '',
				// 	address: this.locationAddress
				// }
				let data = {
					address: "上海市浦东新区浦东南路150弄",
					latitude: 29.56471,
					longitude: 106.55073,
					petTypes: ["1", "2"],
					staffName: "君"
				}
				console.log('data', data);
				getCompanionList(data).then(response => {
					if (response.code == 200) {
						this.companionList = response.rows
						console.log(response);
					}
					console.log(response);
				})
			},
			iconClick() {},
			changeSelectedPet(type) {
				console.log('changeSelectedPet type', type);
				if (type == 'cat') {
					this.isCatCheck = !this.isCatCheck
					if (this.petTypes.includes('1')) {
						if (!this.isCatCheck) {
							this.petTypes = this.petTypes.filter(item => item !== '1');
						}
					} else {
						this.isCatCheck ? this.petTypes.push('1') : ''
					}
				} else {
					this.isDogCheck = !this.isDogCheck
					if (this.petTypes.includes('2')) {
						if (!this.isDogCheck) {
							this.petTypes = this.petTypes.filter(item => item !== '2');
						}
					} else {
						this.isDogCheck ? this.petTypes.push('2') : ''
					}
				}
				console.log('this.petTypes', this.petTypes);
			},
			toggleCalendar(type) {
				this.type = type
				uni.hideTabBar()
				this.$refs.popup.open(type)
			},
			closePopup() {
				this.$refs.popup.close()
				setTimeout(() => {
					uni.showTabBar()
				}, 300)
			},
			changePopup(e) {
				console.log('当前模式：' + e.type + ',状态：' + e.show);
				if (e.show) {
					uni.hideTabBar()
				} else {
					setTimeout(() => {
						uni.showTabBar()
					}, 300)
				}
			},
			close() {
				console.log('弹窗关闭');
			},
			confirm(e) {
				console.log('confirm 返回:', e)
			},
			changeCalendar(e) {
				console.log('change 返回:', e)
				this.selectedDateShowText = ''
				// 选中日期
				const selectedValue = this.selectedDate.find(item => item.date === e.fulldate)
				if (selectedValue) {
					// 存在则移除
					this.selectedDate = this.selectedDate.filter(item => item.date !== e.fulldate);
				} else {
					this.selectedDate.push({
						date: e.fulldate,
						info: 'time'
					})
				}
				if (this.selectedDate.length > 0) {
					this.isCheckTime = true
					if (this.selectedDate.length == 1) {
						this.selectedDateShowText = this.selectedDate[0].date.replace(/-/g, "/") + ' '
					} else {
						this.selectedDateShowText = this.selectedDate[0].date.replace(/-/g, "/") + '...' + ' '
					}
				} else {
					this.isCheckTime = false
				}
			},
			getCalendarDate() {
				let tomorrow = new Date()
				tomorrow.setDate(tomorrow.getDate() + 2);
				this.startDate = this.formatDate(tomorrow);
				// 获取三个月后的日期
				let threeMonthsLater = new Date();
				threeMonthsLater.setMonth(threeMonthsLater.getMonth() + 3);
				this.endDate = this.formatDate(threeMonthsLater);
			},
			formatDate(date) {
				let year = date.getFullYear();
				let month = (date.getMonth() + 1).toString().padStart(2, '0');
				let day = date.getDate().toString().padStart(2, '0');
				return year + '-' + month + '-' + day;
			},
			getLocationInfo() {
				wx.chooseLocation({
					type: 'gcj02', // 坐标系，默认为 wgs84 返回 gps 原始坐标，gcj02 返回可用于 wx.openLocation 的坐标
					success: (res) => {
						// 成功回调
						this.isCheckLocation = true
						this.locationName = res.address
						this.locationLongitude = res.longitude
						this.locationLatitude = res.latitude
						this.locationAddress = res.address
						console.log('选择的位置：', res);
					},
					fail: (err) => {
						// 失败回调
						console.error('选择位置失败：', err);
					}
				});
			},
		}
	}
</script>

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

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

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

			.top-select {
				background-color: #fff;
				border: 1px solid #EBEEF5;
				// box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.08);
				display: flex;
				justify-content: space-between;
				margin: 0 10px 10px 10px;
				border-radius: 16rpx;
				padding: 13px;

				.top-select-left {
					display: flex;
					flex-wrap: nowrap;
					align-items: center;
					// justify-content: space-around;
				}

				.top-select-right {
					display: flex;
					flex-wrap: nowrap;
					align-items: center;
				}
			}

			.float-button {
				z-index: 10;
				position: fixed;
				bottom: 100rpx;
				/* 距离底部的距离 */
				right: 32rpx;
				/* 距离右侧的距离 */
				// width: 50px;
				// /* 按钮的宽度 */
				// height: 50px;
			}

			.is-input-border {
				border-radius: 84rpx;
				height: 96rpx;
				width: 224rpx;
			}

			.card {
				// border-radius: 50rpx;
				width: 50%;
				background-color: #fff;
				border: 1px solid #EBEEF5;
				box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.08);
				margin-right: 20rpx;
				// height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

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

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

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

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

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

							.personal-info-title {
								display: flex;
								flex-wrap: wrap;
								width: 60%;
							}

							.personal-name {
								color: #333;
								font-size: 32rpx;
								// line-height: 32rpx;
								margin-right: 10rpx;
								font-weight: 900;
								font-style: normal;
							}

							.personal-star {
								color: #FFAA48;
								font-size: 24rpx;
								font-weight: 400;
								line-height: 32rpx;
							}
						}

						.personal-info-3 {
							display: flex;
							align-items: baseline;
							font-size: 28rpx;
							line-height: 32rpx;
							margin-top: 5px;
							color: #FFAA48;
							font-weight: 900;
						}

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

					}

				}
			}

			.personal-item-bottom {
				height: 60rpx;
				background-color: #FFF4E5;
				margin: 20rpx 0 20rpx 0;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 8rpx;

				.personal-item-bottom-text {
					color: #A94F20;
					margin: 14rpx;
					font-size: 24rpx;
					font-weight: 400;
				}
			}

			.popupBottom {
				z-index: 99;
				height: 950rpx;
				overflow: hidden;
				position: fixed;
				bottom: 0;
				left: 0;
				right: 0;
				padding: 10rpx 20rpx;
				border-radius: 20rpx 20rpx 0 0;
				background-color: #fff;

				.bottom-btn {
					width: 100%;
					border-radius: 120rpx;
					background: #FFB13F;
					font-size: 32rpx;
					color: #FFFFFF;
				}
			}

			::v-deep .wx-radio-input.wx-radio-input-checked {
				background-color: #00875a !important;
				border-color: #00875a !important;
				color: #ffffff !important;
			}

			.color_FFB13F {
				color: #FFB13F;
			}

		}
	}
</style>