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">{{ 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>
	</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)
}

// 分享按钮点击事件
// const shareClick = () => {
// }

</script>

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

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