@kengic/uni 0.3.2-beta.10

package/dist/uni-ui/uni-calendar/util.js

@@ -0,0 +1,360 @@
+import CALENDAR from './calendar.js'
+
+class Calendar {
+	constructor({
+		date,
+		selected,
+		startDate,
+		endDate,
+		range
+	} = {}) {
+		// 当前日期
+		this.date = this.getDate(new Date()) // 当前初入日期
+		// 打点信息
+		this.selected = selected || [];
+		// 范围开始
+		this.startDate = startDate
+		// 范围结束
+		this.endDate = endDate
+		this.range = range
+		// 多选状态
+		this.cleanMultipleStatus()
+		// 每周日期
+		this.weeks = {}
+		// this._getWeek(this.date.fullDate)
+	}
+	/**
+	 * 设置日期
+	 * @param {Object} date
+	 */
+	setDate(date) {
+		this.selectDate = this.getDate(date)
+		this._getWeek(this.selectDate.fullDate)
+	}
+
+	/**
+	 * 清理多选状态
+	 */
+	cleanMultipleStatus() {
+		this.multipleStatus = {
+			before: '',
+			after: '',
+			data: []
+		}
+	}
+
+	/**
+	 * 重置开始日期
+	 */
+	resetSatrtDate(startDate) {
+		// 范围开始
+		this.startDate = startDate
+
+	}
+
+	/**
+	 * 重置结束日期
+	 */
+	resetEndDate(endDate) {
+		// 范围结束
+		this.endDate = endDate
+	}
+
+	/**
+	 * 获取任意时间
+	 */
+	getDate(date, AddDayCount = 0, str = 'day') {
+		if (!date) {
+			date = new Date()
+		}
+		if (typeof date !== 'object') {
+			date = date.replace(/-/g, '/')
+		}
+		const dd = new Date(date)
+		switch (str) {
+			case 'day':
+				dd.setDate(dd.getDate() + AddDayCount) // 获取AddDayCount天后的日期
+				break
+			case 'month':
+				if (dd.getDate() === 31 && AddDayCount>0) {
+					dd.setDate(dd.getDate() + AddDayCount)
+				} else {
+					const preMonth = dd.getMonth()
+					dd.setMonth(preMonth + AddDayCount) // 获取AddDayCount天后的日期
+					const nextMonth = dd.getMonth()
+					// 处理 pre 切换月份目标月份为2月没有当前日(30 31) 切换错误问题
+					if(AddDayCount<0 && preMonth!==0 && nextMonth-preMonth>AddDayCount){
+						dd.setMonth(nextMonth+(nextMonth-preMonth+AddDayCount))
+					}
+					// 处理 next 切换月份目标月份为2月没有当前日(30 31) 切换错误问题
+					if(AddDayCount>0 && nextMonth-preMonth>AddDayCount){
+						dd.setMonth(nextMonth-(nextMonth-preMonth-AddDayCount))
+					}
+				}
+				break
+			case 'year':
+				dd.setFullYear(dd.getFullYear() + AddDayCount) // 获取AddDayCount天后的日期
+				break
+		}
+		const y = dd.getFullYear()
+		const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期，不足10补0
+		const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号，不足10补0
+		return {
+			fullDate: y + '-' + m + '-' + d,
+			year: y,
+			month: m,
+			date: d,
+			day: dd.getDay()
+		}
+	}
+
+
+	/**
+	 * 获取上月剩余天数
+	 */
+	_getLastMonthDays(firstDay, full) {
+		let dateArr = []
+		for (let i = firstDay; i > 0; i--) {
+			const beforeDate = new Date(full.year, full.month - 1, -i + 1).getDate()
+			dateArr.push({
+				date: beforeDate,
+				month: full.month - 1,
+				lunar: this.getlunar(full.year, full.month - 1, beforeDate),
+				disable: true
+			})
+		}
+		return dateArr
+	}
+	/**
+	 * 获取本月天数
+	 */
+	_currentMonthDys(dateData, full) {
+		let dateArr = []
+		let fullDate = this.date.fullDate
+		for (let i = 1; i <= dateData; i++) {
+			let nowDate = full.year + '-' + (full.month < 10 ?
+				full.month : full.month) + '-' + (i < 10 ?
+				'0' + i : i)
+			// 是否今天
+			let isDay = fullDate === nowDate
+			// 获取打点信息
+			let info = this.selected && this.selected.find((item) => {
+				if (this.dateEqual(nowDate, item.date)) {
+					return item
+				}
+			})
+
+			// 日期禁用
+			let disableBefore = true
+			let disableAfter = true
+			if (this.startDate) {
+				// let dateCompBefore = this.dateCompare(this.startDate, fullDate)
+				// disableBefore = this.dateCompare(dateCompBefore ? this.startDate : fullDate, nowDate)
+				disableBefore = this.dateCompare(this.startDate, nowDate)
+			}
+
+			if (this.endDate) {
+				// let dateCompAfter = this.dateCompare(fullDate, this.endDate)
+				// disableAfter = this.dateCompare(nowDate, dateCompAfter ? this.endDate : fullDate)
+				disableAfter = this.dateCompare(nowDate, this.endDate)
+			}
+			let multiples = this.multipleStatus.data
+			let checked = false
+			let multiplesStatus = -1
+			if (this.range) {
+				if (multiples) {
+					multiplesStatus = multiples.findIndex((item) => {
+						return this.dateEqual(item, nowDate)
+					})
+				}
+				if (multiplesStatus !== -1) {
+					checked = true
+				}
+			}
+			let data = {
+				fullDate: nowDate,
+				year: full.year,
+				date: i,
+				multiple: this.range ? checked : false,
+				beforeMultiple: this.dateEqual(this.multipleStatus.before, nowDate),
+				afterMultiple: this.dateEqual(this.multipleStatus.after, nowDate),
+				month: full.month,
+				lunar: this.getlunar(full.year, full.month, i),
+				disable: !(disableBefore && disableAfter),
+				isDay
+			}
+			if (info) {
+				data.extraInfo = info
+			}
+
+			dateArr.push(data)
+		}
+		return dateArr
+	}
+	/**
+	 * 获取下月天数
+	 */
+	_getNextMonthDays(surplus, full) {
+		let dateArr = []
+		for (let i = 1; i < surplus + 1; i++) {
+			dateArr.push({
+				date: i,
+				month: Number(full.month) + 1,
+				lunar: this.getlunar(full.year, Number(full.month) + 1, i),
+				disable: true
+			})
+		}
+		return dateArr
+	}
+
+	/**
+	 * 获取当前日期详情
+	 * @param {Object} date
+	 */
+	getInfo(date) {
+		if (!date) {
+			date = new Date()
+		}
+		const dateInfo = this.canlender.find(item => item.fullDate === this.getDate(date).fullDate)
+		return dateInfo
+	}
+
+	/**
+	 * 比较时间大小
+	 */
+	dateCompare(startDate, endDate) {
+		// 计算截止时间
+		startDate = new Date(startDate.replace('-', '/').replace('-', '/'))
+		// 计算详细项的截止时间
+		endDate = new Date(endDate.replace('-', '/').replace('-', '/'))
+		if (startDate <= endDate) {
+			return true
+		} else {
+			return false
+		}
+	}
+
+	/**
+	 * 比较时间是否相等
+	 */
+	dateEqual(before, after) {
+		// 计算截止时间
+		before = new Date(before.replace('-', '/').replace('-', '/'))
+		// 计算详细项的截止时间
+		after = new Date(after.replace('-', '/').replace('-', '/'))
+		if (before.getTime() - after.getTime() === 0) {
+			return true
+		} else {
+			return false
+		}
+	}
+
+
+	/**
+	 * 获取日期范围内所有日期
+	 * @param {Object} begin
+	 * @param {Object} end
+	 */
+	geDateAll(begin, end) {
+		var arr = []
+		var ab = begin.split('-')
+		var ae = end.split('-')
+		var db = new Date()
+		db.setFullYear(ab[0], ab[1] - 1, ab[2])
+		var de = new Date()
+		de.setFullYear(ae[0], ae[1] - 1, ae[2])
+		var unixDb = db.getTime() - 24 * 60 * 60 * 1000
+		var unixDe = de.getTime() - 24 * 60 * 60 * 1000
+		for (var k = unixDb; k <= unixDe;) {
+			k = k + 24 * 60 * 60 * 1000
+			arr.push(this.getDate(new Date(parseInt(k))).fullDate)
+		}
+		return arr
+	}
+	/**
+	 * 计算阴历日期显示
+	 */
+	getlunar(year, month, date) {
+		return CALENDAR.solar2lunar(year, month, date)
+	}
+	/**
+	 * 设置打点
+	 */
+	setSelectInfo(data, value) {
+		this.selected = value
+		this._getWeek(data)
+	}
+
+	/**
+	 *  获取多选状态
+	 */
+	setMultiple(fullDate) {
+		let {
+			before,
+			after
+		} = this.multipleStatus
+
+		if (!this.range) return
+		if (before && after) {
+			this.multipleStatus.before = ''
+			this.multipleStatus.after = ''
+			this.multipleStatus.data = []
+		} else {
+			if (!before) {
+				this.multipleStatus.before = fullDate
+			} else {
+				this.multipleStatus.after = fullDate
+				if (this.dateCompare(this.multipleStatus.before, this.multipleStatus.after)) {
+					this.multipleStatus.data = this.geDateAll(this.multipleStatus.before, this.multipleStatus.after);
+				} else {
+					this.multipleStatus.data = this.geDateAll(this.multipleStatus.after, this.multipleStatus.before);
+				}
+			}
+		}
+		this._getWeek(fullDate)
+	}
+
+	/**
+	 * 获取每周数据
+	 * @param {Object} dateData
+	 */
+	_getWeek(dateData) {
+		const {
+			year,
+			month
+		} = this.getDate(dateData)
+		let firstDay = new Date(year, month - 1, 1).getDay()
+		let currentDay = new Date(year, month, 0).getDate()
+		let dates = {
+			lastMonthDays: this._getLastMonthDays(firstDay, this.getDate(dateData)), // 上个月末尾几天
+			currentMonthDys: this._currentMonthDys(currentDay, this.getDate(dateData)), // 本月天数
+			nextMonthDays: [], // 下个月开始几天
+			weeks: []
+		}
+		let canlender = []
+		const surplus = 42 - (dates.lastMonthDays.length + dates.currentMonthDys.length)
+		dates.nextMonthDays = this._getNextMonthDays(surplus, this.getDate(dateData))
+		canlender = canlender.concat(dates.lastMonthDays, dates.currentMonthDys, dates.nextMonthDays)
+		let weeks = {}
+		// 拼接数组  上个月开始几天 + 本月天数+ 下个月开始几天
+		for (let i = 0; i < canlender.length; i++) {
+			if (i % 7 === 0) {
+				weeks[parseInt(i / 7)] = new Array(7)
+			}
+			weeks[parseInt(i / 7)][i % 7] = canlender[i]
+		}
+		this.canlender = canlender
+		this.weeks = weeks
+	}
+
+	//静态方法
+	// static init(date) {
+	// 	if (!this.instance) {
+	// 		this.instance = new Calendar(date);
+	// 	}
+	// 	return this.instance;
+	// }
+}
+
+
+export default Calendar

