实习证书查看，暂无分享功能

pagesA/student/certificateDetail.vue

@@ -1,116 +1,174 @@
-<!-- 分享招聘会 -->
 <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 v-if="itemData" style="width: 100vw;height: 100vh;overflow: auto;">
+		<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?.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">{{ 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>
+
+		<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;">
+          <uni-icons type="redo-filled" size="24" color="#00B760"/>
+          <span style="color:#00B760;font-weight:bold;">分享</span>
+        </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>
-		<canvas canvas-id="posterCanvas" class="shareCanvas" :style="`width: ${canvasWidth}px; height: ${canvasHeight}px;`"></canvas>
-  </view>
+	</view>
 </template>
 
 <script setup>
-import { ref, computed } 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'
 
-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;`
+onLoad((options) => {
+  if (options.itemData) itemData.value = JSON.parse(options.itemData)
 })
 
-// 图片预览
-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 viewReport = (item) => {
+	if (!item.certificate) {
+		uni.showToast({
+      title: '加载失败，请稍后重试',
+      icon: 'none',
+      duration: 2000
     })
-  })
+		return
+	}
+	preview(item.certificate)
 }
 
-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)
+// 分享按钮点击事件
+// const shareClick = () => {
+// }
 
-  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)
+</script>
 
-  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)
-      }
-    })
-  })
+<style lang="less" scoped>
+.cer-img{
+  width: 100vw;
+  height: 89.5vh;
+  position: relative;
+  font-weight: 600;
+}
+.cer-introduce{
+  width: 70%;
+  position: absolute;
+  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: 70%;
+  position: absolute;
+  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: 70%;
+  position: absolute;
+  top: 82%;
+  left: 50%;
+  transform: translate(-50%,-50%);
+  text-indent: 2em;
+	font-weight: 500;
+}
+.cer-end{
+  position: absolute;
+  top: 87%;
+  right: 16%;
+	font-weight: 500;
+}
+button::after{
+	border:none;
+}
+.pop-btn-wrapper{
+	position: relative;
+	margin-top: 15vh;
+	.pop-confirm{
+		background-color: #fff;
+		color: #4b9afd;
+		font-size: 21px;
+		width: 45vw;
+		position: absolute;
+		bottom: 0;
+		left: 0;
+	}
+	.pop-cancel{
+		background-color: #fff;
+		font-size: 21px;
+		width: 45vw;
+		position: absolute;
+		bottom: 0;
+		right: 0;
+	}
+}
+.buttons{
+  width: 70vw;
+  height: 44px;
+  border-radius: 25px;
+  background-color: #00B760;
+  margin: 0;
 }
-</script>
 
-<style scoped lang="scss">
-.shareCanvas {
-	position: fixed;
-	top: -99999upx;
-	left: -99999upx;
-	z-index: -99999;
+.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>
+</style>