初始化项目, 添加TDesign等包

miniprogram/miniprogram_npm/tdesign-miniprogram/rate/props.d.ts

@@ -0,0 +1,3 @@
+import { TdRateProps } from './type';
+declare const props: TdRateProps;
+export default props;

miniprogram/miniprogram_npm/tdesign-miniprogram/rate/props.js

@@ -0,0 +1 @@
+const props={allowHalf:{type:Boolean,value:!1},color:{type:null,value:"#ED7B2F"},count:{type:Number,value:5},disabled:{type:null,value:void 0},gap:{type:null,value:8},icon:{type:null},iconPrefix:{type:String,value:void 0},placement:{type:String,value:"top"},showText:{type:Boolean,value:!1},size:{type:String,value:"24px"},texts:{type:Array,value:[]},value:{type:Number,value:null},defaultValue:{type:Number,value:0},variant:{type:String,value:"outline"}};export default props;

miniprogram/miniprogram_npm/tdesign-miniprogram/rate/rate.d.ts

@@ -0,0 +1,29 @@
+import { SuperComponent } from '../common/src/index';
+export default class Rate extends SuperComponent {
+    externalClasses: string[];
+    properties: import("./type").TdRateProps;
+    controlledProps: {
+        key: string;
+        event: string;
+    }[];
+    data: {
+        prefix: string;
+        classPrefix: string;
+        defaultTexts: string[];
+        tipsVisible: boolean;
+        tipsLeft: number;
+        actionType: string;
+        scaleIndex: number;
+        isVisibleToScreenReader: boolean;
+    };
+    methods: {
+        onTouch(e: WechatMiniprogram.TouchEvent, eventType: 'tap' | 'move'): void;
+        onTap(e: WechatMiniprogram.TouchEvent): void;
+        onTouchStart(): void;
+        onTouchMove(e: WechatMiniprogram.TouchEvent): void;
+        onTouchEnd(): void;
+        hideTips(): void;
+        onSelect(e: WechatMiniprogram.TouchEvent): void;
+        showAlertText(): void;
+    };
+}

miniprogram/miniprogram_npm/tdesign-miniprogram/rate/rate.js

@@ -0,0 +1 @@
+import{__decorate}from"tslib";import{SuperComponent,wxComponent}from"../common/src/index";import config from"../common/config";import props from"./props";import{unitConvert,getRect}from"../common/utils";const{prefix:prefix}=config,name=`${prefix}-rate`;let Rate=class extends SuperComponent{constructor(){super(...arguments),this.externalClasses=[`${prefix}-class`,`${prefix}-class-icon`,`${prefix}-class-text`],this.properties=props,this.controlledProps=[{key:"value",event:"change"}],this.data={prefix:prefix,classPrefix:name,defaultTexts:["极差","失望","一般","满意","惊喜"],tipsVisible:!1,tipsLeft:0,actionType:"",scaleIndex:-1,isVisibleToScreenReader:!1},this.methods={onTouch(e,t){const{count:i,allowHalf:s,gap:o,value:a,size:n}=this.properties,[r]=e.changedTouches,c=unitConvert(o);getRect(this,`.${name}__wrapper`).then(e=>{const{width:p,left:h}=e,l=(p-(i-1)*c)/i,d=(r.pageX-h+c)/(l+c),u=d%1,m=d-u;let T=u<=.5&&s?m+.5:m+1;T>i?T=i:T<0&&(T=0);const x=Math.ceil(T-1)*(unitConvert(o)+unitConvert(n))+.5*unitConvert(n);this.setData({tipsVisible:!0,actionType:t,scaleIndex:Math.ceil(T),tipsLeft:Math.max(x,0)}),T!==a&&this._trigger("change",{value:T}),this.touchEnd&&this.hideTips()})},onTap(e){const{disabled:t}=this.properties;t||this.onTouch(e,"tap")},onTouchStart(){this.touchEnd=!1},onTouchMove(e){this.onTouch(e,"move"),this.showAlertText()},onTouchEnd(){this.touchEnd=!0,this.hideTips()},hideTips(){"move"===this.data.actionType&&this.setData({tipsVisible:!1,scaleIndex:-1})},onSelect(e){const{value:t}=e.currentTarget.dataset,{actionType:i}=this.data;"move"!==i&&(this._trigger("change",{value:t}),setTimeout(()=>this.setData({tipsVisible:!1,scaleIndex:-1}),300))},showAlertText(){!0!==this.data.isVisibleToScreenReader&&(this.setData({isVisibleToScreenReader:!0}),setTimeout(()=>{this.setData({isVisibleToScreenReader:!1})},2e3))}}}};Rate=__decorate([wxComponent()],Rate);export default Rate;

miniprogram/miniprogram_npm/tdesign-miniprogram/rate/rate.json

@@ -0,0 +1 @@
+{"component":true,"styleIsolation":"apply-shared","usingComponents":{"t-icon":"../icon/icon"}}

miniprogram/miniprogram_npm/tdesign-miniprogram/rate/rate.wxml

