Merge pull request 'feat: page-case-poster;' (#4) from fox into master

Reviewed-on: http://175.178.51.79:3000/Augcl/education-front/pulls/4

pages.json

@@ -36,12 +36,12 @@
 				"path": "thesis/search"
 			}, {
 				"path": "thesis/index"
-			}, {
-				"path": "thesis/poster"
 			}, {
 				"path": "case/index"
 			}, {
 				"path": "serve/index"
+			}, {
+				"path": "poster/index"
 			}
 		]
 	}],

pages_order/case/index.vue

@@ -63,6 +63,13 @@
 				<uv-parse :content="details.serviceFeeling"></uv-parse>
       </view>
     </view>
+    
+    <view class="flex bottom">
+      <view class="flex btns">
+        <button class="btn" @click="jumpToPoster">保存海报</button>
+        <button class="btn btn-share" open-type="share">分享文章</button>
+      </view>
+    </view>
 
   </view>
 </template>
@@ -82,11 +89,27 @@
     onLoad({ articleId }) {
       this.getData(articleId)
     },
+    onShareAppMessage(res) {
+      return {
+        title: this.posterData.paperDesc,
+        imageUrl: this.posterData.paperImage,
+        path: this.posterData.path,
+      }
+    },
     computed: {
       bannerList() {
         const { image } = this.details || {}
         return (image || '').split(',').map(url => ({ image: url }))
-      }
+      },
+      posterData() {
+        const { id, title, paperDesc, paperImage } = this.details || {}
+
+        return {
+          paperDesc: paperDesc || title,
+          paperImage: paperImage || this.bannerList?.[0]?.image || '',
+          path: `pages_order/case/index?articleId=${id}`
+        }
+      },
     },
     methods: {
       async getData(articleId) {
@@ -98,6 +121,13 @@
         }
 
       },
+      jumpToPoster() {
+        uni.setStorageSync('posterData', this.posterData)
+
+        uni.navigateTo({
+					url: `/pages_order/poster/index`
+				})
+      },
     },
   }
 </script>
@@ -106,8 +136,8 @@
 
   .page__view {
     box-sizing: border-box;
-    padding-bottom: 36rpx;
     background: #FFFFFF;
+		padding-bottom: calc(36rpx + 110rpx + env(safe-area-inset-bottom));
   }
 
   .swiper {
@@ -157,4 +187,33 @@
     }
   }
 
+  .bottom {
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    width: 100vw;
+    height: 110rpx;
+		padding-bottom: env(safe-area-inset-bottom);
+    background: #FFFFFF;
+    box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16); 
+
+    .btns {
+      column-gap: 34rpx;
+    }
+
+    .btn {
+      padding: 20rpx 90rpx;
+      font-size: 28rpx;
+      color: #FFFFFF;
+      background: #4883F9;
+      border-radius: 42rpx;
+
+      &-share {
+        background: #FFD019;
+      }
+
+    }
+
+  }
+
 </style>

pages_order/thesis/poster.vue → pages_order/poster/index.vue

@@ -24,31 +24,21 @@
 				wxCodeImage: '',
 				baseUrl: 'https://image.hhlm1688.com/',
 				canvas: {},
-        details: {},
+        posterData: {},
 			}
 		},
-    async onLoad({ thesisId }) {
+    async onLoad() {
       uni.showLoading({
           title: '加载中...'
       });
-      await this.getData(thesisId)
-			await this.fetchQrCode(thesisId)
+      this.posterData = uni.getStorageSync('posterData')
+			await this.fetchQrCode(this.posterData.path)
       uni.hideLoading();
       this.draw()
     },
     methods: {
-      async getData(thesisId) {
-
-        try {
-          this.details = await this.$fetch('queryThesisById', { thesisId })
-        } catch (err) {
-
-        }
-
-      },
-			async fetchQrCode(thesisId) {
+			async fetchQrCode(path) {
 				try {
-          const path = `pages_order/thesis/index?thesisId=${thesisId}`
 					this.wxCodeImage = (await this.$fetch('getInviteCode', { path }))?.url
 
 				} catch (err) {
@@ -152,12 +142,12 @@
 						const descY = 751 * Ratio / dpr
             const maxWidth = 677 * Ratio / dpr
             const lineHeight = 45 * Ratio / dpr
-            const text = this.details.paperDesc || this.details.title
+            const text = this.posterData.paperDesc
             this.drawTextWithManualLineBreaks(ctx, text, descX, descY, maxWidth, lineHeight)
 
             // 海报图片
             const paperImage = canvas.createImage()
-						paperImage.src = this.details.paperImage || this.details.image?.split?.(',')?.[0]
+						paperImage.src = this.posterData.paperImage
 						paperImage.onload = () => {
 							const x = 37 * Ratio / dpr
 							const y = 21 * Ratio / dpr

pages_order/thesis/index.vue

@@ -168,16 +168,25 @@
     },
     onShareAppMessage(res) {
       return {
-        title: this.details.paperDesc || this.details.title,
-        imageUrl: this.details.paperImage || this.bannerList?.[0]?.image || '',
-        path: `/pages_order/thesis/index?thesisId=${this.details.id}`
+        title: this.posterData.paperDesc,
+        imageUrl: this.posterData.paperImage,
+        path: this.posterData.path,
       }
     },
     computed: {
       bannerList() {
         const { image } = this.details || {}
         return (image || '').split(',').map(url => ({ image: url }))
-      }
+      },
+      posterData() {
+        const { id, title, paperDesc, paperImage } = this.details || {}
+
+        return {
+          paperDesc: paperDesc || title,
+          paperImage: paperImage || this.bannerList?.[0]?.image || '',
+          path: `pages_order/thesis/index?thesisId=${id}`
+        }
+      },
     },
     methods: {
       async getData(thesisId) {
@@ -217,8 +226,10 @@
         });
       },
       jumpToPoster() {
+        uni.setStorageSync('posterData', this.posterData)
+
         uni.navigateTo({
-					url: `/pages_order/thesis/poster?thesisId=${this.details.id}`
+					url: `/pages_order/poster/index`
 				})
       },
     },
@@ -228,7 +239,6 @@
 <style scoped lang="scss">
 
   .page__view {
-    padding-bottom: 62rpx;
     background: #FFFFFF;
 		padding-bottom: calc(62rpx + 110rpx + env(safe-area-inset-bottom));
   }