menduner-uniapp/pagesA/student/certificateDetail.vue

<template>
	<view 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">{{ schoolName }}</span>
        <span class="cer-text">{{ info.student.majorName }}</span>
        专业<span class="cer-text">{{ info.student.studentName }}</span>
        同学于<span class="cer-text">{{ info.praciceSubmitRecord.jobJoinDate }}</span>
        至<span class="cer-text">{{ info.praciceSubmitRecord.internshipEndDate }}</span>
        在<span class="cer-text">{{ info.enterprise.enterpriseName }}</span>
        <span class="cer-text">{{ info.enterpriseRecruit.enterpriseRecruitJobName }}</span>岗位实习。
      </view>
      <view class="cer-comment">{{ info.studentInternshipCertificate.comment }}</view>
      <view class="cer-prove">特此证明。</view>
      <view class="cer-end">
        <view>{{ info.enterprise.enterpriseName }}</view>
        <view>{{ info.studentInternshipCertificate.createDate }}</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(info)" 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="!!info.studentInternshipCertificate.fileUrl" type="primary" size="default" class="buttons" @click="viewReport(info)">查看附件</button>
        <button v-else type="primary" size="default" class="buttons" style="background-color:grey;">查看附件</button>
      </view>
    </view>

		<!-- <uni-popup ref="shareup" 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>
				</view>
			</view>
		</uni-popup> -->
	</view>
</template>

<script setup>
import { ref } from 'vue'
import { getEnterpriseCertificateList } from '@/api/student'
import { preview } from '@/utils/preview'
import { onLoad, onShareAppMessage } from '@dcloudio/uni-app'

const schoolName = ref('北京交通大学')
const info = ref({
	student: {
		majorName: '文言文',
		studentName: '张三',
	},
	praciceSubmitRecord: {
		jobJoinDate: '2022-12-12',
		internshipEndDate: '2022-12-12',
	},
	enterprise: {
		enterpriseName: '北京交通大学',
	},
	enterpriseRecruit: {
		enterpriseRecruitJobName: '前端工程师',
	},
	studentInternshipCertificate: {
		comment: '优秀',
		createDate: '2022-12-12',
		fileUrl: 'https://minio.menduner.com/dev/person/725759784858554368/attachment/7cde29dc69c1403649be55d4c2bfd3d8304c088dc79ab25afe9c4bf55d3b382f.docx'
	}
})
const query = ref({
	size:999,
	current:1,
	studentId:null,
  studentInternshipCertificateId:null
})

onLoad((options) => {
	console.log(options, 'options')

	// onShareAppMessage(() => {
	// 	if(res.from == 'button'){
	// 		return {
	// 			title: '实习证书',
	// 			path:`/pagesC/my/certificationShare?studentId=${that.curItem.student.studentId}&&certificateId=${that.curItem.studentInternshipCertificate.studentInternshipCertificateId}`
	// 		}
	// 	}
	// })
})

// 获取实习证书列表
const getList = async () => {
  try {
    const { data } = await getEnterpriseCertificateList({ size: 9999, current: 1 })
    console.log(data, '实习证书')
    // list.value = data.records.reverse()
  } catch {}
}

const viewReport = (item) => {
	if (!item.studentInternshipCertificate.fileUrl) {
		uni.showToast({
      title: '加载失败，请稍后重试',
      icon: 'none',
      duration: 2000
    })
		return
	}
	preview(item.studentInternshipCertificate.fileUrl)
}
</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;
}
</style>