<template>
	<view style="background-color: #fff;">
		<view class="font fixed">
			<uni-section type="line"
						style="margin-bottom: 3px;">
						<view class="box-bg">
							<uni-nav-bar  title="Pets" border="false">
								<block slot="left" >
									<!-- <view ><uni-icons type="back" size="30"></uni-icons></view> -->
									<view class="icon-all" @click="goback()"><image class="imgsize"src='../../static/icon/left.png'/></view>
									<view style="margin-left: 50rpx;" class="icon-all"><image class="imgsize"src='../../static/icon/search.png'/></view>
								</block>
								<block slot="right">
									<uni-badge class="uni-badge-left-margin" type="info"absolute="rightTop" :offset="[-22, -10]" :text="num" size="small"/>
									<view class="icon-b"><image class="imgsize"src='../../static/icon/cart.png'></view>	
								</block>
							</uni-nav-bar>
						</view>
			</uni-section>	
				
		<!-- 分类 -->
		<view class="classifity">
			<scroll-view scroll-x class="scroll_view">
			    <view class="tab">
			        <view  class="tab_item" v-for ="(item,index) in list" :key ="index" @click="tabActive(index)">
						<view style="width: 100rpx;"  :class="[index==tabNow?'select':'']">{{item.text}}</view>
						<!-- <view><uni-icons :type="item.icon" :size="item.size"></uni-icons></view> -->
						<view class="icon-a" :class="[index===3?'icon-b':'']"><image class="imgsize ":src="item.src"v-if="item.src!=''"/></view>
			        </view>
			    </view>
			</scroll-view>
		</view>
	</view>
	<view class="fg"></view>
		<view class="tar" v-for="(item,index) in pets" :key="index">
			<!-- 图片 -->
			<view class="img"><image :src="item.goods_img" class="imgsize"/></view>
			<!-- 文字 -->
			<view class="flex">
				<view class="tar_text">
					{{ item.short_name }}
				</view>
				<view class="tar-text2">{{ item.goods_sn}}</view>
				<view class="icon flex">
					<view style="margin: 10rpx;font-weight: bold; width: 120rpx;">US${{ item.shop_price }}</view>
					
					<!-- <view style="margin-left: 150rpx;"><uni-icons :type="heart" size="30" ></uni-icons></view>
					<view style="margin-left: 20rpx;"><uni-icons type="cart" size="30"></uni-icons></view> -->
					
					<view style="margin-left: 160rpx;"class="icon-b"><image class="imgsize" src="../../static/icon/heart.png"/></view>
					<view style="margin-left: 30rpx;"><uni-icons type="cart" size="30"></uni-icons></view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import {defaultRequest} from '../../api/index.js'
	export default {
		data(){
			return{
				list:[
					{icon:'',text:'Synthesis',src:''},
					{icon:'bottom',size:15,text:'Sales',src:'../../static/icon/back.png'},
					{icon:'top',size:15,text:'Prise',src:'../../static/icon/back.png'},
					{icon:'settings-filled',size:30,text:' | ',src:'../../static/icon/all.png'}

				],
				tabNow:0,
				heart:'heart-filled',
				num:13,
				query:{
					_action:'getgoods',
					order_type:0,
					page_index:1,
					pagesize:10,
					cat:'',
				},
				pets:[]
			}
			
		},
		onLoad(e) {
			console.log(e,'数据')
			this.query.cat = e.cat_id
			console.log(this.query.cat,'jjjjj')
			this.getpets()
		},
		onPullDownRefresh() {
			this.getpets()
			setTimeout(function () {
						uni.stopPullDownRefresh();
					}, 1000);
		},
		methods:{
			tabActive(i){
				console.log(i)
				this.tabNow = i
			},
			goback(){
				console.log('ppppp')
				uni.navigateBack({
					delta:1
				})
			},
			getpets(){
				defaultRequest(this.query).then( res =>{
					// console.log(res,'res')
					this.pets = res.data
					console.log(res.data,'res')
				})
			}
		}
	}
</script>

<style>
	.flex{
		display: flex;
		flex-direction: column;
	}
	.bg-white{
		background-color: #fff;
	}
	.font{
		height: 200rpx;
		background-color: #fff;
		padding: 60rpx 5rpx 0 5rpx  ;		
	}
	.fixed{
		position: fixed;
		z-index: 99;
	}
	.icon-a{
		height: 18rpx;
		width: 18rpx;
	}
	.icon-b{
		height: 40rpx;
		width: 40rpx;
		margin: 10rpx;
	}
	.icon-all{
		height: 30rpx;
		width:30rpx ;
	}
	.imgsize{
		width: 100%;
		height: 100%;
	}
	.scroll_view {
	  background-color: #fff;
	  white-space: nowrap;
	}
	
	.tab {
	  display: flex;
	  text-align: center;
	}
	
	.tab .tab_item {
	  height: 90rpx;
	  display: flex;
	  line-height: 90rpx;
	  margin:0 10rpx;
	  padding: 0 20rpx;
	  flex: 1;
	}
	.tab_item view:nth-child(1){
		/* margin-left: 10rpx; */
		text-align: center;
	}
	.fg{
		height: 200rpx;
		background-color: #fff;
		
	}
	.tar{
		height: 240rpx;
		background-color: #fff;
		padding: 18rpx 15rpx 5rpx 15rpx;
		display: flex;
		margin: 20rpx 0;
	}
	.img{
		height:200rpx ;
		width:200rpx ;
		margin: 20rpx 10rpx;
		background-color: #ccc;
	}
	.tar_text{
		width: 60vw;
		height: 70rpx;
		padding: 6rpx;
		margin: 10rpx 20rpx;
		font-size: 28rpx;
		overflow: hidden;
		white-space: wrap;
		text-overflow: ellipsis;
		

		
	}
	.tar-text2{
		color:#B22234;
		line-height: 50rpx;
		text-align: center;
		width: 200rpx;
		background:#fcf0f1;
		border-radius: 10rpx;
		font-size: 20rpx;
		margin: 5rpx 2rpx;
	}
	.icon{
		flex-direction: row;
		/* justify-content: center; */
		align-items: center;
		margin: 10rpx 10rpx;
	}
	.select{
		font-weight: 900;
	}
</style>