添加组件

miniprogram/pages/components/account-plugin/account-plugin.json

@@ -0,0 +1,8 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-picker": "tdesign-miniprogram/picker/picker",
+    "t-picker-item": "tdesign-miniprogram/picker-item/picker-item",
+    "t-cell": "tdesign-miniprogram/cell/cell"
+  }
+}

miniprogram/pages/components/account-plugin/account-plugin.ts

@@ -0,0 +1,75 @@
+import { post } from '@/utils/https';
+import { getAuthInfo, toArray } from '@/utils/util';
+
+Component({
+  options: { multipleSlots: true },
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    value: {
+      type: null,
+    },
+  },
+  observers: {
+    value: function () {
+      this.setData({ label: this.data.listToObj[this.data.value]?.label });
+    },
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    visible: false,
+    list: [] as any[],
+    listToObj: {} as any,
+    label: '',
+  },
+  lifetimes: {
+    attached() {
+      const auth = getAuthInfo();
+      const SF_ERP_ACCOUNT_VIEW = auth.SF_ERP_ACCOUNT_VIEW;
+      post('ErpAccount/list', { state: 1 }).then((res: any) => {
+        let accountDefaultObj: any = {};
+        const list = toArray(res?.data?.list).map((el) => {
+          if (el.if_default == 2) {
+            accountDefaultObj = el;
+          }
+          const label = `${el.account_name}${
+            SF_ERP_ACCOUNT_VIEW ? `(余额: ${el.current_amount})` : ''
+          }`;
+          el.label = label;
+          this.data.listToObj[el.account_id] = el;
+          return {
+            label: label,
+            value: el.account_id,
+          };
+        });
+        if (!accountDefaultObj) {
+          accountDefaultObj = list[0] || {};
+        }
+        this.setData({ list: list, label: this.data.listToObj[this.data.value]?.label });
+        this.triggerEvent('default', accountDefaultObj);
+      });
+    },
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    onShowPicker() {
+      this.setData({ visible: true });
+    },
+    onPickerCancel() {
+      this.setData({ visible: false });
+    },
+    onPickerConfirm(e: any) {
+      // console.log(e);
+      const item = this.data.listToObj[e.detail.value[0]];
+      this.triggerEvent('ok', item);
+      this.setData({ visible: false });
+    },
+  },
+});

miniprogram/pages/components/account-plugin/account-plugin.wxml

@@ -0,0 +1,13 @@
+<t-cell arrow note="{{label}}" hover bind:click="onShowPicker">
+  <view slot="title" class="custom-label">选择账户</view>
+</t-cell>
+<t-picker visible="{{visible}}" value="{{value}}" title="选择账户" cancelBtn="取消" confirmBtn="确认"
+  bindconfirm="onPickerConfirm" bindcancel="onPickerCancel">
+  <t-picker-item options="{{list}}">
+    <block wx:for="{{list}}" wx:key="index" wx:for-item="option">
+      <view wx:if="{{option.tag}}" slot="label-suffix--{{index}}" class="label-suffix">
+        <t-tag size="small" theme="primary">{{option.tag}}</t-tag>
+      </view>
+    </block>
+  </t-picker-item>
+</t-picker>

miniprogram/pages/components/account-plugin/account-plugin.wxss

@@ -0,0 +1,10 @@
+.custom-label {
+  display: inline-flex;
+}
+
+.custom-label::after {
+  content: '*';
+  color: red;
+  font-size: 32rpx;
+  margin-left: 4rpx;
+}

miniprogram/pages/components/date-picker-plugin/date-picker-plugin.json

@@ -0,0 +1,8 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-date-time-picker": "tdesign-miniprogram/date-time-picker/date-time-picker",
+    "t-cell": "tdesign-miniprogram/cell/cell",
+    "t-icon": "tdesign-miniprogram/icon/icon"
+  }
+}

miniprogram/pages/components/date-picker-plugin/date-picker-plugin.ts

@@ -0,0 +1,43 @@
+Component({
+  options: { multipleSlots: true },
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    title: null,
+    mode: null,
+    placeholder: null,
+    value: null,
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    visible: false,
+    format: {
+      date: 'YYYY-MM-DD',
+      second: 'YYYY-MM-DD HH:mm:ss',
+    },
+    now: Date.now(),
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    showPicker() {
+      this.setData({ visible: true });
+    },
+    hidePicker() {
+      this.setData({ visible: false });
+    },
+    onConfirm(e: any) {
+      this.triggerEvent('confirm', { value: e.detail.value });
+      this.hidePicker();
+    },
+    onClear() {
+      this.triggerEvent('confirm', { value: '' });
+    },
+  },
+});

