maooo-skyline-ui-system 0.1.1

package/miniprogram_dist/calendar/calendar.js

@@ -0,0 +1,549 @@
+const DAY_MS = 24 * 60 * 60 * 1000;
+const DEFAULT_MONTH_SPAN = 6;
+
+const WEEKDAYS = {
+  monday: ["一", "二", "三", "四", "五", "六", "日"],
+  sunday: ["日", "一", "二", "三", "四", "五", "六"]
+};
+
+function pad2(value) {
+  return value < 10 ? `0${value}` : `${value}`;
+}
+
+function startOfLocalDay(date) {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+}
+
+function formatDate(date) {
+  return `${date.getFullYear()}-${pad2(date.getMonth() + 1)}-${pad2(date.getDate())}`;
+}
+
+function parseLocalDate(value) {
+  if (typeof value === "number" && Number.isFinite(value)) {
+    const date = new Date(value);
+    if (Number.isNaN(date.getTime())) return null;
+    return startOfLocalDay(date);
+  }
+
+  if (typeof value !== "string") return null;
+  if (!value) return null;
+
+  const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value);
+  if (!match) return null;
+
+  const year = Number(match[1]);
+  const month = Number(match[2]);
+  const day = Number(match[3]);
+  const date = new Date(year, month - 1, day);
+
+  if (
+    date.getFullYear() !== year ||
+    date.getMonth() !== month - 1 ||
+    date.getDate() !== day
+  ) {
+    return null;
+  }
+
+  return date;
+}
+
+function addMonths(date, count) {
+  return new Date(date.getFullYear(), date.getMonth() + count, date.getDate());
+}
+
+function getMonthStart(date) {
+  return new Date(date.getFullYear(), date.getMonth(), 1);
+}
+
+function getMonthEnd(date) {
+  return new Date(date.getFullYear(), date.getMonth() + 1, 0);
+}
+
+function compareMonth(a, b) {
+  const left = a.getFullYear() * 12 + a.getMonth();
+  const right = b.getFullYear() * 12 + b.getMonth();
+  return left === right ? 0 : left > right ? 1 : -1;
+}
+
+function normalizeMode(mode) {
+  return mode === "multiple" ? "multiple" : "single";
+}
+
+function normalizeTagMode(mode) {
+  return mode === "single" ? "single" : "multiple";
+}
+
+function normalizeWeekStart(weekStart) {
+  return weekStart === "sunday" ? "sunday" : "monday";
+}
+
+function normalizeCount(value) {
+  const count = Number(value);
+  if (!Number.isFinite(count) || count <= 0) return 0;
+  return Math.floor(count);
+}
+
+function normalizeValueArray(value) {
+  const source = Array.isArray(value) ? value : [];
+  const result = [];
+  const cache = {};
+
+  source.forEach((item) => {
+    const date = parseLocalDate(item);
+    if (!date) return;
+
+    const key = formatDate(date);
+    if (cache[key]) return;
+
+    cache[key] = true;
+    result.push(key);
+  });
+
+  return result;
+}
+
+function normalizeTagValue(value) {
+  const source = Array.isArray(value) ? value : [];
+  const result = [];
+  const cache = {};
+
+  source.forEach((item) => {
+    if (item === null || item === undefined) return;
+
+    const key = String(item);
+    if (cache[key]) return;
+
+    cache[key] = true;
+    result.push(key);
+  });
+
+  return result;
+}
+
+function toSet(values) {
+  const set = {};
+  values.forEach((value) => {
+    set[value] = true;
+  });
+  return set;
+}
+
+function formatPrice(price) {
+  const value = Number(price);
+  if (!Number.isFinite(value)) return "";
+
+  const yuan = value / 100;
+  if (value % 100 === 0) return `¥${yuan}`;
+
+  return `¥${yuan.toFixed(2).replace(/0+$/, "").replace(/\.$/, "")}`;
+}
+
+function hasValue(value) {
+  return value !== null && value !== undefined && value !== "";
+}
+
+function getDateSubText(item) {
+  if (!item) return "";
+  if (hasValue(item.priceText)) return String(item.priceText);
+  if (hasValue(item.price)) return formatPrice(item.price);
+  if (hasValue(item.text)) return String(item.text);
+  return "";
+}
+
+function getDateClassName(day) {
+  const classList = ["mo-calendar__day"];
+
+  if (day.empty) classList.push("is-empty");
+  if (day.disabled) classList.push("is-disabled");
+  if (day.selected) classList.push("is-selected");
+  if (day.today) classList.push("is-today");
+
+  return classList.join(" ");
+}
+
+function getDateContentClassName(day) {
+  const classList = ["mo-calendar__day-content"];
+
+  if (day.disabled) classList.push("is-disabled");
+  if (day.selected) classList.push("is-selected");
+  if (day.today) classList.push("is-today");
+
+  return classList.join(" ");
+}
+
+function getTagClassName(option) {
+  const classList = ["mo-calendar__tag"];
+
+  if (option.selected) classList.push("is-selected");
+  if (option.disabled) classList.push("is-disabled");
+
+  return classList.join(" ");
+}
+
+function getRangeDefaults(minDate, maxDate) {
+  const today = startOfLocalDay(new Date());
+  const parsedMin = parseLocalDate(minDate);
+  const parsedMax = parseLocalDate(maxDate);
+
+  const min = parsedMin || today;
+  let max = parsedMax || addMonths(today, DEFAULT_MONTH_SPAN);
+
+  if (max.getTime() < min.getTime()) {
+    max = min;
+  }
+
+  return {
+    min,
+    max,
+    invalidMin: hasValue(minDate) && !parsedMin,
+    invalidMax: hasValue(maxDate) && !parsedMax,
+    invalidRange: parsedMin && parsedMax && parsedMax.getTime() < parsedMin.getTime()
+  };
+}
+
+Component({
+  properties: {
+    show: {
+      type: Boolean,
+      value: false
+    },
+    title: {
+      type: String,
+      value: "选择服务日期"
+    },
+    value: {
+      type: Array,
+      value: [],
+      observer: "updateCalendarData"
+    },
+    mode: {
+      type: String,
+      value: "single",
+      observer: "updateCalendarData"
+    },
+    maxDateCount: {
+      type: Number,
+      value: 0
+    },
+    minDate: {
+      type: null,
+      value: "",
+      observer: "updateCalendarData"
+    },
+    maxDate: {
+      type: null,
+      value: "",
+      observer: "updateCalendarData"
+    },
+    weekStart: {
+      type: String,
+      value: "monday",
+      observer: "updateCalendarData"
+    },
+    dateItems: {
+      type: Array,
+      value: [],
+      observer: "updateCalendarData"
+    },
+    tagTitle: {
+      type: String,
+      value: "请选择服务时间（最多2次）"
+    },
+    tagOptions: {
+      type: Array,
+      value: [],
+      observer: "updateCalendarData"
+    },
+    tagValue: {
+      type: Array,
+      value: [],
+      observer: "updateCalendarData"
+    },
+    tagMode: {
+      type: String,
+      value: "multiple",
+      observer: "updateCalendarData"
+    },
+    tagMaxCount: {
+      type: Number,
+      value: 2
+    },
+    confirmText: {
+      type: String,
+      value: "确认"
+    },
+    closeOnMask: {
+      type: Boolean,
+      value: true
+    },
+    zIndex: {
+      type: Number,
+      value: 999
+    },
+    customClass: {
+      type: String,
+      value: ""
+    }
+  },
+  data: {
+    weekdays: WEEKDAYS.monday,
+    months: [],
+    normalizedValue: [],
+    normalizedTagValue: [],
+    normalizedTagOptions: [],
+    hasTags: false
+  },
+  lifetimes: {
+    attached() {
+      this.updateCalendarData();
+    }
+  },
+  methods: {
+    updateCalendarData() {
+      const range = getRangeDefaults(this.data.minDate, this.data.maxDate);
+      const weekStart = normalizeWeekStart(this.data.weekStart);
+      const value = normalizeValueArray(this.data.value);
+      const tagValue = normalizeTagValue(this.data.tagValue);
+      const dateItemMap = this.getDateItemMap();
+      const months = this.createMonths(range.min, range.max, weekStart, dateItemMap, value);
+      const normalizedTagOptions = this.createTagOptions(tagValue);
+
+      if (range.invalidMin) {
+        this.emitError("date", "minDate 必须是 YYYY-MM-DD 或毫秒时间戳");
+      }
+
+      if (range.invalidMax) {
+        this.emitError("date", "maxDate 必须是 YYYY-MM-DD 或毫秒时间戳");
+      }
+
+      if (range.invalidRange) {
+        this.emitError("date", "maxDate 不能早于 minDate");
+      }
+
+      this.setData({
+        weekdays: WEEKDAYS[weekStart],
+        months,
+        normalizedValue: value,
+        normalizedTagValue: tagValue,
+        normalizedTagOptions,
+        hasTags: normalizedTagOptions.length > 0
+      });
+    },
+    getDateItemMap() {
+      const source = Array.isArray(this.data.dateItems) ? this.data.dateItems : [];
+      const map = {};
+
+      source.forEach((item) => {
+        if (!item || !hasValue(item.date)) return;
+
+        const date = parseLocalDate(item.date);
+        if (!date) {
+          this.emitError("dateItems", "dateItems 中的 date 必须是 YYYY-MM-DD 或毫秒时间戳");
+          return;
+        }
+
+        map[formatDate(date)] = item;
+      });
+
+      return map;
+    },
+    createMonths(minDate, maxDate, weekStart, dateItemMap, value) {
+      const months = [];
+      const selectedSet = toSet(value);
+      const todayKey = formatDate(new Date());
+      const minTime = minDate.getTime();
+      const maxTime = maxDate.getTime();
+      let cursor = getMonthStart(minDate);
+      const endMonth = getMonthStart(maxDate);
+
+      while (compareMonth(cursor, endMonth) <= 0) {
+        months.push(this.createMonth(cursor, minTime, maxTime, weekStart, dateItemMap, selectedSet, todayKey));
+        cursor = new Date(cursor.getFullYear(), cursor.getMonth() + 1, 1);
+      }
+
+      return months;
+    },
+    createMonth(monthDate, minTime, maxTime, weekStart, dateItemMap, selectedSet, todayKey) {
+      const days = [];
+      const firstDay = getMonthStart(monthDate);
+      const lastDay = getMonthEnd(monthDate);
+      const offset = weekStart === "monday" ? (firstDay.getDay() + 6) % 7 : firstDay.getDay();
+      const monthKey = `${monthDate.getFullYear()}-${pad2(monthDate.getMonth() + 1)}`;
+
+      for (let index = 0; index < offset; index += 1) {
+        days.push({
+          key: `${monthKey}-empty-before-${index}`,
+          empty: true,
+          className: "mo-calendar__day is-empty"
+        });
+      }
+
+      for (let day = 1; day <= lastDay.getDate(); day += 1) {
+        const date = new Date(monthDate.getFullYear(), monthDate.getMonth(), day);
+        const dateKey = formatDate(date);
+        const sourceItem = dateItemMap[dateKey] || {};
+        const disabled = date.getTime() < minTime || date.getTime() > maxTime || !!sourceItem.disabled;
+        const tagText = hasValue(sourceItem.tagText) ? String(sourceItem.tagText) : "";
+        const dayItem = {
+          ...sourceItem,
+          key: dateKey,
+          date: dateKey,
+          day,
+          empty: false,
+          disabled,
+          selected: !!selectedSet[dateKey],
+          today: dateKey === todayKey,
+          tagText,
+          subText: getDateSubText(sourceItem)
+        };
+
+        dayItem.className = getDateClassName(dayItem);
+        dayItem.contentClassName = getDateContentClassName(dayItem);
+        days.push(dayItem);
+      }
+
+      while (days.length % 7 !== 0) {
+        days.push({
+          key: `${monthKey}-empty-after-${days.length}`,
+          empty: true,
+          className: "mo-calendar__day is-empty"
+        });
+      }
+
+      return {
+        key: monthKey,
+        title: `${monthDate.getFullYear()}年${monthDate.getMonth() + 1}月`,
+        days
+      };
+    },
+    createTagOptions(tagValue) {
+      const source = Array.isArray(this.data.tagOptions) ? this.data.tagOptions : [];
+      const selectedSet = toSet(tagValue);
+
+      return source
+        .filter((option) => option && (hasValue(option.value) || hasValue(option.label)))
+        .map((option) => {
+          const value = hasValue(option.value) ? String(option.value) : String(option.label);
+          const normalized = {
+            ...option,
+            value,
+            label: hasValue(option.label) ? String(option.label) : value,
+            disabled: !!option.disabled,
+            selected: !!selectedSet[value]
+          };
+
+          normalized.className = getTagClassName(normalized);
+          return normalized;
+        });
+    },
+    getDayFromEvent(event) {
+      const monthIndex = Number(event.currentTarget.dataset.monthIndex);
+      const dayIndex = Number(event.currentTarget.dataset.dayIndex);
+      const month = this.data.months[monthIndex];
+
+      if (!month || !month.days) return null;
+      return month.days[dayIndex] || null;
+    },
+    handleDayTap(event) {
+      const day = this.getDayFromEvent(event);
+      if (!day || day.empty) return;
+
+      this.triggerEvent("click", {
+        date: day.date,
+        item: day,
+        disabled: !!day.disabled
+      });
+
+      if (day.disabled) return;
+
+      const mode = normalizeMode(this.data.mode);
+      const current = normalizeValueArray(this.data.value);
+      let nextValue = [];
+
+      if (mode === "single") {
+        nextValue = [day.date];
+      } else {
+        const exists = current.includes(day.date);
+        nextValue = exists ? current.filter((date) => date !== day.date) : current.concat(day.date);
+
+        const max = normalizeCount(this.data.maxDateCount);
+        if (!exists && max > 0 && current.length >= max) {
+          this.emitError("date-limit", `最多可选择${max}个日期`, null, true);
+          return;
+        }
+      }
+
+      this.triggerEvent("change", {
+        value: nextValue,
+        date: day.date,
+        item: day
+      });
+    },
+    handleTagTap(event) {
+      const index = Number(event.currentTarget.dataset.index);
+      const option = this.data.normalizedTagOptions[index];
+      if (!option || option.disabled) return;
+
+      const mode = normalizeTagMode(this.data.tagMode);
+      const current = normalizeTagValue(this.data.tagValue);
+      let nextValue = [];
+
+      if (mode === "single") {
+        nextValue = [option.value];
+      } else {
+        const exists = current.includes(option.value);
+        nextValue = exists ? current.filter((value) => value !== option.value) : current.concat(option.value);
+
+        const max = normalizeCount(this.data.tagMaxCount);
+        if (!exists && max > 0 && current.length >= max) {
+          this.emitError("tag-limit", `最多可选择${max}个选项`, null, true);
+          return;
+        }
+      }
+
+      this.triggerEvent("tagchange", {
+        value: nextValue,
+        option
+      });
+    },
+    handleConfirm() {
+      const value = normalizeValueArray(this.data.value);
+      const tagValue = normalizeTagValue(this.data.tagValue);
+      const dateItemMap = this.getDateItemMap();
+      const tagMap = {};
+
+      this.data.normalizedTagOptions.forEach((option) => {
+        tagMap[option.value] = option;
+      });
+
+      this.triggerEvent("confirm", {
+        value,
+        tagValue,
+        dates: value.map((date) => ({
+          ...(dateItemMap[date] || {}),
+          date
+        })),
+        tags: tagValue.map((valueItem) => tagMap[valueItem]).filter(Boolean)
+      });
+    },
+    handleClose(event) {
+      this.triggerEvent("close", event.detail || {});
+    },
+    handleCloseTap() {
+      this.triggerEvent("close", {
+        source: "close"
+      });
+    },
+    emitError(source, message, error, force) {
+      const key = `${source}:${message}`;
+      if (!force && this._lastErrorKey === key) return;
+
+      this._lastErrorKey = key;
+      this.triggerEvent("error", {
+        source,
+        message,
+        error
+      });
+    }
+  }
+});

