mycajt/pages/sign/prize.vue

<template>
	<view class="content">
		<view class="bg">
			<image src="../../static/user/prizebg.png" mode="widthFix"></image>
		</view>
		<view class="title">
			<image src="../../static/user/prizetitle.png" mode=""></image>
		</view>
		<view class="zp" v-if="show == 0">
			<pt-lottery ref="pt-lottery" lotteryBg="../../static/user/prizezhuan.png"
				lotteryBtn="../../static/user/prizebtn.png" :times="3" :prizeList="prizeList" @start="start"
				@end="end"></pt-lottery>
		</view>
		<view class="btn" @click="navTo('/pages/sign/info')">
			抽奖记录
		</view>
	</view>
</template>

<script>
	import {
		getgacha,
		gacha
	} from '@/api/sign.js'
	import ptLottery from '@/components/pt-lottery/pt-lottery.vue'
	export default {
		comments: {
			ptLottery
		},
		data() {
			return {
				prizeList: [],
				show: 1,
				zj: ''
			};
		},
		onLoad() {},
		onShow() {
			this.loadData();
		},
		onReachBottom() {},
		onReady() {},
		methods: {
			start() {
				const obj = this;
				gacha().then(e => {
					console.log(e);
					for (let i = 0; i < obj.prizeList.length; i++) {
						if (e.data.gacha_res.award == obj.prizeList[i].value) {
							obj.$refs['pt-lottery'].init(i + '')
							this.zj = obj.prizeList[i]
							break;
						}
					}
				})

			},
			end() {
				this.$api.msg('恭喜抽中' + this.zj.prizeName)
			},
			navTo(url) {
				uni.navigateTo({
					url
				})
			},
			loadData() {
				const obj = this
				getgacha().then(({
					data
				}) => {
					data.award.forEach(e => {
						console.log(e);
						let ar = {
							prizeName: '',
							value: ''
						}
						if (e.award_type == 1) {
							ar.prizeName = e.award + '积分';
							ar.value = e.award

						} else {
							ar.prizeName = e.award
							ar.value = e.award
						}
						obj.prizeList.push(ar)
					})
					obj.show = 0
				})
			}
		}
	};
</script>

<style lang="scss">
	page,
	.content {
		min-height: 100%;
		height: auto;
		background: #fd8c54;
	}

	.bg {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		width: 750rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.title {
		margin: 0 auto;
		width: 630rpx;
		height: 210rpx;
		padding-top: 50rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.zp {
		margin: 100rpx auto 0;
		width: 750rpx;
		height: 750rpx;
	}

	.btn {
		position: relative;
		z-index: 2;
		margin: 50rpx auto 0;
		width: 476rpx;
		height: 83rpx;
		background: #FF5421;
		border-radius: 42rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		font-family: Source Han Sans SC;
		font-weight: 400;
		color: #FFFFFF;
	}
</style>