uav-uniapp-demo-24-8-18/pages/prizeDraw/prizeDraw.vue

<template>
	<view class="prizeDraw bx">

		<!-- <u-loading-page :loading="loading" loadingText="" style="z-index: 999;" bgColor="#000"></u-loading-page> -->
		<!-- 初始页面 -->
		<!-- <pageInit></pageInit> -->

		<view class="title" style="margin-top: 10rpx;">
			{{ $t('page.prizeDraw.title_1') }}
		</view>
		<view class="profit">
			<view class="img-box">
				<image :src="vipInfo.icon" mode="aspectFit"></image>
			</view>
			{{ userInfo.profit }}% {{ $t('page.prizeDraw.profit') }}
		</view>
		<view class="title">
			{{ $t('page.prizeDraw.title_2') }}
		</view>
		<view class="prize_drone">

			<scroll-view :scroll-left="scrollLeft"
			scroll-x="true"
			lower-threshold="6"
			@scrolltolower="scrolltolower">
				<view @mouseenter="cleanTime" class="banner" style="height: 370rpx;">
					<view @click="gotoDetail(item.url)" v-for="(item, index) in banner" :key="index">
						<img :src="item.image.split(',')[0]" width="100%" />
					</view>
				</view>
			</scroll-view>

			<view class="banner3d">
				<view @click="gotoDetail(item.url)" v-for="(item, index) in
				 banner3d" :class="{['banner3d_item_' + item.index] : true}" 
				 :key="item.id">
					<img :src="item.image" width="100%" />
				</view>
			</view>
		</view>
		<view class="title" style="font-size: 38rpx;margin-top: 60rpx;">
			({{ userInfo.encourageNum }} / {{ userInfo.encourageSum }})
		</view>
		<view class="btn" @click="submit">
			{{ $t('page.prizeDraw.Start') }}
		</view>
		<view class="amount">
			<view style="font-size: 28rpx;font-weight: normal;" class="">
				{{ $t('page.prizeDraw.frozen_amount') }}
			</view>
			<view style="color: #333;">
				USDT <text style="margin-left: 10rpx;font-size: 40rpx;">
					{{ userInfo.freezeMoney }}
				</text>
			</view>
		</view>

		<view class="member-list">
			<view class="member-item">
				<view class="img-box">
					<image src="/static/prizeDraw/23.png" mode="aspectFit"></image>
				</view>

				<view style="font-size: 28rpx;font-weight: normal;" class="title">
					{{ $t('page.prizeDraw.today_profit') }}</view>
				<view class="menber-descript">USDT {{ userInfo.todayMoney }}</view>

				<view class="equity-list">
					<view class="equity-item">
						{{ $t('page.prizeDraw.title_3') }}
					</view>
				</view>
			</view>
			<view class="member-item">
				<view class="img-box">
					<image src="/static/prizeDraw/6.png" mode="aspectFit"></image>
				</view>

				<view style="font-size: 28rpx;font-weight: normal;" class="title">
					{{ $t('page.prizeDraw.account_balance') }}</view>
				<view class="menber-descript">USDT {{ userInfo.money }}</view>

				<view class="equity-list">
					<view class="equity-item">
						{{ $t('page.prizeDraw.title_4') }}
					</view>
				</view>
			</view>
		</view>

		<view class="notice">
			<view style="
			font-size: 36rpx;">
				{{ $t('page.prizeDraw.important_notice') }}
			</view>
			<view class="notice-list">
				<view style="font-size: 30rpx;" class="notice-item">
					{{ $t('page.prizeDraw.notice_item_1') }}
				</view>
				<view style="font-size: 30rpx;" class="notice-item">
					{{ $t('page.prizeDraw.notice_item_2') }}
				</view>
			</view>
		</view>

		<sTabbar select="1" />

		<u-popup :show="show" mode="bottom" @close="show = false;$play()">
			<view style="font-size: 35rpx;text-align: center;
			font-weight: 900;padding: 20rpx;">
				{{ $t(msg == '31' ? 'message.31' : 'page.prizeDraw.rating_submission') }}
			</view>
			<view style="display: flex;justify-content: center;">
				<img :src="product.image" width="150rpx" />
			</view>
			<view style="color: #fff;font-size: 35rpx;text-align: center;
			font-weight: 900;">
				{{ product.subTitle }}
			</view>
			<view style="display: flex;justify-content: space-around;
			margin-top: 30rpx;">
				<view>
					{{ $t('page.prizeDraw.Total_Amount') }}
				</view>
				<view>
					{{ $t('page.prizeDraw.profit') }}
				</view>
			</view>
			<view style="display: flex;justify-content: space-around;
			margin-top: 30rpx;font-weight: 900;">
				<view>
					USDT <text style="font-size: 40rpx;">{{ product.price }}</text>
				</view>
				<view>
					USDT <text style="font-size: 40rpx;">{{ product.giveMoney }}</text>
				</view>
			</view>
			<view style="display: flex;justify-content: space-between;
			border-top: 1px solid #555;padding: 30rpx;margin-top: 30rpx;">
				<view class="">
					{{ $t('page.prizeDraw.Creation_time') }}
				</view>
				<view class="">
					{{ product.createTime }}
				</view>
			</view>
			<view style="display: flex;justify-content: space-between;
			border-top: 1px solid #555;border-bottom: 1px solid #555;
			padding: 30rpx;align-items: center;">
				<view class="">
					{{ $t('page.prizeDraw.Rating_No') }}
				</view>
				<view class="">
					{{ product.id }}
				</view>
			</view>
			<view class="btn" @click="payOrder">
				{{ $t('page.prizeDraw.submit') }}
			</view>
		</u-popup>


		<review :show="reviewShow" @close="reviewClose" :oid="product.id" />

		<turntable :show="turntableShow" @start="getUserInfo" :info="userInfo" @close="turntableShow = false" />
		
		<luckyAnimation ref="an" @close="startSubmit"></luckyAnimation>
	</view>
