JWT 的认证流程

项目中本来使用过了vant 的组件，但是uniapp 和vant并不兼容，除了几个普通的组件能用之外，想使用弹窗的话vant就完成不了了，还好uniapp官方支持的 uview-plus 支持vue3，就给项目更换了。之前使用vant封装的组件这时候也不能使用了 ，只好更换组件，最麻烦的是组件功能类似，时间传递方式传递参数却变了，真是糟心那！经过两天的组件改写总算是完成了 uview-plus 的年月日时分秒的组件封装，还有默认时间的选择，全套代码哦！

<template>
    <!-- 弹出层 -->
    <u-popup :show="data.isPicker" mode="bottom" @close="confirmOn">
        <u-picker
            :show="data.isPicker"
            :columns="data.columns"
            keyName="text"
            @cancel="cancelOn"
            @confirm="onConfirm"
            :defaultIndex="data.defaultIndex"
        ></u-picker>
    </u-popup>
</template>
<script setup>
import { reactive, watch, getCurrentInstance } from 'vue';
import { split, findIndex } from 'lodash';
let { proxy } = getCurrentInstance();

const customFieldName = {
    text: 'value',
    value: 'values',
    children: ''
};
const data = reactive({
    isPicker: false, //是否显示弹出层
    columns: [], //所有时间
    Mdays: '', //弹窗关闭时月份所在值
    Dindex: null,
    selectedValues: [],
    defaultIndex: []
});

const props = defineProps({
    showPicker: {
        type: Boolean
    },
    values: {
        type: String
    }
});
const emit = defineEmits(['changeValue', 'confirm']); //定义要向父组件传递的事件

watch(
    () => data.isPicker,
    val => {
        !val && emit('changeValue');
        data.columns = [];
        getcolumns();
    }
);
watch(
    () => props.showPicker,
    val => {
        data.isPicker = val;
    }
);
watch(
    () => props.values,
    val => {
        if (val == '') {
            data.Mdays = '';
            data.Dindex = null;
        }
    }
);

