pet-front-order/pages_order/components/order/CompanionSelectPopup.vue

<template>
    <uv-popup ref="popup" :round="10">
        <view class="companion-popup" v-if="type == 0">
            <view class="popup-header">
                <text class="popup-title">是否指定之前服务过的伴宠师</text>
                <view class="popup-close" @click="close">
                    <uni-icons type="close" size="20" color="#999"></uni-icons>
                </view>
            </view>
            <view class="popup-content">
                <view class="option-item" @click="selectOption('yes')">
                    <text class="option-text">是</text>
                    <view class="option-circle" :class="{'selected': selectedOption === 'yes'}">
                        <view class="option-inner" v-if="selectedOption === 'yes'"></view>
                    </view>
                </view>
                <view class="option-item" @click="selectOption('no')">
                    <text class="option-text">否</text>
                    <view class="option-circle" :class="{'selected': selectedOption === 'no'}">
                        <view class="option-inner" v-if="selectedOption === 'no'"></view>
                    </view>
                </view>
            </view>
        </view>
        <view class="companion-popup" v-else>
            <view class="popup-header">
                <text class="popup-title">请选择您喜欢的下单方式</text>
                <view class="popup-close" @click="close">
                    <uni-icons type="close" size="20" color="#999"></uni-icons>
                </view>
            </view>
            <view class="popup-content">
                <view class="option-item" @click="selectOption('系统下单')">
                    <text class="option-text">系统下单</text>
                    <view class="option-circle" :class="{'selected': selectedOption === 'yes'}">
                        <view class="option-inner" v-if="selectedOption === 'yes'"></view>
                    </view>
                </view>
                <view class="option-item" @click="selectOption('指定伴宠师')">
                    <text class="option-text">指定伴宠师</text>
                    <view class="option-circle" :class="{'selected': selectedOption === 'no'}">
                        <view class="option-inner" v-if="selectedOption === 'no'"></view>
                    </view>
                </view>
            </view>
        </view>
    </uv-popup>
</template>

<script>
import { getOrderDetail, getTeacherDetail } from '@/api/order/order.js'
import { getAddressDetails } from '@/api/system/address.js'
import { getOpenIdKey } from '@/utils/auth'
import { mapState } from 'vuex'
import positionMixin from '@/mixins/position'

