crm-xcx/pages-approve/components/approveListItem.vue

<template>
	<view class="message-item white-wrap" @click="handleGoDetail">
		<view class="title flex">
			<image src="../../static/man.png" mode="aspectFill" class="icon"></image>
			<view>{{data.title}}</view>
		</view>
		<view class="message-content">
			<view class="info">申请销售：{{data.saller}}</view>
			<view class="info">申请类型：{{data.applyType}}</view>
			<view class="info" v-if="data.status==='待审批'||data.status==='处理中'">提交时间：{{data.submitTime|formatTime}}</view>
			<view class="info" v-if="data.status==='已审批'||data.status==='已驳回'">审批时间：{{data.approveTime|formatTime}}</view>
			<view class="info" v-if="data.status==='已撤回'">撤回时间：{{data.backTime|formatTime}}</view>
			<view class="info" v-if="data.status==='已作废'">作废时间：{{data.cancelTime|formatTime}}</view>
			<view class="info" v-if="data.status==='已签回'">签回时间：{{data.checkBackTime|formatTime}}</view>
			<view class="info" v-if="data.status==='待提交'">保存时间：{{data.ModifyTime|formatTime}}</view>
			<view class="info" v-if="data.status==='已解约'">解约时间：{{data.RescindTime|formatTime}}</view>
		</view>
		<view class="status approve-list-status-wait" v-if="data.status==='待审批'">待审批</view>
		<view class="status approve-list-status-wait" v-if="data.status==='待提交'">待提交</view>
		<view class="status approve-list-status-doing" v-if="data.status==='处理中'">处理中</view>
		<view class="status approve-list-status-success" v-if="data.status==='已审批'">已审批</view>
		<view class="status approve-list-status-fail" v-if="data.status==='已驳回'">已驳回</view>
		<view class="status approve-list-status-cancel" v-if="data.status==='已作废'">已作废</view>
		<view class="status approve-list-status-cancel" v-if="data.status==='已解约'">已解约</view>
		<view class="status approve-list-status-back" v-if="data.status==='已撤回'">已撤回</view>
		<view class="status approve-list-status-success" v-if="data.status==='已签回'">已签回</view>
	</view>
</template>

<script>
	export default {
		props:{
			/**
			 * {title:标题,
			 * saller:申请销售,
			 * applyType:申请类型,
			 * submitTime:提交时间,
			 * approveTime:审批时间,
			 * backTime:撤回时间,
			 * cancelTime:作废时间,
			 * checkBackTime:签回时间
			 * ModifyTime:修改时间
			 * RescindTime:解约事件
			 * status:状态,
			 * type:类型(客户custome、合同contract、用印seal)
			 * id:审批单id
			 * ContractApprovalId:审批单id
			 * ContractApprovalRecordId:审批流程单id
			 * ContractId:合同id}
			 */
			data:null
		},
		methods: {
			handleGoDetail() {
				if(this.data.type==='custome'){
					uni.navigateTo({
						url:'/pages-approve/custome/detail?id='+this.data.id
					})
				}
				
				if(this.data.type==='contract'){
					uni.navigateTo({
						url:`/pages-approve/contract/detail?ContractApprovalId=${this.data.ContractApprovalId}&ContractApprovalRecordId=${this.data.ContractApprovalRecordId}&ContractId=${this.data.ContractId}`
					})
				}
				
				if(this.data.type==='seal'){
					uni.navigateTo({
						url:`/pages-approve/seal/detail?ContractApprovalId=${this.data.ContractApprovalId}&ContractApprovalRecordId=${this.data.ContractApprovalRecordId}&SealId=${this.data.SealId}`
					})
				}
			}
		},
	}
</script>

<style lang="scss">
	.message-item {
		padding: 30rpx;
		box-shadow: 0px 3px 12px rgba(175, 175, 175, 0.16);
		border-radius: 8px;
		margin-bottom: 20rpx;

		.title {
			font-size: 16px;
			font-weight: bold;
			margin-bottom: 30rpx;

			.icon {
				width: 31rpx;
				height: 34rpx;
				flex-shrink: 0;
				margin-right: 10rpx;
				position: relative;
				top: 4rpx;
			}
		}

		.message-content {
			font-size: 14px;
			color: #666;
			.info {
				margin-bottom: 16rpx;
			}

			.info:last-child {
				margin-bottom: 0;
			}
		}

		.status {
			text-align: right;
		}
	}
</style>