证书详情

pagesA/student/certificateDetail.vue

@@ -3,87 +3,45 @@
 		<view class="cer-img">
       <image src="https://minio.citupro.com/dev/static/bgc.jpg" mode="scaleToFill" style="width: 100%;height: 100%;"></image>
       <view class="cer-introduce">
-        兹有
-        <span class="cer-text">{{ itemData?.student?.schoolName }}</span>
+				兹有
+				<span class="cer-text">{{ itemData?.student?.schoolName }}</span>
         <span class="cer-text">{{ itemData?.student?.majorName }}</span>
         专业<span class="cer-text">{{ itemData?.person?.name }}</span>
         同学于<span class="cer-text">{{ itemData?.startTime ? timesTampChange(itemData?.startTime, 'Y-M-D') : '' }}</span>
         至<span class="cer-text">{{ itemData?.endTime ? timesTampChange(itemData?.endTime, 'Y-M-D') : '' }}</span>
-        在<span class="cer-text">{{ itemData?.enterprise?.enterpriseName }}</span>
-        <span class="cer-text">{{ formatName(itemData?.enterprise?.anotherName || itemData?.enterprise?.name) }}</span>岗位实习。
-      </view>
-      <view class="cer-comment">{{ itemData?.evaluate }}</view>
-      <view class="cer-prove">特此证明。</view>
-      <view class="cer-end">
-        <!-- <view>{{ itemData?.enterprise?.enterpriseName }}</view> -->
+        在<span class="cer-text">{{ formatName(itemData?.enterprise?.anotherName || itemData?.enterprise?.name) }}</span>
+        实习。
+			</view>
+			<view class="cer-comment">{{ itemData?.evaluate }}</view>
+			<view class="cer-prove">特此证明。</view>
+			<view class="cer-end">
         <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>
 
 		<view class="bottom-sticky">
       <view style="display: flex;justify-content: space-evenly;align-itens: center;width: 100%;margin: 20rpx 0;">
