updates

learnOnline/app.js

@@ -7,12 +7,30 @@ App({
   },
   onLaunch: function () {
     // 加载自定义字体
-    // wx.loadFontFace({
-    //   global: true,
-    //   family: 'my',
-    //   source: 'https://webapp-pub.ezijing.com/weapp/share/my.ttf',
-    //   scopes: ['webview', 'native']
-    // })
+    wx.loadFontFace({
+      global: true,
+      family: 'HelveticaNeueLTProMd',
+      source: 'https://webapp-pub.ezijing.com/weapp/share/marywood/HelveticaNeueLTProMd.otf',
+      scopes: ['webview', 'native']
+    })
+    wx.loadFontFace({
+      global: true,
+      family: 'HelveticaNeueLTProMdIt',
+      source: 'https://webapp-pub.ezijing.com/weapp/share/marywood/HelveticaNeueLTProMdIt.otf',
+      scopes: ['webview', 'native']
+    })
+    wx.loadFontFace({
+      global: true,
+      family: 'Lato',
+      source: 'https://webapp-pub.ezijing.com/weapp/share/marywood/Lato-Medium.ttf',
+      scopes: ['webview', 'native']
+    })
+    wx.loadFontFace({
+      global: true,
+      family: 'Lato-Light',
+      source: 'https://webapp-pub.ezijing.com/weapp/share/marywood/Lato-Light.ttf',
+      scopes: ['webview', 'native']
+    })
   },
   onPageNotFound() {
     wx.redirectTo({ url: 'pages/login/index' })

learnOnline/components/share/index.js

@@ -71,8 +71,8 @@ Component({
     },
     controlsTabs: [
       { index: '0', text: '背景' },
-      { index: '1', text: '金句' },
-      { index: '3', text: '颜色' }
+      { index: '1', text: '金句' }
+      // { index: '3', text: '颜色' }
       // { index: '2', text: '头像' }
     ],
     wxUserProfile: {},
@@ -92,8 +92,6 @@ Component({
           semester_id: this.data.semesterId
         }
       })
-      // 加载自定义字体
-      // wx.loadFontFace({ family: 'my', source: 'https://webapp-pub.ezijing.com/weapp/share/my.ttf' })
     }
   },
   /**
@@ -137,11 +135,14 @@ Component({
       }
       return getShare(params).then(res => {
         const data = res.data
-        // data.sentences = ['If you think education is expensive, try ignorance.']
+        // data.sentences = [
+        //   'If you think education is expensive, try ignorance.'
+        // ]
         // data.course_name = '设计思维与管理创新'
         // data.english_course_name = 'Organizational Behavior and Leadership'
-        // data.current_percent = '90'
-        // data.all_percent = '25'
+        // data.current_percent = '90%'
+        // data.all_percent = '25%'
+        // data.used_day = 23
         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(/(\(|（)(.+)(\)|）)/, '') : ''
@@ -149,6 +150,8 @@ Component({
         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}”专题` : ''
+        data.current_percent = parseFloat(data.current_percent) || 0
+        data.all_percent = parseFloat(data.all_percent) || 0
 
         const numLength = data.used_day.toString().length
         // 金句设置

learnOnline/components/share/index.wxml

@@ -9,13 +9,13 @@
         class="bg"
       ></image>
       <image
-        src="https://webapp-pub.ezijing.com/weapp/share/marywood/cover.png?x-oss-process=image/resize,m_fill,h_898,w_507"
+        src="https://webapp-pub.ezijing.com/weapp/share/marywood/cover2.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="title">Zijing-Marywood University</view>
-        <view class="title">Master of Business Administration (MBA)</view>
+        <!-- <view class="title">Zijing-Marywood University</view>
+        <view class="title">Master of Business Administration (MBA)</view> -->
         <view class="day">
           <text class="day-num">{{ share.used_day }}</text>
           <text class="day-tips">Learning Days</text>
@@ -106,14 +106,15 @@
         <!-- 金句 -->
         <view class="controls-content" hidden="{{ controls.active !== '1' }}">
           <!-- 自定义金句 -->
-          <view class="custom-text-button" bindtap="showCustomText">自定义金句</view>
+          <!-- <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 }}
+          >
+            <text class="t">{{ item.text }}</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>

learnOnline/components/share/index.wxss

@@ -37,14 +37,15 @@
 .main {
   position: absolute;
   left: 45px;
-  top: 95px;
+  top: 142px;
   width: 210px;
   color: #d78c4a;
 }
 .title {
   text-align: center;
+  /* font-family: Lato; */
   font-size: 10px;
-  font-weight: bold;
+  font-weight: 700;
   line-height: 16px;
   white-space: nowrap;
 }
