<template>
	<view class="main">
		<p>选择您常使用的设备</p>
		<view class="desc">
			为您推荐更多相关信息
		</view>
		<view class="content">
			<u-grid :col="3">
				<view class="box" v-for="(item,index) in list" :class="isActive===index? 'click-hover':''"  @click="checked(index)">
					<image style="width: 150rpx; height: 150rpx;" :src="item.image_url" mode=""></image> 
					<p style="color: #3375d8ff;font-size: 30rpx;font-weight: 400;">{{item.name}}</p>
				</view>
			</u-grid>
		</view>
		<view class="bom">
			<u-button type="primary" @click="goIndex">进入平台</u-button>
		</view>
	</view>
</template>

<script>
	const { http } = uni.$u
	export default {
		data() {
			return {
				isActive:0,
				flag:'',
				list:[
					
				]
			}
		},
		methods: {
			goIndex(val){
				
				uni.$u.http.post('/api/common/add_category_rec',{
					ids:this.list.category_ids
				}).then(res => {
					console.log(res);
					if(this.flag == '买'){
						uni.reLaunch({
							url:`/pages/index/adIndex?val=buy`
						})
					}else{
						uni.reLaunch({
							url:`/pages/index/adIndex?val=sell`
						})
					}
					
				}).catch(err => {
					console.log(err);
				})
				
			},
			checked(idx){
				this.isActive = idx
				console.log(idx);
			}
		},
		onLoad(option) {
			console.log(option);
			this.flag = option.val
			uni.$u.http.get('/api/common/category_rec').then(res => {
				this.list = res.data
			}).catch(err => {
				console.log(err);
			})
		}
	}
</script>

<style scoped lang="scss">
.main{
	padding: 32rpx;
	p{
		color: #000000e6;
		font-size: 48rpx;
		font-weight: 500;
		margin: 24rpx 0 16rpx 0;
	}
	.content{
		margin-left: 3%;
	}
	.desc{
		color: #00000099;
		 font-size: 28rpx;
		 font-weight: 400;
		 margin-bottom: 56rpx;
	}
	.box{
		width: 31%;
		margin-right: 16rpx;
		margin-bottom: 16rpx;
		height: 286rpx;
		border-radius: 8rpx;
		opacity: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		background: #ffffffff;
	}
	.box:nth-child(3n+3){
		margin-right: 0;
	}
	.click-hover{
	
	background-color: #ecf2feff;
	
	}
	.bom{
		margin-bottom: 16rpx;
		position: fixed;
		bottom: 40rpx;
		width: 92%;
	}
}
</style>