支付宝 小程序 抽奖组件 大转盘

news/2024/7/20 2:06:17 标签: 小程序, javascript

介绍

使用支付宝原有的大转盘营销组件进行改造的，由于背景使用的图片，目前只支持 6 个奖品，一般情况下的大转盘都是这个规格。
转盘停止：之前使用的是计算角度来完成的，没有那种缓慢停止的动画。现在加了一个缓慢停止的动画，让抽奖变得更加顺滑。
录出来的动图可能会看到转盘往相反方向转动，但是真机的视觉效果上是看不出来的。

转盘效果图

在这里插入图片描述
在这里插入图片描述

页面代码

index.axml

<view class="lucky-draw-wrapper">
  <view class="chance-logs-container">
    <view class="remaining-chance">
      您有
      <text class="chance">{{ chance }}</text>
      次抽奖机会
    </view>
  </view>
  <turntable
    prizeList="{{ prizeList }}"
    rotTimes="{{ chance }}"
    onStart="onStart"
    onFinish="onFinish"
    onTimesUp="onTimesUp"
  />
</view>

index.js

javascript">Page({
  data: {
    prizeList: [
      {
        prizeId: '646739d6dcca4d1f505cb0d3',
        name: 'H&M100元优惠券',
        type: 'COUPON',
        image: 'https://gw.alipayobjects.com/zos/rmsportal/nIQUKeYBbJWliGJVhVmx.png',
      },
      {
        prizeId: '646739d6dcca4d1f505cb0d4',
        name: '2元话费券',
        type: 'COUPON',
        image: 'https://gw.alipayobjects.com/zos/rmsportal/HkrVjjjuxZPUMCUbPazb.png',
      },
      {
        prizeId: '646739d6dcca4d1f505cb0d5',
        name: '45元飞猪出行券',
        type: 'COUPON',
        image: 'https://gw.alipayobjects.com/zos/rmsportal/cDctUxwBLPCszQHRapYV.png',
      },
      {
        prizeId: '646739d6dcca4d1f505cb0d6',
        name: 'H&M10元优惠券',
        type: 'COUPON',
        image: 'https://gw.alipayobjects.com/zos/rmsportal/FAmIWZAWpUwlRFKqQDLz.png',
      },
      {
        prizeId: '646739d6dcca4d1f505cb0d7',
        name: '2元流量券',
        type: 'COUPON',
        image: 'https://gw.alipayobjects.com/zos/rmsportal/cuGomeXzMyeeZMjvVjBj.png',
      },
      {
        prizeId: '646739d6dcca4d1f505cb0d8',
        name: '谢谢参与',
        type: 'NONE',
        image: 'https://zos.alipayobjects.com/rmsportal/dwhgPyWAcXuvJAWlSSgU.png',
      },
    ],
    chance: 3,
  },
  onLoad() {
  },
  async onStart() {
    return this.data.prizeList[Math.floor(Math.random() * 6)];
  },
  async onFinish(result) {
    if (!result) {
      return;
    }

    const { type, name } = result;
    my.showToast({
      type: 'none',
      content: type === 'NONE' ? '很遗憾，差点就中奖了' : `恭喜您，获得${name}`,
    });
    this.setData({
      chance: this.data.chance - 1,
    });
  },
  onTimesUp() {
    my.showToast({
      type: 'none',
      content: '您的抽奖次数已用完',
    });
  },
});

index.json

{
  "transparentTitle": "auto",
  "titlePenetrate":"YES",
  "barButtonTheme": "default",
  "usingComponents": {
    "turntable": "./components/Turntable/index"
  }
}

turntable 组件代码

index.axml

<view class="turntable-container" style="width:{{ width }}rpx; height:{{ width }}rpx;">
  <view
    class="turntable-list {{ animationStatus }}"
    style="background:url('{{ bgImg }}') 0% 0% / 100% 100% no-repeat; {{ transform }}"
  >
    <view a:for="{{ prizeList }}" a:for-index="i">
      <view class="turntable-item">
        <view
          class="turntable-img"
          style="width:{{ prizeWidth }}; padding-top:{{ prizePaddingTop }}; transform:rotate({{ (i + 0.5) / 6 }}turn);{{ itemTransformOrigin }}"
        >
          <view class="prize-name {{ item.type === 'NONE' ? 'none' : '' }}">{{ item.name }}</view>
          <view a:if="{{ item.coupon }}" class="desc">{{ item.coupon.shortDesc }}</view>
          <image src="{{ item.image }}" mode="widthFix" class="prize-img" />
        </view>
      </view>
    </view>
  </view>
  <view class="turntable-btn" >
    <image src="{{ btnImg }}" mode="widthFix" class="img" onTap="onDraw" />
  </view>
</view>

index.acss

.turntable-container {
  position: relative;
  margin: auto;
  border-radius: 50%;
  overflow: hidden;
}