</template>

<script>
	import sTabbar from '@/components/base/tabBar.vue'
	import review from '@/components/review/review.vue';
	import turntable from '@/components/turntable.vue';
	import { debounce } from '@/utils/base.js'
	import pageInit from '@/components/pageInit/pageInit.vue'
	import luckyAnimation from '../../components/luckyAnimation/luckyAnimation.vue';
	
	export default {
		components: {
			sTabbar,
			review,
			turntable,
			pageInit,
			luckyAnimation
		},
		data() {
			return {
				loading: false,
				turntableShow: false,
				scrollLeft: 0,
				banner: [],
				banner3d: [],
				invt: null,
				userInfo: {},
				product: {},
				show: false,
				reviewShow: false,
				vipInfo: {},
				msg : null,
				isSubmit : false,
				index3d : 0,
			}
		},
		onShow() {
			this.getList();
			this.getUserInfo()
		},
		onHide() {
			this.end()
		},
		methods: {
			getUserInfo() {
				this.request('userInfo').then(res => {
					if (res.code == 200) {
						this.userInfo = res.result.userInfo
						this.vipInfo = res.result.vip
					}
				})
			},
			scrolltolower(){
				this.scrollLeft = 0
			},
			reviewClose(){
				this.reviewShow = false;
				if(this.userInfo.bigNum > 0){
					this.turntableShow = true;
				}
			},
			startSubmit : debounce(function(){
				this.request('createOrder').then(res => {
					this.getUserInfo()
					this.isSubmit = false
					if (res.code == 200) {
						this.msg = res.message
						this.product = res.result
						this.show = true
					}
				}).catch(err => {
					this.isSubmit = false
				})
			}, 500),
			submit() {
				this.$play()
				
				if(this.isSubmit){
					return
				}
				
				this.isSubmit = true
				
				this.$refs.an.start()
			},
			payOrder() {
				this.$play()
				this.asyncLoading().then(res => {
					this.request('pay', {}, {
						id: this.product.id
					}).then(res => {
						this.show = false
						if (res.code == 200) {
							this.reviewShow = true
						}
					})
				})
			},
			getList() {
				this.end()
				this.loading = true
				this.banner = []
				this.banner3d = []
				Promise.all([this.getShopList(),this.getShopScroll()]).then(res => {
					// this.loading = false
					this.start()
				})
			},
			
			//获取商品列表
			getShopList(){
				return this.request('getAppBanner', {}, this.queryParams).then(res => {
					if (res.code == 200) {
						this.banner = res.result
					}
				})
			},
			
			//获取App滚动列表
			getShopScroll(){
				return this.request('appScroll').then(res => {
					if (res.code == 200) {
						res.result.map((item, index) => {
							item.index = index
						})
						this.banner3d = res.result
					}
				})
			},
			
			async asyncLoading(){
				return new Promise((resolve,reject) => {
					//显示加载框
					uni.showLoading({
						title: this.$t('page.prizeDraw.loading')
					});
					setTimeout(() => {
						uni.hideLoading();
						resolve()
					},500)
				})
			},
			
			start() {

				this.banner.push(this.banner[0])
				this.banner.push(this.banner[1])

				let self = this

				this.invt = setInterval(next, 20)

				let i = 150

				function next() {

					// 平面图移动
					self.scrollLeft++

					// 3d图移动
					i++
					if (i >= 60) {
						i = 0
						
						self.index3d++
						self.index3d %= self.banner3d.length
						
						self.banner3d.forEach(n => {
							if(n.index != 4){
								n.index = 4
							}
						})
						
						//0
						self.banner3d[self.index3d].index = 0
						
						//6
						self.banner3d[self.index3d != 0 ? 
						self.index3d - 1 : 
						self.banner3d.length - 1].index = 6
						
						//5
						self.banner3d[self.index3d >= 2 ? 
						self.index3d - 2 : 
						self.banner3d.length - 2].index = 5
						
						//1
						self.banner3d[(self.index3d + 1) % self.banner3d.length].index = 1
						
						//2
						self.banner3d[(self.index3d + 2) % self.banner3d.length].index = 2
						
						//3
						self.banner3d[(self.index3d + 3) % self.banner3d.length].index = 3
						
						// self.banner3d.forEach(n => {
						// 	n.index++
						// 	n.index %= self.banner3d.length
						// })
					}
				}
			},
			end() {
				if (this.invt) {
					clearInterval(this.invt)
					this.invt = null
				}
			},
			
			//商品跳转
			gotoDetail(url){
				this.$play()
				if(url){
					window.open(url)
				}
			}
		},
	}