export default {
    mixins: [positionMixin],
    data() {
        return {
            selectedOption: '',
            type : 0,
            teacherId: null, // 技师ID（用于再来一单时传递）
            orderId: null, // 订单ID（用于再来一单时传递）
            originalOrderData: null, // 原始订单数据
            buyInfo: {
                teacher: null // 技师信息
            }
        }
    },
    computed: {
        ...mapState(['teacherLevelList']),
    },
    methods: {
        // 打开弹窗
        async open(teacherId = null, orderId = null) {
            this.selectedOption = '';
            this.type = 0;
            this.teacherId = teacherId;
            this.orderId = orderId;
            
            // 如果有订单ID，加载订单数据
            if (this.orderId) {
                await this.loadOrderData();
            }
            
            this.$refs.popup.open('bottom');
        },
        
        // 加载订单数据
        async loadOrderData() {
            if (!this.orderId) return;
            
            const params = {
                openId: getOpenIdKey(),
                orderId: this.orderId
            };
            
            try {
                const res = await getOrderDetail(params);
                if (res) {
                    this.originalOrderData = res;
                    console.log('获取订单详情成功:', res);
                } else {
                    console.error('获取订单详情失败');
                }
            } catch (error) {
                console.error('获取订单数据失败', error);
            }
        },
        
        // 关闭弹窗
        close() {
            this.$refs.popup.close();
        },

        // async submit() {
        //     // 如果有订单数据，处理订单数据
        //     if (this.originalOrderData) {
        //         await this.processOrderData();
        //     }

        //     uni.navigateTo({
        //         url: `/pages/newOrder/serviceNew`
        //     });
        // },

        // 处理订单数据，设置定位和位置信息
        async processOrderData() {
            if (!this.originalOrderData) return;
            
            uni.showLoading({
                title: '加载中...',
                mask: true
            })

            const order = this.originalOrderData;
            
            // 设置再来一单费用
            this.$globalData.newOrderData.originalOrderData = order;
            this.$globalData.newOrderData.moreOrderPrice = 10;
            
            // 验证地址是否存在并设置地址信息（包含定位）
            if (order.addressId) {
                try {
                    const addressRes = await getAddressDetails(order.addressId);
                    if (addressRes && addressRes.id) {
                        // 地址存在，设置地址信息（包含定位信息）
                        this.$globalData.newOrderData.currentAddress = {
                            id: order.addressId,
                            name: order.receiverName,
                            phone: order.receiverPhone,
                            province: order.receiverProvince,
                            city: order.receiverCity,
                            district: order.receiverDistrict,
                            detailAddress: order.receiverDetailAddress,
                            latitude: parseFloat(order.latitude) || 0,
                            longitude: parseFloat(order.longitude) || 0,
                        }
                        console.log('设置地址信息成功，包含定位:', {
                            latitude: order.latitude,
                            longitude: order.longitude
                        });
                    } else {
                        // 地址不存在，但仍然尝试从订单数据中获取定位信息
                        console.log('地址不存在，addressId:', order.addressId);
                        this.$globalData.newOrderData.currentAddress = {};
                    }
                } catch (error) {
                    // 验证失败时也不设置地址信息，但仍然尝试设置定位
                    this.$globalData.newOrderData.currentAddress = {};
                }
            } else {
                // 没有地址ID，但仍然尝试从订单数据中获取定位信息
                this.$globalData.newOrderData.currentAddress = {};
            }
            
            // 处理技师信息
            // if (order.teacherId) {
            //     try {
            //         const teacherRes = await getTeacherDetail({
            //             userId: order.teacherId
            //         });
            //         if (teacherRes) {
            //             let companionInfo = teacherRes;
            //             // 计算距离（需要当前位置信息）
            //             if (teacherRes.appletAddresseList && this.$globalData.newOrderData.latitude && this.$globalData.newOrderData.longitude) {
            //                 companionInfo.distanceText = this.calculateDistanceAddress(teacherRes.appletAddresseList);
            //             }
            //             this.buyInfo.teacher = companionInfo;
            //             // 将技师信息也设置到全局数据中
            //             this.$globalData.newOrderData.selectedTeacher = companionInfo;
            //             console.log('设置技师信息成功:', companionInfo);
            //         }
            //     } catch (error) {
            //         console.error('获取技师详情失败:', error);
            //     }
            // }
            
            // 处理伴宠师等级
            if (order.companionLevel) {
                this.$globalData.newOrderData.companionLevel =
                    this.teacherLevelList.find(item => item.paramValueNum == order.companionLevel);
            }
            
            // 处理提前熟悉相关数据
            if (order.needPreFamiliarize) {
                this.$globalData.newOrderData.needPreFamiliarize = ['是否提前熟悉'];
            }
            
            // 组装宠物数据
            if (order.petVOList && order.petVOList.length > 0) {
                this.$globalData.newOrderData.currentPets = order.petVOList.map(pet => {
                    // 获取该宠物的服务日期
                    const petServices = order.orderServiceList.filter(service => service.petId === pet.id);
                    const selectedDate = petServices.map(service => ({
                        date: service.serviceDate,
                        info: "预定"
                    }));
                    
                    return {
                        ...pet,
                        checked: ['checked'], // 默认选中
                        selectedDate,
                    };
                });
            }

            uni.hideLoading();
        },

        // 选择选项
        async selectOption(option) {
            this.selectedOption = option;

            if(this.type == 1){
                if (option === '系统下单') {
                    // 如果有订单数据，处理订单数据
                    if (this.originalOrderData) {
                        await this.processOrderData();
                    }

                    this.close();
                    setTimeout(() => {
                        uni.navigateTo({
                            url: '/pages/newOrder/serviceNew'
                        });
                    }, 300);
                } else if (option === '指定伴宠师') {
                    // 如果有订单数据，处理订单数据
                    if (this.originalOrderData) {
                        await this.processOrderData();
                    }

                    let locationInfo = this.$globalData.newOrderData.currentAddress;


                    if(!locationInfo || 
                        !locationInfo.latitude ||
                        !locationInfo.longitude
                    ){
                        this.selectLocation();
                        return
                    }

                    let address = locationInfo.province + locationInfo.city + locationInfo.district + locationInfo.detailAddress;

                    // 构建位置信息对象
                    const allInfo = {
                        isCheckLocation: true,
                        locationName: address,
                        locationLongitude: locationInfo.longitude,
                        locationLatitude: locationInfo.latitude,
                        locationAddress: address,
                        selectedDate: [],
                        isCheckTime: false,
                        selectedDateShowText: '',
                    };

                    this.$store.commit('setPosition', {
                        address: address,
                        longitude: locationInfo.longitude,
                        latitude: locationInfo.latitude,
                        date : [],
                    })

                    this.close();
                    setTimeout(() => {
                        uni.navigateTo({
                            url: '/pages_order/companionPetList/companionPetList?info=' + encodeURIComponent(JSON.stringify(allInfo))

                        });
                    }, 300);
                }
                return
            }
            
            // 如果选择"是"，跳转到伴宠师选择页面
            if (option === 'yes') {
                this.close();
                setTimeout(async () => {
                    // 如果有订单数据，先处理订单数据并设置定位信息
                    if (this.originalOrderData) {
                        await this.processOrderData();
                    }
                    
                    let url = '/pages_order/order/companionSelect';
                    let params = [];
                    // 如果有技师ID，添加到URL参数中
                    if (this.teacherId) {
                        params.push(`teacherId=${this.teacherId}`);
                    }
                    // 如果有订单ID，添加到URL参数中
                    if (this.orderId) {
                        params.push(`orderId=${this.orderId}`);
                    }
                    if (params.length > 0) {
                        url += `?${params.join('&')}`;
                    }
                    uni.navigateTo({
                        url: url
                    });
                }, 300);
            } else if (option === 'no') {
                this.type = 1;
                this.selectedOption = '';
            }
        },
        
        // 选择定位
        selectLocation() {
            wx.chooseLocation({
                type: 'gcj02',
                success: (res) => {
                    console.log('选择的位置：', res);
                    
                    // 构建位置信息对象
                    const allInfo = {
                        isCheckLocation: true,
                        locationName: res.address,
                        locationLongitude: res.longitude,
                        locationLatitude: res.latitude,
                        locationAddress: res.address,
                        selectedDate: [],
                        isCheckTime: false,
                        selectedDateShowText: '',
                    };

                    this.$store.commit('setPosition', {
                        address: res.address,
                        longitude: res.longitude,
                        latitude: res.latitude,
                        date : [],
                    })
                    
                    // 跳转到伴宠师列表页面，传递位置信息
                    uni.navigateTo({
                        url: `/pages_order/companionPetList/companionPetList?info=` + encodeURIComponent(JSON.stringify(allInfo))
                    })
                },
                fail: (err) => {
                    console.error('选择位置失败：', err);
                    uni.showToast({
                        title: '选择位置失败，请重试',
                        icon: 'none',
                        duration: 2000
                    })
                }
            });
        },
    }
}
</script>

