cesuan/pages/jiwuchangshi/jiwuchangshi.vue

<template>
	<view class="page">
		<view class="box_1">
			<view class="nav-bar_1">
				<view @click="goback" class="arr-right">&lt;&lt;&lt;</view>
				<view class="arr-left">吉物常识</view>
			</view>
		</view>
		<view class="content">
<!-- 			<view class="searchfrm">
				<view class="searchicon"></view>
				<view><input type="text"></view>
			</view> -->
			<view class="catlist">
				<view v-if="showtype==0||showtype==cat.type" class="catitem" v-for="(cat, index) in catlist" :key="index">
					<view @click="toggle(index)" class="cattitle">&gt;&gt;&gt;《&nbsp;{{cat.name}}&nbsp;》&lt;&lt;&lt;</view>
					<view  v-show="cat.isshow" class="artlist">
						<view class="artlist-f">
							<view @click="jumdetail(art.goods_id)" style="position: relative;"  v-for="(art, index2) in cat.list" :key="index2">
								<view ><img class="artimg" :src="art.image" alt=""></view>
								<view class="arttitle">{{art.name}}</view>
								<view class="artprice">￥&nbsp;{{art.price}}</view>
								<view class="artregionprice">原价&nbsp;￥&nbsp;{{art.scribe_price}}</view>
							</view>
						</view>
						
					</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	import * as Api from '@/api/goods'
	export default {
		data() {
			return {
				catlist:[
					{
						category_id:1,
						'name':'饰品',
						isshow:true,
						'list':[

						]
					},
					
					{
						category_id:2,
						'name':'字画',
						isshow:false,
						'list':[
					
						]
					},
					{
						category_id:3,
						'name':'摆件',
						isshow:false,
						'list':[
					
						]
					},
					{
						category_id:4,
						'name':'日用',
						isshow:false,
						'list':[
					
						]
					},
				],
				showtype:0
			}
		},
		onLoad(options)
		{
			// if(options.type)
			// {
			// 	this.showtype = options.type;
			// 	this.getPageData(options.type);
			// }
			// else
			// {
			// 	this.getPageData(0);
			// }
			this.showtype = 0;
			this.getPageData(0);
		},
		methods: {
			jumdetail(goods_id)
			{
				this.$navTo('pages/goodsdetail/goodsdetail',{goods_id:goods_id});
			},
			getPageData(type)
			{
				var app = this;
				if(type==0)
				{
					Api.categoryList()
					  .then(result => {
						var catlist = result.data;
							catlist.forEach((item,index)=>{
		
								catlist[index].isshow = false;
								Api.goodsList({category_id:item.id})
								  .then(result => {
									var goodslist=result.data.list;
									catlist[index].isshow = true;
									goodslist.isshow = true;
									
									goodslist.forEach((goods,goodsindex)=>{
										goodslist.isshow = false;
										
									});
									  
									catlist[index].list = goodslist;
											
									});
									
							  })
						 app.catlist = catlist;
						 console.log(app.catlist );
				   })
			   }
			   else
			   {
				   
				   Api.goodsList({category_id:type})
				     .then(result => {
				   	var goodslist=result.data.list;
					
				   	goodslist.forEach((goods,goodsindex)=>{
				   		goodslist.isshow = true;
				   		
				   	});
				   	  
					app.catlist[type-1].isshow = true;
				   	app.catlist[type-1].list = goodslist;
					console.log(app.catlist);
				   			
				   	});
			   }
			},
			goback()
			{
				this.$navTo('pages/learn/learn')
			},
			toggle(index)
			{
				this.catlist.forEach((cat,catindex)=>{
					
					if(index==catindex)
					{
							cat.isshow=!cat.isshow;
						
					}
					
				});
				
				
			},
			toggle_cat(index,index2)
			{
				this.catlist.forEach((cat,catindex)=>{
					
					if(index==catindex)
					{
							cat.list.forEach((artlist,artlistindex)=>{
							if(index2==artlistindex)
							{
									artlist.isshow=!artlist.isshow;
							}
							
						});
						
					}
					
				});
			},
		}
	}
</script>

<style>
	.page {
		background-color: rgba(255, 255, 255, 1.000000);
		position: relative;
		width: 750rpx;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}

	.box_1 {
		width: 750rpx;
		height: 120rpx;
		display: flex;
		flex-direction: column;
	}

	.nav-bar_1 {
		height: 93rpx;
		display: flex;
		width: 750rpx;
		margin: 26rpx 0 0 0;
		color: rgba(230, 0, 18, 1);
		font-size: 40rpx;
		padding: 0 30rpx;
	}

	.nav-bar_1>view {
		display: inline-block;
	}

	.arr-right {
		margin-right: 180rpx;
	}
	
	.searchfrm
	{
		display: flex;
		background-image: url(../../static/zhishitixi/searchbg.png);
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
		padding: 2rpx 0 ;
	}
	
	.searchfrm>input
	{
		border:1px solid red;
		height: 24rpx;
		margin: 0;
		font-size: 24rpx;
	}
	
	.searchicon
	{
		width: 54rpx;
		
	}
	

	.content
	{
		width: 700rpx;
		margin:10rpx auto;
		border-top:1px solid rgba(0,0,0,0.1);
		padding:20rpx 0;
	}

	.catitem
	{
		margin: 40rpx auto 10rpx auto;
		text-align: center;
		
	}
	
	.cattitle
	{
		color:#e60012;
		font-size: 32rpx;
	}
	
	.bar-top
	{
		height: 20rpx;
		background-color: white;
		position: absolute;
		top:0;
		left:0;
		width: 100%;
	}
	
	.bar-bottom
	{
		height: 30rpx;
		background-color: white;
		position: absolute;
		bottom:0;
		left:0;
		width: 100%;
	}
	
	.artlist
	{
		padding:0 30rpx;
	}
	
	.artlist-f
	{
		margin-top: 40rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	
	
	.artlist-f>view
	{
		padding:10rpx;
		text-align: left;

	}
	
	.artimg
	{
		width: 280rpx;
		height: 280rpx;
	}
	
	.arttitle
	{
		margin-top: 14rpx;
		font-weight: bold;
		font-size: 28rpx;
	}
	
	.artprice
	{
		margin-top: 8rpx;
		color:#e60012;
		font-weight: bold;
		font-size: 26rpx;
	}
	
	.artregionprice
	{
		margin-top: 8rpx;
		font-size: 24rpx;
		color: #aaa;
	}

</style>