mp-ui-user/src/packagePrize/purchase/index.vue

<template>
	<view>
		<!-- #ifdef MP-ALIPAY -->
		<u-navbar :placeholder="true" bgColor="#fff" :autoBack="true" :border="true" title="购买成功" leftIconSize="0">
		</u-navbar>
		<!-- #endif -->
		<!-- #ifndef MP-ALIPAY -->
		<u-navbar :placeholder="true" bgColor="#fff" :autoBack="true" :border="true" title="购买成功"></u-navbar>
		<!-- #endif -->
		<view class="purchase">
			<image class="imgOne" src="https://mp-public-test-1307117429.cos.ap-shanghai.myqcloud.com/v2/buy_suc.png"
				mode="scaleToFill"></image>
			<image class="imgTwo" :src="picUrl" mode="scaleToFill"></image>
		</view>

		<view class="package">
			<button @click="toProcess()">立即抽奖</button>
			<text>已购买的商品请稍后在“我的”-“仓库”中进行查看和提货</text>
		</view>

	</view>
</template>

<script>
	import env from '../../config/env.js'
	import $http from '@/utils/request.js'
	export default {
		data() {
			return {
				boxId: 0,
				orderId: 0,
				picUrl: '',
			}
		},
		onLoad(opthios) {
			this.boxId = opthios.boxId
			this.orderId = opthios.orderId
			this.getPicUrl()
		},
		methods: {
			getPicUrl() {
				$http.post('/api/v1/mp/user/mall/ticket/detail', {
					boxId: this.boxId,
					noToken: true
				}).then(res => {
					if (res.code == 0) {
						this.picUrl = env.filePublic + res.data.picUrl.split(',')[0]
					}
				})
			},
			// 线上立即刮票成功，跳转到刮奖过程
			toProcess() {
				uni.navigateTo({
					url: `/packagePrize/rolling/animation?boxId=${ this.boxId }&orderId=${ this.orderId }&isTry=0`
				})
				
				//线上抽奖动画
				// uni.navigateTo({
				// 	url: `/packagePrize/rolling/index?boxId=${ this.boxId }&orderId=${ this.orderId }&isTry=0`
				// })
			},
		}
	}
</script>

<style lang="scss" scoped>
	.purchase {
		position: relative;
		padding-top: 100rpx;
		width: 592rpx;
		height: 788rpx;
		margin: 0 auto;

		.imgOne {
			width: 100%;
			height: 100%;
		}

		.imgTwo {
			z-index: 10;
			width: 100%;
			width: 520rpx;
			height: 430rpx;
			position: absolute;
			top: 320rpx;
			left: 36rpx;
		}
	}

	.package {
		margin-top: 100rpx;
		text-align: center;

		button {
			margin: 0 auto;
			width: 666rpx;
			height: 98rpx;
			background: linear-gradient(180deg, #FEA052 0%, #FF8D2F 100%);
			border-radius: 56rpx;
			color: #fff;
		}

		text {
			margin-top: 54rpx;
			display: inline-block;
			width: 570rpx;
			color: #666666;
			font-size: 26rpx;
			line-height: 32rpx;
			letter-spacing: 1px;
		}
	}
</style>