@@ -0,0 +1 @@
+<wxs src="../common/utils.wxs" module="_"/><wxs src="./rate.wxs" module="utils"/><view class="{{classPrefix}} class" style="{{_._style([style, customStyle])}}"><view class="{{classPrefix}}__wrapper {{prefix}}-class" style="font-size:{{ utils.regSize(size) }}" bind:touchstart="{{ !disabled ? 'onTouchStart' : '' }}" bind:touchmove="{{ !disabled ? 'onTouchMove' : '' }}" bind:tap="onTap" bind:touchend="{{ !disabled ? 'onTouchEnd' : ''}}" bind:touchcancel="{{ !disabled ? 'onTouchEnd' : ''}}" aria-role="slider" aria-valuemax="{{count}}" aria-valuemin="{{0}}" aria-valuenow="{{value}}" aria-valuetext="{{utils.getText(texts,value,defaultTexts)}}"><t-icon wx:for="{{ count }}" wx:key="*this" class="{{classPrefix }}__icon {{utils.getIconClass(classPrefix + '__icon', defaultValue, value, index, allowHalf, disabled, scaleIndex)}}" style="margin-right: {{ count - index > 1 ? _.addUnit(gap) : 0 }}; {{utils.getColor(color)}}" t-class="{{prefix}}-class-icon" name="{{utils.getIconName(defaultValue, value, index, icon)}}" size="{{ size }}" prefix="{{iconPrefix}}"/></view><text wx:if="{{showText}}" class="{{_.cls(classPrefix + '__text', [['active', value > 0]])}} {{prefix}}-class-text" aria-hidden="{{true}}">{{utils.getText(texts,value,defaultTexts)}}</text><text wx:if="{{isVisibleToScreenReader}}" class="{{_.cls(classPrefix + '__text', [['active', value > 0], ['sr-only', isVisibleToScreenReader]])}} {{prefix}}-class-text" aria-role="alert" aria-live="assertive">{{value+'星'}} {{utils.getText(texts,value,defaultTexts)}}</text><view wx:if="{{tipsVisible && placement}}" class="{{_.cls(classPrefix + '__tips', [placement])}}" style="left: {{tipsLeft}}px" aria-hidden="{{true}}"><block wx:if="{{actionType == 'tap'}}"><view wx:if="{{allowHalf}}" class="{{_.cls(classPrefix + '__tips-item', [['active', utils.ceil(value) - 0.5 == value]])}}" bind:tap="onSelect" data-value="{{utils.ceil(value) - 0.5}}"><t-icon class="{{classPrefix }}__icon {{classPrefix }}__icon--selected-half" name="{{utils.getIconName(defaultValue, value, index, icon)}}" size="{{ size }}" style="{{utils.getColor(color)}}"/><view class="{{classPrefix}}__tips-text">{{utils.ceil(value) - 0.5}}</view></view><view class="{{_.cls(classPrefix + '__tips-item', [['active', utils.ceil(value) == value]])}}" bind:tap="onSelect" data-value="{{utils.ceil(value)}}"><t-icon class="{{_.cls(classPrefix + '__icon', ['selected'])}}" name="{{utils.getIconName(defaultValue, 0, 0, icon)}}" size="{{ size }}" style="{{utils.getColor(color)}}"/><view class="{{classPrefix}}__tips-text">{{utils.ceil(value)}}</view></view></block><view wx:else class="{{_.cls(classPrefix + '__tips-item', [['active', utils.ceil(value) == value && actionType == 'tap']])}}" bind:tap="onSelect" data-value="{{utils.ceil(value)}}"><t-icon class="{{_.cls(classPrefix + '__icon', [['selected', utils.ceil(value) == value], ['selected-half', utils.ceil(value) != value]]) }}" name="{{utils.getIconName(defaultValue, 0, 0, icon)}}" size="{{ size }}" style="{{utils.getColor(color)}}"/><view class="{{classPrefix}}__tips-text">{{value}}</view></view></view></view>

miniprogram/miniprogram_npm/tdesign-miniprogram/rate/rate.wxs

@@ -0,0 +1,65 @@
+module.exports = {
+  getText: function (texts, val, defaultTexts) {
+    if (!texts.length) {
+      texts = defaultTexts;
+    }
+    var curVal = Math.floor(val - 1);
+    return texts[curVal] || '未评分';
+  },
+
+  getIconName: function (defaultValue, value, index, icon) {
+    var curVal = value >= 0 ? value : defaultValue;
+    var name = ['star-filled', 'star-filled'];
+
+    if (icon) {
+      name = icon.constructor == 'Array' ? icon : [icon, icon];
+    }
+
+    return name[curVal >= index + 1 ? 0 : 1];
+  },
+
+  getIconClass: function (classPrefix, defaultValue, value, index, allowHalf, disabled, scaleIndex) {
+    var curVal = value >= 0 ? value : defaultValue;
+    var className = [];
+    if (curVal >= index + 1) {
+      className.push(classPrefix + '--selected');
+      if (disabled) {
+        className.push(classPrefix + '--disabled');
+      }
+      if (scaleIndex === index + 1) {
+        className.push(classPrefix + '--current');
+      }
+    } else if (allowHalf && curVal - index > 0) {
+      className.push(classPrefix + '--selected-half');
+      if (scaleIndex === index + 1) {
+        className.push(classPrefix + '--current');
+      }
+      if (disabled) {
+        className.push(classPrefix + '--disabled-half');
+      }
+    } else {
+      className.push(classPrefix + '--unselected');
+    }
+    return className.join(' ');
+  },
+
+  ceil: function (value) {
+    return Math.ceil(value);
+  },
+
+  getColor: function (color) {
+    if (color.constructor === 'Array' && color.length === 2) {
+      return ';--td-rate-selected-color: ' + color[0] + '; --td-rate-unselected-color: ' + color[1];
+    }
+
+    if (typeof color === 'string') {
+      return ';--td-rate-selected-color: ' + color;
+    }
+
+    return '';
+  },
+
+  regSize: function (val) {
+    return val.indexOf('px') ? val : val + 'px';
+  },
+};

