<template>
	<view class="contaienr">
				 
					 
		<view class="searchbox">
			<u-search @search="searchKyeword"  @custom="searchKyeword" :showAction="true" v-model="keyword" actionText="搜索" :animation="true"></u-search>	
		</view>		
		 
		 
		 <view class="card_list" v-if="listData.length>0">
		 	<view class="item" v-for="(row, index) in listData">
		 		<view class="box">
					<view class="img">
						<image style="width:128rpx" class="icon" mode="widthFix" :src="row.spzp"></image>
					</view>
					<view>
						<view class="smtitle" style="position: relative;">
							{{row.spmc}}
						</view>
					</view>
					
					<view class="checkbox">
						<text v-if="row.lqzt=='4'" class="cancel">已取消</text>
						<text v-if="row.lqzt=='3'" class="have">已领取</text>
						<text v-if="row.lqzt=='2'" class="have">待领取</text>
						<text v-if="row.lqzt=='1'" class="have">待发送</text>
						<text class="num">x 1</text>
						
					</view>
				</view>
				
				<view class="info">	
					<view class="info_item">
						<view class="icon">
							<image class="icon_img" src="../../static/jf/icon_points_gray_16@2x.png" mode=""></image>
						</view>
						<view class="title">
								{{row.xhjf}}
						</view>
					</view>
					
					<view class="info_item">
						<view class="icon">
							<image class="icon_img" src="../../static/jf/icon_addresss_gray_16@2x.png" mode=""></image>
						</view>
						<view class="title">
							{{row.lqdd}}
						</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>
					<view style="padding: 12rpx 0;"><u-line dashed></u-line></view>
					
					<view class="info_item"  style="text-align: right;padding: 24rpx 0 0;display: inline-block;width: 100%;">
						<view class="button" @click="$u.func.route('/product/product/detail?id='+row.spId)">查看</view>
					</view>
				</view>
		 	</view>
		 </view>
		 
		 <u-empty v-else
		         mode="data"
		         icon="http://cdn.uviewui.com/uview/empty/car.png"
		 >
		 </u-empty>
					 
	</view>
</template>

<script>
	import { getDdList } from '@/api/jfsc.js'
	export default{
		data(){
			return{
				keyword:'',
				showMore:true,
				status: 'loadmore',
				listData:[],
				pages:{
					size: 10,
					total: 0,
					current:1,
				},
				cartList:[
				  {id:1,ishave:true,name:'金号毛巾纯棉加厚吸水 成人家用洗脸巾柔软',price:1000,count:1,img:'https://gw.alicdn.com/imgextra/O1CN01AQckRr1UNL8YJGGu0_!!2849252505.jpg'},
				  {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: '加载中'
				});
				getDdList('历史',this.keyword,this.pages.current).then(res=>{
					//this.pages.current++
					this.listData = res.data
					if(res.data.length<10 ) this.status = 'nomore';
					uni.hideLoading()
				}).finally(()=>{
					uni.hideLoading()
				})
			},
			back(){
				uni.switchTab({
				   url: "/pages/my/index", // 确保 url 是正确的
				 });
			},
		}
	}
</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: 6rpx 0;
					box-sizing: border-box;
					display: grid;
					grid-template-columns: 60rpx calc(100% - 60rpx);
					.icon{
						.icon_img{
							width: 32rpx;
							height: 32rpx;
						}
					}
					.title{
						
						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;
					}
				}
			}
			.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:  150rpx calc(100% - 250rpx) 100rpx;
					.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: 88rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 32rpx;
						color: #111111;
						line-height: 44rpx;
						text-align: left;
						font-style: normal;
						padding-left: 10rpx;
						box-sizing: border-box;
						display: -webkit-box;
						margin-top: 10px;
						  -webkit-box-orient: vertical;
						  -webkit-line-clamp: 2;
						  overflow: hidden;
						  text-overflow: ellipsis;
					}
					.checkbox{
						width: 32rpx;
						height: 32rpx;
						border-radius: 50%;
						margin-top: 10px;
						.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>