jdrh_xcx/jyzPage/jyz/csjl.vue

<template>
	<view class="contaienr">
	
		<view class="searchbox">
			<u-search @search="searchKyeword" @custom="searchKyeword" :showAction="true" actionText="搜索" :animation="true"></u-search>	
		</view>		
			 
		 <view class="card_list">
			 <view class="item" v-for="(row, index) in listData">
				 <view class="box">
				 	<view class="img">
				 		<image style="width:48rpx" class="icon" mode="widthFix" src="../../static/jf/icon_place_blue_24@2x.png"></image>
				 	</view>
				 	<view>
				 		<view class="smtitle" style="position: relative;">
				 			{{row.gmfmc}}
				 		</view>
				 	</view>
				 </view>
				 
				 <view class="info">
				 	<view class="info_item">
				 		<view class="icon">
				 			<image class="icon_img" src="../../static/jf/icon_oil_gray_16@2x.png" mode=""></image>
				 		</view>
				 		<view class="title">
				 			{{row.gmqyxh}}
				 		</view>
				 	</view>
				 	
				 	<view class="info_item">
				 		<view class="icon">
				 			<image class="icon_img" src="../../static/jf/icon_amount_gray_16@2x.png" mode=""></image>
				 		</view>
				 		<view class="title">
				 			{{row.gmss}}
				 		</view>
				 	</view>
				 	
				 	<view class="info_item">
				 		<view class="icon">
				 			<image class="icon_img" src="../../static/jf/icon_time_gray_16@2x.png" mode=""></image>
				 		</view>
				 		<view class="title">
				 			{{row.createTime}}
				 		</view>
				 	</view>
				 	<u-line dashed></u-line>
				 	
				 	<view class="info_item"  style="text-align: right;padding: 24rpx 0 0;display: inline-block;width: 100%;">
				 		<view class="button"  @click="goPage(row)">查看</view>
				 	</view>
				 </view>
			</view>
		</view>
	</view>
</template>

<script>
	import { jyzSellPage } from '@/api/jfsc.js'
	export default{
		data(){
			return{
				keyword:'',
				listData:[],
				pages:{
					size: 10,
					total: 0,
					current:1,
				},
				cartList:[
				  {id:1,ishave:true,name:'吉林省玄武科技有限公司（经办人 周琦）',price:1000,count:1,img:''},
				  {id:2,ishave:false,name:'李思思',price:800,count:1,img:'https://gw.alicdn.com/imgextra/O1CN01AQckRr1UNL8YJGGu0_!!2849252505.jpg'},
				  {id:3,ishave:true,name:'吉林省玄武科技有限公司（经办人 周琦）',price:1200,count:1,img:'https://gw.alicdn.com/imgextra/O1CN01AQckRr1UNL8YJGGu0_!!2849252505.jpg'}
				]
			
			}
		},
		onLoad() {
			this.inits()
		},
		methods:{
			searchKyeword(){
				this.inits()
			},
			inits(){
				uni.showLoading({
					title: '加载中'
				});
				jyzSellPage(this.keyword,this.pages.current).then(res=>{
					//this.pages.current++
					this.listData = res.data.records
					if(res.data.length<10 ) this.status = 'nomore';
				}).finally(()=>{
					uni.hideLoading()
				})
			},
			back(){
				uni.switchTab({
					   url: "/pages/my/index", // 确保 url 是正确的
					 });
			},
			
			goPage(row){
				if(row.gmflx==1){
					uni.navigateTo({
						url:`/jyzPage/jyz/personjl?id=${row.id}`
					})
				}else{
					uni.navigateTo({
						url:`/jyzPage/jyz/qiyejl?id=${row.id}`
					})
				}
				
			}
		}
	}
</script>

