解决冲突

app.wxss

@@ -7,7 +7,7 @@ page {
 .container {
   height: 100%;
   box-sizing:border-box;
-  padding-top: 80rpx;
+  padding-top: 70rpx;
  
 } 
 ::-webkit-scrollbar{

component/hot/hot.js

@@ -1,4 +1,7 @@
 import httpRequestApi from '../../utils/APIClient';
+import {
+  formatDate
+} from '../../utils/util';
 export const hotInit = (that) => {
   that.setData({
       hotData: {
@@ -112,24 +115,28 @@ export const hotInit = (that) => {
       pageSize
     ).success((res) => {
       console.log(res)
-        const recommendRes = res.data.data.list;
-        // const recommendWorks = [];
-        recommendRes.forEach(item => {
-          const temp = {};
-          temp.title = item.userRead.title;
-          temp.summary = item.userRead.summary;
-          temp.img = item.userRead.iconImg;
-          temp.plays = item.userRead.playAmount ? item.userRead.playAmount : 0;
-          temp.likes = item.userRead.likeAmount ? item.userRead.likeAmount : 0;
-          temp.classId = item.userRead.id;
-          // recommendWorks.push(temp);
-          that.data.hotData.hotWorks.push(temp);
-        });
-        const hotStr = 'hotData.hotWorks'
-        that.setData({
-          [hotStr]: that.data.hotData.hotWorks,
-          recommendTotalNo: res.data.data.totalNo
-        })
+      const recommendRes = res.data.data.list;
+      // const recommendWorks = [];
+      recommendRes.forEach(item => {
+        const temp = {};
+        temp.title = item.userRead.title;
+        temp.summary = item.userRead.summary;
+        temp.img = item.userRead.iconImg;
+        temp.plays = item.userRead.playAmount ? item.userRead.playAmount : 0;
+        temp.likes = item.userRead.likeAmount ? item.userRead.likeAmount : 0;
+        temp.classId = item.userRead.id;
+        temp.time = formatDate(item.userRead.gmtCreated, 3);
+        temp.avatar = item.user.avatar;
+        temp.avatar = item.user.avatar;
+        temp.nickName = item.user.wechatName;
+        // recommendWorks.push(temp);
+        that.data.hotData.hotWorks.push(temp);
+      });
+      const hotStr = 'hotData.hotWorks'
+      that.setData({
+        [hotStr]: that.data.hotData.hotWorks,
+        recommendTotalNo: res.data.data.totalNo
+      })
     })
   }
 

component/hot/hot.wxml

@@ -2,15 +2,16 @@
     <swiper indicator-dots="{{hotData.indicatorDots}}" autoplay="{{hotData.autoplay}}" interval="{{hotData.interval}}" duration="{{hotData.duration}}" circular="{{hotData.circular}}">
         <block wx:for="{{hotData.banner}}" wx:key="{{index}}">
             <swiper-item>
-                <image src="{{item.url}}" data-type="{{item.type}}" data-id="{{item.id}}" bindtap="bannerTap" class="slide-image" width="750" height="318" />
+                <image src="{{item.url}}" data-type="{{item.type}}" data-id="{{item.id}}" class="slide-image" width="750" height="318" />
             </swiper-item>
         </block>
     </swiper>
     <view class="searchSection">
         <input bindinput="inputHandler" bindconfirm="searchHandler" placeholder="{{hotData.hotSearch}}" placeholder-style="text-indent:20rpx" confirm-type="search"></input>
-        <button bindtap="searchHandler" class="searchBtn" plain="{{true}}">
-            <icon type="search" size="17" />
-        </button>
+        <view bindtap="searchHandler" class="searchBtn">
+            <!-- <icon type="search" size="14" /> -->
+            <image src="../../static/image/search_new.png" alt="" />
+        </view>
         <view class="allBooks" bindtap="goToBooks">全部课本</view>
         <!-- <form bindsubmit="submitTest" report-submit="{{true}}" class="allBooks">
             <button formType="submit">Reset</button>
@@ -20,50 +21,53 @@
         <view class="title">
             <view class="leftWrapper">
                 <image class="recommendTag" src="../../static/image/course.png" alt="" />
-                <text>本周课程推荐</text>
+                <text>本周推荐</text>
             </view>
             <view class="moreBtn" bindtap="openMore">更多></view>
         </view>
         <view class="hotWares" style="flex-direction:row;">
             <view wx:for="{{hotData.recommend}}" wx:key="{{index}}" class="hotWareCard" bindtap="openClass" data-classId="{{item.classId}}" data-title="{{item.title}}">
                 <image class="wareCardImg" src="{{item.img}}" />
-                <text class="wareCardTitle">{{item.title}}</text>
-                <view class="bottomData">
+                <view class="titleSummary">
+                    <text class="wareCardTitle">{{item.title}}</text>
                     <text class="wareCardTip">{{item.summary}}</text>
-                    <!-- <view class="wareCardPlays">
-                        <image class="wareCardPlaysImg" src="../../static/image/hotPlays.png" />
-                        <text>{{item.plays}}</text>
-                    </view>
-                    <view class="wareCardLikes">
-                        <image class="wareCardLikesImg" src="../../static/image/like.png" />
-                        <text>{{item.likes}}</text>
-                    </view> -->
                 </view>
             </view>
         </view>
     </view>
-    <view class="hotSection">
+    <view class="recommdSection">
         <view class="title">
             <view class="leftWrapper">
                 <image src="../../static/image/hot_recommend.png" alt="" />
-                <text>人气推荐</text>
+                <text>热门作品</text>
             </view>
         </view>
         <view class="hotWares">
-            <view wx:for="{{hotData.hotWorks}}" wx:key="{{index}}" class="hotWareCard" bindtap="openWorks" data-readId="{{item.classId}}" data-title="{{item.title}}">
-                <image class="wareCardImg" src="{{item.img}}" />
-                <text class="wareCardTitle">{{item.title}}</text>
-                <view class="bottomData">
-                    <text class="wareCardTip">{{item.summary}}</text>
-                    <view class="wareCardPlays">
-                        <image class="wareCardPlaysImg" src="../../static/image/hotPlays.png" />
-                        <text>{{item.plays}}</text>
+            <view wx:for="{{hotData.hotWorks}}" wx:key="{{index}}" class="worksCard" bindtap="openWorks" data-readId="{{item.classId}}" data-title="{{item.title}}">
+                <view class="topData">
+                    <view class="worksLeft">
+                        <image class="authorAvatar" src="{{item.avatar}}" />
+                        <view class="worksInfo">
+                            <view class="authorName">{{item.nickName}}</view>
+                            <view class="time">{{item.time}}</view>
+                        </view>
                     </view>
-                    <view class="wareCardLikes">
-                        <image class="wareCardLikesImg" src="../../static/image/like.png" />
-                        <text>{{item.likes}}</text>
+                    <view class="numberInfo">
+                        <view class="wareCardPlays">
+                            <image class="wareCardPlaysImg" src="../../static/image/hotPlays.png" />
+                            <text>{{item.plays}}</text>
+                        </view>
+                        <view class="wareCardLikes">
+                            <image class="wareCardLikesImg" src="../../static/image/like.png" />
+                            <text>{{item.likes}}</text>
+                        </view>
                     </view>
                 </view>
+                <image class="wareCardImg" src="{{item.img}}" />
+                <view class="titleSummary">
+                    <text class="wareCardTitle">{{item.title}}</text>
+                    <text class="wareCardTip">{{item.summary}}</text>
+                </view>
             </view>
         </view>
     </view>

component/hot/hot.wxss

@@ -1,5 +1,6 @@
 swiper {
-    margin-top: 10rpx;
+    /* margin-top: 10rpx; */
+    padding-top: 20rpx;
     background: #fff;
     display: block;
     width: 100%;
@@ -24,7 +25,7 @@ swiper {
 
 .searchSection input {
     display: flex;
-    width: 536rpx;
+    width: 518rpx;
     height: 56rpx;
     border-radius: 10rpx;
     background: #F0F1F5;
@@ -38,21 +39,23 @@ swiper {
     /* background: #fff; */
     position: absolute;
     z-index: 2;
-    right: 200rpx;
+    right: 220rpx;
     width: 56rpx;
     height: 56rpx;
     border: 1rpx solid rgba(255, 255, 255, 0);
 }
 
-.searchSection .searchBtn icon {
-    position: absolute;
-    top: 10rpx;
-    right: 15rpx;
+.searchSection .searchBtn image {
+    display: block;
+    width: 34rpx;
+    height: 34rpx;
+    margin: 10rpx auto;
+
 }
 
 .searchSection .allBooks {
     font-size: 32rpx;
-    color: #61ca54;
+    color: #41bb32;
     font-family: PingFangSC-regular;
     width: 128rpx;
     margin-left: 56rpx;
@@ -61,7 +64,8 @@ swiper {
 .hotSection {
     width: 100%;
     /* height: 50rpx; */
-    background: #fff;
+    /* background: #fff; */
+    background: rgba(240, 241, 245, 1);
     margin-top: 10rpx;
 }
 
@@ -69,7 +73,7 @@ swiper {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 30rpx 22rpx 20rpx;
+    padding: 10rpx 22rpx 20rpx;
 
 }
 
@@ -94,11 +98,11 @@ swiper {
     width: 224rpx;
     letter-spacing: 4rpx;
     height: 40rpx;
-    margin-left: 12rpx;
+    margin-left: 16rpx;
     font-size: 32rpx;
     line-height: 40rpx;
     font-family: PingFangSC-regular;
-    color: #414141;
+    color: #444;
 }
 
 .hotSection .title .moreBtn {
@@ -107,19 +111,23 @@ swiper {
     width: 80rpx;
     height: 38rpx;
     font-size: 28rpx;
-    color: #6e6e6e;
+    color: #444;
 }
 
 .hotWares {
     display: flex;
     flex-wrap: wrap;
+    /* background: #e8e8e8; */
 }
 
 .hotSection .hotWares .hotWareCard {
     position: relative;
     overflow: hidden;
-    width: 704rpx;
-    height: 402rpx;
+    width: 720rpx;
+    height: 374rpx;
+    background: #fff;
+    /* padding: 26rpx; */
+    border-radius: 12rpx;
     /* margin: 0 0 18rpx 16rpx; */
     margin: 0 auto 20rpx;
     /* box-shadow: 0 8rpx 6rpx 0 rgba(0, 0, 0, .28); */
@@ -128,12 +136,18 @@ swiper {
 
 
 .hotWareCard .wareCardImg {
-    width: 100%;
-    height: 290rpx;
+    display: block;
+    width: 662rpx;
+    height: 272rpx;
+    margin: 26rpx auto 0;
     border-radius: 20rpx;
 }
 
-
+.hotWareCard .titleSummary {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 12rpx;
+}
 
 .hotWareCard .wareCardTitle {
     /* margin: 0 auto; */
@@ -144,6 +158,7 @@ swiper {
     color: #414141;
     font-size: 32rpx;
     letter-spacing: 4rpx;
+    margin-left: 28rpx;
     font-family: MicrosoftYaHei;
 }
 
@@ -169,7 +184,7 @@ swiper {
     height: 40rpx;
     display: block;
     text-align: left;
-    color: #414141;
+    color: #444;
     font-size: 24rpx;
 }
 
@@ -290,4 +305,195 @@ swiper {
     margin-left: 4rpx;
     color: #FF9800;
     font-size: 24rpx;
+}
+
+/* // 热门推荐 */
+.recommdSection {
+    width: 100%;
+    /* height: 50rpx; */
+    /* background: #fff; */
+    background: rgba(240, 241, 245, 1);
+    /* margin-top: 10rpx; */
+}
+
+.recommdSection .title {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 22rpx 20rpx;
+
+}
+
+.recommdSection .leftWrapper {
+    display: flex;
+    align-items: center;
+
+}
+
+.recommdSection .title image {
+    width: 54rpx;
+    height: 60rpx;
+    margin-left: 14rpx;
+}
+
+.recommdSection .title .recommendTag {
+    width: 38rpx;
+    height: 34rpx;
+}
+
+.recommdSection .title text {
+    width: 224rpx;
+    letter-spacing: 4rpx;
+    height: 40rpx;
+    margin-left: 16rpx;
+    font-size: 32rpx;
+    line-height: 40rpx;
+    font-family: PingFangSC-regular;
+    color: #444;
+}
+
+.recommdSection .title .moreBtn {
+    display: block;
+    float: right;
+    width: 80rpx;
+    height: 38rpx;
+    font-size: 28rpx;
+    color: #6e6e6e;
+}
+
+.hotWares {
+    display: flex;
+    flex-wrap: wrap;
+    /* background: #e8e8e8; */
+}
+
+.recommdSection .hotWares .worksCard {
+    position: relative;
+    overflow: hidden;
+    width: 720rpx;
+    height: 476rpx;
+    background: #fff;
+    /* padding: 26rpx; */
+    border-radius: 12rpx;
+    /* margin: 0 0 18rpx 16rpx; */
+    margin: 0 auto 20rpx;
+    /* box-shadow: 0 8rpx 6rpx 0 rgba(0, 0, 0, .28); */
+}
+
+
+
+.worksCard .wareCardImg {
+    display: block;
+    width: 662rpx;
+    height: 272rpx;
+    margin: 12rpx auto 0;
+    border-radius: 20rpx;
+}
+
+.worksCard .titleSummary {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 12rpx;
+}
+
+.worksCard .wareCardTitle {
+    /* margin: 0 auto; */
+    width: 100%;
+    height: 46rpx;
+    display: block;
+    /* text-align: left; */
+    color: #414141;
+    font-size: 32rpx;
+    letter-spacing: 4rpx;
+    margin-left: 28rpx;
+    font-family: MicrosoftYaHei;
+}
+
+.worksCard .topData {
+    height: 92rpx;
+    margin-top: 14rpx;
+    display: flex;
+    flex-direction: row;
+    /* justify-content: space-between; */
+    align-items: center;
+}
+
+.worksLeft {
+    display: flex;
+    flex-direction: row;
+    flex:1;
+}
+
+.worksLeft .worksInfo .authorName {
+    color: #444444;
+    font-size: 32rpx;
+    margin-top: 8rpx;
+
+}
+
+.worksLeft .worksInfo .time {
+    color: #686868;
+    font-size: 28rpx;
+
+}
+
+.worksCard .topData .wareCardPlays {
+    width: 100rpx;
+    /* margin-left: 270rpx; */
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.worksCard .topData .authorAvatar {
+    width: 92rpx;
+    height: 92rpx;
+    margin: 0 22rpx 0 22rpx;
+    display: block;
+
+    border-radius: 50%;
+}
+.topData .numberInfo{
+    display: flex;
+    flex-direction: column;
+}
+.worksCard .wareCardTip {
+    width: 178rpx;
+    height: 40rpx;
+    display: block;
+    text-align: left;
+    color: #444;
+    font-size: 24rpx;
+}
+
+.worksCard .wareCardPlays .wareCardPlaysImg {
+    width:20rpx;
+height:22rpx;
+margin-right: 6rpx;
+}
+
+.worksCard .wareCardPlays text {
+    margin-left: 4rpx;
+    color: #5e5e5e;
+    font-size: 22rpx;
+}
+
+.worksCard .wareCardLikes {
+    width: 100rpx;
+    margin-right: 18rpx;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.worksCard .wareCardLikes .wareCardLikesImg {
+    width:26rpx;
+height:24rpx;
+margin-right: 6rpx;
+}
+
+.worksCard .wareCardLikes text {
+    margin-left: 4rpx;
+    color: #FF9800;
+    font-size: 24rpx;
 }

component/share/share.js

@@ -67,8 +67,7 @@ Component({
               console.log('下载content成功1')
               console.log(res.path)
               //res.path是网络图片的本地地址
-              ctx.drawImage(res.path, 213, 445, 126, 126);
-              // ctx.drawImage('../../../static/image/works_poster.png', 0, 0, 375, 667); //插入图片  
+              ctx.drawImage(res.path,127, 423, 121, 121);
 
 
 
@@ -77,8 +76,8 @@ Component({
                 wx.canvasToTempFilePath({
                   x: 0,
                   y: 0,
-                  width: 750,
-                  height: 1334,
+                  width: 375,
+                  height: 667,
                   // destWidth: 370,
                   destWidth: 1500,
                   // destHeight: 507,
@@ -243,40 +242,45 @@ Component({
           title: '海报生成中',
           mask: true
         })
-        console.log('开始画背景')
-        // ctx.rect(0, 0, 375, 667)
-        // ctx.setFillStyle('#fff')
-       
-        ctx.drawImage('../../../static/image/works_poster.png', 0, 0, 1500, 2668,0,0,750,1334); //插入图片  
-
-        // ctx.fill()
+        if (this.data.shareType === 'works') {
+          ctx.drawImage('../../../static/image/works_poster.png', 0, 0, 1500, 2668,0,0,750,1334); //插入图片  
+        } else {
+          ctx.drawImage('../../../static/image/group_poster.jpg', 0, 0, 1500, 2668,0,0,750,1334); //插入图片  
+        }
         ctx.save()
         ctx.beginPath()
-        // ctx.setFillStyle('#fff')
         ctx.fill()
-      
         resolve();
       });
       return background;
     },
     // 画头像和作者||发起者
     drawAuthor: function (ctx) {
-
       let author = new Promise((resolve, reject) => {
-        // resolve(() => {
-        console.log('开始画头像')
-        console.log(this.data.avatar)
-        ctx.arc(51.5, 200.5, 35.5, 0, 2 * Math.PI, false) 
-        ctx.clip(); //剪切头像区域
-        ctx.drawImage(this.data.avatar, 16, 150, 87, 87); //插入图片  
-        // ctx.fill()
-        ctx.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 可以继续绘制
-        ctx.setFontSize(18)
-        // ctx.setFillStyle('#535353')
-        ctx.setFillStyle('#535353')
-        ctx.fillText(this.data.author, 98, 180)
-        
-        // })
+        if (this.data.shareType === 'works') {
+            ctx.arc(187.5, 171, 36, 0, 2 * Math.PI, false) 
+            ctx.clip(); //剪切头像区域
+            ctx.fill('red')
+            ctx.drawImage(this.data.avatar, 157, 135, 72, 72); //插入图片  
+            ctx.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 可以继续绘制
+            ctx.setFontSize(18)
+            ctx.setFillStyle('#444444')
+            ctx.fillText(this.data.author, (375 - ctx.measureText(this.data.author).width) / 2, 232)
+            ctx.setFontSize(16)
+            ctx.setFillStyle('#ff9209')
+            ctx.fillText('播音主持特长生', (375 - ctx.measureText('播音主持特长生').width) / 2, 253)
+          } else {
+            ctx.arc(52, 58, 36, 0, 2 * Math.PI, false) 
+            ctx.clip(); //剪切头像区域
+            ctx.fill('red')
+            ctx.drawImage(this.data.avatar, 15, 22, 72, 72); //插入图片  
+            ctx.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 可以继续绘制
+            ctx.setFontSize(20)
+            ctx.setFillStyle('#fff')
+            ctx.fillText(this.data.author, 97, 49)
+            ctx.setFontSize(22)
+            ctx.fillText('邀您一起来拼团', 97, 77)  
+          }
         resolve();
       })
       return author;
@@ -286,24 +290,30 @@ Component({
       let works = new Promise((resolve, reject) => {
         // resolve(() => {
         console.log('开始画内容')
+        ctx.setFillStyle('#fff')
+        ctx.setFontSize(18)
+        ctx.fillText('小学语文 最新全国统一教材', (375 - ctx.measureText('小学语文 最新全国统一教材').width) / 2, 55);
+        ctx.setFontSize(30)
+        ctx.fillText('课文朗读 从未如此有趣', (375 - ctx.measureText('课文朗读 从未如此有趣').width) / 2 ,103);
         ctx.setFontSize(16)
-        ctx.setFillStyle('#000')
-        ctx.fillText('已使出洪荒之力，声情并茂的为课文', 90 ,198)
-        ctx.fillText(`配了一段惊世之作`,  90, 240)
+        ctx.setFillStyle('#444')
+        ctx.fillText('使出洪荒之力，声情并茂地朗诵了', (375 - ctx.measureText('使出洪荒之力，声情并茂地朗诵了').width) / 2 ,297)
+        // ctx.fillText(`配了一段惊世之作`,  90, 240)
         // ctx.setFontSize(16)
         // ctx.setFillStyle('red')
-        ctx.fillText(`《${this.data.title}》`, 90, 220)
+        ctx.fillText(`《${this.data.title}》`, (375 - ctx.measureText(`《${this.data.title}》`).width) / 2, 322)
         
-        ctx.drawImage('../../../static/image/reading_poster.jpg', 11, 276, 351, 145);
+        // ctx.drawImage('../../../static/image/reading_poster.jpg', 11, 276, 351, 145);
         ctx.setFontSize(16)
         ctx.setFillStyle('#000')
         // ctx.setFillStyle('#000')
         ctx.setFontSize(16)
-        ctx.setFillStyle('#c90000')
-        ctx.fillText('为TA疯狂打CALL', 12, 495)
-        ctx.setFontSize(14)
+        // ctx.setFillStyle('#c90000')
+        ctx.setFillStyle('#ff9209')
+        ctx.fillText('为TA疯狂打CALL 快去听听', (375 - ctx.measureText('为TA疯狂打CALL 快去听听').width) / 2 , 401)
+        ctx.setFontSize(12)
         ctx.setFillStyle('#666666')
-        ctx.fillText('长按识别二维码，快去听听', 12, 530)
+        ctx.fillText('长按识别二维码', (375 - ctx.measureText('长按识别二维码').width) / 2, 574)
         // })
         resolve();
       })
@@ -313,34 +323,27 @@ Component({
     // 分享团购的主体内容
     drawGroupGut: function (ctx) {
       let group = new Promise((resolve, reject) => {
-        //resolve(() => {
-        ctx.fillText('郎朗读书声是世上最美的声音', 50, 138)
-        ctx.drawImage(this.data.iconImg, 9, 205, 352, 145);
-        ctx.drawImage('../../../static/groupImg/Rectangle 41.png', 134, 358, 59, 20);
-        ctx.setFontSize(14)
-        // ctx.setFillStyle('#fff')
-        ctx.fillText(`${this.data.groupPurchaseInfo.headcount}人团`, 149, 373)
-        ctx.setFontSize(16)
+        ctx.setFontSize(28)
+        ctx.setFillStyle('#ff670d')
+        ctx.fillText('小学语文 朗读配音', (375 - ctx.measureText('小学语文 朗读配音').width) / 2 , 152)
+          ctx.setFontSize(16)
+        ctx.setFillStyle('#444')
+        ctx.fillText('郎朗读书声，是世上最美的声音', (375 - ctx.measureText('郎朗读书声，是世上最美的声音').width) / 2 ,351)
+        ctx.drawImage(this.data.iconImg, 12, 176, 351, 145);
+        // ctx.drawImage('../../../static/groupImg/Rectangle 41.png', 134, 358, 59, 20);
+        ctx.setFontSize(17)
         ctx.setFillStyle('#A95A00')
-        ctx.fillText('原价', 20, 373)
+        ctx.fillText(`${this.data.groupPurchaseInfo.headcount}人团`,  96, 412)
+        ctx.setFontSize(19)
+        ctx.fillText('每人仅需', 151, 412)
+        // ctx.fillText('元', 120, 495)
+        ctx.setFontSize(28)
         ctx.setStrokeStyle('red')
-        ctx.moveTo(64, 368)
-        ctx.lineTo(114, 368)
-        ctx.stroke()
-        ctx.fillText(`￥${parseFloat(this.data.groupPurchaseInfo.originPrice / 100).toFixed(2)}元`, 54, 373)
-        ctx.setFontSize(18)
-        ctx.fillText('团购价仅需', 20, 403)
-        ctx.fillText('元', 185, 403)
-        ctx.setFontSize(20)
         ctx.setFillStyle('red')
-        ctx.fillText(`￥${parseFloat(this.data.groupPurchaseInfo.price / 100).toFixed(2)}`, 115, 403)
-        ctx.drawImage('../../../static/groupImg/share_bottom.png', 3, 419, 370, 192);
-        ctx.setFontSize(20)
-        ctx.setFillStyle('red')
-        ctx.fillText('名额有限，售完截止', 9, 467)
-        ctx.setFontSize(18)
-        ctx.setFillStyle('#000')
-        ctx.fillText('长按识别二维码参加团购', 9, 493)
+        ctx.fillText(`${parseFloat(this.data.groupPurchaseInfo.price / 100).toFixed(2)}元`, 235, 415)
+        ctx.setFontSize(12)
+        ctx.setFillStyle('#666666')
+        ctx.fillText('长按识别二维码', (375 - ctx.measureText('长按识别二维码').width) / 2, 574)
         //})
         resolve();
       })

component/share/share.wxml

@@ -1,4 +1,4 @@
-<view class="share" bindtap="close" wx:if="{{shareFlag}}">
+<view class="share" bindtap="close" wx:if="{{shareFlag}}" catchtouchmove='true'>
    <view class="btn" wx:if="{{!imgUrls}}" id="btnArea" bindtap="nothing">
        <image class="bg" src="../../static/groupImg/share.png"></image>
        <view class="share-btn">
@@ -14,9 +14,10 @@
    </view>
    <view class="share-img" wx:if="{{imgUrls}}" id="imgArea" bindtap="nothing">
        <cover-image class="img" src="{{imgUrls}}"></cover-image>
-       <view class="Preservation">
-           <image class="PreservationBg" src="../../static/groupImg/Preservation.png"></image>
-           <text bindtap="PreservationImg">保存到相册中，快去分享吧</text>
+       <view class="Preservation" style="{{shareType === 'works' ?'background:#ff9209' :'background:#70CA2D'}}">
+           <!-- <image class="PreservationBg" src="../../static/groupImg/Preservation.png"></image> -->
+           <!-- <text bindtap="PreservationImg">保存到相册中，快去分享吧</text> -->
+           保存到相册中，快去分享吧!
        </view>
    </view>
 </view>

component/share/share.wxss

@@ -62,26 +62,13 @@
     position: absolute;
     left: 15%;
     bottom: 50rpx;
-    width: 70%;
-    height: 88rpx;
-
-}
-
-.Preservation .PreservationBg {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-}
-
-.Preservation text {
+    width: 536rpx;
+    height: 80rpx;
     color: #fff;
     font-size: 36rpx;
-    position: absolute;
-    left: 43rpx;
-    top: 20rpx;
-    z-index: 9;
+    text-align: center;
+    line-height: 80rpx;
+    border-radius: 44rpx;
 }
 
 .share-friend {

pages/groupPage/collage-details/collage-details.wxml

@@ -62,7 +62,7 @@
         <view>您预付的课程费将在48小时内退回您的账户</view>
     </view>
 </view> 
-<canvas canvas-id="myCanvas" style="width:370px; height: 507px; position: absolute; left: -999rpx; top: -9999rpx;"></canvas>
+<canvas canvas-id="myCanvas" style="width:375px; height: 668px; position: absolute; left: -999rpx; top: -9999rpx;"></canvas>
 <shareDialog id="share-dialog" shareType='group' shareId="{{orderId}}"/>
 
 <popup

pages/groupPage/group-details/group-details.js

@@ -275,7 +275,6 @@ Page({
         this.popup.close()
       })
     } else {
-      debugger;
       this.setData({
         typeOf: 'success',
         title: '拼团成功 ! ',

pages/index/index.wxss

@@ -23,7 +23,7 @@
   width: 100%;
   height: 80rpx;
   background:#fff;
-  color: #6a6a6a;
+  color: #383838;
   box-sizing: border-box;
   display: flex;
   justify-content: space-between;
@@ -39,8 +39,9 @@
   justify-content: center;
   align-items: center;
   width: 164rpx;
-  height: 64rpx;
-  font-size: 36rpx;
+  height: 60rpx;
+  line-height: 60rpx;
+  font-size: 32rpx;
   border-radius: 30rpx;
   background: #fff;
 }

pages/main/class/class.js

@@ -109,7 +109,7 @@ Page({
         console.log(res.target)
     }
     return {
-        title: this.data.title,
+        title: '老师同学都在玩的配音show，你还在等什么？',
         path: `pages/main/class/class?id=${this.data.id}&title=${this.data.title}`,
         imageUrl: this.data.iconImg
     }

pages/social/works/works.js

@@ -31,7 +31,7 @@ Page({
     onLoad: function (option) {
         console.log(option)
         let id = option.id ? option.id : option.scene.replace('QR', '')
-        if(option.scene){
+        if(option.scene || option.shareCard ){
             this.setData({
                 goBackHome: true
             })
@@ -197,8 +197,8 @@ Page({
             console.log(res.target)
         }
         return {
-            title: this.data.title,
-            path: `pages/social/works/works?id=${this.data.id}&title=${this.data.title}`,
+            title: '一样的课文，不一样的味道！我的配音表演已开始，求各位大咖围观、点评！',
+            path: `pages/social/works/works?id=${this.data.id}&title=${this.data.title}&shareCard=true`,
             imageUrl: this.data.iconImg
         }
     },

pages/social/works/works.wxml

@@ -4,7 +4,7 @@
         <image class="avatar" src="{{authorAvatar}}" />
         <text class="nickName">{{author}}</text>
         <view class="like" bindtap="likeWorks" wx:if="{{authorUid !== myUid}}">
-            <image src="{{isLike? '../../../static/image/liked.png' : '../../../static/image/like.png'}}" />
+            <image src="{{isLike? '../../../static/image/red_like_empty.png' : '../../../static/image/red_like.png'}}" />
             <text class="likeBtn">{{isLike ? '已' : ''}}点赞</text>
         </view>
         <view class="follow" wx:if="{{authorUid !== myUid}}">
@@ -69,7 +69,7 @@
     </view>
     <!-- 分享框 -->
     <!-- <canvas canvas-id="myCanvas" style="width:750rpx;z-index=99999; height: 1334rpx;"></canvas> -->
-    <canvas canvas-id="myCanvas" style="width:375px;z-index=99999; height: 668px; position: absolute; left: -999rpx; top: -9999rpx;"></canvas>
+    <canvas canvas-id="myCanvas" style="width:375px;z-index=99999; height: 667px; position: absolute; left: -999rpx; top: -9999rpx;"></canvas>
     <shareDialog id="share-dialog" shareType='works' shareId="{{id}}" />
     <!-- 评论框 -->
     <view class="replySection" wx:if="{{replyModal}}">

pages/social/works/works.wxss

@@ -35,12 +35,12 @@
     /* margin-left: 90rpx; */
     width: 160rpx;
     height: 60rpx;
-    border: 2rpx solid rgba(255, 152, 0, 1);
+    border: 2rpx solid #FF0000;
     font-size: 28rpx;
     border-radius: 30rpx;
     text-align: center;
     /* line-height: 60rpx; */
-    color: #ff9800;
+    color: #FF0000;
 }
 
 .readAuthorSection .like image {
@@ -330,7 +330,7 @@ button::after {
 
 .footSection .microphone {
     display: block;
-    margin: -6rpx auto 0;
+    margin:-12rpx auto 8rpx;
     width: 108rpx;
     height: 106rpx;
 }

pages/user/myworks/myworks.js

@@ -7,80 +7,7 @@ Page({
    * 页面的初始数据
    */
   data: {
-    wareCards: [
-      {
-        title: "古诗词诵读（一）江南",
-        grade: "一年级(上学期)",
-        avatarUrl: '../../../static/image/timg.jpg',
-        previewUrl: "../../../static/image/timg.jpg",
-        plays: "17230",
-        likes: "71230",
-        classId: "1",
-        avatar: '../../static/image/timg.jpg',
-        nickName: '喔喔',
-        time: '10-18 09:56'
-      },
-      {
-        title: "古诗词诵读（一）江南",
-        grade: "一年级(上学期)",
-        avatarUrl: '../../../static/image/timg.jpg',
-        previewUrl: "../../../static/image/timg.jpg",
-        plays: "17230",
-        likes: "71230",
-        classId: "2",
-        avatar: '../../static/image/timg.jpg',
-        nickName: '喔喔',
-        time: '10-18 09:56'
-      },
-      {
-        title: "古诗词诵读（一）江南",
-        grade: "一年级(上学期)",
-        avatarUrl: '../../../static/image/timg.jpg',
-        previewUrl: "../../../static/image/timg.jpg",
-        plays: "17230",
-        likes: "71230",
-        classId: "3",
-        avatar: '../../static/image/timg.jpg',
-        nickName: '喔喔',
-        time: '10-18 09:56'
-      },
-      {
-        title: "古诗词诵读（一）江南",
-        grade: "一年级(上学期)",
-        avatarUrl: '../../../static/image/timg.jpg',
-        previewUrl: "../../../static/image/timg.jpg",
-        plays: "17230",
-        likes: "71230",
-        classId: "4",
-        avatar: '../../static/image/timg.jpg',
-        nickName: '喔喔',
-        time: '10-18 09:56'
-      },
-      {
-        title: "古诗词诵读（一）江南",
-        grade: "一年级(上学期)",
-        avatarUrl: '../../../static/image/timg.jpg',
-        previewUrl: "../../../static/image/timg.jpg",
-        plays: "17230",
-        likes: "71230",
-        classId: "5",
-        avatar: '../../static/image/timg.jpg',
-        nickName: '喔喔',
-        time: '10-18 09:56'
-      },
-      {
-        title: "古诗词诵读（一）江南",
-        grade: "一年级(上学期)",
-        avatarUrl: '../../../static/image/timg.jpg',
-        previewUrl: "../../../static/image/timg.jpg",
-        plays: "17230",
-        likes: "71230",
-        classId: "6",
-        avatar: '../../static/image/timg.jpg',
-        nickName: '喔喔',
-        time: '10-18 09:56'
-      }
-    ],
+    wareCards: [],
     pageNo: 1,
     totalNo: 0,
     uid: ''
@@ -98,7 +25,7 @@ Page({
     let uid = this.data.uid;
     console.log('用户身份',uid);
     APIClient.userWorks(uid, pageNo, pageSize).success(res => {
-      // debugger;
+      console.log(res.data.data.list);
       this.setData({
         wareCards: res.data.data.list
       });

pages/user/myworks/myworks.wxml

@@ -1,7 +1,6 @@
 <!--pages/user/myworks/myworks.wxml-->
 <wxs module="wxs">
   function formatDate(time) {
-    console.log(time);
     var t = getDate(time); 
     var tf = function(i){return (i < 10 ? '0' : '') + i};
     var year = t.getFullYear();
@@ -11,41 +10,111 @@
     var minute = tf(t.getMinutes());
     return month + '-' + day + ' ' + hour + ':' + minute;
   }
+  function getBirthday(birthday){
+    var t = getDate(birthday); 
+    var tf = function(i){return (i < 10 ? '0' : '') + i};
+    var year = t.getFullYear();
+    var month = tf(t.getMonth() + 1);
+    var day = tf(t.getDate());
+    return year + '年' + month + '月' + day + '日';
+  }
   module.exports.formatDate = formatDate;
+  module.exports.getBirthday = getBirthday;
 </wxs>
 <view class='user-works'>
+  <view class='follow-details'>
+    <view class='follow-info'>
+      <view class='avatar-bg'>
+        <view class='avatar-box'>
+          <image class='avatar-image' src='{{ wareCards[0].user.avatar }}'></image>
+        </view>
+        <view class='occupation-title'>{{ wareCards[0].user.profession }}</view>
+      </view>
+      <view class='avatar-msg'>
+        <view class='avatar-nickname'>
+          <text>{{ wareCards[0].user.wechatName }}</text>
+          <view class='flowers-box' wx:if='{{ true }}'>
+            <image src='../../../static/image/flowers.png'></image>
+          </view>
+          <view class='flowers-box' wx:else>
+            <image src='../../../static/image/boy.png'></image>
+          </view>
+        </view>
+        <view class='avatar-birthday'>{{ wxs.getBirthday(wareCards[0].user.birthday) }}</view>
+        <view class='avatar-address'>{{ wareCards[0].user.schoolName }}</view>
+      </view>
+    </view>
+    <view class='mine-category'>
+        <view class='play-count'>
+          <view>{{ wareCards[0].userRead.playAmount }}</view>
+          <view class='border-right'>
+            <view class='play-img'>
+              <image src='../../../static/image/play.png'></image>
+            </view>
+            <text>播放量</text>
+          </view>
+        </view>
+        <view class='follow-count'>
+          <view class='color'>{{ wareCards[0].userRead.fansAmount || 0 }}</view>
+          <view class='border-right'>
+            <view class='play-img'>
+              <image src='../../../static/image/follow.png'></image>
+            </view>
+            <text>关注</text>
+          </view>
+        </view>
+        <view class='point-count'>
+          <view class='color'>{{ wareCards[0].userRead.likeAmount || 0 }}</view>
+          <view class='border-right'>
+            <view class='play-img'>
+              <image src='../../../static/image/point.png'></image>
+            </view>
+            <text>赞</text>
+          </view>
+        </view>
+        <view class='flower-count'>
+          <view class='color'>{{ wareCards[0].userRead.pointAmount || 0 }}</view>
+          <view class='border-right'>
+            <view class='play-img'>
+              <image src='../../../static/image/flower.png'></image>
+            </view>
+            <text>红花</text>
+          </view>
+        </view>
+      </view>
+  </view>
   <view class='works-article' wx:for="{{ wareCards }}" wx:key="{{ index }}">
     <view class='user-info'>
-      <view class='avatar-img'>
+      <view class='user-img'>
         <image src='{{ item.user.avatar }}'></image>
       </view>
-      <view>
-        <view class='user-name'>{{ item.user.wechatName }}</view>
-        <view class='user-time'>{{ wxs.formatDate(item.userRead.gmtCreated) }}</view>
+      <view class='user-details'>
+        <view class='user-name'>
+          <view class='left-detail'>{{ item.user.wechatName }}</view>
+          <view class='right-detail'>
+            <view class='play-img'>
+              <image src='../../../static/image/hotPlays.png'></image>
+            </view>
+            <text class='plays-count'>{{ item.userRead.playAmount || 0 }}</text>
+          </view>
+        </view>
+        <view class='user-name'>
+          <view class='left-detail'>{{ wxs.formatDate(item.userRead.gmtCreated) || 0 }}</view>
+          <view class='right-detail'>
+            <view class='point-img'>
+              <image src='../../../static/image/like.png'></image>
+            </view>
+            <text class='likes-count'>{{ item.userRead.likeAmount }}</text>
+          </view>
+        </view>
       </view>
     </view>
     <view class='video-preview' bindtap='toMyWorks' data-id='{{ item.userRead.id }}' data-title='{{ item.userRead.title }}'>
       <image src='{{ item.userRead.iconImg }}'></image>
     </view>
     <view class='content-title'>
-      {{ item.userRead.title }}
-    </view>
-    <view class='content-detail'>
-      <view class='left'>{{ item.userRead.summary }}</view>
-      <view class='right'>
-        <view class='right-detail'>
-          <view class='play-img'>
-            <image src='../../../static/image/hotPlays.png'></image>
-          </view>
-          <text>{{ item.userRead.playAmount }}</text>
-        </view>
-        <view class='right-detail'>
-          <view class='point-img'>
-            <image src='../../../static/image/like.png'></image>
-          </view>
-          <text>{{ item.userRead.likeAmount }}</text>
-        </view>
-      </view>
+      <view>{{ item.userRead.title }}</view>
+      <view class='content-grage'>{{ item.userRead.summary }}</view>
     </view>
   </view>
 </view>

pages/user/myworks/myworks.wxss

@@ -1,43 +1,225 @@
 /* pages/user/myworks/myworks.wxss */
+page{
+  width: 100%;
+  background: #F0F1F5;
+}
+
 .user-works{
   width: 750rpx;
+  box-sizing: border-box;
+  padding: 0 16rpx;
   background: #F0F1F5;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.follow-details{
+  width: 100%;
+  height: 362rpx;
+  border-radius: 20rpx;
+  background: #FFFFFF;
+  margin-top: 30rpx;
+  display: flex;
+  position: relative;
+}
+
+.follow-info{
+  width: 100%;
+  display: flex;
+}
+
+.avatar-bg{
+  margin-left: 20rpx;
+  margin-top: 50rpx;
+  width: 154rpx;
+  height: 154rpx;
+  background: #61CA54;
+  border-radius: 50%;
+  position: relative;
+}
+
+.avatar-box{
+  width: 138rpx;
+  height: 138rpx;
+  border-radius: 50%;
+  z-index: 300;
+  position: absolute;
+  top: 8rpx;
+  left: 8rpx;
+}
+
+.avatar-image{
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+}
+
+.avatar-nickname{
+  width: 500rpx;
+  display: flex;
+}
+
+.avatar-address{
+  width: 500rpx;
+}
+
+.flowers-box{
+  width: 26rpx;
+  height: 26rpx;
+  margin-left: 10rpx;
+}
+
+.flowers-box>image{
+  width: 100%;
+  height: 100%;
+}
+
+.occupation-title{
+  position: absolute;
+  left: 100rpx;
+  top: 46rpx;
+  width: 68rpx;
+  background: #61CA54;
+  border-radius: 180rpx;
+  z-index: 600;
+  line-height: 26rpx;
+  text-align: center;
+  color: #FFFFFF;
+  font-size: 18rpx;
+}
+
+.avatar-msg{
+  margin-left: 40rpx;
+  margin-top: 50rpx;
+  width: 500rpx;
+  height: 154rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  color: #444444;
+  font-size: 32rpx;
+}
+
+.mine-category{
+  box-sizing: border-box;
+  width: 674rpx;
+  padding-top: 30rpx;
+  padding-bottom: 30rpx;
+  border-top: 4rpx solid #F0F1F5;
+  font-size: 28rpx;
+  font-weight: 600;
+  z-index: 900;
+  display: flex;
+  position: absolute;
+  top: 246rpx;
+  left: 23rpx;
+}
+
+.border-right{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 24rpx;
+  font-weight: lighter;
+  height: 22rpx;
+  border-right: 2rpx solid #D6D6D6;
+}
+
+.flower-count .border-right{
+  border: none;
+}
+
+.play-count,.point-count,.follow-count,.flower-count{
+  width: 25%;
+  text-align: center;
+}
+
+.play-img{
+  width: 28rpx;
+  height: 26rpx;
+  margin-right: 6rpx;
+  margin-bottom: 6rpx;
 }
 
+image{
+  width: 100%;
+  height: 100%;
+}
+
+.play-count{
+  color: #92D626;
+}
+
+.point-count{
+  color: #FFA700;
+}
+
+.follow-count{
+  color: #529BEF;
+}
+
+.flower-count{
+  color: #EE5750;
+}
+
+
+
 .works-article{
-  margin-top: 4rpx;
+  margin-top: 12rpx;
   box-sizing: border-box;
   width: 100%;
-  padding: 0 23rpx;
+  padding: 0 27rpx;
   background: #FFFFFF;
+  border-radius: 12rpx;
 }
 
 .user-info{
   width: 100%;
   height: 120rpx;
-  font-size:32rpx;
   display: flex;
   align-items: center;
+  font-size:32rpx;
 }
 
-.avatar-img{
-  margin-right: 14rpx;
+.user-img{
   width: 96rpx;
   height: 96rpx;
   border-radius: 50%;
 }
 
-.avatar-img>image{
+.user-img>image{
   width: 100%;
   height: 100%;
   border-radius: 50%;
 }
 
+.user-details{
+  margin-left: 26rpx;
+  display: flex;
+  flex-direction: column;
+}
+
 .user-name{
+  width: 560rpx;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
   color: #000000;
   font-weight: 500;
 }
 
+.left-detail{
+  width: 500rpx;
+}
+
+.right-detail{
+  width: 90rpx;
+  display: flex;
+}
+
 .user-time{
   color: #686868;
   font-weight: lighter;
@@ -57,52 +239,44 @@
 }
 
 .content-title{
-  margin-top: 10rpx;
+  margin-top: 12rpx;
+  margin-bottom: 30rpx;
   width: 100%;
-  height: 40rpx;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   font-size: 32rpx;
   font-weight: 500;
   color: #414141;
 }
 
-.content-detail{
-  margin-top: 30rpx;
-  width: 100%;
-  height: 50rpx;
-  display: flex;
-  justify-content: space-between;
+.content-grage{
   font-size: 24rpx;
 }
 
-.left{
-  width: 200rpx;
-}
-
-.right{
-  width: 150rpx;
-  height: 100%;
-  display: flex;
-  justify-content: space-between;
-}
-
-.right image{
+.user-info image{
   width: 100%;
   height: 100%;
 }
 
 .play-img{
+  margin-bottom: 12rpx;
   width: 20rpx;
   height: 20rpx;
 }
 
 .point-img{
+  margin-right: 6rpx;
+  margin-bottom: 10rpx;
   width: 26rpx;
   height: 24rpx;
 }
 
-.right-detail{
-  width: 50rpx;
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-}
+.likes-count{
+  color: #FD8B43;
+}
+
+.plays-count{
+  color: #5E5E5E;
+}
+

project.config.json

@@ -36,56 +36,26 @@
 			"list": []
 		},
 		"miniprogram": {
-			"current": 10,
+			"current": 2,
 			"list": [
 				{
-					"id": 0,
-					"name": "edit",
-					"pathName": "pages/groupPage/my-group/my-group",
-					"query": ""
-				},
-				{
-					"id": -1,
-					"name": "团购详情",
-					"pathName": "pages/group-details/group-details",
-					"query": ""
-				},
-				{
 					"id": -1,
 					"name": "课程详情",
-					"pathName": "pages/grade-details/grade-details",
-					"query": ""
-				},
-				{
-					"id": 7,
-					"name": "作品页面",
 					"pathName": "pages/social/works/works",
-					"query": "id=1541489786444388&title=铺满色巴掌的水泥道"
-				},
-				{
-					"id": 5,
-					"name": "修改资料",
-					"pathName": "pages/user/myEdit/myEdit",
-					"query": "title=修改资料",
-					"scene": "1012"
+					"query": "id=1541877751982865&title=【课文5】影子"
 				},
 				{
 					"id": -1,
-					"name": "read",
-					"pathName": "pages/user/myread/myread",
-					"query": ""
-				},
-				{
-					"id": -1,
-					"name": "replydetails",
-					"pathName": "pages/social/replyDetail/replyDetail",
-					"query": ""
+					"name": "课程详情",
+					"pathName": "pages/groupPage/collage-details/collage-details",
+					"query": "orderId=1542270071624081",
+					"scene": "1012"
 				},
 				{
 					"id": -1,
-					"name": "replydetails",
-					"pathName": "pages/social/replyDetail/replyDetail",
-					"query": ""
+					"name": "团购分享",
+					"pathName": "pages/groupPage/collage-details/collage-details",
+					"query": "orderId=1542621051065701"
 				}
 			]
 		}