@cloudbase/weda-ui 0.2.16 → 1.0.24

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>

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

@@ -0,0 +1,317 @@
+.weda-lottery {
+  width: 100%;
+  height: 652rpx;
+  position: relative;
+}
+
+.weda-lottery .weda-lottery__wrap {
+  position: relative;
+  width: 100%;
+  height: 652rpx;
+  background: #FF465C;
+  border: 2rpx solid rgba(255, 255, 255, 0.6);
+  box-shadow: inset 0px 0px 8rpx rgba(255, 255, 255, 0.5);
+  border-radius: 20rpx;
+  box-sizing: border-box;
+}
+
+.weda-lottery .weda-lottery__dot-top {
+  position: absolute;
+  top: 8rpx;
+  left: calc((100% - 434rpx) / 2);
+}
+
+.weda-lottery .weda-lottery__dot-bottom {
+  position: absolute;
+  bottom: 8rpx;
+  left: calc((100% - 434rpx) / 2);
+}
+
+.weda-lottery .weda-lottery__dot-left {
+  position: absolute;
+  left: 8rpx;
+  top: calc((100% - 434rpx) / 2);
+}
+
+.weda-lottery .weda-lottery__dot-right {
+  position: absolute;
+  right: 8rpx;
+  top: calc((100% - 434rpx) / 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: 18rpx;
+  height: 18rpx;
+  box-shadow: 0px 0px 8rpx 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: 86rpx;
+}
+
+.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: 86rpx;
+}
+
+.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: 18rpx;
+  left: 12rpx;
+}
+
+.weda-lottery .weda-lottery__dot-right-top {
+  position: absolute;
+  top: 18rpx;
+  right: 12rpx;
+}
+
+.weda-lottery .weda-lottery__dot-left-bottom {
+  position: absolute;
+  left: 12rpx;
+  bottom: 18rpx;
+}
+
+.weda-lottery .weda-lottery__dot-right-bottom {
+  position: absolute;
+  right: 12rpx;
+  bottom: 18rpx;
+}
+
+.weda-lottery .weda-lottery__inner {
+  padding: 36rpx;
+  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: 2rpx solid rgba(255, 255, 255, 0.25);
+  box-shadow: inset 0px 0px 8rpx rgba(255, 255, 255, 0.5);
+  border-radius: 20rpx;
+  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% - 64rpx) / 3);
+  height: calc((100% - 64rpx) / 3);
+  font-size: 0;
+  text-align: center;
+  background: #FFF8EE;
+  box-shadow: inset 0px -4rpx 0px #FFDDBD;
+  border-radius: 16rpx;
+  box-sizing: border-box;
+}
+
+.weda-lottery .weda-lottery__inner .weda-lottery__turntable-item.is-actived {
+  background: #FFF8EE;
+  box-shadow: 0px 0px 12rpx #FFFFFF;
+}
+
+.weda-lottery .weda-lottery__inner .weda-lottery__turntable-item.is-selected {
+  background: #FF6666;
+  box-shadow: inset 0px -4rpx 0px #FFA4A4;
+}
+
+.weda-lottery .weda-lottery__inner .weda-lottery__turntable-item:first-child {
+  top: 16rpx;
+  left: 16rpx;
+}
+
+.weda-lottery .weda-lottery__inner .weda-lottery__turntable-item:nth-child(2) {
+  top: 16rpx;
+  left: calc((100% - 64rpx) / 3 + 32rpx);
+}
+
+.weda-lottery .weda-lottery__inner .weda-lottery__turntable-item:nth-child(3) {
+  top: 16rpx;
+  right: 16rpx;
+}
+
+.weda-lottery .weda-lottery__inner .weda-lottery__turntable-item:nth-child(4) {
+  top: calc((100% - 64rpx) / 3 + 32rpx);
+  right: 16rpx;
+}
+
+.weda-lottery .weda-lottery__inner .weda-lottery__turntable-item:nth-child(5) {
+  bottom: 16rpx;
+  right: 16rpx;
+}
+
+.weda-lottery .weda-lottery__inner .weda-lottery__turntable-item:nth-child(6) {
+  bottom: 16rpx;
+  left: calc((100% - 64rpx) / 3 + 32rpx);
+}
+
+.weda-lottery .weda-lottery__inner .weda-lottery__turntable-item:nth-child(7) {
+  bottom: 16rpx;
+  left: 16rpx;
+}
+
+.weda-lottery .weda-lottery__inner .weda-lottery__turntable-item:nth-child(8) {
+  bottom: calc((100% - 64rpx) / 3 + 32rpx);
+  left: 16rpx;
+}
+
+.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: 8rpx;
+  border-style: solid;
+  border-color: transparent;
+  border-radius: 16rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 16rpx 5rpx 16rpx 5rpx;
+}
+
+.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 {
+  height: 80rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.weda-lottery .weda-lottery__inner .weda-lottery__turntable-cell-icon {
+  display: block;
+  width: 80rpx;
+  height: 80rpx;
+}
+
+.weda-lottery .weda-lottery__inner .weda-lottery__turntable-cell-desc {
+  margin-top: 12rpx;
+  font-weight: 400;
+  font-size: 24rpx;
+  line-height: 34rpx;
+  text-align: center;
+  color: #BA0000;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  width: 100%;
+}
+
+.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% - 64rpx) / 3);
+  height: calc((100% - 64rpx) / 3);
+  top: calc((100% - 64rpx) / 3 + 32rpx);
+  left: calc((100% - 64rpx) / 3 + 32rpx);
+  background: linear-gradient(180deg, #FFEE81 0%, #FFD646 100%);
+  box-shadow: inset 0px -4rpx 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 4rpx 0px #FFFFFF;
+}
+
+.weda-lottery .weda-lottery__btn-inner {
+  padding: 18rpx;
+  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 16rpx 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 16rpx rgba(234, 27, 53, 0.5);
+}
+
+.weda-lottery .weda-lottery__btn-image {
+  padding: 22rpx 30rpx;
+  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/src/mp/components/navLayout/index.js

@@ -64,12 +64,12 @@ Component({
         }
         item.paramObj = paramObj;
         if (item.withParams && item.params.length > 0) {
-          wx.navigateTo({
+          wx.redirectTo({
             url:
               '/pages/' + item?.insideUrl + '/index?' + item.paramObj.join('&'),
           });
         } else {
-          wx.navigateTo({
+          wx.redirectTo({
             url: '/pages/' + item?.insideUrl + '/index',
           });
         }
@@ -113,7 +113,7 @@ Component({
 
       // 添加对齐属性
       if (fontWeight !== '') {
-        titleStyle = `${titleStyle};font-weight: ${fontWeight};font-size:${fontSize};line-height:${
+        titleStyle = `${titleStyle};font-weight: ${fontWeight};font-size:${fontSize}px;line-height:${
           lineHeight == 'auto' ? 'normal' : lineHeight
         }`;
       }