<style lang="scss">
	/deep/ .uni-navbar__content{
		border-bottom: none !important;
	}
	.contaienr{
		padding: 0 24rpx;
		box-sizing: border-box;
		background: #F8F8F8;
		position: relative;
		min-height: 100vh;
		.searchbox{
			padding: 24rpx 0;
			box-sizing: border-box;
		}
		.card_list{
			border-radius: 24rpx;
			box-sizing: border-box;
			.info{
				padding: 24rpx 12rpx 0;
				box-sizing: border-box;
				.info_item{
					padding: 8rpx 0;
					box-sizing: border-box;
					display: grid;
					grid-template-columns:60rpx calc(100% - 60rpx);
					.icon{
						.icon_img{
							width: 32rpx;
							height: 32rpx;
						}
					}
					.title{
						height: 40rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #666666;
						line-height: 40rpx;
						text-align: left;
						font-style: normal;
					}
					.button{
						width: 160rpx;
						height: 64rpx;
						background: linear-gradient( to top, #65CBFF 0%, #0260FE 100%);
						border-radius: 32rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 32rpx;
						color: #FFFFFF;
						line-height: 64rpx;
						text-align: center;
						font-style: normal;
						float: right;
					}
					.dlq{
						background: #FFFFFF;
						box-shadow: 0rpx 2rpx 16rpx 0rpx rgba(0,0,0,0.08);
						border-radius: 16rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #106DFF;
						line-height: 40rpx;
						text-align: right;
						font-style: normal;
						float: right;
					}
				}
			}
			.item{
				margin-bottom: 12rpx;
				background: linear-gradient( 180deg, #F0F5FF 0%, #FFFFFF 100%);
				border-radius: 16rpx;
				border: 2rpx solid #FFFFFF;
				padding: 24rpx;
				box-sizing: border-box;
				border-radius: 24rpx;
				
				.box{
					display: grid;
					grid-template-columns:  80rpx calc(100% - 80rpx);
					.control{
						display: grid;
						grid-template-columns: 50% 50%;
						.num{
							height: 44rpx;
							font-family: DIN, DIN;
							font-weight: 500;
							font-size: 36rpx;
							color: #FF1D1D;
							line-height: 44rpx;
							text-align: left;
							font-style: normal;
							padding-left: 10rpx;
							box-sizing: border-box;
						}
					}
					.img{
						text-align: center;
						.icon{
							height: 128rpx;
							border-radius: 16rpx;
							
						}
						
					}
					.smtitle{
						height: 48rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 32rpx;
						color: #111111;
						line-height: 48rpx;
						text-align: left;
						font-style: normal;
						padding-left: 10rpx;
						box-sizing: border-box;
						display: -webkit-box;
						  -webkit-box-orient: vertical;
						  -webkit-line-clamp: 2;
						  overflow: hidden;
						  text-overflow: ellipsis;
					}
					.checkbox{
						width: 32rpx;
						height: 32rpx;
						border-radius: 50%;
						margin-top: 23px;
						.cancel{
							display: inline-block;
							width: 88rpx;
							height: 40rpx;
							background: rgba(153,153,153,0.1);
							border-radius: 8rpx;
							height: 32rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 500;
							font-size: 24rpx;
							color: #999999;
							line-height: 40rpx;
							text-align: center;
							font-style: normal;
						}
						.have{
							display: inline-block;
							width: 88rpx;
							height: 40rpx;
							background: rgba(153,153,153,0.1);
							border-radius: 8rpx;
							height: 32rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 500;
							font-size: 24rpx;
							color: #106DFF;
							line-height: 32rpx;
							text-align: center;
							font-style: normal;
						}
						.num{
							display: inline-block;
							width: 88rpx;
							height: 40rpx;
							height: 32rpx;
							font-family: DIN, DIN;
							font-weight: 500;
							font-size: 24rpx;
							color: #999999;
							line-height: 32rpx;
							text-align: center;
							font-style: normal;
						}
					}
					.isSelect{
						background: linear-gradient(to bottom,#0260FE,#61C6FF);
					}
				}
			}
		}
	}
	
</style>