Skip to content

M
mr-julyedu
Commit 6b58fb66 by zhanghaozhe
Options

ai特训营分享落地页

parent 09eeb176
Showing with 442 additions and 0 deletions
src/components/share-page/aist-share/aist-share.scss 0 → 100644
.aist-share {
position: relative;
width: 100%;
height: 100%;
background-image: url("https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_717/m/aist/aist-bg.png");
background-repeat: no-repeat;
background-position: bottom;
-webkit-background-size: contain;
background-size: contain;
background-color: #a4ffe7;
overflow: hidden;
.content {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 343px;
height: 494px;
padding: 18px 12px;
background: #fff;
box-sizing: border-box;
box-shadow: 0 4px 8px hsla(0, 0%, 0%, 0.1);
overflow: hidden;
border-radius: 5px;
}
.user {
display: flex;
flex-flow: column;
align-items: center;
margin-bottom: 18px;
img {
width: 60px;
height: 60px;
border-radius: 50%;
margin-bottom: 8px;
}
.username {
font-size: 17px;
line-height: 24px;
color: #111;
}
.time {
font-size: 12px;
color: #666;
line-height: 17px;
}
}
.course {
display: flex;
padding: 10px;
margin-bottom: 27px;
box-shadow: 0 4px 8px hsla(185, 100%, 28%, 0.1);
border-radius: 1px;
&-cover {
width: 86px;
margin-right: 10px;
img {
width: 100%;
height: 62px;
}
}
&-info {
text-align: left;
width: 204px;
.title {
color: #111;
font-size: 16px;
line-height: 23px;
}
.des {
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 12px;
color: #666;
line-height: 17px;
}
}
}
.progress {
position: relative;
display: flex;
width: 300px;
margin: 0 auto 27px;
list-style: none;
padding-bottom: 25px;
border-bottom: 1px solid #E5E5E5;
background-clip: padding-box;
&::before {
content: '';
display: block;
width: 36px;
height: 36px;
position: absolute;
bottom: -18px;
left: -44px;
background-color: #c1fded;
border-radius: 50%;
box-shadow: 0 4px 4px 1px rgba(0, 0, 0, 0.1) inset;
}
&::after {
content: '';
display: block;
width: 36px;
height: 36px;
position: absolute;
bottom: -18px;
right: -44px;
background-color: #c1fded;
border-radius: 50%;
box-shadow: 0 4px 4px 1px rgba(0, 0, 0, 0.1) inset;
}
li {
height: 57px;
flex: 1;
}
& li:nth-child(1) {
border-right: 1px solid #ddd;
}
.title {
margin-bottom: 8px;
font-size: 14px;
color: #111;
line-height: 20px;
text-align: center;
}
&-value {
display: flex;
justify-content: center;
align-items: flex-end;
& > div {
font-size: 15px;
line-height: 34px;
color: #000;
}
.num {
font-size: 33px;
color: #111;
line-height: 1em;
}
}
}
.recommend-app {
display: flex;
box-sizing: border-box;
padding: 0 10px;
justify-content: space-between;
.text {
width: 180px;
margin-right: 30px;
text-align: left;
display: flex;
flex-flow: wrap;
}
.bold {
font-size: 15px;
color: #111;
line-height: 21px;
margin-bottom: 15px;
& div:nth-child(1) {
margin-bottom: 4px;
}
}
.light {
font-size: 14px;
color: #999;
line-height: 20px;
align-self: flex-end;
img {
width: 15px;
height: 15px;
vertical-align: middle;
margin-left: 6px;
}
}
.qrcode {
width: 90px;
height: 90px;
img {
width: 100%;
height: 100%;
}
}
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
overflow: hidden;
img {
position: absolute;
top: 11px;
right: 22px;
width: 111px;
height: 82px;
}
.text {
position: absolute;
top: 105px;
left: 50%;
transform: translateX(-50%);
width: 343px;
height: 61px;
background: #fff;
font-size: 15px;
color: #333;
padding: 20px;
text-align: center;
box-sizing: border-box;
border-radius: 4px;
}
}
}
\ No newline at end of file
src/components/share-page/aist-share/index.js 0 → 100644
import React, { PureComponent } from 'react';
import './aist-share.scss'
import withFullSize from '@/HOCs/WithFullSize'
import { http, api, wxShare } from "@/utils";
import { getWXObject } from "@/utils/wechat/base";
class AistShare extends PureComponent {
state = {
course: {
title: '',
des: '',
img: '',
id: ''
},
progress: {
days: 0,
action: 0
},
showShareCover: true,
id: '',
user: {
avatar: '',
name: '',
time: ''
}
}
componentDidMount() {
const search = new URLSearchParams(this.props.location.search);
http.get(`${api['base-api']}/m/aist/share_ground_data/${search.get('id')}/${search.get('vId')}`)
.then(res => {
if (res.data.errno == 200) {
const data = res.data.data;
this.setState({
course: {
title: data.course_title,
des: data.course_desc,
img: data.image_name
},
user: {
avatar: data.avatar,
name: data.username,
time: data.create_time
},
progress: {
days: data.learn_day_num,
action: data.action_power
}
})
wxShare({
title: data.share_title,
desc: data.share_desc,
imgUrl: data.image_name,
link: location.href
})
}
})
}
render() {
const {user, course, progress} = this.state
return (
<div className='aist-share'>
<div className="content">
<div className="user">
<img src={user.avatar} alt="头像"/>
<span className="username">{user.name}</span>
<span className="time">{user.time}</span>
</div>
<div className="course">
<div className="course-cover">
<img src={course.img} alt="课程封面"/>
</div>
<div className="course-info">
<div className="title">{course.title}</div>
<div className="des">{course.des}</div>
</div>
</div>
<ul className="progress">
<li>
<div className="title">累计学习</div>
<div className="progress-value"><span className="num">{progress.days}</span>天</div>
</li>
<li>
<div className="title">行动力超过</div>
<div className="progress-value"><span className="num">{progress.action}</span>%</div>
</li>
</ul>
<div className="recommend-app">
<div className="text">
<div className="bold">
<div>立即下载【七月在线】</div>
<div>众多好课免费学</div>
</div>
<div className="light">
长按识别右侧二维码
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_717/m/aist/arrow.png"
alt=""/>
</div>
</div>
<div className="qrcode">
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/tinypng-common/right_app.png"
alt=""/>
</div>
</div>
</div>
</div>
);
}
}
export default withFullSize(AistShare);
\ No newline at end of file
src/router/router-config.js
......@@ -138,4 +138,8 @@ export default [
component: ToGroup,
isPrivate: true
},
{
path: '/aist-share',
component: loadable(() => import(/* webpackChunkName: 'aist-share'*/'@/components/share-page/aist-share'))
}
]
\ No newline at end of file
src/utils/index.js
......@@ -94,4 +94,5 @@ const isLogin = (function () {
export { default as http } from './http'
export { default as api } from './api'
export {default as wxShare} from './wechat/share'
export { html, initCaptcha, validateTel, validateEmail, browser, isLogin }
src/utils/wechat/base.js 0 → 100644
import { http, api } from "@/utils/index"
const url = `http://res.wx.qq.com/open/js/jweixin-1.4.0.js`
const appId = 'wx23dac6775ac82877'
const jsApiList = ['updateAppMessageShareData','updateTimelineShareData','onMenuShareAppMessage', 'onMenuShareTimeline']
export const getSignature = async (config = {}) => {
let res = await http.post(`${api['base-api']}/m/sale/signature`, {
url: window.location.href.split('#')[0]
})
return wx.config({
debug: false, // 开启调试模式,
appId, // 必填，公众号的唯一标识
timestamp: res.data.timestamp, // 必填，生成签名的时间戳
nonceStr: res.data.nonce_str, // 必填，生成签名的随机串
signature: res.data.signature,// 必填，签名，见附录1
jsApiList,
...config
})
}
export const getWXObject = () => {
return new Promise(resolve => {
if (!window.wx) {
return loadScript(url).then(() => resolve())
}
resolve()
})
}
function loadScript(url) {
return new Promise(resolve => {
var head = document.head || document.getElementsByTagName('head')[0]
var script = document.createElement('script')
script.type = 'text/javascript'
script.src = url
if (!('onload' in script)) {
script.onreadystatechange = function () {
if (this.readyState !== 'complete' && this.readyState !== 'loaded') return
this.onreadystatechange = null
resolve()
}
}
script.onload = function () {
this.onload = null
resolve()
}
head.appendChild(script)
})
}
\ No newline at end of file
src/utils/wechat/share.js 0 → 100644
import { getWXObject, getSignature } from './base'
const shareApiList = ['updateAppMessageShareData','updateTimelineShareData','onMenuShareAppMessage', 'onMenuShareTimeline']
export default async function (data = {title: '',desc: '', link: '', imgUrl: ''}) {
await getWXObject()
await getSignature()
wx.ready(function () {
console.log('ready');
shareApiList.forEach(item => {
wx[item](data)
})
})
}
\ No newline at end of file
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