You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
592 lines
13 KiB
592 lines
13 KiB
<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="2" />
|
|
|
|
<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>
|