<template>
<view class="content">
<view class="header">
<view class="title" :style="{paddingTop:headerHeight+'px'}">
<u-icon name="arrow-left" color="#333" size="20" @click='back'></u-icon>
<text>签到领金币</text>
</view>
</view>
<view class="boday">
<view class="win">
<view class="" v-for="(item,index) in luckLog" :key="index">
{{item}}
</view>
</view>
<view class="record" @click="drawLog()">
查看抽奖记录 >
</view>
<uni-popup ref="popups" type="center">
<view class="changeRecord">
<image class="close" @click="closed"
src="https://jiaapi.jiusuding.cn/uploads/20221205/11e054fa328df05150369b48124dd7d7.png"
mode="widthFix"></image>
<view class="title">
—— 抽奖记录 ——
</view>
<view class="" style="position: absolute;z-index: 99999;left: 50%;top: 50%;transform: translate(-50%,-50%);">
<u-loading-icon :show='loading' color="#333333" text="拼命加载中" :vertical='true'></u-loading-icon>
</view>
<scroll-view scroll-y="true" style=" overflow: hidden; height: 87%;" @scrolltolower="scrollHander">
<view class="recordList" v-for="(item,index) in drawList" :key="index">
<view class="lefts">
<view class="pic">
<image :src="item.goodsjoin.image_text" mode="widthFix"></image>
</view>
<view class="name">
{{item.goodsjoin.name}}
</view>
</view>
<view class="right">
{{item.createtime_text}}
</view>
</view>
</scroll-view>
</view>
</uni-popup>
<view class="box1">
<block v-for="(item,index) in prize_arr" :key="index">
<view @click="clickPrize" :class="[isTurnOver?'a':'grayscale','prizes','btnPrize']"
v-if="item.type == 'btn'" :style="{backgroundImage:'url('+item.image_text+')'}">
立即<br>抽奖
</view>
<view :class="[item.isSelected?'selected':'','prizes']" v-else>
<image :src="item.image_text" mode="" class="image2"></image>
<view class="box3">{{item.name}}</view>
</view>
<!-- <view :class="[item.isSelected?'selected':'','prizes']" v-else>
<image :src="item.image_text" mode=""
:class="[item.id == 1 || item.id == 3 ? 'image2':'',item.id == 4 || item.id == 6 || item.id == 9 ? 'image1':'',item.id == 2?'image3':'',item.id == 8?'image4':'',item.id == 7?'image5':'']">
</image>
<view :class="[item.id == 1 || item.id == 3 ?'box3':'',item.id == 7?'box7':'']" v-if="item.id == 1 || item.id == 3 || item.id == 8 || item.id == 7">
{{item.name}}
</view>
</view> -->
</block>
<uni-popup ref="popup" type="center">
<view class="result">
<view class="title1">恭喜抽中</view>
<view class="title2">{{prize_name}}</view>
<view class="title3" @click="navigateTo('/pages_pages3/coupons/index')">前往我的优惠券查看 ></view>
<image class="close" @click="closes"
src="https://jiaapi.jiusuding.cn/uploads/20221205/11e054fa328df05150369b48124dd7d7.png"
mode=""></image>
</view>
</uni-popup>
</view>
<view class="explain">
<view class="title">
<view></view>
<view></view>
<view>活动说明</view>
<view></view>
<view></view>
</view>
<view class="main">
1.连续签到7天即可获取一次抽奖机会。<br>
2.优惠券有使用期限限制，请在期限内及时使用。<br>
3.优惠券可在我的-优惠券中查看，订单结算是会自动抵扣。<br>
4.活动的最终解释权归酒速定所有。
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
loading:false,
headerHeight: '', //顶部高度
prize_arr: [{
id: '1',
type: 'prize',
name: '20金币',
isSelected: false,
img: 'https://jiaapi.jiusuding.cn/uploads/20221121/f926d7ab5547f0d62c85a8966380f2c1.png'
},
{
id: '2',
type: 'prize',
name: '10元折扣券',
isSelected: false,
img: 'https://jiaapi.jiusuding.cn/uploads/20221121/bc1b0f8a92fc45ce907f5dce535dc0a4.png'
},
{
id: '3',
type: 'prize',
name: '25金币',
isSelected: false,
img: 'https://jiaapi.jiusuding.cn/uploads/20221121/f926d7ab5547f0d62c85a8966380f2c1.png'
},
{
id: '4',
type: 'prize',
name: '20元运费券',
isSelected: false,
img: 'https://jiaapi.jiusuding.cn/uploads/20221121/cee112802cfe07863c421dea0b4b3f1a.png'
},
{
id: '5',
type: 'btn',
name: '立即抽奖',
isSelected: false,
img: 'https://jiaapi.jiusuding.cn/uploads/20221121/30c2133f79fe86bcf396a1f1eb280eed.png'
},
{
id: '6',
type: 'prize',
name: '20元运费券',
isSelected: false,
img: 'https://jiaapi.jiusuding.cn/uploads/20221121/cee112802cfe07863c421dea0b4b3f1a.png',
},
{
id: '7',
type: 'prize',
name: '谢谢参与',
isSelected: false,
img: 'https://jiaapi.jiusuding.cn/uploads/20221121/9ccfca960a9d1a6686a06cf268f179c0.png'
},
{
id: '8',
type: 'prize',
name: '幸运礼包',
isSelected: false,
img: 'https://jiaapi.jiusuding.cn/uploads/20221121/b6d6adeaf1cf081978d0afaef5719ea9.png'
},
{
id: '9',
type: 'prize',
name: '20元运费券',
isSelected: false,
img: 'https://jiaapi.jiusuding.cn/uploads/20221121/cee112802cfe07863c421dea0b4b3f1a.png'
},
],
isTurnOver: true, // 抽奖状态，是否转完了
num_interval_arr: [90, 80, 70, 60, 50, 50, 50, 100, 150, 250],
order_arr: [0, 1, 2, 5, 8, 7, 6, 3],
isRecover: false, // 是否需要复原，把没转完的圈转完
prize_id_last: '', // 记录上一次抽奖后的奖品id
luckLog: [], //中奖滚动数据
prize_name: '', //中奖名
drawList: [], //中奖记录,
last_page: 0,
page: 1,
nowIndex:0,
};
},
mounted() {
this.computedheight()
this.getLuckLog()
this.getPrizeList()
},
methods: {
navigateTo(url) {
uni.navigateTo({
url
});
},
// 中奖滚动
getLuckLog() {
this.$post('v2.Luck/luckLog', {}, true).then(res => {
this.luckLog = res.data.data.list
})
},
// 获取抽奖列表
getPrizeList() {
this.$post('v2.Luck/list', {}, true).then(res => {
for (let i = 0; i < res.data.data.list.length; i++) {
res.data.data.list[i].isSelected = false
}
this.prize_arr = res.data.data.list
const temp = [{
id: '',
type: 'btn',
name: '立即抽奖',
isSelected: false,
image_text: 'https://jiaapi.jiusuding.cn/uploads/20221205/e9f67b97303b25cedd8d29dbc4cfceef.png'
}, ]
this.prize_arr.splice(4, 0, ...temp)
})
},
// 抽奖记录
drawLog() {
this.loading = true
this.$refs.popups.open('center')
this.$post('v2.Luck/getList', {page: this.page}, true).then(res => {
for (let i = 0; i < res.data.data.data.data.length; i++) {
this.drawList.push(res.data.data.data.data[i])
}
this.last_page = res.data.data.data.last_page
this.loading = false
})
},
// 弹出层关闭
closes() {
this.$refs.popup.close()
this.recordList = []
this.page = 1
},
// 滚动到底部记录
scrollHander(e) {
if (this.last_page > this.page) {
this.page = this.page + 1
this.drawLog()
}
},
back() {
uni.navigateBack({
delta: 1
});
},
computedheight() {
this.headerHeight = uni.getSystemInfoSync().statusBarHeight
},
// 点击抽奖
clickPrize() {
// 如果不在抽奖状态中，则执行抽奖旋转动画
if (this.isTurnOver) {
// 把抽奖状态改为未完成
this.isTurnOver = false
// 这里开始假设已经调取后端接口拿到抽奖后返回的ID
this.$post('v2.Luck/StartRaffle', {}, true).then(res => {
console.log(res,'抽奖');
if(res.data.code == 1){
this.prize_name = res.data.data.data.name
let prize_id = res.data.data.data.id
this.lottery(prize_id);
}else{
this.isTurnOver = true
}
})
// 调用抽奖方法
} else {
uni.showToast({
title: '请勿重复点击',
icon: 'none'
})
let timer = setTimeout(() => {
this.isTurnOver = true
}, 6000)
}
},
// 抽奖旋转动画方法
async lottery(prize_id) {
// 如果不是第一次抽奖，需要等待上一圈没跑完的次数跑完再执行
this.recover().then(() => {
let num_interval_arr = this.num_interval_arr;
let order_arr = this.order_arr;
// 旋转的总次数
let sum_rotate = num_interval_arr.length;
// 每一圈所需要的时间
let interval = 0;
num_interval_arr.forEach((delay, index) => {
setTimeout(() => {
this.rotateCircle(delay, index + 1, sum_rotate, prize_id,
order_arr);
}, interval)
//因为每一圈转完所用的时间是不一样的，所以要做一个叠加操作
interval += delay * 8;
})
})
},
/*
* 封装旋转一圈的动画函数，最后一圈可能不满一圈
* delay:表示一个奖品跳到另一个奖品所需要的时间
* index:表示执行到第几圈
* sum_rotate：表示旋转的总圈数
* prize_id：中奖后的id号
* order_arr_pre：表示旋转这一圈的执行顺序
*/
rotateCircle(delay, index, sum_rotate, prize_id, order_arr_pre) {
let _this = this;
// 页面奖品总数组
let prize_arr = this.prize_arr;
// 执行顺序数组
let order_arr = []
// 如果转到最后以前，把数组截取到奖品项的位置
for(let j =0; j <prize_arr.length; j++){
if(prize_arr[j].id == prize_id){
for(let k = 0; k <_this.order_arr.length; k++){
if(_this.order_arr[k] == j){
_this.nowIndex = k
}
}
}
}
if (index == sum_rotate) {
order_arr = order_arr_pre.slice(0, _this.nowIndex+1)
} else {
order_arr = order_arr_pre;
}
for (let i = 0; i < order_arr.length; i++) {
setTimeout(() => {
// 清理掉选中的转态
prize_arr.forEach(e => {
e.isSelected = false
})
// 执行到第几个就改变它的选中状态
prize_arr[order_arr[i]].isSelected = true;
// 更新状态
_this.prize_arr = prize_arr
// 如果转到最后一圈且转完了，并且是非重置圈，把抽奖状态改为已经转完了
if (index === sum_rotate && i === order_arr.length - 1 && !this.isRecover) {
_this.isTurnOver = true,
_this.isRecover = true,
_this.prize_id_last = prize_id
this.$refs.popup.open('center')
}
}, delay * i)
}
},
async recover() {
if (this.isRecover) { // 判断是否需要重置操作
let delay = this.num_interval_arr[0]; // 为了衔接流程，使用第一圈的转速
let order_arr = this.order_arr;
let prize_id_last = this.prize_id_last; // 上一次抽奖的id
order_arr = order_arr.slice(prize_id_last); // 截取未跑完的格子数组
return await new Promise(resolve => { // 确保跑完后才去执行新的抽奖
this.rotateCircle(delay, 1, 1, 8, order_arr); // 第一圈的速度，最多只有一圈，旋转一圈，跑到最后一个奖品为止，未跑完的数组
setTimeout(() => { // 确保跑完后才告诉程序不用重置复原了
this.isRecover = false,
resolve() // 告诉程序Promise执行完了
}, delay * order_arr.length)
})
}
},
closed() {
this.$refs.popups.close()
},
},
}
</script>
<style lang="scss" scoped>
.content {
background: url('https://jiaapi.jiusuding.cn/uploads/20221205/7c9ea09eac3bdee7b45352c28f64355b.png') no-repeat center;
// background-size: 100% 100%;
.header {
position: fixed;
.title {
height: 88rpx;
line-height: 88rpx;
display: flex;
align-items: center;
padding-left: 32rpx;
z-index: 999;
text {
margin-left: 220rpx;
}
}
}
.boday {
.win {
width: 276px;
height: 21px;
background: #FC682D;
border-radius: 20.5px;
position: absolute;
left: 50%;
margin-left: -138px;
top: 231px;
color: #fff;
display: flex;
overflow: hidden;
view {
white-space: nowrap;
padding: 0 10px;
transform: translateX(0);
animation: cssmarquee 50s linear infinite;
}
}
@keyframes cssmarquee {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-4000px);
/* words -100% */
}
}
.record {
position: absolute;
top: 265px;
right: 20px;
// border: 1px solid #fff;
border-radius: 20px;
color: #fff;
font-size: 12px;
padding: 6rpx 10rpx;
// background: #FFD04D;
background: #FC682D;
}
.changeRecord {
background: linear-gradient(238deg, #FE732E 4%, #FF3941 96%);
width: 642rpx;
height: 800rpx;
position: relative;
border-radius: 50rpx;
.close {
width: 68rpx;
height: 68rpx;
position: absolute;
right: 0;
top: -100rpx;
}
.title {
font-size: 20px;
color: #fff;
text-align: center;
padding-top: 40rpx;
}
.recordList {
display: flex;
justify-content: space-between;
align-items: center;
color: #fff;
border-bottom: 1px solid #F66152;
padding: 25rpx 0;
margin-left: 20rpx;
margin-right: 20rpx;
.lefts {
font-size: 15px;
display: flex;
align-items: center;
.pic {
image {
width: 80rpx;
height: 80rpx;
}
}
.name {
margin-left: 10rpx;
}
}
.right {
color: #fff;
font-size: 14px;
}
}
}
.box1 {
position: absolute;
left: 130rpx;
top: 828rpx;
z-index: 99;
// padding-top: 315px;
// // 371
height: 452rpx;
width: 496rpx;
background-color: #D72401;
display: flex;
flex-wrap: wrap;
text-align: center;
.grayscale {
filter: grayscale(50%);
}
.prizes {
margin: auto;
box-sizing: border-box;
width: 158rpx;
height: 130rpx;
font-size: 20rpx;
color: #FC6933;
background-color: #fff;
border-radius: 16px;
box-shadow: 0px 6px 0px 1px #EEB8AA;
// text-align: center;
// 20元券
.image1 {
width: 80rpx;
height: 90rpx;
margin-top: 10rpx;
}
// 金币
.image2 {
width: 61px;
height: 50px;
}
// 10元券
.image3 {
width: 34px;
height: 42px;
margin-top: 6px;
}
// 礼盒
.image4 {
width: 42px;
height: 39px;
}
// 谢谢参与
.image5 {
width: 44px;
height: 43px;
}
.box3 {
margin-top: -7px;
}
.box7 {
margin-top: -4px;
}
}
.selected {
border: 3px solid #FFDB28;
}
.btnPrize {
font-size: 20px;
line-height: 60rpx;
background-size: 100% 100%;
}
.result {
background: url(https://jiaapi.jiusuding.cn/uploads/20221205/986910985d128a803c388e47b3c3ac41.png) no-repeat;
background-size: 100%;
text-align: center;
width: 300px;
height: 264px;
box-sizing: border-box;
border: 1px solid rgba(200, 200, 200, 0);
position: relative;
.close {
position: absolute;
width: 34px;
height: 34px;
bottom: -51px;
left: 50%;
margin-left: -17px;
}
.title1 {
font-size: 24px;
font-weight: normal;
letter-spacing: 0.1em;
color: #FFDA88;
text-shadow: 0px 2px 5px 0px #CF3015;
margin-top: 106px;
}
.title2 {
font-size: 22px;
font-weight: 500;
letter-spacing: 0.1em;
color: #FFFFFF;
text-shadow: 0px 2px 5px 0px #CF3015;
margin-top: 9px;
}
.title3 {
font-size: 14px;
font-weight: normal;
letter-spacing: 0.1em;
color: #FFFFFF;
text-shadow: 0px 2px 5px 0px #CF3015;
margin-top: 17px;
}
}
}
.explain {
position: absolute;
width: 674rpx;
top: 1448rpx;
left: 50%;
margin-left: -337rpx;
background: #FFFFFF;
border-radius: 10px;
.title {
display: inline;
display: flex;
justify-content: center;
align-items: center;
line-height: 43px;
view:nth-child(1),
view:nth-child(5) {
width: 5px;
height: 5px;
border-radius: 50%;
background-color: #FB5929;
}
view:nth-child(2),
view:nth-child(4) {
width: 7px;
height: 7px;
border-radius: 50%;
background-color: #FB5929;
margin: 0 12rpx;
}
view:nth-child(3) {
font-size: 18px;
font-weight: 550;
}
}
.main {
margin-left: 17px;
font-size: 12px;
line-height: 20px;
font-weight: normal;
color: #3D3D3D;
padding-bottom: 88px;
}
}
}
}
.content::before {
content: '';
display: block;
width: 750rpx;
// height: 1625rpx;
height: 2253rpx;
position: absolute;
// 2253
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url('https://jiaapi.jiusuding.cn/uploads/20221205/7c9ea09eac3bdee7b45352c28f64355b.png');
background-size: 100% auto;
background-position: 0 0;
background-repeat: no-repeat;
z-index: 0;
}
</style>
1136
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