</script>

<style scoped lang="scss">
	.prizeDraw {
		// color: #fff;
		background-size: 100%;
		background-repeat: no-repeat;
		background-position: 0rpx -210rpx;
		padding-bottom: 150rpx;
		
		width: 750rpx;
		// background-image: url('@/static/prizeDraw/bj.jpg');
		background-size: 100%;

		/deep/ .uni-scroll-view::-webkit-scrollbar {
			width: 0;
			height: 0;
		}

		.title {
			font-weight: 900;
			text-align: center;
			font-size: 28rpx;
		}

		.profit {
			position: relative;
			margin: 0 auto;
			padding: 10rpx 50rpx;
			font-weight: 900;
			background-color: $uni-bg-color-app;
			color: $uni-text-color-inverse;
			width: fit-content;
			border-radius: 20rpx;
			margin: 30rpx auto;

			.img-box {
				display: flex;
				justify-content: center;
				width: 90rpx;
				position: absolute;
				top: 50%;
				left: -40rpx;
				transform: translateY(-50%);

				image {
					width: 70rpx;
					height: 70rpx;
				}
			}
		}

		.prize_drone {
			margin-top: 20rpx;

			.banner {
				display: flex;

				&>view {
					width: calc(50% - 20rpx);
					flex-shrink: 0;
					margin: 0 10rpx;
					cursor: pointer;
					img {
						display: block;
						width: 90%;
						margin: 0rpx auto;
					}
				}
			}

			.banner3d {
				position: relative;
				height: 180rpx;
				margin-top: 100rpx;

				&>view {
					width: 220rpx;
					height: 220rpx;
					position: absolute;
					left: 265rpx;
					transition: all .8s;

					img {
						display: block;
						width: 85%;
						height: 85%;
						margin: 0rpx auto;
					}
				}

				.banner3d_item_0 {
					z-index: 20;
					transform: translateX(0) scale(1.6);
				}

				.banner3d_item_1 {
					z-index: 19;
					transform: translateX(230rpx) scale(.9);
				}

				.banner3d_item_2 {
					z-index: 17;
					transform: translateX(130rpx) scale(.7);
				}

				.banner3d_item_3 {
					z-index: 16;
					transform: translateX(25rpx) scale(0.5);
				}

				.banner3d_item_4 {
					z-index: 16;
					transform: translateX(-25rpx) scale(0.01);
				}

				.banner3d_item_5 {
					z-index: 18;
					transform: translateX(-130rpx) scale(0.7);
				}

				.banner3d_item_6 {
					z-index: 19;
					transform: translateX(-230rpx) scale(.9);
				}
			}
		}

		.btn {
			background-color: $uni-bg-color-app;
			color: $uni-text-color-inverse;
			font-weight: 900;
			margin: 20rpx 40rpx;
			padding: 10rpx 20rpx;
			font-size: 46rpx;
			text-align: center;
			border-radius: 24rpx;
		}

		.amount {
			display: flex;
			margin: 20rpx 40rpx;
			justify-content: space-between;
			border: 3px solid #777;
			padding: 20rpx;
			font-weight: 900;
			color: #aaa;
			align-items: center;
		}

		.member-list {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			margin: 10rpx 40rpx;

			.member-item {
				box-sizing: border-box;
				padding: 15rpx;
				width: calc(50% - 10rpx);
				border-radius: 10rpx;
				border: 3px solid #777;

				.img-box {
					display: flex;
					justify-content: center;
					width: 100%;
					align-items: center;
					padding-top: 20rpx;

					image {
						width: 130rpx;
						height: 130rpx;
					}
				}

				.menber-descript {
					text-align: center;
					color: $uni-text-color;
					font-size: 34rpx;
					margin-top: 10rpx;
					font-weight: 900;
				}

				.equity-list {
					color: $uni-text-color;
					text-align: center;

					.equity-item {
						position: relative;
						font-size: 26rpx;
					}
				}
			}
		}

		.notice {
			margin: 20rpx 40rpx;
			font-size: 32rpx;

			.notice-list {
				color: $uni-text-color;
			}
		}
	}
</style>