miniprogram/miniprogram_npm/tdesign-miniprogram/rate/rate.wxss

@@ -0,0 +1,15 @@
+@import '../common/style/index.wxss';.t-rate{position:relative;display:flex;align-items:center;justify-content:flex-start;}
+.t-rate__wrapper{line-height:1em;display:inline-flex;}
+.t-rate__icon{display:block;line-height:1em;width:1em;transition:transform .3s ease;}
+.t-rate__icon--current{transform:scale(var(--td-rate-icon-scale,1.33));}
+.t-rate__icon--selected{color:var(--td-rate-selected-color,var(--td-warning-color,var(--td-warning-color-5,#e37318)));}
+.t-rate__icon--selected-half{color:transparent;background:linear-gradient(to right,var(--td-rate-selected-color,var(--td-warning-color,var(--td-warning-color-5,#e37318))) 0,var(--td-rate-selected-color,var(--td-warning-color,var(--td-warning-color-5,#e37318))) 50%,var(--td-rate-unselected-color,var(--td-component-border,var(--td-gray-color-4,#dcdcdc))) 51%,var(--td-rate-unselected-color,var(--td-component-border,var(--td-gray-color-4,#dcdcdc))) 100%);-webkit-background-clip:text;background-clip:text;}
+.t-rate__icon--unselected{color:var(--td-rate-unselected-color,var(--td-component-border,var(--td-gray-color-4,#dcdcdc)));}
+.t-rate__text{font-size:var(--td-rate-text-font-size,var(--td-font-size-m,32rpx));color:var(--td-rate-text-color,var(--td-text-color-disabled,var(--td-font-gray-4,rgba(0,0,0,.26))));margin-left:32rpx;vertical-align:middle;}
+.t-rate__text--active{color:var(--td-rate-text-active-color,var(--td-text-color-primary,var(--td-font-gray-1,rgba(0,0,0,.9))));font-weight:var(--td-rate-text-active-font-weight,600);}
+.t-rate__text--sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;clip-path:inset(50%);border:0;}
+.t-rate__tips{position:absolute;display:flex;align-items:center;bottom:calc(100% + 16rpx);padding:8rpx;border-radius:12rpx;box-shadow:var(--td-shadow-1,0 1px 10px rgba(0,0,0,.05),0 4px 5px rgba(0,0,0,.08),0 2px 4px -1px rgba(0,0,0,.12));background-color:var(--td-bg-color-container,var(--td-font-white-1,#fff));transform:translateX(-50%);}
+.t-rate__tips--bottom{top:calc(100% + 16rpx);bottom:auto;}
+.t-rate__tips-item{display:flex;flex-direction:column;align-items:center;width:64rpx;border-radius:6rpx;}
+.t-rate__tips-item--active{background-color:var(--td-bg-color-component,var(--td-gray-color-3,#e7e7e7));}
+.t-rate__tips-text{text-align:center;font-size:24rpx;line-height:40rpx;}

miniprogram/miniprogram_npm/tdesign-miniprogram/rate/type.d.ts

@@ -0,0 +1,58 @@
+export interface TdRateProps {
+    allowHalf?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    color?: {
+        type: null;
+        value?: string | Array<string>;
+    };
+    count?: {
+        type: NumberConstructor;
+        value?: number;
+    };
+    disabled?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    gap?: {
+        type: null;
+        value?: string | number;
+    };
+    icon?: {
+        type: null;
+        value?: string | string[];
+    };
+    iconPrefix?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    placement?: {
+        type: StringConstructor;
+        value?: 'top' | 'bottom' | '';
+    };
+    showText?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    size?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    texts?: {
+        type: ArrayConstructor;
+        value?: Array<string>;
+    };
+    value?: {
+        type: NumberConstructor;
+        value?: number;
+    };
+    defaultValue?: {
+        type: NumberConstructor;
+        value?: number;
+    };
+    variant?: {
+        type: StringConstructor;
+        value?: 'outline' | 'filled';
+    };
+}

miniprogram/miniprogram_npm/tdesign-miniprogram/rate/type.js

@@ -0,0 +1 @@
+export{};