package/miniprogram_dist/calendar/calendar.json

@@ -0,0 +1,8 @@
+{
+  "component": true,
+  "styleIsolation": "apply-shared",
+  "usingComponents": {
+    "mo-popup-page": "../popup-page/popup-page",
+    "mo-icon": "../icon/icon"
+  }
+}

package/miniprogram_dist/calendar/calendar.wxml

@@ -0,0 +1,79 @@
+<mo-popup-page
+  show="{{show}}"
+  zIndex="{{zIndex}}"
+  closeOnMask="{{closeOnMask}}"
+  show-handle="{{false}}"
+  content-scrollable="{{false}}"
+  footer-mode="confirm"
+  confirmText="{{confirmText}}"
+  customClass="mo-calendar__popup mo-popup-page--content-flush"
+  bind:close="handleClose"
+  bind:confirm="handleConfirm"
+>
+  <view class="mo-calendar {{customClass}}">
+    <view class="mo-calendar__header">
+      <view class="mo-calendar__header-side"></view>
+      <text class="mo-calendar__title">{{title}}</text>
+      <view class="mo-calendar__close" catchtap="handleCloseTap">
+        <mo-icon
+          name="close"
+          size="{{36}}"
+          color="#999999"
+        />
+      </view>
+    </view>
+
+    <view class="mo-calendar__week">
+      <text wx:for="{{weekdays}}" wx:key="*this" class="mo-calendar__week-text">{{item}}</text>
+    </view>
+
+    <scroll-view class="mo-calendar__month-scroll" scroll-y type="list">
+      <view class="mo-calendar__months">
+        <block wx:for="{{months}}" wx:for-item="month" wx:for-index="monthIndex" wx:key="key">
+          <view class="mo-calendar__month">
+            <view class="mo-calendar__month-header">
+              <text class="mo-calendar__month-title">{{month.title}}</text>
+            </view>
+            <view class="mo-calendar__days">
+              <view
+                wx:for="{{month.days}}"
+                wx:for-item="day"
+                wx:for-index="dayIndex"
+                wx:key="key"
+                class="{{day.className}}"
+                data-month-index="{{monthIndex}}"
+                data-day-index="{{dayIndex}}"
+                bindtap="handleDayTap"
+              >
+                <block wx:if="{{!day.empty}}">
+                  <view class="{{day.contentClassName}}">
+                    <text class="mo-calendar__day-number">{{day.day}}</text>
+                    <text wx:if="{{day.subText}}" class="mo-calendar__day-sub">{{day.subText}}</text>
+                  </view>
+                  <text wx:if="{{day.tagText}}" class="mo-calendar__day-badge">{{day.tagText}}</text>
+                </block>
+              </view>
+            </view>
+          </view>
+        </block>
+      </view>
+    </scroll-view>
+
+    <view wx:if="{{hasTags}}" class="mo-calendar__tags">
+      <text class="mo-calendar__tag-title">{{tagTitle}}</text>
+      <scroll-view class="mo-calendar__tag-scroll" type="list" scroll-x enable-flex style="flex-direction: row;">
+        <view class="mo-calendar__tag-list">
+          <view
+            wx:for="{{normalizedTagOptions}}"
+            wx:key="value"
+            class="{{item.className}}"
+            data-index="{{index}}"
+            bindtap="handleTagTap"
+          >
+            <text class="mo-calendar__tag-label">{{item.label}}</text>
+          </view>
+        </view>
+      </scroll-view>
+    </view>
+  </view>
+</mo-popup-page>