证书分享

pagesA/student/certificateDetail.vue

@@ -19,41 +19,71 @@
         <view>{{ itemData?.createTime ? timesTampChange(itemData?.createTime, 'Y-M-D') : '' }}</view>
       </view>
     </view>
+    <!-- 隐藏的 canvas -->
+    <canvas canvas-id="shareCanvas" style="width: 100vw; height: 89.5vh; position: fixed; top: -9999px;"></canvas>
 
 		<view class="bottom-sticky">
       <view style="display: flex;justify-content: space-evenly;align-itens: center;width: 100%;margin: 20rpx 0;">
-        <!-- <view @click="shareClick(itemData)" style="display: flex;justify-content: center;flex-direction: column;align-items: center;">
+        <view @click="shareClick" style="display: flex;justify-content: center;flex-direction: column;align-items: center;">
           <uni-icons type="redo-filled" size="24" color="#00B760"/>
           <span style="color:#00B760;font-weight:bold;">分享</span>
-        </view> -->
+        </view>
         <button v-if="itemData?.certificate" type="primary" size="default" class="buttons" @click="viewReport(itemData)">查看附件</button>
         <button v-else type="primary" size="default" class="buttons" style="background-color:grey;">查看附件</button>
       </view>
     </view>
 
-		<!-- <uni-popup ref="shareup" type="dialog">
+		<!-- <uni-popup ref="sharePopup" type="dialog">
 			<view class="f-straight" style="height: 200px;width:80vw;background-color: #fff;border-radius: 10px;">
 				<text style="text-align:center;color:grey;">是否分享实习证书?</text>
 				<view class="f-horizon pop-btn-wrapper">
-					<button  size="default" class="pop-confirm" pain open-type="share"  @click="popupClose">确认</button>
-          <button  size="default" class="pop-cancel" pain @click="popupClose">取消</button>
+					<button  size="default" class="pop-confirm" pain open-type="share"  @click="generateImage">确认</button>
+          <button  size="default" class="pop-cancel" pain @click="null">取消</button>
 				</view>
 			</view>
 		</uni-popup> -->
+    
+    <!-- 分享实习证书 -->
+    <uni-popup ref="sharePopup" type="share">
+      <uni-popup-share title="分享到">
+        <view class="share-pop">
+          <button class="f-straight" open-type="share">
+            <view class="share-round share-round-1" >
+              <uni-icons type="weixin" color="#FFF" size="30" />
+            </view>
+            <view style="font-size:12px;">微信</view>
+          </button>
+          <button class="f-straight" @tap="null">
+            <view class="share-round share-round-1" >
+              <uni-icons type="pyq" color="#FFF" size="30" />
+            </view>
+            <view style="font-size:12px;">朋友圈</view>
+          </button>
+        </view>
+      </uni-popup-share>
+    </uni-popup>
 	</view>
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, nextTick } from 'vue'
 import { preview } from '@/utils/preview'
 import { onLoad } from '@dcloudio/uni-app'
 import { timesTampChange } from '@/utils/date'
 import { formatName } from '@/utils/getText'
