@cloudbase/weda-ui 1.0.21 → 2.0.9

package/src/mp/components/form/uploader/weui-uploader.js

@@ -0,0 +1,209 @@
+Component({
+    options: {
+        addGlobalClass: true,
+        virtualHost: true
+    },
+    properties: {
+        title: {
+            type: String,
+            value: '图片上传'
+        },
+        sizeType: {
+            type: Array,
+            value: ['original', 'compressed']
+        },
+        sourceType: {
+            type: Array,
+            value: ['album', 'camera']
+        },
+        maxSize: {
+            type: Number,
+            value: 5 * 1024 * 1024
+        },
+        maxCount: {
+            // 最多上传多少个文件
+            type: Number,
+            value: 1
+        },
+        files: {
+            // 当前的图片列表, {url, error, loading}
+            type: Array,
+            value: [],
+            observer(newVal) {
+                this.setData({
+                    currentFiles: newVal
+                });
+            }
+        },
+        select: {
+            // 过滤某个文件
+            type: null,
+            value: () => { }
+        },
+        upload: {
+            // 返回Promise的一个文件上传的函数
+            type: null,
+            value: null
+        },
+        tips: {
+            type: String,
+            value: ''
+        },
+        layout: {
+          type: String,
+          value: 'horizontal'
+        },
+        extClass: {
+            type: String,
+            value: ''
+        },
+        showDelete: {
+            // 是否显示delete按钮
+            type: Boolean,
+            value: true
+        }
+    },
+    data: {
+        currentFiles: [],
+        showPreview: false,
+        previewImageUrls: []
+    },
+    ready() { },
+    methods: {
+        previewImage(e) {
+            const { index } = e.currentTarget.dataset;
+            const previewImageUrls = [];
+            this.data.files.forEach((item) => {
+                previewImageUrls.push(item.url);
+            });
+            this.setData({
+                previewImageUrls,
+                previewCurrent: index,
+                showPreview: true
+            });
+        },
+        chooseImage() {
+            if (this.uploading)
+                return;
+            wx.chooseImage({
+                count: this.data.maxCount - this.data.files.length,
+                sizeType: this.data.sizeType,
+                sourceType: this.data.sourceType,
+                success: (res) => {
+                    // console.log('chooseImage resp', res)
+                    // 首先检查文件大小
+                    let invalidIndex = -1;
+                    // @ts-ignore
+                    res.tempFiles.forEach((item, index) => {
+                        if (item.size > this.data.maxSize) {
+                            invalidIndex = index;
+                        }
+                    });
+                    if (typeof this.data.select === 'function') {
+                        const ret = this.data.select(res);
+                        if (ret === false) {
+                            return;
+                        }
+                    }
+                    if (invalidIndex >= 0) {
+                        this.triggerEvent('fail', {
+                            type: 1,
+                            errMsg: `chooseImage:fail size exceed ${this.data.maxSize}`,
+                            total: res.tempFilePaths.length,
+                            index: invalidIndex
+                        }, {});
+                        return;
+                    }
+                    // 获取文件内容
+                    const mgr = wx.getFileSystemManager();
+                    const contents = res.tempFilePaths.map((item) => {
+                        // @ts-ignore
+                        const fileContent = mgr.readFileSync(item);
+                        return fileContent;
+                    });
+                    const obj = {
+                        tempFilePaths: res.tempFilePaths,
+                        tempFiles: res.tempFiles,
+                        contents
+                    };
+                    // 触发选中的事件，开发者根据内容来上传文件，上传了把上传的结果反馈到files属性里面
+                    this.triggerEvent('select', obj, {});
+                    const files = res.tempFilePaths.map((item, i) => ({
+                        loading: true,
+                        url: res.tempFilePaths[i] ||
+                            `data:image/jpg;base64,${wx.arrayBufferToBase64(contents[i])}`
+                    }));
+                    if (!files || !files.length)
+                        return;
+                    if (typeof this.data.upload === 'function') {
+                        const len = this.data.files.length;
+                        const newFiles = this.data.files.concat(files);
+                        this.setData({
+                            files: newFiles,
+                            currentFiles: newFiles
+                        });
+                        this.loading = true;
+                        this.data
+                            .upload(obj)
+                            .then((json) => {
+                            this.loading = false;
+                            if (json.urls) {
+                                const oldFiles = this.data.files;
+                                json.urls.forEach((url, index) => {
+                                    oldFiles[len + index].url = url;
+                                    oldFiles[len + index].loading = false;
+                                });
+                                this.setData({
+                                    files: oldFiles,
+                                    currentFiles: newFiles
+                                });
+                                this.triggerEvent('success', json, {});
+                            }
+                            else {
+                                this.triggerEvent('fail', {
+                                    type: 3,
+                                    errMsg: 'upload file fail, urls not found'
+                                }, {});
+                            }
+                        })
+                            .catch((err) => {
+                            this.loading = false;
+                            const oldFiles = this.data.files;
+                            res.tempFilePaths.forEach((item, index) => {
+                                oldFiles[len + index].error = true;
+                                oldFiles[len + index].loading = false;
+                            });
+                            this.setData({
+                                files: oldFiles,
+                                currentFiles: newFiles
+                            });
+                            this.triggerEvent('fail', {
+                                type: 3,
+                                errMsg: 'upload file fail',
+                                error: err
+                            }, {});
+                        });
+                    }
+                },
+                fail: (fail) => {
+                    if (fail.errMsg.indexOf('chooseImage:fail cancel') >= 0) {
+                        this.triggerEvent('cancel', {}, {});
+                        return;
+                    }
+                    fail.type = 2;
+                    this.triggerEvent('fail', fail, {});
+                }
+            });
+        },
+        deletePic(e) {
+            const index = e.detail.index;
+            const files = this.data.files;
+            const file = files.splice(index, 1);
+            this.setData({
+                files,
+                currentFiles: files
+            });
+            this.triggerEvent('delete', { index, item: file[0] });
+        }
+    }
+});

