提交 a35a72cf authored 作者: 王鹏飞's avatar 王鹏飞

updates

上级 5c57fee1
...@@ -62,9 +62,9 @@ Component({ ...@@ -62,9 +62,9 @@ Component({
methods: { methods: {
init() { init() {
this.getShare().then(res => { this.getShare().then(res => {
// if (!this.data.isNeed && !res.data.need_share) { if (!this.data.isNeed && !res.data.need_share) {
// return return
// } }
app.getUser().then(res => { app.getUser().then(res => {
res.realname = res.realname || res.nickname res.realname = res.realname || res.nickname
if (res.avatar) { if (res.avatar) {
...@@ -140,7 +140,7 @@ Component({ ...@@ -140,7 +140,7 @@ Component({
this.widget = this.selectComponent('.widget') this.widget = this.selectComponent('.widget')
setTimeout(() => { setTimeout(() => {
this.widget this.widget
.renderToCanvas({ wxml: wxml(this.data), style }) .renderToCanvas({ wxml: wxml(this.data), style: style(this.data) })
.then(res => { .then(res => {
wx.hideLoading() wx.hideLoading()
}) })
...@@ -162,7 +162,7 @@ Component({ ...@@ -162,7 +162,7 @@ Component({
wx.showToast({ title: '保存成功', icon: 'none' }) wx.showToast({ title: '保存成功', icon: 'none' })
}) })
.catch(error => { .catch(error => {
wx.showToast({ title: '保存失败', icon: 'none' }) wx.showToast({ title: '保存失败,请检查相册权限', icon: 'none' })
}) })
}) })
}, },
......
...@@ -24,9 +24,8 @@ ...@@ -24,9 +24,8 @@
<view class="text">{{ controls.text }}</view> <view class="text">{{ controls.text }}</view>
<view class="footer"> <view class="footer">
<view class="footer-left"> <view class="footer-left">
<view class="tips" <view class="tips">
>我已坚持学习<text class="num">{{ share.used_day }}</text 我已坚持学习<text class="num"> {{ share.used_day }} </text>天</view
>天</view
> >
<view>我离学位殿堂又近了一步</view> <view>我离学位殿堂又近了一步</view>
</view> </view>
......
...@@ -18,108 +18,111 @@ ...@@ -18,108 +18,111 @@
overflow-y: auto; overflow-y: auto;
} }
.share { .share {
width: 600rpx; width: 300px;
height: 1064rpx; height: 532px;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
.bg { .bg {
width: 600rpx; width: 300px;
height: 1064rpx; height: 532px;
} }
.cover { .cover {
position: absolute; position: absolute;
top: 70rpx; top: 36px;
left: 32rpx; left: 17px;
width: 534rpx; width: 267px;
height: 924rpx; height: 462px;
} }
.main { .main {
position: absolute; position: absolute;
left: 82rpx; left: 40px;
top: 230rpx; top: 120px;
/* right: 82rpx; */ /* right: 41px; */
width: 436rpx; width: 220px;
} }
.teacher { .teacher {
font-size: 26rpx; font-size: 13px;
font-weight: bold; font-weight: bold;
color: #d78c4a; color: #d78c4a;
line-height: 32rpx; line-height: 16px;
} }
.course { .course {
font-size: 26rpx; font-size: 13px;
font-weight: bold; font-weight: bold;
color: #d78c4a; color: #d78c4a;
line-height: 32rpx; line-height: 16px;
margin-left: -5px;
} }
.user { .user {
margin-top: 20rpx; margin-top: 10px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.avatar { .avatar {
width: 130rpx; width: 65px;
height: 130rpx; height: 65px;
border-radius: 50%; border-radius: 50%;
overflow: hidden; overflow: hidden;
} }
.nickname { .nickname {
font-size: 30rpx; margin-top: 2px;
font-size: 15px;
font-weight: bold; font-weight: bold;
color: #d78c4a; color: #d78c4a;
line-height: 48rpx; line-height: 1;
} }
.chapter { .chapter {
margin-top: 10rpx; margin-top: 6px;
margin-left: 18rpx; margin-left: 8px;
margin-right: 18rpx; margin-right: 8px;
height: 64rpx; height: 32px;
font-size: 28rpx; font-size: 14px;
font-weight: bold; font-weight: bold;
color: #1a1a1a; color: #1a1a1a;
line-height: 32rpx; line-height: 16px;
text-align: center; text-align: center;
overflow: hidden;
} }
.text { .text {
margin-top: 116rpx; margin-top: 56px;
margin-left: 30rpx; margin-left: 12px;
margin-right: 30rpx; margin-right: 12px;
height: 72rpx; height: 36px;
font-size: 26rpx; font-size: 13px;
font-weight: 500; font-weight: bold;
/* font-style: italic; */ /* font-style: italic; */
color: #1a1a1a; color: #1a1a1a;
line-height: 36rpx; line-height: 18px;
overflow: hidden; overflow: hidden;
} }
.footer { .footer {
display: flex; display: flex;
align-items: center; align-items: center;
margin-top: 30rpx; margin-top: 15px;
margin-left: 18rpx; margin-left: 15px;
margin-right: 18rpx; margin-right: 15px;
} }
.footer-left { .footer-left {
flex: 1; flex: 1;
font-size: 24rpx; font-size: 12px;
color: #1a1a1a; color: #1a1a1a;
line-height: 36rpx; line-height: 18px;
} }
.footer-left .tips { .footer-left .tips {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.num { .num {
font-size: 34rpx; font-size: 17px;
color: #d78c4a; color: #d78c4a;
font-weight: Bold; font-weight: bold;
} }
.footer-right { .footer-right {
width: 98rpx; width: 50px;
height: 98rpx; height: 50px;
} }
.controls { .controls {
position: relative; position: relative;
...@@ -134,36 +137,35 @@ ...@@ -134,36 +137,35 @@
background-color: #fff; background-color: #fff;
} }
.controls.is-show .controls-main { .controls.is-show .controls-main {
height: 260rpx; height: 130px;
} }
.buttons { .buttons {
position: absolute; position: absolute;
top: -132rpx; top: -66px;
left: 0; left: 0;
right: 0; right: 0;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: 16rpx 26rpx; padding: 8px 13px;
} }
.button { .button {
position: relative; position: relative;
width: 100rpx; width: 50px;
height: 100rpx; height: 50px;
background: #ffffff; background: #ffffff;
box-shadow: 0rpx 2rpx 8rpx 0rpx rgba(0, 0, 0, 0.2); box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
border-radius: 50%; border-radius: 50%;
font-size: 26rpx; font-size: 13px;
font-weight: 400;
color: #d78c4a; color: #d78c4a;
line-height: 30rpx; line-height: 15px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.wx-image { .wx-image {
width: 100rpx; width: 50px;
height: 100rpx; height: 50px;
} }
.wx-button { .wx-button {
position: absolute; position: absolute;
...@@ -182,12 +184,12 @@ button::after { ...@@ -182,12 +184,12 @@ button::after {
} }
.controls-tabs { .controls-tabs {
display: flex; display: flex;
height: 60rpx; height: 30px;
background: #ccc; background: #ccc;
} }
.controls-tab { .controls-tab {
width: 150rpx; width: 75px;
line-height: 60rpx; line-height: 30px;
text-align: center; text-align: center;
background-color: #e6e6e6; background-color: #e6e6e6;
} }
...@@ -197,57 +199,57 @@ button::after { ...@@ -197,57 +199,57 @@ button::after {
} }
.controls-content { .controls-content {
flex: 1; flex: 1;
height: 200rpx; height: 100px;
padding: 0 20rpx; padding: 0 10px;
display: flex; display: flex;
align-items: center; align-items: center;
flex-wrap: nowrap; flex-wrap: nowrap;
} }
.controls-content .is-active { .controls-content .is-active {
border: 5rpx solid #d78c4a; border: 3px solid #d78c4a;
} }
.controls-bg-item { .controls-bg-item {
flex: 0 0 92rpx; flex: 0 0 46px;
width: 92rpx; width: 46px;
height: 162rpx; height: 80px;
margin: 0 30rpx; margin: 0 15px;
border: 5rpx solid #fff; border: 3px solid #fff;
border-radius: 5rpx; border-radius: 3px;
overflow: hidden; overflow: hidden;
} }
.controls-text-item { .controls-text-item {
margin: 0 30rpx; margin: 0 15px;
flex: 0 0 455rpx; flex: 0 0 228px;
width: 455rpx; width: 228px;
height: 125rpx; height: 60px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border: 5rpx solid #ccc; border: 3px solid #ccc;
border-radius: 12rpx; border-radius: 6px;
overflow: hidden; overflow: hidden;
padding: 30rpx; padding: 12px;
font-size: 26rpx; font-size: 13px;
color: #1a1a1a; color: #1a1a1a;
line-height: 36rpx; line-height: 18px;
box-sizing: border-box; box-sizing: border-box;
} }
.controls-avatar-item { .controls-avatar-item {
position: relative; position: relative;
margin: 0 30rpx; margin: 0 15px;
flex: 0 0 120rpx; flex: 0 0 60px;
width: 120rpx; width: 60px;
height: 125rpx; height: 60px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border: 5rpx solid #ccc; border: 3px solid #ccc;
border-radius: 50%; border-radius: 50%;
overflow: hidden; overflow: hidden;
font-size: 26rpx; font-size: 13px;
color: #1a1a1a; color: #1a1a1a;
line-height: 36rpx; line-height: 18px;
box-sizing: border-box; box-sizing: border-box;
} }
.image { .image {
...@@ -266,14 +268,14 @@ button::after { ...@@ -266,14 +268,14 @@ button::after {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 75rpx 0; padding: 38px 0;
} }
.close { .close {
position: absolute; position: absolute;
right: 16rpx; right: 8px;
top: 16rpx; top: 8px;
width: 96rpx; width: 48px;
height: 96rpx; height: 48px;
background: url('https://webapp-pub.ezijing.com/weapp/share/close.png') no-repeat; background: url('https://webapp-pub.ezijing.com/weapp/share/close.png') no-repeat;
background-size: contain; background-size: contain;
z-index: 999; z-index: 999;
...@@ -287,18 +289,18 @@ button::after { ...@@ -287,18 +289,18 @@ button::after {
overflow-y: auto; overflow-y: auto;
} }
.share-preivew .button { .share-preivew .button {
width: 500rpx; width: 250px;
height: 100rpx; height: 50px;
border-radius: 50rpx; border-radius: 25px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin: 35rpx 0; margin: 18px 0;
font-size: 26rpx; font-size: 13px;
font-weight: 400; font-weight: 400;
color: #d78c4a; color: #d78c4a;
line-height: 30rpx; line-height: 15px;
} }
.share-preivew .button-default { .share-preivew .button-default {
color: #d78c4a; color: #d78c4a;
...@@ -309,9 +311,9 @@ button::after { ...@@ -309,9 +311,9 @@ button::after {
background: #d78c4a; background: #d78c4a;
} }
.share-preivew .tips { .share-preivew .tips {
font-size: 26rpx; font-size: 13px;
font-weight: 400; font-weight: 400;
color: #fff; color: #fff;
line-height: 40rpx; line-height: 15px;
text-align: center; text-align: center;
} }
const wxml = function (data) { const wxml = function (data) {
return ` return `
<view class="share"> <view class="share">
<image src="${data.controls.bg}?x-oss-process=image/resize,m_fill,h_530,w_300" class="bg"></image> <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/cover.png" class="cover"></image> <image src="https://webapp-pub.ezijing.com/weapp/share/cover.png" class="cover"></image>
<view class="main"> <view class="main">
<text class="teacher">${data.share.lecturer.lecturer_name}</text> <text class="teacher">${data.share.lecturer.lecturer_name}</text>
...@@ -23,140 +23,141 @@ const wxml = function (data) { ...@@ -23,140 +23,141 @@ const wxml = function (data) {
</view>` </view>`
} }
const style = { const style = function (data) {
share: { const numLength = data.share.used_day.toString().length
position: 'relative', return {
width: 300, share: {
height: 530 position: 'relative',
}, width: 300,
bg: { height: 532
width: 300, },
height: 530 bg: {
}, width: 300,
cover: { height: 532
position: 'absolute', },
top: 35, cover: {
left: 17, position: 'absolute',
width: 267, top: 36,
height: 462 left: 17,
}, width: 267,
main: { height: 462
position: 'absolute', },
left: 40, main: {
top: 119, position: 'absolute',
width: 220, left: 40,
height: 300 top: 120,
}, width: 220,
teacher: { height: 300
height: 14, },
fontSize: 13, teacher: {
lineHeight: 1, height: 16,
color: '#D78C4A', fontSize: 13,
verticalAlign: 'middle' fontWeight: 'bold',
}, lineHeight: 16,
course: { color: '#D78C4A'
height: 14, },
fontSize: 13, course: {
lineHeight: 14, marginLeft: -5,
color: '#D78C4A', height: 16,
verticalAlign: 'middle' fontSize: 13,
}, fontWeight: 'bold',
user: { lineHeight: 16,
marginTop: 12, color: '#D78C4A'
flexDirection: 'column', },
alignItems: 'center' user: {
}, marginTop: 10,
avatar: { flexDirection: 'column',
width: 65, alignItems: 'center'
height: 65, },
borderRadius: 32.5 avatar: {
}, width: 65,
nickname: { height: 65,
marginTop: 4, borderRadius: 32.5
width: 220, },
height: 14, nickname: {
textAlign: 'center', marginTop: 2,
verticalAlign: 'middle', width: 220,
fontSize: 13, height: 16,
lineHeight: 14, fontSize: 15,
color: '#D78C4A', fontWeight: 'bold',
textAlign: 'center' lineHeight: 16,
}, color: '#D78C4A',
chapter: { textAlign: 'center'
marginTop: 8, },
width: 220, chapter: {
height: 32, marginTop: 6,
fontSize: 14, width: 220,
fontWeight: 'bold', height: 32,
color: '#1A1A1A', fontSize: 14,
lineHeight: 16, fontWeight: 'bold',
textAlign: 'center' color: '#1A1A1A',
}, lineHeight: 16,
text: { textAlign: 'center'
marginTop: 55, },
marginLeft: 12, text: {
width: 200, marginTop: 56,
height: 36, marginLeft: 12,
fontSize: 13, width: 200,
fontWeight: 'bold', height: 36,
fontStyle: 'italic', fontSize: 13,
color: '#1A1A1A', fontWeight: 'bold',
lineHeight: 18 fontStyle: 'italic',
}, color: '#1A1A1A',
footer: { lineHeight: 18
marginLeft: 15, },
marginRight: 15, footer: {
width: 190, marginTop: 15,
height: 60, marginLeft: 15,
marginTop: 12, marginRight: 15,
flexDirection: 'row', width: 190,
alignItems: 'center' height: 50,
}, flexDirection: 'row',
footerLeft: { alignItems: 'center'
width: 140, },
height: 50, footerLeft: {
justifyContent: 'center' width: 140,
}, height: 50,
box: { justifyContent: 'center'
width: 140, },
height: 20, box: {
flexDirection: 'row' width: 140,
}, height: 20,
t1: { flexDirection: 'row'
width: 72, },
height: 20, t1: {
fontSize: 12, width: 72,
lineHeight: 20, height: 20,
color: '#1A1A1A', fontSize: 12,
verticalAlign: 'middle' lineHeight: 20,
}, color: '#1A1A1A'
t2: { },
width: 40, t2: {
height: 20, width: numLength * 12,
fontSize: 17, height: 20,
lineHeight: 20, fontSize: 17,
color: '#D78C4A', fontWeight: 'bold',
textAlign: 'center' lineHeight: 20,
}, color: '#D78C4A',
t3: { textAlign: 'center'
width: 40, },
height: 20, t3: {
fontSize: 12, width: 12,
lineHeight: 20, height: 20,
color: '#1A1A1A', fontSize: 12,
verticalAlign: 'middle' lineHeight: 20,
}, color: '#1A1A1A'
tips: { },
width: 140, tips: {
height: 20, width: 140,
fontSize: 12, height: 20,
lineHeight: 20, fontSize: 12,
color: '#1A1A1A', lineHeight: 20,
verticalAlign: 'middle' color: '#1A1A1A'
}, },
footerRight: { footerRight: {
width: 50, width: 50,
height: 50 height: 50
}
} }
} }
......
...@@ -7,9 +7,9 @@ ...@@ -7,9 +7,9 @@
.course-intro .list-teacher { margin-top: 50rpx; padding: 0 25rpx; } .course-intro .list-teacher { margin-top: 50rpx; padding: 0 25rpx; }
.course-intro .list-teacher .img { float: left; width: 150rpx; height: 150rpx; background: #c9c9c9; } .course-intro .list-teacher .img { float: left; width: 150rpx; height: 150rpx; background: #c9c9c9; }
.course-intro .list-teacher .ctx { position: relative; margin-left: 170rpx; height: 150rpx; } .course-intro .list-teacher .ctx { position: relative; margin-left: 170rpx; height: 150rpx; }
.course-intro .list-teacher .ctx .top-ctx { position: absolute; top: -4rpx; width: 100%; overflow: hidden; } .course-intro .list-teacher .ctx .top-ctx {}
.course-intro .list-teacher .ctx .top-ctx .tit { font-size: 28rpx; color: #313131; line-height: 37rpx; overflow: hidden; word-break: break-all; } .course-intro .list-teacher .ctx .top-ctx .tit { font-size: 28rpx; color: #313131; line-height: 37rpx; overflow: hidden; word-break: break-all; }
.course-intro .list-teacher .ctx .bottom-ctx { position: absolute; top: 50rpx; width: 100%; overflow: hidden; } .course-intro .list-teacher .ctx .bottom-ctx { }
.course-intro .list-teacher .ctx .bottom-ctx .t1 { font-size: 22rpx; line-height: 30rpx; color: #707070; overflow: hidden; word-break: break-all; } .course-intro .list-teacher .ctx .bottom-ctx .t1 { font-size: 22rpx; line-height: 30rpx; color: #707070; overflow: hidden; word-break: break-all; }
.course-intro .list-teacher .ctx .bottom-ctx .t2 { font-size: 22rpx; line-height: 30rpx; color: #707070; overflow: hidden; word-break: break-all; } .course-intro .list-teacher .ctx .bottom-ctx .t2 { font-size: 22rpx; line-height: 30rpx; color: #707070; overflow: hidden; word-break: break-all; }
.course-intro .list-teacher .ctx .bottom-ctx .t3 { font-size: 22rpx; color: #707070; text-overflow: ellipsis; overflow: hidden; word-break: break-all; } .course-intro .list-teacher .ctx .bottom-ctx .t3 { font-size: 22rpx; color: #707070; text-overflow: ellipsis; overflow: hidden; word-break: break-all; }
\ No newline at end of file
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论