@cloudbase/weda-ui 1.0.21 → 1.0.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudbase/weda-ui",
-  "version": "1.0.21",
+  "version": "1.0.24",
   "main": "./src/index.js",
   "module": "./src/index",
   "miniprogram": "mpdist",
@@ -56,7 +56,6 @@
   "license": "MIT",
   "description": "腾讯云微搭低代码组件库模板",
   "dependencies": {
-    "@cloudbase/cli": "^1.12.4",
     "@cloudbase/ui-react": "^1.0.4",
     "@loadable/component": "^5.15.2",
     "@react-hookz/web": "^12.3.0",
@@ -85,6 +84,7 @@
     "@babel/preset-env": "^7.16.5",
     "@babel/preset-react": "^7.16.5",
     "@babel/preset-typescript": "^7.16.5",
+    "@cloudbase/cli": "^1.12.4",
     "@cloudbase/lowcode-build-dependence": "^0.9.0",
     "@commitlint/cli": "^16.0.2",
     "@commitlint/config-conventional": "^13.2.0",
@@ -104,7 +104,7 @@
     "@types/jest": "^27.0.3",
     "@types/resize-observer-browser": "^0.1.6",
     "@typescript-eslint/eslint-plugin": "^5.9.0",
-    "@typescript-eslint/parser": "^5.11.0",
+    "@typescript-eslint/parser": "^5.21.0",
     "babel-jest": "^27.4.5",
     "babel-loader": "^8.2.3",
     "babel-plugin-istanbul": "^6.1.1",
@@ -113,7 +113,9 @@
     "cypress": "~9.5.1",
     "eslint": "^8.9.0",
     "eslint-config-tencent": "^1.0.3",
+    "eslint-import-resolver-typescript": "^2.7.1",
     "eslint-plugin-cypress": "^2.12.1",
+    "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jest": "^26.1.2",
     "eslint-plugin-react": "^7.28.0",
     "eslint-plugin-rulesdir": "^0.2.1",

package/src/configs/components/dataView.json

@@ -144,7 +144,7 @@
   "meta": {
     "title": "数据详情",
     "category": "数据容器",
-    "description": "原数据视图组件，适用于以展示多条数据详细内容的场景，不借助变量绑定，即可获取数据模型中的数据。",
+    "description": "适用于以展示多条数据详细内容的场景，不借助变量绑定，即可获取数据模型中的数据。",
     "componentOrder": 1000,
     "icon": "//imgcache.qq.com/qcloud/lowcode/static/ide/left-material-icon/DataView.svg"
   },

package/src/configs/components/listView.json

@@ -267,7 +267,7 @@
   "meta": {
     "title": "数据列表",
     "category": "数据容器",
-    "description": "原数据列表组件，适用于以列表形式展示多条数据的场景，不借助变量绑定，即可获取数据模型中的数据。",
+    "description": "适用于以列表形式展示多条数据的场景，不借助变量绑定，即可获取数据模型中的数据。",
     "componentOrder": 1000,
     "icon": "//imgcache.qq.com/qcloud/lowcode/static/ide/left-material-icon/ListView.svg"
   },

package/src/configs/components/lottery.json

@@ -0,0 +1,151 @@
+{
+  "$schema": "https://comp-public-1303824488.cos.ap-shanghai.myqcloud.com/schema/lcds_component.json",
+  "data": {
+    "properties": {
+      "prizeList": {
+        "type": "array",
+        "title": "奖品设置",
+        "description": "仅前8项奖品会展示在组件中",
+        "items": {
+          "type": "object",
+          "title": "prizeList",
+          "default": {
+            "title": "奖品名称",
+            "image": "https://imgcache.qq.com/qcloud/tcloud_dtc/static/static_source_business/0aa4dc06-e375-45c2-8ec2-0461a83d5d4a.png"
+          },
+          "properties": {
+            "title": {
+              "type": "string",
+              "title": "奖品名称",
+              "default": "一等奖"
+            },
+            "image": {
+              "type": "image",
+              "title": "奖品图片",
+              "default": ""
+            }
+          }
+        },
+        "default": [
+          {
+            "title": "8元优惠券",
+            "image": "https://imgcache.qq.com/qcloud/tcloud_dtc/static/static_source_business/70122750-ba8b-4ac7-be71-c2300f1f8c6f.png"
+          },
+          {
+            "title": "劳动节水杯",
+            "image": "https://imgcache.qq.com/qcloud/tcloud_dtc/static/static_source_business/c2842881-5e15-409d-8dd3-352205abe38c.png"
+          },
+          {
+            "title": "10元优惠券",
+            "image": "https://imgcache.qq.com/qcloud/tcloud_dtc/static/static_source_business/b99c4350-c619-4fff-90e0-1980075e0417.png"
+          },
+          {
+            "image": "https://imgcache.qq.com/qcloud/tcloud_dtc/static/static_source_business/7cefce40-73e4-4cdd-aa30-d178a4cb6624.png",
+            "title": "旅行背包"
+          },
+          {
+            "title": "谢谢参与",
+            "image": "https://imgcache.qq.com/qcloud/tcloud_dtc/static/static_source_business/0aa4dc06-e375-45c2-8ec2-0461a83d5d4a.png"
+          },
+          {
+            "title": "20积分",
+            "image": "https://imgcache.qq.com/qcloud/tcloud_dtc/static/static_source_business/de35f413-6971-4ab3-a816-9c488e169d46.png"
+          },
+          {
+            "title": "流量券",
+            "image": "https://imgcache.qq.com/qcloud/tcloud_dtc/static/static_source_business/3c0ff8a2-8362-4219-875d-0778d65bba80.png"
+          },
+          {
+            "title": "10元优惠券",
+            "image": "https://imgcache.qq.com/qcloud/tcloud_dtc/static/static_source_business/d11056cc-b8a1-4d50-b993-65d8a434802f.png"
+          }
+        ],
+        "x-index": 10,
+        "x-component": "list-bind-switch",
+        "x-component-props": {
+          "origin-component": "list"
+        },
+        "x-props": {
+          "data-withBindMeta": true
+        },
+        "x-linkages": [
+          {
+            "type": "value:schema",
+            "schema": {
+              "x-component-props": {
+                "options": "{{ $value.map((title, index) => ({label: '奖品名称' + (index + 1), value: index}) ) }}"
+              }
+            },
+            "target": "selectedIndex"
+          }
+        ]
+      },
+      "enablePrize": {
+        "type": "boolean",
+        "title": "启动抽奖",
+        "x-index": 20,
+        "default": true
+      },
+      "prizeResult": {
+        "type": "string",
+        "title": "抽奖结果",
+        "x-index": 30,
+        "default": "1",
+        "description": "以左上角为起始位置，顺时针确定8个奖品位置分别1-8",
+        "enum": [
+          {
+            "label": "1",
+            "value": "1"
+          },
+          {
+            "label": "2",
+            "value": "2"
+          },
+          {
+            "label": "3",
+            "value": "3"
+          },
+          {
+            "label": "4",
+            "value": "4"
+          },
+          {
+            "label": "5",
+            "value": "5"
+          },
+          {
+            "label": "6",
+            "value": "6"
+          },
+          {
+            "label": "7",
+            "value": "7"
+          },
+          {
+            "label": "8",
+            "value": "8"
+          }
+        ]
+      }
+    }
+  },
+  "events": [
+    {
+      "name": "clickLotteryButton",
+      "title": "开始抽奖"
+    },
+    {
+      "name": "finishLottery",
+      "title": "开奖",
+      "value": "event.detail.prize"
+    }
+  ],
+  "meta": {
+    "title": "九宫格抽奖",
+    "description": "九宫格抽奖",
+    "category": "高级",
+    "componentOrder": 101,
+    "icon": "//imgcache.qq.com/qcloud/lowcode/static/ide/left-material-icon/NavLayout.svg",
+    "visible": ["APP"]
+  }
+}

package/src/configs/index.js

@@ -48,6 +48,7 @@ import PhoneCode from './components/wxOpenApi/phoneCode.json';
 import Share from './components/wxOpenApi/share.json';
 import UserInfo from './components/wxOpenApi/userInfo.json';
 
+import Lottery from './components/lottery.json';
 export const components = {
   Button,
   Text,
@@ -94,6 +95,7 @@ export const components = {
   PhoneCode,
   Share,
   UserInfo,
+  Lottery,
 };
 
 export const actions = {

package/src/index.js

@@ -1,2 +1,4 @@
+/* eslint-disable import/export */
+
 export * from './web/index';
 export { default as default } from './web/index';

package/src/mp/components/button/index.wxml

@@ -13,7 +13,6 @@
  bindlaunchapp="launchApp"
  bindopensetting="openSetting"
 >
-	{{text ? text : ''}}
+	<block>{{text ? text : ''}}</block>
 	<slot name="contentSlot" wx:if="{{!text}}" />
 </button>
-

package/src/mp/components/form/form/index.wxml

@@ -1,6 +1,5 @@
-<view class="weui-form weda-ui {{className}} {{style}}">
+<view class="weui-form weda-ui {{className}}" style="{{style}}">
 	<view class="weui-cells__group weui-cells__group_form">
 		<slot name="contentSlot" />
 	</view>
 </view>
-

package/src/mp/components/form/select/index.js

@@ -1,26 +1,11 @@
 import classNames from '../../../utils/classnames';
 import dayjs from '../../../utils/dayjs.min.js';
-import { getRegionTree, buildDisplayValue } from './region/index';
-import { provinces, cities, regions } from './region/index';
+import { getRegionTree, buildDisplayValue , provinces, cities, regions } from './region/index';
 import destr from '../../../utils/destr';
 import { callDataSourceApi, callWedaApi } from '../../../utils/tcb';
+import { REL_DICT } from '../../../utils/constant';
+import { isNil } from '../../../utils/lodash';
 
-// 处理where筛选条件
-const isNull = (val) => [undefined, null].includes(val);
-const REL_DICT = {
-  equal: 'eq', // 等于
-  unequal: 'neq', // 不等于
-  include: 'search', // 包含
-  exclude: '_exclude', // 不包含
-  begin_with: '_begin_with', // 开头是
-  greater: 'gt', // 大于
-  greater_or_equal: 'gte', // 大于等于
-  bigger_or_equal: 'gte', //大于等于
-  less: 'lt', // 小于
-  less_or_equal: 'lte', // 小于等于
-  in: 'in', // 多选值
-  not_in: 'nin', // 不在多选值
-};
 const getWhereList = (where) => {
   let result = [];
   Array.isArray(where) &&
@@ -36,7 +21,7 @@ const getWhereList = (where) => {
             rel = 'regex';
             val = `^((?!${val}).)*$`;
           }
-          if (item2?.logic !== 'or' && item2?.key && rel && !isNull(val)) {
+          if (item2?.logic !== 'or' && item2?.key && rel && !isNil(val)) {
             result.push({ key: item2.key, rel, val });
           }
         });
@@ -397,7 +382,10 @@ Component({
     async getProvince() {
       const { regionType, defaultMutiRegion } = this.properties;
       const changeData = await getRegionTree(defaultMutiRegion || '');
-      this.triggerEvent('change', changeData);
+      //限制渲染时change事件触发，否则会有初始数据被覆盖问题
+      if (changeData?.result.length > 0) {
+        this.triggerEvent('change', changeData);
+      }
       var provinceList = [...provinces];
       var provinceArr = provinces.map((item) => { return { value: item.Value, code: item.Code }; }); //保存省级名称
       this.setData({

package/src/mp/components/form/select/region/index.js

@@ -1,8 +1,8 @@
 import { callWedaApi } from '../../../../utils/tcb';
 
-export const provinces = [];
-export const cities = [];
-export const regions = [];
+export let provinces = [];
+export let cities = [];
+export let regions = [];
 export let regionData = [];
 /**
  *  获取运行态地区数据
@@ -26,6 +26,9 @@ export const getRegionTree = async function (defaultValue) {
   return changeResult(defaultValue, regionData);
 };
 export const splitAreaData = (areaData) => {
+  provinces = [];
+  cities = [];
+  regions = [];
   areaData.forEach(item => {
     if (!item.Deprecated) {
       if (item?.Type == 1) {

package/src/mp/components/listView/index.js

@@ -1,17 +1,6 @@
-const isNull = (val) => [undefined, null].includes(val);
-const REL_DICT = {
-  equal: 'eq', // 等于
-  unequal: 'neq', // 不等于
-  include: 'search', // 包含
-  exclude: '_exclude', // 不包含
-  begin_with: '_begin_with', // 开头是
-  greater: 'gt', // 大于
-  greater_or_equal: 'gte', // 大于等于
-  less: 'lt', // 小于
-  less_or_equal: 'lte', // 小于等于
-  in: 'in', // 多选值
-  not_in: 'nin', // 不在多选值
-};
+import { REL_DICT } from '../../utils/constant';
+import { isNil } from '../../utils/lodash';
+
 const ORDERTYPE = ['asc', 'desc'];
 const getWhereList = (where) => {
   let result = [];
@@ -28,7 +17,7 @@ const getWhereList = (where) => {
             rel = 'regex';
             val = `^((?!${val}).)*$`;
           }
-          if (item2?.logic !== 'or' && item2?.key && rel && !isNull(val)) {
+          if (item2?.logic !== 'or' && item2?.key && rel && !isNil(val)) {
             result.push({ key: item2.key, rel, val });
           }
         });
@@ -114,7 +103,7 @@ Component({
       const tcbParams = {};
 
       // tcb分页参数
-      if (!isNull(pageNo) && !isNull(pageSize)) {
+      if (!isNil(pageNo) && !isNil(pageSize)) {
         tcbParams['pageNo'] = pageNo;
         tcbParams['pageSize'] = pageSize;
       }

package/src/mp/components/lottery/index.js

@@ -0,0 +1,270 @@
+Component({
+  /** 页面的初始数据 */
+  data: {
+    lotteryList: [
+      {
+        src: '',
+        desc: '',
+        actived: true,
+        selected: false,
+      },
+      {
+        src: '',
+        desc: '',
+        actived: false,
+        selected: false,
+      },
+      {
+        src: '',
+        desc: '',
+        actived: false,
+        selected: true,
+      },
+      {
+        src: '',
+        desc: '',
+        actived: false,
+        selected: false,
+      },
+      {
+        src: '',
+        desc: '',
+        actived: false,
+        selected: false,
+      },
+      {
+        src: '',
+        desc: '',
+        actived: false,
+        selected: false,
+      },
+      {
+        src: '',
+        desc: '',
+        actived: false,
+        selected: false,
+      },
+      {
+        src: '',
+        desc: '',
+        actived: false,
+        selected: false,
+      },
+    ],
+    dotList: [
+      {
+        single: true,
+        position: 'left-top',
+        direction: '',
+        list: [],
+      },
+      {
+        single: true,
+        position: 'left-bottom',
+        direction: '',
+        list: [],
+      },
+      {
+        single: true,
+        position: 'right-top',
+        direction: '',
+        list: [],
+      },
+      {
+        single: true,
+        position: 'right-bottom',
+        direction: '',
+        list: [],
+      },
+      {
+        single: false,
+        position: 'top',
+        direction: 'horizontal',
+        list: ['1', '2', '3', '4', '5'],
+      },
+      {
+        single: false,
+        position: 'bottom',
+        direction: 'horizontal',
+        list: ['1', '2', '3', '4', '5'],
+      },
+      {
+        single: false,
+        position: 'left',
+        direction: 'vertical',
+        list: ['1', '2', '3', '4', '5'],
+      },
+      {
+        single: false,
+        position: 'right',
+        direction: 'vertical',
+        list: ['1', '2', '3', '4', '5'],
+      },
+    ],
+    btnActived: false,
+    clickLotteryEnable: true,
+    checkedIndex: -1,
+  },
+  options: {
+    virtualHost: true,
+  },
+  properties: {
+    id: {
+      type: String,
+      value: '',
+    },
+    className: {
+      type: String,
+      value: '',
+    },
+    style: {
+      type: String,
+      value: '',
+    },
+    prizeResult: {
+      type: String,
+      value: '',
+    },
+    enablePrize: {
+      value: true,
+      type: Boolean,
+    },
+    prizeList: {
+      type: Array,
+      value: [],
+    },
+  },
+  methods: {
+    clickLotteryButton: function () {
+      const { lotteryList } = this.data;
+      const { prizeResult, enablePrize, clickLotteryEnable } = this.properties;
+      //是否正在抽奖
+      if (clickLotteryEnable) {
+        this.setData({
+          clickLotteryEnable: false,
+        });
+      } else {
+        return;
+      }
+      //支持抽奖
+      if (!enablePrize) {
+        return;
+      }
+      //触发外部事件
+      this.triggerEvent('clickLotteryButton');
+      //动画旋转次数
+      let count = 0;
+      //是否超时
+      let isTimeout = false;
+      //开启循环抽奖
+      let intervalId = setInterval(() => {
+        //再次获取抽奖结果
+        let prizeResultNew = this.properties.prizeResult;
+        if (prizeResultNew == null || !this.properties.enablePrize) {
+          //如果是禁止，立马停止
+          clearInterval();
+          this.setData({
+            clickLotteryEnable: true,
+          });
+          return;
+        }
+        //触发抽奖动画
+        let index = count % lotteryList.length;
+        let tempList = [];
+        lotteryList.forEach((item, i) => {
+          if (index === i) {
+            item.actived = true;
+          } else {
+            item.actived = false;
+          }
+          item.selected = false;
+          tempList.push(item);
+          //如果超时，则终止
+          if (isTimeout) {
+            let reg = /^\+?[1-9]\d*$/;
+            if (!reg.test(prizeResult)) {
+              isTimeout = false;
+              clearInterval(intervalId);
+              wx.showToast({
+                title: '网络异常',
+                icon: 'none',
+              });
+            }
+            if (index === parseInt(prizeResultNew) - 1) {
+              isTimeout = false;
+              this.setData({
+                checkedIndex: index,
+              });
+              clearInterval(intervalId);
+              setTimeout(() => {
+                this.triggerEvent('finishLottery', {
+                  prize: prizeResultNew,
+                  result: lotteryList[i],
+                });
+              }, 600);
+            }
+            setTimeout(() => {
+              //防止暴力点击误触，影响抽奖可用次数结果，延迟1.5s，才可点击
+              this.setData({
+                clickLotteryEnable: true,
+              });
+            }, 1500);
+          }
+        });
+        let checkedIndex = this.data.checkedIndex;
+        this.setData({
+          btnActived: checkedIndex < 0,
+          lotteryList:
+            checkedIndex < 0
+              ? tempList
+              : tempList.map((item, index) => {
+                  if (index === checkedIndex) {
+                    item.selected = true;
+                  } else {
+                    item.selected = false;
+                  }
+                  item.actived = false;
+                  return item;
+                }),
+        });
+        //设置默认数据
+        this.setData({
+          checkedIndex: -1,
+        });
+        count++;
+      }, 150);
+      setTimeout(() => {
+        isTimeout = true;
+      }, 3000);
+    },
+  },
+  observers: {
+    prizeList: function (prizeList) {
+      //获取初始化默认数据，数据不足8条设置默认，超过8条获取前8条
+      let list = [];
+      for (let i = 0; i < 8; i++) {
+        if (i < prizeList.length) {
+          let prize = prizeList[i];
+          list.push({
+            idx: i + 1,
+            selected: false,
+            actived: false,
+            desc: prize.title,
+            src: prize.image,
+          });
+        } else {
+          list.push({
+            idx: i + 1,
+            selected: false,
+            actived: false,
+            desc: '',
+            src: '',
+          });
+        }
+      }
+      this.setData({
+        lotteryList: list,
+      });
+    },
+  },
+});

package/src/mp/components/lottery/index.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "styleIsolation": "shared"
+}

package/src/mp/components/lottery/index.wxml

@@ -0,0 +1,43 @@
+<view class="weda-lottery">
+  <view class="weda-lottery__wrap">
+    <block wx:for="{{dotList}}" wx:key="dotIndex" wx:for-item="dot">
+      <view wx-if="{{dot.single}}" class="weda-lottery__dot-single weda-lottery__dot-{{dot.position}}"></view>
+      <block wx-if="{{!dot.single}}">
+        <view class="weda-lottery__dot-{{dot.position}}">
+          <view class="weda-lottery__dot weda-lottery__dot-{{dot.direction}}">
+            <block wx:for="{{dot.list}}" wx:key="index" wx:for-item="item">
+              <view class="weda-lottery__dot-item"></view>
+            </block>
+          </view>
+        </view>
+      </block>
+    </block>
+    <view class="weda-lottery__inner">
+      <view class="weda-lottery__inner-wrap">
+        <view class="weda-lottery__list">
+          <block wx:for="{{lotteryList}}" wx:key="index" wx:for-item="item">
+            <view key="{{index}}" class="weda-lottery__turntable-item {{item.actived ? 'is-actived' : ''}}, {{item.selected ? 'is-selected' : ''}}">
+              <view class="weda-lottery__turntable-cell">
+                <view class="weda-lottery__turntable-cell-image" wx-if="{{item.src}}">
+                  <image mode="aspectFit" src="{{item.src}}" alt="{{item.desc}}" class="weda-lottery__turntable-cell-icon"></image>
+                </view>
+                <view class="weda-lottery__turntable-cell-desc" wx-if="{{item.desc}}">
+                  {{item.desc}}
+                </view>
+              </view>
+            </view>
+          </block>
+        </view>
+        <view class="weda-lottery__turntable-btn {{btnActived ? 'is-actived' : ''}}">
+          <view class="weda-lottery__btn-inner" bindtap="{{clickLotteryEnable ? 'clickLotteryButton' : ''}}">
+            <view class="weda-lottery__btn">
+              <view class="weda-lottery__btn-image">
+                <text class="weda-lottery__btn-text">开始抽奖</text>
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</view>