.turntable-list {
  position: absolute;
  border-radius: 50%;
  width: inherit;
  height: inherit;
  transition: all 6s ease;
  -webkit-transition: all 6s ease;
}

.turntable-list.scrolling {
  animation: scroll-start 0.4s linear infinite;
}

@keyframes scroll-start {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);
  }
}

.turntable-list.stop {
  animation: scroll-slow-down 0.7s ease-out;
}

@keyframes scroll-slow-down {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);
  }
}

.turntable-list.stop-win {
  animation: scroll-slow-down-win 0.7s ease-out;
}

@keyframes scroll-slow-down-win {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(330deg);
  }
}

.turntable-item {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.turntable-img {
  position: relative;
  display: block;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.turntable-img .prize-name {
  width: 200rpx;
  padding: 30rpx 0 20rpx;
  color: #000;
  font-weight: 600;
  font-size: 32rpx;
  line-height: 30rpx;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.turntable-img .prize-name.none {
  color: rgba(17, 17, 17, 0.55);
}

.turntable-img .desc {
  margin-top: -10rpx;
  font-size: 20rpx;
  line-height: 28rpx;
  color: rgba(0, 0, 0, 0.65);
}

.turntable-img .prize-img {
  display: block;
  max-width: 120rpx;
  height: 85rpx;
}

.turntable-btn {
  position: absolute;
  top: -12rpx;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.turntable-btn .img {
  width: 20%;
}

index.js

javascript">Component({
  data: {
    degValue: 0, // 旋转角度
    prizeWidth: 0, // 奖项背景图宽度计算值
    prizePaddingTop: 0, // 奖项上边距计算值
    itemTransformOrigin: '', // 奖项旋转原点计算值
    animationStatus: '',
    transform: '',
  },
  props: {
    width: 690, // 画布大小，默认单位 rpx
    initDeg: 0, // 初始旋转角度
    rotTimes: 0, // 抽奖机会次数
    prizeList: [], // 奖品列表
    prizeWidth: NaN, // 奖项宽度
    prizePaddingTop: NaN, // 奖项距离圆弧的内边距
    bgImg: 'https://gw.alipayobjects.com/zos/rmsportal/YIunNQVWkFRxUTaUNhOZ.png', // 背景图
    btnImg: 'https://gw.alipayobjects.com/zos/rmsportal/JHenAywYHZTLbbrnkIFN.png', // 按钮图
    onStart() {}, // 开始回调
    onFinish() {}, // 结束回调
    onTimesUp() {}, // 次数用尽的回调
  },
  didMount() {
    const widthNum = this._getNum(this.props.width);
    const widthUnit = this._getUnit(this.props.width);
    const { prizeWidth } = this.props;
    const paddingTop = this.props.prizePaddingTop;
    this.setData({
      degValue: this.props.initDeg,
      itemTransformOrigin: `transform-origin: 50% ${0.5 * widthNum}${widthUnit};`,
      prizeWidth: isNaN(prizeWidth) ? this._calculatePrizeWidth() : prizeWidth,
      prizePaddingTop: isNaN(paddingTop) ? this._calculatePrizePaddingTop() : paddingTop,
    });
    this.count = 6; // 奖品个数
    this.rotNum = 0; // 当前是第几次抽奖
    this.onRunning = false; // 是否正在抽奖
  },
  methods: {
    async onDraw() {
      if (this.onRunning) {
        return;
      }

      if (this.props.rotTimes < 1) {
        this.props.onTimesUp();
        return;
      }

      this.onRunning = true;
      this.setData({ animationStatus: 'scrolling' });
      const result = await this.props.onStart();
      // 延迟2秒钟展示奖品
      setTimeout(() => {
        this.done(result);
      }, 2000);
    },
    done(result) {
      if (!result) {
        this.onRunning = false;
        this.props.onFinish(null);
        this.setData({ animationStatus: 'stop', transform: '' });
        return;
      }

      this.setData({ animationStatus: 'stop-win', transform: 'transform: rotate(-30deg);' });
      let tempData = this.props.prizeList;
      for (let index = 0; index < tempData.length; index++) {
        if (tempData[index].prizeId === result.prizeId) {
          const itemAfterIndex = tempData.slice(index, this.props.prizeList.length);
          const itemBeforeIndex = tempData.slice(0, index);
          tempData = itemAfterIndex.concat(...itemBeforeIndex);
        }
      }
      this.setData({
        prizeList: tempData,
      });
      // 转盘停止1秒钟后展示弹框
      setTimeout(() => {
        this.onRunning = false;
        this.props.onFinish(result);
      }, 1000);
    },
    _getNum(str) {
      // 获取像素选项数值
      return parseFloat(str);
    },
    _getUnit(str) {
      // 获取像素选项单位
      // eslint-disable-next-line no-param-reassign
      str += '';
      return (str.match(/[a-z]+$/) || [])[0] || 'rpx';
    },
    _calculatePrizeWidth() {
      // 等边三角形内接正方形边长: (4 - 2 * 根号3) * 边长
      const widthNum = this._getNum(this.props.width);
      const widthUnit = this._getUnit(this.props.width);
      return (4 - 2 * Math.sqrt(3)) * 0.5 * widthNum + widthUnit;
    },
    _calculatePrizePaddingTop() {
      // 等边三角形一边的中点离过该边两点的圆弧的距离: 边长 - 边长 * (根号3 / 2)
      const widthNum = this._getNum(this.props.width);
      const widthUnit = this._getUnit(this.props.width);
      return 0.5 * widthNum - 0.25 * widthNum * Math.sqrt(3) + widthUnit;
    },
  },
});

index.json

{
  "component": true
}

http://www.niftyadmin.cn/n/375893.html

相关文章

hive性能测试hive-testbench

hive性能测试hive-testbench

参考文档&#xff1a; Hive基准测试神器-hive-testbench_shining_yyds的博客-CSDN博客 GitHub - hortonworks/hive-testbench hive tpcds-benchmark 测试_houzhizhen的博客-CSDN博客 1. 构造测试数据 1.1 数据单位为G&#xff0c;最小的数据大小为2&#xff0c;构造数据…
阅读更多...
Elasticsearch 8.X 性能优化参考 —— 筑梦之路

Elasticsearch 8.X 性能优化参考 —— 筑梦之路

Elasticsearch 是实现用户无缝搜索体验的关键工具。它通过提供快速、准确和相关的搜索结果&#xff0c;彻底改变了用户与应用程序的互动方式。然而&#xff0c;要确保 Elasticsearch 部署达到最佳性能&#xff0c;就必须关注关键指标&#xff0c;并对诸如索引、缓存、查询、搜索…
阅读更多...
C++读写文本文件

C++读写文本文件

2023年5月30日&#xff0c;周二下午&#xff1a; 这几天学习了C对文本文件的读写&#xff0c;写篇博客来总结一下 由于内容太多&#xff0c;我没法一次性写完&#xff0c;之后会不定期更新的 我使用C标准库中的fstream库来读写文本文件 用fstream来读写文本文件有两种方式&a…
阅读更多...
数据结构与算法基础-学习-24-遍历之DFS（深度优先搜索）和BFS（广度优先搜索）

数据结构与算法基础-学习-24-遍历之DFS（深度优先搜索）和BFS（广度优先搜索）

目录 一、遍历定义 二、遍历实质 三、DFS 四、BFS 五、宏定义 六、自定义类型 七、函数实现 1、DFS&#xff08;邻接矩阵实现&#xff09; 2、DFS&#xff08;邻接表实现&#xff09; 3、BFS&#xff08;邻接矩阵实现&#xff09; 4、BFS&#xff08;邻接表实现&…
阅读更多...
osgFBO(16),透视投影下的qedl

osgFBO(16),透视投影下的qedl

前面介绍了正交投影下的qedl&#xff0c;实际上&#xff0c;还有透视模式&#xff0c;根据摄像机位置的移动&#xff0c;远近切面也在不断变化&#xff0c;所以需要深度补偿。 即 float fixDepth(float depth) { if (PerspectiveMode 1) { //‘1/z’ depth-buffer transforma…
阅读更多...
MI小米验厂知识点

MI小米验厂知识点

【MI小米验厂知识点】 小米科技有限责任公司成立于2010年3月3日&#xff0c;是专注于智能硬件和电子产品研发、智能手机、智能电动汽车、互联网电视及智能家居生态链建设的全球化移动互联网企业、创新型科技企业。小米公司创造了用互联网模式开发手机操作系统、发烧友参与开发改…
阅读更多...
Vue项目iconfont新增svg图标

Vue项目iconfont新增svg图标

最近接手一个开发一半的Vue3的后台管理项目&#xff0c;由于样式需要&#xff0c;需要新增一些svg图标&#xff0c;项目使用的是iconfont接下来我会通过几个步骤在原来iconfont基础上去新增一些自己的图标&#xff1b; 一、iconfont文件转换为svg源文件&#xff1b; 通过访问ic…
阅读更多...
flink写mysql报错Could not retrieve transation read-only status server

flink写mysql报错Could not retrieve transation read-only status server

事务隔离级别前提下还是报错 SET GLOBAL tx_isolationREAD-COMMITTED; show global variables like wait timeout; 发现mysql是8小时。如果flnk超过8小时没有发送数据&#xff0c;invoke将会导致 mysql主动断开连接&#xff0c;而java侧并无感知。 解决问题&#xff0c;在使…
阅读更多...
最新文章

Copyright @ 2022~2023