pet-front-order/pages/personalCenter/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;">
                <view class="avatar-container" @click="selectImage">
                    <image v-if="avatarPath" :src="avatarPath" class="avatar-image" mode="aspectFill"></image>
                    <image v-else src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/index/cat_new.png" 
                           class="avatar-image" mode="aspectFill"></image>
                    <view class="avatar-overlay">
                        <text class="avatar-text">点击上传</text>
                    </view>
                </view>
            </view>
        </view>
        <PetBaseInfo :petType="petType" :petBaseInfo.sync="petBaseInfo" />
        <PetHealthInfo :petType="petType" :petHealthInfo.sync="petHealthInfo" />
        <view class="personal-pet-info-btns">
            <view class="personal-pet-btns">
                <view class="personal-pet-btn">
                    <u-button :disabled="optionType != 'edit'" color="#FFF4E4" @click="deletePet">
                        <view style="color: #FFAA48;">
                            删除
                        </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>
        
        <!-- 裁剪组件 -->
        <ksp-cropper 
            mode="free" 
            :width="200" 
            :height="200" 
            :maxWidth="1024" 
            :maxHeight="1024" 
            :url="cropperUrl" 
            @cancel="onCropperCancel" 
            @ok="onCropperOk">
        </ksp-cropper>
    </view>
</template>

