分享海报支持自定义金句，支持颜色选择

README.md

 # 小程序 - 开发项目
 
 ## 使用与运行
-* 打开小程序 “微信开发者工具” 预览、调试、发布、上传都可以。
+
+- 打开小程序 “微信开发者工具” 预览、调试、发布、上传都可以。
   - `微信开发者工具`：<a href="https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html" target="_blank">下载地址</a>
   - `微信开发者工具`：<a href="https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html?t=18090718" target="_blank">使用说明地址</a>
 
 ## 小程序 - 对应域名添加
-* https://api.ezijing.com
-* https://p.bokecc.com
-* https://union.bokecc.com
-* https://cd15-c120-1.play.bokecc.com
-* https://ca14-cca1-1.play.bokecc.com
-* https://img1.ezijing.com
-* https://zws-imgs-pub.ezijing.com
+
+- https://api.ezijing.com
+- https://p.bokecc.com
+- https://union.bokecc.com
+- https://cd15-c120-1.play.bokecc.com
+- https://ca14-cca1-1.play.bokecc.com
+- https://img1.ezijing.com
+- https://zws-imgs-pub.ezijing.com
 
 ## 小程序审核
-``` python
+
+```python
 本系统是 内部付费人员使用，需要绑定手机号（你们肯定不愿意提供手机号）。但为了 照顾你们 测试人员，所以在 登录下方已经增加 “游客登录”入口，你测试 为啥不试试就给我拒绝了？
 再次重申，我已经增加 “游客登录”入口，就是方便 你们测试人员测试使用。你为啥不用呢？  我已经申请过多次，多次出现这种情况，你们测试人员之间没有沟通吗？
 麻烦以后你们测试之间 多沟通一下，不要再让我天天加备注解释，好吗？
-```
+```
\ No newline at end of file
+
+wxml-to-canvas 代码修改
+
+```
+let {
+color = '#000',
+lineHeight = '1.4em',
+fontSize = 14,
+fontStyle = 'normal',
+fontWeight = 'normal',
+fontFamily = 'sans-serif',
+textAlign = 'left',
+verticalAlign = 'top',
+backgroundColor = 'transparent'
+} = style
+
+ctx.font = `${fontStyle} ${fontWeight} ${fontSize}px ${fontFamily}`
+```

learnOnline/app.js

