circulation_ancientCoins_new/components/SexPop.vue

<template>
    <uni-popup ref="sexWrap" :safe-area="false">
        <view class="popup-container">
            <view class="header">
                <view class="title PfScMedium">性别</view>
                <image class="close-icon" @tap="closePop" :src="cssUrl + 'close.svg'" />
            </view>
            <!-- <radio-group class="radio-group" @change="handleChange">
                <label class="radio-item" v-for="item in options" :key="item.value">
                    <radio :value="item.value" :checked="value === item.value" />
                    <text>{{ item.label }}</text>
                </label>
            </radio-group> -->
            <view>
                <uni-data-checkbox mode="button" v-model="tempValue" :localdata="options"
                    @change="handleChange"></uni-data-checkbox>
            </view>

            <view class="confirm-button-wrapper btPadding">
                <view class="confirm-button PfScMedium" @click="handleConfirm">
                    确认
                </view>
            </view>
        </view>
    </uni-popup>

</template>

<script>
export default {
    name: 'MedicalInsuranceSelector',
	options: { styleIsolation: "shared" },
    props: {
        value: { // 当前选中的值（'yes' 或 'no'）
            type: String,
            default: ''
        }
    },
    data() {
        return {
            options: [
                { text: '男', value: 0 },
                { text: '女', value: 1 }
            ],
            tempValue: this.value,// 临时存储选择的值
            cssUrl: this.cssUrl,

        }
    },
    methods: {
        show() {
            this.$refs.sexWrap.open('bottom')
        },
        closePop() {
            this.$refs.sexWrap.close()
        },
        handleChange(e) {
            this.tempValue = e.detail.value
        },

        handleConfirm() {
            // this.$emit('input', this.tempValue)
            this.$emit('confirm', this.tempValue)
            this.closePop()
        }
    }
}
</script>

<style lang="scss" scoped>
.medical-insurance-selector {
    padding: 20rpx;
    background-color: #fff;
    border-radius: 12rpx;

}




.title {
    margin-bottom: 30rpx;
}

.title text {
    display: block;
    font-size: 16px;
    color: #333;
}

.subtitle {
    font-size: 14px;
    color: #999;
    margin-top: 10rpx;
}

.radio-group {
    display: flex;
    flex-direction: column;
}

.radio-item {
    display: flex;
    align-items: center;
    height: 90rpx;
    border-bottom: 1rpx solid #f5f5f5;
}

.radio-item text {
    margin-left: 20rpx;
    font-size: 15px;
}

.popup-container {
    position: relative;
    max-height: calc(100vh - 200rpx);
    overflow-y: scroll;
    background: #ffffff;
    border-radius: 40rpx 40rpx 0px 0px;
    padding: 42rpx 54rpx 16rpx;

    .header {
        position: relative;
        text-align: center;

        .title {
            font-weight: 500;
            font-size: 32rpx;
            color: #000000;
            line-height: 36rpx;
        }

        .close-icon {
            width: 40rpx;
            height: 40rpx;
            position: absolute;
            right: 0;
            bottom: 0;
        }
    }

    .content-container {
        padding: 24rpx 0rpx 68rpx;
        font-family: PingFang SC;

        .content-item {
            background: #FAFAFA;

            &:first-child {
                border-top: none;
                padding: 25rpx 24rpx;
            }

            padding: 19rpx 24rpx;
            border-top: 2rpx solid #F0F0F0;

            span {}

            .bold {
                font-weight: 500;
                font-size: 30rpx;
                color: #000000;
            }

            .top {
                margin-top: 12rpx;
                margin-bottom: 12rpx;

            }

            .special {
                color: #949699;
                letter-spacing: 2rpx;
                font-size: 30rpx;

                .time {
                    margin: 0 6rpx;
                }
            }
        }
    }

    .confirm-button {
        font-weight: 500;
        font-size: 32rpx;
        color: #ffffff;
        margin-top: 46rpx;
        line-height: 92rpx;
        text-align: center;
        width: 100%;
        height: 92rpx;
        background: #39d067;
        border-radius: 16rpx;
    }

    .date {
        margin: 12rpx 36rpx 42rpx;
        text-align: center;
        color: #000000;
        font-size: 26rpx;
        font-family: PingFang SC;
    }

    ::v-deep .uni-data-checklist .checklist-group {
        column-gap: 24rpx;
        margin-bottom: 24rpx;

        .checklist-box {
            margin: 0;
            width: calc(50% - 14rpx);
            box-sizing: border-box;
            display: flex;
            justify-content: center;
            align-items: center;

            .checklist-content {
                flex: none;
            }

            .checklist-content .checklist-text {
                font-size: 30rpx;
                font-weight: normal;
                letter-spacing: 0.22rpx;
                margin-left: 12rpx;
                color: #666666;
            }

            .radio__inner {
                width: 36rpx;
                height: 36rpx;
                border: 2rpx solid #BCBCBC;
                border-radius: 36rpx;
            }

            &.is--button {
                margin-right: 0rpx;
                padding: 20rpx 42rpx 20rpx 24rpx;
                box-sizing: border-box;
                border: none;
                min-height: 82rpx;
                border-radius: 8rpx;
                transition: border-color 0.2s;
                background: #F8F8F8;

                &.is-checked {
                    background: #F5FFF4;

                    .radio__inner {
                        border-color: #00C160;
                    }

                    .radio__inner-icon {
                        background: #00C160;
                    }

                    .checklist-text {
                        color: #333333;
                    }
                }
            }
        }
    }
}
</style>