@cloudbase/weda-ui-mp 0.2.20

package/components/lottery/index.wxml

@@ -0,0 +1,41 @@
+<view class="weda-lottery" style="{{style}}">
+  <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">开始\n抽奖</text>
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</view>

package/components/lottery/index.wxss

@@ -0,0 +1,340 @@
+.weda-lottery {
+  width: 100%;
+  position: relative;
+}
+
+.weda-lottery::before {
+  float: left;
+  padding-top: 100%;
+  content: '';
+}
+.weda-lottery::after {
+  display: block;
+  content: '';
+  clear: both;
+}
+
+.weda-lottery .weda-lottery__wrap {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  background: #ff465c;
+  border: 1px solid rgba(255, 255, 255, 0.6);
+  box-shadow: inset 0px 0px 4px rgba(255, 255, 255, 0.5);
+  border-radius: 10px;
+  box-sizing: border-box;
+}
+
+.weda-lottery .weda-lottery__dot-top {
+  position: absolute;
+  top: 4px;
+  left: calc((100% - 217px) / 2);
+}
+
+.weda-lottery .weda-lottery__dot-bottom {
+  position: absolute;
+  bottom: 4px;
+  left: calc((100% - 217px) / 2);
+}
+
+.weda-lottery .weda-lottery__dot-left {
+  position: absolute;
+  left: 4px;
+  top: calc((100% - 217px) / 2);
+}
+
+.weda-lottery .weda-lottery__dot-right {
+  position: absolute;
+  right: 4px;
+  top: calc((100% - 217px) / 2);
+}
+
+.weda-lottery .weda-lottery__dot {
+  display: flex;
+}
+
+.weda-lottery .weda-lottery__dot-horizontal {
+  flex-direction: row;
+}
+
+.weda-lottery .weda-lottery__dot-vertical {
+  flex-direction: column;
+}
+
+.weda-lottery .weda-lottery__dot .weda-lottery__dot-item,
+.weda-lottery .weda-lottery__dot-single {
+  width: 9px;
+  height: 9px;
+  box-shadow: 0px 0px 4px rgba(255, 255, 255, 0.3);
+  border-radius: 50%;
+  background: #ffffff;
+}
+
+.weda-lottery .weda-lottery__dot .weda-lottery__dot-item:nth-child(odd) {
+  background: #ffee52;
+}
+
+.weda-lottery .weda-lottery__dot .weda-lottery__dot-item:nth-child(even) {
+  background: #ffffff;
+}
+
+.weda-lottery .weda-lottery__dot-horizontal .weda-lottery__dot-item {
+  margin-right: 43px;
+}
+
+.weda-lottery .weda-lottery__dot-horizontal .weda-lottery__dot-item:last-child {
+  margin-right: 0;
+}
+
+.weda-lottery .weda-lottery__dot-vertical .weda-lottery__dot-item {
+  margin-bottom: 43px;
+}
+
+.weda-lottery .weda-lottery__dot-vertical .weda-lottery__dot-item:last-child {
+  margin-bottom: 0;
+}
+
+.weda-lottery .weda-lottery__dot-left-top {
+  position: absolute;
+  top: 9px;
+  left: 6px;
+}
+
+.weda-lottery .weda-lottery__dot-right-top {
+  position: absolute;
+  top: 9px;
+  right: 6px;
+}
+
+.weda-lottery .weda-lottery__dot-left-bottom {
+  position: absolute;
+  left: 6px;
+  bottom: 9px;
+}
+
+.weda-lottery .weda-lottery__dot-right-bottom {
+  position: absolute;
+  right: 6px;
+  bottom: 9px;
+}
+
+.weda-lottery .weda-lottery__inner {
+  padding: 18px;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.weda-lottery .weda-lottery__inner .weda-lottery__inner-wrap {
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+  background: linear-gradient(180deg, #dd0d00 0%, #d80027 100%);
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  box-shadow: inset 0px 0px 4px rgba(255, 255, 255, 0.5);
+  border-radius: 10px;
+  height: 100%;
+}
+
+.weda-lottery .weda-lottery__inner .weda-lottery__list {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+  box-sizing: border-box;
+}
+
+.weda-lottery .weda-lottery__inner .weda-lottery__turntable-item {
+  position: absolute;
+  width: calc((100% - 32px) / 3);
+  height: calc((100% - 32px) / 3);
+  font-size: 0;
+  text-align: center;
+  background: #fff8ee;
+  box-shadow: inset 0px -2px 0px #ffddbd;
+  border-radius: 8px;
+  box-sizing: border-box;
+}
+
+.weda-lottery .weda-lottery__inner .weda-lottery__turntable-item.is-actived {
+  background: #fff8ee;
+  box-shadow: 0px 0px 6px #ffffff;
+}
+
+.weda-lottery .weda-lottery__inner .weda-lottery__turntable-item.is-selected {
+  background: #ff6666;
+  box-shadow: inset 0px -2px 0px #ffa4a4;
+}
+
+.weda-lottery .weda-lottery__inner .weda-lottery__turntable-item:first-child {
+  top: 8px;
+  left: 8px;
+}
+
+.weda-lottery .weda-lottery__inner .weda-lottery__turntable-item:nth-child(2) {
+  top: 8px;
+  left: calc((100% - 32px) / 3 + 16px);
+}
+
+.weda-lottery .weda-lottery__inner .weda-lottery__turntable-item:nth-child(3) {
+  top: 8px;
+  right: 8px;
+}
+
+.weda-lottery .weda-lottery__inner .weda-lottery__turntable-item:nth-child(4) {
+  top: calc((100% - 32px) / 3 + 16px);
+  right: 8px;
+}
+
+.weda-lottery .weda-lottery__inner .weda-lottery__turntable-item:nth-child(5) {
+  bottom: 8px;
+  right: 8px;
+}
+
+.weda-lottery .weda-lottery__inner .weda-lottery__turntable-item:nth-child(6) {
+  bottom: 8px;
+  left: calc((100% - 32px) / 3 + 16px);
+}
+
+.weda-lottery .weda-lottery__inner .weda-lottery__turntable-item:nth-child(7) {
+  bottom: 8px;
+  left: 8px;
+}
+
+.weda-lottery .weda-lottery__inner .weda-lottery__turntable-item:nth-child(8) {
+  bottom: calc((100% - 32px) / 3 + 16px);
+  left: 8px;
+}
+
+.weda-lottery .weda-lottery__inner .weda-lottery__turntable-cell {
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  max-height: 100%;
+  box-sizing: border-box;
+  border-width: 4px;
+  border-style: solid;
+  border-color: transparent;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 2.5px 8px 2.5px;
+}
+
+.weda-lottery
+  .weda-lottery__inner
+  .weda-lottery__turntable-item.is-actived
+  .weda-lottery__turntable-cell {
+  border-color: #ffe05f;
+}
+
+.weda-lottery .weda-lottery__inner .weda-lottery__turntable-cell-image {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1 1 0;
+  overflow: hidden;
+}
+
+.weda-lottery .weda-lottery__inner .weda-lottery__turntable-cell-icon {
+  display: block;
+  width: 40px;
+  height: 40px;
+  overflow: hidden;
+}
+
+.weda-lottery .weda-lottery__inner .weda-lottery__turntable-cell-desc {
+  margin-top: 6px;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 17px;
+  text-align: center;
+  color: #ba0000;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  width: 100%;
+  flex: 0 0 auto;
+}
+
+.weda-lottery
+  .weda-lottery__inner
+  .weda-lottery__turntable-item.is-selected
+  .weda-lottery__turntable-cell-desc {
+  color: #ffffff;
+}
+
+.weda-lottery .weda-lottery__turntable-btn {
+  z-index: 2;
+  position: absolute;
+  width: calc((100% - 32px) / 3);
+  height: calc((100% - 32px) / 3);
+  top: calc((100% - 32px) / 3 + 16px);
+  left: calc((100% - 32px) / 3 + 16px);
+  background: linear-gradient(180deg, #ffee81 0%, #ffd646 100%);
+  box-shadow: inset 0px -2px 0px #ff7a00;
+  border-radius: 50%;
+}
+
+.weda-lottery .weda-lottery__turntable-btn.is-actived {
+  background: linear-gradient(180deg, #ffee81 0%, #ffd646 100%);
+  box-shadow: inset 0px 2px 0px #ffffff;
+}
+
+.weda-lottery .weda-lottery__btn-inner {
+  padding: 9px;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.weda-lottery .weda-lottery__btn {
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(180deg, #ff922d 0%, #ff3c76 100%);
+  box-shadow: inset 0px 0px 8px rgba(234, 27, 53, 0.5);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.weda-lottery .weda-lottery__turntable-btn.is-actived .weda-lottery__btn {
+  background: linear-gradient(180deg, #ff922d 0%, #ff3c76 100%);
+  box-shadow: inset 0px 0px 8px rgba(234, 27, 53, 0.5);
+}
+
+.weda-lottery .weda-lottery__btn-image {
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.weda-lottery .weda-lottery__btn-image .weda-lottery__btn-text {
+  font-weight: 600;
+  font-size: 18px;
+  line-height: 22px;
+  text-align: center;
+  color: #ffffff;
+  text-shadow: 0px 0.5px 0px #e42b27;
+  max-height: 100%;
+  display: -webkit-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  width: 100%;
+  height: 100%;
+}
+
+.weda-lottery .weda-lottery__turntable-btn.is-actived .weda-lottery__btn-image {
+  opacity: 0.6;
+}

package/components/modal/index.js

@@ -0,0 +1,66 @@
+import handleEvents from '../../utils/handleEvents';
+import { commonCompBehavior } from '../../utils/common-behavior';
+
+Component({
+  behaviors: [commonCompBehavior],
+  options: {
+    virtualHost: true,
+    multipleSlots: true,
+  },
+  properties: {
+    id: {
+      type: String,
+      value: '',
+    },
+    className: {
+      type: String,
+      value: '',
+    },
+    style: {
+      type: String,
+      value: '',
+    },
+    content: {
+      type: String,
+      value: '',
+    },
+    visible: {
+      type: Boolean,
+      value: true,
+    },
+    isDefaultButton: {
+      type: Boolean,
+      value: true,
+    },
+  },
+  methods: {
+    ...handleEvents([
+      { name: 'close', title: '窗口关闭' },
+      { name: 'confirm', title: '默认按钮点击' },
+    ]),
+    toggle: function (targetValue) {
+      if (targetValue === undefined) {
+        this.setData({ isVisible: !this.data.isVisible });
+      } else {
+        this.setData({ isVisible: Boolean(targetValue) });
+      }
+    },
+  },
+  lifetimes: {
+    attached() {
+      this.setReadonlyAttributes &&
+        this.setReadonlyAttributes({
+          toggle: this.toggle.bind(this),
+          open: this.toggle.bind(this, true),
+          close: this.toggle.bind(this, false),
+        });
+    },
+  },
+  observers: {
+    visible: function (visible) {
+      if (visible !== this.data.isVisible) {
+        this.setData({ isVisible: visible });
+      }
+    },
+  },
+});

package/components/modal/index.json

@@ -0,0 +1,9 @@
+{
+  "component": true,
+  "styleIsolation": "shared",
+  "usingComponents": {
+    "container": "../container/index",
+    "weda-button": "../button/index",
+    "weda-text": "../text/index"
+  }
+}

package/components/modal/index.wxml

@@ -0,0 +1,18 @@
+<container className="lcap-modal {{className}}" style="{{style}}">
+  <container className="container" wx:if="{{isVisible}}">
+    <container className="lcap-modal__mask" />
+    <container className="lcap-modal__dialog {{isVisible ? 'enter' : ''}}">
+      <container className="lcap-modal__close_btn" bindtap="close">
+        <container className="lcap-icon-close lcap-icon" style="font-size: 24px" />
+      </container>
+      <container title="modal-header">
+        <weda-text wx:if="{{(content && content.length > 0)}}" level="0" text="{{content}}" maxLines="{{2}}" userSelect="{{true}}" space="{{false}}" contenteditable="false" />
+        <slot wx:else name="customContent"></slot>
+      </container>
+      <container className="lcap-modal__confirm_btn">
+        <weda-button wx:if="{{isDefaultButton}}" text="确定" bindtap="confirm" className="lcap-modal__default_btn" />
+        <slot wx:else name="customButton"></slot>
+      </container>
+    </container>
+  </container>
+</container>

package/components/modal/index.wxss

@@ -0,0 +1,56 @@
+@import '../../style/weda-ui.wxss';
+
+.lcap-modal .lcap-modal__mask {
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100%;
+  z-index: 1000;
+  position: fixed;
+  background: rgba(0, 0, 0, 0.5);
+  transition: all 300ms ease-out;
+}
+.lcap-modal .lcap-modal__dialog {
+  transform: translateY(100%);
+  transition: all 300ms ease-out;
+  width: 100%;
+  max-height: 90%;
+  min-height: 235px;
+  padding: 7.5px 7.5px 25px;
+  z-index: 2000;
+  border-top-left-radius: 7.5px;
+  border-top-right-radius: 7.5px;
+  background: white;
+  position: fixed;
+  left: 0px;
+  right: 0px;
+  bottom: 0px;
+}
+.lcap-modal .lcap-modal__dialog.enter {
+  padding-top: 32px;
+  transform: translateY(0);
+}
+.lcap-modal .lcap-modal__close_btn {
+  top: 5px;
+  right: 10px;
+  position: absolute;
+  cursor: pointer;
+}
+.lcap-modal .lcap-modal__confirm_btn {
+  padding-bottom: constant(safe-area-inset-bottom);
+  /* 兼容 iOS < 11.2 */
+  padding-bottom: env(safe-area-inset-bottom);
+  /* 兼容 iOS >= 11.2 */
+}
+
+.lcap-modal .lcap-modal__confirm_btn .lcap-modal__default_btn {
+  left: 0px;
+  color: rgb(255, 255, 255);
+  right: 0px;
+  width: 100%;
+  bottom: 0px;
+  position: fixed;
+  background: rgb(50, 129, 248);
+  border-width: 0px;
+  border-radius: 0px;
+}

package/components/navLayout/index.js

@@ -0,0 +1,123 @@
+import { getWedaAPI } from '../../utils/getWedaApi';
+
+Component({
+  options: {
+    virtualHost: true,
+    multipleSlots: true,
+  },
+  properties: {
+    className: {
+      type: String,
+      value: '',
+    },
+    style: {
+      type: String,
+      value: '',
+    },
+    navOption: { type: Array, value: [] },
+    mobileCol: {
+      type: Number,
+      value: 4,
+    },
+    pcCol: {
+      type: Number,
+      value: 4,
+    },
+    iconSize: {
+      type: String,
+      value: 'default',
+    },
+    textColor: {
+      type: String,
+      value: 'rgb(0, 0, 0)"',
+    },
+    fontWeight: {
+      type: String,
+      value: 'normal',
+    },
+    lineHeight: {
+      type: String,
+      value: 'auto',
+    },
+    maxLines: {
+      type: Number,
+      value: 2,
+    },
+    fontSize: {
+      type: Number,
+      value: 14,
+    },
+  },
+  data: {
+    cls: '',
+    optionList: [],
+    titleStyle: '',
+  },
+
+  methods: {
+    navigaTo: function (itemInfo) {
+      const item = itemInfo?.currentTarget?.dataset?.item;
+      if (item.tapStatus == 'inside') {
+        const paramObj = {};
+        if (item.withParams && item?.params) {
+          for (let info of item.params) {
+            paramObj[info.key] = info.value;
+          }
+        }
+        item.paramObj = paramObj;
+        let { app } = getWedaAPI();
+        app.navigateTo({
+          mode: 'weDa',
+          pageId: item?.insideUrl,
+          packageName: item?.packageName || '',
+          params:
+            item?.withParams && item?.params.length > 0 ? item.paramObj : null,
+        });
+      }
+    },
+  },
+  observers: {
+    'navOption,mobileCol': function (navOption, mobileCol) {
+      let list = [];
+      list.length = Math.floor(navOption.length / mobileCol);
+      list.forEach((item, index) => {
+        list[index] = [];
+      });
+      navOption.forEach((item, index) => {
+        if (item.icon.includes('td:')) {
+          item['tdicon'] = item.icon.split(':')[1];
+        }
+        const _index = Math.floor(index / mobileCol);
+        if (!list[_index] || list[_index].length <= 0) {
+          // 保证每个col 的数据都是有的，列入总共7个数据，那么第二行的3， 4，5数据是undefined, 占位
+          list[_index] = Array.apply(null, Array(mobileCol));
+        }
+        list[_index][index - _index * mobileCol] = item;
+      });
+      const optionList = list;
+      this.setData({
+        optionList,
+      });
+    },
+    'textColor,fontWeight,fontSize,lineHeight': function (
+      textColor,
+      fontWeight,
+      fontSize,
+      lineHeight
+    ) {
+      let titleStyle;
+      // 添加文本颜色属性
+      if (textColor !== '') {
+        titleStyle = `color:${textColor}`;
+      }
+
+      // 添加对齐属性
+      if (fontWeight !== '') {
+        titleStyle = `${titleStyle};font-weight: ${fontWeight};font-size:${fontSize}px;line-height:${
+          lineHeight == 'auto' ? 'normal' : lineHeight
+        }`;
+      }
+      this.setData({ titleStyle });
+    },
+  },
+});

package/components/navLayout/index.json

@@ -0,0 +1,8 @@
+{
+  "component": true,
+  "styleIsolation": "shared",
+  "usingComponents": {
+    "mp-cells": "weui-miniprogram/cells/cells",
+    "img": "../image"
+  }
+}

package/components/navLayout/index.wxml

@@ -0,0 +1,22 @@
+<view class="weda-grid-navigation" style="{{style}}">
+  <view class="weda-grid-navigation__wrapper">
+    <block wx:for="{{optionList}}" wx:key="colIndex" wx:for-item="row">
+      <view class="weda-grid weda-grid-navigation__row">
+        <block wx:for="{{row}}" wx:key="colIndex" wx:for-item="col">
+          <view class="weda-col weda-grid__item weda-grid-navigation__col weda-grid-navigation__col--{{iconSize}}" style="width: {{(1 / mobileCol)*100}}%" data-item="{{col}}" bindtap="navigaTo">
+            <view class="weda-grid__box">
+              <view class="weda-grid-navigation__col">
+                <view wx:if="{{col.icon!='自定义图片'}}" class="weda-grid-navigation__icon">
+                  <view wx:if="{{col.tdicon}}" class="weda-icon t-icon t-icon-{{col.tdicon}}"></view>
+                  <view wx:if="{{!col.tdicon}}" class="weda-icon lcap-icon-padding lcap-icon lcap-icon-{{col.icon}}"> </view>
+                </view>
+                <img wx:if="{{col.icon=='自定义图片'&&col.iconSrc}}" src="{{col.iconSrc}}" className="weda-grid-navigation__img" />
+              </view>
+              <view class="weda-grid-navigation__text" wx-if="{{col.title}}" style="-webkit-line-clamp:{{maxLines?maxLines:'revert'}};{{titleStyle}}">{{col.title}}</view>
+            </view>
+          </view>
+        </block>
+      </view>
+    </block>
+  </view>
+</view>