<style lang="scss" scoped>
.companion-popup {
    position: relative;
    background-color: #FFFFFF;
    border-radius: 20rpx;
    
    .popup-header {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 30rpx 20rpx;
        position: relative;
        
        .popup-title {
            font-size: 32rpx;
            font-weight: bold;
            color: #333;
            text-align: center;
        }
        
        .popup-close {
            position: absolute;
            right: 20rpx;
            top: 30rpx;
        }
    }
    
    .popup-content {
        padding: 20rpx 30rpx 50rpx;
        
        .option-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 100rpx;
            border-radius: 10rpx;
            background-color: #F8F8F8;
            margin-bottom: 20rpx;
            padding: 0 30rpx;
            
            // &:first-child {
            //     background-color: #FFF9E6;
                
            //     .option-text {
            //         color: #FFAA48;
            //     }
            // }
            
            &:last-child {
                margin-bottom: 0;
            }
            
            .option-text {
                font-size: 28rpx;
                color: #333;
            }
            
            .option-circle {
                width: 36rpx;
                height: 36rpx;
                border-radius: 50%;
                border: 2rpx solid #DDDDDD;
                display: flex;
                align-items: center;
                justify-content: center;
                
                &.selected {
                    border-color: #FFAA48;
                }
                
                .option-inner {
                    width: 24rpx;
                    height: 24rpx;
                    border-radius: 50%;
                    background-color: #FFAA48;
                }
            }
        }
    }
}
</style>