@@ -56,47 +57,66 @@
   justify-content: center;
   width: 130px;
   height: 130px;
-  margin: 15px auto 0;
+  margin: 0 auto;
   background: url(https://webapp-pub.ezijing.com/weapp/share/marywood/roud_bg.png) no-repeat;
   background-size: contain;
 }
 .day-num {
   font-size: 48px;
+  font-family: 'HelveticaNeueLTProMd';
   line-height: 48px;
   color: #f1ae2c;
 }
 .day-tips {
   font-size: 14px;
+  font-family: Lato;
   color: #fff;
 }
 .text {
-  margin-top: 18px;
+  margin-top: 20px;
   margin-bottom: 10px;
   font-size: 9px;
-  line-height: 14px;
-  word-break: break-word;
+  font-family: SourceHanSansCN-Regular;
+  line-height: 1;
+  white-space: nowrap;
+  text-align: center;
   overflow: hidden;
-  border-bottom: 1px solid #f1ae2c;
-  padding-bottom: 6px;
+  border-bottom: 1rpx solid #f1ae2c;
+  height: 17px;
 }
 .box {
   display: flex;
   align-items: center;
+  margin: 9px 0;
 }
 .course {
   flex: 1;
+  margin-right: 6px;
 }
 .course-en-name {
+  font-family: Lato;
   font-size: 12px;
-  line-height: 12px;
+  font-weight: 500;
+  line-height: 1;
+  max-height: 24px;
+  overflow: hidden;
+  word-wrap: break-word;
+  word-break: break-all;
 }
 .course-name {
-  font-size: 11px;
+  height: 11px;
+  margin-top: 3px;
   margin-left: -6px;
+  font-size: 11px;
+  font-weight: 400;
+  line-height: 1;
+  overflow: hidden;
 }
 .course-mba {
   flex: 1;
   font-size: 12px;
+  font-family: Lato;
+  font-weight: 500;
   text-align: right;
 }
 .progress {
@@ -106,21 +126,29 @@
   justify-content: center;
 }
 .progress-box {
+  display: flex;
+  align-items: flex-end;
   text-align: center;
   height: 30px;
   overflow: hidden;
 }
 .progress-num {
-  font-style: italic;
+  height: 30px;
   font-size: 30px;
+  font-family: 'HelveticaNeueLTProMdIt';
   line-height: 1;
+  margin-bottom: -5px;
 }
 .progress-unit {
   font-size: 16px;
+  font-family: 'HelveticaNeueLTProMdIt';
   line-height: 1;
 }
 .progress-completed {
+  margin-top: -4px;
   font-size: 11px;
+  font-family: 'Lato-Light';
+  font-weight: normal;
   line-height: 1;
 }
 
@@ -130,7 +158,7 @@
   align-items: center;
   margin-top: 10px;
   padding-top: 9px;
