<template>
	<view>
		<view class="uni-product-list">
			<view class="uni-product" v-for="(product,index) in productList" :key="index" @tap="onClick(product)">
				<view class="image-view">
					<image v-if="renderImage" class="uni-product-image" :src="product.image"></image>
				</view>
				<view class="xiabufen">
					<view class="u-flex" style="align-items: center;">
						<view class="uni-product-title">
						{{product.title}}
						</view>
					</view>
					<view class="quan_fan u-flex u-m-l-10 u-m-t-20">
						<view class="quan u-flex u-m-r-10">
							<view class="u-m-r-10">券</view>
							{{product.quan}}元
						</view>
						<view class="fan">返{{product.fan}}元</view>
					</view>
					<view class="uni-product-price">
						<view class="uni-product-price-original">
							￥<text style="font-size: 45rpx;">{{product.favourPrice}}</text>
						</view>
						<text class="uni-product-price-favour">销量{{product.xiaoliang}}</text>
					</view>
				</view>
			</view>
		</view>
		<u-loadmore :status="status" style="margin: 30upx 0;"/>
	</view>
</template>

<script>
	import {dumpUrl} from '@/common/util.js'
	export default {
		data() {
			return {
				productList: [
					{
						image: 'https://gd2.alicdn.com/imgextra/i2/4065419919/O1CN010QvQFi2N8xCB2XPcg_!!4065419919.jpg',
						title: '秋装衬衫女2020新款设计款拼接雪纺长袖修身褶皱设计短款显瘦上衣',
						xiaoliang:568,
						favourPrice: 385,
						fan: 15.36,
						quan:10.56
					},
					{
						image: 'https://gd2.alicdn.com/imgextra/i3/1705527408/O1CN013NT7V724auglAR2Va_!!1705527408.jpg',
						title: '酒红色回门羽绒棉服工装派克服女2020新款冬加厚加绒chic棉衣外套',
						xiaoliang: 784,
						favourPrice: 385,
						fan: 15.36,
						quan:10.56
					},
					{
						image: 'https://gd2.alicdn.com/imgextra/i1/428737731/O1CN01aibsRJ26yqZQcxh12_!!428737731.jpg',
						title: '蕾丝拼接短袖T恤女夏季2020年新款女装韩版宽松打底衫',
						xiaoliang: 784,
						favourPrice: 385,
						fan: 15.36 ,
						quan:10.56
					},
					{
						image: 'https://gd2.alicdn.com/imgextra/i4/2190215769/O1CN01liaY491sUFXNudPVU_!!2190215769.jpg',
						title: 'JMSHOP 清潭洞欧尼 高级中长款西装大衣冬季新款灰色毛呢外套女',
						xiaoliang: 784,
						favourPrice: 385,
						fan: 15.36 ,
						quan:10.56
					},
					{
						image: 'https://gd2.alicdn.com/imgextra/i2/4065419919/O1CN010QvQFi2N8xCB2XPcg_!!4065419919.jpg',
						title: '秋装衬衫女2020新款设计款拼接雪纺长袖修身褶皱设计短款显瘦上衣',
						xiaoliang:568,
						favourPrice: 385,
						fan: 15.36,
						quan:10.56
					},
					{
						image: 'https://gd2.alicdn.com/imgextra/i3/1705527408/O1CN013NT7V724auglAR2Va_!!1705527408.jpg',
						title: '酒红色回门羽绒棉服工装派克服女2020新款冬加厚加绒chic棉衣外套',
						xiaoliang: 784,
						favourPrice: 385,
						fan: 15.36,
						quan:10.56
					},
					{
						image: 'https://gd2.alicdn.com/imgextra/i1/428737731/O1CN01aibsRJ26yqZQcxh12_!!428737731.jpg',
						title: '蕾丝拼接短袖T恤女夏季2020年新款女装韩版宽松打底衫',
						xiaoliang: 784,
						favourPrice: 385,
						fan: 15.36,
						quan:10.56
					},
					{
						image: 'https://gd2.alicdn.com/imgextra/i4/2190215769/O1CN01liaY491sUFXNudPVU_!!2190215769.jpg',
						title: 'JMSHOP 清潭洞欧尼 高级中长款西装大衣冬季新款灰色毛呢外套女',
						xiaoliang: 784,
						favourPrice: 385,
						fan: 15.36 ,
						quan:10.56
					}
				],
				renderImage: true,
				status: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了'
				}
			};
		},
		onReachBottom() {
			if(this.page >= 1) return ;
			this.status = 'loading';
			this.page = ++ this.page;
			setTimeout(() => {
				this.list += 10;
				if(this.page >= 1) this.status = 'nomore';
				else this.status = 'loading';
			}, 2000)
		},
		props: {
			// 导航栏高度，单位px，非rpx
			tplName: {
				type: String,
				default: ''
			}
		},
		
		
		methods: {
			onClick(product){
				let _this = this;
				console.log(1111)
				dumpUrl('/pages/product/product')
			}
		}
	}
</script>

<style>
	/* product */
	.uni-product-list {
	    display: flex;
	    width: 100%;
	    flex-wrap: wrap;
	    flex-direction: row;
	}
	
	.uni-product {
	    padding: 30upx 0 0 24upx;
	    display: flex;
	    flex-direction: column;
	}
	
	.image-view {
	    height: 340upx;
	    width: 340upx;
	}
	
	.uni-product-image {
	    height: 100%;
	    width: 100%;
		border-top-left-radius: 15upx;
		border-top-right-radius: 15upx;
	}
	
	.uni-product-title {
	    width: 298upx;
		padding: 10upx 0 0 10rpx;
	    word-break: break-all;
	    display: -webkit-box;
	    overflow: hidden;
		line-height:2;
	    text-overflow: ellipsis;
	    -webkit-box-orient: vertical;
	    -webkit-line-clamp: 1;
	}
	
	.uni-product-price {
		padding:10rpx;
		margin-top:10upx;
	    font-size: 28upx;
		line-height:1.5;
	    display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.uni-product-price-original {
	    color: #894608;
		font-weight: bold;
	}
	
	.uni-product-price-favour {
	    color: #888888;
	    margin-left: 10upx;
		font-size: 22rpx;
	}
	
	.xiabufen{
		padding-bottom: 10upx;
		border: 1px solid #eee;
		border-top:none;
		border-bottom-left-radius: 15upx;
		border-bottom-right-radius: 15upx;
	}
	.quan_fan .quan{
		padding: 5rpx 10rpx;
		border-radius: 10rpx;
		background:#dfa062;
		color: #fff;
	}
	.quan_fan .quan view{
		padding: 0 8rpx;
		background: #fff;
		color: #894608;
		border-radius: 10rpx;
		font-size: 20rpx;
	}
	.quan_fan .fan{
		color: #ff2146;
		background: #fbd868;
		padding: 5rpx 10rpx;
		border-radius: 10rpx;
	}
</style>
