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.
561 lines
24 KiB
561 lines
24 KiB
3 months ago
|
<template>
|
||
|
|
<view class="lottery">
|
||
|
|
<view class="grids" :style="[gridsImage]">
|
||
|
|
<!-- #ifdef MP || APP-PLUS -->
|
||
|
|
<view :style="{ height: `${getHeight.barTop}px` }"></view>
|
||
|
|
<view :style="{ height: `${getHeight.barHeight}px` }"></view>
|
||
|
|
<!-- #endif -->
|
||
|
|
<view class="grids-content">
|
||
|
|
<view v-if="isContent" class="rules-button" @click="rulesShow = true">抽奖规则</view>
|
||
|
|
<view class="marquee-wrapper acea-row row-middle" v-if="userList.length">
|
||
|
|
<text class="iconfont icon-ic_horn1"></text>
|
||
|
|
<view class="marquee-wrapper-content">
|
||
|
|
<noticeBar :showMsg="userList"></noticeBar>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="grids-box">
|
||
|
|
<gridsLottery :isRotating="isRotating" :lotteryNum="lotteryNum" :winingIndex="lottery_draw_param.winingIndex" :prizeData="prizeList" @get_winingIndex='getWiningIndexs'
|
||
|
|
@luck_draw_finish='luck_draw_finish'>
|
||
|
|
</gridsLottery>
|
||
|
|
</view>
|
||
|
|
<view class="draw-button" :style="{
|
||
|
|
backgroundImage: `url(${imgHost}/statics/images/lottery1.png)`
|
||
|
|
}" @click="getWiningIndex">
|
||
|
|
<image :src="`${imgHost}/statics/images/lottery3.png`" class="hand"></image>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="show-box-wrapper">
|
||
|
|
<view class="show-box-list">
|
||
|
|
<view class="showBox" v-if="userList.length && isAll">
|
||
|
|
<showBox :showMsg="{type: 'user',data: userList}"></showBox>
|
||
|
|
</view>
|
||
|
|
<view class="showBox" v-if="prizeList.length">
|
||
|
|
<showBox :showMsg="{type: 'prize',data: prizeList}"></showBox>
|
||
|
|
</view>
|
||
|
|
<view class="showBox" v-if="myList.length && isPersonal">
|
||
|
|
<showBox :showMsg="{type: 'me',data: myList}"></showBox>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="safe-area-inset-bottom"></view>
|
||
|
|
</view>
|
||
|
|
<!-- 抽奖规则弹窗 -->
|
||
|
|
<view v-if="rulesShow" class="mask" @touchmove.stop.prevent="moveHandle"></view>
|
||
|
|
<view class="rules-popup" :class="{ active: rulesShow }" @touchmove.stop.prevent="moveHandle">
|
||
|
|
<view class="popup-top acea-row row-center-wrapper">
|
||
|
|
<view class="title">抽奖规则</view>
|
||
|
|
<text class="iconfont icon-ic_close1" @click="rulesShow = false"></text>
|
||
|
|
</view>
|
||
|
|
<scroll-view scroll-y="true" class="popup-center">
|
||
|
|
<view v-html="htmlData"></view>
|
||
|
|
</scroll-view>
|
||
|
|
<view class="popup-bottom">
|
||
|
|
<view class="button acea-row row-center-wrapper" @click="rulesShow = false">我知道了</view>
|
||
|
|
</view>
|
||
|
|
<view class="safe-area-inset-bottom"></view>
|
||
|
|
</view>
|
||
|
|
<!-- #ifdef H5 -->
|
||
|
|
<view class="followCode" v-if="followCode">
|
||
|
|
<view class="pictrue">
|
||
|
|
<view class="code-bg"><img class="imgs" :src="codeSrc" /></view>
|
||
|
|
</view>
|
||
|
|
<view class="mask" @click="closeFollowCode"></view>
|
||
|
|
</view>
|
||
|
|
<zb-code ref="qrcode" v-show="false" :show="codeShow" :cid="cid" :val="val" :onval="onval" :loadMake="loadMake" @result="qrR" />
|
||
|
|
<!-- #endif -->
|
||
|
|
<!-- #ifdef H5 -->
|
||
|
|
<template v-if="isWeixin">
|
||
|
|
<view class="invite-people-wrap">
|
||
|
|
<view class="invite-people-inner">
|
||
|
|
<view class="invite-people">
|
||
|
|
<view class="">邀请好友<text></text></view>
|
||
|
|
<view class="invite" @click="$emit('H5Share')">
|
||
|
|
去邀请
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="safe-area-inset-bottom"></view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="invite-people-placeholder"></view>
|
||
|
|
<view class="safe-area-inset-bottom"></view>
|
||
|
|
</template>
|
||
|
|
<!-- #endif -->
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import {
|
||
|
|
getUserInfo
|
||
|
|
} from '@/api/user.js';
|
||
|
|
import zbCode from '@/components/zb-code/zb-code.vue'
|
||
|
|
import gridsLottery from '../../components/lottery/index.vue'
|
||
|
|
import showBox from '../components/showbox.vue'
|
||
|
|
import noticeBar from '../components/noticeBar.vue'
|
||
|
|
import {
|
||
|
|
HTTP_REQUEST_URL
|
||
|
|
} from '@/config/app';
|
||
|
|
export default {
|
||
|
|
props: {
|
||
|
|
type: {
|
||
|
|
type: String,
|
||
|
|
default: ''
|
||
|
|
},
|
||
|
|
prizeList: {
|
||
|
|
type: Array,
|
||
|
|
default () {
|
||
|
|
return [];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
userList: {
|
||
|
|
type: Array,
|
||
|
|
default () {
|
||
|
|
return [];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
myList: {
|
||
|
|
type: Array,
|
||
|
|
default () {
|
||
|
|
return [];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
htmlData: {
|
||
|
|
type: String,
|
||
|
|
default: ''
|
||
|
|
},
|
||
|
|
isPersonal: {
|
||
|
|
type: Number,
|
||
|
|
default: 0
|
||
|
|
},
|
||
|
|
isAll: {
|
||
|
|
type: Number,
|
||
|
|
default: 0
|
||
|
|
},
|
||
|
|
isContent: {
|
||
|
|
type: Number,
|
||
|
|
default: 0
|
||
|
|
},
|
||
|
|
image: {
|
||
|
|
type: String,
|
||
|
|
default: ''
|
||
|
|
},
|
||
|
|
lotteryNum: {
|
||
|
|
type: Number,
|
||
|
|
default: 0
|
||
|
|
},
|
||
|
|
},
|
||
|
|
components: {
|
||
|
|
gridsLottery,
|
||
|
|
showBox,
|
||
|
|
noticeBar,
|
||
|
|
zbCode,
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
imgHost: HTTP_REQUEST_URL,
|
||
|
|
H5ShareBox: false,
|
||
|
|
// #ifdef H5
|
||
|
|
isWeixin: this.$wechat.isWeixin(),
|
||
|
|
// #endif
|
||
|
|
lottery_num: 0,
|
||
|
|
lottery_draw_param: {
|
||
|
|
startIndex: 3, //开始抽奖位置，从0开始
|
||
|
|
totalCount: 3, //一共要转的圈数
|
||
|
|
winingIndex: 1, //中奖的位置，从0开始
|
||
|
|
speed: 100 //抽奖动画的速度 [数字越大越慢,默认100]
|
||
|
|
},
|
||
|
|
factor_num: 0,
|
||
|
|
id: 0,
|
||
|
|
followCode: false,
|
||
|
|
//二维码参数
|
||
|
|
codeShow: false,
|
||
|
|
cid: '1',
|
||
|
|
ifShow: true,
|
||
|
|
val: "", // 要生成的二维码值
|
||
|
|
lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
|
||
|
|
onval: true, // val值变化时自动重新生成二维码
|
||
|
|
loadMake: true, // 组件加载完成后自动生成二维码
|
||
|
|
src: '', // 二维码生成后的图片地址或base64
|
||
|
|
codeSrc: "",
|
||
|
|
// image: "", //上部背景图
|
||
|
|
// is_content: 0,
|
||
|
|
// is_all_record: 0,
|
||
|
|
// is_personal_record: 0,
|
||
|
|
factor: 0,
|
||
|
|
rulesShow: false,
|
||
|
|
isRotating: false,
|
||
|
|
// #ifdef MP || APP-PLUS
|
||
|
|
getHeight: this.$util.getWXStatusHeight(),
|
||
|
|
// #endif
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
gridsImage() {
|
||
|
|
return {
|
||
|
|
backgroundImage: `url(${this.image})`
|
||
|
|
};
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
//#ifdef H5
|
||
|
|
ShareInfo(data) {
|
||
|
|
let href = location.href;
|
||
|
|
if (this.$wechat.isWeixin()) {
|
||
|
|
getUserInfo().then(res => {
|
||
|
|
href = href.indexOf('?') === -1 ? href + '?spid=' + res.data.uid : href + '&spid=' +
|
||
|
|
res.data.uid;
|
||
|
|
let configAppMessage = {
|
||
|
|
desc: data.name,
|
||
|
|
title: data.name,
|
||
|
|
link: href,
|
||
|
|
imgUrl: data.image
|
||
|
|
};
|
||
|
|
this.$wechat
|
||
|
|
.wechatEvevt(['updateAppMessageShareData', 'updateTimelineShareData',
|
||
|
|
'onMenuShareAppMessage',
|
||
|
|
'onMenuShareTimeline'
|
||
|
|
], configAppMessage)
|
||
|
|
.then(res => {})
|
||
|
|
.catch(err => {});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
//#endif
|
||
|
|
getWiningIndexs(param) {
|
||
|
|
this.lottery_draw_param.winingIndex = param.winingIndex;
|
||
|
|
this.isRotating = true
|
||
|
|
},
|
||
|
|
getWiningIndex() {
|
||
|
|
this.$emit('getWiningIndex', this.getWiningIndexs);
|
||
|
|
},
|
||
|
|
// 抽奖完成
|
||
|
|
luck_draw_finish(param) {
|
||
|
|
this.isRotating = false;
|
||
|
|
this.$emit('luck_draw_finish');
|
||
|
|
// this.aleartType = 2
|
||
|
|
// this.aleartStatus = true
|
||
|
|
// this.isRotating = false
|
||
|
|
// console.log(`抽到第${param+1}个方格的奖品`)
|
||
|
|
},
|
||
|
|
qrR(res) {
|
||
|
|
this.codeSrc = res
|
||
|
|
},
|
||
|
|
moveHandle() {}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
page {
|
||
|
|
background-color: #E74435;
|
||
|
|
}
|
||
|
|
|
||
|
|
.lottery {
|
||
|
|
background-color: #E74435;
|
||
|
|
min-height: 100vh;
|
||
|
|
padding: 0 0 20rpx 0;
|
||
|
|
|
||
|
|
.mask {
|
||
|
|
z-index: 1000;
|
||
|
|
}
|
||
|
|
|
||
|
|
.rules-popup {
|
||
|
|
position: fixed;
|
||
|
|
right: 0;
|
||
|
|
bottom: 0;
|
||
|
|
left: 0;
|
||
|
|
z-index: 1001;
|
||
|
|
border-radius: 32rpx 32rpx 0 0;
|
||
|
|
background-color: #FFFFFF;
|
||
|
|
transform: translateY(100%);
|
||
|
|
transition: 0.3s;
|
||
|
|
|
||
|
|
&.active {
|
||
|
|
transform: translateY(0);
|
||
|
|
}
|
||
|
|
|
||
|
|
&::before {
|
||
|
|
content: "";
|
||
|
|
position: absolute;
|
||
|
|
width: 100%;
|
||
|
|
height: 280rpx;
|
||
|
|
background: linear-gradient(rgba(233, 51, 35, 0.20), rgba(255, 255, 255, 0));
|
||
|
|
}
|
||
|
|
|
||
|
|
.popup-top {
|
||
|
|
position: relative;
|
||
|
|
height: 108rpx;
|
||
|
|
|
||
|
|
.title {
|
||
|
|
font-weight: 500;
|
||
|
|
font-size: 32rpx;
|
||
|
|
color: #333333;
|
||
|
|
}
|
||
|
|
|
||
|
|
.iconfont {
|
||
|
|
position: absolute;
|
||
|
|
top: 38rpx;
|
||
|
|
right: 34rpx;
|
||
|
|
font-size: 34rpx;
|
||
|
|
color: #BBBBBB;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.popup-center {
|
||
|
|
height: 972rpx;
|
||
|
|
padding: 0 32rpx;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
.popup-bottom {
|
||
|
|
padding: 20rpx;
|
||
|
|
|
||
|
|
.button {
|
||
|
|
height: 72rpx;
|
||
|
|
border-radius: 36rpx;
|
||
|
|
background-color: #E93323;
|
||
|
|
font-weight: 500;
|
||
|
|
font-size: 26rpx;
|
||
|
|
color: #FFFFFF;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.rules-button {
|
||
|
|
position: absolute;
|
||
|
|
bottom: 1048rpx;
|
||
|
|
right: 0;
|
||
|
|
width: 52rpx;
|
||
|
|
padding: 10rpx 15rpx;
|
||
|
|
border-radius: 16rpx 0 0 16rpx;
|
||
|
|
background: linear-gradient(90deg, #FF8D8D 0%, #FF3F3F 100%);
|
||
|
|
font-weight: 500;
|
||
|
|
font-size: 22rpx;
|
||
|
|
line-height: 30rpx;
|
||
|
|
color: #FFFFFF;
|
||
|
|
}
|
||
|
|
|
||
|
|
.lottery-header {
|
||
|
|
width: 100%;
|
||
|
|
height: 580rpx;
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.grids {
|
||
|
|
// display: flex;
|
||
|
|
// flex-direction: column;
|
||
|
|
// justify-content: center;
|
||
|
|
// align-items: center;
|
||
|
|
background-position: left bottom;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-size: 100%;
|
||
|
|
|
||
|
|
.grids-content {
|
||
|
|
position: relative;
|
||
|
|
height: 1212rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.grids-box {
|
||
|
|
position: absolute;
|
||
|
|
bottom: 278rpx;
|
||
|
|
left: 50%;
|
||
|
|
width: 540rpx;
|
||
|
|
height: 540rpx;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.grids-top {
|
||
|
|
display: flex;
|
||
|
|
|
||
|
|
image {
|
||
|
|
width: 40rpx;
|
||
|
|
height: 40rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.grids-title {
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
width: 100%;
|
||
|
|
font-size: 20px;
|
||
|
|
color: #fff;
|
||
|
|
z-index: 999;
|
||
|
|
padding: 0 14rpx;
|
||
|
|
|
||
|
|
.grids-frequency {
|
||
|
|
color: #FFD68E;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.marquee-wrapper {
|
||
|
|
position: absolute;
|
||
|
|
bottom: 876rpx;
|
||
|
|
left: 50%;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
width: 540rpx;
|
||
|
|
height: 62rpx;
|
||
|
|
padding: 0 32rpx;
|
||
|
|
|
||
|
|
.iconfont {
|
||
|
|
margin-right: 16rpx;
|
||
|
|
font-size: 32rpx;
|
||
|
|
color: #FFEF6C;
|
||
|
|
}
|
||
|
|
|
||
|
|
.marquee-wrapper-content {
|
||
|
|
flex: 1;
|
||
|
|
min-width: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.invite-people-placeholder {
|
||
|
|
height: 120rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.invite-people-wrap {
|
||
|
|
position: fixed;
|
||
|
|
right: 0;
|
||
|
|
bottom: 0;
|
||
|
|
left: 0;
|
||
|
|
z-index: 2;
|
||
|
|
background-color: #FFFFFF;
|
||
|
|
}
|
||
|
|
|
||
|
|
.invite-people-inner {
|
||
|
|
background-color: rgba(233, 51, 35, 0.1);
|
||
|
|
}
|
||
|
|
|
||
|
|
.invite-people {
|
||
|
|
padding: 28rpx 32rpx 28rpx 150rpx;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
background-image: url(data:image/png;base64,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
|
||
|
|
background-position: 32rpx center;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-size: 102rpx;
|
||
|
|
|
||
|
|
.invite {
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
width: 136rpx;
|
||
|
|
height: 64rpx;
|
||
|
|
font-size: 24rpx;
|
||
|
|
font-weight: 500;
|
||
|
|
color: #FFFFFF;
|
||
|
|
background: linear-gradient(90deg, #FF7931 0%, #E93323 100%);
|
||
|
|
box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(138, 0, 0, 0.2726);
|
||
|
|
border-radius: 32rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.mask {
|
||
|
|
position: fixed;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
bottom: 0;
|
||
|
|
background-color: rgba(0, 0, 0, 0.8);
|
||
|
|
z-index: 9;
|
||
|
|
}
|
||
|
|
|
||
|
|
.share-box {
|
||
|
|
z-index: 1300;
|
||
|
|
position: fixed;
|
||
|
|
left: 0;
|
||
|
|
top: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
|
||
|
|
image {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.followCode {
|
||
|
|
.pictrue {
|
||
|
|
width: 500rpx;
|
||
|
|
height: 530rpx;
|
||
|
|
border-radius: 12px;
|
||
|
|
left: 50%;
|
||
|
|
top: 50%;
|
||
|
|
margin-left: -250rpx;
|
||
|
|
margin-top: -360rpx;
|
||
|
|
position: fixed;
|
||
|
|
z-index: 10000;
|
||
|
|
|
||
|
|
.code-bg {
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background-image: url('~@/static/images/code-bg.png');
|
||
|
|
background-size: 100% 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.imgs {
|
||
|
|
width: 310rpx;
|
||
|
|
height: 310rpx;
|
||
|
|
margin-top: 92rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.mask {
|
||
|
|
z-index: 9999;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.no-lottery {
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
font-size: 28rpx;
|
||
|
|
color: #ccc;
|
||
|
|
}
|
||
|
|
|
||
|
|
[v-cloak] {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.draw-button {
|
||
|
|
position: absolute;
|
||
|
|
bottom: 52rpx;
|
||
|
|
left: 50%;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
width: 470rpx;
|
||
|
|
height: 141rpx;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
|
||
|
|
.hand {
|
||
|
|
position: absolute;
|
||
|
|
top: -20rpx;
|
||
|
|
right: -20rpx;
|
||
|
|
width: 220rpx;
|
||
|
|
height: 242rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.show-box-wrapper {
|
||
|
|
padding: 20rpx;
|
||
|
|
background-color: #EC4545;
|
||
|
|
}
|
||
|
|
|
||
|
|
.show-box-list {
|
||
|
|
padding: 30rpx 20rpx;
|
||
|
|
border-radius: 24rpx;
|
||
|
|
background: #E23B1F;
|
||
|
|
box-shadow: inset 0rpx 1rpx 3rpx 0rpx rgba(0, 0, 0, 0.5);
|
||
|
|
|
||
|
|
.showBox+.showBox {
|
||
|
|
margin-top: 60rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.table .table-head .nickname {
|
||
|
|
width: 20%;
|
||
|
|
}
|
||
|
|
</style>
|