menduner-uniapp/pagesA/student/certificateDetail.vue

<template>
	<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">{{ 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> -->
        <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" 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>

		<!-- <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 { 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) => {
	if (!item.certificate) {
		uni.showToast({
      title: '加载失败，请稍后重试',
      icon: 'none',
      duration: 2000
    })
		return
	}
	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>
.cer-img{
  width: 100vw;
  height: 89.5vh;
  position: relative;
  font-weight: 600;
}
//实习信息
.cer-introduce{
  width: 70vw;
  position: absolute;
  top: 49%;
  left: 50%;
  transform: translate(-50%,-50%);
  text-indent: 2em;
}
//点评内容
.cer-comment{
  width: 70vw;
  position: absolute;
  top: 66%;
  left: 50%;
  transform: translate(-50%,-50%);
	text-indent: 2em;
}
//特此证明
.cer-prove{
  width: 70vw;
  position: absolute;
  top: 80%;
  left: 50%;
  transform: translate(-50%,-50%);
  text-indent: 2em;
}
//公司名称
.cer-end{
  position: absolute;
  top: 85%;
  right: 16%;
}
.cer-text{
  text-decoration: underline;
  margin: 0 5rpx;
}
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;
}

.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>