Skip to content

M
mr-julyedu
Commit 1a976f05 by xuzhenghua
Options

抽奖不能点击

parent b6b9b857
Showing with 706 additions and 132 deletions
src/components/activity/prize-winner-list/index.scss
#prize-winner-list {
height: 100%;
background: #5327fa;
padding-bottom: 10px;
.banner {
width: 100%;
......@@ -31,7 +31,6 @@
ul {
width: 355px;
height: 316px;
margin: 0 auto;
background: rgba(57, 0, 201, 1);
border: 1px solid rgba(89, 112, 255, 1);
......
src/components/blessingGetPrize/index.js 0 → 100644
import React, { Component } from 'react';
import './index.scss';
import ListHeader from './../blessingPreheat/listHeader/index'
import { http, getParam } from '@/utils';
import { Toast } from 'antd-mobile';
import AddressPopup from './../blessingPreheat/addressPopup/index'
import { Popup } from '@/common'
import { connect } from 'react-redux'
@connect(({user}) => (
{
uid: user.data.uid || ''
}
))
class BlessingGetPrize extends Component {
popupInstance = null
constructor(props) {
super(props);
this.state = {
date: '',
next_date: '',
name: '',
is_winning: 1, //是否中奖
is_virtual: 1, // 实物奖品 虚拟奖品
prize_data: [],
address: false,
}
}
componentDidMount () {
http.get(`${API.home}/sys/lottery_result?id=${getParam('id')}`).then(res => {
const {code, msg, data} = res.data;
if(code === 200) {
this.setState({
...data.info,
prize_data: data.prize_data.slice(0, 6),
})
} else {
Toast.info(msg);
}
});
}
showAddress = (bool) => {
const {history, uid} = this.props;
const {name} = this.state;
if (bool && !uid) {
history.push('/passport')
} else {
if (bool && !this.popupInstance) {
this.popupInstance = Popup({
title: '恭喜您',
content: <AddressPopup tip='填写您的联系方式' prize={name} handleToHide={() => this.showAddress(false)}/>
})
} else {
this.popupInstance.close()
this.popupInstance = null
}
}
}
render() {
const {date, next_date, name, is_winning, is_virtual, prize_data, address} = this.state;
return (
<div className="blessing_get_prize">
<div className='is__get_prize'>
<div className="get_piriz__info">
<div className='result'>{date}中奖结果</div>
{
is_winning === 0 && (
<div className='no_prize'>很遗憾，你未中奖～</div>
)
}
{
is_winning === 1 && is_virtual === 0 && (
<div className='real__prize'>
<div>恭喜你，已抽中{name}奖品</div>
<span onClick={()=> this.showAddress(true)} className='address'>填写收货地址</span>
</div>
)
}
{
is_winning === 1 && is_virtual === 1 && (
<div className='virtual '>
<div>恭喜你抽中{name}，</div>
<div>奖品已存放到你的账户</div>
</div>
)
}
</div>
</div>
<div className='current_stage'>
{next_date}
</div>
<ListHeader text="抽奖已开启" styles={{margin: '16px 0 18px'}}/>
<div className='prize_list_container'>
{
prize_data.length > 0 && prize_data.map((item, index) => {
return (<div className='prize__item' key={index}>
<img className='prize__image' src={item.img}></img>
<div className='name__num'>
<span>{item.name}</span>
<span>（{`*${item.num}`}）</span>
</div>
</div>)
})
}
</div>
<a href='/blessingPreheat' className='join__button'>
立即参与抽奖
</a>
<span onClick={()=> this.showAddress(true)} className='address'>填写收货地址</span>
<div className='prize__tip'>
<div className='line'></div>
<span>中奖小tips</span>
<div className='line'></div>
</div>
<div className='blessing__des'>积攒的福气值越高，中奖概率越大哦</div>
<a className='to__preheat' href='/blessingPreheat'>积攒更多福气值</a>
</div>
)
}
}
export default BlessingGetPrize
\ No newline at end of file
src/components/blessingGetPrize/index.scss 0 → 100644
.blessing_get_prize {
width: 100vw;
height: 100vh;
overflow: auto;
background-color: #4B00F3;
padding-bottom: 58px;
.is__get_prize {
width: 100%;
height: 120px;
background: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/quan2x.png') center center no-repeat;
background-size: 100% 100%;
margin-top: 10px;
position: relative;
.get_piriz__info {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
.result {
height:16px;
line-height: 16px;
font-size:16px;
font-weight:400;
color:rgba(76,33,239,1);
margin-top: 30px;
}
.virtual {
font-size:16px;
font-weight:500;
color:rgba(76,33,239,1);
line-height:20px;
margin-top: 10px;
div {
width: 100%;
text-align: center;
text-align-last: center;
margin-top: 4px;
}
}
.no_prize {
font-size:16px;
font-weight:500;
color:rgba(76,33,239,1);
width: 100%;
text-align: center;
text-align-last: center;
margin-top: 18px;
}
.real__prize {
font-size:16px;
font-weight:500;
color:rgba(76,33,239,1);
width: 100%;
margin-top: 16px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
div {
line-height: 16px;
}
.address {
font-size:12px;
font-weight:400;
text-decoration:underline;
color:rgba(76,33,239,1);
margin-top: 6px;
}
}
}
}
.current_stage {
width:100%;
font-size:16px;
font-weight:500;
color:rgba(255,255,255,1);
text-align: center;
text-align-last: center;
margin-top: 36px;
}
.prize_list_container {
width: 100%;
height:250px;
background:rgba(53,0,162,1);
box-shadow:0px 3px 6px 0px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: wrap;
padding: 16px;
.prize__item {
width: 106px;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
margin-right: 10px;
&:nth-child(3n) {
margin-right: 0;
}
.prize__image {
width: 106px;
height: 82px;
}
.name__num {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
font-size:12px;
font-weight:400;
color:rgba(255,255,255,1);
margin-top: 6px;
span {
&:first-child {
width: 70px;
flex: 0 0 auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
&:last-child {
width: 36px;
flex: 0 0 auto;
}
}
}
}
}
.join__button {
display: block;
width:340px;
height:50px;
background:linear-gradient(90deg,rgba(255,105,5,1) 0%,rgba(255,180,5,1) 100%);
font-size:18px;
font-weight:500;
color:rgba(255,255,255,1);
border-radius:5px;
margin: 20px auto 32px;
line-height: 50px;
text-align: center;
text-align-last: center;
}
.prize__tip {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
font-size:14px;
font-weight:400;
color:rgba(255,255,255,1);
margin-bottom: 12px;
.line {
width: 128px;
height: 1px;
background: #fff;
}
span {
margin: 0 8px;
}
}
.blessing__des {
font-size:12px;
font-weight:300;
color:rgba(255,255,255, .6);
text-align: center;
margin-bottom: 16px;
}
.to__preheat {
display: inline-block;
width: 100%;
font-size:14px;
font-weight:300;
text-decoration:underline;
color:rgba(255,255,255, .6);
text-align: center;
}
}
.address__prize {
font-size: 16px;
width: 100%;
text-align: center;
text-align-last: center;
color: #525C65;
line-height: 16px;
margin-top: 16px;
}
\ No newline at end of file
src/components/blessingPreheat/addressPopup/index.js
......@@ -54,6 +54,7 @@ class AddressPopup extends Component {
render() {
const { isLoading, addressInfo } = this.state;
const {tip, prize} = this.props;
return (
<>
{
......@@ -84,7 +85,14 @@ class AddressPopup extends Component {
}}
render={({errors}) => (
<Form className="address-form">
<p className="address-form__desc">请及时填写收货信息，获得实物奖品后将第一时间为您邮寄</p>
{
prize ? (
<p className='address__prize'>您抽中了{prize}<span style={{'color': '#FF4000'}}>实物奖品</span></p>
) : (null)
}
{
tip ? (<p className="address-form__desc">{tip}</p>) : (<p className="address-form__desc">请及时填写收货信息，获得实物奖品后将第一时间为您邮寄</p>)
}
<Field
name="name"
render={({ field }) => (
......
src/components/blessingPreheat/banner/index.js
......@@ -97,10 +97,10 @@ class Banner extends Component {
render() {
const { toSection, navs, index } = this.props;
const { toSection, navs, index, isFormal } = this.props;
return (
<div id={'main-banner'}>
<div className="banner"></div>
<div className={`banner ${isFormal?'formal_banner':''}`}></div>
<nav id={'main-nav'}>
<ul>
{
......
src/components/blessingPreheat/banner/index.scss
......@@ -6,6 +6,10 @@
background: url("https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/banner.png") no-repeat;
background-size: contain;
}
.formal_banner{
background: url("https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/formal_banner.png") no-repeat;
background-size: contain;
}
#main-nav{
position: absolute;
top: 183px;
......
src/components/blessingPreheat/index.scss
......@@ -2,100 +2,28 @@
background: #5327FA;
}
.timeline-share{
height: 215px;
padding-bottom: 30px;
.title{
margin-bottom: 20px;
}
.content{
text-align: center;
.qr-code{
width: 120px;
height: 120px;
}
}
}
.test__record {
width: 106px;
height: 26px;
border:1px solid rgba(255,246,4,1);
border-radius:13px;
font-size:14px;
font-weight:400;
color:rgba(255,246,4,1);
border: 1px solid rgba(255, 246, 4, 1);
border-radius: 13px;
font-size: 14px;
font-weight: 400;
color: rgba(255, 246, 4, 1);
margin: 10px auto 14px;
display: flex;
justify-content: center;
align-items: center;
}
.sort__rules {
font-size:12px;
font-weight:400;
color:rgba(255,255,255,1);
font-size: 12px;
font-weight: 400;
color: rgba(255, 255, 255, 1);
text-align: center;
text-align-last: center;
}
.join-lottery {
background: #5327FA;
text-align: center;
.title {
color: #fff;
margin-bottom: 15px;
}
.text {
width: 275px;
height: 248px;
padding: 36px 30px 0;
margin-bottom: 10px;
text-align: center;
background: url("https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/join-lottery-bg.png");
background-size: contain;
font-size: 14px;
.code {
color: #FF0000;
margin-bottom: 8px;
}
.time, .hint {
font-size: 12px;
color: #525C65;
}
.time {
margin-bottom: 20px;
}
.hint{
color: rgba(82, 92, 101, .8);
margin-bottom: 10px;
text-align: left;
}
.qr-code {
width: 90px;
height: 90px;
}
}
button {
width: 133px;
height: 30px;
background: #fff;
border-radius: 15px;
font-size: 14px;
color: #5327FA;
-webkit-appearance: none;
outline: none;
border: none;
}
}
.invite-popup {
.content {
display: flex;
......@@ -131,7 +59,7 @@
text-align: center;
}
.luck-draw__button {
.luck-draw__button, .prize-record {
display: block;
width: 106px;
height: 26px;
......@@ -149,3 +77,158 @@
outline: none;
}
.formal-draw-btns {
display: flex;
justify-content: center;
margin: 15px 0;
button {
margin: 0;
}
& button:first-child {
margin-right: 27px;
}
}
.prize-record-popup {
.title {
margin-bottom: 11px;
}
.record-container {
width: 250px;
.list-title {
display: flex;
border-radius: 2px 2px 0 0;
div {
width: 50%;
height: 33px;
line-height: 33px;
background: #edeeef;
text-align: center;
font-size: 12px;
color: #525C65;
}
}
ul {
border: 1px solid #CFDBE5;
border-bottom: 0;
li {
border-bottom: 1px solid #CFDBE5;
display: flex;
height: 33px;
line-height: 33px;
font-size: 12px;
& > div {
width: 50%;
text-align: center;
}
.time {
color: #525C65;
}
.name {
color: #09f;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-decoration: underline;
}
}
}
}
}
.address-mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .6);
z-index: 100;
.address-popup {
position: absolute;
top: 179px;
left: 50%;
margin-left: -150px;
width: 300px;
height: 309px;
padding: 18px 25px;
background: #fff;
border-radius: 5px;
font-size: 12px;
.address-info-container {
position: relative;
padding-bottom: 24px;
text-align: center;
}
.title {
font-size: 16px;
color: #525C65;
text-align: center;
margin-bottom: 11px;
}
.tip {
color: #999;
margin-bottom: 15px;
}
input {
width: 250px;
height: 40px;
border: 1px solid rgba(221, 221, 221, 1);
-webkit-appearance: none;
outline: none;
margin-bottom: 10px;
padding-left: 10px;
&::placeholder {
color: #999;
}
}
button {
width: 141px;
height: 33px;
margin-top: 13px;
text-align: center;
line-height: 33px;
background: #ccced0;
color: #fff;
-webkit-appearance: none;
outline: none;
border: none;
border-radius: 16px;
font-size: 15px;
&.active{
background: #09f;
}
}
}
.iconfont{
position: absolute;
bottom: -50px;
left: 50%;
transform: translateX(-50%);
font-size: 33px;
color: #fff;
}
}
src/router/router-config.js
......@@ -182,6 +182,10 @@ export default [
component: loadable(() => import(/* webpackChunkName: 'blessing-preheat' */'@/components/blessingPreheat/index'))
},
{
path: '/blessingGetPrize',
component: loadable(() => import(/* webpackChunkName: 'blessing-getPrize' */'@/components/blessingGetPrize/index'))
},
{
path: '/prize-winner-list',
component: loadable(() => import(/* webpackChunkName: 'prize-winner-list' */'@/components/activity/prize-winner-list'))
},
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment