406 lines
13 KiB
Vue
406 lines
13 KiB
Vue
<route lang="json5">
|
|
{
|
|
style: {
|
|
navigationBarTitleText: '宠物档案信息',
|
|
},
|
|
}
|
|
</route>
|
|
|
|
<template>
|
|
<view class="p-5 bg-gray-100 h-screen">
|
|
<!-- 上传头像区域 -->
|
|
<view class="flex justify-center my-5">
|
|
<view class="relative">
|
|
<wd-img
|
|
round
|
|
:src="imageSrc"
|
|
mode="aspectFill"
|
|
class="w-24 h-24 rounded-full"
|
|
@error="imageLoadError"
|
|
></wd-img>
|
|
<view
|
|
class="absolute bottom-0 right-0 bg-white rounded-full w-[24px] h-[24px] flex justify-center items-center"
|
|
>
|
|
<wd-icon name="add" color="#ffc107" @click="chooseImage"></wd-icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="text-center text-sm text-gray-600">宠物头像</view>
|
|
|
|
<!-- 表单区域 -->
|
|
<view class="mt-5 bg-white p-5 rounded-lg shadow">
|
|
<!-- 名字 -->
|
|
<view class="mb-4">
|
|
<text class="text-gray-800">宠物名字</text>
|
|
<input placeholder="请输入名字" v-model="petName" />
|
|
</view>
|
|
|
|
<!-- 生日 -->
|
|
<view class="mb-4">
|
|
<text class="text-gray-800">宠物生日</text>
|
|
<picker mode="date" :value="petBirthday" start="2000-01-01" @change="onBirthdayChange">
|
|
<view class="w-full mt-2 p-2 border border-gray-300 rounded">
|
|
{{ petBirthday || '请选择生日' }}
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
|
|
<!-- 性别 -->
|
|
<view class="mb-4">
|
|
<text class="text-gray-800">宠物性别</text>
|
|
<view class="flex mt-2">
|
|
<button
|
|
:class="[
|
|
'flex-1 py-2 mx-1',
|
|
gender === '男孩' ? 'bg-blue-500 text-white' : 'bg-gray-200',
|
|
]"
|
|
@click="gender = '男孩'"
|
|
>
|
|
男孩
|
|
</button>
|
|
<button
|
|
:class="[
|
|
'flex-1 py-2 mx-1',
|
|
gender === '女孩' ? 'bg-pink-500 text-white' : 'bg-gray-200',
|
|
]"
|
|
@click="gender = '女孩'"
|
|
>
|
|
女孩
|
|
</button>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 品种 -->
|
|
<view class="mb-4">
|
|
<text class="text-gray-800">宠物品种</text>
|
|
<wd-picker
|
|
class="w-full mt-2 p-2 border border-gray-300 rounded"
|
|
:columns="breedOptions"
|
|
v-model="petBreed"
|
|
/>
|
|
</view>
|
|
|
|
<!-- 毛色 -->
|
|
<view class="mb-4">
|
|
<text class="text-gray-800">宠物毛色</text>
|
|
<wd-picker
|
|
class="w-full mt-2 p-2 border border-gray-300 rounded"
|
|
:columns="colorOptions"
|
|
v-model="petColor"
|
|
/>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 提交按钮 -->
|
|
<view class="mt-5">
|
|
<button
|
|
class="w-full py-4 bg-[#ffc107] text-white text-center rounded-full text-lg h-11 flex items-center justify-center shadow-lg"
|
|
@click="createPetProfile"
|
|
>
|
|
{{ petId ? '更新电子身份证' : '创建电子身份证' }}
|
|
</button>
|
|
</view>
|
|
|
|
<!-- 删除按钮 -->
|
|
<button
|
|
v-if="petId"
|
|
class="mt-5 w-full py-4 bg-red-500 text-white rounded-full text-lg h-11 flex items-center justify-center shadow-lg"
|
|
@click="deletePet"
|
|
>
|
|
删除
|
|
</button>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { useUserStore } from '@/store'
|
|
import { baseUrl } from '@/utils/commUtils'
|
|
import { httpPost, httpGet } from '@/utils/http'
|
|
import { ref } from 'vue'
|
|
|
|
const petName = ref('')
|
|
const petBirthday = ref('')
|
|
const gender = ref('')
|
|
const petBreed = ref('')
|
|
const petColor = ref('')
|
|
const imageSrc = ref('https://via.placeholder.com/150')
|
|
const userId = ref('')
|
|
const petId = ref(null)
|
|
|
|
const imageLoadError = (errMsg) => {
|
|
console.log('图片加载失败')
|
|
imageSrc.value = 'https://via.placeholder.com/150'
|
|
}
|
|
|
|
const userStore = useUserStore()
|
|
|
|
const breedOptions = ref([
|
|
{ value: '其他', label: '其他' },
|
|
{ value: '阿比西尼亚猫', label: '阿比西尼亚猫' },
|
|
{ value: '安哥拉猫', label: '安哥拉猫' },
|
|
{ value: '埃及猫', label: '埃及猫' },
|
|
{ value: '奥西猫', label: '奥西猫' },
|
|
{ value: '巴厘猫', label: '巴厘猫' },
|
|
{ value: '波米拉猫', label: '波米拉猫' },
|
|
{ value: '伯曼猫', label: '伯曼猫' },
|
|
{ value: '布偶猫', label: '布偶猫' },
|
|
{ value: '波斯猫', label: '波斯猫' },
|
|
])
|
|
|
|
const colorOptions = ref([
|
|
{ value: '黑白色', label: '黑白色' },
|
|
{ value: '白色', label: '白色' },
|
|
{ value: '黑色', label: '黑色' },
|
|
{ value: '橘色', label: '橘色' },
|
|
{ value: '蓝色', label: '蓝色' },
|
|
{ value: '蓝白色', label: '蓝白色' },
|
|
{ value: '橘白色', label: '橘白色' },
|
|
{ value: '灰色', label: '灰色' },
|
|
{ value: '灰白色', label: '灰白色' },
|
|
{ value: '乳色', label: '乳色' },
|
|
{ value: '乳白色', label: '乳白色' },
|
|
{ value: '棕色', label: '棕色' },
|
|
{ value: '棕白色', label: '棕白色' },
|
|
{ value: '银色', label: '银色' },
|
|
{ value: '银白色', label: '银白色' },
|
|
{ value: '雪色', label: '雪色' },
|
|
{ value: '木炭色', label: '木炭色' },
|
|
{ value: '金渐层', label: '金渐层' },
|
|
{ value: '蓝金渐层', label: '蓝金渐层' },
|
|
{ value: '银渐层', label: '银渐层' },
|
|
{ value: '金点', label: '金点' },
|
|
{ value: '银点', label: '银点' },
|
|
{ value: '重点色', label: '重点色' },
|
|
{ value: '手套色', label: '手套色' },
|
|
{ value: '海豹色', label: '海豹色' },
|
|
{ value: '火焰色', label: '火焰色' },
|
|
{ value: '蓝双色', label: '蓝双色' },
|
|
{ value: '海豹双色', label: '海豹双色' },
|
|
{ value: '梵色', label: '梵色' },
|
|
{ value: '玳瑁色', label: '玳瑁色' },
|
|
{ value: '三花色', label: '三花色' },
|
|
{ value: '烟灰色', label: '烟灰色' },
|
|
{ value: '虎斑纹', label: '虎斑纹' },
|
|
{ value: '棕虎斑', label: '棕虎斑' },
|
|
{ value: '银虎斑', label: '银虎斑' },
|
|
{ value: '红虎斑', label: '红虎斑' },
|
|
{ value: '山猫纹', label: '山猫纹' },
|
|
{ value: '玫瑰纹', label: '玫瑰纹' },
|
|
{ value: '大理石纹', label: '大理石纹' },
|
|
{ value: '其他', label: '其他' },
|
|
{ value: '褐色', label: '褐色' },
|
|
{ value: '红色', label: '红色' },
|
|
{ value: '小鹿色', label: '小鹿色' },
|
|
{ value: '纯色', label: '纯色' },
|
|
{ value: '渐层色', label: '渐层色' },
|
|
{ value: '烟色', label: '烟色' },
|
|
{ value: '补丁', label: '补丁' },
|
|
{ value: '蓝虎斑', label: '蓝虎斑' },
|
|
{ value: '凯米尔虎斑', label: '凯米尔虎斑' },
|
|
{ value: '虎斑加白', label: '虎斑加白' },
|
|
{ value: '渐层加白', label: '渐层加白' },
|
|
{ value: '烟色加白', label: '烟色加白' },
|
|
{ value: '双色', label: '双色' },
|
|
{ value: '杂色', label: '杂色' },
|
|
{ value: '金吉拉银色', label: '金吉拉银色' },
|
|
{ value: '金吉拉金色', label: '金吉拉金色' },
|
|
{ value: '重点色加白', label: '重点色加白' },
|
|
{ value: '渐层重点色', label: '渐层重点色' },
|
|
{ value: '貂色', label: '貂色' },
|
|
{ value: '香槟色', label: '香槟色' },
|
|
{ value: '铂色', label: '铂色' },
|
|
{ value: '海豹山猫双色', label: '海豹山猫双色' },
|
|
{ value: '蓝山猫双色', label: '蓝山猫双色' },
|
|
{ value: '其他双色', label: '其他双色' },
|
|
{ value: '重点双色', label: '重点双色' },
|
|
{ value: '巧克力重点色', label: '巧克力重点色' },
|
|
{ value: '海豹重点色', label: '海豹重点色' },
|
|
{ value: '蓝重点色', label: '蓝重点色' },
|
|
{ value: '丁香重点色', label: '丁香重点色' },
|
|
{ value: '金色', label: '金色' },
|
|
{ value: '浅三花色', label: '浅三花色' },
|
|
{ value: '鱼骨纹色', label: '鱼骨纹色' },
|
|
{ value: '混合色', label: '混合色' },
|
|
{ value: '橙褐色', label: '橙褐色' },
|
|
{ value: '柏色', label: '柏色' },
|
|
{ value: '布伦海姆色', label: '布伦海姆色' },
|
|
{ value: '纯红色', label: '纯红色' },
|
|
{ value: '橙色', label: '橙色' },
|
|
{ value: '紫色', label: '紫色' },
|
|
{ value: '淡灰色', label: '淡灰色' },
|
|
{ value: '黄色', label: '黄色' },
|
|
{ value: '浅红色', label: '浅红色' },
|
|
{ value: '野猪色', label: '野猪色' },
|
|
{ value: '巧克力色', label: '巧克力色' },
|
|
{ value: '黑铁灰色', label: '黑铁灰色' },
|
|
{ value: '盐与胡椒色', label: '盐与胡椒色' },
|
|
{ value: '红褐色', label: '红褐色' },
|
|
{ value: '黑褐色', label: '黑褐色' },
|
|
{ value: '花斑色', label: '花斑色' },
|
|
{ value: '马斑色', label: '马斑色' },
|
|
{ value: '灰褐色', label: '灰褐色' },
|
|
{ value: '银灰色', label: '银灰色' },
|
|
{ value: '椒盐色', label: '椒盐色' },
|
|
{ value: '金黄色', label: '金黄色' },
|
|
{ value: '桃红色', label: '桃红色' },
|
|
{ value: '火烈鸟红色', label: '火烈鸟红色' },
|
|
{ value: '麦色', label: '麦色' },
|
|
{ value: '浅黄褐色', label: '浅黄褐色' },
|
|
{ value: '浅黄色', label: '浅黄色' },
|
|
{ value: '浅米色', label: '浅米色' },
|
|
{ value: '灰黄色', label: '灰黄色' },
|
|
{ value: '黄褐色', label: '黄褐色' },
|
|
{ value: '杏色', label: '杏色' },
|
|
{ value: '沙色', label: '沙色' },
|
|
{ value: '沙褐色', label: '沙褐色' },
|
|
{ value: '蓝灰色', label: '蓝灰色' },
|
|
{ value: '浅麦色', label: '浅麦色' },
|
|
{ value: '黑银色', label: '黑银色' },
|
|
{ value: '棕褐色', label: '棕褐色' },
|
|
{ value: '淡棕色', label: '淡棕色' },
|
|
{ value: '赤褐色', label: '赤褐色' },
|
|
{ value: '浅棕色', label: '浅棕色' },
|
|
{ value: '浅巧克力色', label: '浅巧克力色' },
|
|
{ value: '深棕色', label: '深棕色' },
|
|
{ value: '灰白色', label: '灰白色' },
|
|
{ value: '柠檬色', label: '柠檬色' },
|
|
{ value: '浅褐色', label: '浅褐色' },
|
|
{ value: '深红褐色', label: '深红褐色' },
|
|
{ value: '斑点色', label: '斑点色' },
|
|
{ value: '虎斑色', label: '虎斑色' },
|
|
{ value: '淡黄色', label: '淡黄色' },
|
|
{ value: '粉红色', label: '粉红色' },
|
|
{ value: '深灰色', label: '深灰色' },
|
|
{ value: '黑棕色', label: '黑棕色' },
|
|
{ value: '铁锈色', label: '铁锈色' },
|
|
{ value: '棕红色', label: '棕红色' },
|
|
{ value: '深红色', label: '深红色' },
|
|
{ value: '深褐色', label: '深褐色' },
|
|
{ value: '奶油色', label: '奶油色' },
|
|
{ value: '鹿皮色', label: '鹿皮色' },
|
|
{ value: '橙黄色', label: '橙黄色' },
|
|
])
|
|
|
|
onLoad(async (options) => {
|
|
if (options && options.id) {
|
|
petId.value = options.id
|
|
await fetchPetData(petId.value)
|
|
}
|
|
})
|
|
|
|
const fetchPetData = async (id) => {
|
|
const response = await httpGet(`/petInfo/find_by_id/${id}`)
|
|
if (response.code === 200) {
|
|
const petData = response.data
|
|
petName.value = petData.name || ''
|
|
petBirthday.value = petData.age || ''
|
|
gender.value = petData.sex === 1 ? '男孩' : '女孩'
|
|
petBreed.value = petData.breed || ''
|
|
petColor.value = petData.hairColor || ''
|
|
imageSrc.value = baseUrl + petData.profileUrl || 'https://via.placeholder.com/150'
|
|
userId.value = petData.userId || '-1'
|
|
} else {
|
|
uni.showToast({ title: '获取宠物信息失败', icon: '' })
|
|
}
|
|
}
|
|
|
|
const chooseImage = () => {
|
|
uni.chooseImage({
|
|
count: 1,
|
|
success: (res) => {
|
|
imageSrc.value = res.tempFilePaths[0]
|
|
},
|
|
})
|
|
}
|
|
|
|
const onBirthdayChange = (e) => {
|
|
petBirthday.value = e.detail.value
|
|
}
|
|
|
|
const createPetProfile = () => {
|
|
const formData = {
|
|
id: petId.value || undefined,
|
|
name: petName.value,
|
|
age: petBirthday.value + ' 00:00:00',
|
|
sex: gender.value === '男孩' ? 1 : 0,
|
|
breed: petBreed.value,
|
|
hairColor: petColor.value,
|
|
}
|
|
if (petId.value) {
|
|
formData.userId = userId.value
|
|
}
|
|
|
|
const url = petId.value ? '/petInfo/update' : '/petInfo/addPet'
|
|
const isNetworkUrl = imageSrc.value.startsWith('http')
|
|
|
|
uni.uploadFile({
|
|
url,
|
|
filePath: imageSrc.value,
|
|
name: 'file',
|
|
formData,
|
|
header: {
|
|
satoken: `Bearer ${userStore.token}`, // 添加认证头部
|
|
},
|
|
success: (uploadRes) => {
|
|
const data = JSON.parse(uploadRes.data)
|
|
if (data.code === 200) {
|
|
uni.showToast({ title: petId.value ? '更新成功' : '创建成功', icon: 'success' })
|
|
resetForm()
|
|
uni.navigateBack()
|
|
} else {
|
|
uni.showToast({ title: data.message, icon: 'none' })
|
|
}
|
|
},
|
|
fail: (e) => {
|
|
console.log(e)
|
|
uni.showToast({ title: '上传失败', icon: 'none' })
|
|
},
|
|
})
|
|
}
|
|
|
|
const calculateAge = (birthday) => {
|
|
const birthDate = new Date(birthday)
|
|
const currentDate = new Date()
|
|
let age = currentDate.getFullYear() - birthDate.getFullYear()
|
|
const monthDiff = currentDate.getMonth() - birthDate.getMonth()
|
|
if (monthDiff < 0 || (monthDiff === 0 && currentDate.getDate() < birthDate.getDate())) {
|
|
age--
|
|
}
|
|
return age
|
|
}
|
|
|
|
const deletePet = () => {
|
|
uni.showModal({
|
|
title: '确认删除',
|
|
content: '你确定要删除这个宠物档案吗？',
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
httpPost('/petInfo/delete', { id: petId.value }).then(() => {
|
|
uni.showToast({ title: '删除成功', icon: 'success' })
|
|
uni.navigateBack()
|
|
})
|
|
}
|
|
},
|
|
})
|
|
}
|
|
|
|
const resetForm = () => {
|
|
petName.value = ''
|
|
petBirthday.value = ''
|
|
gender.value = ''
|
|
petBreed.value = ''
|
|
petColor.value = ''
|
|
imageSrc.value = 'https://via.placeholder.com/150'
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* 使用 UnoCSS 定义样式 */
|
|
button {
|
|
@apply px-2 py-1 text-sm;
|
|
}
|
|
button.primary {
|
|
@apply px-2 py-1 bg-[#ffc107] text-white text-sm;
|
|
}
|
|
</style>
|