uniapp/pagesHome/prize/index.vue

<template>
	<view class="content">
		<view class="one">
			<view class="one_1">
				<text :style="{background:`${prizeInfo.color}`}">{{prizeInfo.name||'待开奖中'}}</text>
			</view>
			<view class="one_2">
				<button :type="is_start==true?'warn':'primary'" size="mini"
					@tap="toCommon()">{{is_start==true?'结束':'开始'}}</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 是否开始抽奖
				is_start: false,
				// 抽奖名单
				list: [ //
					{
						"name": "小夫妻麻辣烫",
						"color": "#3d582f"
					},
					{
						"name": "稻花香盒饭",
						"color": "#c4ef4c"
					},
					{
						"name": "三品阁米线",
						"color": "#27b92b"
					},
					{
						"name": "新天地超市",
						"color": "#5d653c"
					},
					{
						"name": "福苑粥铺",
						"color": "#7e102d"
					},
					{
						"name": "1949豆腐脑",
						"color": "#51ccf"
					},
					{
						"name": "干锅鸭头",
						"color": "#332893"
					},
					{
						"name": "水饺",
						"color": "#164365"
					},
					{
						"name": "酱大骨头",
						"color": "#6dfdb4"
					},
					{
						"name": "青山砂锅麻辣烫",
						"color": "#d920e1"
					},
					{
						"name": "黄焖鸡米饭",
						"color": "#7c9d9b"
					},
					{
						"name": "沈老头包子",
						"color": "#b3dc5e"
					},
					{
						"name": "兰州拉面",
						"color": "#398fce"
					},
					{
						"name": "田记抻面",
						"color": "#d476e3"
					},
					{
						"name": "裤带面",
						"color": "#8cb2d1"
					},
					{
						"name": "板面",
						"color": "#4dfd51"
					}

				],
				// 倒计时
				timer: null,
				// 中奖信息
				prizeInfo: {},
			};
		},
		methods: {
			toCommon() {
				const that = this;
				let list = that.list;
				if (that.is_start) {
					that.is_start = false;
					clearInterval(this.timer)
					uni.showModal({
						title: '中奖项',
						content: `恭喜${that.prizeInfo.name}获得大奖，感谢参与！`
					})
				} else {
					that.is_start = true;
					that.timer = setInterval(function() {
						var index = Math.floor(Math.random() * list.length)
						that.prizeInfo = list[index]
					}, 200)
				}
			}
		}
	}
</script>

<style lang="scss">
	.content {
		.one {
			text-align: center;

			.one_1 {
				margin: 2vw 0;

				text {
					display: inline-block;
					width: 50vw;
					height: 50vw;
					text-align: center;
					line-height: 50vw;
					border-radius: 90%;
					background-color: #000000;
					color: #ffffff;
					font-weight: bold;
					font-size: 30px;
					font-family: cursive;
				}
			}
		}
	}
</style>