caiyunyi/pages/useConfig/userInfo.vue

<template>
    <view class="main">
        <view class="userInfoContent">
            <view class="userInfoItem">
                <view class="userInfoItemLabel">头像</view>
                <view class="userInfoItemRight">
                </view>
            </view>
            <view class="userInfoItem">
                <view class="userInfoItemLabel">昵称</view>
                <view class="userInfoItemRight">
                    <!-- <image class="rightArrow" src="https://eshangtech.com/caiyunyiImg/rightArrow.png" /> -->
                    <!-- <text class="rightText">{{ phone }}</text> -->
                    <input class="phoneBox" v-model="editableNickname" placeholder="请输入昵称" />

                </view>
            </view>

            <view class="userInfoItem">
                <view class="userInfoItemLabel">性别</view>
                <view class="userInfoItemRight">
                    <picker @change="bindGenderChange" :value="genderIndex" :range="genderArray">
                        <view class="phoneBox">{{ genderArray[genderIndex] }}</view>
                    </picker>
                </view>
            </view>

            <view class="userInfoItem">
                <view class="userInfoItemLabel">生日</view>
                <view class="userInfoItemRight">
                    <picker mode="multiSelector" @change="bindMultiPickerChange"
                        @columnchange="bindMultiPickerColumnChange" :value="multiIndex" :range="multiArray">
                        <view class="phoneBox">{{ birthday || '请选择生日' }}</view>
                    </picker>
                </view>
            </view>

            <view class="userInfoItem">
                <view class="userInfoItemLabel">邮箱地址</view>
                <view class="userInfoItemRight">
                    <input class="phoneBox" v-model="email" placeholder="请输入昵称" />
                </view>
            </view>


        </view>
    </view>
</template>

<script>
import { mapGetters } from "vuex";
export default {
    data() {
        return {
            editableNickname: "",// 昵称
            genderArray: ['男', '女'], // 性别选项
            genderIndex: 0, // 选中的性别索引
            multiArray: [['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], Array.from({ length: 31 }, (_, i) => `${i + 1}日`)], // 多列选择器的数据
            multiIndex: [0, 0], // 多列选择器的选中索引
            birthday: '',
            email: '', // 邮箱地址
        }
    },
    computed: {
        ...mapGetters({
            user: "user",
        }),
    },
    onLoad() {

    },
    methods: {
        // 性别选择改变
        bindGenderChange(e) {
            this.genderIndex = e.detail.value
        },
        // 生日多列选择器值改变
        bindMultiPickerChange(e) {
            this.multiIndex = e.detail.value;
            const month = this.multiIndex[0] + 1;
            const day = this.multiIndex[1] + 1;
            // 格式化为 MM-DD 字符串，不足两位前补零
            const formattedMonth = month < 10 ? '0' + month : month;
            const formattedDay = day < 10 ? '0' + day : day;
            this.birthday = `${formattedMonth}-${formattedDay}`;
        },
        // 生日多列选择器列改变
        bindMultiPickerColumnChange(e) {
            const data = [...this.multiArray]; // 复制 multiArray
            const multiIndex = [...this.multiIndex]; // 复制 multiIndex
            multiIndex[e.detail.column] = e.detail.value;

            if (e.detail.column === 0) { // 月份列改变
                const month = e.detail.value + 1; // 月份是 1-based
                let daysInMonth = 31;
                if (month === 4 || month === 6 || month === 9 || month === 11) {
                    daysInMonth = 30;
                } else if (month === 2) {
                    // 简化处理，不考虑闰年，二月按 28 天计算
                    daysInMonth = 28;
                }
                // 生成新的天数数组
                const daysArray = Array.from({ length: daysInMonth }, (_, i) => `${i + 1}日`);
                data[1] = daysArray; // 更新天数数组

                // 如果之前选择的天数索引超出新月份的天数范围，则重置天数索引
                if (multiIndex[1] >= daysInMonth) {
                    multiIndex[1] = daysInMonth - 1;
                }
            }

            // 更新数据和索引
            this.multiArray = data;
            this.multiIndex = multiIndex;
        },
    }
}
</script>
<style lang="less" scoped>
.main {
    width: 100vw;
    height: 100vh;
    background-color: #F5F5F5;

    .userInfoContent {
        width: 100%;
        box-sizing: border-box;
        padding: 0 30rpx;
        background-color: #fff;
        margin-top: 18rpx;

        .userInfoItem {
            width: 100%;
            padding: 32rpx 0;
            border-bottom: 2rpx solid #F5F5F5;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .userInfoItemLabel {
                font-family: PingFang-SC, PingFang-SC;
                font-weight: 500;
                font-size: 28rpx;
                color: #333333;
                line-height: 40rpx;
                text-align: left;
                font-style: normal;
                text-transform: none;
            }

            .userInfoItemRight {
                .rightArrow {
                    width: 32rpx;
                    height: 32rpx;
                }

                .rightText {
                    font-family: PingFang-SC, PingFang-SC;
                    font-weight: 500;
                    font-size: 28rpx;
                    color: #999999;
                    line-height: 40rpx;
                    text-align: left;
                    font-style: normal;
                    text-transform: none;
                }

                .phoneBox {
                    font-size: 24rpx;
                    color: #a1a1a1;
                    text-align: right;
                }
            }
        }
    }
}
</style>