recruitment-wechat-uniapp-241012/pages_order/contract/contract.vue

<template>
	<!-- 电子合同 -->
	<view>
		<navbar title="电子合同"
		leftClick 
		@leftClick="$utils.navigateBack"/>
		
		<view class="">
			<uv-tabs :list="tabs"
			lineColor="#3796F8"
			lineHeight="8rpx"
			lineWidth="50rpx"
			:scrollable="false"
			@click="clickTabs"></uv-tabs>
			
		</view>
		
		<view class="content">
			<view class="projectContent" v-for="(item, index) in list" :key="index">
				<view class="item">
					<image src="/static/image/contract/contract.png" mode="aspectFill"/>
					<view class="itemList">
						<view class="projectName">
							{{ item.title }}
							<text class="status" :class="{
								'status-pending': role ? item.bossStatus === 0 : item.employeeStatus === 0,
								'status-signed': role ? item.bossStatus === 1 : item.employeeStatus === 1,
								'status-completed': role ? item.bossStatus === 2 : item.employeeStatus === 2
							}">
								{{ role ? 
									(item.bossStatus === 0 ? '待签署' : item.bossStatus === 1 ? '已签署' : '已完成') :
									(item.employeeStatus === 0 ? '待签署' : item.employeeStatus === 1 ? '已签署' : '已完成')
								}}
							</text>
						</view>
						<view class="buyer">甲方：{{ item.companyName }}</view>
						<view class="seller">乙方：{{ item.employeeName }}</view>
					</view>
					<view class="actions">
						<view class="view-btn" @click="showPDF(item)">
							<uv-icon name="eye" color="#2979ff" size="30rpx"></uv-icon>
							<text>查看</text>
						</view>
						<view class="sign-btn" 
							v-if="(role && item.bossStatus === 0) || (!role && item.employeeStatus === 0)"
							@click.stop="$utils.navigateTo('/pages_order/contract/electronicSignature?id=' + item.id)">
							<uv-icon name="edit-pen" color="#fff" size="30rpx"></uv-icon>
							<text>签署</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import mixinList from '@/mixins/list.js'
	import { mapState } from 'vuex'
	export default {
		mixins : [mixinList],
		data() {
			return {
				tabs: [
					{
						name: '全部合同'
					},
					{
						name: '待我签署'
					},
					{
						name: '他人签署'
					},
					{
						name: '签约完成'
					},
				],
				type : 0,
				mixinsListApi : 'queryContractList',
			}
		},
		computed : {
		},
		onLoad() {
			this.queryParams.role = this.role ? 1 : 0
		},
		methods: {
			clickTabs({index}) {
				this.type = index
				if(index == 0){
					delete this.queryParams.status
				}
				this.queryParams.status = index
				this.getData()
			},
			showPDF(item){
				
				// this.$utils.
				// navigateTo('/pages_order/contract/contractDetail?id=' 
				// + item.id)
				
				// 只能查看内容的时候
				if(this.role && item.bossStatus != 0 ||
				item.employeeStatus != 0 && !this.role
				){
					uni.downloadFile({
						url : item.contract,
						success : res => {
							uni.openDocument({
								filePath: res.tempFilePath,
							})
						}
					})
					return
				}
				
				uni.showModal({
					title: '您希望的操作是？！',
					cancelText: '签署合同',
					confirmText: '查看内容',
					success : e => {
						if(e.confirm){
							uni.downloadFile({
								url : item.contract,
								success : res => {
									uni.openDocument({
										filePath: res.tempFilePath,
									})
								}
							})
						}else{
							this.$utils.
							navigateTo('/pages_order/contract/electronicSignature?id=' 
							+ item.id)
						}
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
.content {
	width: 100%;
	height: 100%;
	.projectContent {
		background-color: #fff;
		display: flex;
		margin: 30rpx;
		border-radius: 20rpx;
		.item{
			display: flex;
			width: 100%;
			padding: 20rpx;
			image {
				width: 140rpx;
				height: 120rpx;
				margin-right: 20rpx;
			}
			.itemList {
				flex: 1;
				.projectName {
					font-size: 32rpx;
					font-weight: bold;
					margin-bottom: 16rpx;
					display: flex;
					align-items: center;
					.status {
						font-size: 24rpx;
						padding: 4rpx 16rpx;
						border-radius: 20rpx;
						margin-left: 16rpx;
						&.status-pending {
							background-color: #E6F7FF;
							color: #1890FF;
						}
						&.status-signed {
							background-color: #F6FFED;
							color: #52C41A;
						}
						&.status-completed {
							background-color: #F5F5F5;
							color: #666666;
						}
					}
				}
				.buyer, .seller {
					font-size: 24rpx;
					color: #666;
					margin-top: 8rpx;
				}
			}
			.actions {
				display: flex;
				flex-direction: column;
				justify-content: center;
				gap: 16rpx;
				.view-btn, .sign-btn {
					display: flex;
					align-items: center;
					padding: 12rpx 24rpx;
					border-radius: 30rpx;
					background-color: #F0F7FF;
					text {
						color: #2979ff;
						font-size: 24rpx;
						margin-left: 8rpx;
					}
				}
				.sign-btn {
					background-color: #2979ff;
					text, uv-icon {
						color: #fff;
					}
				}
			}
		}
	}
}
</style>