pet-front/otherPages/userManage/pet/petInfo.vue

<template>
	<view class="personal-pet-cat container">
		<view class="personal-pet-img">
			<view class="personal-pet-info-title">
				宠物头像
			</view>
			<view style="display: flex;justify-content: center;">
				<u-upload accept="image" :capture="['album','camera']" :fileList="fileList" @afterRead="afterRead"
					@delete="deletePic" :max-count="1" name="pet" width="60" height="60" :custom-style="{flex:0}">
					<image src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/index/cat_new.png"
						style="width: 60px;height: 60px;"></image>
				</u-upload>
			</view>
		</view>

		<PetBaseInfo :petType="petType" v-model:petBaseInfo="petBaseInfo" />
		<PetHealthInfo :petType="petType" v-model:petHealthInfo="petHealthInfo" />

		<view class="personal-pet-info-btns">
			<view class="personal-pet-btns">
				<view class="personal-pet-btn">
					<u-button color="#FFF4E4" @click="cancelPet">
						<view style="color: #A9A9A9;">
							取消
						</view>
					</u-button>
				</view>
				<view class="personal-pet-btn" @click="save">
					<u-button color="#FFBF60" :loading="loading">
						<view style="color: #fff;">
							保存
						</view>
					</u-button>
				</view>
			</view>
		</view>
		<u-modal :show="showDel" @confirm="confirmDel" @cancel="showDel = false" ref="uModal" showCancelButton
			:asyncClose="true" :content="delContent">
		</u-modal>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		addPet,
		getPetDetails,
		updatePet,
		delByPetId
	} from '@/api/pet/index.js';
	import PetBaseInfo from './components/petBaseInfo.vue';
	import PetHealthInfo from './components/petHealthInfo.vue';
	import {
		useRoute,
		useRouter
	} from 'vue-router';
	import {
		onLoad
	} from '@dcloudio/uni-app'

	const route = useRoute();
	const router = useRouter();

	const loading = ref(false);
	const fileList = ref([]);
	const petId = ref('');
	const petType = ref('dog');
	const optionType = ref('add');
	const isNewOrder = ref(false);
	const delContent = ref('');
	const headImage = ref('');
	const petBaseInfo = ref({
		nickName: '',
		sex: '',
		type: '',
		weight: '',
		birthday: '',
		personality: ''
	});
	const petHealthInfo = ref({
		vaccine: '',
		deworm: '',
		neutered: '',
		petCard: '',
		health: '',
		remark: ''
	});
	const showDel = ref(false);
	const uModal = ref(null);

	onLoad((option) => {
		petType.value = option.petType;
		optionType.value = option.optionType;
		if (optionType.value === 'edit') {
			petId.value = option.petId;
			getPetDetailsFunc(option.petId);
		}
		if (option.isNewOrder) {
			isNewOrder.value = true;
		}
	});

	const deletePic = (event) => {
		fileList.value.splice(event.index, 1);
	};

	const afterRead = async (event) => {
		let lists = [].concat(event.file);
		let fileListLen = fileList.value.length;
		lists.map((item) => {
			fileList.value.push({
				...item,
				status: 'uploading',
				message: '上传中'
			});
		});
		for (let i = 0; i < lists.length; i++) {
			const result = await uploadFilePromise(lists[i].url);
			let item = fileList.value[fileListLen];
			fileList.value.splice(fileListLen, 1, Object.assign(item, {
				status: 'success',
				message: '',
				url: result
			}));
			fileListLen++;
		}
	};

	const uploadFilePromise = (url) => {
		return new Promise((resolve, reject) => {
			uni.uploadFile({
				url: 'https://store-test.catmdogd.com/test-api/h5/oss/upload',
				filePath: url,
				name: 'file',
				formData: {
					user: 'test'
				},
				success: (res) => {
					setTimeout(() => {
						if (res && res.data) {
							let resData = JSON.parse(res.data);
							resolve(resData.url);
						}
						reject("上传失败");
					}, 1000);
				}
			});
		});
	};

	const getPetDetailsFunc = (petId) => {
		getPetDetails({
			id: petId
		}).then((res) => {
			if (res.code == 200) {
				const {
					headImage,
					nickName,
					sex,
					type,
					weight,
					birthday,
					personality,
					vaccine,
					deworm,
					neutered,
					petCard,
					health,
					remark
				} = res.data;
				petBaseInfo.value = {
					nickName,
					sex,
					type,
					weight,
					birthday,
					personality
				};
				petHealthInfo.value = {
					vaccine,
					deworm,
					neutered,
					petCard,
					health,
					remark
				};
				fileList.value = [{
					url: headImage
				}];
			} else {
				uni.showToast({
					title: '获取pet失败',
					duration: 3000,
					icon: "none"
				});
			}
		});
	};

	const save = () => {
		if (!(fileList.value.length > 0 && fileList.value[0].url)) {
			uni.showToast({
				title: '请上传宠物照片!',
				duration: 3000,
				icon: "none"
			});
			return;
		}
		headImage.value = fileList.value[0].url;
		let params = {
			...{
				petType: petType.value,
				headImage: headImage.value
			},
			...petBaseInfo.value,
			...petHealthInfo.value
		};
		if (!params.nickName) {
			uni.showToast({
				title: '请填写宠物昵称!',
				duration: 3000,
				icon: "none"
			});
			return;
		}
		if (!params.type) {
			uni.showToast({
				title: '请输入宠物品种!',
				duration: 3000,
				icon: "none"
			});
			return;
		}
		if (!params.weight) {
			uni.showToast({
				title: '请选择宠物体重!',
				duration: 3000,
				icon: "none"
			});
			return;
		}
		if (!params.personality) {
			uni.showToast({
				title: '请输入宠物性格!',
				duration: 3000,
				icon: "none"
			});
			return;
		}
		if (!(params.vaccine >= 0)) {
			uni.showToast({
				title: '请选择宠物疫苗情况!',
				duration: 3000,
				icon: "none"
			});
			return;
		}
		if (!(params.deworm >= 0)) {
			uni.showToast({
				title: '请选择宠物驱虫情况!',
				duration: 3000,
				icon: "none"
			});
			return;
		}
		if (!params.health) {
			uni.showToast({
				title: '请填写宠物健康情况',
				duration: 3000,
				icon: "none"
			});
			return;
		}
		loading.value = true;
		if (optionType.value === 'edit') {
			params.id = petId.value;
			updatePet(params).then((res) => {
				if (res && res.code === 200) {
					uni.showToast({
						title: '保存成功',
						duration: 3000,
						icon: "none"
					});
					setTimeout(() => {
						loading.value = false;
						if (isNewOrder.value) {
							router.push('/pages/newOrder/petList');
						} else {
							const len = getCurrentPages().length;
							if (len >= 2) {
								uni.navigateBack();
							} else {
								router.push('/pages/personalCenter/pet');
							}
						}
					}, 1000);
				} else {
					loading.value = false;
					uni.showToast({
						title: '更新pet失败',
						duration: 3000,
						icon: "none"
					});
				}
			});
		} else if (optionType.value === 'add') {
			addPet(params).then((res) => {
				if (res.code == 200) {
					uni.showToast({
						title: '保存成功',
						duration: 3000,
						icon: "none"
					});
					setTimeout(() => {
						loading.value = false;
						uni.navigateBack();
					}, 1000);
				} else {
					loading.value = false;
					uni.showToast({
						title: '新增pet失败',
						duration: 3000,
						icon: "none"
					});
				}
			});
		}
	};

	const cancelPet = () => {
		uni.navigateBack(-1);
	};

	const confirmDel = () => {
		delByPetId(petId.value).then((res) => {
			uni.showToast({
				title: '删除成功',
				duration: 3000,
				icon: "none"
			});
			showDel.value = false;
			setTimeout(() => {
				const len = getCurrentPages().length;
				loading.value = false;
				if (len >= 2) {
					uni.navigateBack();
				} else {
					router.push('/pages/personalCenter/pet');
				}
			}, 2000);
		});
	};