@@ -5,7 +5,15 @@ App({
     pageshow: false,
     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() {
     wx.redirectTo({ url: 'pages/login/index' })
   },

learnOnline/components/share/index.js

@@ -3,6 +3,9 @@ import { wxml, style } from './share.js'
 const app = getApp()
 
 Component({
+  options: {
+    styleIsolation: 'shared'
+  },
   /**
    * 组件的属性列表
    */
@@ -28,33 +31,70 @@ Component({
       '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/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'
     ],
     textList: [
-      '本质上，我们都生活在我们与内部体验或者外部事件的主观互动中。',
-      '人本主义认为人是多维的，不能只去剖析本能，还要看思想和精神。',
-      '别把身份全建立在与人的关系上，要寻找独立于关系之外的自我意识',
-      '反思能力可得知自己的他人的不同,及自己的道德价值观和伦理模式'
+      { text: '本质上，我们都生活在我们与内部体验或者外部事件的主观互动中。' },
+      { text: '人本主义认为人是多维的，不能只去剖析本能，还要看思想和精神。' },
+      { text: '灵性体验发生于与世界的关系中，这种关系是一个有生命的系统。' },
+      { text: '参与式方法认为要尊重文化、科学、宗教的差异，而不是进行统一' },
+      { text: '宇宙并非独立于我们而存在于别处，我们就身处宇宙之中——惠勒' },
+      { text: '别把身份全建立在与人的关系上，要寻找独立于关系之外的自我意识' },
+      { text: '反思能力可得知自己的他人的不同,及自己的道德价值观和伦理模式' },
+      { text: '多元交织身份意味着你我之间看着不同，但可建立某种奇特的联盟' },
+      { text: '权力和特权是相互关联的，但取决于交互关系和背景' },
+      { text: '当触碰到自己的羞愧，可把这些感受当成履行责任的指引' },
+      { text: '只有认真观察我们的投射，才能看到自己的阴影中有什么——荣格' },
+      { text: '改变自己对他人的看法，这是追求社会公正的一种方法' }
     ],
     avatarList: [],
+    colorList: [
+      '#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/01.jpg',
       text: '本质上，我们都生活在我们与内部体验或者外部事件的主观互动中。',
-      avatar: ''
+      avatar: '',
+      color: '#d78c4a'
     },
+    controlsTabs: [
+      { index: '0', text: '背景' },
+      { index: '1', text: '金句' },
+      { index: '3', text: '颜色' },
+      { index: '2', text: '头像' }
+    ],
     wxUserProfile: {},
-    numLength: 1
+    numLength: 1,
+    customText: '',
+    customTextVisible: false,
+    keyboardHeight: 0
   },
   lifetimes: {
     attached() {
-      // 获取微信头像
-      const localUserInfo = wx.getStorageSync('userInfo')
-      let wxUserProfile = localUserInfo ? JSON.parse(localUserInfo) : {}
-      if (wxUserProfile.avatarUrl) {
-        this.data.avatarList.push(wxUserProfile.avatarUrl)
-        this.setData({ wxUserProfile, avatarList: this.data.avatarList, 'controls.avatar': wxUserProfile.avatarUrl })
-      }
+      // 加载自定义字体
+      // wx.loadFontFace({ family: 'my', source: 'https://webapp-pub.ezijing.com/weapp/share/my.ttf' })
     }
   },
   /**
@@ -68,11 +108,19 @@ Component({
         }
         app.getUser().then(res => {
           res.realname = res.realname || res.nickname
+          // 系统头像
+          const avatarList = []
           if (res.avatar) {
-            !this.data.avatarList.includes(res.avatar) && this.data.avatarList.unshift(res.avatar)
-            this.setData({ avatarList: this.data.avatarList, 'controls.avatar': res.avatar })
+            avatarList.push({ name: '系统', url: res.avatar })
           }
-          this.setData({ user: res, show: true })
+          // 微信头像
+          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()
         })
       })
@@ -93,24 +141,32 @@ Component({
         data.chapter_name = data.chapter_name ? data.chapter_name.replace(/(\(|（)(.+)(\)|）)/, '') : ''
         data.chapter_name = data.chapter_name ? data.chapter_name.split(' ').pop() : ''
         data.chapter_name = data.chapter_name ? `“${data.chapter_name}”专题` : ''
+
         const numLength = data.used_day.toString().length
 
         // 两门课单独判断
         if (data.course_name.includes('整合心理学与批判性思考')) {
           const textList = [
-            '本质上，我们都生活在我们与内部体验或者外部事件的主观互动中。',
-            '人本主义认为人是多维的，不能只去剖析本能，还要看思想和精神。'
+            { text: '本质上，我们都生活在我们与内部体验或者外部事件的主观互动中。' },
+            { text: '人本主义认为人是多维的，不能只去剖析本能，还要看思想和精神。' },
+            { text: '灵性体验发生于与世界的关系中，这种关系是一个有生命的系统。' },
+            { text: '参与式方法认为要尊重文化、科学、宗教的差异，而不是进行统一' },
+            { text: '宇宙并非独立于我们而存在于别处，我们就身处宇宙之中——惠勒' }
           ]
-          this.setData({ textList, 'controls.text': textList[0] })
+          this.setData({ textList, 'controls.text': textList[0].text })
         }
         if (data.course_name.includes('自我探究')) {
           const textList = [
-            '别把身份全建立在与人的关系上，要寻找独立于关系之外的自我意识',
-            '反思能力可得知自己的他人的不同,及自己的道德价值观和伦理模式'
+            { text: '别把身份全建立在与人的关系上，要寻找独立于关系之外的自我意识' },
+            { text: '反思能力可得知自己的他人的不同,及自己的道德价值观和伦理模式' },
+            { text: '多元交织身份意味着你我之间看着不同，但可建立某种奇特的联盟' },
+            { text: '权力和特权是相互关联的，但取决于交互关系和背景' },
+            { text: '当触碰到自己的羞愧，可把这些感受当成履行责任的指引' },
+            { text: '只有认真观察我们的投射，才能看到自己的阴影中有什么——荣格' },
+            { text: '改变自己对他人的看法，这是追求社会公正的一种方法' }
           ]
-          this.setData({ textList, 'controls.text': textList[0] })
+          this.setData({ textList, 'controls.text': textList[0].text })
         }
-
         this.setData({ share: Object.assign(data, { lecturer }), numLength })
         return res
       })
@@ -132,7 +188,7 @@ Component({
           const userInfo = res.userInfo
           imageTransfer({ source: userInfo.avatarUrl }).then(res => {
             userInfo.avatarUrl = res
-            this.data.avatarList.push(userInfo.avatarUrl)
+            this.data.avatarList.push({ name: '微信', url: userInfo.avatarUrl })
             this.setData({ wxUserProfile: userInfo, avatarList: this.data.avatarList })
             wx.setStorageSync('userInfo', JSON.stringify(userInfo))
           })
@@ -190,12 +246,17 @@ Component({
     // 选择金句
     onSelectText(e) {
       const { item } = e.currentTarget.dataset
-      this.setData({ 'controls.text': item })
+      this.setData({ 'controls.text': item.text })
     },
     // 选择头像
     onSelectAvatar(e) {
       const { item } = e.currentTarget.dataset
-      this.setData({ 'controls.avatar': item })
+      this.setData({ 'controls.avatar': item.url })
+    },
+    // 选择颜色
+    onSelectColor(e) {
+      const { item } = e.currentTarget.dataset
+      this.setData({ 'controls.color': item })
     },
     // 控制栏显示隐藏
     toggleControls() {
@@ -204,6 +265,36 @@ Component({
     // 关闭预览
     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)
+      this.setData({ textList: this.data.textList })
     }
   }
 })

learnOnline/components/share/index.json

 {
   "component": true,
   "usingComponents": {
-    "wxml-to-canvas": "wxml-to-canvas"
+    "wxml-to-canvas": "wxml-to-canvas",
+    "van-icon": "@vant/weapp/icon/index"
   }
 }

learnOnline/components/share/index.wxml

@@ -9,11 +9,11 @@
         class="bg"
       ></image>
       <image
-        src="https://webapp-pub.ezijing.com/weapp/share/cover.png?x-oss-process=image/resize,m_fill,h_924,w_534"
+        src="https://webapp-pub.ezijing.com/weapp/share/new_cover.png?x-oss-process=image/resize,m_fill,h_924,w_534"
         mode="aspectFill"
         class="cover"
       ></image>
-      <view class="main">
+      <view class="main" style="color:{{ controls.color }};">
         <view class="teacher">{{ share.lecturer.lecturer_name }}</view>
         <view class="course">{{ share.course_name }}</view>
         <view class="user">
@@ -21,20 +21,26 @@
           <view class="nickname">{{ share.personal_name }}</view>
         </view>
         <view class="chapter">{{ share.chapter_name }}</view>
-        <view class="text">{{ controls.text }}</view>
+        <view class="title">知识获得者</view>
+        <view class="text" style="border-color:{{ controls.color }};">{{ controls.text }}</view>
         <view class="footer">
           <view class="footer-left">
-            <view class="tips">
+            <view class="box">
               <text>我已坚持学习</text>
-              <text class="num" style="width:{{ numLength * 11 }}px;"> {{ share.used_day }} </text><text>天</text>
+              <view class="num" style="color:{{ controls.color }};width:{{ numLength * 11 }}px;">
+                {{ share.used_day }}
+              </view>
+              <text>天</text>
             </view>
-            <view>我离学位殿堂又近了一步</view>
+            <view class="tips">我离学位殿堂又近了一步</view>
           </view>
           <image src="{{ qrcode }}" class="footer-right"></image>
         </view>
+        <view class="qrcode-tips" style="background-color:{{ controls.color }};">扫码和我一起学习吧</view>
       </view>
     </view>
   </view>
+
   <!-- 控制栏 -->
   <view class="controls {{ hasControls ? 'is-show' : '' }}">
     <view class="buttons">
@@ -59,15 +65,14 @@
     </view>
     <view class="controls-main">
       <view class="controls-tabs">
-        <view class="controls-tab {{ controls.active === '0' ? 'is-active' : '' }}" data-index="0" bindtap="onTabChange"
-          >背景</view
-        >
-        <view class="controls-tab {{ controls.active === '1' ? 'is-active' : '' }}" data-index="1" bindtap="onTabChange"
-          >金句</view
-        >
-        <view class="controls-tab {{ controls.active === '2' ? 'is-active' : '' }}" data-index="2" bindtap="onTabChange"
-          >头像</view
-        >
+        <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 }}">
         <!-- 背景 -->
@@ -89,36 +94,75 @@
 
         <!-- 金句 -->
         <view class="controls-content" hidden="{{ controls.active !== '1' }}">
+          <!-- 自定义金句 -->
+          <view class="custom-text-button" bindtap="showCustomText">自定义金句</view>
           <view
-            class="controls-text-item  {{ controls.text === item ? 'is-active' : '' }}"
+            class="controls-text-item  {{ controls.text === item.text ? 'is-active' : '' }}"
             wx:for="{{ textList }}"
-            wx:key="*this"
+            wx:key="text"
             data-item="{{ item }}"
             bindtap="onSelectText"
-            >{{ item }}</view
-          >
+            >{{ item.text }}
+            <view class="custom-text-remove" data-index="{{ index }}" bindtap="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 ? 'is-active' : '' }}"
+            class="controls-avatar-item {{ controls.avatar === item.url ? 'is-active' : '' }}"
             wx:for="{{ avatarList }}"
-            wx:key="*this"
+            wx:key="url"
             data-item="{{ item }}"
             bindtap="onSelectAvatar"
           >
-            <image src="{{ item }}" mode="aspectFill" class="image"></image>
+            <image src="{{ item.url }}" mode="aspectFill" class="image"></image>
+            <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>
@@ -129,6 +173,5 @@
     <view class="button button-default" bindtap="extraImage">保存图片到相册</view>
     <view class="tips">分享图片到朋友圈</view>
     <view class="tips">最高可获得5000朵紫荆花</view>
-    <!-- <view class="button button-primary"><text></text><text>最高可获得5000朵紫荆花</text></view> -->
   </view>
 </view>

learnOnline/components/share/index.wxss

@@ -40,19 +40,23 @@
   top: 120px;
   /* right: 41px; */
   width: 220px;
+  color: #d78c4a;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 .teacher {
+  width: 220px;
   font-size: 13px;
   font-weight: bold;
-  color: #d78c4a;
   line-height: 16px;
 }
 .course {
+  width: 220px;
   font-size: 13px;
   font-weight: bold;
-  color: #d78c4a;
   line-height: 16px;
-  margin-left: -5px;
+  margin-left: -10px;
 }
 .user {
   margin-top: 10px;
@@ -71,13 +75,10 @@
   margin-top: 2px;
   font-size: 15px;
   font-weight: bold;
-  color: #d78c4a;
   line-height: 1;
 }
 .chapter {
   margin-top: 6px;
-  margin-left: 8px;
-  margin-right: 8px;
   height: 32px;
   font-size: 14px;
   font-weight: bold;
@@ -86,24 +87,36 @@
   text-align: center;
   overflow: hidden;
 }
+.title {
+  font-family: 'my';
+  margin-top: 9px;
+  height: 24px;
+  font-size: 24px;
+  line-height: 24px;
+  text-align: center;
+}
 .text {
-  margin-top: 56px;
-  margin-left: 12px;
+  margin-top: 14px;
   width: 200px;
-  height: 36px;
+  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;
 }
 .footer {
   display: flex;
   align-items: center;
-  margin-top: 15px;
-  margin-left: 15px;
-  margin-right: 15px;
+  margin-top: 10px;
+  width: 190px;
 }
 .footer-left {
   flex: 1;
@@ -111,22 +124,39 @@
   color: #1a1a1a;
   line-height: 1;
 }
-.footer-left .tips {
+.footer-left .box {
   display: flex;
   align-items: flex-end;
-  height: 18px;
-  margin-bottom: 6px;
+  height: 20px;
+}
+.footer-left .tips {
+  height: 20px;
+  line-height: 20px;
 }
 .num {
   font-size: 17px;
-  color: #d78c4a;
   font-weight: bold;
+  color: #d78c4a;
   text-align: center;
+  margin-left: 2px;
+  margin-right: 2px;
 }
 .footer-right {
   width: 50px;
   height: 50px;
 }
+.qrcode-tips {
+  width: 130px;
+  height: 15px;
+  margin-top: 6px;
+  background: #d78c4a;
+  border-radius: 2px;
+  font-size: 11px;
+  color: #ffff;
+  line-height: 15px;
+  text-align: center;
+}
+
 .controls {
   position: relative;
   padding-bottom: env(safe-area-inset-bottom);
@@ -221,6 +251,7 @@ button::after {
   overflow: hidden;
 }
 .controls-text-item {
+  position: relative;
   margin: 0 15px;
   flex: 0 0 228px;
   width: 228px;
@@ -230,12 +261,14 @@ button::after {
   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;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
 }
 .controls-avatar-item {
   position: relative;
@@ -255,6 +288,23 @@ button::after {
   line-height: 18px;
   box-sizing: border-box;
 }
+.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%;
@@ -320,3 +370,41 @@ button::after {
   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

@@ -2,7 +2,7 @@ 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/cover.png" class="cover"></image>
+    <image src="https://webapp-pub.ezijing.com/weapp/share/new_cover.png" class="cover"></image>
     <view class="main">
       <text class="teacher">${data.share.lecturer.lecturer_name}</text>
       <text class="course">${data.share.course_name}</text>
@@ -11,7 +11,14 @@ const wxml = function (data) {
         <view><text class="nickname">${data.share.personal_name}</text></view>
       </view>
       <text class="chapter">${data.share.chapter_name}</text>
-      <text class="text">${data.controls.text}</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>
       <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>
@@ -19,6 +26,7 @@ const wxml = function (data) {
         </view>
         <image src="${data.qrcode}" class="footer-right"></image>
       </view>
+      <view class="qrcode-tips-wrapper"><text class="qrcode-tips">扫码和我一起学习吧</text></view>
     </view>
   </view>`
 }
@@ -47,26 +55,28 @@ const style = function (data) {
       left: 40,
       top: 120,
       width: 220,
-      height: 300
+      height: 300,
+      alignItems: 'center'
     },
     teacher: {
+      width: 220,
       height: 16,
       fontSize: 13,
       fontWeight: 'bold',
       lineHeight: 16,
-      color: '#D78C4A'
+      color: data.controls.color
     },
     course: {
-      marginLeft: -5,
+      marginLeft: -10,
+      width: 220,
       height: 16,
       fontSize: 13,
       fontWeight: 'bold',
       lineHeight: 16,
-      color: '#D78C4A'
+      color: data.controls.color
     },
     user: {
       marginTop: 10,
-      flexDirection: 'column',
       alignItems: 'center'
     },
     avatar: {
@@ -81,7 +91,7 @@ const style = function (data) {
       fontSize: 15,
       fontWeight: 'bold',
       lineHeight: 16,
-      color: '#D78C4A',
+      color: data.controls.color,
       textAlign: 'center'
     },
     chapter: {
@@ -92,23 +102,41 @@ const style = function (data) {
       fontWeight: 'bold',
       color: '#1A1A1A',
       lineHeight: 16,
-      textAlign: 'center'
+      textAlign: 'center',
+      verticalAlign: 'middle'
     },
-    text: {
-      marginTop: 56,
-      marginLeft: 12,
+    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: 36,
+      height: 1,
+      backgroundColor: data.controls.color
+    },
+    text: {
+      height: 48,
       fontSize: 13,
       fontWeight: 'bold',
       fontStyle: 'italic',
       color: '#1A1A1A',
-      lineHeight: 18
+      lineHeight: 18,
+      verticalAlign: 'middle',
+      textAlign: 'center'
     },
     footer: {
-      marginTop: 15,
-      marginLeft: 15,
-      marginRight: 15,
+      marginTop: 10,
       width: 190,
       height: 50,
       flexDirection: 'row',
@@ -116,39 +144,35 @@ const style = function (data) {
     },
     footerLeft: {
       width: 140,
-      height: 50,
-      justifyContent: 'center'
+      height: 40
     },
     box: {
-      marginBottom: 6,
       width: 140,
       height: 20,
+      lineHeight: 20,
       flexDirection: 'row',
       alignItems: 'flex-end'
     },
     t1: {
-      marginiTop: 8,
       width: 72,
-      height: 12,
+      height: 20,
       fontSize: 12,
-      lineHeight: 12,
       color: '#1A1A1A'
     },
     t2: {
+      marginLeft: 2,
+      marginRight: 2,
       width: numLength * 11,
-      height: 17,
+      height: 20,
       fontSize: 17,
       fontWeight: 'bold',
-      lineHeight: 17,
-      color: '#D78C4A',
+      color: data.controls.color,
       textAlign: 'center'
     },
     t3: {
-      marginiTop: 8,
       width: 12,
-      height: 12,
+      height: 20,
       fontSize: 12,
-      lineHeight: 12,
       color: '#1A1A1A'
     },
     tips: {
@@ -161,6 +185,19 @@ const style = function (data) {
     footerRight: {
       width: 50,
       height: 50
+    },
+    qrcodeTipsWrapper: {
+      marginTop: 6,
+      width: 130,
+      borderRadius: 2,
+      backgroundColor: data.controls.color
+    },
+    qrcodeTips: {
+      height: 15,
+      fontSize: 11,
+      color: '#FFFFFF',
+      lineHeight: 15,
+      textAlign: 'center'
     }
   }
 }

learnOnline/project.config.json

@@ -32,9 +32,9 @@
     "packNpmRelationList": [],
     "minifyWXSS": true,
     "disableUseStrict": false,
+    "minifyWXML": true,
     "showES6CompileOption": false,
-    "useCompilerPlugins": false,
-    "minifyWXML": true
+    "useCompilerPlugins": false
   },
   "compileType": "miniprogram",
   "libVersion": "2.21.0",