-  border-top: 1px solid #f1ae2c;
+  border-top: 1rpx solid #f1ae2c;
 }
 .qrcode {
   width: 37px;
@@ -250,13 +278,18 @@ button::after {
   border: 3px solid #ccc;
   border-radius: 6px;
   padding: 10px;
+  box-sizing: border-box;
+}
+.controls-text-item .t {
   font-size: 13px;
   color: #1a1a1a;
   line-height: 18px;
-  box-sizing: border-box;
+  overflow: hidden;
   text-overflow: ellipsis;
+  display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
+  word-wrap: break-word;
 }
 .controls-avatar-item {
   position: relative;

learnOnline/components/share/share.js

@@ -2,10 +2,8 @@ const wxml = function (data) {
   return `
   <view class="share">
     <image src="${data.controls.bg}?x-oss-process=image/resize,m_fill,h_530,w_300" class="bg"></image>
-    <image src="https://webapp-pub.ezijing.com/weapp/share/marywood/cover.png" class="cover"></image>
+    <image src="https://webapp-pub.ezijing.com/weapp/share/marywood/cover2.png" class="cover"></image>
     <view class="main">
-      <text class="title">Zijing-Marywood University</text>
-      <text class="title">Master of Business Administration (MBA)</text>
       <view class="day">
         <image src="https://webapp-pub.ezijing.com/weapp/share/marywood/roud_bg.png?x-oss-process=image/resize,m_fill,h_130,w_130" class="day-bg"></image>
         <view class="day-inner">
@@ -38,15 +36,17 @@ const wxml = function (data) {
         </view>
         <text class="course-mba">MBA Learning Achievement</text>
       </view>
-      <view class="line"></view>
-      <image src="${data.qrcode}" class="qrcode"></image>
+      <view class="line mt10"></view>
+      <view class="qrcode-box">
+        <image src="${data.qrcode}" class="qrcode"></image>
+      </view>
       <text class="qrcode-tips">Scan to learn with me</text>
     </view>
   </view>`
 }
 
 const style = function (data) {
-  const numLength = data.share.used_day.toString().length
+  const enCourseNameLength = data.share.english_course_name.length
   return {
     share: {
       position: 'relative',
@@ -67,7 +67,7 @@ const style = function (data) {
     main: {
       position: 'absolute',
       left: 45,
-      top: 95,
+      top: 142,
       width: 210,
       height: 300,
       alignItems: 'center',
@@ -77,15 +77,15 @@ const style = function (data) {
       width: 210,
       textAlign: 'center',
       fontSize: 10,
+      // fontFamily: 'Lato',
+      fontWeight: 700,
       lineHeight: 16,
-      fontWeight: 'bold',
       height: 16
     },
     day: {
       position: 'relative',
       width: 130,
-      height: 130,
-      marginTop: 15
+      height: 130
     },
     dayBg: {
       position: 'absolute',
@@ -107,56 +107,62 @@ const style = function (data) {
     dayNum: {
       height: 48,
       fontSize: 48,
+      fontFamily: 'HelveticaNeueLTProMd',
       lineHeight: 48,
       color: '#f1ae2c'
     },
     dayTips: {
       height: 20,
       fontSize: 14,
+      fontFamily: 'Lato',
       color: '#fff'
     },
     line: {
-      marginTop: 8,
       width: 210,
-      height: 1,
+      height: 0.5,
       backgroundColor: '#F1AE2C'
     },
     text: {
-      marginTop: 18,
+      marginTop: 20,
       width: 210,
-      height: 14,
+      height: 17,
       fontSize: 9,
-      lineHeight: 14,
+      lineHeight: 9,
       textAlign: 'center'
     },
     box: {
-      marginTop: 8,
+      marginTop: 9,
       width: 210,
       color: data.controls.color,
       flexDirection: 'row',
       alignItems: 'center'
     },
+    mt10: {
+      marginTop: 9
+    },
     course: {
-      width: 160,
-      height: 40
+      width: 156
+      // height: 40
     },
     courseEnName: {
-      height: 24,
+      height: enCourseNameLength > 26 ? 24 : 12,
+      fontFamily: 'Lato',
       fontSize: 12,
       fontWeight: 500,
       lineHeight: 12
     },
     courseName: {
       marginLeft: -5,
-      marginTop: 5,
+      marginTop: 3,
       height: 11,
       fontSize: 11,
       fontWeight: 400,
       lineHeight: 11
     },
     courseMba: {
-      width: 160,
+      width: 156,
       height: 12,
+      fontFamily: 'Lato',
       fontSize: 12,
       fontWeight: 500,
       lineHeight: 12,
@@ -166,44 +172,53 @@ const style = function (data) {
       flexDirection: 'column',
       justifyContent: 'center',
       alignItems: 'center',
-      width: 50,
+      width: 54,
       height: 38
     },
     progressBox: {
       flexDirection: 'row',
       alignItems: 'flex-end',
-      width: 50,
+      justifyContent: 'center',
+      width: 54,
       height: 28
     },
     progressNum: {
       width: 36,
-      height: 28,
-      fontSize: 28,
-      fontStyle: 'italic',
-      lineHeight: 28,
+      height: 30,
+      marginBottom: -5,
+      fontFamily: 'HelveticaNeueLTProMdIt',
+      fontSize: 30,
+      lineHeight: 30,
       textAlign: 'right'
     },
     progressUnit: {
-      width: 14,
-      height: 14,
-      fontSize: 14,
-      lineHeight: 14
+      width: 16,
+      height: 16,
+      fontFamily: 'HelveticaNeueLTProMdIt',
+      fontSize: 16,
+      lineHeight: 16
     },
     progressCompleted: {
       marginTop: -2,
-      width: 50,
+      width: 54,
       height: 11,
-      fontSize: 10,
+      fontFamily: 'Lato-Light',
+      fontSize: 11,
       fontWeight: 300,
-      lineHeight: 10,
-      textAlign: 'right'
+      lineHeight: 11,
+      textAlign: 'center'
     },
-    qrcode: {
+    qrcodeBox: {
       marginTop: 8,
-      width: 37,
-      height: 37,
+      width: 39,
+      height: 39,
       borderRadius: 2,
-      backgroundColor: data.controls.color
+      backgroundColor: '#1d5434'
+    },
+    qrcode: {
+      margin: 1,
+      width: 37,
+      height: 37
     },
     qrcodeTips: {
       width: 210,