<script>
import { addPet, getPetDetails, updatePet, delPet } from '@/api/system/pet'
import PetBaseInfo from './components/petBaseInfo.vue'
import PetHealthInfo from './components/petHealthInfo.vue'
export default {
    data() {
        return {
            loading: false,
            fileList: [],
            petId: '',
            petType: 'dog',
            optionType: 'add',
            isNewOrder: false,
            delContent: '',
            photo: '',
            // 新增裁剪相关数据
            cropperUrl: '',
            avatarPath: '',
            petBaseInfo: {
                name: '',
                gender: '',
                breed: '',
                bodyType: '',
                birthDate: '',
                personality: ''
            },
            petHealthInfo: {
                vaccineStatus: '',
                dewormingStatus: '',
                sterilization: '',
                doglicenseStatus: '',
                healthStatus: [],
                remark: ''
            },
            showDel: false,
        }

    },
    components: {
        PetBaseInfo,
        PetHealthInfo
    },
    onLoad: function (option) {
        console.log(option.petType); //打印出上个页面传递的参数。
        this.petType = option.petType;
        this.optionType = option.optionType;
        if (this.optionType == 'edit') {
            this.petId = option.petId;
            this.getPetDetails(option.petId);
        }
        if (option.isNewOrder) {
            this.isNewOrder = true;
        }
        
        // 监听品种选择事件
        uni.$on('breedSelected', this.handleBreedSelected);
    },

    methods: {
        // 选择图片
        selectImage() {
            uni.chooseImage({
                count: 1,
                sizeType: ['original', 'compressed'],
                sourceType: ['album', 'camera'],
                success: (res) => {
                    // 设置裁剪组件的url，显示裁剪界面
                    this.cropperUrl = res.tempFilePaths[0];
                },
                fail: (err) => {
                    console.log('选择图片失败:', err);
                    uni.showToast({
                        title: '选择图片失败',
                        icon: 'none'
                    });
                }
            });
        },

        // 裁剪取消
        onCropperCancel() {
            this.cropperUrl = '';
        },

        // 裁剪完成
        async onCropperOk(ev) {
            try {
                this.cropperUrl = '';
                this.avatarPath = ev.path;
                
                // 上传裁剪后的图片
                const uploadResult = await this.uploadFilePromise(ev.path);
                this.photo = uploadResult;
                
                // 更新fileList用于兼容原有逻辑
                this.fileList = [{
                    url: uploadResult,
                    status: 'success',
                    message: ''
                }];
                
                uni.showToast({
                    title: '头像上传成功',
                    icon: 'success'
                });
            } catch (error) {
                console.log('上传失败:', error);
                uni.showToast({
                    title: '上传失败，请重试',
                    icon: 'none'
                });
            }
        },

        // 删除图片
        deletePic(event) {
            this.fileList.splice(event.index, 1)
            this.avatarPath = '';
            this.photo = '';
        },

        // 新增图片 - 保留原有方法以兼容
        async afterRead(event) {
            // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
            let lists = [].concat(event.file)
            let fileListLen = this.fileList.length
            lists.map((item) => {
                this.fileList.push({
                    ...item,
                    status: 'uploading',
                    message: '上传中'
                })
            })
            for (let i = 0; i < lists.length; i++) {
                const result = await this.uploadFilePromise(lists[i].url)
                let item = this.fileList[fileListLen]
                this.fileList.splice(fileListLen, 1, Object.assign(item, {
                    status: 'success',
                    message: '',
                    url: result
                }))
                fileListLen++
            }
        },
        uploadFilePromise(url) {
            return new Promise((resolve, reject) => {
                let a = 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)
                    }
                });
            })
        },
        getPetDetails(petId) {
            getPetDetails(petId).then(res => {
                if (res && res.id) {
                    const { photo, name, gender, breed, bodyType, birthDate, personality, vaccineStatus, dewormingStatus, sterilization, doglicenseStatus, healthStatus, remark } = res;
                    this.petBaseInfo = {
                        name,
                        gender,
                        breed,
                        bodyType,
                        birthDate,
                        personality
                    };
                    this.petHealthInfo = {
                        vaccineStatus,
                        dewormingStatus,
                        sterilization,
                        doglicenseStatus,
                        healthStatus,
                        remark
                    }
                    this.fileList = [{ url: photo }]
                    this.avatarPath = photo;
                    this.photo = photo; // 确保photo字段也被正确设置
                } else {
                    this.$modal.showToast('获取pet失败')
                }
            })
        },
        save() {

            console.log(this.petBaseInfo)
            console.log(this.petHealthInfo)
            if (!(this.fileList.length > 0 && this.fileList[0].url)) {
                this.$modal.showToast('请上传宠物照片!')
                return;
            }
            // 确保使用最新的头像URL
            this.photo = this.fileList[0].url;
            let params = {
                petType:  this.petType,
                photo: this.photo,
                ...this.petBaseInfo,
                ...this.petHealthInfo
            }
            
            console.log('保存参数:', params); // 添加调试日志

            if (!params.name) {
                this.$modal.showToast('请填写宠物昵称!')
                return;
            }
            if (!params.breed) {
                this.$modal.showToast('请选择宠物品种!')
                return;
            }
            if (!params.bodyType) {
                this.$modal.showToast('请选择宠物体重!')
                return;
            }
            if (!params.personality) {
                this.$modal.showToast('请选择宠物性格，可多选!')
                return;
            }
            if (!params.vaccineStatus) {
                this.$modal.showToast('请选择宠物疫苗情况!')
                return;
            }
            if (!params.dewormingStatus) {
                this.$modal.showToast('请选择宠物驱虫情况!')
                return;
            }
            if (params.healthStatus == null || !params.healthStatus.length) {
                this.$modal.showToast('请选择宠物健康情况，可多选!')
                return;
            }
            this.loading = true
            if (this.optionType == 'edit') {
                params.id = this.petId;
                updatePet(params).then(res => {
                    if (res && res.code == 200) {
                        uni.showToast({
                            title: '保存成功',
                            duration: 3000,
                            icon: "none"
                        })
                        setTimeout(() => {
                            this.loading = false;
                            if (this.isNewOrder) {
                                uni.redirectTo({ url: '/pages/newOrder/petList' });
                            } else {
                                let len = getCurrentPages().length;
                                if (len >= 2) {
                                    uni.navigateBack();
                                } else {
                                    uni.redirectTo({ url: '/pages/personalCenter/pet' });
                                }
                            }
                        }, 1000);
                    } else {
                        this.loading = false
                        uni.showToast({
                            title: '更新pet失败',
                            duration: 3000,
                            icon: "none"
                        })
                    }
                })
            } else if (this.optionType == 'add') {
                addPet(params).then(res => {
                    if (res && res == 1) {
                        uni.showToast({
                            title: '保存成功',
                            duration: 3000,
                            icon: "none"
                        })
                        setTimeout(() => {
                            this.loading = false;
                            if (this.isNewOrder) {
                                uni.redirectTo({ url: '/pages/newOrder/petList' });
                            } else {
                                let len = getCurrentPages().length;
                                if (len >= 2) {
                                    uni.navigateBack();
                                } else {
                                    uni.redirectTo({ url: '/pages/personalCenter/pet' });
                                }
                            }
                        }, 1000);
                    } else {
                        this.loading = false
                        uni.showToast({
                            title: '新增pet失败',
                            duration: 3000,
                            icon: "none"
                        })
                    }
                })
            }
        },
        deletePet() {
            this.delContent = `确定要删除${this.petBaseInfo.name}?`;
            this.showDel = true;
        },
        confirmDel() {
            delPet(this.petId).then(res => {
                console.log(res);
                uni.showToast({
                    title: '删除成功',
                    duration: 3000,
                    icon: "none"
                })
                this.showDel = false;
                setTimeout(() => {
                    let len = getCurrentPages().length;
                    this.loading = false
                    if (len >= 2) {
                        uni.navigateBack();
                    } else {
                        uni.redirectTo({ url: '/pages/personalCenter/pet' });
                    }
                }, 2000);
            })
        },

        // 处理品种选择结果
        handleBreedSelected(data) {
            console.log('接收到品种选择结果:', data);
            if (data && data.breed && data.petType === this.petType) {
                this.petBaseInfo.breed = data.breed;
                console.log('更新品种信息:', data.breed);
            }
        },

    },
    
    onUnload() {
        // 移除事件监听器
        uni.$off('breedSelected', this.handleBreedSelected);
    }
}
</script>

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

    .breed-select {
        background-color: #fff;
        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 {
        background-color: #FFFFFF;
        padding: 10px 20px 40px;
        width: 100%;
        height: 90px;
        position: fixed;
        bottom: 0;
        z-index: 100;
        text-align: center;

        .personal-pet-btns {
            display: flex;
            justify-content: space-around;
            align-items: center;
            flex-wrap: nowrap;
            flex-direction: row;

            .personal-pet-btn {
                width: 40%;
            }
        }
    }
}

// 新增头像相关样式
.avatar-container {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #f0f0f0;
    
    .avatar-image {
        width: 100%;
        height: 100%;
    }
    
    .avatar-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.3);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.3s;
        
        .avatar-text {
            color: #fff;
            font-size: 10px;
            text-align: center;
        }
    }
    
    &:active .avatar-overlay {
        opacity: 1;
    }
}
</style>