<template>
<view class="luckyDraw">
<image src="../../static/backImg.png" class="back" mode="widthFix"></image>
<view class="luckyDrawContent">
<!-- 个人信息模块 -->
<view class="luckyDrawTop">
<view class="left">
<view class="avatarView">
<open-data type="userAvatarUrl" class="avatar"></open-data>
</view>
<view class="userInfo">
<view class="account">{{mpName}}</view>
<view class="ID">ID:{{userId}}</view>
</view>
</view>
<view class="right" @click="jumpSign">
<text>签到有礼</text>
</view>
</view>
<!-- 滚动通知 -->
<view class="notice">
<image src="../../static/horn.png" class="horn" mode="widthFix"></image>
<view class="txts">
<u-notice-bar mode="vertical" :volume-icon="false" color="#FFFFFF" type="none" :list="list"></u-notice-bar>
</view>
</view>
<!-- 大转盘 -->
<view class="turntable">
<view class="decorate">
<image src="../../static/decorate.png" class="decorateBack" mode="widthFix"></image>
<image src="../../static/chassis.png" class="decorateChassis" mode="widthFix"></image>
</view>
<view class="turntableContent">
<almost-lottery
:canvasId="canvasConfig.canvasId"
:canvasWidth="canvasConfig.width"
:canvasHeight="canvasConfig.height"
:outerWidth="canvasConfig.outerWidth"
:outerHeight="canvasConfig.outerHeight"
:colors="canvasConfig.colors"
:ringCount="8"
:duration="1"
:prizeList="prizeList"
:prizeIndex="prizeIndex"
@reset-index="prizeIndex = -1"
@draw-start="handleDrawStart"
@draw-end="handleDrawEnd"
@finish="handleDrawFinish"
v-if="prizeList.length"
/>
<view class="bottom">
<view class="cont">今日剩余抽奖次数：<text>{{freeNum}}</text></view>
<navigator :url="'../checkInRecord/checkInRecord' + getSerialize({...mpData, openId})" class="record" hover-class="none">
<text>中奖记录</text>
</navigator>
</view>
</view>
</view>
<!-- 我的奖品 -->
<view class="myPrize">
<view class="title">我的奖品</view>
<view class="chips">
<view class="chip" v-for="(item, index) in prizeCountDtoList" :key="index">
<image src="../../static/iPhone12Chip.png" mode="widthFix" v-if="item.prizeType === 3"></image>
<image src="../../static/vipChip.png" mode="widthFix" v-else></image>
<view class="text">{{item.prizeName}}</view>
<view class="progress">
<view class="value" :style="{width: item.prizeCount && item.prizeCount > 0 ? (item.prizeCount/item.maxCount*100) + '%' : '0'}"></view>
<text>{{item.prizeCount}}/{{item.maxCount}}</text>
</view>
</view>
</view>
<view class="clearTime" v-if="clearTime">碎片有效期至：{{clearTime | getTimerFilter}} </view>
</view>
<!-- 活动规则模块 -->
<view class="activityRules">
<view class="top" @click="activityRulesHandle">
<text>活动规则</text>
<image :src="!activityRules ? '../../static/unfold.png' : '../../static/retract.png'" mode="widthFix"></image>
</view>
<view class="bottom" v-if="activityRules">
<view>1、每个用户账户每天最多有10次抽奖机会，每天0点刷新。</view>
<view>2、每天前2次可直接领取抽奖奖品，其他8次抽奖机会需要通过观看激励视频来获得。</view>
<view>3、用户必须在对应公众号内登陆抽奖，否则书币将无法顺利领取。</view>
<view>4、书币及7天书城VIP会员抽中后自动发放至书城账号，可在中奖记录中查看，或进入书城的“个人中心-充值记录-赠送”查看。</view>
<view>5、用户可以通过完成本产品抽奖获得碎片，碎片种类由系统随机发放，兑换手机需集满50个碎片， 兑换书城VIP需集满30个碎片。碎片累计有效期为7天，在碎片超出有效期后或用户成功兑换奖品后，此前已获得的该奖品碎片都将清零。</view>
<view>6、实物奖品请联系公众号内客服领取，实物奖品颜色随机寄送，以中奖用户收到的实物为准。</view>
<view>7、若发现用户恶意违规行为，开发者有权取消其获奖资格。</view>
<view>8、本活动解释权由开发者所有，有任何疑问请联系公众号内客服。</view>
</view>
</view>
<!-- 弹窗 -->
<view class="popup" v-if="popupShow">
<view class="popupContent">
<view class="content">
<image src="../../static/popupBack.png"></image>
<view class="textCon">
<text class="ts">中奖了!</text> </br>
<text class="reward">恭喜您获得{{luckyDay.name}}</text> </br>
<image src="../../static/doubleBt.png" class="doubleBt" mode="widthFix" @click="lookVideo"></image> </br>
<text class="bt" @click="receiveGold(false)">不了，单倍领取</text>
</view>
</view>
<image src="../../static/close.png" class="close" mode="widthFix" @click="closeHandle"></image>
</view>
</view>
</view>
</view>
</template>
<script>
let timer = null
import AlmostLottery from '@/uni_modules/almost-lottery/components/almost-lottery/almost-lottery.vue'
import { config, getHome, getOpenId, getBanner, setDrawGain, getPond, setReceive } from '@/api/api.js'
import { clearCacheFile } from '@/uni_modules/almost-lottery/utils/almost-utils.js'
export default {
components: {
AlmostLottery
},
data() {
return {
title: 'Hello',
list: [
'恭喜用户 “9016” 成功提现 2000书币',
'恭喜用户 “9017” 成功提现 10书币',
'恭喜用户 “9018” 成功提现 20书币',
'恭喜用户 “9019” 成功提现 100书币'
],
// canvas id、宽、高
canvasConfig: {
canvasId: 'almostLotteryCanvas',
width: 300,
height: 300,
outerWidth: 325,
outerHeight: 325,
colors: [
'#FEE3C6',
'#FFFFFF'
]
},
// 以下是奖品配置数据
// 奖品数据
prizeList: [],
// 奖品是否设有库存
onStock: false,
// 中奖下标
prizeIndex: -1,
// 是否正在抽奖中，避免重复触发
prizeing: false,
// 以下为中奖概率有关数据
// 是否由前端控制概率，默认不开启，强烈建议由后端控制
onFrontend: false,
// 权重随机数的最大值
weightTotal: 0,
// 权重数组
weightArr: [],
// 以下为业务需求有关示例数据
// 金币余额
goldCoin: 50,
// 当日免费抽奖次数余额
freeNum: 10,
// 每次消耗的金币数
goldNum: 20,
// 每天免费抽奖次数
freeNumDay: 2,
// 以下是
// 活动规则开关控制
activityRules: false,
// 弹窗控制
popupShow: false,
openId: '',
mpData: {},
prizeCountDtoList: [], // 碎片列表
mpName: null, // 渠道号
userId: null, //
luckyDay: {}, // 中奖信息
doubleKey: "", // 领取key
clearTime: "", // 碎片有效期
}
},
computed: {
isApple() {
return uni.getSystemInfoSync().platform === 'ios'
}
},
onLoad(options) {
// 请求奖品数据
this.mpData = options
this.getData()
},
onUnload() {
uni.hideLoading()
},
onShareAppMessage() {},
filters: {
getTimerFilter(value) { // 获取年月日时分秒
if(!value) return ""
let timestamp = Date.parse(new Date(value))
let date = new Date(timestamp)
let Y = date.getFullYear()
let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1)
let D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
let H = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
let minute = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
let S = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
return `${Y}-${M}-${D} ${H}:${minute}:${S}`
}
},
async onPullDownRefresh() {
await this.handleInitCanvas()
await this.getList()
uni.stopPullDownRefresh();
},
methods: {
// 看视频双倍
lookVideo() {
this.receiveGold(true)
},
// 领取金币
receiveGold(watchVideos = false) {
if(this.doubleKey) {
setReceive({appId: config.appid, doubleKey: this.doubleKey, openId: this.openId, watchVideos, ...this.mpData }).then(res => {
this.popupShow = false
this.doubleKey = ""
this.getList()
})
}
},
//
getData() {
uni.login({
success: async res => {
if (res.code) {
let openIDInfo = await getOpenId({appId: config.appid, code: res.code})
this.openId = openIDInfo.data
let response = await this.getList()
if(response) {
await this.getPrizeList()
getBanner({appId: config.appid, openId: this.openId, mpAppId: this.mpData.mpAppId}).then(res => {
this.list = res.data
})
} else {
this.prizeList = [{"prizeId":1,"name":"100书币","stock":100,"weight":10,"prizeImage":"/static/turntable_golds.png"},{"prizeId":2,"name":"书城VIP碎片","stock":100,"weight":10,"prizeImage":"/static/turntable_VIP.png"},{"prizeId":3,"name":"30书币","stock":100,"weight":10,"prizeImage":"/static/turntable_gold.png"},{"prizeId":4,"name":"书城VIP碎片","stock":100,"weight":10,"prizeImage":"/static/turntable_VIP.png"},{"prizeId":5,"name":"10书币","stock":100,"weight":10,"prizeImage":"/static/turntable_gold.png"},{"prizeId":6,"name":"50书币","stock":100,"weight":10,"prizeImage":"/static/turntable_golds.png"},{"prizeId":7,"name":"iPhone12碎片","stock":100,"weight":10,"prizeImage":"/static/turntable_iPhone12.png"},{"prizeId":8,"name":"20书币","stock":100,"weight":10,"prizeImage":"/static/turntable_gold.png"}]
this.prizeCountDtoList = [{"prizeType":2,"prizeCount":0,"prizeName":"书城VIP碎片","maxCount":30},{"prizeType":3,"prizeCount":0,"prizeName":"iPhone12碎片","maxCount":50}]
}
}
}
})
},
// 跳转小程序
jumpSign() {
let path = 'pages/index/index'
if(Object.keys(this.mpData).length > 0) {
path = path + this.getSerialize(this.mpData)
}
uni.navigateToMiniProgram({
appId: 'wxb21c3e030b8af425',
path,
success(res) {
// 打开成功
}
})
},
// 对象序列化成 a=1&b=2
getSerialize(value) {
if(Object.prototype.toString.call(value) === "[object Object]") {
let path = ""
for (const key in value) {
if (Object.prototype.hasOwnProperty.call(value, key)) {
const element = value[key];
if (path === "") {
path = `?${key}=${element}`
}else {
path = path + `&${key}=${element}`
}
}
}
return path
} else {
return ""
}
},
// 活动规则
activityRulesHandle() {
this.activityRules = !this.activityRules
},
// 关闭弹窗
closeHandle() {
this.receiveGold(false)
this.popupShow = false
},
// 重新生成
handleInitCanvas() {
clearCacheFile()
this.prizeList = []
this.getPrizeList()
},
// 获取首页信息
async getList() {
let res = await getHome({appId: config.appid, openId: this.openId, userSource: 1, ...this.mpData})
let data = res.data
if(data) {
this.userId = data.userId
this.clearTime = data.clearTime
this.prizeCountDtoList = data.prizeCountDtoList
this.mpName = data.mpName
this.freeNum = data.luckDraw
this.mpData = {
mpAppId: data.mpAppId,
mpName: data.mpName,
mpOpenId: data.mpOpenId
}
return Promise.resolve(true)
} else {
return Promise.resolve(false)
}
},
// 获取奖品列表
async getPrizeList() {
uni.showLoading({
title: '奖品准备中...'
})
let res = await getPond({appId: config.appid, openId: this.openId, mpAppId: this.mpData.mpAppId})
if(res.data && res.data.length > 0) {
this.prizeList = res.data.map(item => {
let prizeImage = ""
if (item.prizeType === 1) {
prizeImage = '/static/turntable_gold.png'
if(item.prizeCount > 30) {
prizeImage = '/static/turntable_golds.png'
}
return {
prizeId: item.id,
name: item.prizeCount + item.prizeName,
stock: 100,
weight: 10,
prizeImage
}
} else {
prizeImage = '/static/turntable_iPhone12.png'
if(item.prizeType === 2){
prizeImage = '/static/turntable_VIP.png'
}
return {
prizeId: item.id,
name: item.prizeName,
stock: 100,
weight: 10,
prizeImage
}
}
})
}else {
uni.hideLoading()
uni.showToast({
title: '获取奖品失败'
})
}
},
// 本次抽奖开始
handleDrawStart() {
console.log('触发抽奖按钮')
if (!this.mpName) { // 首次没有重公众号进入
uni.navigateTo({
url: '../officialAccount/officialAccount'
})
return
}
if (this.prizeing) return
this.prizeing = true
// 还有免费数次或者剩余金币足够抽一次
if (this.freeNum > 0) {
// 更新免费次数或金币余额
if (this.freeNum > 0) {
this.freeNum--
}
// 发起抽奖
this.remoteGetPrizeIndex()
} else {
this.prizeing = false
uni.showToast({
title: '抽奖次数不足',
icon:'none'
})
}
},
// 远程请求接口获取中奖下标
remoteGetPrizeIndex() {
console.warn('###当前处于模拟的请求接口，并返回了中奖信息###')
let { mpName, ...mp } = this.mpData
setDrawGain({appId: config.appid, openId: this.openId, ...mp}).then(res => {
let data = res.data
this.doubleKey = data.doubleKey
let prizeIndex = this.prizeList.findIndex(item => item.prizeId === data.id)
if(prizeIndex !== -1){
this.prizeIndex = prizeIndex
} else {
uni.showToast({
title: '抽奖异常，请稍后重试'
})
}
})
},
// 本次抽奖结束
handleDrawEnd() {
console.log('旋转结束，执行拿到结果后到逻辑')
// 旋转结束后，开始处理拿到结果后的逻辑
this.prizeing = false
let prizeName = this.prizeList[this.prizeIndex].name
let tipContent = ''
if (prizeName === '谢谢参与') {
tipContent = '很遗憾，没有中奖，请再接再厉！'
} else if (prizeName.indexOf('碎片') === -1 && this.freeNum >= 8) {
this.popupShow = true
this.luckyDay = this.prizeList[this.prizeIndex]
return
} else {
// 如果奖品设有库存
if (this.onStock) {
let prizeStock = this.prizeList[this.prizeIndex].stock
tipContent = prizeStock ? `恭喜您，获得 ${prizeName}` : `很抱歉，您来晚了，当前奖品 ${prizeName} 已无库存`
} else {
tipContent = `恭喜您，获得 ${prizeName} ！`
}
}
uni.showModal({
content: tipContent,
showCancel: false
})
this.getList()
},
// 抽奖转盘绘制完成
handleDrawFinish(res) {
console.log('抽奖转盘绘制完成', res)
uni.showToast({
title: res.msg,
duration: 3000,
mask: true,
icon: 'none'
})
}
}
}
</script>
<style lang="scss">
page{
background-color: #F0524C;
}
.luckyDraw {
position: relative;
&>.back {
width: 100%;
}
}
.luckyDrawContent {
position: absolute;
top: 0;
width: 100%;
padding: 40rpx 0;
margin-bottom: 20rpx;
font-family: PingFangSC-Medium, PingFang SC;
// 用户信息
.luckyDrawTop {
padding: 0 28rpx;
height: 104rpx;
display: flex;
justify-content: space-between;
align-items: center;
.left{
display: flex;
justify-content: flex-start;
align-items: center;
&>.avatarView {
overflow: hidden;
width: 104rpx;
height: 104rpx;
background: #D8D8D8;
border-radius: 10px;
}
.userInfo{
margin-left: 28rpx;
&>view{
font-size: 32rpx;
font-weight: 500;
color: #FFFFFF;
&.account {
display: flex;
justify-content: flex-start;
align-items: center;
&>image {
width: 36rpx;
height: 36rpx;
margin-right: 10rpx;
}
}
&.ID{
margin-top: 4rpx;
}
}
}
}
.right{
width: 212rpx;
height: 76rpx;
background: #FEC435;
border-radius: 40rpx;
display: flex;
justify-content: center;
align-items: center;
&>text {
font-size: 28rpx;
font-weight: 400;
color: #FFFFFF;
margin-left: 18rpx;
}
}
}
// 滚动通知
.notice {
width: 656rpx;
height: 68rpx;
background: #C7322C;
box-shadow: 0px 4rpx 8rpx 0rpx rgba(49, 49, 49, 0.08);
border-radius: 38rpx;
opacity: 0.53;
margin: 58rpx auto 0;
padding: 0 30rpx;
box-sizing: border-box;
display: flex;
justify-content: flex-start;
align-items: center;
.horn {
width: 28rpx;
height: 28rpx;
}
.txts {
// flex: 1;
height: 68rpx;
width: 600rpx;
}
}
// 大转盘
.turntable {
position: relative;
margin-top: 40rpx;
.decorate{
position: relative;
width: 100%;
height: 890rpx;
&>image {
width: 100%;
position: absolute;
z-index: 10;
&.decorateBack {
top: 0;
}
&.decorateChassis{
position: absolute;
z-index: 1;
bottom: 0;
}
}
}
.turntableContent {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 20;
padding-top: 20rpx;
.bottom {
margin-top: 20rpx;
text-align: center;
position: absolute;
bottom: 35rpx;
left: 50%;
transform: translateX(-50%);
.cont{
font-size: 28rpx;
font-weight: 400;
color: #FFFFFF;
margin-bottom: 22rpx;
text {
font-size: 36rpx;
color: #FEED22;
font-weight: 500;
}
}
.record{
font-size: 28rpx;
font-weight: 500;
color: #FFFFFF;
}
}
}
}
// 我的奖品
.myPrize {
margin: 40rpx 26rpx 0;
min-height: 352rpx;
background: #F4E2CA;
border-radius: 20rpx;
position: relative;
padding: 58rpx 0 20rpx;
.title {
position: absolute;
width: 232rpx;
height: 64rpx;
background: linear-gradient(180deg, #FFEDD1 0%, #FFC954 100%);
box-shadow: 0 4rpx 8rpx 0 rgba(0, 0, 0, 0.07);
border-radius: 0 0 24rpx 24rpx;
font-size: 32rpx;
font-weight: 500;
color: #F33938;
text-align: center;
line-height: 64rpx;
left: 50%;
transform: translateX(-50%);
top: -12rpx;
}
.chips {
display: flex;
justify-content: space-between;
}
.chip {
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
&>image {
width: 208rpx;
height: 160rpx;
}
.text{
font-size: 32rpx;
font-weight: 500;
color: #F33938;
line-height: 44rpx;
margin-top: 12rpx;
}
.progress{
position: relative;
width: 200rpx;
height: 40rpx;
margin-top: 12rpx;
background: #FFFCF7;
border-radius: 26rpx;
overflow: hidden;
.value{
position: absolute;
width: 1%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
background: #F37938;
}
&>text {
font-size: 28rpx;
font-weight: 500;
color: #333333;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
}
}
}
.clearTime{
margin: 20rpx 0 0;
text-align: center;
font-size: 24rpx;
font-weight: 400;
color: #F33938;
}
}
// 活动规则
.activityRules {
margin: 40rpx 28rpx 0;
background: #F4E2CA;
border-radius: 20rpx;
color: #F33938;
font-size: 32rpx;
font-weight: 400;
&>.top {
height: 92rpx;
padding: 0 28rpx;
box-sizing: border-box;
display: flex;
justify-content: space-between;
align-items: center;
&>image {
width: 40rpx;
}
}
&>.bottom {
padding: 0 28rpx 30rpx;
box-sizing: border-box;
&> view {
margin-bottom: 12rpx;
font-size: 28rpx;
font-weight: 400;
color: #666666;
line-height: 46rpx;
}
}
}
// 弹窗
.popup {
position: fixed;
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, 0.6);
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 100;
.popupContent {
width: 632rpx;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
&>.content {
position: relative;
&>image {
width: 100%;
height: 652rpx;
}
&>.textCon {
position: absolute;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding-top: 192rpx;
.ts {
font-size: 60rpx;
font-weight: 500;
color: #F5631D;
}
.reward {
height: 60rpx;
background: #FFD9A2;
border-radius: 31rpx;
font-size: 32rpx;
font-weight: 400;
display: inline-block;
padding: 0 32rpx;
color: #F5631E;
line-height: 60rpx;
margin-top: 20rpx;
}
.doubleBt {
width: 424rpx;
height: 84rpx;
margin-top: 114rpx;
}
.bt {
margin-top: 14rpx;
font-size: 32rpx;
font-weight: 400;
color: #FCE8CD;
}
}
}
&>.close {
width: 54rpx;
height: 54rpx;
margin-top: 76rpx;
}
}
}
}
</style>