package/src/mp/components/form/uploader/weui-uploader.json

@@ -0,0 +1,7 @@
+{
+    "component": true,
+    "usingComponents": {
+        "mp-gallery": "weui-miniprogram/gallery/gallery"
+    },
+    "styleIsolation": "shared"
+}

package/src/mp/components/form/uploader/weui-uploader.wxml

@@ -0,0 +1,45 @@
+<view class="weui-uploader {{extClass}}">
+    <view class="weui-uploader__hd {{layout}}">
+        <view class="weda-formcells__label weui-cell">
+            <block wx:if="{{layout === 'horizontal'}}">
+                <view class="">
+                    <view class="weui-uploader__title">{{title}}</view>
+                    <view class="weui-uploader__info" wx:if="{{maxCount > 1}}">{{currentFiles.length}}/{{maxCount}}</view>
+                </view>
+                <label wx:if="{{true}}" class="weda-formcells__flag">*</label>
+            </block>
+            <block wx:if="{{layout === 'vertical'}}">
+                <view class="weui-uploader__label">
+                    <view class="weui-uploader__title">{{title}}</view>
+                    <label wx:if="{{true}}" class="weda-formcells__flag">*</label>
+                </view>
+                <view class="weui-uploader__info" wx:if="{{maxCount > 1}}">{{currentFiles.length}}/{{maxCount}}</view>
+            </block>
+        </view>
+    </view>
+    <view class="weui-uploader__bd">
+        <view class="weui-uploader__files">
+            <block wx:for="{{currentFiles}}" wx:key="*this">
+                <view wx:if="{{item.error}}" data-index="{{index}}" bindtap="previewImage" class="weui-uploader__file weui-uploader__file_status">
+                    <image class="weui-uploader__img" src="{{item.url}}" mode="aspectFill" />
+                    <view class="weui-uploader__file-content">
+                        <icon type="warn" size="23" color="#F43530"></icon>
+                    </view>
+                </view>
+                <view wx:elif="{{item.loading}}" data-index="{{index}}" bindtap="previewImage" class="weui-uploader__file weui-uploader__file_status">
+                    <image class="weui-uploader__img" src="{{item.url}}" mode="aspectFill" />
+                    <view class="weui-uploader__file-content">
+                        <view class="weui-loading"></view>
+                    </view>
+                </view>
+                <view wx:else class="weui-uploader__file" data-index="{{index}}" bindtap="previewImage">
+                    <image class="weui-uploader__img" src="{{item.url}}" mode="aspectFill" />
+                </view>
+            </block>
+        </view>
+        <view wx:if="{{currentFiles.length < maxCount}}" class="weui-uploader__input-box" hover-class="weui-active">
+            <view class="weui-uploader__input" bindtap="chooseImage"></view>
+        </view>
+    </view>
+    <mp-gallery class="gallery" hide-on-click="{{true}}" show-delete="{{showDelete}}" show="{{showPreview}}" binddelete="deletePic" img-urls="{{previewImageUrls}}" current="{{previewCurrent}}"></mp-gallery>
+</view>

package/src/mp/components/form/uploader/weui-uploader.wxss

@@ -0,0 +1 @@
+/* materials/gsd-h5-react/components/form/uploader/weui-uploader.wxss */

package/src/mp/components/form/uploaderFile/index.wxss

@@ -5,7 +5,8 @@
 }
 .weda-uploader-files__hd {
   width: 100%;
-  padding: 24px 20px 8px 20px;
+  padding: 16px;
+  padding-left: 0;
   display: flex;
   background-color: #ffffff;
 }
@@ -20,9 +21,8 @@
 .weda-uploader-files__title {
   font-size: 14px;
   line-height: 20px;
-  color: #000;
-  margin-right: 20px;
-  padding-top: 6px;
+  padding: 16px;
+  width: 130px;
 }
 .weda-uploader-files__btn {
   margin: 0;

package/src/mp/components/image/index.wxss

@@ -32,7 +32,8 @@
 }
 
 .weda-image-error {
-  position: relative;
+  position: relative !important;
+  display: inline-block !important;
 }
 
 .weda-image-error::before {
@@ -43,4 +44,4 @@
   top: 0;
   width: 100%;
   height: 100%;
-}
+}

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>