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.
1456 lines
45 KiB
1456 lines
45 KiB
<template>
|
|
<view id="app">
|
|
<loadlogo v-if="!loadlogo" />
|
|
<view class="drawGame" :style="{backgroundColor: drawPageData.bg_color || '#FF5555'}" v-if="loadlogo">
|
|
<view class="audio-main" @click="playAudio" style="top: 1.5%;right: 30upx;" v-if="!!drawPageData.background_music">
|
|
<view class="audio-bg" :class="{ 'stop-audio': !play_Audio }">
|
|
<view class="audio-gif" :style="{ 'background-image': 'url(' + imageRoot + 'musicgif.gif)' }">
|
|
<view class="audio-png" :style="{ 'background-image': 'url(' + imageRoot + 'music.png)' }"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="titleBG" :style="{width: imgstyle.width + 'px',height: imgstyle.height + 'px'}">
|
|
<view class="titleimg" v-if="drawPageData.share_image">
|
|
<swiper
|
|
class="titleimg"
|
|
indicator-color="rgba(255,255,255,.4)"
|
|
indicator-active-color="rgba(255,255,255,.85)"
|
|
:indicator-dots="true"
|
|
:autoplay="true"
|
|
:interval="interval"
|
|
:duration="duration">
|
|
<swiper-item v-for="(item, index) in drawPageData.share_image" :key="index" style="border-radius: 15upx;">
|
|
<image class="titleimg" :src="item" ></image>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
<!-- <image class="titleimg" :src="drawPageData.share_image" mode=""></image> -->
|
|
<!-- <view class="gameRule" @click="isRuleShow(1)">
|
|
活动规则<text class="iconfont icon-gantanhaozhong" style="font-size: 34upx;"></text>
|
|
</view>
|
|
<view class="gameRule left" @click="isRuleShow(2)">
|
|
抽奖规则<text class="iconfont icon-gantanhaozhong" style="font-size: 34upx;"></text>
|
|
</view> -->
|
|
</view>
|
|
<view class="bigbg" style="margin: 30upx;">
|
|
<view class="dis-flex col-f" style="padding: 0 20upx 20upx;">
|
|
<view class="flex-box f-26 t-l">
|
|
参加人数:{{drawPageData.visit}}人
|
|
</view>
|
|
<view class="flex-box f-26 t-c">
|
|
浏览人数:{{drawPageData.pv}}人
|
|
</view>
|
|
<view class="flex-box f-26 t-r">
|
|
中奖人数:{{drawPageData.prize}}人
|
|
</view>
|
|
</view>
|
|
<view class="bg" :style="{background: 'url('+drawPageData.background_image +')',backgroundSize: '100% 100%'}">
|
|
<!-- <view class="bg"> -->
|
|
<view style="height: 188upx;">
|
|
<view class="scroll-wrap">
|
|
<view class="scroll-content" :style="{ top }" @mouseenter="Stop()" @mouseleave="Up()">
|
|
<view class="scroll-content-item" v-for="item in prizeList" v-bind:key="item.id">{{item.nickname}}获得{{item.title}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 抽奖组件 -->
|
|
<view style="position: relative;" v-if="parameterid">
|
|
<view v-if="drawPageData.type == '1'">
|
|
<FGame :goodsList="goodsList" @startMusic="startMusic" @endMusic="endMusic" :opendraw="opendraw" :parameterid="parameterid"></FGame>
|
|
</view>
|
|
<view v-else-if="drawPageData.type == '2'">
|
|
<FGamesix :goodsList="goodsList" @startMusic="startMusic" @endMusic="endMusic" :opendraw="opendraw" :parameterid="parameterid"></FGamesix>
|
|
</view>
|
|
<view style="height: 600upx;padding: 10upx;" v-else-if="drawPageData.type == '3' && goodsList">
|
|
<raffle-wheel
|
|
ref="raffleWheel"
|
|
:prizeList="goodsList"
|
|
strKey="name"
|
|
:ringCount="5"
|
|
:duration="5"
|
|
:colors="drawPageData.wheel_bg"
|
|
:canvas-width="canvasData.width"
|
|
:canvas-height="canvasData.height"
|
|
:num="opendraw"
|
|
@actionStart="handleActionStart"
|
|
@actionEnd="handleActionEnd"
|
|
@done="handleDrawDone"
|
|
@playdraw="playdraw"
|
|
v-if="goodsList.length"
|
|
/>
|
|
</view>
|
|
<view class="imgs" v-if="startImg">
|
|
<image :src="drawPageData.start_image" style="position: absolute;z-index: 99;top: 30%;left: 50%;transform: translate(-50%);width: 300upx;height: 300upx;"
|
|
mode=""></image>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<view class="dis-flex f-28" style="padding: 71upx 0upx 0upx;color: #955F19;">
|
|
<view class="dis-flex" style="flex: 0.3;">
|
|
<view >
|
|
<view class="dis-flex" style="margin-top: 20upx;">
|
|
<view class="b-f" style="width: 10upx;height: 10upx;border-radius: 50% 0% 0% 50%;border-right: 3upx solid #D4D3D4;"></view>
|
|
<view class="b-f" style="width: 8upx;height: 10upx;;border-right: 3upx solid #D4D3D4;"></view>
|
|
<view class="b-f" style="width: 8upx;height: 10upx;;border-right: 3upx solid #D4D3D4;"></view>
|
|
</view>
|
|
<view class="dis-flex" style="margin-top: 60upx;">
|
|
<view class="b-f" style="width: 10upx;height: 10upx;border-radius: 50% 0% 0% 50%;border-right: 3upx solid #D4D3D4;"></view>
|
|
<view class="b-f" style="width: 8upx;height: 10upx;;border-right: 3upx solid #D4D3D4;"></view>
|
|
<view class="b-f" style="width: 8upx;height: 10upx;;border-right: 3upx solid #D4D3D4;"></view>
|
|
</view>
|
|
</view>
|
|
<view class="ifeng" :style="{backgroundColor: drawPageData.button_shadow || '#AF1010'}">
|
|
<view class="ifelit" :style="{backgroundColor: drawPageData.button_color || '#FD7058'}">
|
|
<view class="f-28 col-f t-c" style="height: 50upx;line-height: 50upx;">
|
|
我的<text>{{TextSubstitution.credittext}}</text>
|
|
</view>
|
|
<view class="b-f f-28 f-w t-c" style="margin: 0 3upx;height: 62upx;border-radius: 0upx 0upx 8upx 8upx;color: #FF4444;line-height: 62upx;">
|
|
{{parseInt(drawPageData.user_integral)}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view style="flex: 0.4;">
|
|
<view style="width: 248upx;height: 120upx;margin: auto;" @click="playdraw">
|
|
<image class="btnimg" style="width: 100%;height: 100%;" :src="drawPageData.button_draw || imgfixUrls + '/ljcj.png'"
|
|
mode=""></image>
|
|
</view>
|
|
</view>
|
|
<view class="t-r f-24 col-f" style="padding-top: 6upx;flex: 0.3;">
|
|
<view style="float: right;margin-right: 2upx;">
|
|
<view class="dis-flex">
|
|
<view class="dis-il-block dis-flex description" :style="{backgroundColor: drawPageData.button_shadow || '#AF1010'}">
|
|
<view class="dis-il-block descriptionrulo" @click="isRuleShow(2)" :style="{backgroundColor: drawPageData.button_color || '#FD7058'}">
|
|
<view class="dis-il-block t-c" style="height: 45upx;line-height: 45upx;">
|
|
规则说明
|
|
</view>
|
|
<view class="dis-il-block iconfont icon-video t-c" style="font-weight: 400;font-size: 28upx;height: 45upx;width: 46upx;line-height: 45upx;">
|
|
|
|
</view>
|
|
</view>
|
|
|
|
<!-- <view class="b-f dis-il-block" style="width: 20upx;height: 58upx;border-radius: 0 60upx 60upx 0;background-color: #FFFFFF;">
|
|
<view style="width: 10upx;height: 30upx;border-radius: 0 60upx 60upx 0;background-color: #ff4444;float: right;">
|
|
|
|
</view>
|
|
</view> -->
|
|
</view>
|
|
<view class="dis-flex" style="margin-top: 20upx;">
|
|
<view style="width: 10upx;height: 10upx;background-color: #FFFFFF;border-right: 2upx solid #D4D3D4;"></view>
|
|
<view style="width: 8upx;height: 10upx;background-color: #FFFFFF;border-right: 2upx solid #D4D3D4;"></view>
|
|
<view style="width: 6upx;height: 10upx;background-color: #FFFFFF;border-right: 2upx solid #D4D3D4;border-radius: 0 60upx 60upx 0upx;"></view>
|
|
</view>
|
|
|
|
</view>
|
|
<view class="dis-flex" style="margin-top: 10upx;">
|
|
<view class="dis-il-block dis-flex awardbtn" :style="{backgroundColor: drawPageData.button_shadow || '#AF1010'}">
|
|
<view class="dis-il-block awardbtnrulo" @click="myprize" :style="{backgroundColor: drawPageData.button_color || '#FD7058'}">
|
|
<view class="dis-il-block t-c" style="height: 45upx;line-height: 45upx;">
|
|
我的奖品
|
|
</view>
|
|
<view class="dis-il-block iconfont icon-video t-c" style="font-weight: 400;font-size: 28upx;height: 45upx;width: 46upx;line-height: 45upx;">
|
|
|
|
</view>
|
|
</view>
|
|
|
|
<!-- <view class="b-f dis-il-block" style="width: 20upx;height: 58upx;border-radius: 0 60upx 60upx 0;background-color: #FFFFFF;">
|
|
<view style="width: 10upx;height: 30upx;border-radius: 0 60upx 60upx 0;background-color: #ff4444;float: right;">
|
|
|
|
</view>
|
|
</view> -->
|
|
</view>
|
|
<view class="dis-flex" style="margin-top: 20upx;">
|
|
<view style="width: 10upx;height: 10upx;background-color: #FFFFFF;border-right: 2upx solid #D4D3D4;"></view>
|
|
<view style="width: 8upx;height: 10upx;background-color: #FFFFFF;border-right: 2upx solid #D4D3D4;"></view>
|
|
<view style="width: 6upx;height: 10upx;background-color: #FFFFFF;border-right: 2upx solid #D4D3D4;border-radius: 0 60upx 60upx 0upx;"></view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
<!-- <view class="t-r" >
|
|
规则说明
|
|
</view>
|
|
<view class="t-r" style="margin-top: 40upx;height: 44upx;line-height: 44upx;" >
|
|
我的奖品
|
|
</view> -->
|
|
|
|
|
|
|
|
<!-- <view class="dis-il-block" v-if="drawPageData.surplus_day_join_times == 0" style="padding: 10upx 20upx;border-radius: 60upx;background-color: rgba(0,0,0,0.1);">
|
|
<text style="color: #FF4444;">{{drawPageData.integral_consume}}</text>
|
|
<text>{{TextSubstitution.credittext}}</text>抽
|
|
<text style="color: #FF4444;">1</text>
|
|
次
|
|
</view>
|
|
<view class="dis-il-block" v-else style="padding: 10upx 20upx;border-radius: 60upx;background-color: rgba(0,0,0,0.1);">
|
|
<text>今日免费次数:</text>
|
|
<text style="color: #FF4444;">{{drawPageData.surplus_day_join_times}}</text>
|
|
</view> -->
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<view class="dis-flex" style="padding: 20upx 30upx 0;">
|
|
<view style="flex: 0.5;">
|
|
<view style="width: 382upx;height: 90upx;" @click="gogetintegral">
|
|
<image class="btnimg" style="width: 100%;height: 100%;" :src="drawPageData.button_more || imgfixUrls + '/hqgdbtn.png'"
|
|
mode=""></image>
|
|
</view>
|
|
</view>
|
|
<view style="flex: 0.5;">
|
|
<view style="width: 220upx;height: 90upx;float: right;" @click="GenerateAPoster">
|
|
<image class="btnimg" style="width: 100%;height: 100%;" :src="drawPageData.button_prize || imgfixUrls + '/schbbtn.png'"
|
|
mode=""></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="f-26 t-c" style="color: rgb(184, 47, 57);height: 60upx;line-height: 60upx;">
|
|
<text style="padding-right: 30upx;" v-if="drawPageData.surplus_day_join_times != 0">今日免费<text style="color: #FF4444;">{{drawPageData.surplus_day_join_times}}</text>次</text>
|
|
<text style="color: #FF4444;"></text>
|
|
<text>每消耗</text>
|
|
<text style="color: #FF4444;">{{drawPageData.integral_consume}}</text>
|
|
<text>{{TextSubstitution.credittext}}</text>抽
|
|
<text style="color: #FF4444;">1</text>
|
|
次
|
|
<text style="padding-left: 30upx;" v-if="drawPageData.surplus_day_parin_times != 0">今日可抽<text style="color: #FF4444;">{{drawPageData.surplus_day_parin_times}}</text>
|
|
次</text>
|
|
|
|
</view>
|
|
<!-- 按钮组 -->
|
|
<!-- <view class="dis-flex" style="padding: 0 20upx;">
|
|
<view >
|
|
<view style="height: 124upx;width: 184upx;" @click="gogetintegral">
|
|
<image class="btnimg" style="width: 100%;height: 100%;" :src="imgfixUrls + '/hqgd.png'" mode=""></image>
|
|
</view>
|
|
</view>
|
|
<view style="padding: 0 20upx;" @click="playdraw">
|
|
<view style="width: 288upx;height: 124upx;">
|
|
<image class="btnimg" style="width: 100%;height: 100%;" :src="drawPageData.start_image || imgfixUrls + '/ljcj.png'"
|
|
mode=""></image>
|
|
</view>
|
|
</view>
|
|
<view >
|
|
<view style="width: 122upx;height: 124upx;" @click="myprize">
|
|
<image class="btnimg" style="height: 100%;width: 100%;" :src="imgfixUrls + '/wdjp.png'" mode=""></image>
|
|
</view>
|
|
</view>
|
|
</view> -->
|
|
<!-- <view class="t-c f-26" style="color: #955F19;">
|
|
<text>今日免费次数:</text>
|
|
<text>3</text>
|
|
</view> -->
|
|
|
|
</view>
|
|
<!-- 活动商家 -->
|
|
<view class="activity" v-if="storeList.length > 0">
|
|
<view class="tagbox">
|
|
<view class="dis-il-block" style="width: 0;
|
|
height: 0;
|
|
border-bottom: 34upx solid #D68009;
|
|
border-left: 26upx solid transparent;
|
|
position: absolute;
|
|
top: 0;
|
|
left: -8%;
|
|
z-index: 98;
|
|
">
|
|
</view>
|
|
<view class="dis-il-block" style="width: 0;
|
|
height: 0;
|
|
border-top: 69upx solid #FCD83D;
|
|
border-left: 8upx solid transparent;
|
|
position: relative;
|
|
z-index: 99;
|
|
">
|
|
</view>
|
|
<view class="contentbox dis-il-block">
|
|
<view class="text">
|
|
商家列表
|
|
</view>
|
|
</view>
|
|
<view class="dis-il-block" style="width: 0;
|
|
height: 0;
|
|
position: relative;
|
|
z-index: 99;
|
|
border-top: 69upx solid #FCD83D;
|
|
border-right: 8upx solid transparent;
|
|
">
|
|
</view>
|
|
<view class="dis-il-block" style="width: 0;
|
|
height: 0;
|
|
border-bottom: 34upx solid #D68009;
|
|
border-right: 24upx solid transparent;
|
|
position: absolute;
|
|
right: -8%;
|
|
top: 0;
|
|
">
|
|
</view>
|
|
|
|
<!-- <view class="dis-il-block"
|
|
style="width: 0;
|
|
height: 0;
|
|
border-top: 36upx solid #FFEA72;
|
|
border-left: 8upx solid transparent;">
|
|
</view> -->
|
|
|
|
</view>
|
|
<view class="activity-content">
|
|
<view class="storeList dis-flex" :style="{ left }" @mouseenter="cartStop()" @mouseleave="cartUp()">
|
|
<view class="storeList-item dis-il-block" v-for="(item,index) in storeList" :key="index" @click="gostore(item.id)">
|
|
<image :src="item.logo" style="width: 189upx;height: 189upx;border-radius: 10upx;" mode=""></image>
|
|
<view class="f-26" style="color: #999999;font-weight: 500;padding-bottom: 20upx;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;width: 180upx;">
|
|
{{item.storename}}
|
|
</view>
|
|
<view class="dis-flex" style="font-size: 24upx;font-family: PingFang SC;font-weight: 500;color: #333333;line-height: 36upx;">
|
|
<image style="width: 40upx;height: 40upx;" :src="item.goods_logo" mode=""></image>
|
|
<view class="f-26">
|
|
<view style="padding-left: 10upx;width: 140upx;overflow: hidden;
|
|
text-overflow:ellipsis; white-space: nowrap;">{{item.goods_name}}</view>
|
|
<!-- <text style="padding-left: 10upx;">1个</text> -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="f-24 t-c" style="font-size: 24upx;color: #999999;line-height: 50upx;">
|
|
<text class="iconfont icon-back_light" style="font-size: 24upx;"></text>
|
|
<text class="iconfont icon-back_light" style="font-size: 24upx;"></text>
|
|
左右滑动
|
|
<text class="iconfont icon-jinrujiantouxiao1" style="font-size: 24upx;"></text>
|
|
<text class="iconfont icon-jinrujiantouxiao1" style="font-size: 24upx;"></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 活动商家 -->
|
|
<view class="activity" style="top: 150upx;" v-if="friendList.list.length > 0">
|
|
<view class="tagbox">
|
|
<view class="dis-il-block" style="width: 0;
|
|
height: 0;
|
|
border-bottom: 34upx solid #D68009;
|
|
border-left: 26upx solid transparent;
|
|
position: absolute;
|
|
top: 0;
|
|
left: -8%;
|
|
z-index: 98;
|
|
">
|
|
</view>
|
|
<view class="dis-il-block" style="width: 0;
|
|
height: 0;
|
|
border-top: 69upx solid #FCD83D;
|
|
border-left: 8upx solid transparent;
|
|
position: relative;
|
|
z-index: 99;
|
|
">
|
|
</view>
|
|
<view class="contentbox dis-il-block">
|
|
<view class="text">
|
|
助力好友排行
|
|
</view>
|
|
</view>
|
|
<view class="dis-il-block" style="width: 0;
|
|
height: 0;
|
|
position: relative;
|
|
z-index: 99;
|
|
border-top: 69upx solid #FCD83D;
|
|
border-right: 8upx solid transparent;
|
|
">
|
|
</view>
|
|
<view class="dis-il-block" style="width: 0;
|
|
height: 0;
|
|
border-bottom: 34upx solid #D68009;
|
|
border-right: 24upx solid transparent;
|
|
position: absolute;
|
|
right: -8%;
|
|
top: 0;
|
|
">
|
|
</view>
|
|
|
|
<!-- <view class="dis-il-block"
|
|
style="width: 0;
|
|
height: 0;
|
|
border-top: 36upx solid #FFEA72;
|
|
border-left: 8upx solid transparent;">
|
|
</view> -->
|
|
|
|
</view>
|
|
<view class="activity-friend">
|
|
<view class="f-28 t-c" style="color: #333333;padding-bottom: 20upx;" v-if="friendList.total_friends !== 0 && friendList.total_friends !== '0'">
|
|
已有
|
|
<text style="color: #FF4444;">{{friendList.total_friends}}</text>
|
|
位好友帮您获得
|
|
<text style="color: #FF4444;">{{friendList.total_integral}}</text>
|
|
{{TextSubstitution.credittext}}
|
|
</view>
|
|
<view style="overflow: auto;">
|
|
<view class="dis-flex" style="padding: 30upx 0;border-bottom: 2upx dashed #cccccc;" v-for="(item,index) in friendList.list"
|
|
:key="index">
|
|
<view style="flex: 0.1;margin: auto;">
|
|
<image style="width: 39upx;height: 47upx;" v-if="index == 0" :src="imgfixUrls + '/j.png'" mode=""></image>
|
|
<image style="width: 39upx;height: 47upx;" v-else-if="index == 1" :src="imgfixUrls + '/y.png'" mode=""></image>
|
|
<image style="width: 39upx;height: 47upx;" v-else-if="index == 2" :src="imgfixUrls + '/t.png'" mode=""></image>
|
|
<text class="f-28 t-c" style="line-height: 60upx;" v-else>{{index + 1}}</text>
|
|
</view>
|
|
<view class="dis-flex" style="flex: 0.6;">
|
|
<view >
|
|
<image style="height: 60upx;width: 60upx;border-radius: 50%;border: 2upx solid #333333;" :src="item.avatar"
|
|
mode=""></image>
|
|
</view>
|
|
<view class="f-28" style="line-height: 60upx;padding-left: 15upx;color: #333333;overflow: hidden;text-overflow:ellipsis; white-space: nowrap;width: 300upx;">
|
|
{{item.nickname}}
|
|
</view>
|
|
</view>
|
|
<view class="f-28" style="flex: 0.3;line-height: 60upx;">
|
|
<text style="color: #FF4444;">{{item.total_integral}}</text>
|
|
{{TextSubstitution.credittext}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 规则 -->
|
|
<PopManager :show="ruleShow" :type="'center'" :overlay="'false'" :showOverlay="'false'" @clickmask="ruleShow = false">
|
|
<view class="rulebox t-c">
|
|
<view class="f-32" style="font-weight: 500;color: #6f6f6f;padding-bottom: 30upx;">
|
|
活动规则
|
|
</view>
|
|
<view v-if="parser" style="height: 75vh;overflow: auto;">
|
|
<jyf-parser domain="https://6874-html-foe72-1259071903.tcb.qcloud.la" gesture-zoom lazy-load ref="article"
|
|
selectable show-with-animation use-anchor :html="parser"></jyf-parser>
|
|
</view>
|
|
</view>
|
|
<view style="position: relative;height: 40upx;">
|
|
<view style="border-left: 1upx solid #FFFFFF;height: 50upx;position: absolute;left: 50%;transform: translateX(-50%);">
|
|
|
|
</view>
|
|
</view>
|
|
<view style="position: relative;">
|
|
<view class="iconfont icon-roundclose col-f" style="position: absolute;left: 50%;transform: translateX(-50%);font-size: 50upx;"
|
|
@click="ruleShow = false">
|
|
|
|
</view>
|
|
</view>
|
|
</PopManager>
|
|
<PopManager :show="endImg" :type="'center'" :overlay="'false'" :showOverlay="'false'" @clickmask="endImg = false">
|
|
<view class="zjbj" :style="{background: 'url('+ (drawPageData.prize_image|| (imgfixUrls + '/kjbj2.png')) +')',backgroundSize: '100% 100%'}">
|
|
<!-- <image style="width: 70vw;height: 80vh;" :src="imgfixUrls + '/kjbj.png'" mode=""></image> -->
|
|
<text class="iconfont icon-close dis-il-block t-c f-w closeBtn" @click="close"></text>
|
|
<!-- <view class="contenttitle t-c">
|
|
<view class="text" v-if="endid !== '0' && endid !== 0">
|
|
中奖啦
|
|
</view>
|
|
<view class="text" v-else>
|
|
谢谢惠顾
|
|
</view>
|
|
</view> -->
|
|
<view class="zjbox" style="margin: auto;" v-if="endImg">
|
|
<view class="f-w f-48 t-c" style="color: #FB2F24;padding-bottom: 36upx;">
|
|
{{endid !== '0'&& endid !== 0?'中奖了':'感谢参与'}}
|
|
</view>
|
|
<view >
|
|
<image style="border-radius: 50%;height: 240upx;width: 240upx;margin-left: 20vw;border: 2upx solid #FFC853;" :src="effect_image || drawPageData.not_prize_image"
|
|
mode=""></image>
|
|
</view>
|
|
<view style="padding:20upx 0 50upx;">
|
|
<!-- <view class="col-f f-38" style="text-align: center;">
|
|
{{}}
|
|
</view> -->
|
|
|
|
<view class="col-f f-40 " style="text-align: center;margin-bottom: 10upx;">
|
|
<text style="color: #E5492C;">{{endid !== '0'&& endid !== 0?'恭喜你抽中了':'很遗憾'}}</text>
|
|
</view>
|
|
<view class="col-f f-50 t-c" style="text-align: center;">
|
|
<text style="color: #FF2D26;">{{endid !== '0'&& endid !== 0?endDraw:'没有中奖哦！'}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="dis-flex">
|
|
<view style="flex: 0.45;position: relative;height: 90upx;">
|
|
<!-- <view class="t-c f-34" style="background-color: #EB9B2F;color: #FFFFFF;padding: 15upx 30upx;border-radius: 10upx;margin-top: 30upx;"
|
|
>
|
|
查看奖品
|
|
</view> -->
|
|
<image style="width: 250upx;height: 90upx;" :src="imgfixUrls + '/hsbtn.png'" mode=""></image>
|
|
<view @click="myprize" class="f-32 t-c" style="position: absolute;left: 0;top: 0;height: 90upx;line-height: 80upx;width: 250upx;color: #FF3D25;">
|
|
查看奖品
|
|
</view>
|
|
</view>
|
|
<view style="flex: 0.1;width: 30upx;">
|
|
|
|
</view>
|
|
<view class="f-34" style="flex: 0.45;position: relative;height: 90upx;">
|
|
<!-- <view class="t-c" style="background-color: #EB9B2F;color: #FFFFFF;padding: 15upx 30upx;border-radius: 10upx;margin-top: 30upx;"
|
|
@click="close(1)">
|
|
继续抽奖
|
|
</view> -->
|
|
<image style="width: 250upx;height: 90upx;" :src="imgfixUrls + '/cjredbtn.png'" mode=""></image>
|
|
<view @click="close(1)" class="f-32 t-c" style="position: absolute;left: 0;top: 0;height: 90upx;line-height: 80upx;width: 250upx;color: #FFFFFF;">
|
|
继续抽奖
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- <view class="imgs-box" v-if="endImg" :style="{background: 'url('+drawPageData.effect_image+')',backgroundSize: '100% 100%'}"> -->
|
|
|
|
<!-- <image :src="drawPageData.effect_image" style="z-index: 99;width: 300upx;height: 300upx;" mode=""></image> -->
|
|
|
|
<!-- </view> -->
|
|
|
|
</view>
|
|
|
|
</PopManager>
|
|
<PopManager :show="showCommunity" type="center" @clickmask="showCommunity = false">
|
|
<view v-if="showCommunity" style="width: 80vw;height: 90vh;padding: 30upx;overflow: hidden;border-radius: 20upx;">
|
|
<posterlate :postId="parameterid" :postType="'13'"></posterlate>
|
|
</view>
|
|
</PopManager>
|
|
<view v-if="menuList.id">
|
|
<TabBars :tabBarAct="0" :pageType="'draw'" :tabBarData="menuList.data" />
|
|
</view>
|
|
<PhoneMask :show1="popShow" @clickmask1="closePop"></PhoneMask>
|
|
<getvxphone :show="vxshow" @showFalse="showFalse"></getvxphone>
|
|
<view>
|
|
<follow
|
|
:followShow="followShow"
|
|
:followType="followType"
|
|
:followTitleShow="followTitleShow"
|
|
@clickmask="openQrShow"
|
|
@closeFollowPop="closeFollowPop"
|
|
@closeFollowTitle="closeFollowTitle"
|
|
:followData="followData"
|
|
></follow>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import App from '@/common/js/app.js';
|
|
import FGame from '../tamplate/FGame.vue';
|
|
import FGamesix from '../tamplate/FGamesix.vue';
|
|
import jyfParser from '@/components/jyf-parser/jyf-parser.vue';
|
|
import PopManager from '@/components/template/PopManager';
|
|
import Loadlogo from '@/components/template/loadlogo.vue';
|
|
import posterlate from '@/components/template/posterlate';
|
|
import TabBars from '@/components/template/tabBar';
|
|
import PhoneMask from '@/components/template/PhoneMask';
|
|
import getvxphone from '@/components/template/getVXphone.vue';
|
|
import follow from '@/components/template/follow.vue';
|
|
import RaffleWheel from '@/components/raffle-wheel/raffle-wheel.vue'
|
|
let innerAudioContext = uni.createInnerAudioContext();
|
|
let drawAudio = uni.createInnerAudioContext();
|
|
export default {
|
|
components: {
|
|
FGame,
|
|
FGamesix,
|
|
PopManager,
|
|
jyfParser,
|
|
Loadlogo,
|
|
posterlate,
|
|
TabBars,
|
|
PhoneMask,
|
|
getvxphone,
|
|
follow,
|
|
RaffleWheel
|
|
},
|
|
data() {
|
|
return {
|
|
//获奖名单滚动列表
|
|
prizeList: [],
|
|
loadlogo: false,
|
|
activeIndex: 0,
|
|
cartactiveIndex: 0,
|
|
intnum: undefined,
|
|
cartintnum: undefined,
|
|
storeList: [], //横着滑动的商家列表
|
|
friendList: [], //竖着排列的助力列表
|
|
ruleShow: false,
|
|
drawPageData: {
|
|
effect_image: ''
|
|
}, //页面基本信息
|
|
goodsList: null, //抽奖列表
|
|
play_Audio: false,
|
|
opendraw: 0,
|
|
startImg: false,
|
|
endImg: false,
|
|
endDraw: '',
|
|
endid: 0,
|
|
parameter: {},
|
|
effect_image: '',
|
|
parser: '',
|
|
TextSubstitution: {}, //文本替换
|
|
parameterid: '',
|
|
ratio:0,
|
|
imgstyle:{},
|
|
showCommunity:false,
|
|
menuList:{},
|
|
popShow: false,
|
|
vxshow:false,
|
|
followTitleShow: true,
|
|
followShow: false,
|
|
followType: '10',
|
|
followData:{
|
|
},
|
|
// canvas 宽高
|
|
canvasData: {
|
|
width: 260,
|
|
height: 260
|
|
},
|
|
duration:500,
|
|
interval:2000,
|
|
// 奖品数据
|
|
// 中奖下标
|
|
targetIndex: 0,
|
|
// 中奖类目名称
|
|
targetName: '',
|
|
// 是否由前端控制概率
|
|
isFrontend: true,
|
|
// 权重随机数的最大值
|
|
weightTotal: 0,
|
|
// 权重数组
|
|
weightArr: [],
|
|
serial_number:0
|
|
}
|
|
},
|
|
computed: {
|
|
top() {
|
|
return -this.activeIndex * 15 + 'px';
|
|
},
|
|
left() {
|
|
return -this.cartactiveIndex * 10 + 'rpx';
|
|
}
|
|
},
|
|
onHide() {
|
|
let _this = this,
|
|
play_Audio = false,
|
|
pageAudio = _this.drawPageData.background_music;
|
|
if (!play_Audio) {
|
|
innerAudioContext.pause()
|
|
innerAudioContext.onPause(() => {
|
|
console.log('暂停播放');
|
|
});
|
|
}
|
|
_this.play_Audio = play_Audio
|
|
},
|
|
onLoad(e) {
|
|
let _this = this;
|
|
this.parameter = e;
|
|
this.parameterid = e.id;
|
|
this.ScrollUp();
|
|
this.imgstyle = uni.getStorageSync('imgstyle');
|
|
uni.setStorageSync('Dparameterid', this.parameterid);
|
|
this.TextSubstitution = uni.getStorageSync('TextSubstitution');
|
|
if (!this.parameter.head_id || this.parameter.head_id == '0') {
|
|
this.parameter.head_id = 0;
|
|
}
|
|
console.log(e, 'canshu')
|
|
|
|
// this.cartScrollUp();
|
|
},
|
|
onShow() {
|
|
this.startDraw = false;
|
|
this.getDrawData();
|
|
this.playAudio();
|
|
},
|
|
destroyed() {
|
|
innerAudioContext.stop();
|
|
innerAudioContext.onStop(() => {
|
|
console.log('页面跳转暂停播放');
|
|
});
|
|
},
|
|
onUnload() {
|
|
this.play_Audio = false;
|
|
innerAudioContext.stop();
|
|
innerAudioContext.onStop(() => {
|
|
console.log('页面跳转暂停播放');
|
|
});
|
|
},
|
|
methods: {
|
|
play(){
|
|
this.prizeList.map(item=>{
|
|
item.weight = 0;
|
|
});
|
|
this.prizeList[6].weight = 1;
|
|
if (this.isFrontend) {
|
|
this.prizeList.forEach((item) => this.weightTotal += item.weight)
|
|
this.weightArr = this.prizeList.map((item) => item.weight)
|
|
}
|
|
setTimeout(()=>{
|
|
this.num++;
|
|
})
|
|
|
|
|
|
},
|
|
// 重新生成
|
|
handleInitCanvas () {
|
|
this.prizeList = []
|
|
this.getPrizeList();
|
|
},
|
|
// 获取奖品列表
|
|
getPrizeList () {
|
|
uni.showLoading({
|
|
title: '奖品准备中...'
|
|
})
|
|
// 模拟请求奖品列表
|
|
let stoTimer = setTimeout(() => {
|
|
clearTimeout(stoTimer)
|
|
stoTimer = null
|
|
|
|
// stock 奖品库存
|
|
// weight 中奖概率，数值越大中奖概率越高
|
|
this.prizeList = [
|
|
|
|
]
|
|
|
|
// 计算出权重的总和并生成权重数组
|
|
if (this.isFrontend) {
|
|
this.prizeList.forEach((item) => this.weightTotal += item.weight)
|
|
this.weightArr = this.prizeList.map((item) => item.weight)
|
|
}
|
|
}, 500)
|
|
},
|
|
// 本次抽奖开始
|
|
handleActionStart () {
|
|
// this.prizeList.map(item=>{
|
|
// item.weight = 0;
|
|
// })
|
|
// this.prizeList[1].weight = 1;
|
|
// console.log();
|
|
this.targetName = ''
|
|
|
|
let list = [...this.goodsList]
|
|
|
|
// 模拟请求
|
|
let stoTimer = setTimeout(() => {
|
|
clearTimeout(stoTimer)
|
|
stoTimer = null
|
|
|
|
// 判断是否由前端控制概率
|
|
// 前端控制概率的情况下，需要拿到最接近随机权重且大于随机权重的值
|
|
// 后端控制概率的情况下，通常会直接返回 prizeId
|
|
if (this.isFrontend && this.weightTotal) {
|
|
console.warn('###当前处于前端控制中奖概率，安全起见，强烈建议由后端控制###')
|
|
console.log('当前权重总和为 =>', this.weightTotal)
|
|
|
|
// 注意这里使用了 Math.ceil，如果某个权重的值为 0，则始终无法中奖
|
|
let weight = Math.ceil(Math.random() * this.weightTotal)
|
|
console.log('本次权重随机数 =>', weight)
|
|
|
|
// 生成大于等于随机权重的数组
|
|
let tempMaxArrs = []
|
|
list.forEach((item) => {
|
|
if (item.weight >= weight) {
|
|
tempMaxArrs.push(item.weight)
|
|
}
|
|
})
|
|
|
|
// 如果大于随机权重的数组有值，先对这个数组排序然后取值
|
|
// 反之新建一个临时的包含所有权重的已排序数组，然后取值
|
|
if (tempMaxArrs.length) {
|
|
tempMaxArrs.sort((a, b) => a - b)
|
|
this.targetIndex = this.weightArr.indexOf(tempMaxArrs[0])
|
|
} else {
|
|
let tempWeightArr = [...this.weightArr]
|
|
tempWeightArr.sort((a, b) => a - b)
|
|
this.targetIndex = this.weightArr.indexOf(tempWeightArr[tempWeightArr.length - 1])
|
|
}
|
|
} else {
|
|
// 这里随机产生的 prizeId 是模拟后端返回的 prizeId
|
|
let prizeId = Math.floor(Math.random() * list.length)
|
|
list.forEach((item, index) => {
|
|
if (item.draw_goods_id === prizeId) {
|
|
// 中奖下标
|
|
this.targetIndex = 0
|
|
}
|
|
})
|
|
}
|
|
|
|
console.log('本次抽中奖品 =>', this.goodsList[this.targetIndex].title)
|
|
// console.log('本次奖品库存 =>', this.prizeList[this.targetIndex].stock)
|
|
|
|
// 开始执行旋转定位
|
|
this.$refs.raffleWheel.handleStartRotate(this.targetIndex)
|
|
}, 200)
|
|
},
|
|
// 本次抽奖结束
|
|
handleActionEnd () {
|
|
this.endMusic(this.serial_number);
|
|
console.log('旋转结束，执行拿到结果后到逻辑')
|
|
// let prizeName = this.prizeList[this.targetIndex].name
|
|
// let prizeStock = this.prizeList[this.targetIndex].stock
|
|
// this.targetName = prizeName === '谢谢参与' ? prizeName : prizeStock ? `恭喜您，获得 ${prizeName}` : '很抱歉，您来晚了，当前奖品已无库存'
|
|
},
|
|
// 抽奖转盘绘制完成
|
|
handleDrawDone () {
|
|
console.log('抽奖转盘绘制完成')
|
|
uni.hideLoading()
|
|
// uni.showToast({
|
|
// title: '奖品准备就绪'
|
|
// })
|
|
},
|
|
closeFollowTitle() {
|
|
let _this = this;
|
|
_this.followTitleShow = false;
|
|
},
|
|
closeFollowPop() {
|
|
let _this = this;
|
|
_this.followShow = false;
|
|
},
|
|
openQrShow() {
|
|
let _this = this;
|
|
_this.followShow = true;
|
|
},
|
|
showFalse(){
|
|
console.log('进了showfalse')
|
|
this.vxshow = false;
|
|
},
|
|
closePop() {
|
|
let _this = this
|
|
_this.popShow = false
|
|
},
|
|
GenerateAPoster(){
|
|
this.showCommunity = true;
|
|
},
|
|
gostore(id) {
|
|
App.navigationTo({
|
|
url: `pages/mainPages/store/index?sid=${id}`
|
|
})
|
|
},
|
|
close(type) {
|
|
this.endImg = false;
|
|
if (type == 1) {
|
|
this.playdraw()
|
|
}
|
|
},
|
|
endMusic(ind) {
|
|
drawAudio.stop();
|
|
drawAudio.onStop(() => {
|
|
console.log('页面跳转暂停播放');
|
|
});
|
|
this.goodsList.map(item => {
|
|
if (item.serial_number == ind) {
|
|
this.effect_image = item.image;
|
|
if (item.draw_goods_id == '0') {
|
|
this.effect_image = '';
|
|
};
|
|
// this.effect_image = '../../../static/images/xxhg3.png';
|
|
this.endDraw = item.title;
|
|
this.endid = item.draw_goods_id;
|
|
console.log(item, this.endid);
|
|
this.endImg = true;
|
|
this.startDraw = false;
|
|
if(this.drawPageData.use_music){
|
|
this.playAudio();
|
|
}
|
|
this.getDrawData(1);
|
|
}
|
|
})
|
|
},
|
|
startMusic(flag,msg) {
|
|
let _this = this;
|
|
if (flag == false) {
|
|
this.startDraw = false;
|
|
if(this.drawPageData.use_music){
|
|
this.playAudio();
|
|
}
|
|
if(msg == '未绑定手机号'){
|
|
//#ifdef H5
|
|
_this.popShow = true;
|
|
//#endif
|
|
//#ifndef H5
|
|
_this.vxshow = true;
|
|
//#endif
|
|
}
|
|
return
|
|
}
|
|
drawAudio.src = _this.drawPageData.use_music;
|
|
//#ifdef H5
|
|
jWeixin.ready(() => {
|
|
jWeixin.getLocation({
|
|
type: 'gcj02',
|
|
success: function(res) {
|
|
drawAudio.play();
|
|
}
|
|
});
|
|
});
|
|
//#endif
|
|
//#ifndef H5
|
|
drawAudio.play();
|
|
//#endif
|
|
|
|
drawAudio.onPlay(() => {
|
|
console.log('开始播放');
|
|
});
|
|
},
|
|
playAudio() {
|
|
let _this = this,
|
|
play_Audio = _this.play_Audio ? false : true,
|
|
pageAudio = _this.drawPageData.background_music;
|
|
if (play_Audio) {
|
|
//#ifdef H5
|
|
jWeixin.ready(() => {
|
|
jWeixin.getLocation({
|
|
type: 'gcj02',
|
|
success: function(res) {
|
|
innerAudioContext.play();
|
|
innerAudioContext.loop = true;
|
|
}
|
|
});
|
|
});
|
|
//#endif
|
|
//#ifndef H5
|
|
innerAudioContext.loop = true;
|
|
innerAudioContext.play();
|
|
//#endif
|
|
|
|
innerAudioContext.onPlay(() => {
|
|
console.log('开始播放');
|
|
});
|
|
}
|
|
if (!play_Audio) {
|
|
innerAudioContext.pause();
|
|
innerAudioContext.onPause(() => {
|
|
console.log('暂停播放');
|
|
});
|
|
}
|
|
innerAudioContext.onError(res => {
|
|
// console.log(res.errMsg);
|
|
// console.log(res.errCode);
|
|
innerAudioContext.destroy();
|
|
//发生错误后，销毁实例
|
|
});
|
|
_this.play_Audio = play_Audio;
|
|
},
|
|
getDrawData(flag) {
|
|
let _this = this;
|
|
App._post_form(
|
|
`&p=draw&do=home&id=${_this.parameterid}&draw_id=${_this.parameterid || 0}&head_id=${_this.parameter.head_id}`, {},
|
|
res => {
|
|
// console.log(res);
|
|
_this.drawPageData = res.data.info;
|
|
if (!_this.drawPageData.not_prize_image) {
|
|
_this.drawPageData.not_prize_image = _this.imgfixUrls + 'wzjbj.png'
|
|
// debugger
|
|
}
|
|
if(!_this.drawPageData.share_image){
|
|
_this.drawPageData.share_image = [_this.imgfixUrls + 'cjzybj.jpg']
|
|
// debugger
|
|
}
|
|
// let rule = decodeURIComponent(_this.drawPageData.rule);
|
|
// _this.drawPageData.rule = rule;
|
|
// console.log(rule)
|
|
if (!_this.drawPageData.background_image) {
|
|
_this.drawPageData.background_image = _this.imgfixUrls + 'cjbj.png';
|
|
}
|
|
_this.prizeList = res.data.record;
|
|
_this.storeList = res.data.shop;
|
|
_this.friendList = res.data.help;
|
|
if(res.data.help instanceof Array){
|
|
if(res.data.help.length == 0){
|
|
_this.friendList = {
|
|
list:[]
|
|
}
|
|
}
|
|
}
|
|
_this.goodsList = res.data.prize;
|
|
_this.menuList = res.data.menu;
|
|
if(_this.drawPageData.type == '3'){
|
|
if(!_this.drawPageData.wheel_bg){
|
|
_this.drawPageData.wheel_bg = ['#8EC074','#E6A53F'];
|
|
}
|
|
_this.goodsList.map((item,index)=>{
|
|
item.weight = 1;
|
|
item.prizeId = index + 1;
|
|
item.stock = 100;
|
|
item.name = item.title;
|
|
if(!item.title){
|
|
item.name = '谢谢参与'
|
|
}
|
|
// item.name = item.title;
|
|
})
|
|
// 这个是初始化转盘抽奖序列的
|
|
if (this.isFrontend) {
|
|
this.goodsList.forEach((item) => this.weightTotal += item.weight)
|
|
this.weightArr = this.goodsList.map((item) => item.weight)
|
|
}
|
|
}
|
|
|
|
|
|
if (flag == 1) return;
|
|
if (res.data.info.background_music) {
|
|
innerAudioContext.src = res.data.info.background_music;
|
|
console.log(innerAudioContext.src);
|
|
setTimeout(()=>{
|
|
//#ifdef H5
|
|
jWeixin.ready(() => {
|
|
innerAudioContext.loop = true;
|
|
innerAudioContext.play();
|
|
});
|
|
//#endif
|
|
//#ifndef H5
|
|
innerAudioContext.loop = true;
|
|
innerAudioContext.play();
|
|
//#endif
|
|
// _this.playAudio();
|
|
})
|
|
}
|
|
// uni.showToast({
|
|
// title:'转发成功'
|
|
// })
|
|
},
|
|
false,
|
|
() => {
|
|
_this.loadlogo = true;
|
|
}
|
|
);
|
|
},
|
|
gogetintegral() {
|
|
App.navigationTo({
|
|
url: `pages/subPages2/drawGame/gameIntegral?id=${this.parameterid}`
|
|
})
|
|
},
|
|
myprize() {
|
|
App.navigationTo({
|
|
url: `pages/subPages2/drawGame/myPrize`
|
|
})
|
|
},
|
|
isRuleShow(flag) {
|
|
if (flag == 1) {
|
|
this.parser = this.drawPageData.rule;
|
|
} else {
|
|
this.parser = this.drawPageData.introduce;
|
|
}
|
|
|
|
this.ruleShow = true;
|
|
},
|
|
// 开始抽奖
|
|
playdraw() {
|
|
let _this = this;
|
|
let data = {
|
|
type:'10',
|
|
id:this.parameterid
|
|
}
|
|
let type = '10'
|
|
App._post_form('&do=follow',
|
|
data
|
|
, res => {
|
|
if (res.data.status == 0) {
|
|
console.log('点了');
|
|
if (this.startDraw) return;
|
|
this.startDraw = true;
|
|
this.startImg = true;
|
|
setTimeout(() => {
|
|
this.startImg = false;
|
|
}, 1000);
|
|
if(this.drawPageData.use_music){
|
|
this.playAudio();
|
|
};
|
|
if(this.drawPageData.type == '3'){
|
|
App._post_form(
|
|
`&p=draw&do=draw&id=${_this.parameterid}`,
|
|
{},
|
|
res => {
|
|
|
|
console.log(res)
|
|
console.log('点击');
|
|
_this.startMusic()
|
|
_this.goodsList.map(item=>{
|
|
item.weight = 0;
|
|
});
|
|
_this.goodsList[Number(res.data.serial_number) - 1].weight = 1;
|
|
if (this.isFrontend) {
|
|
this.goodsList.forEach((item) => this.weightTotal += item.weight)
|
|
this.weightArr = this.goodsList.map((item) => item.weight)
|
|
}
|
|
_this.serial_number = res.data.serial_number;
|
|
_this.startDraw = false;
|
|
this.opendraw++;
|
|
// _this.ind = Number(res.data.serial_number) - 1 // 随机产生一个中奖号码
|
|
// // _this.ind = 14;
|
|
// _this.index = 1;
|
|
// _this.speed = 30;
|
|
// _this.times = 0;
|
|
// _this.startRoll();
|
|
},fail=>{
|
|
let msg = '';
|
|
if(fail.data.message == '未绑定手机号'){
|
|
msg = fail.data.message;
|
|
}
|
|
_this.startMusic(false,msg)
|
|
});
|
|
}else{
|
|
this.opendraw++;
|
|
}
|
|
|
|
}else{
|
|
_this.followShow = true;
|
|
_this.followData = res.data;
|
|
}
|
|
})
|
|
|
|
},
|
|
ScrollUp() {
|
|
// eslint-disable-next-line no-unused-vars
|
|
this.intnum = setInterval(_ => {
|
|
if (this.activeIndex < this.prizeList.length) {
|
|
this.activeIndex += 1;
|
|
} else {
|
|
this.activeIndex = 0;
|
|
}
|
|
}, 1000);
|
|
},
|
|
|
|
Stop() {
|
|
clearInterval(this.intnum);
|
|
},
|
|
Up() {
|
|
this.ScrollUp();
|
|
},
|
|
cartScrollUp() {
|
|
// eslint-disable-next-line no-unused-vars
|
|
this.cartintnum = setInterval(_ => {
|
|
if (this.cartactiveIndex < this.storeList.length * 22.8) {
|
|
this.cartactiveIndex += 1;
|
|
} else {
|
|
this.cartactiveIndex = 0;
|
|
}
|
|
}, 50);
|
|
},
|
|
|
|
cartStop() {
|
|
// clearInterval(this.cartintnum);
|
|
setTimeout(() => {
|
|
// this.cartScrollUp();
|
|
}, 3000)
|
|
},
|
|
cartUp() {
|
|
// this.cartScrollUp();
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
/* page {
|
|
background-color: #F74740;
|
|
} */
|
|
</style>
|
|
<style lang="scss" scoped>
|
|
$wheelBgUrl: '~static/raffle-wheel/raffle-wheel__bg';
|
|
.home {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
padding: 50px 0;
|
|
}
|
|
.home-title {
|
|
text-align: center;
|
|
margin-bottom: 50px;
|
|
}
|
|
.home-title__text {
|
|
color: #ffffff;
|
|
font-size: 30px;
|
|
font-weight: bold;
|
|
}
|
|
.home-result {
|
|
text-align: center;
|
|
margin-top: 50px;
|
|
}
|
|
.home-result__text {
|
|
color: #ffffff;
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
}
|
|
.home-wheel {
|
|
text-align: center;
|
|
}
|
|
.raffle-wheel__tip {
|
|
font-size: 24rpx;
|
|
}
|
|
.home-action {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 40rpx;
|
|
width: 260rpx;
|
|
height: 80rpx;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border-radius: 10rpx;
|
|
text-align: center;
|
|
background-color: #00ff99;
|
|
margin: 0 auto;
|
|
}
|
|
.home-action__text {
|
|
color: #FFFFFF;
|
|
font-size: 24rpx;
|
|
}
|
|
.drawGame {
|
|
padding-bottom: 300upx;
|
|
|
|
.titleBG {
|
|
// width: 100vw;
|
|
// height: 450upx;
|
|
position: relative;
|
|
|
|
.titleimg {
|
|
width: 100vw;
|
|
height: 100%;
|
|
}
|
|
|
|
.gameRule {
|
|
font-size: 28upx;
|
|
font-weight: 500;
|
|
color: #FFFFFF;
|
|
width: 50upx;
|
|
text-align: center;
|
|
background-color: #FB3A3A;
|
|
height: 160upx;
|
|
padding: 20upx 0 0upx;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 30%;
|
|
transform: translateY(-50%);
|
|
border-radius: 10upx 0 0 10upx;
|
|
border: 2upx solid #FFFFFF;
|
|
line-height: 28upx;
|
|
border-right: none;
|
|
}
|
|
|
|
.left {
|
|
left: 0;
|
|
border-radius: 0upx 10upx 10upx 0upx;
|
|
border: 2upx solid #FFFFFF;
|
|
border-left: none;
|
|
}
|
|
}
|
|
|
|
.bigbg {
|
|
background-size: 100% 100%;
|
|
// position: relative;
|
|
// top:-5%;
|
|
// margin-top: 48upx;
|
|
}
|
|
|
|
.bg {
|
|
// background: url(../../../static/images/bg.png);
|
|
background-size: 100% 100%;
|
|
height: 1200upx;
|
|
// margin: 30upx;
|
|
margin-top: 0;
|
|
position: relative;
|
|
|
|
.scroll-wrap {
|
|
height: 30upx;
|
|
overflow: hidden;
|
|
// font-size: 20upx;
|
|
position: absolute;
|
|
line-height: 30upx;
|
|
left: 50%;
|
|
top: 2.5%;
|
|
transform: translate(-50%);
|
|
}
|
|
|
|
.scroll-content {
|
|
position: relative;
|
|
height: 15px;
|
|
transition: top 0.5s;
|
|
color: #FF4444;
|
|
font-size: 15px;
|
|
}
|
|
|
|
.scroll-content-item {
|
|
line-height: 15px;
|
|
text-align: center;
|
|
}
|
|
|
|
.btnimg {
|
|
transition: transform 0.3s ease-out;
|
|
}
|
|
|
|
.btnimg:active {
|
|
transform: scale(0.9)
|
|
}
|
|
.ifeng{
|
|
width: 160upx;
|
|
height: 120upx;
|
|
border-radius: 8upx;
|
|
.ifelit{
|
|
width: 160upx;
|
|
height: 112upx;
|
|
border-radius: 8upx;
|
|
}
|
|
}
|
|
.description{
|
|
width: 160upx;
|
|
height: 52upx;
|
|
border-radius: 60upx;
|
|
.descriptionrulo{
|
|
width: 160upx;
|
|
height: 45upx;
|
|
border-radius: 60upx;
|
|
box-shadow: 0px 0px 5px #FFFFFF inset;
|
|
}
|
|
}
|
|
.awardbtn{
|
|
width: 160upx;
|
|
height: 52upx;
|
|
border-radius: 60upx;
|
|
.awardbtnrulo{
|
|
width: 160upx;
|
|
height: 45upx;
|
|
border-radius: 60upx;
|
|
box-shadow: 0px 0px 5px #FFFFFF inset;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.activity {
|
|
position: relative;
|
|
top: 60upx;
|
|
|
|
// padding: 30upx;
|
|
.tagbox {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: -34upx;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.contentbox {
|
|
width: 236upx;
|
|
height: 69upx;
|
|
position: relative;
|
|
z-index: 99;
|
|
// margin: auto;
|
|
background: linear-gradient(to bottom, #FEE76A 0%, #FBCD1C 100%);
|
|
|
|
.text {
|
|
position: absolute;
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
line-height: 69upx;
|
|
font-size: 33upx;
|
|
width: 100%;
|
|
height: 100%;
|
|
font-weight: 700;
|
|
text-shadow:
|
|
-2upx -2upx 0 #FE8834,
|
|
4upx -2upx 0 #FE8834,
|
|
-4upx 4upx 0 #FE8834,
|
|
4upx 4upx 0 #FE8834,
|
|
0upx 4upx 4upx rgba(0, 0, 0, 0.6);
|
|
}
|
|
}
|
|
|
|
.activity-friend {
|
|
padding: 80upx 30upx 0;
|
|
background-color: #FFFFFF;
|
|
border-radius: 30upx;
|
|
}
|
|
|
|
.activity-content {
|
|
border-radius: 30upx;
|
|
width: 100%;
|
|
height: 490upx;
|
|
|
|
background-color: #FFFFFF;
|
|
margin: auto;
|
|
overflow: auto;
|
|
|
|
.storeList {
|
|
position: relative;
|
|
transition: top 0.5s;
|
|
overflow: auto;
|
|
margin: 0upx 10upx 0upx;
|
|
padding: 80upx 20upx 20upx;
|
|
.storeList-item {
|
|
padding: 20upx;
|
|
margin-right: 20upx;
|
|
box-shadow: 1upx 1upx 12upx 1upx #CCCCCC;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// .bgcs{
|
|
// background: url(../../../static/images/cjbj.png);
|
|
// width: 100vw;
|
|
// height: 100vh;
|
|
// }
|
|
}
|
|
|
|
.rulebox {
|
|
background: #FFFFFF;
|
|
padding: 20upx;
|
|
width: 75vw;
|
|
height: 80vh;
|
|
overflow: hidden;
|
|
border-radius: 20upx;
|
|
}
|
|
|
|
.imgs-box {
|
|
width: 500upx;
|
|
height: 500upx;
|
|
border-radius: 20upx;
|
|
}
|
|
|
|
.zjbj {
|
|
// background-image: url(../../../static/images/xxhg3.png);
|
|
// background-size: 100% 100%;
|
|
// padding: 54upx;
|
|
border-radius: 10upx;
|
|
width: 85vw;
|
|
height: 870upx;
|
|
position: relative;
|
|
|
|
.zjbox {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 24%;
|
|
transform: translate(-50%);
|
|
}
|
|
|
|
.closeBtn {
|
|
font-size: 28upx;
|
|
height: 40upx;
|
|
width: 40upx;
|
|
border-radius: 60upx;
|
|
background-color: rgba(0, 0, 0, 0.8);
|
|
color: #A8A2B2;
|
|
line-height: 40upx;
|
|
position: absolute;
|
|
right: 0upx;
|
|
top: 0upx;
|
|
}
|
|
|
|
.contenttitle {
|
|
// width: 236upx;
|
|
// height: 69upx;
|
|
// position: relative;
|
|
z-index: 99;
|
|
// margin: auto;
|
|
// background: linear-gradient(to bottom, #FEE76A 0%, #FBCD1C 100%);
|
|
padding-bottom: 30upx;
|
|
margin-bottom: 30upx;
|
|
border-bottom: 1upx dotted #CCCCCC;
|
|
|
|
.text {
|
|
|
|
text-align: center;
|
|
color: #ffffff;
|
|
line-height: 69upx;
|
|
font-size: 40upx;
|
|
font-weight: 700;
|
|
text-shadow:
|
|
-2upx -2upx 0 #ff4444,
|
|
4upx -2upx 0 #ff4444,
|
|
-4upx 4upx 0 #ff4444,
|
|
4upx 4upx 0 #ff4444,
|
|
0upx 4upx 4upx rgba(0, 0, 0, 0.6);
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|