|
@@ -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;
|