recruitment-wechat-uniapp-241012/pages_order/mine/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">
				<image src="../static/contract/contract.png" alt="" />
				<view class="itemList">
					<view class="projectName">
						xxxx电子合同
					</view>
					<view class="buyer">
						<!-- 甲方：湖南瀚海科技有限公司 -->
						{{ item.nameA }}
					</view>
					<view class="seller">
						<!-- 乙方：四川特能博世科技有限公司 -->
						{{ item.nameB }}
					</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 : 'bossQueryContractList',
			}
		},
		computed : {
			...mapState([
				'role', 
			]),
		},
		onLoad() {
			this.mixinsListApi = (this.role ? 'boss' : 'employee') + 'QueryContractList'
		},
		methods: {
			clickTabs({index}) {
				this.type = index
			},
			
		}
	}
</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>