<template>
	<view>
		<view class="uni-product-list">
			<view class="uni-product u-flex" 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 style="width: 67%;margin-left: 3%;">
					<view class="xiabufen">
						<view class="uni-product-title">
							{{product.title}}
						</view>
						<view class="uni-product-price u-flex">
							<view class="uni-product-price-original"><text style="font-size:42rpx;font-weight: bold;margin-right: 2%;">{{product.favourPrice}}</text> 元券后价</view>
							<view class="uni-product-price-favour">销量{{product.xiaoliang}}</view>
						</view>
					</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
					},
					{
						image: 'https://gd2.alicdn.com/imgextra/i3/1705527408/O1CN013NT7V724auglAR2Va_!!1705527408.jpg',
						title: '酒红色回门羽绒棉服工装派克服女2020新款冬加厚加绒chic棉衣外套',
						xiaoliang: 784,
						favourPrice: 385
					},
					{
						image: 'https://gd2.alicdn.com/imgextra/i1/428737731/O1CN01aibsRJ26yqZQcxh12_!!428737731.jpg',
						title: '蕾丝拼接短袖T恤女夏季2020年新款女装韩版宽松打底衫',
						xiaoliang: 784,
						favourPrice: 385
					},
					{
						image: 'https://gd2.alicdn.com/imgextra/i4/2190215769/O1CN01liaY491sUFXNudPVU_!!2190215769.jpg',
						title: 'JMSHOP 清潭洞欧尼 高级中长款西装大衣冬季新款灰色毛呢外套女',
						xiaoliang: 784,
						favourPrice: 385
					},
					{
						image: 'https://gd2.alicdn.com/imgextra/i2/4065419919/O1CN010QvQFi2N8xCB2XPcg_!!4065419919.jpg',
						title: '秋装衬衫女2020新款设计款拼接雪纺长袖修身褶皱设计短款显瘦上衣',
						xiaoliang:568,
						favourPrice: 385
					},
					{
						image: 'https://gd2.alicdn.com/imgextra/i3/1705527408/O1CN013NT7V724auglAR2Va_!!1705527408.jpg',
						title: '酒红色回门羽绒棉服工装派克服女2020新款冬加厚加绒chic棉衣外套',
						xiaoliang: 784,
						favourPrice: 385
					},
					{
						image: 'https://gd2.alicdn.com/imgextra/i1/428737731/O1CN01aibsRJ26yqZQcxh12_!!428737731.jpg',
						title: '蕾丝拼接短袖T恤女夏季2020年新款女装韩版宽松打底衫',
						xiaoliang: 784,
						favourPrice: 385
					},
					{
						image: 'https://gd2.alicdn.com/imgextra/i4/2190215769/O1CN01liaY491sUFXNudPVU_!!2190215769.jpg',
						title: 'JMSHOP 清潭洞欧尼 高级中长款西装大衣冬季新款灰色毛呢外套女',
						xiaoliang: 784,
						favourPrice: 385
					}
				],
				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)
		},
		methods: {
			onClick(product){
				let _this = this;
				console.log(1111)
				// dumpUrl('/pages/product/product')
				dumpUrl('/other/gongzhonghao/gongzhonghao')
			}
		}
	}
</script>

<style>
	/* product */
	.uni-product {
		margin-top: 30rpx;
		padding: 20rpx 25rpx;
		background: #fff;
		border-radius: 10px;
		align-items: flex-end;
	}
	
	.image-view {
	    width: 220upx;
	    height: 220upx;
	}
	
	.uni-product-image {
	    height: 100%;
	    width: 100%;
	}
	
	.uni-product-title {
	    word-break: break-all;
	    display: -webkit-box;
	    overflow: hidden;
		line-height:1.5;
	    text-overflow: ellipsis;
	    -webkit-box-orient: vertical;
	    -webkit-line-clamp: 2;
		color: #515151;
	}
	
	.uni-product-price {
		margin-top: 40rpx;
		padding:10rpx;
	    font-size: 25rpx;
		line-height:1.5;
		justify-content: space-between;
		 color: #888888;
	}
	
	.uni-product-price-original {
		width: 60%;
	    color: #854a17;
	}
</style>