-        <view @click="shareClick" 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="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="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, nextTick } from 'vue'
+import { ref } 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) => {
@@ -98,92 +56,10 @@ 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 shareClick = () => {
+// }
 
-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>
@@ -193,42 +69,48 @@ const generateImage = () => {
   position: relative;
   font-weight: 600;
 }
-//实习信息
 .cer-introduce{
-  width: 70vw;
+  width: 70%;
   position: absolute;
-  top: 49%;
+  top: 51%;
   left: 50%;
   transform: translate(-50%,-50%);
   text-indent: 2em;
+	font-weight: 500;
+}
+.cer-text{
+  text-decoration: underline;
+  margin: 0 3px;
+	font-weight: 700;
 }
-//点评内容
 .cer-comment{
-  width: 70vw;
+	width: 70%;
   position: absolute;
-  top: 66%;
+  top: 68%;
   left: 50%;
   transform: translate(-50%,-50%);
 	text-indent: 2em;
+	display: -webkit-box;
+	-webkit-box-orient: vertical;
+	-webkit-line-clamp: 3;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	font-weight: 500;
 }
-//特此证明
 .cer-prove{
-  width: 70vw;
+  width: 70%;
   position: absolute;
-  top: 80%;
+  top: 82%;
   left: 50%;
   transform: translate(-50%,-50%);
   text-indent: 2em;
+	font-weight: 500;
 }
-//公司名称
 .cer-end{
   position: absolute;
-  top: 85%;
+  top: 87%;
   right: 16%;
-}
-.cer-text{
-  text-decoration: underline;
-  margin: 0 5rpx;
+	font-weight: 500;
 }
 button::after{
 	border:none;

pagesA/student/certificateDetailCanvas.vue

@@ -0,0 +1,116 @@
+<!-- 分享招聘会 -->
+<template>
+  <view style="position: relative;">
+    <view v-if="shareUrl" class="d-flex align-center flex-column justify-center" style="height: 100vh;">
+      <image v-if="!!shareUrl" :style="imgStyle" @click="handlePreviewSharePoster" :src="shareUrl" :show-menu-by-longpress="true"></image>
+      <view class="color-999 ss-m-t-20 font-size-14 ss-m-b-50">点击图片预览，长按图片保存</view>
+    </view>
+		<canvas canvas-id="posterCanvas" class="shareCanvas" :style="`width: ${canvasWidth}px; height: ${canvasHeight}px;`"></canvas>
+  </view>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import { timesTampChange } from '@/utils/date'
+import { formatName } from '@/utils/getText'
+
+const canvasWidth = 500
+const canvasHeight = 700
+
+const shareUrl = ref('')
+const windowWidth = ref(0)
+
+const itemData = ref(null)
+onLoad(async (options) => {
+  if (options.itemData) {
+    itemData.value = JSON.parse(options.itemData)
+    createPoster()
+  }
+  const windowInfo = wx.getWindowInfo()
+  windowWidth.value = windowInfo.windowWidth
+})
+
+const imgStyle = computed(() => {
+  if (windowWidth.value <= 320) return `width: 259px; height: ${Math.round((canvasHeight*259)/canvasWidth)}px;`
+  if (windowWidth.value > 320 && windowWidth.value <= 375) return `width: 313px; height: ${Math.round((canvasHeight*313)/canvasWidth)}px;`
+  if (windowWidth.value > 375) return `width: 328px; height: ${Math.round((canvasHeight*328)/canvasWidth)}px;`
+})
+
+// 图片预览
+const handlePreviewSharePoster = () => {
+	uni.previewImage({
+		current: 0,
+		longPressActions: {
+			itemList: ['发送给朋友', '保存图片', '收藏']
+		},
+		urls: [shareUrl.value]
+	})
+}
+
+const getImageTempRatio = (url) => {
+  return new Promise((req, rej)=>{
+    wx.getImageInfo({
+      src:url,
+      success:(res) =>{
+        req(res)
+      }
+    })
+  })
+}
+
+const createPoster = async () => {
+  uni.showLoading({ title: '生成中...', mask: true })
+  var ctx = uni.createCanvasContext('posterCanvas')
+  //清空画布
+  ctx.clearRect(0, 0, canvasWidth, canvasHeight)
+
+  //背景图片
+  const { path: bgUrl } = await getImageTempRatio('https://minio.citupro.com/dev/static/bgc.jpg')
+  ctx.drawImage(bgUrl, 0, 0, canvasWidth, canvasHeight) // 路径、x、y、宽、高
+  
+  const info = { ...itemData.value }
+  // 绘制文字内容
+  ctx.setFontSize(16)
+  if (info?.student?.schoolName) ctx.fillText(info.student.schoolName, 50, 130)
+  if (info?.student?.majorName) ctx.fillText(info.student.majorName, 50, 160)
+  if (info?.person?.name) ctx.fillText(info.person.name, 50, 190)
+  if (info?.startTime) ctx.fillText(timesTampChange(info.startTime, 'Y-M-D'), 50, 250)
+  if (info?.endTime) ctx.fillText(timesTampChange(info?.endTime, 'Y-M-D'), 50, 310)
+  if (info?.enterprise?.anotherName || info?.enterprise?.name) ctx.fillText(formatName(info.enterprise?.anotherName || info.enterprise.name), 50, 400)
+  if (info?.evaluate) ctx.fillText(info.evaluate, 20, 460)
+  if (info?.createTime) ctx.fillText(timesTampChange(info?.createTime, 'Y-M-D'), 200, 520)
+
+  ctx.font = 'bold';
+  ctx.fillText('兹有', 20, 100)
+  ctx.fillText('同学于', 20, 220)
+  ctx.fillText('至', 20, 280)
+  ctx.fillText('在', 20, 340)
+  ctx.fillText('实习。', 20, 430)
+  ctx.fillText('特此证明。', 20, 490)
+
+  ctx.draw(false, () =>{
+    wx.canvasToTempFilePath({ 
+      canvasId: 'posterCanvas',
+      success:(res)=>{
+        shareUrl.value = res.tempFilePath
+        console.log('canvas-success', shareUrl.value)
+        uni.hideLoading({})
+      },
+      fail:(err)=>{
+        uni.hideLoading({})
+        console.log('canvas-fail', err)
+      }
+    })
+  })
+}
+</script>
+
+<style scoped lang="scss">
+.shareCanvas {
+	position: fixed;
+	top: -99999upx;
+	left: -99999upx;
+	z-index: -99999;
+}
+</style>

pagesA/student/internshipRecord.vue

@@ -127,8 +127,7 @@ const handleToCertificate = (val) => {
   const itemData = JSON.stringify({
     student: { schoolName: val?.student?.schoolName, majorName: val?.student?.majorName },
     person: { name: val?.person?.name },
-    enterpriseName: val?.enterprise?.enterpriseName,
-    anotherName: val?.enterprise?.anotherName || val?.enterprise?.name,
+    enterprise: { anotherName: val?.enterprise?.anotherName || val?.enterprise?.name },
     startTime: val?.startTime,
     endTime: val?.endTime,
     evaluate: val?.evaluate,