</script>

<style lang="scss">
	.personal-pet-cat {

		.breed-select {
			background-color: #fff;
			box-sizing: border-box;
			width: 100%;
			padding: 20px;
			border-radius: 8px 8px 0 0;
			position: absolute;
			bottom: 0;

			.breed-select-btn {
				display: flex;
				justify-content: space-around;
				align-items: center;
			}
		}

		.personal-pet-info-title {
			font-size: 14px;
			color: #333;
			font-weight: bold;
			padding-bottom: 10px;

		}

		.border-bottom {
			border-bottom: 1px solid #efefef;
		}

		.personal-pet-img {
			width: 100%;
			height: 118px;
			background-color: #fff;
			padding: 10px 20px;
		}

		.personal-pet-basic-info {
			background-color: #fff;
			margin-top: 10px;
			padding: 10px 20px;

		}
	}

	.container {
		position: relative;
		height: 100%;
		padding-bottom: 90px;

		.personal-pet-info-btns {
			box-sizing: border-box;
			background-color: #FFFFFF;
			padding: 20rpx 20rpx 40rpx 20rpx;
			width: 100%;
			height: 160rpx;
			position: fixed;
			bottom: 0;
			z-index: 100;
			display: flex;

			.personal-pet-btns {
				display: flex;
				justify-content: space-around;
				align-items: center;
				flex-wrap: nowrap;
				width: 100%;
				height: 90rpx;
				border-radius: 6px;
				font-size: 16px;
				color: #FFFFFF;

				.personal-pet-btn {
					width: 40%;
				}
			}
		}
	}
</style>