pet-front/otherPages/myOrdersManage/clock/index.vue

<template>
	<!-- <view>打卡</view> -->
	<view class="box box-size">
		<view class="top box-size" :style="{borderRadius:'16rpx'}">
			<view class="form-title">
				个人准备
			</view>
			<view class="mt32 ml10">
				<span :style="{fontSize:'30rpx',fontWeight:'400'}">手套照片</span>
				<span :style="{fontSize:'22rpx',color:'#C7C7C7'}">(至少1张)</span>
			</view>
			<view class="level">
				<view class="mt20 ml10">

					<up-upload :fileList="fileList.glove" @afterRead="afterRead" @delete="deletePic" name="glove"
						multiple :maxCount="2" width="131rpx" height="131rpx">

						<image src="/static/images/ydd/add_photo.png" mode="" :style="{width:'131rpx',height:'131rpx'}">
						</image>

					</up-upload>


				</view>
			</view>
			<view class="mt32 ml10">
				<span :style="{fontSize:'30rpx',fontWeight:'400'}">鞋套照片</span>
				<span :style="{fontSize:'22rpx',color:'#C7C7C7'}">(至少1张)</span>
			</view>
			<view class="level">
				<view class="mt20 ml10">
					<up-upload :fileList="fileList.ShoeCover" @afterRead="afterRead" @delete="deletePic"
						name="ShoeCover" multiple :maxCount="2" width="131rpx" height="131rpx">

						<image src="/static/images/ydd/add_photo.png" mode="" :style="{width:'131rpx',height:'131rpx'}">
						</image>

					</up-upload>
				</view>
			</view>
		</view>
		<view class="top mt24 box-size" :style="{borderRadius:'16rpx'}">
			<view class="form-title">
				宠物状态记录
			</view>
			<view v-for="(pet, index) in petList" :key="index">
				<view class="mt32 ml10">
					<span :style="{fontSize:'30rpx',fontWeight:'400'}">{{ pet.title }}照片</span>
					<span :style="{fontSize:'22rpx',color:'#C7C7C7'}">(至少2张)</span>
				</view>
				<view class="level">
					<view class="mt20 ml10 mr20">
						<up-upload :fileList="fileList['pet' + index]" @afterRead="afterRead" @delete="deletePic"
							:name="'pet' + index" multiple :maxCount="2" width="131rpx" height="131rpx">

							<image src="/static/images/ydd/add_photo.png" mode=""
								:style="{width:'131rpx',height:'131rpx'}">
							</image>

						</up-upload>
					</view>
				</view>
			</view>
		</view>
		<view class="top mt24 box-size" :style="{borderRadius:'16rpx'}">
			<view class="form-title">
				基础服务记录
			</view>
			<view class="mt32 ml10" :style="{fontSize:'30rpx',fontWeight:'400'}">粮碗前后对比 </view>
			<view class="level">
				<view class="mt20 ml10">
					<up-upload :fileList="fileList.foodA" @afterRead="afterRead" @delete="deletePic" name="foodA"
						multiple :maxCount="1" width="131rpx" height="131rpx">

						<image src="/static/images/ydd/add_photo.png" mode="" :style="{width:'131rpx',height:'131rpx'}">
						</image>

					</up-upload>
					<view class="jus-center level" :style="{color:'#999999',fontSize:'22rpx',width:'131rpx'}">前</view>
				</view>
				<view class="mt20 ml10 ml28">
					<up-upload :fileList="fileList.foodB" @afterRead="afterRead" @delete="deletePic" name="foodB"
						multiple :maxCount="1" width="131rpx" height="131rpx">

						<image src="/static/images/ydd/add_photo.png" mode="" :style="{width:'131rpx',height:'131rpx'}">
						</image>

					</up-upload>
					<view class="jus-center level" :style="{color:'#999999',fontSize:'22rpx',width:'131rpx'}">后</view>
				</view>
			</view>
			<view class="mt32 ml10" :style="{fontSize:'30rpx',fontWeight:'400'}">水碗前后对比 </view>
			<view class="level">
				<view class="mt20 ml10">
					<up-upload :fileList="fileList.waterA" @afterRead="afterRead" @delete="deletePic" name="waterA"
						multiple :maxCount="1" width="131rpx" height="131rpx">

						<image src="/static/images/ydd/add_photo.png" mode="" :style="{width:'131rpx',height:'131rpx'}">
						</image>

					</up-upload>
					<view class="jus-center level" :style="{color:'#999999',fontSize:'22rpx',width:'131rpx'}">前</view>
				</view>
				<view class="mt20 ml10 ml28">
					<up-upload :fileList="fileList.waterB" @afterRead="afterRead" @delete="deletePic" name="waterB"
						multiple :maxCount="1" width="131rpx" height="131rpx">

						<image src="/static/images/ydd/add_photo.png" mode="" :style="{width:'131rpx',height:'131rpx'}">
						</image>

					</up-upload>
					<view class="jus-center level" :style="{color:'#999999',fontSize:'22rpx',width:'131rpx'}">后</view>
				</view>
			</view>
			<view class="mt32 ml10" :style="{fontSize:'30rpx',fontWeight:'400'}">猫砂盆、尿垫前后对比 </view>
			<view class="level">
				<view class="mt20 ml10">
					<up-upload :fileList="fileList.urinalA" @afterRead="afterRead" @delete="deletePic" name="urinalA"
						multiple :maxCount="1" width="131rpx" height="131rpx">

						<image src="/static/images/ydd/add_photo.png" mode="" :style="{width:'131rpx',height:'131rpx'}">
						</image>

					</up-upload>
					<view class="jus-center level" :style="{color:'#999999',fontSize:'22rpx',width:'131rpx'}">前</view>
				</view>
				<view class="mt20 ml10 ml28">
					<up-upload :fileList="fileList.urinalB" @afterRead="afterRead" @delete="deletePic" name="urinalB"
						multiple :maxCount="1" width="131rpx" height="131rpx">

						<image src="/static/images/ydd/add_photo.png" mode="" :style="{width:'131rpx',height:'131rpx'}">
						</image>

					</up-upload>
					<view class="jus-center level" :style="{color:'#999999',fontSize:'22rpx',width:'131rpx'}">后</view>
				</view>
			</view>
		</view>
		<view class="top mt24 box-size" :style="{borderRadius:'16rpx'}">
			<view class="form-title">
				定制服务记录
			</view>
			<view class="mt32 ml10">
				<span :style="{fontSize:'30rpx',fontWeight:'400'}">遛狗</span>
				<span :style="{fontSize:'22rpx',color:'#C7C7C7'}">(2-3张)</span>
			</view>
			<view class="level">
				<view class="mt20 ml10 mr20">
					<up-upload :fileList="fileList.testa" @afterRead="afterRead" @delete="deletePic" name="testa"
						multiple :maxCount="3" width="131rpx" height="131rpx">

						<image src="/static/images/ydd/add_photo.png" mode="" :style="{width:'131rpx',height:'131rpx'}">
						</image>

					</up-upload>
				</view>
			</view>
			<view class="mt32 ml10">
				<span :style="{fontSize:'30rpx',fontWeight:'400'}">陪玩</span>
				<span :style="{fontSize:'22rpx',color:'#C7C7C7'}">(2-3张)</span>
			</view>
			<view class="level">
				<view class="mt20 ml10 mr20">
					<up-upload :fileList="fileList.testb" @afterRead="afterRead" @delete="deletePic" name="testb"
						multiple :maxCount="3" width="131rpx" height="131rpx">

						<image src="/static/images/ydd/add_photo.png" mode="" :style="{width:'131rpx',height:'131rpx'}">
						</image>

					</up-upload>
				</view>
			</view>
		</view>
		<view class="top mt24 box-size" :style="{borderRadius:'16rpx'}">
			<view class="form-title">
				其他补充信息(非必填)
			</view>
			<view class="mt32 ml10" :style="{color:'#999999',fontSize:'30rpx'}">
				可记录一下今日趣事、宠物状况、提醒事项等
			</view>
			<view class="mt24">
				<textarea name="" id="" cols="30" rows="10" placeholder="请输入内容"
					:style="{color:'#999999',fontSize:'30rpx',backgroundColor:'#F5F5F5',borderRadius:'16rpx',width:'681rpx',height:'180rpx'}"
					class="pd20 box-size"></textarea>
			</view>
		</view>
		<view class="buttom mt60 box-size" @click="submit">
			<view class="buttom-item level size-30" :style="{borderRadius:'41rpx',color:'#fff'}">
				确定提交
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		reactive,
		ref
	} from "vue";
	import {
		ossUpload
	} from '@/utils/oss-upload/oss/index.js'


	const fileList = reactive({
		// glove: [],//手套
		// ShoeCover: [],//鞋套
		// food: [],//粮碗
		// water: [],//水碗
		// urinal: [],//猫砂盆、尿盆
	})

	const form = ref({})

	const petList = ref([{
			title: '小汪'
		},
		{
			title: '大黄'
		},
	])

	petList.value.forEach((n, i) => {
		fileList['pet' + i] = []
	})

	// 删除图片
	const deletePic = (event) => {
		if (fileList[event.name]) {
			fileList[event.name].splice(event.index, 1);
		}
	};

	// 新增图片
	const afterRead = (event) => {
		if (!fileList[event.name]) {
			fileList[event.name] = []
		}
		event.file.forEach(n => {
			ossUpload(n.url)
				.then(url => {
					fileList[event.name].push({
						url
					})
				})
		})
	};

	function submit() {
		// 参数效验
		if (!fileList.glove || fileList.glove.length == 0) {
			return msg('请上传鞋套照片')
		}
		if (!fileList.ShoeCover || fileList.ShoeCover.length == 0) {
			return msg('请上传鞋套照片')
		}

		for (let i = 0; i < petList.value.length; i++) {
			if (!fileList['pet' + i] || fileList['pet' + i].length < 2) {
				return msg(`请上传${petList.value[i].title}照片`)
			}
		}

		if (!fileList.foodA || fileList.foodA.length < 2 ||
			!fileList.foodB || fileList.foodB.length < 2) {
			return msg('请上传粮碗前后照片')
		}

		if (!fileList.waterA || fileList.waterA.length < 2 ||
			!fileList.waterB || fileList.waterB.length < 2) {
			return msg('请上传水碗前后照片')
		}

		if (!fileList.urinalA || fileList.urinalA.length < 2 ||
			!fileList.urinalB || fileList.urinalB.length < 2) {
			return msg('请上传猫砂盆、尿盆照片')
		}


	}

	function msg(content) {
		uni.showToast({
			title: content,
			icon: 'none'
		})
	}
</script>

<style scoped lang="scss">
	@import"index.scss"
</style>