jobslink-user-clent/pageMy/contract/index.vue

<template>
	<view>
		<view class="nothing" v-if="ContractList.length === 0">
			<image src="../../static/img/pic.svg" mode=""></image>
			<view class="nothingText">
				暂无合同信息
			</view>
		</view>
		<view class="contractBoxList" v-for="item in ContractList">
			<view>
				<view class="title">任务名称：{{item.servicesName}}</view>
				<view class="time" style="margin: 10px 0;font-weight:500;">合同编号：{{item.contractNo}}</view>
				<view class="time">合同有效期：{{item.stime | time}} 至 {{item.etime | time}}</view>
			</view>

			<view class="lookBtn" @click="look(item)">
				查看合同
			</view>

		</view>
	</view>
</template>

<script>
	import {
		contractList,
		viewContract
	} from '@/api/auth.js'

	export default {
		data() {
			return {
				ContractList: [],
				maskShow: false,
				src: '',
				current: 1,
				size: 10,
				total: 0
			}
		},
		onLoad() {
			this.initContractList()
		},
		filters: {
			time(date) {
				var d = date.slice(0, 10)
				return d.replace(/\//g, "-")
			}
		},

		/*页面滚动到底部 换页*/
		onReachBottom: function() {
			if (this.ContractList.length >= this.total) {
				uni.showToast({
					title: '到底了',
					icon: 'none'
				})
				return
			}
			this.initContractList()
		},
		/*下拉刷新*/
		onPullDownRefresh: function() {
			this.current = 1
			this.ContractList = []
			this.initContractList()
		},
		methods: {
			initContractList() {
				var params = {
					size: this.size,
					current: this.current
				}
				contractList(params).then(e => {
					this.current++
					this.ContractList = [...this.ContractList, ...e.data.data.records]
					this.total = e.data.data.total
					uni.stopPullDownRefresh();
				}).catch(err => {
					uni.stopPullDownRefresh();
				})
			},
			look(item) {
				/*预览合同图片改为预览PDF*/
								uni.showLoading({
									title:'请求中',
								})
								// #ifdef H5
								uni.hideLoading()
								window.open(item.contractSecondUrl);
								return;
								// #endif
								uni.downloadFile({
									url: item.contractSecondUrl,
									success: function(res) {
										var filePath = res.tempFilePath;
										uni.openDocument({
											filePath: filePath,
											success: function(res) {
												uni.hideLoading()
											},
											fail: function() {
												uni.showToast({
													title: '打开合同失败，请稍后重试',
													icon: 'none'
												})
											}
										});
									},
								});
								
				
			},

		},
		computed: {
			imgSrc() {
				const obj = {
					'backgroundImage:': `url(${this.src})`,
					"backgroundColor": 'red'
				}
				return obj
			}
		}
	}
</script>

<style lang="scss">
	a {
		text-decoration: none
	}

	page {
		background: #F6F6F6;
		width: 100%;
		height: 100%;
	}

	.nothingText {
		font-family: PingFangSC-Regular;
		font-size: 28rpx;
		color: #666666;
		text-align: center;
		margin-top: 20rpx;
	}

	.nothing image {
		width: 400rpx;
		height: 200rpx;
		display: block;
		padding-top: 50%;
		margin: 0 auto;
	}

	.nothing {
		width: 100%;
		height: 100vh;

		background-color: #fefefe;
	}

	.contractMask {
		background-color: #FFFFFF;
		margin: 30rpx;
		position: relative;
		border-radius: 4px;
		height: 96%;
		overflow: auto;

		.close {
			width: 23px;
			height: 23px;
			color: #1B66FF;
			position: fixed;
			right: 60rpx;
			top: 60rpx;
			transform: rotate(45deg);
			font-size: 40px;
		}

		.down {
			position: fixed;
			bottom: 30px;
			left: 14%;
			width: 545rpx;
			height: 90rpx;
			line-height: 90rpx;
			text-align: center;
			background: #1B66FF;
			font-size: 36rpx;
			font-weight: 400;
			color: #FFFFFF;
		}
	}

	.contractBoxList {
		padding: 30rpx 18rpx 26rpx 30rpx;
		margin-bottom: 20rpx;
		font-size: 14px;
		background-color: #FEFEFE;
		position: relative;

		.title {
			height: 32rpx;
			font-size: 32rpx;
			font-weight: 500;
			color: #333333;
			line-height: 32rpx;

		}

		.time {
			height: 38rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #999999;
			line-height: 38rpx;
		}

		.lookBtn {
			position: absolute;
			right: 18rpx;
			bottom: 34rpx;
			height: 33rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #007AFF;
			line-height: 33rpx;

		}
	}
</style>