crm-xcx/pages-approve/contract/search.vue

<template>
	<view>
		<van-sticky>
			<view class="top-wrap">
				<view @click="handleBack">
					<van-search disabled use-left-icon-slot shape="round" :value="keyword" placeholder="客户名称/社会信用码">
						<view slot="left-icon">
							<image src="../static/search-icon.png" mode="aspectFill" class="search-icon"></image>
						</view>
					</van-search>
				</view>
			</view>
		</van-sticky>
		<van-empty description="暂无数据" :image="require('@/static/empty.png')" v-if="finished&&list.length===0"/>
		<view class="list-wrap" v-else>
			<view class="item white-wrap" v-for="item in list" :key="item.ContractCode" @click="handleGoDetail(item)">
				<view class="title flex">
					<image src="../../static/man.png" mode="aspectFill" class="icon"></image>
					<view>{{item.CompanyName}}</view>
				</view>
				<view class="message-content">
					<view class="info">合同期限：{{item.StartDateStr}}~{{item.EndDateStr}}</view>
					<view class="info">合同金额：<text style="color:#FF4343">{{item.Price}}</text></view>
					<view class="info">合同类型：{{item.ContractType}}</view>
					<view class="info">销&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;售：{{item.SellerName}}</view>
					<view class="info">更新时间：{{item.ModifyTimeStr}}</view>
				</view>
				<image :src="item.statusImg" mode="aspectFill" class="status-img"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import {apiContractList} from '@/api/approve/contract.js'
	export default{
		data() {
			return {
				keyword:'',
				list:[],
				page:1,
				finished:false
			}
		},
		onLoad(options) {
			this.keyword=options.val 
			this.getList()
		},
		methods: {
			handleBack(){
				uni.navigateBack({
					delta:1
				})
			},
			
			handleGoDetail(e){
				uni.navigateTo({
					url:`./detail?ContractId=${e.ContractId}&ContractApprovalId=0&ContractApprovalRecordId=0`
				})
			},
			
			async getList() {
				const res=await apiContractList({
					CurrentIndex:this.page,
					KeyWord:this.keyword
				})
				if(res.code===200){
					if(res.data.Paging.IsEnd){
						this.finished=true
					}
					let arr=res.data.List.map(item=>{
						let statusImg=''
						switch(item.Status){
							case '已作废':
								statusImg=require('../static/cancel-icon.png')
								break;
							case '已驳回':
								statusImg=require('../static/fail-icon.png')
								break;
							case '已审批':
								statusImg=require('../static/pass-icon.png')
								break;
							case '待审批':
								statusImg=require('@/pages-todomessages/static/icon-2.png')
								break;
						}
						return{
							...item,
							statusImg
						}
					})
					
					this.list=[...this.list,...arr]
				}
			}
		},
	}
</script>

<style lang="scss">
	.search-icon {
		width: 40rpx;
		height: 40rpx;
		display: block;
		position: relative;
		top: 4rpx;
		margin-right: 10rpx;
	}
	.list-wrap {
		padding: 20rpx;
		.item {
			padding: 30rpx;
			box-shadow: 0px 3px 12px rgba(175, 175, 175, 0.16);
			border-radius: 8px;
			margin-bottom: 20rpx;
			position: relative;
			.status-img{
				width: 184rpx;
				height: 184rpx;
				position: absolute;
				right: 0;
				top: 80rpx;
			}
			.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>