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('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>
    </uv-popup>
</template>

<script>
export default {
    data() {
        return {
            selectedOption: '',
            type : 0,
        }
    },
    methods: {
        // 打开弹窗
        open() {
            this.selectedOption = '';
            this.type = 0;
            this.$refs.popup.open('bottom');
        },
        
        // 关闭弹窗
        close() {
            this.$refs.popup.close();
        },
        // 选择选项
        selectOption(option) {
            this.selectedOption = option;

            if(this.type == 1){
                if (option === 'yes') {
                    this.close();
                    setTimeout(() => {
                        uni.navigateTo({
                            url: '/pages/newOrder/serviceNew'
                        });
                    }, 300);
                } else if (option === 'no') {
                    this.close();
                    setTimeout(() => {
                        uni.navigateTo({
                            url: '/pages/companionPetList/companionPetList'
                        });
                    }, 300);
                }
                return
            }
            
            // 如果选择"是"，跳转到伴宠师选择页面
            if (option === 'yes') {
                this.close();
                setTimeout(() => {
                    uni.navigateTo({
                        url: '/pages_order/order/companionSelect'
                    });
                }, 300);
            } else if (option === 'no') {
                this.type = 1;
                this.selectedOption = '';
            }
        }
    }
}
</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>