任务明细页面

2022-11-25 16:54:11 +08:00
parent 0becbacd2d
commit d92a31a38e
26 changed files with 417 additions and 112 deletions
--- a/app.json
+++ b/app.json
@@ -4,7 +4,8 @@
        "pages/logs/logs",
        "pages/myself/index",
        "pages/message/index",
-        "pages/taskDetail/index"
+        "pages/taskDetail/index",
+        "pages/anniversary/index"
    ],
    "usingComponents": {
        "t-icon": "/components/icon/icon",
--- a/components/switch/README.md
+++ b/components/switch/README.md
@@ -0,0 +1,63 @@
+---
+title: Switch 开关
+description: 用于控制某个功能的开启和关闭。
+spline: form
+isComponent: true
+---
+
+<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-82%25-blue" /></span>
+## 引入
+
+全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
+
+```json
+"usingComponents": {
+  "t-switch": "tdesign-miniprogram/switch/switch"
+}
+```
+
+## 代码演示
+
+### 基础开关
+
+<img src="https://tdesign.gtimg.com/miniprogram/readme/switch.png" width="375px" height="50%">
+
+{{ base }}
+
+
+### 开关状态
+
+{{ status }}
+
+
+### 受控用法
+
+```html
+<t-switch value="{{value}}" bindchange="onChange"></t-switch>
+
+```
+### 非受控用法
+
+```html
+<t-switch defaultValue="{{value}}"></t-switch>
+```
+
+## API
+### Switch Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+colors | Array | - | 自定义颜色，[打开时的颜色，关闭时的颜色]。组件默认颜色为 ['#0052d9', 'rgba(0, 0, 0, .26']。示例：[blue, gray]。TS 类型：`string[]` | N
+custom-value | Array | - | 开关内容，[打开时的值，关闭时的值]。默认为 [true, false]。示例：[1, 0]。TS 类型：`Array<SwitchValue>` | N
+disabled | Boolean | false | 是否禁用组件 | N
+label | String | '' | 开关的标签 | N
+loading | Boolean | false | 是否处于加载中状态 | N
+size | String | medium | 开关尺寸。可选项：small/medium/large | N
+value | String / Number / Boolean | undefined | 开关值。TS 类型：`SwitchValue` `type SwitchValue = string | number | boolean`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/switch/type.ts) | N
+default-value | String / Number / Boolean | undefined | 开关值。非受控属性。TS 类型：`SwitchValue` `type SwitchValue = string | number | boolean`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/switch/type.ts) | N
+
+### Switch Events
+
+名称 | 参数 | 描述
+-- | -- | --
+change | `(value: SwitchValue)` | 数据发生变化时触发
--- a/components/switch/_var.wxss
+++ b/components/switch/_var.wxss
@@ -0,0 +1,27 @@
+.t-float-left {
+  float: left;
+}
+.t-float-right {
+  float: right;
+}
+@keyframes tdesign-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+.hotspot-expanded.relative {
+  position: relative;
+}
+.hotspot-expanded::after {
+  content: '';
+  display: block;
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  transform: scale(1.5);
+}
--- a/components/switch/props.d.ts
+++ b/components/switch/props.d.ts
@@ -0,0 +1,3 @@
+import { TdSwitchProps } from './type';
+declare const props: TdSwitchProps;
+export default props;
--- a/components/switch/props.js
+++ b/components/switch/props.js
@@ -0,0 +1,36 @@
+const props = {
+    colors: {
+        type: Array,
+    },
+    customValue: {
+        type: Array,
+        value: [true, false],
+    },
+    disabled: {
+        type: Boolean,
+        value: false,
+    },
+    label: {
+        type: String,
+        value: '',
+    },
+    loading: {
+        type: Boolean,
+        value: false,
+    },
+    size: {
+        type: String,
+        value: 'medium',
+    },
+    value: {
+        type: Boolean,
+        optionalTypes: [Number, String],
+        value: null,
+    },
+    defaultValue: {
+        type: Boolean,
+        optionalTypes: [Number, String],
+        value: null,
+    },
+};
+export default props;
--- a/components/switch/switch.d.ts
+++ b/components/switch/switch.d.ts
@@ -0,0 +1,24 @@
+import { SuperComponent } from '../common/src/index';
+export default class Switch extends SuperComponent {
+    externalClasses: string[];
+    behaviors: string[];
+    properties: import("./type").TdSwitchProps;
+    data: {
+        classPrefix: string;
+        isActive: boolean;
+        bodyStyle: string;
+    };
+    controlledProps: {
+        key: string;
+        event: string;
+    }[];
+    observers: {
+        value(val: any): void;
+    };
+    methods: {
+        switchChange(): void;
+        handleColorChange(): void;
+        onTapBackground(): void;
+        onTapDot(): void;
+    };
+}
--- a/components/switch/switch.js
+++ b/components/switch/switch.js
@@ -0,0 +1,69 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { wxComponent, SuperComponent } from '../common/src/index';
+import config from '../common/config';
+import props from './props';
+const { prefix } = config;
+const name = `${prefix}-switch`;
+let Switch = class Switch extends SuperComponent {
+    constructor() {
+        super(...arguments);
+        this.externalClasses = ['t-class', 't-class-label', 't-class-body', 't-class-dot'];
+        this.behaviors = ['wx://form-field'];
+        this.properties = props;
+        this.data = {
+            classPrefix: name,
+            isActive: false,
+            bodyStyle: '',
+        };
+        this.controlledProps = [
+            {
+                key: 'value',
+                event: 'change',
+            },
+        ];
+        this.observers = {
+            value(val) {
+                const [activeValue] = this.data.customValue;
+                this.setData({
+                    isActive: val === activeValue,
+                });
+                this.handleColorChange();
+            },
+        };
+        this.methods = {
+            switchChange() {
+                const { disabled, value, customValue } = this.data;
+                const [activeValue, inactiveValue] = customValue;
+                if (disabled)
+                    return;
+                this._trigger('change', {
+                    value: value === activeValue ? inactiveValue : activeValue,
+                });
+            },
+            handleColorChange() {
+                const { disabled, colors = [] } = this.data;
+                const [activedColor = '#0052d9', inactivedColor = 'rgba(0, 0, 0, .26)'] = colors;
+                if (!disabled) {
+                    this.setData({
+                        bodyStyle: `background-color: ${this.data.isActive ? activedColor : inactivedColor}`,
+                    });
+                }
+            },
+            onTapBackground() {
+                this.switchChange();
+            },
+            onTapDot() {
+                this.switchChange();
+            },
+        };
+    }
+};
+Switch = __decorate([
+    wxComponent()
+], Switch);
+export default Switch;
--- a/components/switch/switch.json
+++ b/components/switch/switch.json
@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}
--- a/components/switch/switch.wxml
+++ b/components/switch/switch.wxml
@@ -0,0 +1,13 @@
+<view class="t-class {{classPrefix}}">
+  <view wx:if="{{label}}" class="{{classPrefix}}__label t-class-label">{{label}}</view>
+  <view
+    class="{{classPrefix}}__body t-class-body {{isActive ? classPrefix + '__body--active' : ''}} {{disabled ? classPrefix + '__body--disabled' : ''}}"
+    style="{{bodyStyle}}"
+    bindtap="onTapBackground"
+  >
+    <view
+      class="{{classPrefix}}__dot t-class-dot  {{isActive ? classPrefix + '__dot--active' : ''}}"
+      catchtap="onTapDot"
+    />
+  </view>
+</view>
--- a/components/switch/switch.wxss
+++ b/components/switch/switch.wxss
@@ -0,0 +1,70 @@
+.t-float-left {
+  float: left;
+}
+.t-float-right {
+  float: right;
+}
+@keyframes tdesign-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+.hotspot-expanded.relative {
+  position: relative;
+}
+.hotspot-expanded::after {
+  content: '';
+  display: block;
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  transform: scale(1.5);
+}
+.t-switch {
+  display: flex;
+  align-items: center;
+}
+.t-switch__label {
+  display: inline-block;
+  vertical-align: middle;
+  text-align: right;
+  margin-right: 32rpx;
+  font-size: 32rpx;
+  color: rgba(0, 0, 0, 0.4);
+}
+.t-switch__body {
+  vertical-align: middle;
+  width: 88rpx;
+  height: 48rpx;
+  border-radius: 24rpx;
+  background-color: rgba(0, 0, 0, 0.26);
+  position: relative;
+}
+.t-switch__body--active {
+  background-color: #0052d9;
+}
+.t-switch__body--disabled {
+  background-color: #E7E7E7;
+}
+.t-switch__body--active.t-switch__body--disabled {
+  background-color: #96BBF8;
+}
+.t-switch__dot {
+  position: absolute;
+  left: 5rpx;
+  top: 50%;
+  width: 40rpx;
+  height: 40rpx;
+  border-radius: 50%;
+  background-color: #fff;
+  transition: all 0.3s;
+  transform: translateY(-50%);
+}
+.t-switch__dot--active {
+  left: 45rpx;
+}
--- a/components/switch/type.d.ts
+++ b/components/switch/type.d.ts
@@ -0,0 +1,37 @@
+export interface TdSwitchProps {
+    colors?: {
+        type: ArrayConstructor;
+        value?: string[];
+    };
+    customValue?: {
+        type: ArrayConstructor;
+        value?: Array<SwitchValue>;
+    };
+    disabled?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    label?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    loading?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    size?: {
+        type: StringConstructor;
+        value?: 'small' | 'medium' | 'large';
+    };
+    value?: {
+        type: BooleanConstructor;
+        optionalTypes: Array<NumberConstructor | StringConstructor>;
+        value?: SwitchValue;
+    };
+    defaultValue?: {
+        type: BooleanConstructor;
+        optionalTypes: Array<NumberConstructor | StringConstructor>;
+        value?: SwitchValue;
+    };
+}
+export declare type SwitchValue = string | number | boolean;
--- a/components/switch/type.js
+++ b/components/switch/type.js
@@ -0,0 +1 @@
+export {};
--- a/pages/anniversary/index.js
+++ b/pages/anniversary/index.js
@@ -0,0 +1,8 @@
+Page({
+    data: {
+        aIconList: ['check-rectangle','star-filled','notification','circle'],
+    },
+    onLoad: function (options) {
+
+    }
+});
--- a/pages/anniversary/index.json
+++ b/pages/anniversary/index.json
@@ -0,0 +1,5 @@
+{
+  "usingComponents": {
+    "foot-tab": "../foot-tab/foot-tab"
+  }
+}
--- a/pages/anniversary/index.wxml
+++ b/pages/anniversary/index.wxml
@@ -0,0 +1,5 @@
+<!--pages/message/index.wxml-->
+<text>纪念日</text>
+<view>
+    <foot-tab iconList="{{aIconList}}"/>
+</view>
--- a/pages/anniversary/index.wxss
+++ b/pages/anniversary/index.wxss
--- a/pages/foot-tab/foot-tab.js
+++ b/pages/foot-tab/foot-tab.js
@@ -41,7 +41,7 @@ Component({
                    'iconList[1]': 'star-filled'
                })
                wx.redirectTo({
-                    url: '../task/index'
+                    url: '../anniversary/index'
                })
            }
            if (cur == 3){
--- a/pages/index/index.js
+++ b/pages/index/index.js
@@ -1,48 +0,0 @@
-// index.js
-// 获取应用实例
-const app = getApp()
-Page({
-  data: {
-    aIconList: ['check-rectangle-filled','star','notification','circle'],
-    motto: 'Hello World',
-    userInfo: {},
-    hasUserInfo: false,
-    canIUse: wx.canIUse('button.open-type.getUserInfo'),
-    canIUseGetUserProfile: false,
-    canIUseOpenData: wx.canIUse('open-data.type.userAvatarUrl') && wx.canIUse('open-data.type.userNickName') // 如需尝试获取用户信息可改为false
-  },
-  // 事件处理函数
-  bindViewTap() {
-    wx.navigateTo({
-      url: '../logs/logs'
-    })
-  },
-  onLoad() {
-    if (wx.getUserProfile) {
-      this.setData({
-        canIUseGetUserProfile: true
-      })
-    }
-  },
-  getUserProfile(e) {
-    // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
-    wx.getUserProfile({
-      desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
-      success: (res) => {
-        console.log(res)
-        this.setData({
-          userInfo: res.userInfo,
-          hasUserInfo: true
-        })
-      }
-    })
-  },
-  getUserInfo(e) {
-    // 不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息
-    console.log(e)
-    this.setData({
-      userInfo: e.detail.userInfo,
-      hasUserInfo: true
-    })
-  }
-})
--- a/pages/index/index.json
+++ b/pages/index/index.json
@@ -1,5 +0,0 @@
-{
-    "usingComponents": {
-      "foot-tab": "../foot-tab/foot-tab"
-    }
-}
--- a/pages/index/index.wxml
+++ b/pages/index/index.wxml
@@ -1,26 +0,0 @@
-<!--index.wxml-->
-<view class="container">
-  <view class="userinfo">
-    <block wx:if="{{canIUseOpenData}}">
-      <view class="userinfo-avatar" bindtap="bindViewTap">
-        <open-data type="userAvatarUrl"></open-data>
-      </view>
-      <open-data type="userNickName"></open-data>
-    </block>
-    <block wx:elif="{{!hasUserInfo}}">
-      <button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 获取头像昵称 </button>
-      <button wx:elif="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
-      <view wx:else> 请使用1.4.4及以上版本基础库 </view>
-    </block>
-    <block wx:else>
-      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
-      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
-    </block>
-  </view>
-  <view class="usermotto">
-    <text class="user-motto">{{motto}}</text>
-  </view>
-  <view>
-    <foot-tab iconList="{{aIconList}}"/>
-  </view>
-</view>
--- a/pages/index/index.wxss
+++ b/pages/index/index.wxss
@@ -1,19 +0,0 @@
-/**index.wxss**/
-.userinfo {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  color: #aaa;
-}
-
-.userinfo-avatar {
-  overflow: hidden;
-  width: 128rpx;
-  height: 128rpx;
-  margin: 20rpx;
-  border-radius: 50%;
-}
-
-.usermotto {
-  margin-top: 200px;
-}
--- a/pages/task/index.js
+++ b/pages/task/index.js
@@ -10,7 +10,7 @@ Page({
    data: {
        tapCheckHandle: undefined,
        dateVisible: true,
-        aIconList: ['check-rectangle', 'star-filled', 'notification', 'info-circle'],
+        aIconList: ['check-rectangle-filled', 'star', 'notification', 'info-circle'],
        taskList: [{'taskId':'1','title':'标题德外旗舰店1','note':'2022-11-11'},{'taskId':'2','title':'标题德外旗舰店2','note':'2022-11-11'}],
        todayList: [{'taskId':'1','title':'标题德外旗舰店1','note':'2022-11-11'},{'taskId':'2','title':'标题德外旗舰店2','note':'2022-11-11'}],
        delayList: [{'taskId':'1','title':'si哦大家艾吉奥是我','note':'2022-11-11','complete':true,'notification':false},
--- a/pages/taskDetail/index.js
+++ b/pages/taskDetail/index.js
@@ -2,9 +2,11 @@ let taskId = '';
 Page({
    data: {
        mode: '',
-        dateVisible: false,
+        alertVisible: false,
+        completeVisible: false,
        date: new Date('2021-12-23').getTime(), // 支持时间戳传入
-        dateText: '',
+        alertText: '',
+        completeText: '',
        // 指定选择区间起始值
        start: '2008-01-01 00:00:00',
        end: '2040-12-31 23:59:59',
--- a/pages/taskDetail/index.json
+++ b/pages/taskDetail/index.json
@@ -1,5 +1,8 @@
 {
  "usingComponents": {
-    "t-date-time-picker": "../../components/date-time-picker/date-time-picker"
+    "t-date-time-picker": "../../components/date-time-picker/date-time-picker",
+    "t-picker": "../../components/picker/picker",
+    "t-picker-item": "../../components/picker/picker-item",
+    "t-switch": "../../components/switch/switch"
  }
 }
--- a/pages/taskDetail/index.wxml
+++ b/pages/taskDetail/index.wxml
@@ -2,17 +2,51 @@
 <t-cell
        title="完成日期"
        hover
-        note="{{dateText || '年 月 日'}}"
+        note="{{completeText || '年 月 日'}}"
        arrow
-        data-mode="date"
+        data-mode="complete"
        bindtap="showPicker"
-        class="test"
        t-class="pannel-item"
-        t-class-note="{{dateText ? 'sub-text' : 'empty'}}"
+        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-picker
+        visible="{{cityVisible}}"
+        value="{{cityValue}}"
+        data-key="city"
+        title="{{pickerTitle}}"
+        cancelBtn="取消"
+        confirmBtn="确认"
+        bindchange="onPickerChange"
+        bindpick="onColumnChange"
+        bindcancel="onPickerCancel"
+>
+    <t-picker-item options="{{citys}}"></t-picker-item>
+</t-picker>
 <t-date-time-picker
-        title="选择日期"
-        visible="{{dateVisible}}"
+        title="选择日期1"
+        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="选择日期2"
+        visible="{{alertVisible}}"
        mode="date"
        defaultValue="{{date}}"
        format="YYYY-MM-DD"
@@ -22,4 +56,3 @@
        start="{{start}}"
        end="{{end}}"
 ></t-date-time-picker>
-<t-input placeholder="最大输入10个字符" maxlength="{{10}}" clearable />
--- a/pages/taskDetail/index.wxss
+++ b/pages/taskDetail/index.wxss
@@ -1,6 +1,5 @@
 .pannel-item {
    font-size: 32rpx;
-    margin-bottom: 32rpx;
 }

 .pannel-item::after {