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"
			@click="showPDF(item)"
			:key="index">
				<image src="/static/image/contract/contract.png" mode="aspectFill"/>
				<view class="itemList">
					<view class="projectName">
						<!-- xxxx电子合同 -->
						{{ item.title }}
					</view>
					<view class="buyer">
						<!-- 甲方：湖南瀚海科技有限公司 -->
						甲方：{{ item.companyName }}
					</view>
					<view class="seller">
						<!-- 乙方：四川特能博世科技有限公司 -->
						乙方：{{ item.employeeName }}
					</view>
				</view>
				<view class="run">
					<uv-icon 
					name="arrow-right" 
					color="#2979ff" 
					size="30rpx"></uv-icon>
				</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
				this.getData()
			},
			showPDF(item){
				
				this.$utils.
				navigateTo('/pages_order/contract/contractDetail?id=' 
				+ item.id)
				
				
				// 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/contractDetail?id=' 
				// 			+ item.id)
				// 		}
				// 	}
				// })
			},
		}
	}
</script>

<style scoped lang="scss">
	.content {
		width: 100%;
		height: 100%;
		.projectContent {
			background-color: #fff;
			display: flex;
			margin: 30rpx;
			border-radius: 20rpx;
			image {
				width: 140rpx;
				height: 120rpx;
				margin: 20rpx;
			}
			.itemList {
				margin: 28rpx 10rpx;
				.projectName {
					font-size: 32rpx;
				}
				.buyer {
					font-size: 24rpx;
				}
				.seller {
					font-size: 24rpx;
				}
			}
			.run{
				margin: auto;
				margin-right: 30rpx;
				height: 60rpx;
				width: 60rpx;
				border-radius: 50%;
				border: 1px solid $uni-color;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
</style>