uview-pro 0.0.1

package/components/u-column-notice/u-column-notice.vue

@@ -0,0 +1,264 @@
+<template>
+    <view class="u-notice-bar" :style="{ background: computeBgColor, padding: props.padding }" :class="[props.type ? `u-type-${props.type}-light-bg` : '']">
+        <view class="u-icon-wrap">
+            <u-icon class="u-left-icon" v-if="props.volumeIcon" name="volume-fill" :size="props.volumeSize" :color="computeColor"></u-icon>
+        </view>
+        <swiper
+            :disable-touch="props.disableTouch"
+            @change="change"
+            :autoplay="props.autoplay && props.playState === 'play'"
+            :vertical="vertical"
+            circular
+            :interval="props.duration"
+            class="u-swiper"
+        >
+            <swiper-item v-for="(item, index) in props.list" :key="index" class="u-swiper-item">
+                <view class="u-news-item u-line-1" :style="textStyle" @tap="click(index)" :class="['u-type-' + props.type]">
+                    {{ item }}
+                </view>
+            </swiper-item>
+        </swiper>
+        <view class="u-icon-wrap">
+            <u-icon @click="getMore" class="u-right-icon" v-if="props.moreIcon" name="arrow-right" :size="26" :color="computeColor"></u-icon>
+            <u-icon @click="close" class="u-right-icon" v-if="props.closeIcon" name="close" :size="24" :color="computeColor"></u-icon>
+        </view>
+    </view>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+defineOptions({ name: 'u-column-notice' });
+
+/**
+ * u-column-notice 通告栏
+ * @property {Array} list 显示的内容，数组
+ * @property {String} type 显示的主题，success|error|primary|info|warning
+ * @property {Boolean} volumeIcon 是否显示左侧的音量图标
+ * @property {Boolean} moreIcon 是否显示右侧的右箭头图标
+ * @property {Boolean} closeIcon 是否显示右侧的关闭图标
+ * @property {Boolean} autoplay 是否自动播放
+ * @property {String} color 文字颜色，各图标也会使用文字颜色
+ * @property {String} bgColor 背景颜色
+ * @property {String} direction 滚动方向，row-水平滚动，column-垂直滚动
+ * @property {Boolean} show 是否显示
+ * @property {String|Number} fontSize 字体大小，单位rpx
+ * @property {String|Number} duration 滚动一个周期的时间长，单位ms
+ * @property {String|Number} volumeSize 音量喇叭的大小
+ * @property {Number} speed 水平滚动时的滚动速度，即每秒滚动多少rpx
+ * @property {Boolean} isCircular 水平滚动时，是否采用衔接形式滚动
+ * @property {String} mode 滚动方向，horizontal-水平滚动，vertical-垂直滚动
+ * @property {String} playState 播放状态，play-播放，paused-暂停
+ * @property {Boolean} disableTouch 是否禁止用手滑动切换
+ * @property {String|Number} padding 通知的边距
+ */
+
+const props = defineProps({
+    /** 显示的内容，数组 */
+    list: {
+        type: Array as () => string[],
+        default: () => []
+    },
+    /** 显示的主题，success|error|primary|info|warning */
+    type: {
+        type: String,
+        default: 'warning'
+    },
+    /** 是否显示左侧的音量图标 */
+    volumeIcon: {
+        type: Boolean,
+        default: true
+    },
+    /** 是否显示右侧的右箭头图标 */
+    moreIcon: {
+        type: Boolean,
+        default: false
+    },
+    /** 是否显示右侧的关闭图标 */
+    closeIcon: {
+        type: Boolean,
+        default: false
+    },
+    /** 是否自动播放 */
+    autoplay: {
+        type: Boolean,
+        default: true
+    },
+    /** 文字颜色，各图标也会使用文字颜色 */
+    color: {
+        type: String,
+        default: ''
+    },
+    /** 背景颜色 */
+    bgColor: {
+        type: String,
+        default: ''
+    },
+    /** 滚动方向，row-水平滚动，column-垂直滚动 */
+    direction: {
+        type: String,
+        default: 'row'
+    },
+    /** 是否显示 */
+    show: {
+        type: Boolean,
+        default: true
+    },
+    /** 字体大小，单位rpx */
+    fontSize: {
+        type: [Number, String],
+        default: 26
+    },
+    /** 滚动一个周期的时间长，单位ms */
+    duration: {
+        type: [Number, String],
+        default: 2000
+    },
+    /** 音量喇叭的大小 */
+    volumeSize: {
+        type: [Number, String],
+        default: 34
+    },
+    /** 水平滚动时的滚动速度，即每秒滚动多少rpx，这有利于控制文字无论多少时，都能有一个恒定的速度 */
+    speed: {
+        type: Number,
+        default: 160
+    },
+    /** 水平滚动时，是否采用衔接形式滚动 */
+    isCircular: {
+        type: Boolean,
+        default: true
+    },
+    /** 滚动方向，horizontal-水平滚动，vertical-垂直滚动 */
+    mode: {
+        type: String,
+        default: 'horizontal'
+    },
+    /** 播放状态，play-播放，paused-暂停 */
+    playState: {
+        type: String,
+        default: 'play'
+    },
+    /** 是否禁止用手滑动切换 */
+    disableTouch: {
+        type: Boolean,
+        default: true
+    },
+    /** 通知的边距 */
+    padding: {
+        type: [Number, String],
+        default: '18rpx 24rpx'
+    }
+});
+
+const emit = defineEmits<{ (e: 'click', index: number): void; (e: 'close'): void; (e: 'getMore'): void; (e: 'end'): void }>();
+
+/**
+ * 计算字体颜色，如果没有自定义的，就用uview主题颜色
+ */
+const computeColor = computed(() => {
+    if (props.color) return props.color;
+    // 如果是无主题，就默认使用content-color
+    else if (props.type === 'none') return '#606266';
+    else return props.type;
+});
+
+/**
+ * 文字内容的样式
+ */
+const textStyle = computed(() => {
+    const style: Record<string, any> = {};
+    if (props.color) style.color = props.color;
+    else if (props.type === 'none') style.color = '#606266';
+    style.fontSize = props.fontSize + 'rpx';
+    return style;
+});
+
+/**
+ * 垂直或者水平滚动
+ */
+const vertical = computed(() => {
+    return props.mode !== 'horizontal';
+});
+
+/**
+ * 计算背景颜色
+ */
+const computeBgColor = computed(() => {
+    if (props.bgColor) return props.bgColor;
+    else if (props.type === 'none') return 'transparent';
+});
+
+/**
+ * 点击通告栏
+ */
+function click(index: number) {
+    emit('click', index);
+}
+
+/**
+ * 点击关闭按钮
+ */
+function close() {
+    emit('close');
+}
+
+/**
+ * 点击更多箭头按钮
+ */
+function getMore() {
+    emit('getMore');
+}
+
+/**
+ * swiper 切换事件
+ */
+function change(e: { detail: { current: number } }) {
+    const index = e.detail.current;
+    if (index === props.list.length - 1) {
+        emit('end');
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../libs/css/style.components.scss';
+.u-notice-bar {
+    width: 100%;
+    @include vue-flex;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: nowrap;
+    padding: 18rpx 24rpx;
+    overflow: hidden;
+}
+.u-swiper {
+    font-size: 26rpx;
+    height: 32rpx;
+    @include vue-flex;
+    align-items: center;
+    flex: 1;
+    margin-left: 12rpx;
+}
+.u-swiper-item {
+    @include vue-flex;
+    align-items: center;
+    overflow: hidden;
+}
+.u-news-item {
+    overflow: hidden;
+}
+.u-right-icon {
+    margin-left: 12rpx;
+    /* #ifndef APP-NVUE */
+    display: inline-flex;
+    /* #endif */
+    align-items: center;
+}
+.u-left-icon {
+    /* #ifndef APP-NVUE */
+    display: inline-flex;
+    /* #endif */
+    align-items: center;
+}
+</style>

package/components/u-count-down/u-count-down.vue

@@ -0,0 +1,333 @@
+<template>
+    <view class="u-countdown">
+        <view class="u-countdown-item" :style="[itemStyle]" v-if="props.showDays && (props.hideZeroDay || (!props.hideZeroDay && d != '00'))">
+            <view class="u-countdown-time" :style="[letterStyle]">
+                {{ d }}
+            </view>
+        </view>
+        <view
+            class="u-countdown-colon"
+            :style="{ fontSize: props.separatorSize + 'rpx', color: props.separatorColor, paddingBottom: props.separator == 'colon' ? '4rpx' : 0 }"
+            v-if="props.showDays && (props.hideZeroDay || (!props.hideZeroDay && d != '00'))"
+        >
+            {{ props.separator == 'colon' ? ':' : '天' }}
+        </view>
+        <view class="u-countdown-item" :style="[itemStyle]" v-if="props.showHours">
+            <view class="u-countdown-time" :style="{ fontSize: props.fontSize + 'rpx', color: props.color }">
+                {{ h }}
+            </view>
+        </view>
+        <view
+            class="u-countdown-colon"
+            :style="{ fontSize: props.separatorSize + 'rpx', color: props.separatorColor, paddingBottom: props.separator == 'colon' ? '4rpx' : 0 }"
+            v-if="props.showHours"
+        >
+            {{ props.separator == 'colon' ? ':' : '时' }}
+        </view>
+        <view class="u-countdown-item" :style="[itemStyle]" v-if="props.showMinutes">
+            <view class="u-countdown-time" :style="{ fontSize: props.fontSize + 'rpx', color: props.color }">
+                {{ i }}
+            </view>
+        </view>
+        <view
+            class="u-countdown-colon"
+            :style="{ fontSize: props.separatorSize + 'rpx', color: props.separatorColor, paddingBottom: props.separator == 'colon' ? '4rpx' : 0 }"
+            v-if="props.showMinutes"
+        >
+            {{ props.separator == 'colon' ? ':' : '分' }}
+        </view>
+        <view class="u-countdown-item" :style="[itemStyle]" v-if="props.showSeconds">
+            <view class="u-countdown-time" :style="{ fontSize: props.fontSize + 'rpx', color: props.color }">
+                {{ s }}
+            </view>
+        </view>
+        <view
+            class="u-countdown-colon"
+            :style="{ fontSize: props.separatorSize + 'rpx', color: props.separatorColor, paddingBottom: 0 }"
+            v-if="props.showSeconds && props.separator == 'zh'"
+        >
+            秒
+        </view>
+    </view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, onMounted } from 'vue';
+
+defineOptions({ name: 'u-count-down' });
+
+/**
+ * countDown 倒计时
+ * @description 该组件一般使用于某个活动的截止时间上，通过数字的变化，给用户明确的时间感受，提示用户进行某一个行为操作。
+ * @tutorial https://www.uviewui.com/components/countDown.html
+ * @property {String | Number} timestamp 倒计时，单位为秒
+ * @property {Boolean} autoplay 是否自动开始倒计时，如果为false，需手动调用开始方法。见官网说明（默认true）
+ * @property {String} separator 分隔符，colon为英文冒号，zh为中文（默认colon）
+ * @property {String | Number} separator-size 分隔符的字体大小，单位rpx（默认30）
+ * @property {String} separator-color 分隔符的颜色（默认#303133）
+ * @property {String | Number} font-size 倒计时字体大小，单位rpx（默认30）
+ * @property {Boolean} show-border 是否显示倒计时数字的边框（默认false）
+ * @property {Boolean} hide-zero-day 当"天"的部分为0时，隐藏该字段 （默认true）
+ * @property {String} border-color 数字边框的颜色（默认#303133）
+ * @property {String} bg-color 倒计时数字的背景颜色（默认#ffffff）
+ * @property {String} color 倒计时数字的颜色（默认#303133）
+ * @property {String | Number} height 数字高度值(宽度等同此值)，设置边框时看情况是否需要设置此值，单位rpx（默认auto）
+ * @property {Boolean} show-days 是否显示倒计时的"天"部分（默认true）
+ * @property {Boolean} show-hours 是否显示倒计时的"时"部分（默认true）
+ * @property {Boolean} show-minutes 是否显示倒计时的"分"部分（默认true）
+ * @property {Boolean} show-seconds 是否显示倒计时的"秒"部分（默认true）
+ * @event {Function} end 倒计时结束
+ * @event {Function} change 每秒触发一次，回调为当前剩余的倒计秒数
+ * @example <u-count-down ref="uCountDown" :timestamp="86400" :autoplay="false"></u-count-down>
+ */
+
+const emit = defineEmits(['end', 'change']);
+
+const props = defineProps({
+    /** 倒计时的时间，秒为单位 */
+    timestamp: {
+        type: [Number, String],
+        default: 0
+    },
+    /** 是否自动开始倒计时 */
+    autoplay: {
+        type: Boolean,
+        default: true
+    },
+    /** 分隔符 */
+    separator: {
+        type: String,
+        default: 'colon'
+    },
+    /** 分隔符的大小，单位rpx */
+    separatorSize: {
+        type: [Number, String],
+        default: 30
+    },
+    /** 分隔符颜色 */
+    separatorColor: {
+        type: String,
+        default: '#303133'
+    },
+    /** 字体颜色 */
+    color: {
+        type: String,
+        default: '#303133'
+    },
+    /** 字体大小，单位rpx */
+    fontSize: {
+        type: [Number, String],
+        default: 30
+    },
+    /** 背景颜色 */
+    bgColor: {
+        type: String,
+        default: '#fff'
+    },
+    /** 数字框高度，单位rpx */
+    height: {
+        type: [Number, String],
+        default: 'auto'
+    },
+    /** 是否显示数字框 */
+    showBorder: {
+        type: Boolean,
+        default: false
+    },
+    /** 边框颜色 */
+    borderColor: {
+        type: String,
+        default: '#303133'
+    },
+    /** 是否显示秒 */
+    showSeconds: {
+        type: Boolean,
+        default: true
+    },
+    /** 是否显示分钟 */
+    showMinutes: {
+        type: Boolean,
+        default: true
+    },
+    /** 是否显示小时 */
+    showHours: {
+        type: Boolean,
+        default: true
+    },
+    /** 是否显示“天” */
+    showDays: {
+        type: Boolean,
+        default: true
+    },
+    /** 当"天"的部分为0时，不显示 */
+    hideZeroDay: {
+        type: Boolean,
+        default: false
+    }
+});
+
+const d = ref('00'); // 天
+const h = ref('00'); // 小时
+const i = ref('00'); // 分钟
+const s = ref('00'); // 秒
+const timer = ref<number | null>(null); // 定时器类型修正
+const seconds = ref(0);
+
+/**
+ * 倒计时item的样式，item为分别的时分秒部分的数字
+ */
+const itemStyle = computed(() => {
+    const style: Record<string, string> = {};
+    if (props.height) {
+        style.height = props.height + 'rpx';
+        style.width = props.height + 'rpx';
+    }
+    if (props.showBorder) {
+        style.borderStyle = 'solid';
+        style.borderColor = props.borderColor;
+        style.borderWidth = '1px';
+    }
+    if (props.bgColor) {
+        style.backgroundColor = props.bgColor;
+    }
+    return style;
+});
+
+/**
+ * 倒计时数字的样式
+ */
+const letterStyle = computed(() => {
+    const style: Record<string, string> = {};
+    if (props.fontSize) style.fontSize = props.fontSize + 'rpx';
+    if (props.color) style.color = props.color;
+    return style;
+});
+
+// 监听时间戳的变化
+watch(
+    () => props.timestamp,
+    (newVal, oldVal) => {
+        // 如果倒计时间发生变化，清除定时器，重新开始倒计时
+        clearTimer();
+        start();
+    }
+);
+
+onMounted(() => {
+    // 如果自动倒计时
+    if (props.autoplay && props.timestamp) {
+        start();
+    }
+});
+
+/**
+ * 倒计时
+ */
+function start() {
+    // 避免可能出现的倒计时重叠情况
+    clearTimer();
+    if (Number(props.timestamp) <= 0) return;
+    seconds.value = Number(props.timestamp);
+    formatTime(seconds.value);
+    timer.value = setInterval(() => {
+        seconds.value--;
+        // 发出change事件
+        emit('change', seconds.value);
+        if (seconds.value < 0) {
+            end();
+            return;
+        }
+        formatTime(seconds.value);
+    }, 1000);
+}
+
+/**
+ * 格式化时间
+ */
+function formatTime(sec: number) {
+    // 小于等于0的话，结束倒计时
+    if (sec <= 0) end();
+    let dayNum = Math.floor(sec / (60 * 60 * 24));
+    let hourNum = Math.floor(sec / (60 * 60)) - dayNum * 24;
+    // showHour为需要显示的小时
+    let showHour: string;
+    // 判断是否显示“天”参数，如果不显示，将天部分的值，加入到小时中
+    // hour为给后面计算秒和分等用的(基于显示天的前提下计算)
+    if (props.showDays) {
+        showHour = hourNum < 10 ? '0' + hourNum : String(hourNum);
+    } else {
+        // 如果不显示天数，将“天”部分的时间折算到小时中去
+        // 如果小于10，在前面补上一个"0"
+        const hourTotal = Math.floor(sec / (60 * 60));
+        showHour = hourTotal < 10 ? '0' + hourTotal : String(hourTotal);
+    }
+    let minuteNum = Math.floor(sec / 60) - hourNum * 60 - dayNum * 24 * 60;
+    let secondNum = Math.floor(sec) - dayNum * 24 * 60 * 60 - hourNum * 60 * 60 - minuteNum * 60;
+    const minute = minuteNum < 10 ? '0' + minuteNum : String(minuteNum);
+    const second = secondNum < 10 ? '0' + secondNum : String(secondNum);
+    const day = dayNum < 10 ? '0' + dayNum : String(dayNum);
+    d.value = day;
+    h.value = showHour;
+    i.value = minute;
+    s.value = second;
+}
+
+/**
+ * 停止倒计时
+ */
+function end() {
+    clearTimer();
+    emit('end', {});
+}
+
+/**
+ * 清除定时器
+ */
+function clearTimer() {
+    if (timer.value) {
+        clearInterval(timer.value);
+        timer.value = null;
+    }
+}
+</script>
+
+<style scoped lang="scss">
+@import '../../libs/css/style.components.scss';
+
+.u-countdown {
+    /* #ifndef APP-NVUE */
+    display: inline-flex;
+    /* #endif */
+    align-items: center;
+}
+
+.u-countdown-item {
+    @include vue-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2rpx;
+    border-radius: 6rpx;
+    white-space: nowrap;
+    transform: translateZ(0);
+}
+
+.u-countdown-time {
+    margin: 0;
+    padding: 0;
+    line-height: 1;
+}
+
+.u-countdown-colon {
+    @include vue-flex;
+    justify-content: center;
+    padding: 0 5rpx;
+    line-height: 1;
+    align-items: center;
+    padding-bottom: 4rpx;
+}
+
+.u-countdown-scale {
+    transform: scale(0.9);
+    transform-origin: center center;
+}
+</style>