You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
293 lines
9.2 KiB
293 lines
9.2 KiB
<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>
|