-
+import { onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
 
 const itemData = ref(null)
 onLoad((options) => {
   if (options.itemData) itemData.value = JSON.parse(options.itemData)
+  nextTick(() => {
+    generateImage()
+  })
+  wx.showShareMenu({
+    withShareTicket: true,
+    menus: ['shareAppMessage', 'shareTimeline']
+  })
+  onShareTimeline()
 })
 
 const viewReport = (item) => {
@@ -67,6 +97,93 @@ const viewReport = (item) => {
 	}
 	preview(item.certificate)
 }
+
+const sharePopup = ref()
+// 分享按钮点击事件
+const shareClick = () => {
+  sharePopup.value.open()
+}
+
+const shareParams = {
+  title: '门墩儿 专注顶尖招聘',
+  path: '/pages/index/position'
+}
+//在点击open-type="share"按钮后会触发以下函数，可以在函数中写需要的逻辑，当然函数的返回值必须是一个对象，用于设置分享卡片的展示形式
+//发送给微信好友  
+onShareAppMessage(() => {
+  console.log('发送给微信好友:', 1)
+  if(!canvasToTempFilePath.value){
+		setTimeout(() => {},1000)
+	}
+  sharePopup.value.close()
+  return {
+    ...shareParams,
+    imageUrl: canvasToTempFilePath.value
+  }
+})
+
+// 转发朋圈
+onShareTimeline(() => {
+  console.log('转发朋圈:', 2)
+  return {
+    ...shareParams,
+    imageUrl: canvasToTempFilePath.value
+  }
+})
+
+const canvasToTempFilePath = ref('')
+// 生成图片
+const generateImage = () => {
+  const ctx = uni.createCanvasContext('shareCanvas', this)
+
+  // 绘制背景图片
+  ctx.drawImage('https://minio.citupro.com/dev/static/bgc.jpg', 0, 0, 375, 667)
+
+  // 绘制文字内容
+  ctx.setFontSize(16)
+  ctx.fillText('兹有', 20, 100)
+  ctx.fillText(itemData.value?.student?.schoolName, 50, 130)
+  ctx.fillText(itemData.value?.student?.majorName, 50, 160)
+  ctx.fillText(itemData.value?.person?.name, 50, 190)
+  ctx.fillText('同学于', 20, 220)
+  ctx.fillText(itemData.value?.startTime ? timesTampChange(itemData.value?.startTime, 'Y-M-D') : '', 50, 250)
+  ctx.fillText('至', 20, 280)
+  ctx.fillText(itemData.value?.endTime ? timesTampChange(itemData.value?.endTime, 'Y-M-D') : '', 50, 310)
+  ctx.fillText('在', 20, 340)
+  ctx.fillText(itemData.value?.enterprise?.enterpriseName, 50, 370)
+  ctx.fillText(formatName(itemData.value?.enterprise?.anotherName || itemData.value?.enterprise?.name), 50, 400)
+  ctx.fillText('岗位实习。', 20, 430)
+  ctx.fillText(itemData.value?.evaluate, 20, 460)
+  ctx.fillText('特此证明。', 20, 490)
+  ctx.fillText(itemData.value?.createTime ? timesTampChange(itemData.value?.createTime, 'Y-M-D') : '', 200, 520)
+
+  // 绘制完成
+  ctx.draw(false, () => {
+    // 生成图片
+    uni.canvasToTempFilePath({
+      canvasId: 'shareCanvas',
+      success: (res) => {
+        canvasToTempFilePath.value = res.tempFilePath
+        // 保存图片到相册
+        // uni.saveImageToPhotosAlbum({
+        //   filePath: res.tempFilePath,
+        //   success: () => {
+        //     uni.showToast({
+        //       title: '图片已保存，请前往朋友圈分享',
+        //       icon: 'none'
+        //     })
+        //   },
+        //   fail: (err) => {
+        //     console.error('保存图片失败', err)
+        //   }
+        // })
+      },
+      fail: (err) => {
+        console.error('生成图片失败', err)
+      }
+    })
+  })
+}
 </script>
 
 <style lang="less" scoped>
@@ -144,4 +261,32 @@ button::after{
   background-color: #00B760;
   margin: 0;
 }
+
+.share-pop {
+  width: 100%;
+  // height:300rpx;
+  display: flex;
+  justify-content: center;
+  .f-straight {
+    margin: 40rpx;
+    background: unset;
+    &::after{
+      border:none !important;
+    }
+  }
+  .share-round {
+    border-radius:50%;
+    height:100rpx;
+    width:100rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .share-round-1 {
+    background-color:#22a039;
+  }
+  .share-round-2 {
+    background-color:#3693cd;
+  }
+}
 </style>

pagesA/student/internshipRecord.vue

@@ -36,9 +36,9 @@
           <view>实习时间：{{ timesTampChange(val?.startTime, 'Y-M-D') }} 至 {{ timesTampChange(val?.endTime, 'Y-M-D') }}</view>
           <view class="line ss-m-y-20"></view>
           <view style="text-align: right;">
-            <button @tap="handleToReport(val)" class="mini-btn ss-m-r-10" type="warning" size="mini" style="color:#ffffff; backgroundColor:#fb8c00;borderColor:#fb8c00">实习报告</button>
-            <button @tap="handleToCertificate(val)" class="mini-btn ss-m-x-10" type="warning" size="mini" style="color:#ffffff; backgroundColor:#00b760;borderColor:#00b760">实习证书</button>
-            <button @tap="preview(val?.recommendationLetter)" class="mini-btn ss-m-l-10" type="warning" size="mini" style="color:#ffffff; backgroundColor:#00897b;borderColor:#00897b">企业推荐信</button>
+            <button @tap="handleToReport(val)" class="ss-m-r-10" type="warning" size="mini" style="color:#fff; backgroundColor:#fb8c00;borderColor:#fb8c00">实习报告</button>
+            <button @tap="handleToCertificate(val)" class="ss-m-x-10" type="warning" size="mini" style="color:#fff; backgroundColor:#00b760;borderColor:#00b760">实习证书</button>
+            <button @tap="preview(val?.recommendationLetter)" class="ss-m-l-10" type="warning" size="mini" style="color:#fff; backgroundColor:#00897b;borderColor:#00897b">企业推荐信</button>
           </view>
         </uni-card>
         <uni-load-more :status="more" />