纪念日调整

pages/anniversary/create/index.js

@@ -0,0 +1,89 @@
+let taskId = '';
+Page({
+    data: {
+        mode: '',
+        alertVisible: false,
+        completeVisible: false,
+        repeatVisible: false,
+        repeatKey: [
+            { label: '每1天', value: '1' },
+            { label: '工作日', value: '2' },
+            { label: '每1周', value: '3' },
+            { label: '每1月', value: '4' },
+            { label: '每1年', value: '5' },
+        ],
+        isShowLunarTimePicker: false,
+        date: new Date('2021-12-23').getTime(), // 支持时间戳传入
+        alertText: '',
+        completeText: '',
+        repeatText: '',
+        repeatValue: '',
+        // 指定选择区间起始值
+        start: '2008-01-01 00:00:00',
+        end: '2040-12-31 23:59:59',
+    },
+    onLoad: function (options) {
+        taskId = options.id;
+    },
+
+    onShow() {
+
+    },
+
+    showPicker(e) {
+        const { mode } = e?.currentTarget?.dataset;
+        this.setData({
+            mode,
+            [`${mode}Visible`]: true,
+        });
+    },
+    hidePicker() {
+        const { mode } = this.data;
+        this.setData({
+            [`${mode}Visible`]: false,
+        });
+    },
+    onConfirm(e) {
+        const { value } = e?.detail;
+        const { mode } = this.data;
+
+        console.log('confim', value);
+
+        this.setData({
+            [mode]: value,
+            [`${mode}Text`]: value,
+        });
+
+        this.hidePicker();
+    },
+
+    onPickerConfirm(e) {
+        const { label,value } = e?.detail;
+        this.setData({
+            repeatText : label,
+            repeatValue: value
+        });
+        this.hidePicker();
+    },
+
+    submitTask() {
+        //TODO 新增或者修改
+        console.log('保存成功')
+        wx.redirectTo({
+            url: '../task/index'
+        })
+    },
+
+    // 点击时间 弹出时间选择器
+    onClickTimeBtn: function (event) {
+        this.setData({
+            isShowLunarTimePicker: true
+        })
+    },
+
+    onLunarConfirm: function (e) {
+        console.log(e.detail);
+    }
+
+
+});

pages/anniversary/create/index.json

@@ -0,0 +1,10 @@
+{
+  "usingComponents": {
+    "t-date-time-picker": "/components/date-time-picker/date-time-picker",
+    "t-picker": "/components/picker/picker",
+    "t-picker-item": "/components/picker/picker-item",
+    "jh-lunar-picker": "/components/jh-lunar-picker/index",
+    "t-switch": "/components/switch/switch",
+    "t-button": "/components/button/button"
+  }
+}

pages/anniversary/create/index.wxml

@@ -0,0 +1,71 @@
+<t-input label="任务名" value="{{'任务的农安我i吗哇哦i对面'}}" placeholder="请输入任务名称" maxlength="{{10}}" clearable />
+<t-cell
+        title="完成日期"
+        hover
+        note="{{completeText || '年 月 日'}}"
+        arrow
+        data-mode="complete"
+        bindtap="showPicker"
+        t-class="pannel-item"
+        t-class-note="{{completeText ? 'sub-text' : 'empty'}}"
+/>
+<t-cell
+        title="提醒日期"
+        hover
+        note="{{alertText || '年 月 日'}}"
+        arrow
+        data-mode="alert"
+        bindtap="showPicker"
+        t-class="pannel-item"
+        t-class-note="{{alertText ? 'sub-text' : 'empty'}}"
+/>
+<t-cell
+        title="任务重复"
+        hover
+        note="{{repeatText || '选择重复周期'}}"
+        arrow
+        data-mode="repeat"
+        bindtap="onClickTimeBtn"
+        t-class="pannel-item"
+        t-class-note="{{repeatText ? 'sub-text' : 'empty'}}"
+/>
+<t-textarea label="备注" placeholder="请输入任务备注..." maxcharacter="200" />
+<t-button t-class="external-class" theme="primary" block bind:tap="submitTask">保存</t-button>
+<input value="{{repeatValue}}" hidden/>
+<t-date-time-picker
+        title="完成日期"
+        visible="{{completeVisible}}"
+        mode="date"
+        defaultValue="{{date}}"
+        format="YYYY-MM-DD"
+        bindchange="onConfirm"
+        bindpick="onColumnChange"
+        bindcancel="hidePicker"
+        start="{{start}}"
+        end="{{end}}"
+></t-date-time-picker>
+<t-date-time-picker
+        title="截止日期"
+        visible="{{alertVisible}}"
+        mode="date"
+        defaultValue="{{date}}"
+        format="YYYY-MM-DD"
+        bindchange="onConfirm"
+        bindpick="onColumnChange"
+        bindcancel="hidePicker"
+        start="{{start}}"
+        end="{{end}}"
+></t-date-time-picker>
+<t-picker
+        visible="{{repeatVisible}}"
+        value="{{repeatText}}"
+        data-key="repeatKey"
+        title="请选择重复周期"
+        cancelBtn="取消"
+        confirmBtn="确认"
+        bindchange="onPickerConfirm"
+        bindpick="onColumnChange"
+>
+    <t-picker-item options="{{repeatKey}}"></t-picker-item>
+</t-picker>
+<jh-lunar-picker isShow='{{isShowLunarTimePicker}}' bind:confirm="onLunarConfirm" />

pages/anniversary/create/index.wxss

@@ -0,0 +1,17 @@
+.pannel-item {
+    font-size: 32rpx;
+}
+
+.pannel-item::after {
+    border: 0;
+}
+
+.sub-text {
+    color: #000;
+    opacity: 0.9;
+}
+
+.empty {
+    color: #000;
+    opacity: 0.32;
+}