miniprogram/pages/components/date-picker-plugin/date-picker-plugin.wxml

@@ -0,0 +1,10 @@
+<t-cell title="{{title || ''}}" hover arrow bindtap="showPicker">
+  <view slot="note" style="display: flex;align-items: center;column-gap: 12rpx;">
+    <view>{{value || ''}}</view>
+    <t-icon wx:if="{{value}}" name="close-circle-filled" catch:tap="onClear"></t-icon>
+  </view>
+</t-cell>
+<!-- 年月日时分 -->
+<t-date-time-picker title="{{placeholder || '选择日期'}}" visible="{{visible}}"
+  mode="{{mode || 'date'}}" format="{{format[mode|| 'date'] || 'YYYY-MM-DD HH:mm:ss'}}"
+  value="{{value || now}}" bindconfirm="onConfirm" auto-close="{{true}}" bindcancel="hidePicker" />

miniprogram/pages/components/page-plugin/page-plugin.wxml

@@ -28,8 +28,8 @@
       一键登录
     </t-button>
 
-    <t-checkbox borderless style="padding: 0;margin: 1em 0;" value="{{isAgree}}"
-      bind:change="changeAgreementCheck">
+    <t-checkbox borderless style="padding: 0;margin: 1em 0; background: transparent;"
+      value="{{isAgree}}" bind:change="changeAgreementCheck">
       我已阅读并同意
     </t-checkbox>
     <t-link theme="primary" bindtap="navAgreement" data-type="user" style="margin-bottom: 16rpx;">

miniprogram/pages/components/sort-plugin/sort-plugin.json

@@ -0,0 +1,8 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-cell": "tdesign-miniprogram/cell/cell",
+    "t-icon": "tdesign-miniprogram/icon/icon",
+    "popup-plugin": "/pages/components/popup-plugin/popup-plugin"
+  }
+}

miniprogram/pages/components/sort-plugin/sort-plugin.ts

@@ -0,0 +1,39 @@
+import { getDataSet } from '@/utils/util';
+
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    options: Array,
+    value: null,
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    visible: false,
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    open() {
+      this.setData({ visible: true });
+    },
+    onClose() {
+      this.setData({ visible: false });
+    },
+    select(e: any) {
+      const dataset = getDataSet(e);
+      const index = dataset.index;
+      const item = this.data.options[index];
+      const order = dataset.order;
+
+      this.triggerEvent('ok', { value: item.value + ' ' + order });
+      this.onClose();
+    },
+  },
+});

miniprogram/pages/components/sort-plugin/sort-plugin.wxml

@@ -0,0 +1,18 @@
+<t-button bind:tap="open" size="small" variant="outline" theme="primary">
+  排序
+  <t-icon slot="suffix" name="{{ visible ? 'chevron-up' : 'chevron-down'}}" size="34rpx" />
+</t-button>
+
+<popup-plugin visible="{{ visible }}" title="排序" bind:close="onClose">
+  <t-cell title="{{item.label}}" wx:for="{{options}}" wx:key="value">
+    <view slot="note" style="display: flex;align-items: center;">
+      <t-button size="small" theme="primary"
+        variant="{{value != (item.value || '') + ' asc' ? 'outline': 'base'}}"
+        style="margin-right: 24rpx;" bind:tap="select" data-index="{{index}}" data-order="asc">升序
+      </t-button>
+      <t-button size="small" theme="primary" variant="outline"
+        variant="{{value != (item.value || '') + ' desc' ? 'outline': 'base'}}" bind:tap="select"
+        data-index="{{index}}" data-order="desc">降序</t-button>
+    </view>
+  </t-cell>
+</popup-plugin>

miniprogram/pages/components/sort-plugin/sort-plugin.wxss

@@ -0,0 +1,9 @@
+.sort-plugin {
+  display: inline-flex;
+  align-items: center;
+  height: 64rpx;
+  box-sizing: border-box;
+  border: 1rpx solid #ddd;
+  border-radius: 8rpx;
+  padding: 0 16rpx;
+}