jsh_erp_app/components/task-item/task-item.vue

<template>
	<view class="task-item">
		<view class="task-head">
			<view class="sn-box">单据编号：CGDD00000000692</view>
			<view v-if="type == 'caigou'">
				<view class="tips tips-red" v-if="item.type == 0">待入库</view>
				<view class="tips tips-greed" v-if="item.type == 1">已入库</view>
			</view>
			<view v-else>
				<view class="tips tips-red" v-if="item.type == 0">待拣货</view>
				<view class="tips tips-greed" v-if="item.type == 1">已拣货</view>
			</view>
		</view>
		<view class="task-line" v-if="type == 'caigou'">
			<view>供应商：</view>
			<view>张三贸易有限公司</view>
		</view>
		<view class="task-line" v-else>
		<view>客户名称：</view>
		<view>快马阳光便利店</view>
		</view>
		<view class="task-line">
			<view>单据日期：</view>
			<view>2021-11-21 00:00:03</view>
		</view>
		<view class="task-line">
			<view class="task-line2">
				<view>货物总数：</view>
				<view class="task-num">55件</view>
			</view>
			<view class="task-line2">
				<view>货物种类：</view>
				<view class="task-num">55件</view>
			</view>
		</view>
		<view class="task-bottom">
			<view v-if="type == 'caigou'">
				<view class="btn btn-1" v-if="item.type == 0" @click="toStorage">去入库</view>
				<view class="btn btn-2" v-if="item.type == 1" @click="toDetail">详情</view>
			</view>
			<view v-else>
				<view class="btn btn-1" v-if="item.type == 0" @click="toStorage">去出库</view>
				<view class="btn btn-2" v-if="item.type == 1" @click="toDetail">详情</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			item:{
				type:Object,
				default:()=>{}
			},
			type: {
				type:String,
				default:''
			}
		},
		data() {
			return{
				
			}
		},
		methods:{
			toStorage() {
				this.$emit('toStorage')
			},
			toDetail() {
				this.$emit('toDetail',this.item)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.task-item {
		width: 100%;
		background-color: #fff;
		border-radius: 16rpx;
		padding: 24rpx 24rpx 0;
		margin-bottom: 24rpx;
		.task-head {
			display: flex;
			align-items: center;
			justify-content: space-between;
			.sn-box {
				color: #333;
				font-family: "PingFang SC";
				font-size: 28rpx;
				font-weight: 500;
			}
			.tips {
				font-family: "PingFang SC";
				font-size: 22rpx;
				font-weight: 400;
				width: 120rpx;
				height: 44rpx;
				border-radius: 8rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.tips-red {
				color: #FF3B1D;
				background: rgba(255, 59, 29, 0.20);
			}
			.tips-greed {
				color: #00B97B;
				background: rgba(0, 185, 123, 0.20);
			}
		}
	
		.task-line {
			display: flex;
			align-items: center;
			color: #666;
			font-family: "PingFang SC";
			font-size: 28rpx;
			font-weight: 400;
			margin-top: 16rpx;
		}
		.task-line2 {
			width: 50%;
			display: flex;
			align-items: center;
			.task-num {
				color: #0256FF;;
			}
		}
	
		.task-bottom {
			border-top: 1px solid #F0F0F0;
			margin-top: 32rpx;
			height: 104rpx;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			.btn {
				width: 144rpx;
				height: 56rpx;
				border-radius: 8rpx;
				font-size: 28rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: "PingFang SC";
			}
			.btn-1 {
				background: #0256FF;
				color: #FFF;
			}
			.btn-2 {
				border: 1px solid #0256FF;
				background: rgba(2, 86, 255, 0.20);
				color: #0256FF;
			}
		}
	}
</style>