Skip to content

L
learn-online
提交 04346de8 authored 作者: haodaking's avatar haodaking
浏览文件
操作

分享海报

上级 57d15dd7
显示空白字符变更
内嵌 并排
正在显示 包含 1348 行增加 和 13 行删除
learnOnline/api/base.js
浏览文件 @ 04346de8
...@@ -15,3 +15,19 @@ export function getUser() { ...@@ -15,3 +15,19 @@ export function getUser() {
export function logout() { export function logout() {
return httpRequest.get('/api/passport/rest/logout') return httpRequest.get('/api/passport/rest/logout')
} }
// 获取营销数据
export function getShare(data) {
return httpRequest.get(`/api/lms-ep/v3/activities/share/${data.course_id}/${data.chapter_id}`)
}
// 获取二维码
export function getQrcode(data) {
return httpRequest.get('/api/lms-ep/util/pcode', data)
}
// 获取二维码
export function imageTransfer(data) {
return httpRequest.get('/api/usercenter/tool/transfer-image', data)
}
learnOnline/app.js
浏览文件 @ 04346de8
...@@ -5,7 +5,15 @@ App({ ...@@ -5,7 +5,15 @@ App({
pageshow: false, pageshow: false,
user: {} // 用户信息 user: {} // 用户信息
}, },
onLaunch: function () {}, onLaunch: function () {
// 加载自定义字体
wx.loadFontFace({
global: true,
family: 'my',
source: 'https://webapp-pub.ezijing.com/weapp/share/my.ttf',
scopes: ['webview', 'native']
})
},
onPageNotFound() { onPageNotFound() {
wx.redirectTo({ url: 'pages/login/index' }) wx.redirectTo({ url: 'pages/login/index' })
}, },
......
learnOnline/app.json
浏览文件 @ 04346de8
...@@ -17,7 +17,9 @@ ...@@ -17,7 +17,9 @@
"pages/learnSystem/myScore/myScore", "pages/learnSystem/myScore/myScore",
"pages/learnSystem/myDiscuss/myDiscuss", "pages/learnSystem/myDiscuss/myDiscuss",
"pages/learnSystem/discussDetail/discussDetail", "pages/learnSystem/discussDetail/discussDetail",
"pages/course/player" "pages/course/player",
"pages/share/index",
"pages/web/index"
], ],
"window": { "window": {
"navigationBarBackgroundColor": "#fff", "navigationBarBackgroundColor": "#fff",
...@@ -61,7 +63,7 @@ ...@@ -61,7 +63,7 @@
}, },
"plugins": { "plugins": {
"player": { "player": {
"version": "2.0.0", "version": "2.0.3",
"provider": "wxa75efa648b60994b" "provider": "wxa75efa648b60994b"
} }
} }
......
learnOnline/components/share/index.js 0 → 100644
浏览文件 @ 04346de8
import { getShare, getQrcode, imageTransfer } from '../../api/base.js'
import { wxml, style } from './share.js'
const app = getApp()
Component({
options: {
styleIsolation: 'shared'
},
/**
* 组件的属性列表
*/
properties: {
semesterId: { type: String, value: '' },
courseId: { type: String, value: '' },
chapterId: { type: String, value: '' },
isNeed: { type: Boolean, value: false }
},
/**
* 组件的初始数据
*/
data: {
show: false,
hasControls: false,
isPreivew: false,
user: {},
share: { lecturer: {} },
qrcode: '',
bgList: [
'https://webapp-pub.ezijing.com/weapp/share/bg/02.jpg',
'https://webapp-pub.ezijing.com/weapp/share/bg/03.jpg',
'https://webapp-pub.ezijing.com/weapp/share/bg/04.jpg',
'https://webapp-pub.ezijing.com/weapp/share/bg/05.jpg',
'https://webapp-pub.ezijing.com/weapp/share/bg/06.jpg',
'https://webapp-pub.ezijing.com/weapp/share/bg/07.jpg',
'https://webapp-pub.ezijing.com/weapp/share/bg/08.jpg',
'https://webapp-pub.ezijing.com/weapp/share/bg/09.jpg',
'https://webapp-pub.ezijing.com/weapp/share/bg/01.jpg'
],
textList: [],
avatarList: [],
colorList: [
'#0E386B',
'#d78c4a',
'#f44336',
'#e91e63',
'#673ab7',
'#3f51b5',
'#2196f3',
'#00bcd4',
'#009688',
'#4caf50',
'#8bc34a',
'#cddc39',
'#ffeb3b',
'#ffc107',
'#ff9800',
'#ff5722',
'#795548',
'#9e9e9e',
'#607d8b'
],
controls: {
active: '0',
bg: 'https://webapp-pub.ezijing.com/weapp/share/bg/02.jpg',
text: '',
avatar: '',
color: '#0E386B'
},
controlsTabs: [
{ index: '0', text: '背景' },
{ index: '1', text: '金句' },
{ index: '3', text: '颜色' },
{ index: '2', text: '头像' }
],
wxUserProfile: {},
numLength: 1,
customText: '',
customTextVisible: false,
keyboardHeight: 0
},
lifetimes: {
attached() {
// 加载自定义字体
// wx.loadFontFace({ family: 'my', source: 'https://webapp-pub.ezijing.com/weapp/share/my.ttf' })
}
},
/**
* 组件的方法列表
*/
methods: {
init() {
// 触发分享海报上报
wx.reportMonitor('1', 1)
this.getShare().then(res => {
if (!this.data.isNeed && !res.data.need_share) {
return
}
app.getUser().then(res => {
res.realname = res.realname || res.nickname
// 系统头像
const avatarList = []
avatarList.push({ name: '系统', url: res.avatar || 'https://webapp-pub.ezijing.com/weapp/share/default.jpg' })
// 微信头像
const localUserInfo = wx.getStorageSync('userInfo')
let wxUserProfile = localUserInfo ? JSON.parse(localUserInfo) : {}
if (wxUserProfile.avatarUrl) {
avatarList.push({ name: '微信', url: wxUserProfile.avatarUrl })
}
const [firstAvatar = {}] = avatarList
this.setData({ user: res, wxUserProfile, avatarList, show: true, 'controls.avatar': firstAvatar.url })
this.getQrcode()
})
// 显示分享海报上报
wx.reportMonitor('2', 1)
})
},
// 获取营销数据
getShare() {
const params = {
semester_id: this.data.semesterId,
course_id: this.data.courseId,
chapter_id: this.data.chapterId
}
return getShare(params).then(res => {
const data = res.data
const [lecturer = { lecturer_name: '' }] = data.lecturers
lecturer.lecturer_name = lecturer.lecturer_name ? lecturer.lecturer_name.replace(/(\(|（)(.+)(\)|）)/, '') : ''
data.course_name = data.course_name ? data.course_name.replace(/(\(|（)(.+)(\)|）)/, '') : ''
data.course_name = `《${data.course_name}》课程`
data.chapter_name = data.chapter_name ? data.chapter_name.replace(/(\(|（)(.+)(\)|）)/, '') : ''
data.chapter_name = data.chapter_name ? data.chapter_name.replace(/^.*\s/, '') : ''
data.chapter_name = data.chapter_name ? `“${data.chapter_name}”专题` : ''
const numLength = data.used_day.toString().length
// 金句设置
const textList = data.sentences.map(item => {
return { text: item }
})
if (textList.length) {
this.setData({ textList, 'controls.text': textList[0].text })
}
this.setData({ share: Object.assign(data, { lecturer }), numLength })
return res
})
},
// 生成二维码
getQrcode() {
const user = this.data.user
const params = {
url: `https://pages.ezijing.com/prp/mobile202108260501.html?channel_num=96114&user_id=${user.id}&user_name=${user.realname}`
}
getQrcode(params).then(res => {
this.setData({ qrcode: res.url })
})
},
getUserProfile() {
// 获取微信头像
wx.getUserProfile({ desc: '使用头像生成海报' })
.then(res => {
const userInfo = res.userInfo
imageTransfer({ source: userInfo.avatarUrl }).then(res => {
userInfo.avatarUrl = res
this.data.avatarList.push({ name: '微信', url: userInfo.avatarUrl })
this.setData({ wxUserProfile: userInfo, avatarList: this.data.avatarList })
wx.setStorageSync('userInfo', JSON.stringify(userInfo))
})
})
.catch(() => {
wx.showToast({ title: '获取微信头像失败', icon: 'none' })
})
},
renderToCanvas() {
wx.showLoading({ title: '海报生成中' })
this.setData({ isPreivew: true }, () => {
this.widget = this.selectComponent('.widget')
setTimeout(() => {
this.widget
.renderToCanvas({ wxml: wxml(this.data), style: style(this.data) })
.then(res => {
wx.hideLoading()
})
.catch(error => {
console.log(error)
wx.hideLoading()
wx.showToast({ title: '海报生成失败', icon: 'none' })
})
}, 500)
})
// 生成分享海报上报
wx.reportMonitor('3', 1)
},
// 导出图片
extraImage() {
this.widget.canvasToTempFilePath().then(res => {
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath
})
.then(res => {
wx.showToast({ title: '保存成功', icon: 'none' })
})
.catch(error => {
wx.showToast({ title: '保存失败，请检查相册权限', icon: 'none' })
})
})
// 保存分享海报上报
wx.reportMonitor('0', 1)
},
// 关闭分享
onClose() {
this.setData({ show: false })
},
// 背景|金句选项卡切换
onTabChange(e) {
const { index } = e.currentTarget.dataset
this.setData({ 'controls.active': index })
},
// 选择背景
onSelectImage(e) {
const { item } = e.currentTarget.dataset
this.setData({ 'controls.bg': item })
},
// 选择金句
onSelectText(e) {
const { item } = e.currentTarget.dataset
this.setData({ 'controls.text': item.text })
},
// 选择头像
onSelectAvatar(e) {
const { item } = e.currentTarget.dataset
this.setData({ 'controls.avatar': item.url })
},
// 选择颜色
onSelectColor(e) {
const { item } = e.currentTarget.dataset
this.setData({ 'controls.color': item })
},
// 控制栏显示隐藏
toggleControls() {
this.setData({ hasControls: !this.data.hasControls })
},
// 关闭预览
onClosePreview() {
this.setData({ isPreivew: false })
},
// 显示自定义金句
showCustomText() {
this.setData({ customTextVisible: true })
},
// 使用自定义金句
onCustomTextConfirm() {
if (this.data.customText) {
this.data.textList.unshift({ text: this.data.customText, isCustom: true })
this.setData({
'controls.text': this.data.customText,
textList: this.data.textList,
customTextVisible: false,
customText: ''
})
}
},
// 失去焦点
onCustomTextBlur() {
this.setData({ customTextVisible: false })
},
// 计算键盘高度
onKeyboardheightchange(e) {
this.setData({ keyboardHeight: e.detail.height })
},
// 删除自定义金句
onRemoveCustomText(e) {
const { index } = e.currentTarget.dataset
this.data.textList.splice(index, 1)
const found = this.data.textList.find(item => item.text === this.data.controls.text)
this.setData({ textList: this.data.textList, 'controls.text': found ? this.data.controls.text : this.data.textList[0].text })
}
}
})
learnOnline/components/share/index.json 0 → 100644
浏览文件 @ 04346de8
{
"component": true,
"usingComponents": {
"wxml-to-canvas": "wxml-to-canvas",
"van-icon": "@vant/weapp/icon/index"
}
}
learnOnline/components/share/index.wxml 0 → 100644
浏览文件 @ 04346de8
<view class="share-page" wx:if="{{ show }}">
<view class="close" bindtap="onClose"></view>
<!-- 分享配置页面 -->
<view class="share-page-body">
<view class="share">
<image src="{{ controls.bg }}?x-oss-process=image/resize,m_fill,h_1064,w_600" mode="aspectFill" class="bg"></image>
<image
src="https://webapp-pub.ezijing.com/weapp/share/prp/cover.png?x-oss-process=image/resize,m_fill,h_898,w_507"
mode="aspectFill"
class="cover"
></image>
<view class="main" style="color:{{ controls.color }};">
<view class="teacher">{{ share.lecturer.lecturer_title }} {{ share.lecturer.lecturer_name }}</view>
<view class="course">{{ share.course_name }}</view>
<view class="user">
<image src="{{ controls.avatar }}" mode="aspectFill" class="avatar"></image>
<view class="nickname">{{ share.personal_name }}</view>
</view>
<view class="chapter"
><text>{{ share.chapter_name }}</text></view
>
<view class="title">知识获得者</view>
<view class="text" style="border-color:{{ controls.color }};">{{ controls.text }}</view>
<view class="subtitle-tips" style="color:{{ controls.color }};">未来十年私人财富市场的引领者</view>
<view class="subtitle" style="color:{{ controls.color }};">中国PRP</view>
<view class="footer">
<view class="footer-left">
<view class="box">
<text>我已坚持学习</text>
<view class="num" style="color:{{ controls.color }};width:{{ numLength * 11 }}px;">
{{ share.used_day }}
</view>
<text>天</text>
</view>
<view class="qrcode-tips" style="background-color:{{ controls.color }};">扫码与我一起 共享 共进 共创</view>
</view>
<image src="{{ qrcode }}" class="footer-right"></image>
</view>
</view>
</view>
</view>
<!-- 控制栏 -->
<view class="controls {{ hasControls ? 'is-show' : '' }}">
<view class="buttons">
<image
src="https://webapp-pub.ezijing.com/weapp/share/controls_up.png"
mode="aspectFill"
class="wx-image"
hidden="{{ hasControls }}"
bindtap="toggleControls"
></image>
<image
src="https://webapp-pub.ezijing.com/weapp/share/controls_down.png"
mode="aspectFill"
class="wx-image"
hidden="{{ !hasControls }}"
bindtap="toggleControls"
></image>
<view class="button">
<text>生成</text><text>海报</text>
<button class="wx-button" open-type="getUserInfo" bindtap="renderToCanvas"></button>
</view>
</view>
<view class="controls-main">
<view class="controls-tabs">
<block wx:for="{{ controlsTabs }}" wx:key="index">
<view class="controls-tab {{ controls.active === item.index ? 'is-active' : '' }}" data-index="{{ item.index }}" bindtap="onTabChange">{{
item.text
}}</view>
</block>
</view>
<scroll-view class="controls-scroll" scroll-x="{{ true }}">
<!-- 背景 -->
<view class="controls-content" hidden="{{ controls.active !== '0' }}">
<view
class="controls-bg-item {{ controls.bg === item ? 'is-active' : '' }}"
wx:for="{{ bgList }}"
wx:key="*this"
data-item="{{ item }}"
bindtap="onSelectImage"
>
<image src="{{ item }}?x-oss-process=image/resize,m_fill,h_162,w_92" mode="aspectFill" class="image"></image>
</view>
</view>
<!-- 金句 -->
<view class="controls-content" hidden="{{ controls.active !== '1' }}">
<!-- 自定义金句 -->
<view class="custom-text-button" bindtap="showCustomText">自定义金句</view>
<view
class="controls-text-item {{ controls.text === item.text ? 'is-active' : '' }}"
wx:for="{{ textList }}"
wx:key="text"
data-item="{{ item }}"
bindtap="onSelectText"
>{{ item.text }}
<view class="custom-text-remove" data-index="{{ index }}" catchtap="onRemoveCustomText">
<van-icon name="clear" size="20" color="#d78c4a" wx:if="{{ item.isCustom }}"></van-icon>
</view>
</view>
</view>
<!-- 头像 -->
<view class="controls-content" hidden="{{ controls.active !== '2' }}">
<view
class="controls-avatar-item {{ controls.avatar === item.url ? 'is-active' : '' }}"
wx:for="{{ avatarList }}"
wx:key="url"
data-item="{{ item }}"
bindtap="onSelectAvatar"
>
<image src="{{ item.url }}" mode="aspectFill" class="image"></image>
<text class="controls-avatar-item__text">{{ item.name }}</text>
</view>
<view class="controls-avatar-item" hidden="{{ wxUserProfile.avatarUrl }}">
<text>微信</text><text>头像</text>
<button class="wx-button" open-type="getUserInfo" bindtap="getUserProfile"></button>
</view>
</view>
<!-- 颜色 -->
<view class="controls-content" hidden="{{ controls.active !== '3' }}">
<view
class="controls-color-item {{ controls.color === item ? 'is-active' : '' }}"
wx:for="{{ colorList }}"
wx:key="*this"
data-item="{{ item }}"
bindtap="onSelectColor"
style="background-color:{{ item }}"
>{{ item }}</view
>
</view>
</scroll-view>
</view>
</view>
</view>
<!-- 自定义金句 -->
<view class="custom-text" wx:if="{{ customTextVisible }}" style="bottom:{{ keyboardHeight }}px;">
<textarea
class="wx-textarea"
placeholder="输入自定义金句"
model:value="{{ customText }}"
maxlength="30"
cursor-spacing="30"
confirm-type="done"
show-confirm-bar="{{ false }}"
auto-focus="{{ true }}"
fixed="{{ true }}"
adjust-position="{{ false }}"
bindconfirm="onCustomTextConfirm"
bindblur="onCustomTextBlur"
bindkeyboardheightchange="onKeyboardheightchange"
></textarea>
</view>
<!-- 预览页面 -->
<view class="share-preivew" wx:if="{{ isPreivew }}">
<view class="close" bindtap="onClosePreview"></view>
<view class="share-preivew-main">
<wxml-to-canvas class="widget" width="300" height="530"></wxml-to-canvas>
</view>
<view class="share-preview-footer">
<view class="button button-default" bindtap="extraImage">保存图片到相册</view>
<view class="tips">分享图片到朋友圈</view>
<view class="tips">最高可获得5000朵紫荆花</view>
</view>
</view>
learnOnline/components/share/index.wxss 0 → 100644
浏览文件 @ 04346de8
.share-page {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.8);
z-index: 100;
display: flex;
flex-direction: column;
}
.share-page-body {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
overflow-x: hidden;
overflow-y: auto;
}
.share {
width: 300px;
height: 532px;
position: relative;
overflow: hidden;
}
.bg {
width: 300px;
height: 532px;
}
.cover {
position: absolute;
top: 42px;
left: 24px;
width: 254px;
height: 449px;
}
.main {
position: absolute;
left: 40px;
top: 100px;
/* right: 41px; */
width: 220px;
color: #d78c4a;
display: flex;
flex-direction: column;
align-items: center;
}
.teacher {
font-size: 11px;
font-weight: bold;
line-height: 16px;
text-align: center;
}
.course {
margin-top: 5px;
font-size: 13px;
font-weight: bold;
line-height: 16px;
text-align: center;
}
.user {
margin-top: 19px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.avatar {
width: 65px;
height: 65px;
border-radius: 50%;
overflow: hidden;
}
.nickname {
margin-top: 2px;
font-size: 15px;
font-weight: bold;
line-height: 1;
}
.chapter {
margin-top: 6px;
height: 32px;
font-size: 14px;
font-weight: bold;
color: #1a1a1a;
line-height: 16px;
text-align: center;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.title {
font-family: 'my';
margin-top: 7px;
height: 24px;
font-size: 24px;
line-height: 24px;
text-align: center;
}
.text {
margin-top: 14px;
width: 200px;
height: 50px;
font-size: 13px;
font-weight: bold;
/* font-style: italic; */
color: #1a1a1a;
line-height: 18px;
word-break: break-word;
overflow: hidden;
border-top: 1px solid #d78c4a;
border-bottom: 1px solid #d78c4a;
display: flex;
align-items: center;
justify-content: center;
}
.subtitle-tips {
margin-top: 10px;
font-size: 12px;
font-weight: bold;
color: #d78c4a;
line-height: 16px;
}
.subtitle {
font-size: 12px;
font-weight: bold;
color: #d78c4a;
line-height: 16px;
}
.footer {
display: flex;
align-items: center;
margin-top: 5px;
width: 204px;
}
.footer-left {
flex: 1;
font-size: 12px;
color: #1a1a1a;
line-height: 1;
}
.footer-left .box {
display: flex;
align-items: flex-end;
height: 20px;
}
.num {
font-size: 17px;
font-weight: bold;
color: #0e386b;
text-align: center;
margin-left: 2px;
margin-right: 2px;
}
.footer-right {
width: 50px;
height: 50px;
}
.qrcode-tips {
width: 150px;
height: 15px;
margin-top: 15px;
background: #0e386b;
border-radius: 2px;
font-size: 11px;
color: #ffff;
line-height: 15px;
text-align: center;
}
.controls {
position: relative;
padding-bottom: env(safe-area-inset-bottom);
}
.controls-main {
height: 0;
transition: height 0.3s;
overflow: hidden;
}
.controls.is-show {
background-color: #fff;
}
.controls.is-show .controls-main {
height: 130px;
}
.buttons {
position: absolute;
top: -66px;
left: 0;
right: 0;
display: flex;
justify-content: space-between;
padding: 8px 13px;
}
.button {
position: relative;
width: 50px;
height: 50px;
background: #ffffff;
box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
border-radius: 50%;
font-size: 13px;
color: #d78c4a;
line-height: 15px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.wx-image {
width: 50px;
height: 50px;
}
.wx-button {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: transparent;
border: 0;
}
button:after {
content: none;
}
button::after {
border: none;
}
.controls-tabs {
display: flex;
height: 30px;
background: #ccc;
}
.controls-tab {
width: 75px;
line-height: 30px;
text-align: center;
background-color: #e6e6e6;
}
.controls-tab.is-active {
color: #d78c4a;
background-color: #fff;
}
.controls-content {
flex: 1;
height: 100px;
padding: 0 10px;
display: flex;
align-items: center;
flex-wrap: nowrap;
}
.controls-content .is-active {
border: 3px solid #d78c4a;
}
.controls-bg-item {
flex: 0 0 46px;
width: 46px;
height: 80px;
margin: 0 15px;
border: 3px solid #fff;
border-radius: 3px;
overflow: hidden;
}
.controls-text-item {
position: relative;
margin: 0 15px;
flex: 0 0 228px;
width: 228px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
border: 3px solid #ccc;
border-radius: 6px;
padding: 10px;
font-size: 13px;
color: #1a1a1a;
line-height: 18px;
box-sizing: border-box;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.controls-avatar-item {
position: relative;
margin: 0 15px;
flex: 0 0 60px;
width: 60px;
height: 60px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: 3px solid #ccc;
border-radius: 50%;
overflow: hidden;
font-size: 13px;
color: #1a1a1a;
line-height: 18px;
box-sizing: border-box;
}
.controls-avatar-item__text {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(255, 255, 255, 0.6);
z-index: 1;
text-align: center;
font-size: 12px;
}
.controls-color-item {
margin: 0 15px;
flex: 0 0 68px;
width: 68px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
border: 3px solid #ccc;
border-radius: 6px;
overflow: hidden;
padding: 10px;
font-size: 13px;
color: #fff;
line-height: 18px;
box-sizing: border-box;
}
.image {
width: 100%;
height: 100%;
}
.share-preivew {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.8);
z-index: 200;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 38px 0;
}
.close {
position: absolute;
right: 8px;
top: 8px;
width: 48px;
height: 48px;
background: url('https://webapp-pub.ezijing.com/weapp/share/close.png') no-repeat;
background-size: contain;
z-index: 999;
}
.share-preivew-main {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
overflow-x: hidden;
overflow-y: auto;
}
.share-preivew .button {
width: 250px;
height: 50px;
border-radius: 25px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 18px 0;
font-size: 13px;
font-weight: 400;
color: #d78c4a;
line-height: 15px;
}
.share-preivew .button-default {
color: #d78c4a;
background: #fff;
}
.share-preivew .button-primary {
color: #fff;
background: #d78c4a;
}
.share-preivew .tips {
font-size: 13px;
font-weight: 400;
color: #fff;
line-height: 15px;
text-align: center;
}
.wx-textarea {
padding: 10px;
height: 100%;
}
.custom-text-button {
margin: 0 15px;
flex: 0 0 100px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
border: 3px solid #ccc;
border-radius: 6px;
overflow: hidden;
padding: 10px;
font-size: 13px;
color: #1a1a1a;
line-height: 18px;
box-sizing: border-box;
}
.custom-text {
position: fixed;
left: 0;
right: 0;
bottom: 0;
height: 60px;
background-color: #fff;
z-index: 100;
}
.custom-text-remove {
position: absolute;
right: -20px;
top: -20px;
padding: 10px;
}
.custom-text-remove .van-icon {
background-color: #fff;
}
learnOnline/components/share/share.js 0 → 100644
浏览文件 @ 04346de8
const wxml = function (data) {
return `
<view class="share">
<image src="${data.controls.bg}?x-oss-process=image/resize,m_fill,h_532,w_300" class="bg"></image>
<image src="https://webapp-pub.ezijing.com/weapp/share/prp/cover.png" class="cover"></image>
<view class="main">
<text class="teacher">${data.share.lecturer.lecturer_title} ${data.share.lecturer.lecturer_name}</text>
<text class="course">${data.share.course_name}</text>
<view class="user">
<image src="${data.controls.avatar}?x-oss-process=image/resize,m_fill,h_195,w_195" class="avatar"></image>
<view><text class="nickname">${data.share.personal_name}</text></view>
</view>
<text class="chapter">${data.share.chapter_name}</text>
<text class="title">知识获得者</text>
<view class="text-wrapper">
<view class="text-border"></view>
<view class="text-main">
<text class="text">${data.controls.text}</text>
</view>
<view class="text-border"></view>
</view>
<text class="subtitle-tips">未来十年私人财富市场的引领者</text>
<text class="subtitle">中国PRP</te>
<view class="footer">
<view class="footer-left">
<view class="box"><text class="t1">我已坚持学习</text><text class="t2">${data.share.used_day}</text><text class="t3">天</text></view>
<view class="qrcode-tips-wrapper"><text class="qrcode-tips">扫码与我一起 共享 共进 共创</text></view>
</view>
<image src="${data.qrcode}" class="footer-right"></image>
</view>
</view>
</view>`
}
const style = function (data) {
const numLength = data.share.used_day.toString().length
return {
share: {
position: 'relative',
width: 300,
height: 532
},
bg: {
width: 300,
height: 532
},
cover: {
position: 'absolute',
top: 42,
left: 24,
width: 254,
height: 449
},
main: {
position: 'absolute',
left: 40,
top: 100,
width: 220,
height: 300,
alignItems: 'center'
},
teacher: {
width: 220,
height: 16,
fontSize: 11,
fontWeight: 'bold',
lineHeight: 16,
color: data.controls.color,
textAlign: 'center'
},
course: {
marginTop: 5,
width: 220,
height: 16,
fontSize: 13,
fontWeight: 'bold',
lineHeight: 16,
color: data.controls.color,
textAlign: 'center'
},
user: {
marginTop: 19,
alignItems: 'center'
},
avatar: {
width: 65,
height: 65,
borderRadius: 32.5
},
nickname: {
marginTop: 2,
width: 220,
height: 16,
fontSize: 15,
fontWeight: 'bold',
lineHeight: 16,
color: data.controls.color,
textAlign: 'center'
},
chapter: {
marginTop: 6,
width: 220,
height: 32,
fontSize: 14,
fontWeight: 'bold',
color: '#1A1A1A',
lineHeight: 16,
textAlign: 'center',
verticalAlign: 'middle'
},
title: {
marginTop: 9,
width: 220,
height: 24,
fontSize: 24,
fontFamily: 'my',
lineHeight: 24,
textAlign: 'center',
color: data.controls.color
},
textWrapper: {
marginTop: 14,
width: 200,
height: 50
},
textBorder: {
width: 200,
height: 1,
backgroundColor: data.controls.color
},
text: {
height: 48,
fontSize: 13,
fontWeight: 'bold',
fontStyle: 'italic',
color: '#1A1A1A',
lineHeight: 18,
verticalAlign: 'middle',
textAlign: 'center'
},
subtitleTips: {
marginTop: 10,
width: 200,
height: 16,
fontSize: 12,
fontWeight: 'bold',
color: data.controls.color,
lineHeight: 16,
textAlign: 'center'
},
subtitle: {
width: 200,
height: 16,
fontSize: 12,
fontWeight: 'bold',
color: data.controls.color,
lineHeight: 16,
textAlign: 'center'
},
footer: {
marginTop: 5,
width: 204,
height: 44,
flexDirection: 'row',
alignItems: 'center'
},
footerLeft: {
width: 154,
height: 44
},
box: {
width: 160,
height: 20,
lineHeight: 20,
flexDirection: 'row',
alignItems: 'flex-end'
},
t1: {
width: 72,
height: 20,
fontSize: 12,
color: '#1A1A1A'
},
t2: {
marginLeft: 2,
marginRight: 2,
width: numLength * 11,
height: 20,
fontSize: 17,
fontWeight: 'bold',
color: data.controls.color,
textAlign: 'center'
},
t3: {
width: 12,
height: 20,
fontSize: 12,
color: '#1A1A1A'
},
footerRight: {
width: 50,
height: 50
},
qrcodeTipsWrapper: {
marginTop: 12,
width: 150,
borderRadius: 2,
backgroundColor: data.controls.color
},
qrcodeTips: {
height: 15,
fontSize: 11,
color: '#FFFFFF',
lineHeight: 15,
textAlign: 'center'
}
}
}
export { wxml, style }
learnOnline/package.json
浏览文件 @ 04346de8
...@@ -5,9 +5,9 @@ ...@@ -5,9 +5,9 @@
"main": "app.js", "main": "app.js",
"dependencies": { "dependencies": {
"@vant/weapp": "^1.6.5", "@vant/weapp": "^1.6.5",
"miniprogram-computed": "^2.2.0" "miniprogram-computed": "^2.2.0",
"wxml-to-canvas": "^1.1.1"
}, },
"devDependencies": {},
"scripts": { "scripts": {
"test": "echo \"Error: no test specified\" && exit 1" "test": "echo \"Error: no test specified\" && exit 1"
}, },
......
learnOnline/pages/course/player.js
浏览文件 @ 04346de8
...@@ -165,6 +165,9 @@ Page({ ...@@ -165,6 +165,9 @@ Page({
// 更新chapter // 更新chapter
this.updateActiveChapter(this.data.nextChapter) this.updateActiveChapter(this.data.nextChapter)
} }
// 分享海报
const share = this.selectComponent('.share')
share.init()
}, },
// 当前播放时间更新 // 当前播放时间更新
onTimeupdate(e) { onTimeupdate(e) {
......
learnOnline/pages/course/player.json
浏览文件 @ 04346de8
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
"navigationBarTitleText": "", "navigationBarTitleText": "",
"usingComponents": { "usingComponents": {
"player-video": "/components/player/video", "player-video": "/components/player/video",
"player-audio": "/components/player/audio" "player-audio": "/components/player/audio",
"share": "/components/share/index"
} }
} }
learnOnline/pages/course/player.wxml
浏览文件 @ 04346de8
...@@ -72,3 +72,5 @@ ...@@ -72,3 +72,5 @@
</van-tabs> </van-tabs>
</view> </view>
</view> </view>
<!-- 分享海报 -->
<share semesterId="{{ semesterId }}" courseId="{{ courseId }}" chapterId="{{ chapterId }}" class="share"></share>
learnOnline/pages/login/account.js
浏览文件 @ 04346de8
...@@ -29,7 +29,7 @@ Page({ ...@@ -29,7 +29,7 @@ Page({
handleRequest(params) { handleRequest(params) {
api.login(params).then(response => { api.login(params).then(response => {
const { code, msg, data } = response const { code, msg, data } = response
code === 0 ? this.handleSuccess(data) : wx.showToast({ title: msg, icon: 'none' }) code === 0 ? this.handleSuccess(data) : this.handleError(response)
}) })
}, },
// 登录成功 // 登录成功
...@@ -37,6 +37,18 @@ Page({ ...@@ -37,6 +37,18 @@ Page({
wx.setStorage({ key: 'token', data: data.TGC }) wx.setStorage({ key: 'token', data: data.TGC })
wx.switchTab({ url: '/pages/learnSystem/home/home' }) wx.switchTab({ url: '/pages/learnSystem/home/home' })
}, },
handleError(response) {
if (response.msg === '账号不存在') {
wx.showModal({ title: '账号不存在', content: '是否要成为学员', showCancel: true }).then(res => {
res.confirm &&
wx.navigateTo({
url: `/pages/web/index?url=${encodeURIComponent('https://webapp-pub.ezijing.com/pages/prp/prp.html?channel_num=96114')}`
})
})
} else {
wx.showToast({ title: response.msg, icon: 'none' })
}
},
handlePassword() { handlePassword() {
wx.navigateTo({ url: '/pages/login/password' }) wx.navigateTo({ url: '/pages/login/password' })
} }
......
learnOnline/pages/login/index.js
浏览文件 @ 04346de8
...@@ -65,9 +65,18 @@ Page({ ...@@ -65,9 +65,18 @@ Page({
} else if (response.code === 2) { } else if (response.code === 2) {
// 绑定手机号 // 绑定手机号
this.setData({ show: true, unionid: response.data.unionid }) this.setData({ show: true, unionid: response.data.unionid })
} else {
if (response.msg === '账号不存在') {
wx.showModal({ title: '账号不存在', content: '是否要成为学员', showCancel: true }).then(res => {
res.confirm &&
wx.navigateTo({
url: `/pages/web/index?url=${encodeURIComponent('https://webapp-pub.ezijing.com/pages/prp/prp.html?channel_num=96114')}`
})
})
} else { } else {
wx.showToast({ title: response.msg, icon: 'none' }) wx.showToast({ title: response.msg, icon: 'none' })
} }
}
}) })
}) })
}) })
......
learnOnline/pages/login/phone.js
浏览文件 @ 04346de8
...@@ -30,7 +30,7 @@ Page({ ...@@ -30,7 +30,7 @@ Page({
handleRequest(params) { handleRequest(params) {
api.login(params).then(response => { api.login(params).then(response => {
const { code, msg, data } = response const { code, msg, data } = response
code === 0 ? this.handleSuccess(data) : wx.showToast({ title: msg, icon: 'none' }) code === 0 ? this.handleSuccess(data) : this.handleError(response)
}) })
}, },
// 登录成功 // 登录成功
...@@ -38,6 +38,18 @@ Page({ ...@@ -38,6 +38,18 @@ Page({
wx.setStorage({ key: 'token', data: data.TGC }) wx.setStorage({ key: 'token', data: data.TGC })
wx.switchTab({ url: '/pages/learnSystem/home/home' }) wx.switchTab({ url: '/pages/learnSystem/home/home' })
}, },
handleError(response) {
if (response.msg === '账号不存在') {
wx.showModal({ title: '账号不存在', content: '是否要成为学员', showCancel: true }).then(res => {
res.confirm &&
wx.navigateTo({
url: `/pages/web/index?url=${encodeURIComponent('https://webapp-pub.ezijing.com/pages/prp/prp.html?channel_num=96114')}`
})
})
} else {
wx.showToast({ title: response.msg, icon: 'none' })
}
},
// 发送验证码 // 发送验证码
handleSendCode() { handleSendCode() {
if (this.data.disabled) { if (this.data.disabled) {
......
learnOnline/pages/share/index.js 0 → 100644
浏览文件 @ 04346de8
// pages/share.js
Page({
/**
* 页面的初始数据
*/
data: {},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
// 分享海报
const share = this.selectComponent('.share')
share.init()
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {}
})
learnOnline/pages/share/index.json 0 → 100644
浏览文件 @ 04346de8
{
"usingComponents": {
"share": "/components/share/index"
}
}
learnOnline/pages/share/index.wxml 0 → 100644
浏览文件 @ 04346de8
<share semesterId="6741976022452797440" courseId="6778237795518382080" chapterId="6347105800455979008" class="share" isNeed="{{ true }}"></share>
learnOnline/pages/share/index.wxss 0 → 100644
浏览文件 @ 04346de8
/* pages/share.wxss */
\ No newline at end of file
learnOnline/pages/web/index.js 0 → 100644
浏览文件 @ 04346de8
// pages/web/index.js
Page({
/**
* 页面的初始数据
*/
data: {
url: 'https://webapp-pub.ezijing.com/pages/prp/prp.html?channel_num=96114'
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
const { url } = options
url && this.setData({ url: decodeURIComponent(url) })
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {}
})
learnOnline/pages/web/index.json 0 → 100644
浏览文件 @ 04346de8
{
"usingComponents": {}
}
\ No newline at end of file
learnOnline/pages/web/index.wxml 0 → 100644
浏览文件 @ 04346de8
<web-view src="{{ url }}"></web-view>
learnOnline/pages/web/index.wxss 0 → 100644
浏览文件 @ 04346de8
/* pages/web/index.wxss */
\ No newline at end of file
learnOnline/project.config.json
浏览文件 @ 04346de8
...@@ -26,14 +26,14 @@ ...@@ -26,14 +26,14 @@
"disablePlugins": [], "disablePlugins": [],
"outputPath": "" "outputPath": ""
}, },
"bundle": false,
"useIsolateContext": true, "useIsolateContext": true,
"useCompilerModule": true,
"userConfirmedUseCompilerModuleSwitch": false,
"userConfirmedBundleSwitch": false, "userConfirmedBundleSwitch": false,
"packNpmManually": false, "packNpmManually": false,
"packNpmRelationList": [], "packNpmRelationList": [],
"minifyWXSS": true "minifyWXSS": true,
"disableUseStrict": false,
"showES6CompileOption": false,
"useCompilerPlugins": false
}, },
"compileType": "miniprogram", "compileType": "miniprogram",
"libVersion": "2.21.2", "libVersion": "2.21.2",
......
learnOnline/project.private.config.json 0 → 100644
浏览文件 @ 04346de8
{
"setting": {},
"condition": {
"plugin": {
"list": []
},
"game": {
"list": []
},
"gamePlugin": {
"list": []
},
"miniprogram": {
"list": [
{
"name": "",
"pathName": "pages/share/index",
"query": "",
"scene": null
},
{
"name": "",
"pathName": "pages/learnSystem/courseContent/courseContent",
"query": "id=6778237795518382080&sid=undefined",
"scene": null
},
{
"name": "",
"pathName": "pages/course/player",
"query": "semester_id=undefined&id=6778237795518382080&chapter_id=6347105800455979008",
"scene": null
}
]
}
}
}
\ No newline at end of file
learnOnline/utils/util.js
浏览文件 @ 04346de8
...@@ -43,11 +43,19 @@ const requestApi = obj => { ...@@ -43,11 +43,19 @@ const requestApi = obj => {
// wx.showToast({ title: JSON.stringify(res.data), icon: 'none' }) // 自己后台封装返回 // wx.showToast({ title: JSON.stringify(res.data), icon: 'none' }) // 自己后台封装返回
// } // }
obj.callback(res) obj.callback(res)
} else if (res.statusCode === 403 || res.statusCode === 401) { } else if (res.statusCode === 403) {
/* 未授权登录，跳转首页 */ /* 未授权登录，跳转首页 */
wx.reLaunch({ wx.reLaunch({
url: '/pages/login/index' url: '/pages/login/index'
}) })
} else if (res.statusCode === 401) {
wx.showModal({ title: '未授权', content: '是否要成为学员', showCancel: true }).then(res => {
res.confirm &&
wx.redirectTo({
url: `/pages/web/index?url=${encodeURIComponent('https://webapp-pub.ezijing.com/pages/prp/prp.html?channel_num=96114')}`
})
res.cancel && wx.reLaunch({ url: '/pages/login/index' })
})
} else { } else {
wx.showToast({ title: res.errMsg, icon: 'none' }) // 微信封装返回 wx.showToast({ title: res.errMsg, icon: 'none' }) // 微信封装返回
} }
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论