uniapp的vue实现抽奖活动

最新推荐文章于 2024-08-16 12:40:11 发布

Ace.三阶斗尊

最新推荐文章于 2024-08-16 12:40:11 发布

阅读量2.3k

点赞数 2

分类专栏：前端vue uniApp 文章标签： uniapp vue 抽奖

本文链接：https://blog.csdn.net/qq_42231156/article/details/102521514

版权

这篇博客介绍了如何利用uniapp和vue框架来实现一个抽奖活动，包括小程序的接入和资源兑换功能。

摘要由CSDN通过智能技术生成

<template>
	<view class="luck">
		<view class="luck_header flex_between_center margin padding bg-gradual-orange radius">
			<view class="header_info flex_start_center">
				<img :src="userInfo.avatarUrl" alt="头像" class='round header_info_pic'>
				<view class="info_name margin-left flex_start">
					<view class="margin-bottom-sm">已经连续签到<text class="info_name_font inline_block"> 2 </text>天</view>
					<view >当前已有积分：5</view>
				</view>
			</view>
			<button class="cu-btn radius shadow" @tap="signHandle" :disabled="isSign">{
  {isSign?'已签到':'签到'}}</button>
		</view>
		<view class="canvas_wrap"  >
			<view class="canvas-container" :style="[canvasStyle]">
				<view  :animation="animationData" class="canvas-content" :style="[canvasStyle]"  v-if="awardsList">
					<canvas :style="[canvasStyle]" class="canvas-element" canvas-id="lotteryCanvas"></canvas>		
					<view class="canvas-line">
						<view class="canvas-litem" v-for="(item,index) in awardsList" :key="index" 
							:style="{'transform': 'rotate('+item.lineTurn+')','transform-origin':'50% '+ canvasWH/2+'px','left':canvasWH/2+'px','height':canvasWH/2+'px'}"></view> 
					</view>		
					<view class="canvas-list">
						<view class="canvas-item" v-for="(item,index) in awardsList" :key="index" >
							<view c