package/dist/uni-ui/uni-card/uni-card.vue

@@ -0,0 +1,281 @@
+<template>
+    <view
+        class="uni-card"
+        :class="{ 'uni-card--full': isFull, 'uni-card--shadow': isShadow, 'uni-card--border': border }"
+        :style="{ margin: isFull ? 0 : margin, padding: spacing, 'box-shadow': isShadow ? shadow : '' }"
+    >
+        <!-- 封面 -->
+        <slot name="cover">
+            <view v-if="cover" class="uni-card__cover">
+                <image class="uni-card__cover-image" mode="widthFix" @click="onClick('cover')" :src="cover"></image>
+            </view>
+        </slot>
+        <slot name="title">
+            <view v-if="title || extra" class="uni-card__header">
+                <!-- 卡片标题 -->
+                <view class="uni-card__header-box" @click="onClick('title')">
+                    <view v-if="thumbnail" class="uni-card__header-avatar">
+                        <image class="uni-card__header-avatar-image" :src="thumbnail" mode="aspectFit" />
+                    </view>
+                    <view class="uni-card__header-content">
+                        <text class="uni-card__header-content-title uni-ellipsis">{{ title }}</text>
+                        <text v-if="title && subTitle" class="uni-card__header-content-subtitle uni-ellipsis">{{ subTitle }} </text>
+                    </view>
+                </view>
+                <view class="uni-card__header-extra" @click="onClick('extra')">
+                    <slot name="extra">
+                        <text class="uni-card__header-extra-text">{{ extra }}</text>
+                    </slot>
+                </view>
+            </view>
+        </slot>
+        <!-- 卡片内容 -->
+        <view class="uni-card__content" :style="{ padding: padding }" @click="onClick('content')">
+            <slot></slot>
+        </view>
+        <view class="uni-card__actions" @click="onClick('actions')">
+            <slot name="actions"></slot>
+        </view>
+    </view>
+</template>
+
+<script>
+    import { defineComponent } from 'vue';
+
+    /**
+     * Card 卡片
+     * @description 卡片视图组件
+     * @tutorial https://ext.dcloud.net.cn/plugin?id=22
+     * @property {String} title 标题文字
+     * @property {String} subTitle 副标题
+     * @property {Number} padding 内容内边距
+     * @property {Number} margin 卡片外边距
+     * @property {Number} spacing 卡片内边距
+     * @property {String} extra 标题额外信息
+     * @property {String} cover 封面图（本地路径需要引入）
+     * @property {String} thumbnail 标题左侧缩略图
+     * @property {Boolean} is-full = [true | false] 卡片内容是否通栏，为 true 时将去除padding值
+     * @property {Boolean} is-shadow = [true | false] 卡片内容是否开启阴影
+     * @property {String} shadow 卡片阴影
+     * @property {Boolean} border 卡片边框
+     * @event {Function} click 点击 Card 触发事件
+     */
+    export default defineComponent({
+        name: 'UniCard',
+        emits: ['click'],
+        props: {
+            title: {
+                type: String,
+                default: '',
+            },
+            subTitle: {
+                type: String,
+                default: '',
+            },
+            padding: {
+                type: String,
+                default: '10px',
+            },
+            margin: {
+                type: String,
+                default: '15px',
+            },
+            spacing: {
+                type: String,
+                default: '0 10px',
+            },
+            extra: {
+                type: String,
+                default: '',
+            },
+            cover: {
+                type: String,
+                default: '',
+            },
+            thumbnail: {
+                type: String,
+                default: '',
+            },
+            isFull: {
+                // 内容区域是否通栏
+                type: Boolean,
+                default: false,
+            },
+            isShadow: {
+                // 是否开启阴影
+                type: Boolean,
+                default: true,
+            },
+            shadow: {
+                type: String,
+                default: '0px 0px 3px 1px rgba(0, 0, 0, 0.08)',
+            },
+            border: {
+                type: Boolean,
+                default: true,
+            },
+        },
+        methods: {
+            onClick(type) {
+                this.$emit('click', type);
+            },
+        },
+    });
+</script>
+
+<style lang="scss">
+    $uni-border-3: #ebeef5 !default;
+    $uni-shadow-base: 0 0px 6px 1px
+        rgba(
+            $color: #a5a5a5,
+            $alpha: 0.2,
+        ) !default;
+    $uni-main-color: #3a3a3a !default;
+    $uni-base-color: #6a6a6a !default;
+    $uni-secondary-color: #909399 !default;
+    $uni-spacing-sm: 8px !default;
+    $uni-border-color: $uni-border-3;
+    $uni-shadow: $uni-shadow-base;
+    $uni-card-title: 15px;
+    $uni-cart-title-color: $uni-main-color;
+    $uni-card-subtitle: 12px;
+    $uni-cart-subtitle-color: $uni-secondary-color;
+    $uni-card-spacing: 10px;
+    $uni-card-content-color: $uni-base-color;
+
+    .uni-card {
+        margin: $uni-card-spacing;
+        border-radius: 4px;
+        overflow: hidden;
+        font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
+        background-color: #fff;
+        flex: 1;
+
+        .uni-card__cover {
+            position: relative;
+            margin-top: $uni-card-spacing;
+            flex-direction: row;
+            overflow: hidden;
+            border-radius: 4px;
+
+            .uni-card__cover-image {
+                flex: 1;
+                // width: 100%;
+                /* #ifndef APP-PLUS */
+                vertical-align: middle;
+                /* #endif */
+            }
+        }
+
+        .uni-card__header {
+            display: flex;
+            border-bottom: 1px $uni-border-color solid;
+            flex-direction: row;
+            align-items: center;
+            padding: $uni-card-spacing;
+            overflow: hidden;
+
+            .uni-card__header-box {
+                /* #ifndef APP-NVUE */
+                display: flex;
+                /* #endif */
+                flex: 1;
+                flex-direction: row;
+                align-items: center;
+                overflow: hidden;
+            }
+
+            .uni-card__header-avatar {
+                width: 40px;
+                height: 40px;
+                overflow: hidden;
+                border-radius: 5px;
+                margin-right: $uni-card-spacing;
+
+                .uni-card__header-avatar-image {
+                    flex: 1;
+                    width: 40px;
+                    height: 40px;
+                }
+            }
+
+            .uni-card__header-content {
+                /* #ifndef APP-NVUE */
+                display: flex;
+                /* #endif */
+                flex-direction: column;
+                justify-content: center;
+                flex: 1;
+                // height: 40px;
+                overflow: hidden;
+
+                .uni-card__header-content-title {
+                    font-size: $uni-card-title;
+                    color: $uni-cart-title-color;
+                    // line-height: 22px;
+                }
+
+                .uni-card__header-content-subtitle {
+                    font-size: $uni-card-subtitle;
+                    margin-top: 5px;
+                    color: $uni-cart-subtitle-color;
+                }
+            }
+
+            .uni-card__header-extra {
+                line-height: 12px;
+
+                .uni-card__header-extra-text {
+                    font-size: 12px;
+                    color: $uni-cart-subtitle-color;
+                }
+            }
+        }
+
+        .uni-card__content {
+            padding: $uni-card-spacing;
+            font-size: 14px;
+            color: $uni-card-content-color;
+            line-height: 22px;
+        }
+
+        .uni-card__actions {
+            font-size: 12px;
+        }
+    }
+
+    .uni-card--border {
+        border: 1px solid $uni-border-color;
+    }
+
+    .uni-card--shadow {
+        position: relative;
+        /* #ifndef APP-NVUE */
+        box-shadow: $uni-shadow;
+        /* #endif */
+    }
+
+    .uni-card--full {
+        margin: 0;
+        border-left-width: 0;
+        border-left-width: 0;
+        border-radius: 0;
+    }
+
+    /* #ifndef APP-NVUE */
+    .uni-card--full:after {
+        border-radius: 0;
+    }
+
+    /* #endif */
+    .uni-ellipsis {
+        /* #ifndef APP-NVUE */
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        /* #endif */
+        /* #ifdef APP-NVUE */
+        lines: 1;
+        /* #endif */
+    }
+</style>