Skip to content

M
mr-julyedu
Commit 2dba5b4d by zhanghaozhe
Options

领取页

parent f9e31271
Showing with 688 additions and 18 deletions
config/webpack.config.js
......@@ -281,7 +281,8 @@ module.exports = function(webpackEnv) {
'react-native': 'react-native-web',
'@': path.resolve(__dirname, '../src'),
'@common': path.resolve(__dirname, '../src/common'),
'@components': path.resolve(__dirname, '../src/components')
'@components': path.resolve(__dirname, '../src/components'),
'@assets': path.resolve(__dirname, '../src/assets'),
},
plugins: [
// Adds support for installing with Plug'n'Play, leading to faster installs and adding
......
package-lock.json
......@@ -1027,17 +1027,17 @@
}
},
"@babel/runtime": {
"version": "7.3.1",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.3.1.tgz",
"integrity": "sha512-7jGW8ppV0ant637pIqAcFfQDDH1orEPGJb8aXfUozuCU3QqX7rX4DA8iwrbPrR1hcH0FTTHz47yQnk+bl5xHQA==",
"version": "7.7.7",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.7.7.tgz",
"integrity": "sha512-uCnC2JEVAu8AKB5do1WRIsvrdJ0flYx/A/9f/6chdacnEZ7LmavjdsDXr5ksYBegxtuTPR5Va9/+13QF/kFkCA==",
"requires": {
"regenerator-runtime": "^0.12.0"
"regenerator-runtime": "^0.13.2"
},
"dependencies": {
"regenerator-runtime": {
"version": "0.12.1",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz",
"integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg=="
"version": "0.13.3",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz",
"integrity": "sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw=="
}
}
},
......@@ -2847,6 +2847,14 @@
"@babel/plugin-transform-typescript": "^7.1.0"
}
},
"@babel/runtime": {
"version": "7.3.1",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.3.1.tgz",
"integrity": "sha512-7jGW8ppV0ant637pIqAcFfQDDH1orEPGJb8aXfUozuCU3QqX7rX4DA8iwrbPrR1hcH0FTTHz47yQnk+bl5xHQA==",
"requires": {
"regenerator-runtime": "^0.12.0"
}
},
"babel-loader": {
"version": "8.0.5",
"resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.0.5.tgz",
......@@ -2871,6 +2879,11 @@
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
"integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg=="
},
"regenerator-runtime": {
"version": "0.12.1",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz",
"integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg=="
},
"source-map": {
"version": "0.5.7",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
......@@ -3081,9 +3094,9 @@
"integrity": "sha1-c5JncZI7Whl0etZmqlzUv5xunOg="
},
"base64-js": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.3.0.tgz",
"integrity": "sha512-ccav/yGvoa80BQDljCxsmmQ3Xvx60/UpBIij5QN21W3wBi/hhIC9OoO+KLpu9IJTS9j4DRVJ3aDDF9cMSoa2lw=="
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.3.1.tgz",
"integrity": "sha512-mLQ4i2QO1ytvGWFWmcngKO//JXAQueZvwEKtjgQFM4jIK0kU+ytMfplL8j+n5mspOfjHwoAg+9yhb7BwAHm36g=="
},
"base64id": {
"version": "1.0.0",
......
package.json
......@@ -5,6 +5,7 @@
"dependencies": {
"@babel/core": "7.2.2",
"@babel/plugin-proposal-decorators": "^7.4.4",
"@babel/runtime": "^7.7.7",
"@loadable/component": "^5.10.1",
"@svgr/webpack": "4.1.0",
"antd-mobile": "^2.3.1",
......@@ -41,6 +42,7 @@
"jest-pnp-resolver": "1.0.2",
"jest-resolve": "23.6.0",
"jest-watch-typeahead": "^0.2.1",
"js-base64": "^2.5.1",
"js-cookie": "^2.2.0",
"less": "^3.9.0",
"less-loader": "^4.1.0",
......
src/components/activity/give-courses/assistance/assistance.scss 0 → 100644
#assistance {
width: 100%;
background: $white;
position: relative;
padding-bottom: px2rem(55);
-webkit-overflow-scrolling: touch;
text-align: center;
$mt15: 15px;
@function px2rem($px) {
@return #{$px}px;
}
@mixin px2px($prop, $value) {
#{$prop}: #{$value/2}px
}
@mixin page-big($bg, $color, $shadow) {
border-radius: 40px;
border: 1px solid transparent;
outline: none;
text-align: center;
background: $bg;
color: $color;
font-weight: bold;
box-shadow: $shadow;
}
@mixin border-b-1px($color) {
position: relative;
&::after {
display: block;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
border-bottom: 1px solid $color;
content: '';
}
}
.barrage-wrapper {
width: 100%;
height: px2rem(30);
background-color: rgba(0, 0, 0, .5);
position: absolute;
top: 0;
z-index: 99;
overflow: hidden;
.barrage-list {
height: px2rem(30);
overflow: hidden;
li {
height: px2rem(30);
position: relative;
display: flex;
align-items: center;
justify-content: left;
margin: 0 10px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
.person-left {
display: flex;
align-items: center;
line-height: px2rem(30);
margin-right: 5px;
.avatar {
min-width: px2rem(20);
height: px2rem(20);
border-radius: 50%;
margin-right: 5px;
}
.name {
color: $active;
max-width: px2rem(100);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.title {
color: $white;
}
.person-right {
margin-right: 58px;
.time {
@include px2px(font-size, 22);
color: $color_666;
}
}
}
}
}
.bg-image {
position: relative;
width: 100%;
height: 0;
padding-top: 60%;
transform-origin: top;
background-size: cover;
.ranklist-btn {
height: px2rem(30);
line-height: px2rem(30);
padding: 0 10px;
background-color: #2FF8FF;
box-shadow: 0 0 5px 0 rgba(47, 248, 255, .4);
border-radius: 15px 0 0 15px;
position: fixed;
top: 160px;
right: 0;
z-index: 999;
color: #15006A;
@include px2px(font-size, 20);
}
}
.christ-getwrap {
overflow: hidden;
.title {
margin-top: 10px;
margin-left: $mt15;
text-align: left;
@include px2px(font-size, 28);
.active {
color: $active;
}
}
.btn-get-wrap {
margin-top: 15px;
.btn-get {
width: px2rem(300);
height: px2rem(38);
line-height: px2rem(34);
display: block;
margin: 0 auto;
@include px2px(font-size, 32);
@include page-big($active, $white, none);
border-radius: 5px !important;
}
}
.person-tolearn {
margin-top: 10px;
color: $color_333;
font-size: 14px;
}
.person-getwarp {
width: 100%;
margin-top: $mt15;
.person-get {
height: px2rem(30);
line-height: px2rem(30);
background-color: $bg_f4f4f4;
text-align: left;
padding-left: 15px;
color: $color_333;
@include px2px(font-size, 24);
}
.person-null {
height: px2rem(105);
line-height: px2rem(105);
text-align: center;
overflow: hidden;
}
.person-list {
height: px2rem(105);
overflow: hidden;
background-color: $bg_f4f4f4;
li {
height: px2rem(35);
line-height: px2rem(35);
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
@include border-b-1px(#eae7f4);
margin: 0 10px;
.person-left {
display: flex;
align-items: center;
width: px2rem(200);
overflow: hidden;
.avatar {
min-width: px2rem(20);
height: px2rem(20);
border-radius: 50%;
margin-right: 5px;
}
.name {
display: inline-block;
max-width: px2rem(150);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.person-right {
margin-right: 58px;
.time {
@include px2px(font-size, 22);
color: $color_666;
}
}
}
}
.person-encourage {
color: #FA952F;
@include px2px(font-size, 24);
margin-top: 10px;
}
.btn-morewap {
margin-top: 10px;
.btn-more {
width: px2rem(300);
height: px2rem(38);
line-height: px2rem(34);
display: block;
margin: 0 auto;
@include px2px(font-size, 32);
@include page-big(#3D1AAF, $white, none);
border-radius: 5px !important;
}
}
.more-title {
margin-top: 10px;
margin-bottom: 15px;
color: #FA952F;
@include px2px(font-size, 24);
}
.course-wrap {
overflow: hidden;
li {
display: inline-block;
width: px2rem(160);
height: px2rem(106);
margin-right: 10px;
margin-bottom: 20px;
}
li:nth-child(2) {
margin-right: 0;
}
li:last-child {
margin-right: 0;
}
}
}
}
.christ-toactive {
width: 100%;
height: px2rem(35);
line-height: px2rem(35);
text-align: center;
color: $white;
@include px2px(font-size, 36);
font-weight: bold;
background-color: #3D1AAF;
position: fixed;
bottom: 0;
}
.module-dialog {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
height: 100%;
font-size: .8rem;
.box-mask {
z-index: 900;
position: fixed;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .6);
display: flex;
align-items: center;
justify-content: center;
}
}
.box-container {
border-radius: 10px;
background-color: $white;
width: 80%;
position: relative;
padding-bottom: 15px;
.box-content {
.box-title {
@include px2px(font-size, 44);
line-height: px2rem(44);
height: px2rem(44);
margin-top: 10px;
color: $active;
i {
color: #f00;
@include px2px(font-size, 36);
font-style: normal;
}
.text1 {
color: $color_333;
@include px2px(font-size, 36);
}
.icon-right {
@include px2px(font-size, 80);
display: inline-block;
vertical-align: middle;
margin-top: -3px;
}
}
.box-text {
.text1 {
color: $color_333;
@include px2px(font-size, 36);
margin: 0 auto;
text-align: center;
margin-bottom: 20px;
margin-top: 15px;
}
.text2 {
color: $color_333;
@include px2px(font-size, 28);
margin: 0 auto;
text-align: left;
max-width: 260px;
margin-bottom: 5px;
}
.text3 {
color: $active;
@include px2px(font-size, 24);
margin: 0 auto;
text-align: left;
max-width: 260px;
}
}
}
.box-bottom1 {
width: 100%;
img {
width: 50% !important;
}
p {
font-size: 12px;
color: $color_666;
margin-top: -15px;
}
}
.box-bottom {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
.activeallcourse {
padding: 10px 30px;
border-radius: 5px;
min-width: 260px;
border: 1px solid transparent;
background-color: #09f;
color: $white;
font-size: 18px;
}
img {
width: 50% !important;
}
.bottom-item {
height: px2rem(40);
padding: 0 54px;
color: $white;
background-color: $active;
border-radius: 30px;
@include px2px(font-size, 44);
display: flex;
align-items: center;
justify-content: center;
margin-top: 14px;
}
}
.box-close {
position: absolute;
left: 50%;
bottom: -60px;
color: $white;
margin-left: -15px;
.f30 {
font-size: 30px;
}
}
}
.gift-package {
display: block;
width: 58px;
height: 72px;
position: fixed;
right: 0;
top: 50%;
margin-top: -25px;
img {
width: 100%;
height: 100%;
}
}
}
src/components/activity/give-courses/assistance/index.js
import React, { Component } from 'react'
import { browser, getParam, http } from "@/utils"
import { Toast } from "antd-mobile"
import { withRouter } from 'react-router-dom'
import './assistance.scss'
import { Base64 } from "js-base64"
import { connect } from 'react-redux'
function showToast(text) {
Toast.info(text, 2, null, false)
}
@connect(({user}) => ({
user
}))
class GiveCourseAssistance extends Component {
state = {
allCourse: [],
activeName: '',
activeUrl: '',
isAwards: '',
count: '',
assistItems: [],
name: '',
courseImg: '',
code: getParam('magic_word'),
getBtnStatus: '1',
disabled: false,
successOneStatus: false,
errorStatus: false
}
componentDidMount() {
this.giveDetail()
this.assistantScroll()
let baseCode = decodeURIComponent(Base64.decode(this.state.code)).split(',')
this.setState({
getBtnStatus: this.props.user.data.uid === baseCode[0] ? '2' : '1'
})
}
giveDetail = () => {
http.get(`${API["base-api"]}/assistance/detail`)
.then(res => {
const {data, msg, errno} = res.data
if (errno === 200) {
this.setState({
allCourse: data.course_info,
activeName: data.active_info.activity_name,
activeUrl: data.active_info.activity_url,
isAwards: data.is_awards
})
} else {
showToast(msg)
}
})
}
assistantScroll = () => {
http.get(`${API["base-api"]}/assistance/active_detail?code=${getParam('magic_word')}`)
.then(res => {
const {data, msg, errno} = res.data
if (errno === 0) {
this.setState({
count: data.assistant_count,
assistItems: data.assistants,
name: data.invitation_user_nickname,
courseImg: data.course_image_name
})
} else {
showToast(msg)
}
})
}
inviteFriends = () => {
const {history, user} = this.props
if (browser.isWeixin) {
if (user.hasError) {
history.push('/passport')
return
}
this.setState({
disabled: true
})
http.post(`${API["base-api"]}/assistance/assistant`, {
code: this.state.code,
})
.then(res => {
const {errno, msg} = res.data
let success = errno == 200
this.setState({
successOneStatus: success,
errorStatus: !success,
disabled: false
})
!success && showToast(msg)
})
} else {
history.push('/wxerr')
}
}
render() {
const {
isAwards,
courseImg,
activeName,
name,
getBtnStatus,
disabled
} = this.state
const {history} = this.props
return (
<div>
<div id='assistance'>
{/*<div className="barrage-wrapper">
<!--headItems-->
<ul className="barrage-list">
<vue-seamless data="headItems" class-option="classOption" class="warp">
<li v-for="(item, index) in headItems">
<div className="person-left">
<img className="avatar" src="item.head_img" alt=""/>
<span className="name">{item.nickname}</span>
</div>
<div className="title">{item.word}</div>
</li>
</vue-seamless>
</ul>
</div>*/}
<div className="bg-image" style={{backgroundImage: `url(${courseImg})`}}>
{
isAwards == 1 && <button className="ranklist-btn" type="button" onClick={() => {
history.push(`/active/givecourse?activename=${activeName}`)
}}>大奖排行榜>></button>
}
</div>
<div className="christ-getwrap">
{
getBtnStatus === '1' &&
<div className="title">
<span className="active">@{name}</span> 赠送您一门课程
</div>
}
<div className="btn-get-wrap">
{
getBtnStatus === 1
?
<button type="button" className="btn-get" disabled={disabled} click="btnGet">
免费领取
</button>
:
<button type="button" className="btn-get" onClick={this.inviteFriends}>
继续邀请好友
</button>
}
</div>
<p className="person-tolearn">领取的课程可前往七月在线APP或官网学习</p>
</div>
</div>
)
}
}
export default GiveCourseAssistance
export default withRouter(GiveCourseAssistance)
src/components/wxerr/index.js 0 → 100644
import React from 'react'
import WxErrImage from '@assets/image/wx_error.png'
import './wxerr.scss'
const WxErr = () => {
return (
<div className={'wxerr'}>
<img src={WxErrImage} alt=''/>
<p className="openLink" style={{
fontSize: `16px`,
marginTop: `40px`
}}>请在微信客户端打开链接</p>
</div>
)
}
export default WxErr
src/components/wxerr/wxerr.scss 0 → 100644
.wxerr{
margin-top: 40px;
display: flex;
flex-flow: column;
align-items: center;
.openLink{
font-size: 16px;
margin-top:40px;
}
}
src/router/router-config.js
......@@ -254,18 +254,19 @@ export default [
// 赠一得一
{
path: '/active/givecourses',
exact: true,
path: '/active/givecourse',
component: loadable(() => import(/* activity-give-courses */'@components/activity/give-courses/index'))
},
{
path: '/active/assistance',
exact: true,
component: loadable(() => import(/* activity-give-courses-assistance */'@components/activity/give-courses/assistance/index'))
},
{
path: '/active/to',
exact: true,
component: loadable(() => import(/* activity-give-courses-assistance */'@components/activity/give-courses/share-content/index'))
component: loadable(() => import(/* activity-give-courses-share */'@components/activity/give-courses/share-content/index'))
},
{
path: '/wxerr',
component: loadable(() => import(/* wx-err */ '@components/wxerr/index'))
}
]
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