uni-app 九宫格抽奖活动

最新推荐文章于 2024-01-27 09:44:29 发布

原创

最新推荐文章于 2024-01-27 09:44:29 发布 · 1.2k 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #前端

一、效果图

二、代码

<template>
	<view class="container">
		<view class="container_circle" v-for="(v,i) in  circleList" :key="i"
		:style="{'top':v.topCircle+'rpx','left':v.leftCircle+'rpx','background-color':(i%2 ==0)?oneCircleColor:twoCircleColor}"></view>
		<view class="container_content">
			<view class="content_out" v-for="(v,i) in prizeList" :key="i"
			:style="{'top':v.topAward+'rpx','left':v.leftAward+'rpx',
			'background':  (i==indexSelect)?prizeCheckColor:prizeDefaultColor,
			'background-size':' 400%',
			'animation': 'animatebox 4s linear infinite'
			}">
			<image class="award_image" :src="v.imgList"></image>
			</view>
			<view class="content_btn" @tap="handleStart" :style="{'background-color':isRunning?'#55ffff':'#f7f7f7'}">开始</view>
		</view>
		<view class="container_num">剩余抽奖次数{
  
  {luckDrawNum}}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				circleList:[], // 圆圈数组
				prizeList:[], // 奖品数组
				oneCircleColor:'#29f5ff', // 圆圈颜色1
				twoCircleColor:'#aaaaff', // 圆圈颜色2
				prizeDefaultColor:'#FFF', // 奖品的默认颜色
				prizeCheckColor:'linear-gradient(72.5deg, #aa0000, #ff0000, #ff00ff, #550000, #ffaaff, #aa0000, #ff0000)', // 奖品的选中颜色
				indexSelect: 0, //被选中的奖品index
				isRunning: false, //是否正在抽奖
				//奖品图片数组
				imgList:[
					'https://cdn.cnb