纸板小程序：订单/送货单：列表与详情功能
This commit is contained in:
@@ -0,0 +1,3 @@
|
||||
import { TdSegmentedProps } from './type';
|
||||
declare const props: TdSegmentedProps;
|
||||
export default props;
|
||||
@@ -0,0 +1 @@
|
||||
const props={block:{type:Boolean,value:!1},disabled:{type:Boolean},options:{type:Object,value:[]},value:{type:null,value:null},defaultValue:{type:null}};export default props;
|
||||
@@ -0,0 +1,33 @@
|
||||
import { SuperComponent } from '../common/src/index';
|
||||
import { SegmentedItem } from './type';
|
||||
export default class Segmented extends SuperComponent {
|
||||
options: {
|
||||
multipleSlots: boolean;
|
||||
};
|
||||
externalClasses: string[];
|
||||
properties: import("./type").TdSegmentedProps;
|
||||
controlledProps: {
|
||||
key: string;
|
||||
event: string;
|
||||
}[];
|
||||
data: {
|
||||
prefix: string;
|
||||
classPrefix: string;
|
||||
segmentItems: SegmentedItem[];
|
||||
activeIndex: number;
|
||||
thumbStyle: string;
|
||||
};
|
||||
lifetimes: {
|
||||
ready(): void;
|
||||
};
|
||||
observers: {
|
||||
options(newOptions: any): void;
|
||||
'value, segmentItems'(): void;
|
||||
};
|
||||
methods: {
|
||||
updateOptions(options: (string | number | SegmentedItem)[]): void;
|
||||
updateActiveIndex(): void;
|
||||
updateThumb(): void;
|
||||
handleSelect(e: WechatMiniprogram.BaseEvent): void;
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
import{__decorate}from"tslib";import{SuperComponent,wxComponent}from"../common/src/index";import config from"../common/config";import props from"./props";import{calcIcon,getRect}from"../common/utils";const{prefix:prefix}=config,name=`${prefix}-segmented`;let Segmented=class extends SuperComponent{constructor(){super(...arguments),this.options={multipleSlots:!0},this.externalClasses=[`${prefix}-class`,`${prefix}-class-thumb`,`${prefix}-class-item`],this.properties=props,this.controlledProps=[{key:"value",event:"change"}],this.data={prefix:prefix,classPrefix:name,segmentItems:[],activeIndex:-1,thumbStyle:""},this.lifetimes={ready(){this.updateThumb()}},this.observers={options(e){this.updateOptions(e)},"value, segmentItems"(){this.updateActiveIndex()}},this.methods={updateOptions(e){if(!(null==e?void 0:e.length))return;const t=e.map(e=>{var t;return"string"==typeof e||"number"==typeof e?{value:e,label:String(e)}:Object.assign(Object.assign({},e),{label:null!==(t=e.label)&&void 0!==t?t:String(e.value),icon:e.icon?calcIcon(e.icon):null})});this.setData({segmentItems:t})},updateActiveIndex(){const{value:e,segmentItems:t}=this.data;let s=-1;null!=e&&(s=t.findIndex(t=>t.value===e)),s!==this.data.activeIndex&&this.setData({activeIndex:s},()=>{this.updateThumb()})},updateThumb(){const{activeIndex:e,classPrefix:t}=this.data;if(e<0)return;const s=`.${t}__group`,i=`.${t}-item-${e}`;Promise.all([getRect(this,i),getRect(this,s)]).then(([e,t])=>{if(e&&t){const s=e.left-t.left;this.setData({thumbStyle:`width: ${e.width}px; transform: translateX(${s}px);`})}})},handleSelect(e){const{index:t}=e.currentTarget.dataset,{segmentItems:s,activeIndex:i}=this.data,{disabled:n,options:a}=this.properties,o=s[t];n||!o||o.disabled||t!==i&&this._trigger("change",{value:o.value,selectedOption:a[t]})}}}};Segmented=__decorate([wxComponent()],Segmented);export default Segmented;
|
||||
@@ -0,0 +1 @@
|
||||
{"component":true,"styleIsolation":"apply-shared","usingComponents":{"t-icon":"../icon/icon"}}
|
||||
@@ -0,0 +1 @@
|
||||
<import src="../common/template/icon"/><wxs src="../common/utils.wxs" module="_"/><view class="{{_.cls(classPrefix, [['block', block]])}} class {{prefix}}-class" style="{{_._style([style, customStyle])}}"><view class="{{classPrefix}}__group"><view class="{{classPrefix}}__thumb {{prefix}}-class-thumb" style="{{thumbStyle}}"/><view wx:for="{{segmentItems}}" wx:for-index="index" wx:for-item="item" wx:key="value" class="{{_.cls(classPrefix + '__item', [['active', index === activeIndex], ['disabled', disabled || item.disabled]])}} {{classPrefix}}-item-{{index}} {{prefix}}-class-item" data-index="{{index}}" bind:tap="handleSelect"><view class="{{classPrefix}}__item-inner"><template wx:if="{{item.icon}}" is="icon" data="{{ tClass: classPrefix + '__item-icon', ...item.icon }}"/><span wx:if="{{item.label}}" class="{{classPrefix}}__item-label">{{item.label}}</span></view></view></view></view>
|
||||
@@ -0,0 +1,12 @@
|
||||
@import '../common/style/index.wxss';.t-segmented{display:inline-block;padding:calc(var(--td-spacer,16rpx)/ 4);background-color:var(--td-segmented-bg-color,var(--td-bg-color-component-disabled,var(--td-gray-color-2,#eee)));border-radius:calc(var(--td-spacer,16rpx)/ 2);}
|
||||
.t-segmented--block{display:flex;width:100%;}
|
||||
.t-segmented--block .t-segmented__item{flex:1;min-width:0;}
|
||||
.t-segmented--block .t-segmented__item-inner{overflow:hidden;text-overflow:ellipsis;}
|
||||
.t-segmented__group{position:relative;display:flex;align-items:stretch;justify-items:flex-start;width:100%;}
|
||||
.t-segmented__thumb{position:absolute;top:0;left:0;height:100%;background-color:var(--td-segmented-item-active-bg,var(--td-bg-color-container,var(--td-font-white-1,#fff)));border-radius:calc(var(--td-spacer,16rpx)/ 2);transition:var(--td-segmented-transition,all var(--td-anim-duration-base,.2s) var(--td-anim-time-fn-easing,cubic-bezier(.38,0,.24,1)));will-change:transform,width;}
|
||||
.t-segmented__item{position:relative;z-index:1;flex:none;padding:calc(var(--td-spacer-1,24rpx)/ 4) var(--td-spacer-1,24rpx);text-align:center;cursor:pointer;font:var(--td-segmented-item-label-font,var(--td-font-body-medium,28rpx / 44rpx var(--td-font-family,PingFang SC,Microsoft YaHei,Arial Regular)));color:var(--td-segmented-item-color,var(--td-text-color-primary,var(--td-font-gray-1,rgba(0,0,0,.9))));}
|
||||
.t-segmented__item-inner{display:flex;align-items:center;justify-content:center;white-space:nowrap;}
|
||||
.t-segmented__item-icon:not(:empty){margin-right:calc(var(--td-spacer,16rpx)/ 2);}
|
||||
.t-segmented__item-icon{font-size:var(--td-font-size-m,32rpx);}
|
||||
.t-segmented__item--active{font-weight:600;color:var(--td-segmented-item-active-color,var(--td-brand-color,var(--td-primary-color-7,#0052d9)));}
|
||||
.t-segmented__item--disabled{cursor:not-allowed;pointer-events:none;color:var(--td-segmented-item-disabled-color,var(--td-text-color-disabled,var(--td-font-gray-4,rgba(0,0,0,.26))));}
|
||||
@@ -0,0 +1,28 @@
|
||||
export interface TdSegmentedProps {
|
||||
block?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
disabled?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
options?: {
|
||||
type: ObjectConstructor;
|
||||
value?: string[] | number[] | SegmentedItem[];
|
||||
};
|
||||
value?: {
|
||||
type: null;
|
||||
value?: string | number;
|
||||
};
|
||||
defaultValue?: {
|
||||
type: null;
|
||||
value?: string | number;
|
||||
};
|
||||
}
|
||||
export interface SegmentedItem {
|
||||
value: string | number;
|
||||
label?: string;
|
||||
icon?: string | object;
|
||||
disabled?: boolean;
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export{};
|
||||
Reference in New Issue
Block a user