function getcolumns() {
    data.selectedValues = [];
    let strtime = props.values;
    let date = new Date(strtime.replace(/-/g, '/'));
    let vmoduletime = date.getTime();

    let vmoduledate;
    if (props.values != '') {
        vmoduledate = new Date(vmoduletime);
    } else {
        vmoduledate = new Date(); //没有传入时间则默认当前时刻
    }

    let Y = vmoduledate.getFullYear();
    let M = vmoduledate.getMonth();
    let D = vmoduledate.getDate();
    let h = vmoduledate.getHours();
    let m = vmoduledate.getMinutes();
    let s = vmoduledate.getSeconds();
    let year = []; //获取前后十年数组
    // year.values = [];
    let Currentday = new Date().getFullYear();
    for (let i = Currentday - 10; i < Currentday + 10; i++) {
        year.push({ text: i.toString(), value: i });
    }

    data.selectedValues.push(Y);

    const _M = M < 10 ? `0${M + 1}` : M.toString();
    const _D = D < 10 ? `0${D + 1}` : D.toString();
    const _h = h < 10 ? `0${h + 1}` : h.toString();
    const _m = m < 10 ? `0${m + 1}` : m.toString();
    const _s = s < 10 ? `0${s}` : s.toString();

    data.selectedValues.push(_M);
    data.selectedValues.push(_D);
    data.selectedValues.push(_h);
    data.selectedValues.push(_m);
    data.selectedValues.push(_s);

    data.columns.push(year);

    let month = []; //获取12月数组
    // month.defaultIndex = M;
    month = Object.keys(Array.apply(null, { length: 13 })).map(function (item) {
        if (+item + 1 <= 10) {
            return { text: '0' + item, value: '0' + item };
        } else if (+item + 1 == 11) {
            return { text: +item, value: +item };
        } else {
            return {
                text: (+item + 0).toString(),
                value: (+item + 0).toString()
            };
        }
    });
    month.splice(0, 1);
    data.columns.push(month);
    //获取当月的天数
    let days = getCountDays(Y, data.Mdays == '' ? M + 1 : data.Mdays);
    let day = []; //创建当月天数数组
    // day.defaultIndex = data.Dindex == null ? D - 1 : data.Dindex;
    day = Object.keys(Array.apply(null, { length: days + 1 })).map(function (
        item
    ) {
        if (+item + 1 <= 10) {
            return { text: '0' + item, value: '0' + item };
        } else if (+item + 1 == 11) {
            return { text: +item, value: +item };
        } else {
            return {
                text: (+item + 0).toString(),
                value: (+item + 0).toString()
            };
        }
    });
    day.splice(0, 1);
    data.columns.push(day);
    let hour = []; //创建小时数组
    // hour.defaultIndex = h;
    hour = Object.keys(Array.apply(null, { length: 24 })).map(function (item) {
        if (+item + 1 <= 10) {
            return { text: '0' + item, value: '0' + item };
        } else if (+item + 1 == 11) {
            return { text: +item, value: +item };
        } else {
            return {
                text: (+item + 0).toString(),
                value: (+item + 0).toString()
            };
        }
    });
    data.columns.push(hour);
    let mi = []; //创建分钟数组
    // mi.defaultIndex = m;
    mi = Object.keys(Array.apply(null, { length: 60 })).map(function (item) {
        if (+item + 1 <= 10) {
            return { text: '0' + item, value: '0' + item };
        } else if (+item + 1 == 11) {
            return { text: +item, value: +item };
        } else {
            return {
                text: (+item + 0).toString(),
                value: (+item + 0).toString()
            };
        }
    });
    data.columns.push(mi);
    let ss = []; //创建秒数数组
    // ss.defaultIndex = s;
    ss = Object.keys(Array.apply(null, { length: 60 })).map(function (item) {
        if (+item + 1 <= 10) {
            return { text: '0' + item, value: '0' + item };
        } else if (+item + 1 == 11) {
            return { text: +item, value: +item };
        } else {
            return {
                text: (+item + 0).toString(),
                value: (+item + 0).toString()
            };
        }
    });
    data.columns.push(ss);

    onChangeDefaultIndex(data.columns, data.selectedValues);
}
function onChangeDefaultIndex(columns, selected) {
    // 设置默认值
    let defaultIndex = [];
    selected.forEach((o, index) => {
        const _index = findIndex(columns[index], a => a.value == o);

        defaultIndex.push(_index);
    });

    data.defaultIndex = defaultIndex;
}
function onChange(value) {
    console.log(value);
    // const dateTime = selectedOptions.map(o => o.text);
    // onConfirm(dateTime);
}
function getCountDays(year, month) {
    //获取某年某月多少天
    let day = new Date(year, month, 0);
    return day.getDate();
}

// 关闭弹框
function confirmOn() {
    emit('changeValue');
}
//时间选择器关闭
function cancelOn() {
    // console.log(value);
    // let endval =
    //     value[0] +
    //     '-' +
    //     value[1] +
    //     '-' +
    //     value[2] +
    //     ' ' +
    //     value[3] +
    //     ':' +
    //     value[4] +
    //     ':' +
    //     value[5];

    // emit('changeValue', endval);
    emit('confirm');
}
// 时间选择器确定
function onConfirm({ value }) {
    console.log(value);
    let endval =
        value[0].text +
        '-' +
        value[1].text +
        '-' +
        value[2].text +
        ' ' +
        value[3].text +
        ':' +
        value[4].text +
        ':' +
        value[5].text;

    emit('changeValue', endval);
    emit('confirm', endval);
}
</script>

使用方法：

    <date-time-picker
        :values="timeVal"
        @changeValue="showAcceptDate = false"
        :showPicker="showAcceptDate"
        @confirm="onConfirmDateTime"
    />

效果图：