zhiboknow.vue 4.0 KB
<template>
	<view class="containerk">
		<view class="searhtoppage flextwo">
			<view class="searchtopk flextwo" @click='entersearch'>
				<image src="../../static/search.png" mode="" class="search"></image>
				<view class='searchleft'>
					输入您搜索的内容
					
				</view>

			</view>
			<view class="cancelname">取消</view>
		</view>
		<view class="knowkind flexone">
			<view class="knowkindleft">
				<view class="knowkindleftitem" :class="selone==index?'knowkindactive':''" v-for="(item,index) in firstlist" :key="index"
				 @click="selkind(item.id,index)">{{item.name}}</view>

			</view>
			<view class="knowkindright">
				<view class="nodata" v-if="seclist.length==0">暂无数据</view>
				<view v-else>
					<view class="knowkindfightitem" v-for="(item,index) in seclist" :key="index">
						<view class="knowtopbox flextwo">
							<view class="knowtopname">{{item.name}}</view>
							<view class="more flexone" @click="seemorekind(item.id)">
								查看所有美妆
								<img src="../../static/yourow.png" alt="" class="yourow">
							</view>
						</view>
						<view class="knowtoplist flexone">
							<view class="knowtoplistitem" v-for="(itemk,indexk) in item.child" :key="indexk" @click="jumpsanji(item.id,itemk.id)">
								<view class="knowtopimg">
									<image :src="itemk.image" mode=""></image>
								</view>
								<view class="knowword">{{itemk.name}}</view>
							</view>

						</view>
					</view>

				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import app from "../../App.vue";
	import goodlist from "../../compontent/goodlist.vue";
	import goodkind from "../../compontent/goodkind.vue";
	export default {
		components: {
			goodlist,
			goodkind
		},
		data() {
			return {
				firstlist: [],
				cate_id: '', //一级分类id
				seclist: [],
				selone: 0,
				id: "", //分类id
			}
		},
		onLoad(options) {
			this.getkind()
			if (options.id) {
				this.id = options.id //分类id
			}

		},
		methods: {
			// 获取分类 一级
			getkind() {
				let that = this;
				var url = "category/getCategoryOne"
				let param = {

				}
				app.post(url, param, "post").then(res => {
					console.log('我想要的', res)
					that.firstlist = res;
					if (that.id != '') {
						that.firstlist.forEach(function(value, index,array) {
							if (value.id == that.id) {
								that.cate_id = value.id;
								that.selone=index
							}
						})
					} else {
						that.cate_id = res[0].id
					}


					that.getseclist()

				}).catch(err => {
					console.log(err)
				})
			},
			selkind(id, index) {
				this.cate_id = id;
				this.seclist = [];
				this.selone = index;
				this.getseclist()
			},
			// 获取二级分类
			getseclist() {
				let that = this;
				var url = "category/getCategory"
				let param = {
					cate_id: that.cate_id
				}
				app.post(url, param, "post").then(res => {
					console.log('我想要的', res)
					that.seclist = res;


				}).catch(err => {
					console.log(err)
				})
			},
			// 跳转三级分类
			jumpsanji(erid, sanid) {
				uni.navigateTo({
					url: "/pages/xinyuan/sanjikind?id=" + this.cate_id + '&secid=' + erid + '&sanid=' + sanid //cate_id  一级分类id   id 二级分类id
				})
			},

			// 查看更多跳转二级分类
			seemorekind(id) {
				if (this.cate_id == 0) {
					uni.navigateTo({
						url: "/pages/xinyuan/erjikind?id=" + id + '&type=' + 1 //一级分类id
					})
				} else {
					if (id == 0) {
						uni.navigateTo({
							url: "/pages/xinyuan/erjikind?id=" + this.cate_id + '&type=' + 1 //一级分类id
						})
					} else {
						uni.navigateTo({
							url: "/pages/xinyuan/erjikind?id=" + id + '&type=' + 2 //二级分类id
						})
					}
				}

			},
			// 进入搜索页面
			entersearch() {
				uni.navigateTo({
					url: '/pages/xinyuan/search'
				})
			},

		}

	}
</script>

<style>
	@import url("../../style/xinyuan");

	.containerk {
		padding: 32rpx 28rpx;
		box-sizing: border-box;
	}

	.searhtoppage {
		padding: 0 32rpx;
		box-sizing: border-box;
	}
</style>