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>

		<view class="bottom-sticky">
      <view style="display: flex;justify-content: space-evenly;align-itens: center;width: 100%;margin: 20rpx 0;">
        <!-- <view @click="shareClick(itemData)" 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="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 { preview } from '@/utils/preview'
import { onLoad } from '@dcloudio/uni-app'
import { timesTampChange } from '@/utils/date'
import { formatName } from '@/utils/getText'


const itemData = ref(null)
onLoad((options) => {
  if (options.itemData) itemData.value = JSON.parse(options.itemData)
})

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