Skip to content

M
mr-julyedu
Commit fd83c9cb by zhanghaozhe
Options

正式抽奖

parent 82069eb8
Showing with 358 additions and 26 deletions
src/components/activity/prize-winner-list/index.scss
#prize-winner-list { #prize-winner-list {
height: 100%;
background: #5327fa; background: #5327fa;
padding-bottom: 10px;
.banner { .banner {
width: 100%; width: 100%;
...@@ -31,7 +31,6 @@ ...@@ -31,7 +31,6 @@
ul { ul {
width: 355px; width: 355px;
height: 316px;
margin: 0 auto; margin: 0 auto;
background: rgba(57, 0, 201, 1); background: rgba(57, 0, 201, 1);
border: 1px solid rgba(89, 112, 255, 1); border: 1px solid rgba(89, 112, 255, 1);
......
src/components/blessingPreheat/formal-draw/index.scss
...@@ -43,6 +43,14 @@ ...@@ -43,6 +43,14 @@
} }
} }
&.am-tabs-horizontal {
.am-tabs-pane-wrap {
&-inactive {
padding: 0 1px;
}
}
}
.am-tabs-tab-bar-wrap { .am-tabs-tab-bar-wrap {
height: 33px; height: 33px;
border: 1px solid rgba(255, 246, 4, 1); border: 1px solid rgba(255, 246, 4, 1);
...@@ -146,6 +154,7 @@ ...@@ -146,6 +154,7 @@
.time-ranges { .time-ranges {
overflow: hidden; overflow: hidden;
& > li { & > li {
&::after { &::after {
content: ''; content: '';
...@@ -159,6 +168,7 @@ ...@@ -159,6 +168,7 @@
& > li:last-child { & > li:last-child {
margin-bottom: 30px; margin-bottom: 30px;
&::after { &::after {
display: none; display: none;
} }
...@@ -231,8 +241,9 @@ ...@@ -231,8 +241,9 @@
text-decoration: underline; text-decoration: underline;
} }
} }
&.active{
.status::after{ &.active {
.status::after {
display: block; display: block;
border-top-color: #DDDDDD; border-top-color: #DDDDDD;
} }
...@@ -278,6 +289,7 @@ ...@@ -278,6 +289,7 @@
.prizes { .prizes {
margin-top: 15px; margin-top: 15px;
li { li {
position: relative; position: relative;
width: 100px; width: 100px;
...@@ -285,24 +297,28 @@ ...@@ -285,24 +297,28 @@
.tip { .tip {
position: absolute; position: absolute;
top: -20px; top: -32px;
left: 50%; left: 50%;
z-index: 10; z-index: 10;
margin-left: -37px; margin-left: -50px;
width: 74px; padding: 5px 8px;
height: 20px; white-space: nowrap;
background: rgba(255, 246, 4, 1); background: rgba(255, 246, 4, 1);
border-radius: 2px; border-radius: 2px;
font-size: 11px; font-size: 11px;
color: #3900C9; color: #3900C9;
transform: scale(.8);
&::after { &::after {
position: absolute; position: absolute;
bottom: -4px; left: 50%;
bottom: -3px;
margin-left: -6px;
content: ''; content: '';
display: block; display: block;
border-style: solid; border-style: solid;
border-width: 4px 6px 0; border-width: 4px 6px 0;
border-color: transparent;
border-top-color: rgba(255, 246, 4, 1); border-top-color: rgba(255, 246, 4, 1);
} }
} }
...@@ -333,9 +349,13 @@ ...@@ -333,9 +349,13 @@
} }
} }
.swiper-container {
overflow: visible;
}
} }
.closable-popup-mask{ .closable-popup-mask {
.popup-container.join-lottery { .popup-container.join-lottery {
background: #5327FA; background: #5327FA;
text-align: center; text-align: center;
...@@ -369,7 +389,7 @@ ...@@ -369,7 +389,7 @@
margin-bottom: 20px; margin-bottom: 20px;
} }
.hint{ .hint {
color: rgba(82, 92, 101, .8); color: rgba(82, 92, 101, .8);
margin-bottom: 10px; margin-bottom: 10px;
text-align: left; text-align: left;
...@@ -397,15 +417,18 @@ ...@@ -397,15 +417,18 @@
} }
.closable-popup-mask { .closable-popup-mask {
.subscribe{ .subscribe {
height: 215px; height: 215px;
padding-bottom: 30px; padding-bottom: 30px;
.title{
.title {
margin-bottom: 20px; margin-bottom: 20px;
} }
.content{
.content {
text-align: center; text-align: center;
.qr-code{
.qr-code {
width: 120px; width: 120px;
height: 120px; height: 120px;
} }
......
src/components/blessingPreheat/index.js
...@@ -29,6 +29,8 @@ import FormalDraw from "./formal-draw" ...@@ -29,6 +29,8 @@ import FormalDraw from "./formal-draw"
class BlessingPreheat extends Component { class BlessingPreheat extends Component {
recordInstance = null
constructor(props) { constructor(props) {
super(props) super(props)
this.navTop = 183 this.navTop = 183
...@@ -85,6 +87,12 @@ class BlessingPreheat extends Component { ...@@ -85,6 +87,12 @@ class BlessingPreheat extends Component {
isApp: false, isApp: false,
isClose: false, isClose: false,
testSum: 0, testSum: 0,
address: {
name: '',
phone: '',
address: ''
},
addressPopupVisible: false
} }
} }
...@@ -413,6 +421,97 @@ class BlessingPreheat extends Component { ...@@ -413,6 +421,97 @@ class BlessingPreheat extends Component {
} }
} }
getMyPrizeRecord = () => {
http.get(`${API.home}/sys/activity/my_lotteries`)
.then(res => {
const {code, data, msg} = res.data
if (code == 200) {
this.recordInstance = Popup({
title: '我的中奖纪录',
className: 'prize-record-popup',
content: (
<div className={'record-container'}>
<div className="list-title">
<div>时间</div>
<div>奖品名称</div>
</div>
<ul>
{
data.map((item, index) => {
return (
<li key={index}>
<div className="time">{item.time}</div>
<div className="name" onClick={this.showAddressPopup.bind(this, item['is_virtual'],item.prize)}>{item.prize}</div>
</li>
)
})
}
</ul>
</div>
)
})
} else {
Toast.info(msg, 2, null, false)
}
})
}
submitAddress = debounce(() => {
http.post(`${API.home}/sys/collect_info`, {
...this.state.address
})
.then(res => {
const {data, code, msg} = res.data
if (code == 200) {
this.setState({
addressPopupVisible: false
})
} else {
Toast.info(msg, 2, null, false)
}
})
}, 500)
setAddressState = e => {
const value = e.target.value
const name = e.target.name
this.setState({
address: {
...this.state.address, ...{
[name]: value
}
}
})
}
showAddressPopup = (isVirtual, prize) => {
if(!isVirtual){
Toast.info(`恭喜你抽中${prize}，奖品已存放到你的账户`, 2, null, false)
return
}
http.get(`${API.home}/sys/user_address_info`)
.then(res => {
const {data, code, msg} = res.data
if (code == 200) {
this.recordInstance && this.recordInstance.close()
this.setState({
address: {
...this.state.address, ...{
name: data.name,
phone: Number(data.phone),
address: data.address
}
},
addressPopupVisible: true
})
} else {
Toast.info(msg, 2, null, false)
}
})
}
render() { render() {
const { const {
navs, navs,
...@@ -426,7 +525,9 @@ class BlessingPreheat extends Component { ...@@ -426,7 +525,9 @@ class BlessingPreheat extends Component {
index, index,
isApp, isApp,
isClose, isClose,
testSum testSum,
address,
addressPopupVisible,
} = this.state } = this.state
const {history} = this.props const {history} = this.props
const isLogin = !this.props.user.hasError const isLogin = !this.props.user.hasError
...@@ -472,7 +573,14 @@ class BlessingPreheat extends Component { ...@@ -472,7 +573,14 @@ class BlessingPreheat extends Component {
{/* 抽奖--正式 */} {/* 抽奖--正式 */}
{ {
isFormal === 1 && isFormal === 1 &&
<FormalDraw/> <>
<div className="formal-draw-btns">
<button className="luck-draw__button" onClick={() => this.handleToShow('isRule')}>活动规则></button>
<button className='prize-record' onClick={this.getMyPrizeRecord}>中奖记录></button>
</div>
<FormalDraw/>
</>
} }
{/*定金--只在预热期间显示*/} {/*定金--只在预热期间显示*/}
...@@ -527,6 +635,51 @@ class BlessingPreheat extends Component { ...@@ -527,6 +635,51 @@ class BlessingPreheat extends Component {
<RankList></RankList> <RankList></RankList>
{/*<Live isFormal={isFormal} isLogin={isLogin}></Live>*/} {/*<Live isFormal={isFormal} isLogin={isLogin}></Live>*/}
{
addressPopupVisible &&
<div className="address-mask">
<div className="address-popup">
<div className="title">收货信息</div>
<div className="address-info-container">
<div className="tip">请及时填写收货信息，获得实物奖品后将第一时间为您邮寄</div>
<input type="text"
placeholder={'收件人'}
name={'name'}
onChange={e => {
this.setAddressState(e)
}}
value={address.name}
/>
<input type="tel"
placeholder={'联系方式'}
name={'tel'}
onChange={e => {
this.setAddressState(e)
}}
value={address.phone}
/>
<input type="text"
placeholder={'收货地址'}
name={'address'}
onChange={e => {
this.setAddressState(e)
}}
value={address.address}
/>
<button type='button'
className={(address.name != '' && address.phone != '' && address.address != '') ? 'active' : ''}
onClick={this.submitAddress}
>提交
</button>
<i className={'iconfont iconiconfront-2'} onClick={() => {
this.setState({
addressPopupVisible: false
})
}}/>
</div>
</div>
</div>
}
</div> </div>
) )
} }
......
src/components/blessingPreheat/index.scss
#blessing-preheat { #blessing-preheat {
background: #5327FA; background: #5327FA;
} }
.test__record { .test__record {
width: 106px; width: 106px;
height: 26px; height: 26px;
border:1px solid rgba(255,246,4,1); border: 1px solid rgba(255, 246, 4, 1);
border-radius:13px; border-radius: 13px;
font-size:14px; font-size: 14px;
font-weight:400; font-weight: 400;
color:rgba(255,246,4,1); color: rgba(255, 246, 4, 1);
margin: 10px auto 14px; margin: 10px auto 14px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.sort__rules { .sort__rules {
font-size:12px; font-size: 12px;
font-weight:400; font-weight: 400;
color:rgba(255,255,255,1); color: rgba(255, 255, 255, 1);
text-align: center; text-align: center;
text-align-last: center; text-align-last: center;
} }
...@@ -57,7 +59,7 @@ ...@@ -57,7 +59,7 @@
text-align: center; text-align: center;
} }
.luck-draw__button { .luck-draw__button, .prize-record {
display: block; display: block;
width: 106px; width: 106px;
height: 26px; height: 26px;
...@@ -75,3 +77,158 @@ ...@@ -75,3 +77,158 @@
outline: none; 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;
}
}
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